import React, { useState } from "react";
import { OfficialTravelRequest, TravelExpenseItem } from "../../types/travel";
import { 
  X, 
  CheckCircle2, 
  DollarSign, 
  Receipt, 
  FileText, 
  AlertCircle, 
  Plus, 
  Trash2, 
  Upload, 
  Save,
  Check,
  Building2,
  Calendar
} from "lucide-react";

interface TravelSettlementModalProps {
  isOpen: boolean;
  onClose: () => void;
  travel: OfficialTravelRequest;
  onSaveSettlement: (updatedTravel: OfficialTravelRequest) => void;
  isFinanceOfficer?: boolean;
}

export const TravelSettlementModal: React.FC<TravelSettlementModalProps> = ({
  isOpen,
  onClose,
  travel,
  onSaveSettlement,
  isFinanceOfficer = true
}) => {
  const [expenses, setExpenses] = useState<TravelExpenseItem[]>(() => {
    return travel.expenses.map(item => ({
      ...item,
      actualSpent: item.actualSpent !== undefined ? item.actualSpent : item.totalEstimated,
      receiptNumber: item.receiptNumber || "",
      receiptFileName: item.receiptFileName || ""
    }));
  });

  const [settlementNotes, setSettlementNotes] = useState(travel.voucher.notes || "");
  const [advanceAmount, setAdvanceAmount] = useState(travel.voucher.advanceAmount);

  if (!isOpen) return null;

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

  const handleExpenseActualChange = (id: string, actualValue: number) => {
    setExpenses(prev => prev.map(item => 
      item.id === id ? { ...item, actualSpent: actualValue } : item
    ));
  };

  const handleReceiptChange = (id: string, receiptNum: string) => {
    setExpenses(prev => prev.map(item => 
      item.id === id ? { ...item, receiptNumber: receiptNum } : item
    ));
  };

  const totalActual = expenses.reduce((sum, item) => sum + (item.actualSpent || 0), 0);
  const balance = advanceAmount - totalActual; // +: Lebih Bayar (kembalikan ke kas), -: Kurang Bayar (klaim reimburse)

  const handleSave = (markAsSettled = false) => {
    const updatedTravel: OfficialTravelRequest = {
      ...travel,
      expenses: expenses,
      status: markAsSettled ? "Selesai (Completed)" : "Menunggu LPJ Keuangan",
      voucher: {
        ...travel.voucher,
        advanceAmount: advanceAmount,
        totalActualRealization: totalActual,
        balanceAmount: balance,
        settlementStatus: markAsSettled ? "Lunas / Settled" : "Menunggu Settlement LPJ",
        settledAt: markAsSettled ? new Date().toISOString().replace("T", " ").substring(0, 16) : undefined,
        verifiedByFinance: markAsSettled ? "Tim Perbendaharaan & Akuntansi Keuangan" : undefined,
        notes: settlementNotes
      }
    };

    onSaveSettlement(updatedTravel);
    onClose();
  };

  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-4xl shadow-2xl overflow-hidden flex flex-col max-h-[92vh]">
        
        {/* Header */}
        <div className="bg-gradient-to-r from-emerald-950 via-slate-900 to-slate-900 px-6 py-4 border-b border-slate-700 flex items-center justify-between shrink-0">
          <div className="flex items-center gap-3">
            <div className="p-2.5 bg-emerald-500/20 border border-emerald-400/40 rounded-xl text-emerald-400">
              <Receipt className="w-5 h-5" />
            </div>
            <div>
              <h2 className="text-base sm:text-lg font-bold text-white flex items-center gap-2">
                Pertanggungjawaban Biaya Perjalanan Dinas (LPJ & Settlement)
                <span className="text-xs bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 px-2 py-0.5 rounded font-mono">
                  {travel.voucher.voucherNumber}
                </span>
              </h2>
              <p className="text-xs text-slate-400">
                NIP Pegawai: <strong className="text-white font-mono">{travel.employeeNip}</strong> | {travel.employeeName} ({travel.destinationCity})
              </p>
            </div>
          </div>

          <button
            onClick={onClose}
            className="p-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Body */}
        <div className="p-6 overflow-y-auto space-y-6 flex-1 text-slate-200">
          
          {/* Summary Card */}
          <div className="bg-slate-800/80 border border-slate-700 rounded-xl p-4 grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs">
            <div>
              <span className="text-[10px] uppercase font-bold text-slate-400 block">Uang Muka Diterima (Advance)</span>
              <span className="text-lg font-black font-mono text-sky-400">{formatRupiah(advanceAmount)}</span>
            </div>

            <div>
              <span className="text-[10px] uppercase font-bold text-slate-400 block">Total Realisasi Aktual (LPJ)</span>
              <span className="text-lg font-black font-mono text-emerald-400">{formatRupiah(totalActual)}</span>
            </div>

            <div>
              <span className="text-[10px] uppercase font-bold text-slate-400 block">
                {balance >= 0 ? "Lebih Bayar (Kembalikan Kas)" : "Kurang Bayar (Reimbursement)"}
              </span>
              <span className={`text-lg font-black font-mono ${balance >= 0 ? "text-amber-400" : "text-rose-400"}`}>
                {formatRupiah(Math.abs(balance))}
              </span>
            </div>
          </div>

          {/* Expense Realization Table */}
          <div className="bg-slate-800/60 border border-slate-700 rounded-xl p-4 space-y-3">
            <div className="flex items-center justify-between">
              <label className="text-xs font-bold uppercase tracking-wider text-slate-300 flex items-center gap-2">
                <FileText className="w-4 h-4 text-emerald-400" />
                Rincian Realisasi Pengeluaran & Nomor Bukti / Kwitansi
              </label>
              <span className="text-[11px] text-slate-400">Lampirkan struk / invoice resmi</span>
            </div>

            <div className="bg-slate-950 border border-slate-800 rounded-xl overflow-hidden text-xs">
              <table className="w-full border-collapse">
                <thead>
                  <tr className="bg-slate-900 border-b border-slate-800 text-[11px] uppercase font-bold text-slate-400">
                    <th className="p-2.5 text-left">Komponen Biaya</th>
                    <th className="p-2.5 text-right w-32">Estimasi Awal</th>
                    <th className="p-2.5 text-right w-36">Realisasi Aktual (Rp)</th>
                    <th className="p-2.5 text-left w-48">No. Bukti / Kuitansi</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-800 text-xs">
                  {expenses.map((item) => (
                    <tr key={item.id} className="hover:bg-slate-900/40">
                      <td className="p-2.5">
                        <strong className="block text-white">{item.category}</strong>
                        <span className="text-[11px] text-slate-400">{item.description}</span>
                      </td>
                      <td className="p-2.5 text-right font-mono text-slate-400">
                        {formatRupiah(item.totalEstimated)}
                      </td>
                      <td className="p-2.5 text-right">
                        <input
                          type="number"
                          value={item.actualSpent || 0}
                          onChange={(e) => handleExpenseActualChange(item.id, Number(e.target.value) || 0)}
                          className="w-32 bg-slate-800 border border-slate-700 rounded px-2.5 py-1 text-right text-emerald-300 font-mono font-bold focus:outline-none focus:border-emerald-400"
                        />
                      </td>
                      <td className="p-2.5">
                        <input
                          type="text"
                          value={item.receiptNumber || ""}
                          onChange={(e) => handleReceiptChange(item.id, e.target.value)}
                          placeholder="e.g. INV-9942 / RCP-881"
                          className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-200 text-xs focus:outline-none focus:border-sky-400"
                        />
                      </td>
                    </tr>
                  ))}
                </tbody>
                <tfoot>
                  <tr className="bg-slate-900 border-t-2 border-slate-700 font-bold text-xs">
                    <td className="p-3 uppercase text-right text-slate-300">Total:</td>
                    <td className="p-3 text-right font-mono text-slate-400">{formatRupiah(travel.totalEstimatedCost)}</td>
                    <td className="p-3 text-right font-mono text-emerald-300 text-sm">{formatRupiah(totalActual)}</td>
                    <td></td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>

          {/* Settlement Statement & Notes */}
          <div className="space-y-2 text-xs">
            <label className="block text-slate-300 font-semibold">Catatan Pertanggungjawaban / Rekonsiliasi Kas</label>
            <textarea
              rows={2}
              value={settlementNotes}
              onChange={(e) => setSettlementNotes(e.target.value)}
              placeholder="Catatan transfer pengembalian lebih bayar ke rekening kasir / nomor rekening reimbursement..."
              className="w-full bg-slate-800 border border-slate-600 rounded-lg p-3 text-white focus:outline-none focus:border-emerald-400"
            />
          </div>

        </div>

        {/* Footer Actions */}
        <div className="bg-slate-800/90 px-6 py-4 border-t border-slate-700 flex flex-col sm:flex-row items-center justify-between gap-3 shrink-0">
          <div className="text-xs text-slate-400">
            {balance >= 0 ? (
              <span className="text-emerald-400 font-bold">
                ✓ Sisa Uang Muka {formatRupiah(balance)} disetor kembali ke Kasir Perusahaan.
              </span>
            ) : (
              <span className="text-amber-400 font-bold">
                ⚠ Kelebihan pengeluaran {formatRupiah(Math.abs(balance))} direimburse ke rekening pegawai.
              </span>
            )}
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={onClose}
              className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-bold rounded-lg transition-colors"
            >
              Tutup
            </button>
            <button
              onClick={() => handleSave(false)}
              className="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white text-xs font-bold rounded-lg transition-colors flex items-center gap-1.5"
            >
              <Save className="w-3.5 h-3.5" />
              <span>Simpan Draft LPJ</span>
            </button>
            <button
              onClick={() => handleSave(true)}
              className="px-5 py-2 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-lg shadow-lg shadow-emerald-500/25 flex items-center gap-1.5 transition-all cursor-pointer"
            >
              <CheckCircle2 className="w-4 h-4" />
              <span>Sahkan & Selesaikan Settlement</span>
            </button>
          </div>
        </div>

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

export default TravelSettlementModal;