"use client";

import { useState, useTransition, useRef } from "react";
import { useRouter } from "next/navigation";
import { Upload, FileImage, AlertCircle, CheckCircle } from "lucide-react";
import { submitInvoicePayment } from "@/services/refund.service";
import { formatCurrency } from "@/lib/formatters/currency";
import type { BankAccount } from "@/types/common";
import styles from "./InvoicePaymentForm.module.css";

interface InvoicePaymentFormProps {
  token: string;
  bankAccounts: BankAccount[];
  outstandingAmount: number;
}

export default function InvoicePaymentForm({
  token,
  bankAccounts,
  outstandingAmount,
}: InvoicePaymentFormProps) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [file, setFile] = useState<File | null>(null);
  const [preview, setPreview] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFile = (f: File) => {
    if (f.size > 5 * 1024 * 1024) {
      setError("File terlalu besar. Maksimal 5 MB.");
      return;
    }
    if (!["image/jpeg", "image/png", "image/webp"].includes(f.type)) {
      setError("Format tidak didukung. Gunakan JPG, PNG, atau WEBP.");
      return;
    }
    setError(null);
    setFile(f);
    setPreview(URL.createObjectURL(f));
  };

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

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!file) {
      setError("Pilih file bukti pembayaran terlebih dahulu.");
      return;
    }
    setError(null);

    startTransition(async () => {
      try {
        await submitInvoicePayment(token, file);
        setSuccess(true);
        setTimeout(() => router.refresh(), 1500);
      } catch (err) {
        setError(err instanceof Error ? err.message : "Gagal upload. Coba kembali.");
      }
    });
  };

  if (success) {
    return (
      <div className={styles.successState}>
        <CheckCircle size={32} className={styles.successIcon} aria-hidden />
        <p className={styles.successText}>Bukti pembayaran berhasil diupload! Menunggu konfirmasi admin.</p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className={styles.form} noValidate>
      <div className={styles.bankList}>
        {bankAccounts.map((bank) => (
          <div key={bank.id} className={styles.bankCard}>
            <div className={styles.bankRow}>
              <span className={styles.bankLabel}>Bank</span>
              <span className={styles.bankValue}>{bank.bank_name}</span>
            </div>
            <div className={styles.bankRow}>
              <span className={styles.bankLabel}>No. Rekening</span>
              <span className={`${styles.bankValue} ${styles.accountNumber}`}>{bank.account_number}</span>
            </div>
            <div className={styles.bankRow}>
              <span className={styles.bankLabel}>Atas Nama</span>
              <span className={styles.bankValue}>{bank.account_holder}</span>
            </div>
          </div>
        ))}
        <div className={styles.totalRow}>
          <span>Jumlah yang Harus Dibayar</span>
          <span>{formatCurrency(outstandingAmount)}</span>
        </div>
      </div>

      <div
        className={`${styles.dropZone} ${preview ? styles.hasFile : ""}`}
        onDragOver={(e) => e.preventDefault()}
        onDrop={handleDrop}
        onClick={() => fileInputRef.current?.click()}
        role="button"
        tabIndex={0}
        aria-label="Upload bukti pembayaran"
        onKeyDown={(e) => e.key === "Enter" && fileInputRef.current?.click()}
      >
        <input
          ref={fileInputRef}
          type="file"
          accept="image/jpeg,image/png,image/webp"
          className={styles.fileInput}
          onChange={(e) => {
            const f = e.target.files?.[0];
            if (f) handleFile(f);
          }}
          id="invoice-proof-input"
          aria-label="Pilih file bukti pembayaran"
        />
        {preview ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={preview} alt="Preview bukti pembayaran" className={styles.preview} />
        ) : (
          <div className={styles.dropContent}>
            <div className={styles.dropIcon}>
              <FileImage size={28} aria-hidden />
            </div>
            <p className={styles.dropText}>
              <strong>Klik untuk pilih</strong> atau drag & drop
            </p>
            <p className={styles.dropHint}>JPG, PNG, WEBP — maks 5 MB</p>
          </div>
        )}
      </div>

      {preview && (
        <button
          type="button"
          className="btn btn-ghost btn-sm"
          onClick={() => {
            setFile(null);
            setPreview(null);
          }}
          id="invoice-clear-file"
        >
          Ganti File
        </button>
      )}

      {error && (
        <div className={styles.errorMsg} role="alert">
          <AlertCircle size={14} aria-hidden />
          {error}
        </div>
      )}

      <button
        type="submit"
        disabled={isPending || !file}
        className="btn btn-primary btn-lg"
        id="invoice-upload-submit"
        style={{ justifyContent: "center" }}
      >
        <Upload size={16} aria-hidden />
        {isPending ? "Mengupload..." : "Upload Bukti Bayar"}
      </button>
    </form>
  );
}