import React, { useState } from "react";
import { UmkRequest } from "../../types/umk";
import { 
  X, 
  Wallet, 
  Calendar, 
  User, 
  DollarSign, 
  FileText, 
  Building2, 
  Clock, 
  ShieldCheck, 
  CheckCircle2, 
  AlertCircle,
  HelpCircle
} from "lucide-react";

interface UmkRequestFormModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (newUmk: UmkRequest) => void;
}

export const UmkRequestFormModal: React.FC<UmkRequestFormModalProps> = ({
  isOpen,
  onClose,
  onSubmit
}) => {
  const todayStr = new Date().toISOString().split("T")[0];
  
  // Calculate 14 days / 2 weeks from now
  const defaultDueDate = new Date(Date.now() + 14 * 24 * 60 * 60 * 1000).toISOString().split("T")[0];

  const [requestDate, setRequestDate] = useState(todayStr);
  const [disbursementDate, setDisbursementDate] = useState(todayStr);
  const [dueDate, setDueDate] = useState(defaultDueDate);
  const [amount, setAmount] = useState<number>(15000000);
  const [periodName, setPeriodName] = useState("Kas Kecil Seksi Umum GA Periode I September 2026");
  
  const [requesterName, setRequesterName] = useState("Rudi Hermawan, S.Sos.");
  const [requesterNip, setRequesterNip] = useState("198820120015");
  const [requesterPosition, setRequesterPosition] = useState("Kepala Seksi Umum & Logistik (GA Head)");

  const [custodianName, setCustodianName] = useState("Siti Rahmawati, A.Md.");
  const [custodianNip, setCustodianNip] = useState("199420180042");
  const [custodianPosition, setCustodianPosition] = useState("Pemegang Kasir Kas Kecil Seksi Umum");

  const [purpose, setPurpose] = useState(
    "Pengisian Kas Kecil Seksi Umum (GA) untuk operasional harian kantor, pembelian bahan habis pakai (Expendables: ATK, perlengkapan sanitasi, pantry), BBM dinas, pengiriman dokumen kilat, dan perbaikan sarana ringan."
  );

  const [paymentMethod, setPaymentMethod] = useState<"Transfer Bank Operasional" | "Kasir Tunai (Cash Out)">("Transfer Bank Operasional");
  const [bankSource, setBankSource] = useState("Bank Mandiri Giro No. 122-00-998877-1 a.n PT MEDIAN CLOUD");
  const [notes, setNotes] = useState("Pengajuan UMK operasional harian sesuai plafon kas kecil GA dengan batas pertanggungjawaban 2 minggu.");

  // When disbursement date changes, auto update due date to +14 days
  const handleDisbursementDateChange = (newDate: string) => {
    setDisbursementDate(newDate);
    try {
      const d = new Date(newDate);
      d.setDate(d.getDate() + 14);
      setDueDate(d.toISOString().split("T")[0]);
    } catch {
      // ignore
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    const timestamp = Date.now();
    const randomSuffix = Math.floor(100 + Math.random() * 900);
    const umkNumber = `UMK-GA/2026/09/${randomSuffix}`;
    const voucherOutNumber = `V-OUT-UMK/KEU/2026/09/${randomSuffix}`;
    const voucherRetNumber = `V-RET-UMK/GA/2026/09/${randomSuffix}`;
    const voucherRealNumber = `V-REAL-UMK/GA/2026/09/${randomSuffix}`;

    const newUmk: UmkRequest = {
      id: `umk-${timestamp}`,
      umkNumber,
      requestDate,
      disbursementDate,
      dueDate,
      periodName,
      department: "Seksi Umum (General Affairs / GA)",
      requesterNip,
      requesterName,
      requesterPosition,
      custodianNip,
      custodianName,
      custodianPosition,
      purpose,
      status: "Menunggu Approval Keuangan",
      
      // 1 Akun Anggaran UMK Induk
      disbursementVoucher: {
        voucherNumber: voucherOutNumber,
        budgetAccountCode: "1101.02",
        budgetAccountName: "1101.02 - Kas Kecil Seksi Umum GA / UMK Operasional",
        amount,
        paymentMethod,
        bankSource,
        disbursedBy: "Menunggu Disahkan Keuangan / CFO",
        disbursedByNip: "197019950002",
        disbursedAt: "-",
        notes
      },

      // Voucher 1: Pengembalian UMK
      returnVoucher: {
        voucherNumber: voucherRetNumber,
        returnAmount: 0,
        returnDate: "-",
        returnMethod: "Setor Tunai Kasir Keuangan",
        depositAccount: "Kasir Perbendaharaan Keuangan Pusat",
        receiptNumber: "-",
        receivedByNip: "-",
        receivedByName: "-",
        status: "Belum Disetor",
        notes: "Belum ada pengembalian kas."
      },

      // Voucher 2: Realisasi UMK
      realizationVoucher: {
        voucherNumber: voucherRealNumber,
        totalRealizedAmount: 0,
        totalExpendablesAmount: 0,
        totalNonExpendablesAmount: 0,
        submissionDate: "-",
        status: "Draft LPJ",
        notes: "Menunggu pencairan dana untuk memulai pencatatan belanja kas kecil.",
        expenseItems: []
      },

      balanceAmount: amount,
      isReconciled: false,

      approvedByHeadNip: requesterNip,
      approvedByHeadName: requesterName,
      approvedByHeadAt: `${requestDate} 10:00 WIB`,

      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString()
    };

    onSubmit(newUmk);
    onClose();
  };

  const formatRupiah = (val: number) => {
    return new Intl.NumberFormat("id-ID", {
      style: "currency",
      currency: "IDR",
      maximumFractionDigits: 0
    }).format(val);
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-950/80 backdrop-blur-sm flex justify-center items-center p-3 sm:p-6">
      <div className="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-3xl shadow-2xl overflow-hidden my-4">
        
        {/* Header */}
        <div className="bg-gradient-to-r from-emerald-950/80 via-slate-900 to-sky-950/80 px-6 py-4 border-b border-slate-700 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="p-2.5 bg-emerald-500/20 border border-emerald-500/40 text-emerald-400 rounded-xl">
              <Wallet className="w-5 h-5" />
            </div>
            <div>
              <h2 className="text-base font-bold text-white flex items-center gap-2">
                Pengajuan Uang Muka Kerja (UMK) Kas Kecil GA
                <span className="text-[10px] font-mono font-bold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 px-2 py-0.5 rounded">
                  SOP 2 Minggu
                </span>
              </h2>
              <p className="text-xs text-slate-400">
                Pengisian dana kas kecil operasional harian dengan 1 Akun Anggaran UMK Induk
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Form Body */}
        <form onSubmit={handleSubmit} className="p-6 space-y-5 max-h-[80vh] overflow-y-auto">
          
          {/* SOP Alert Banner */}
          <div className="bg-slate-800/80 border border-amber-500/30 rounded-xl p-3.5 flex items-start gap-3 text-xs">
            <Clock className="w-5 h-5 text-amber-400 shrink-0 mt-0.5" />
            <div className="space-y-1">
              <div className="font-bold text-amber-300 uppercase tracking-wide flex items-center gap-2">
                <span>Ketentuan Pertanggungjawaban 2 Minggu (14 Hari Kalender)</span>
              </div>
              <p className="text-slate-300 text-[11px] leading-relaxed">
                Dana UMK Kas Kecil ini wajib dipertanggungjawabkan paling lama <strong>2 Minggu</strong> sejak tanggal pencairan dengan melaporkan <strong>2 Voucher</strong>: 
                (1) <em>Voucher Pengembalian UMK</em> dan (2) <em>Voucher Realisasi UMK</em> bermata anggaran Expendables/Operasional beserta kuitansi sah.
              </p>
            </div>
          </div>

          {/* Section 1: Periode & Akun Anggaran Induk */}
          <div className="space-y-3">
            <h3 className="text-xs font-bold uppercase tracking-wider text-slate-400 flex items-center gap-1.5">
              <Building2 className="w-4 h-4 text-emerald-400" />
              <span>1. Akun Anggaran & Identitas Pengajuan</span>
            </h3>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="space-y-1 sm:col-span-2">
                <label className="text-xs font-bold text-slate-300">
                  Nama Periode Kas Kecil <span className="text-rose-400">*</span>
                </label>
                <input
                  type="text"
                  required
                  value={periodName}
                  onChange={(e) => setPeriodName(e.target.value)}
                  className="w-full px-3.5 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white focus:outline-none focus:border-emerald-500"
                  placeholder="Contoh: Kas Kecil Seksi Umum GA Periode I September 2026"
                />
              </div>

              <div className="space-y-1">
                <label className="text-xs font-bold text-slate-300">
                  1 Akun Anggaran UMK Induk <span className="text-emerald-400 font-mono">(Terkunci SOP)</span>
                </label>
                <div className="px-3.5 py-2 bg-slate-950/80 border border-emerald-500/40 rounded-lg text-xs font-mono text-emerald-300 font-bold flex items-center justify-between">
                  <span>1101.02 - Kas Kecil Seksi Umum GA / UMK Operasional</span>
                  <span className="text-[10px] bg-emerald-500/20 px-1.5 py-0.5 rounded text-emerald-400 font-mono">1 AKUN</span>
                </div>
              </div>

              <div className="space-y-1">
                <label className="text-xs font-bold text-slate-300">
                  Unit Kerja / Seksi
                </label>
                <div className="px-3.5 py-2 bg-slate-950/80 border border-slate-700 rounded-lg text-xs text-slate-300">
                  Seksi Umum (General Affairs / GA)
                </div>
              </div>
            </div>
          </div>

          {/* Section 2: Nominal Dana & Jadwal 2 Minggu */}
          <div className="space-y-3 pt-2 border-t border-slate-800">
            <h3 className="text-xs font-bold uppercase tracking-wider text-slate-400 flex items-center gap-1.5">
              <DollarSign className="w-4 h-4 text-emerald-400" />
              <span>2. Plafon Dana UMK & Jadwal Pertanggungjawaban</span>
            </h3>

            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
              <div className="space-y-1 sm:col-span-1">
                <label className="text-xs font-bold text-slate-300">
                  Nominal UMK (Rp) <span className="text-rose-400">*</span>
                </label>
                <div className="relative">
                  <span className="absolute left-3 top-2 text-xs font-bold text-slate-400">Rp</span>
                  <input
                    type="number"
                    required
                    min={1000000}
                    step={500000}
                    value={amount}
                    onChange={(e) => setAmount(Number(e.target.value))}
                    className="w-full pl-10 pr-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white font-mono font-bold focus:outline-none focus:border-emerald-500"
                  />
                </div>
                <div className="text-[10px] text-emerald-400 font-mono mt-0.5">
                  {formatRupiah(amount)}
                </div>
              </div>

              <div className="space-y-1">
                <label className="text-xs font-bold text-slate-300">
                  Tgl. Rencana Pencairan <span className="text-rose-400">*</span>
                </label>
                <input
                  type="date"
                  required
                  value={disbursementDate}
                  onChange={(e) => handleDisbursementDateChange(e.target.value)}
                  className="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-xs text-white focus:outline-none focus:border-emerald-500"
                />
              </div>

              <div className="space-y-1">
                <label className="text-xs font-bold text-slate-300 flex items-center justify-between">
                  <span>Jatuh Tempo LPJ</span>
                  <span className="text-[10px] text-amber-400 font-bold font-mono">14 HARI (2 MINGGU)</span>
                </label>
                <input
                  type="date"
                  required
                  value={dueDate}
                  onChange={(e) => setDueDate(e.target.value)}
                  className="w-full px-3 py-2 bg-slate-950 border border-amber-500/50 rounded-lg text-xs text-amber-300 font-bold focus:outline-none focus:border-amber-500"
                />
              </div>
            </div>

            {/* Quick Amount Selector */}
            <div className="flex flex-wrap gap-2 pt-1">
              <span className="text-[10px] text-slate-400 self-center">Plafon Cepat:</span>
              {[5000000, 10000000, 15000000, 20000000].map((val) => (
                <button
                  key={val}
                  type="button"
                  onClick={() => setAmount(val)}
                  className={`px-2.5 py-1 rounded text-xs font-mono transition-all ${
                    amount === val 
                      ? "bg-emerald-500 text-slate-950 font-bold" 
                      : "bg-slate-800 text-slate-300 hover:bg-slate-700"
                  }`}
                >
                  {formatRupiah(val)}
                </button>
              ))}
            </div>
          </div>

          {/* Section 3: PIC & Pemegang Kasir GA */}
          <div className="space-y-3 pt-2 border-t border-slate-800">
            <h3 className="text-xs font-bold uppercase tracking-wider text-slate-400 flex items-center gap-1.5">
              <User className="w-4 h-4 text-emerald-400" />
              <span>3. Pejabat Penanggung Jawab & Pemegang Kasir Kas Kecil GA</span>
            </h3>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="p-3.5 bg-slate-950/60 border border-slate-800 rounded-xl space-y-2">
                <div className="text-[11px] font-bold text-sky-400 uppercase">
                  Penanggung Jawab UMK (Kepala Seksi Umum)
                </div>
                <div>
                  <div className="text-xs font-bold text-white">{requesterName}</div>
                  <div className="text-[11px] font-mono text-slate-400">NIP: {requesterNip}</div>
                  <div className="text-[10px] text-slate-500">{requesterPosition}</div>
                </div>
              </div>

              <div className="p-3.5 bg-slate-950/60 border border-slate-800 rounded-xl space-y-2">
                <div className="text-[11px] font-bold text-emerald-400 uppercase">
                  Pemegang Kasir Kas Kecil GA (Custodian)
                </div>
                <div>
                  <div className="text-xs font-bold text-white">{custodianName}</div>
                  <div className="text-[11px] font-mono text-slate-400">NIP: {custodianNip}</div>
                  <div className="text-[10px] text-slate-500">{custodianPosition}</div>
                </div>
              </div>
            </div>
          </div>

          {/* Section 4: Maksud Penggunaan & Detail Perbankan */}
          <div className="space-y-3 pt-2 border-t border-slate-800">
            <h3 className="text-xs font-bold uppercase tracking-wider text-slate-400 flex items-center gap-1.5">
              <FileText className="w-4 h-4 text-emerald-400" />
              <span>4. Rencana Penggunaan & Mekanisme Kas</span>
            </h3>

            <div className="space-y-3">
              <div className="space-y-1">
                <label className="text-xs font-bold text-slate-300">
                  Uraian Maksud Penggunaan Dana <span className="text-rose-400">*</span>
                </label>
                <textarea
                  rows={2}
                  required
                  value={purpose}
                  onChange={(e) => setPurpose(e.target.value)}
                  className="w-full px-3.5 py-2 bg-slate-950 border border-slate-700 rounded-lg text-xs text-white focus:outline-none focus:border-emerald-500"
                />
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="space-y-1">
                  <label className="text-xs font-bold text-slate-300">
                    Metode Pencairan
                  </label>
                  <select
                    value={paymentMethod}
                    onChange={(e: any) => setPaymentMethod(e.target.value)}
                    className="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-xs text-white focus:outline-none focus:border-emerald-500"
                  >
                    <option value="Transfer Bank Operasional">Transfer Bank Operasional</option>
                    <option value="Kasir Tunai (Cash Out)">Kasir Tunai (Cash Out)</option>
                  </select>
                </div>

                <div className="space-y-1">
                  <label className="text-xs font-bold text-slate-300">
                    Rekening Kas Perusahaan
                  </label>
                  <input
                    type="text"
                    value={bankSource}
                    onChange={(e) => setBankSource(e.target.value)}
                    className="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-xs text-white focus:outline-none focus:border-emerald-500"
                  />
                </div>
              </div>
            </div>
          </div>

          {/* Footer Action Buttons */}
          <div className="pt-4 border-t border-slate-800 flex items-center justify-end gap-3">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-bold rounded-xl transition-all"
            >
              Batal
            </button>
            <button
              type="submit"
              className="px-6 py-2.5 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-slate-950 font-black text-xs uppercase tracking-wider rounded-xl shadow-lg shadow-emerald-500/20 flex items-center gap-2 transition-all cursor-pointer"
            >
              <CheckCircle2 className="w-4 h-4" />
              <span>Simpan & Ajukan UMK ke Keuangan</span>
            </button>
          </div>

        </form>

      </div>
    </div>
  );
};

export default UmkRequestFormModal;