"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Lock } from "lucide-react";
import { manualOverrideVerificationAction } from "@/features/organizer/actions";

interface ManualVerifyButtonProps {
  userId: string;
  defaultBankAccountName: string;
}

export function ManualVerifyButton({
  userId,
  defaultBankAccountName,
}: ManualVerifyButtonProps) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [note, setNote] = useState("");
  const [bankName, setBankName] = useState("");
  const [bankAccountNumber, setBankAccountNumber] = useState("");
  const [bankAccountName, setBankAccountName] = useState(defaultBankAccountName);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  async function handleSubmit() {
    setLoading(true);
    setError("");
    const res = await manualOverrideVerificationAction({
      userId,
      note,
      bankName,
      bankAccountNumber,
      bankAccountName,
    });
    setLoading(false);
    if ("error" in res && res.error) {
      setError(res.error);
      return;
    }
    setOpen(false);
    setNote("");
    setBankName("");
    setBankAccountNumber("");
    router.refresh();
  }

  if (!open) {
    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="inline-flex items-center gap-1.5 rounded-xl border border-secondary-300 bg-white px-4 py-2 text-sm font-bold text-secondary-700 hover:bg-secondary-50"
      >
        <Lock size={18} strokeWidth={2} aria-hidden />
        Manual verify (tanpa KYC)
      </button>
    );
  }

  return (
    <div className="space-y-3 rounded-xl border border-secondary-200 bg-secondary-50/60 p-4">
      <p className="text-xs text-secondary-900">
        Manual override: bikin verifikasi APPROVED tanpa upload KYC. Pakai HANYA
        untuk partner trusted referral atau kasus khusus. Ter-flag jelas di
        admin UI sebagai &quot;manual override&quot;.
      </p>

      <div>
        <label className="mb-1 block text-xs font-semibold text-secondary-900">
          Alasan / referensi (min 10 char)
        </label>
        <textarea
          rows={2}
          value={note}
          onChange={(e) => setNote(e.target.value)}
          maxLength={500}
          placeholder="contoh: Partner referral dari acara X, kontrak signed #PR-2026-15."
          className="w-full rounded-xl border border-secondary-200 bg-white px-3 py-2 text-sm text-neutral-800 placeholder:text-neutral-400 focus:border-secondary-400"
        />
      </div>

      <div className="grid gap-2 sm:grid-cols-3">
        <input
          type="text"
          value={bankName}
          onChange={(e) => setBankName(e.target.value)}
          placeholder="Nama bank"
          className="rounded-lg border border-secondary-200 bg-white px-3 py-1.5 text-sm focus:border-secondary-400"
        />
        <input
          type="text"
          value={bankAccountNumber}
          onChange={(e) => setBankAccountNumber(e.target.value)}
          placeholder="Nomor rekening"
          className="rounded-lg border border-secondary-200 bg-white px-3 py-1.5 text-sm focus:border-secondary-400"
        />
        <input
          type="text"
          value={bankAccountName}
          onChange={(e) => setBankAccountName(e.target.value)}
          placeholder="Atas nama"
          className="rounded-lg border border-secondary-200 bg-white px-3 py-1.5 text-sm focus:border-secondary-400"
        />
      </div>

      {error && (
        <div className="rounded-lg bg-red-100 px-3 py-2 text-xs font-medium text-red-700">
          {error}
        </div>
      )}

      <div className="flex gap-2">
        <button
          type="button"
          onClick={handleSubmit}
          disabled={
            loading ||
            note.trim().length < 10 ||
            !bankName.trim() ||
            !bankAccountNumber.trim() ||
            !bankAccountName.trim()
          }
          className="rounded-xl bg-secondary-600 px-4 py-2 text-sm font-bold text-white hover:bg-secondary-700 disabled:cursor-not-allowed disabled:opacity-50"
        >
          {loading ? "Memproses..." : "Konfirmasi Manual Verify"}
        </button>
        <button
          type="button"
          onClick={() => {
            setOpen(false);
            setNote("");
          }}
          className="rounded-xl border border-neutral-200 bg-white px-4 py-2 text-sm font-medium text-neutral-600 hover:bg-neutral-50"
        >
          Batal
        </button>
      </div>
    </div>
  );
}