"use client";

import React, { useState, useTransition, useRef } from "react";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import Link from "next/link";
import {
  CreditCard,
  Clock,
  CheckCircle2,
  AlertCircle,
  XCircle,
  Upload,
  FileText,
  Trash2,
  RefreshCw,
  Info,
  ChevronDown,
} from "lucide-react";
import { submitPaymentProof } from "@/services/booking.service";
import { formatCurrency } from "@/lib/formatters/currency";
import { paymentProofSchema, type PaymentProofFormValues } from "@/lib/validators/schemas";
import type { PaymentInfo } from "@/types/booking";
import type { BookingStatus } from "@/types/common";
import styles from "./PaymentComponents.module.css";

interface PaymentFormCardProps {
  token: string;
  bookingCode: string;
  bookingStatus: BookingStatus;
  bookingStatusLabel: string;
  payment: PaymentInfo | null;
  rejectionReason?: string | null;
}

export default function PaymentFormCard({
  token,
  bookingCode,
  bookingStatus,
  bookingStatusLabel,
  payment,
  rejectionReason,
}: PaymentFormCardProps) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [file, setFile] = useState<File | null>(null);
  const [preview, setPreview] = useState<string | null>(null);
  const [fileError, setFileError] = useState<string | null>(null);
  const [submitError, setSubmitError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const canSubmit = payment?.can_submit_payment ?? false;

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<PaymentProofFormValues>({
    resolver: zodResolver(paymentProofSchema),
    defaultValues: {
      bank_account_id: payment?.bank_accounts[0]?.id ?? "",
      transfer_date: new Date().toISOString().slice(0, 10),
      transfer_amount: payment?.amount ?? 0,
      sender_bank: "",
      sender_account_name: "",
      notes: "",
    },
  });

  const formatFileSize = (bytes: number): string => {
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
  };

  const handleFile = (f: File) => {
    if (f.size > 5 * 1024 * 1024) {
      setFileError("Ukuran file terlalu besar. Maksimal 5 MB.");
      return;
    }
    if (!["image/jpeg", "image/jpg", "image/png", "application/pdf"].includes(f.type)) {
      setFileError("Format berkas tidak didukung. Gunakan JPG, PNG, atau PDF.");
      return;
    }
    setFileError(null);
    setFile(f);
    setPreview(f.type === "application/pdf" ? null : URL.createObjectURL(f));
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    const droppedFile = e.dataTransfer.files[0];
    if (droppedFile) handleFile(droppedFile);
  };

  const handleRemoveFile = (e: React.MouseEvent) => {
    e.stopPropagation();
    setFile(null);
    setPreview(null);
    setFileError(null);
    if (fileInputRef.current) {
      fileInputRef.current.value = "";
    }
  };

  const onSubmit = (data: PaymentProofFormValues) => {
    if (!file) {
      setFileError("Silakan pilih atau unggah file bukti pembayaran.");
      return;
    }
    setFileError(null);
    setSubmitError(null);

    startTransition(async () => {
      try {
        await submitPaymentProof(token, { ...data, payment_proof: file });
        setSuccess(true);
        setTimeout(() => router.refresh(), 1600);
      } catch (err) {
        setSubmitError(err instanceof Error ? err.message : "Gagal mengunggah bukti pembayaran. Silakan coba kembali.");
      }
    });
  };

  // Status badge styling helper
  const getBadgeClass = (status: BookingStatus) => {
    if (status === "CONFIRMED") return styles.badgeSuccess;
    if (status === "PAYMENT_REJECTED") return styles.badgeDanger;
    if (status === "WAITING_PAYMENT_VERIFICATION") return styles.badgeInfo;
    return styles.badgePending;
  };

  const getStatusIcon = (status: BookingStatus) => {
    if (status === "CONFIRMED") return <CheckCircle2 size={15} aria-hidden="true" />;
    if (status === "PAYMENT_REJECTED") return <XCircle size={15} aria-hidden="true" />;
    if (status === "WAITING_PAYMENT_VERIFICATION") return <Clock size={15} aria-hidden="true" />;
    return <Clock size={15} aria-hidden="true" />;
  };

  return (
    <div className={styles.mainPaymentCard}>
      {/* 1. Header inside Card */}
      <div className={styles.cardHeader}>
        <div className={styles.headerLeft}>
          <div className={styles.headerIconCircle} aria-hidden="true">
            <CreditCard size={22} className={styles.headerIcon} />
          </div>
          <div className={styles.headerMeta}>
            <h2 className={styles.headerTitle}>Detail Pembayaran</h2>
            <p className={styles.headerBookingCode}>
              Kode Booking: <strong>{bookingCode}</strong>
            </p>
          </div>
        </div>

        <div className={`${styles.statusBadge} ${getBadgeClass(bookingStatus)}`}>
          {getStatusIcon(bookingStatus)}
          <span>{payment?.status_label || bookingStatusLabel || "Menunggu Pembayaran"}</span>
        </div>
      </div>

      {/* 2. Rejection Notice if any */}
      {bookingStatus === "PAYMENT_REJECTED" && rejectionReason && (
        <div className={styles.rejectedBanner} role="alert">
          <AlertCircle size={18} className={styles.rejectedIcon} aria-hidden="true" />
          <div className={styles.rejectedContent}>
            <p className={styles.rejectedTitle}>Pembayaran Ditolak</p>
            <p className={styles.rejectedReason}>{rejectionReason}</p>
            <p className={styles.rejectedHelp}>
              Silakan unggah kembali bukti transfer yang valid dan sesuai nominal tagihan di bawah ini.
            </p>
          </div>
        </div>
      )}

      {/* 3. Verification Notice if already uploaded and waiting */}
      {bookingStatus === "WAITING_PAYMENT_VERIFICATION" && (
        <div className={styles.verificationBanner} role="status">
          <Clock size={20} className={styles.verificationIcon} aria-hidden="true" />
          <div className={styles.verificationContent}>
            <p className={styles.verificationTitle}>Menunggu Verifikasi Pembayaran</p>
            <p className={styles.verificationDesc}>
              Bukti pembayaran Anda sudah diterima dan sedang diverifikasi oleh admin. Proses verifikasi
              berlangsung maksimal 1×24 jam.
            </p>
          </div>
        </div>
      )}

      {/* 4. Success State after upload submission */}
      {success ? (
        <div className={styles.successStateBox}>
          <div className={styles.successIconCircle}>
            <CheckCircle2 size={36} className={styles.successIcon} aria-hidden="true" />
          </div>
          <h3 className={styles.successTitle}>Bukti Pembayaran Terkirim!</h3>
          <p className={styles.successDesc}>
            Terima kasih, bukti transfer Anda berhasil diunggah dan segera kami proses untuk konfirmasi kursi trip Anda.
          </p>
          <div className={styles.successActions}>
            <Link href={`/booking/${token}/status`} className="btn btn-primary" id="payment-view-status-btn">
              Cek Status Booking
            </Link>
          </div>
        </div>
      ) : null}

      {/* 5. Payment Amount Block (Highlight Focal Point) */}
      {!success && payment && (
        <div className={styles.amountHighlightBlock}>
          <p className={styles.amountTypeLabel}>
            {bookingStatus === "WAITING_FINAL_PAYMENT"
              ? `Sisa Pelunasan (dari total ${formatCurrency(payment.grand_total)})`
              : payment.payment_plan === "DOWN_PAYMENT"
              ? `DP 50% (dari total ${formatCurrency(payment.grand_total)})`
              : `Pelunasan Penuh (${formatCurrency(payment.grand_total)})`}
          </p>

          <p className={styles.amountFocalPrice} id="payment-focal-amount">
            {formatCurrency(payment.amount)}
          </p>

          <div className={styles.amountHelperRow}>
            <Info size={15} className={styles.amountHelperIcon} aria-hidden="true" />
            <span className={styles.amountHelperText}>
              Lakukan pembayaran sesuai nominal di atas agar proses konfirmasi berjalan lancar.
            </span>
          </div>
        </div>
      )}

      {/* 6. Form Content */}
      {!success && canSubmit && payment && (
        <form onSubmit={handleSubmit(onSubmit)} className={styles.paymentForm} noValidate>
          {/* Destination Bank Account */}
          <div className={styles.formGroup}>
            <label htmlFor="payment-bank-account" className={styles.formLabel}>
              Transfer ke Rekening <span className={styles.requiredMark}>*</span>
            </label>

            {payment.bank_accounts.length > 0 ? (
              <div className={styles.selectWrapper}>
                <select
                  id="payment-bank-account"
                  className={styles.selectInput}
                  {...register("bank_account_id")}
                >
                  {payment.bank_accounts.map((bank) => (
                    <option key={bank.id} value={bank.id}>
                      {bank.bank} — {bank.account_number} a.n. {bank.account_holder}
                    </option>
                  ))}
                </select>
                <ChevronDown size={18} className={styles.selectChevron} aria-hidden="true" />
              </div>
            ) : (
              <div className={styles.noBankNotice} role="alert">
                <AlertCircle size={15} aria-hidden="true" />
                <span>Rekening tujuan belum tersedia. Silakan hubungi admin kami.</span>
              </div>
            )}
            {errors.bank_account_id && (
              <p className={styles.fieldError}>{errors.bank_account_id.message}</p>
            )}
          </div>

          {/* Row 1: Tanggal Transfer & Jumlah Transfer */}
          <div className={styles.formGrid2}>
            <div className={styles.formGroup}>
              <label htmlFor="payment-transfer-date" className={styles.formLabel}>
                Tanggal Transfer <span className={styles.requiredMark}>*</span>
              </label>
              <input
                id="payment-transfer-date"
                type="date"
                className={`${styles.textInput} ${errors.transfer_date ? styles.inputError : ""}`}
                {...register("transfer_date")}
              />
              {errors.transfer_date && (
                <p className={styles.fieldError}>{errors.transfer_date.message}</p>
              )}
            </div>

            <div className={styles.formGroup}>
              <label htmlFor="payment-transfer-amount" className={styles.formLabel}>
                Jumlah Transfer <span className={styles.requiredMark}>*</span>
              </label>
              <input
                id="payment-transfer-amount"
                type="number"
                className={`${styles.textInput} ${errors.transfer_amount ? styles.inputError : ""}`}
                {...register("transfer_amount", { valueAsNumber: true })}
              />
              <p className={styles.fieldHint}>
                Tagihan: <strong>{formatCurrency(payment.amount)}</strong>
              </p>
              {errors.transfer_amount && (
                <p className={styles.fieldError}>{errors.transfer_amount.message}</p>
              )}
            </div>
          </div>

          {/* Row 2: Bank Pengirim & Nama Pengirim */}
          <div className={styles.formGrid2}>
            <div className={styles.formGroup}>
              <label htmlFor="payment-sender-bank" className={styles.formLabel}>
                Bank Pengirim
              </label>
              <input
                id="payment-sender-bank"
                type="text"
                placeholder="cth. BCA (opsional)"
                className={`${styles.textInput} ${errors.sender_bank ? styles.inputError : ""}`}
                {...register("sender_bank")}
              />
              {errors.sender_bank && (
                <p className={styles.fieldError}>{errors.sender_bank.message}</p>
              )}
            </div>

            <div className={styles.formGroup}>
              <label htmlFor="payment-sender-name" className={styles.formLabel}>
                Nama Pengirim
              </label>
              <input
                id="payment-sender-name"
                type="text"
                placeholder="Sesuai rekening pengirim (opsional)"
                className={`${styles.textInput} ${errors.sender_account_name ? styles.inputError : ""}`}
                {...register("sender_account_name")}
              />
              {errors.sender_account_name && (
                <p className={styles.fieldError}>{errors.sender_account_name.message}</p>
              )}
            </div>
          </div>

          {/* Upload Bukti Bayar Dropzone */}
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>
              Upload Bukti Bayar <span className={styles.requiredMark}>*</span>
            </label>

            <div
              className={`${styles.dropZone} ${file ? styles.dropZoneHasFile : ""} ${
                fileError ? styles.dropZoneError : ""
              }`}
              onDragOver={(e) => e.preventDefault()}
              onDrop={handleDrop}
              role="button"
              tabIndex={0}
              aria-label="Upload bukti transfer pembayaran"
              onClick={() => fileInputRef.current?.click()}
              onKeyDown={(e) => {
                if (e.key === "Enter" || e.key === " ") {
                  e.preventDefault();
                  fileInputRef.current?.click();
                }
              }}
            >
              <input
                ref={fileInputRef}
                type="file"
                accept="image/jpeg,image/png,application/pdf"
                className={styles.hiddenFileInput}
                onChange={(e) => {
                  const selected = e.target.files?.[0];
                  if (selected) handleFile(selected);
                }}
                id="payment-proof-file-input"
                aria-label="Pilih file bukti pembayaran"
              />

              {file ? (
                <div className={styles.fileSelectedContainer} onClick={(e) => e.stopPropagation()}>
                  {preview ? (
                    <div className={styles.previewImageWrap}>
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img src={preview} alt="Preview Bukti Bayar" className={styles.previewImg} />
                    </div>
                  ) : (
                    <div className={styles.previewPdfWrap}>
                      <FileText size={36} className={styles.pdfIcon} aria-hidden="true" />
                    </div>
                  )}

                  <div className={styles.fileMeta}>
                    <p className={styles.fileName}>{file.name}</p>
                    <p className={styles.fileSize}>{formatFileSize(file.size)}</p>
                  </div>

                  <div className={styles.fileActions}>
                    <button
                      type="button"
                      className={styles.fileChangeBtn}
                      onClick={() => fileInputRef.current?.click()}
                    >
                      <RefreshCw size={14} aria-hidden="true" />
                      <span>Ganti</span>
                    </button>
                    <button
                      type="button"
                      className={styles.fileRemoveBtn}
                      onClick={handleRemoveFile}
                    >
                      <Trash2 size={14} aria-hidden="true" />
                      <span>Hapus</span>
                    </button>
                  </div>
                </div>
              ) : (
                <div className={styles.dropPrompt}>
                  <div className={styles.dropIconWrap}>
                    <Upload size={22} className={styles.dropIcon} aria-hidden="true" />
                  </div>
                  <p className={styles.dropText}>
                    <strong>Klik untuk pilih</strong> atau drag & drop
                  </p>
                  <p className={styles.dropSubtext}>JPG, PNG, atau PDF — maks 5 MB</p>
                </div>
              )}
            </div>

            {fileError && <p className={styles.fieldError}>{fileError}</p>}
          </div>

          {/* Submission Error Banner */}
          {submitError && (
            <div className={styles.errorAlert} role="alert">
              <AlertCircle size={16} aria-hidden="true" />
              <span>{submitError}</span>
            </div>
          )}

          {/* Submit Button */}
          <button
            type="submit"
            disabled={isPending}
            className={styles.submitBtn}
            id="payment-submit-button"
          >
            <Upload size={18} aria-hidden="true" />
            <span>{isPending ? "Mengupload Bukti Bayar..." : "Upload Bukti Bayar"}</span>
          </button>
        </form>
      )}

      {/* Fallback if cannot submit */}
      {!canSubmit && !success && (
        <div className={styles.cannotSubmitBox}>
          <p className={styles.cannotSubmitText}>
            {bookingStatus === "CONFIRMED"
              ? "Pembayaran booking ini telah diverifikasi dan lunas."
              : bookingStatus === "WAITING_PAYMENT_VERIFICATION"
              ? "Bukti pembayaran sedang dalam proses verifikasi oleh tim admin."
              : "Status booking ini saat ini tidak memerlukan pengunggahan bukti pembayaran."}
          </p>
          <div className={styles.cannotSubmitActions}>
            <Link href={`/booking/${token}/status`} className="btn btn-ghost btn-sm" id="payment-view-status-link">
              Lihat Detail Booking
            </Link>
          </div>
        </div>
      )}
    </div>
  );
}