import React, { useState, useMemo } from "react";
import { 
  UmkRequest, 
  UmkExpenseItem, 
  UMK_BUDGET_ACCOUNTS, 
  calculateUmkDeadline 
} from "../../types/umk";
import { INITIAL_UMK_REQUESTS } from "../../data/umkData";
import { INITIAL_EMPLOYEES } from "../../data";
import { sendUmkNotificationEmail, sendUmkSettlementNotificationEmail } from "../../services/emailGatewayService";
import { EmailGatewayDrawerModal } from "../EmailGatewayDrawerModal";
import { UmkRequestFormModal } from "./UmkRequestFormModal";
import { UmkSettlementModal } from "./UmkSettlementModal";
import { UmkPrintDoc } from "./UmkPrintDoc";
import { UmkQrValidationModal } from "./UmkQrValidationModal";
import { 
  Wallet, 
  Plus, 
  Search, 
  Filter, 
  Calendar, 
  Clock, 
  CheckCircle2, 
  AlertCircle, 
  FileText, 
  Printer, 
  Receipt, 
  ArrowDownLeft, 
  ArrowUpRight, 
  DollarSign, 
  Building2, 
  Layers, 
  Check, 
  ShieldCheck, 
  Info, 
  RefreshCw, 
  ChevronRight, 
  Eye, 
  CheckSquare,
  TrendingUp,
  Tag,
  AlertTriangle,
  FolderOpen,
  QrCode,
  Mail
} from "lucide-react";

interface UmkModuleProps {
  onBackToDashboard?: () => void;
}

export const UmkModule: React.FC<UmkModuleProps> = ({ onBackToDashboard }) => {
  // Local storage persistence or initial data
  const [umkList, setUmkList] = useState<UmkRequest[]>(() => {
    const saved = localStorage.getItem("ems_umk_records_v1");
    if (saved) {
      try {
        return JSON.parse(saved);
      } catch {
        return INITIAL_UMK_REQUESTS;
      }
    }
    return INITIAL_UMK_REQUESTS;
  });

  const saveUmkList = (newList: UmkRequest[]) => {
    setUmkList(newList);
    localStorage.setItem("ems_umk_records_v1", JSON.stringify(newList));
  };

  // UI States
  const [activeTab, setActiveTab] = useState<"LIST" | "TWO_VOUCHERS" | "EXPENDABLES_MATRIX" | "SOP_GUIDELINES">("LIST");
  const [searchQuery, setSearchQuery] = useState("");
  const [statusFilter, setStatusFilter] = useState<string>("ALL");
  const [selectedUmk, setSelectedUmk] = useState<UmkRequest | null>(null);

  // Modals
  const [isRequestModalOpen, setIsRequestModalOpen] = useState(false);
  const [isSettlementModalOpen, setIsSettlementModalOpen] = useState(false);
  const [isPrintModalOpen, setIsPrintModalOpen] = useState(false);
  const [isQrValidationOpen, setIsQrValidationOpen] = useState(false);
  const [isEmailLogsOpen, setIsEmailLogsOpen] = useState(false);
  const [targetQrUmk, setTargetQrUmk] = useState<UmkRequest | null>(null);
  const [printDocType, setPrintDocType] = useState<"LPJ_RECONCILIATION" | "VOUCHER_1_RETURN" | "VOUCHER_2_REALIZATION" | "VOUCHER_OUT_INITIAL">("LPJ_RECONCILIATION");

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

  const formatDateIndo = (dateStr: string) => {
    if (!dateStr || dateStr === "-") return "-";
    try {
      const d = new Date(dateStr);
      return d.toLocaleDateString("id-ID", {
        day: "numeric",
        month: "short",
        year: "numeric"
      });
    } catch {
      return dateStr;
    }
  };

  // Filtered UMK List
  const filteredUmkList = useMemo(() => {
    return umkList.filter((umk) => {
      const matchesSearch = 
        umk.umkNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
        umk.periodName.toLowerCase().includes(searchQuery.toLowerCase()) ||
        umk.disbursementVoucher.voucherNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
        umk.returnVoucher.voucherNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
        umk.realizationVoucher.voucherNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
        umk.custodianName.toLowerCase().includes(searchQuery.toLowerCase()) ||
        umk.requesterName.toLowerCase().includes(searchQuery.toLowerCase());

      const matchesStatus = statusFilter === "ALL" || umk.status === statusFilter;

      return matchesSearch && matchesStatus;
    });
  }, [umkList, searchQuery, statusFilter]);

  // Aggregate Metrics
  const metrics = useMemo(() => {
    const totalInitial = umkList.reduce((acc, u) => acc + u.disbursementVoucher.amount, 0);
    const totalRealized = umkList.reduce((acc, u) => acc + u.realizationVoucher.totalRealizedAmount, 0);
    const totalReturned = umkList.reduce((acc, u) => acc + u.returnVoucher.returnAmount, 0);
    const totalExpendables = umkList.reduce((acc, u) => acc + u.realizationVoucher.totalExpendablesAmount, 0);
    const activeUmkCount = umkList.filter((u) => u.status === "Dana Dicairkan (Aktif)" || u.status === "Menunggu LPJ Keuangan").length;
    const completedCount = umkList.filter((u) => u.status === "Selesai (Reconciled)" || u.status === "LPJ Diverifikasi Keuangan").length;

    return {
      totalInitial,
      totalRealized,
      totalReturned,
      totalExpendables,
      activeUmkCount,
      completedCount
    };
  }, [umkList]);

  // Handlers
  const handleCreateUmk = async (newUmk: UmkRequest) => {
    const updated = [newUmk, ...umkList];
    saveUmkList(updated);
    
    // Simulate real-time API call to Enterprise Email Gateway
    try {
      await sendUmkNotificationEmail(newUmk, INITIAL_EMPLOYEES);
    } catch (e) {
      console.warn("[UMK] Email gateway dispatch warning:", e);
    }
  };

  const handleUpdateUmk = async (updatedUmk: UmkRequest) => {
    const updated = umkList.map((u) => (u.id === updatedUmk.id ? updatedUmk : u));
    saveUmkList(updated);

    // If LPJ reconciliation was submitted, dispatch email to CFO & Finance
    if (updatedUmk.status === "LPJ Diverifikasi Keuangan" || updatedUmk.status === "Selesai (Reconciled)") {
      try {
        await sendUmkSettlementNotificationEmail(updatedUmk, INITIAL_EMPLOYEES);
      } catch (e) {
        console.warn("[UMK] Email settlement gateway dispatch warning:", e);
      }
    }
  };

  const handleApproveDisbursement = (umk: UmkRequest) => {
    const updated: UmkRequest = {
      ...umk,
      status: "Dana Dicairkan (Aktif)",
      disbursementDate: new Date().toISOString().split("T")[0],
      disbursementVoucher: {
        ...umk.disbursementVoucher,
        disbursedBy: "Hendra Wijaya, S.E., Ak., M.M. (CFO / Direktur Keuangan)",
        disbursedByNip: "197019950002",
        disbursedAt: `${new Date().toISOString().split("T")[0]} 10:00 WIB`
      },
      updatedAt: new Date().toISOString()
    };
    handleUpdateUmk(updated);
  };

  const handleOpenSettlement = (umk: UmkRequest) => {
    setSelectedUmk(umk);
    setIsSettlementModalOpen(true);
  };

  const handleOpenPrint = (umk: UmkRequest, docType: any = "LPJ_RECONCILIATION") => {
    setSelectedUmk(umk);
    setPrintDocType(docType);
    setIsPrintModalOpen(true);
  };

  const handleOpenQrValidator = (umk?: UmkRequest) => {
    setTargetQrUmk(umk || null);
    setIsQrValidationOpen(true);
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 p-4 sm:p-6 lg:p-8 space-y-6">
      
      {/* Top Banner Header */}
      <div className="bg-gradient-to-r from-slate-900 via-emerald-950/40 to-slate-900 border border-emerald-500/30 rounded-2xl p-5 sm:p-6 shadow-2xl flex flex-col md:flex-row md:items-center justify-between gap-5">
        <div className="flex items-start gap-4">
          <div className="p-3.5 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl text-slate-950 shadow-lg shadow-emerald-500/20 shrink-0">
            <Wallet className="w-7 h-7 font-black" />
          </div>
          <div className="space-y-1">
            <div className="flex flex-wrap items-center gap-2">
              <span className="text-[11px] font-black uppercase tracking-wider bg-emerald-400 text-slate-950 px-2.5 py-0.5 rounded font-mono">
                KAS KECIL SEKSI UMUM (GA)
              </span>
              <span className="text-xs font-mono font-bold text-sky-400 bg-sky-500/20 border border-sky-500/30 px-2 py-0.5 rounded">
                1 Akun Anggaran UMK: 1101.02
              </span>
              <span className="text-xs font-mono font-bold text-amber-400 bg-amber-500/20 border border-amber-500/30 px-2 py-0.5 rounded flex items-center gap-1">
                <Clock className="w-3.5 h-3.5" />
                <span>Batas Waktu LPJ: 2 Minggu (14 Hari)</span>
              </span>
            </div>
            <h1 className="text-xl sm:text-2xl font-black text-white tracking-tight">
              Aplikasi Uang Muka Kerja (UMK) Kas Kecil Seksi Umum
            </h1>
            <p className="text-xs sm:text-sm text-slate-300 max-w-3xl leading-relaxed">
              Pengelolaan dana kas kecil operasional harian kantor dengan 1 Akun Anggaran UMK Induk, pelaporan kembali ke bagian keuangan dengan <strong>2 Voucher</strong> (Voucher 1 Pengembalian Sisa & Voucher 2 Realisasi Belanja Expendables + Kuitansi Sah) dalam batas maksimal 14 hari kalender.
            </p>
          </div>
        </div>

        <div className="flex flex-wrap items-center gap-3 shrink-0">
          <button
            onClick={() => setIsEmailLogsOpen(true)}
            className="px-4 py-3 bg-indigo-500/20 hover:bg-indigo-500/30 text-indigo-300 border border-indigo-500/40 font-bold text-xs uppercase tracking-wider rounded-xl shadow-lg flex items-center gap-2 transition-all cursor-pointer"
            title="Lihat Log Simulasi API Gateway Email ke Direksi & Manager"
          >
            <Mail className="w-4 h-4 text-indigo-400" />
            <span>Email Gateway Logs</span>
          </button>

          <button
            onClick={() => handleOpenQrValidator()}
            className="px-4 py-3 bg-sky-500/20 hover:bg-sky-500/30 text-sky-300 border border-sky-500/40 font-bold text-xs uppercase tracking-wider rounded-xl shadow-lg flex items-center gap-2 transition-all cursor-pointer"
            title="Pindai QR Dokumen Fisik untuk Validasi Status Workflow Seketika"
          >
            <QrCode className="w-4 h-4 text-sky-400" />
            <span>Pindai / Validasi QR</span>
          </button>

          <button
            onClick={() => setIsRequestModalOpen(true)}
            className="px-5 py-3 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"
          >
            <Plus className="w-4 h-4 font-black" />
            <span>Ajukan UMK Baru</span>
          </button>
        </div>
      </div>

      {/* Primary KPI Grid */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
        
        {/* KPI 1 */}
        <div className="bg-slate-900/90 border border-slate-800 rounded-xl p-4 sm:p-5 flex items-center gap-3.5 shadow-sm">
          <div className="p-3 bg-purple-500/10 border border-purple-500/30 rounded-xl text-purple-400 shrink-0">
            <Wallet className="w-5 h-5" />
          </div>
          <div>
            <div className="text-[11px] font-semibold text-slate-400 uppercase tracking-wide">
              Total Pencairan UMK
            </div>
            <div className="text-lg sm:text-xl font-black text-white font-mono mt-0.5">
              {formatRupiah(metrics.totalInitial)}
            </div>
            <div className="text-[10px] text-purple-400 font-mono">
              {umkList.length} Pengajuan Kas Kecil GA
            </div>
          </div>
        </div>

        {/* KPI 2 */}
        <div className="bg-slate-900/90 border border-slate-800 rounded-xl p-4 sm:p-5 flex items-center gap-3.5 shadow-sm">
          <div className="p-3 bg-sky-500/10 border border-sky-500/30 rounded-xl text-sky-400 shrink-0">
            <Receipt className="w-5 h-5" />
          </div>
          <div>
            <div className="text-[11px] font-semibold text-slate-400 uppercase tracking-wide">
              Realisasi Belanja (V2)
            </div>
            <div className="text-lg sm:text-xl font-black text-sky-400 font-mono mt-0.5">
              {formatRupiah(metrics.totalRealized)}
            </div>
            <div className="text-[10px] text-emerald-400 font-mono">
              Expendables: {formatRupiah(metrics.totalExpendables)}
            </div>
          </div>
        </div>

        {/* KPI 3 */}
        <div className="bg-slate-900/90 border border-slate-800 rounded-xl p-4 sm:p-5 flex items-center gap-3.5 shadow-sm">
          <div className="p-3 bg-amber-500/10 border border-amber-500/30 rounded-xl text-amber-400 shrink-0">
            <ArrowDownLeft className="w-5 h-5" />
          </div>
          <div>
            <div className="text-[11px] font-semibold text-slate-400 uppercase tracking-wide">
              Pengembalian Kas (V1)
            </div>
            <div className="text-lg sm:text-xl font-black text-amber-400 font-mono mt-0.5">
              {formatRupiah(metrics.totalReturned)}
            </div>
            <div className="text-[10px] text-slate-400">
              Disetor Kembali ke Kasir Pusat
            </div>
          </div>
        </div>

        {/* KPI 4 */}
        <div className="bg-slate-900/90 border border-slate-800 rounded-xl p-4 sm:p-5 flex items-center gap-3.5 shadow-sm">
          <div className="p-3 bg-emerald-500/10 border border-emerald-500/30 rounded-xl text-emerald-400 shrink-0">
            <Clock className="w-5 h-5" />
          </div>
          <div>
            <div className="text-[11px] font-semibold text-slate-400 uppercase tracking-wide">
              Kepatuhan SOP 2 Minggu
            </div>
            <div className="text-lg sm:text-xl font-black text-emerald-400 font-mono mt-0.5">
              100% On-Time
            </div>
            <div className="text-[10px] text-emerald-300 font-mono">
              Maks 14 Hari per Siklus
            </div>
          </div>
        </div>

      </div>

      {/* Navigation Sub-Tabs */}
      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-800 pb-3">
        <div className="flex flex-wrap items-center gap-2 bg-slate-900 p-1.5 rounded-xl border border-slate-800 text-xs font-bold">
          <button
            onClick={() => setActiveTab("LIST")}
            className={`px-4 py-2 rounded-lg flex items-center gap-2 transition-all ${
              activeTab === "LIST" 
                ? "bg-emerald-500 text-slate-950 font-black shadow-md shadow-emerald-500/20" 
                : "text-slate-400 hover:text-white"
            }`}
          >
            <FolderOpen className="w-4 h-4" />
            <span>Daftar UMK Kas Kecil GA ({filteredUmkList.length})</span>
          </button>

          <button
            onClick={() => setActiveTab("TWO_VOUCHERS")}
            className={`px-4 py-2 rounded-lg flex items-center gap-2 transition-all ${
              activeTab === "TWO_VOUCHERS" 
                ? "bg-emerald-500 text-slate-950 font-black shadow-md shadow-emerald-500/20" 
                : "text-slate-400 hover:text-white"
            }`}
          >
            <Receipt className="w-4 h-4" />
            <span>2 Voucher LPJ & Rekonsiliasi Keuangan</span>
          </button>

          <button
            onClick={() => setActiveTab("EXPENDABLES_MATRIX")}
            className={`px-4 py-2 rounded-lg flex items-center gap-2 transition-all ${
              activeTab === "EXPENDABLES_MATRIX" 
                ? "bg-emerald-500 text-slate-950 font-black shadow-md shadow-emerald-500/20" 
                : "text-slate-400 hover:text-white"
            }`}
          >
            <Layers className="w-4 h-4" />
            <span>Matriks Mata Anggaran Expendables</span>
          </button>

          <button
            onClick={() => setActiveTab("SOP_GUIDELINES")}
            className={`px-4 py-2 rounded-lg flex items-center gap-2 transition-all ${
              activeTab === "SOP_GUIDELINES" 
                ? "bg-emerald-500 text-slate-950 font-black shadow-md shadow-emerald-500/20" 
                : "text-slate-400 hover:text-white"
            }`}
          >
            <ShieldCheck className="w-4 h-4" />
            <span>SOP & Aturan 2 Minggu</span>
          </button>
        </div>

        {/* Search & Status Filter */}
        <div className="flex items-center gap-2 w-full sm:w-auto">
          <div className="relative flex-1 sm:w-64">
            <Search className="w-4 h-4 text-slate-400 absolute left-3 top-2.5" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Cari nomor UMK / voucher / PIC..."
              className="w-full pl-9 pr-3 py-1.5 bg-slate-900 border border-slate-800 rounded-lg text-xs text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500"
            />
          </div>

          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className="px-3 py-1.5 bg-slate-900 border border-slate-800 rounded-lg text-xs text-slate-300 focus:outline-none focus:border-emerald-500"
          >
            <option value="ALL">Semua Status</option>
            <option value="Dana Dicairkan (Aktif)">Dana Dicairkan (Aktif)</option>
            <option value="Menunggu LPJ Keuangan">Menunggu LPJ Keuangan</option>
            <option value="LPJ Diverifikasi Keuangan">LPJ Diverifikasi Keuangan</option>
            <option value="Selesai (Reconciled)">Selesai (Reconciled)</option>
            <option value="Menunggu Approval Keuangan">Menunggu Approval</option>
          </select>
        </div>
      </div>

      {/* ========================================================================= */}
      {/* TAB 1: DAFTAR UMK KAS KECIL GA & MONITORING 2 MINGGU */}
      {/* ========================================================================= */}
      {activeTab === "LIST" && (
        <div className="space-y-4">
          
          {filteredUmkList.length === 0 ? (
            <div className="bg-slate-900/60 border border-slate-800 rounded-2xl p-12 text-center space-y-3">
              <Wallet className="w-12 h-12 text-slate-600 mx-auto" />
              <div className="text-base font-bold text-slate-300">Tidak ada data UMK Kas Kecil</div>
              <p className="text-xs text-slate-500 max-w-md mx-auto">
                Silakan buat pengajuan Uang Muka Kerja baru untuk operasional kas kecil Seksi Umum (GA).
              </p>
              <button
                onClick={() => setIsRequestModalOpen(true)}
                className="px-4 py-2 bg-emerald-500 text-slate-950 font-bold text-xs rounded-xl shadow-lg inline-flex items-center gap-1.5"
              >
                <Plus className="w-4 h-4" />
                <span>Ajukan UMK Baru Sekarang</span>
              </button>
            </div>
          ) : (
            <div className="grid grid-cols-1 gap-4">
              {filteredUmkList.map((umk) => {
                const deadline = calculateUmkDeadline(umk.disbursementDate, umk.dueDate, umk.isReconciled);
                const initialAmt = umk.disbursementVoucher.amount;
                const realizedAmt = umk.realizationVoucher.totalRealizedAmount;
                const returnAmt = umk.returnVoucher.returnAmount;

                return (
                  <div
                    key={umk.id}
                    className="bg-slate-900/80 border border-slate-800 hover:border-emerald-500/40 rounded-2xl p-5 sm:p-6 transition-all shadow-md space-y-4"
                  >
                    {/* Top Row: Numbers, Period & Status */}
                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-800/80 pb-3">
                      <div className="space-y-1">
                        <div className="flex flex-wrap items-center gap-2">
                          <span className="text-sm font-black text-white font-mono">
                            {umk.umkNumber}
                          </span>
                          <span className="text-[10px] font-mono font-bold bg-purple-500/20 text-purple-300 border border-purple-500/30 px-2 py-0.5 rounded">
                            {umk.disbursementVoucher.budgetAccountCode} (Kas Kecil GA)
                          </span>
                          <span className={`text-[10px] font-bold px-2 py-0.5 rounded border ${
                            umk.status === "Selesai (Reconciled)" || umk.status === "LPJ Diverifikasi Keuangan"
                              ? "bg-emerald-500/20 text-emerald-300 border-emerald-500/30"
                              : umk.status === "Dana Dicairkan (Aktif)"
                              ? "bg-sky-500/20 text-sky-300 border-sky-500/30"
                              : "bg-amber-500/20 text-amber-300 border-amber-500/30"
                          }`}>
                            ● {umk.status}
                          </span>
                        </div>
                        <h3 className="text-sm font-bold text-slate-200">
                          {umk.periodName}
                        </h3>
                      </div>

                      {/* 2-Week Deadline Badge */}
                      <div className="flex items-center gap-2 self-start sm:self-auto">
                        <div className={`px-3 py-1.5 rounded-xl border text-xs font-bold flex items-center gap-1.5 ${deadline.badgeClass}`}>
                          <Clock className="w-4 h-4 shrink-0" />
                          <span>{deadline.statusText}</span>
                        </div>
                      </div>
                    </div>

                    {/* Middle Row: Financial Comparison & 2 Vouchers Status */}
                    <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 text-xs">
                      
                      {/* Box 1: Dana Awal UMK */}
                      <div className="bg-slate-950/70 p-3 rounded-xl border border-slate-800/80 space-y-1">
                        <div className="text-[10px] text-slate-400 font-bold uppercase">
                          Dana Awal UMK (Kas Keluar)
                        </div>
                        <div className="text-base font-black text-white font-mono">
                          {formatRupiah(initialAmt)}
                        </div>
                        <div className="text-[10px] text-purple-400 font-mono truncate">
                          Voucher: {umk.disbursementVoucher.voucherNumber}
                        </div>
                      </div>

                      {/* Box 2: Voucher 2 Realisasi Belanja */}
                      <div className="bg-slate-950/70 p-3 rounded-xl border border-sky-500/20 space-y-1">
                        <div className="text-[10px] text-sky-400 font-bold uppercase flex items-center justify-between">
                          <span>Voucher 2: Realisasi</span>
                          <span className="font-mono text-[9px] text-sky-300">
                            {umk.realizationVoucher.expenseItems.length} Nota
                          </span>
                        </div>
                        <div className="text-base font-black text-sky-400 font-mono">
                          {formatRupiah(realizedAmt)}
                        </div>
                        <div className="text-[10px] text-emerald-400 font-mono truncate">
                          Expendables: {formatRupiah(umk.realizationVoucher.totalExpendablesAmount)}
                        </div>
                      </div>

                      {/* Box 3: Voucher 1 Pengembalian Sisa */}
                      <div className="bg-slate-950/70 p-3 rounded-xl border border-amber-500/20 space-y-1">
                        <div className="text-[10px] text-amber-400 font-bold uppercase">
                          Voucher 1: Setor Sisa
                        </div>
                        <div className="text-base font-black text-amber-400 font-mono">
                          {formatRupiah(returnAmt)}
                        </div>
                        <div className="text-[10px] text-slate-400 font-mono truncate">
                          Status: {umk.returnVoucher.status}
                        </div>
                      </div>

                      {/* Box 4: Rekonsiliasi & Jadwal */}
                      <div className="bg-slate-950/70 p-3 rounded-xl border border-slate-800/80 space-y-1">
                        <div className="text-[10px] text-slate-400 font-bold uppercase">
                          Jadwal & Rekonsiliasi
                        </div>
                        <div className="text-[11px] font-mono text-slate-300">
                          {formatDateIndo(umk.disbursementDate)} s/d <strong className="text-white">{formatDateIndo(umk.dueDate)}</strong>
                        </div>
                        <div className="text-[10px] font-mono">
                          {umk.isReconciled ? (
                            <span className="text-emerald-400 font-bold">✓ Rekonsiliasi 100% Klir (Nihil)</span>
                          ) : (
                            <span className="text-amber-400">Selisih: {formatRupiah(umk.balanceAmount)}</span>
                          )}
                        </div>
                      </div>

                    </div>

                    {/* Bottom Row: PIC, Custodian & Action Buttons */}
                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pt-2 border-t border-slate-800/80 text-xs">
                      <div className="flex items-center gap-4 text-slate-400 text-[11px]">
                        <div>
                          PIC: <strong className="text-slate-200">{umk.requesterName}</strong> (NIP: {umk.requesterNip})
                        </div>
                        <div>
                          Kasir GA: <strong className="text-slate-200">{umk.custodianName}</strong>
                        </div>
                      </div>

                      <div className="flex flex-wrap items-center gap-2">
                        {umk.status === "Menunggu Approval Keuangan" && (
                          <button
                            onClick={() => handleApproveDisbursement(umk)}
                            className="px-3.5 py-1.5 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs rounded-lg shadow flex items-center gap-1.5 transition-all cursor-pointer"
                          >
                            <Check className="w-3.5 h-3.5" />
                            <span>Cairkan UMK (Approval Keuangan)</span>
                          </button>
                        )}

                        <button
                          onClick={() => handleOpenQrValidator(umk)}
                          className="px-3 py-1.5 bg-sky-950 hover:bg-sky-900 text-sky-300 border border-sky-600/50 font-bold text-xs rounded-lg flex items-center gap-1.5 transition-all cursor-pointer"
                          title="Pindai / Validasi QR Dokumen UMK Ini"
                        >
                          <QrCode className="w-3.5 h-3.5 text-sky-400" />
                          <span>Validasi QR</span>
                        </button>

                        <button
                          onClick={() => handleOpenSettlement(umk)}
                          className="px-3.5 py-1.5 bg-gradient-to-r from-sky-500 to-blue-600 hover:from-sky-400 hover:to-blue-500 text-slate-950 font-black text-xs rounded-lg shadow flex items-center gap-1.5 transition-all cursor-pointer"
                        >
                          <Receipt className="w-3.5 h-3.5" />
                          <span>Input LPJ & 2 Voucher</span>
                        </button>

                        <button
                          onClick={() => handleOpenPrint(umk, "LPJ_RECONCILIATION")}
                          className="px-3.5 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-200 font-bold text-xs rounded-lg border border-slate-700 flex items-center gap-1.5 transition-all cursor-pointer"
                        >
                          <Printer className="w-3.5 h-3.5 text-emerald-400" />
                          <span>Cetak LPJ Resmi</span>
                        </button>
                      </div>
                    </div>

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

        </div>
      )}

      {/* ========================================================================= */}
      {/* TAB 2: 2 VOUCHER LPJ & REKONSILIASI KEUANGAN */}
      {/* ========================================================================= */}
      {activeTab === "TWO_VOUCHERS" && (
        <div className="space-y-6">
          
          <div className="bg-slate-900 border border-slate-800 rounded-2xl p-5 sm:p-6 space-y-4">
            <div className="flex items-center gap-3 border-b border-slate-800 pb-3">
              <div className="p-2.5 bg-emerald-500/20 text-emerald-400 rounded-xl">
                <Receipt className="w-5 h-5" />
              </div>
              <div>
                <h3 className="text-base font-bold text-white">
                  Mekanisme 2 Voucher Pertanggungjawaban UMK Kas Kecil ke Bagian Keuangan
                </h3>
                <p className="text-xs text-slate-400">
                  Setiap siklus pengisian kas kecil GA (maksimal 2 minggu) wajib dilaporkan kembali dengan dua voucher resmi:
                </p>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
              
              {/* Voucher 1 Card */}
              <div className="bg-slate-950/80 border-2 border-amber-500/40 rounded-2xl p-5 space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-xs font-black uppercase tracking-wider bg-amber-400 text-slate-950 px-2.5 py-0.5 rounded font-mono">
                    VOUCHER 1: PENGEMBALIAN UMK
                  </span>
                  <ArrowDownLeft className="w-5 h-5 text-amber-400" />
                </div>
                <h4 className="text-sm font-bold text-white">
                  Pengembalian Sisa Saldo Kas Kecil ke Kasir Keuangan
                </h4>
                <p className="text-xs text-slate-300 leading-relaxed">
                  Jika terdapat sisa dana kas kecil yang tidak terpakai selama periode operasional 2 minggu, pemegang kasir GA wajib menyetorkannya kembali ke Kasir Perbendaharaan Keuangan Pusat dan melampirkan <strong>Surat Tanda Setor (STS)</strong>.
                </p>
                <div className="border-t border-slate-800 pt-2 text-xs font-mono text-amber-300 space-y-1">
                  <div>✓ Menghindari akumulasi saldo mengendap di unit kerja</div>
                  <div>✓ Otomatis nol / nihil jika dana habis terpakai secara sah</div>
                </div>
              </div>

              {/* Voucher 2 Card */}
              <div className="bg-slate-950/80 border-2 border-sky-500/40 rounded-2xl p-5 space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-xs font-black uppercase tracking-wider bg-sky-400 text-slate-950 px-2.5 py-0.5 rounded font-mono">
                    VOUCHER 2: REALISASI UMK
                  </span>
                  <Receipt className="w-5 h-5 text-sky-400" />
                </div>
                <h4 className="text-sm font-bold text-white">
                  Realisasi Belanja Bahan Habis Pakai (Expendables) & Kuitansi Sah
                </h4>
                <p className="text-xs text-slate-300 leading-relaxed">
                  Mencatat rincian belanja operasional dengan minimal satu mata anggaran Expendables (ATK, kebersihan, pantry, listrik) atau banyak rincian mata anggaran, lengkap dengan nomor kuitansi, nama vendor, dan tanggal transaksi.
                </p>
                <div className="border-t border-slate-800 pt-2 text-xs font-mono text-sky-300 space-y-1">
                  <div>✓ Setiap baris wajib memiliki nomor kuitansi / struk sah</div>
                  <div>✓ Dilengkapi pembagian otomatis pos Expendables & Operasional</div>
                </div>
              </div>

            </div>
          </div>

          {/* Quick List of Active 2 Vouchers */}
          <div className="bg-slate-900 border border-slate-800 rounded-2xl p-5 sm:p-6 space-y-4">
            <h3 className="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
              <CheckCircle2 className="w-4 h-4 text-emerald-400" />
              <span>Status Rekonsiliasi 2 Voucher per Dokumen UMK</span>
            </h3>

            <div className="overflow-x-auto">
              <table className="w-full text-left text-xs border-collapse">
                <thead>
                  <tr className="border-b border-slate-800 text-slate-400 uppercase text-[10px]">
                    <th className="py-2.5 px-3">Nomor UMK & Periode</th>
                    <th className="py-2.5 px-3">Voucher Pengeluaran Awal</th>
                    <th className="py-2.5 px-3">Voucher 2: Realisasi</th>
                    <th className="py-2.5 px-3">Voucher 1: Pengembalian</th>
                    <th className="py-2.5 px-3 text-center">Rekonsiliasi</th>
                    <th className="py-2.5 px-3 text-right">Aksi Cetak</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-800">
                  {umkList.map((umk) => (
                    <tr key={umk.id} className="hover:bg-slate-800/30">
                      <td className="py-3 px-3">
                        <div className="font-mono font-bold text-white">{umk.umkNumber}</div>
                        <div className="text-[10px] text-slate-400 truncate max-w-xs">{umk.periodName}</div>
                      </td>
                      <td className="py-3 px-3">
                        <div className="font-mono text-purple-300 font-bold">{formatRupiah(umk.disbursementVoucher.amount)}</div>
                        <div className="text-[9px] text-slate-500 font-mono">{umk.disbursementVoucher.voucherNumber}</div>
                      </td>
                      <td className="py-3 px-3">
                        <div className="font-mono text-sky-300 font-bold">{formatRupiah(umk.realizationVoucher.totalRealizedAmount)}</div>
                        <div className="text-[9px] text-slate-500 font-mono">{umk.realizationVoucher.voucherNumber} ({umk.realizationVoucher.expenseItems.length} Item)</div>
                      </td>
                      <td className="py-3 px-3">
                        <div className="font-mono text-amber-300 font-bold">{formatRupiah(umk.returnVoucher.returnAmount)}</div>
                        <div className="text-[9px] text-slate-500 font-mono">{umk.returnVoucher.voucherNumber}</div>
                      </td>
                      <td className="py-3 px-3 text-center">
                        {umk.isReconciled ? (
                          <span className="text-[10px] font-bold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 px-2 py-0.5 rounded font-mono">
                            ✓ KLIR (NIHIL)
                          </span>
                        ) : (
                          <span className="text-[10px] font-bold bg-amber-500/20 text-amber-300 border border-amber-500/30 px-2 py-0.5 rounded font-mono">
                            BELUM LPJ
                          </span>
                        )}
                      </td>
                      <td className="py-3 px-3 text-right">
                        <div className="flex items-center justify-end gap-1.5">
                          <button
                            onClick={() => handleOpenQrValidator(umk)}
                            className="px-2 py-1 bg-sky-950 hover:bg-sky-900 text-sky-300 font-bold text-[11px] rounded border border-sky-600/50 inline-flex items-center gap-1 cursor-pointer"
                            title="Validasi QR Dokumen"
                          >
                            <QrCode className="w-3 h-3 text-sky-400" />
                            <span>Validasi QR</span>
                          </button>
                          <button
                            onClick={() => handleOpenPrint(umk, "LPJ_RECONCILIATION")}
                            className="px-2.5 py-1 bg-slate-800 hover:bg-slate-700 text-slate-200 font-bold text-[11px] rounded border border-slate-700 inline-flex items-center gap-1 cursor-pointer"
                          >
                            <Printer className="w-3 h-3 text-emerald-400" />
                            <span>Cetak LPJ</span>
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

        </div>
      )}

      {/* ========================================================================= */}
      {/* TAB 3: MATRIKS MATA ANGGARAN EXPENDABLES */}
      {/* ========================================================================= */}
      {activeTab === "EXPENDABLES_MATRIX" && (
        <div className="space-y-4">
          <div className="bg-slate-900 border border-slate-800 rounded-2xl p-5 sm:p-6 space-y-4">
            <div className="flex items-center justify-between border-b border-slate-800 pb-3">
              <div className="flex items-center gap-3">
                <div className="p-2.5 bg-emerald-500/20 text-emerald-400 rounded-xl">
                  <Layers className="w-5 h-5" />
                </div>
                <div>
                  <h3 className="text-base font-bold text-white">
                    Matriks Kode Mata Anggaran Belanja Kas Kecil Seksi Umum (GA)
                  </h3>
                  <p className="text-xs text-slate-400">
                    Daftar resmi mata anggaran bahan habis pakai (Expendables) dan operasional rutin kantor
                  </p>
                </div>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {UMK_BUDGET_ACCOUNTS.map((acct) => (
                <div
                  key={acct.code}
                  className={`p-4 rounded-xl border transition-all ${
                    acct.isExpendables 
                      ? "bg-slate-950/80 border-emerald-500/30 hover:border-emerald-500" 
                      : "bg-slate-950/80 border-slate-800 hover:border-purple-500/40"
                  }`}
                >
                  <div className="flex items-center justify-between mb-2">
                    <span className="font-mono text-xs font-bold text-white bg-slate-800 px-2 py-0.5 rounded">
                      {acct.code}
                    </span>
                    <span className={`text-[10px] font-bold px-2 py-0.5 rounded uppercase ${
                      acct.isExpendables 
                        ? "bg-emerald-500/20 text-emerald-300 border border-emerald-500/30" 
                        : "bg-purple-500/20 text-purple-300 border border-purple-500/30"
                    }`}>
                      {acct.category}
                    </span>
                  </div>
                  <h4 className="text-xs font-bold text-white mb-1">
                    {acct.name.split("-")[1] || acct.name}
                  </h4>
                  <p className="text-[11px] text-slate-400 leading-relaxed">
                    {acct.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* ========================================================================= */}
      {/* TAB 4: SOP & ATURAN 2 MINGGU */}
      {/* ========================================================================= */}
      {activeTab === "SOP_GUIDELINES" && (
        <div className="bg-slate-900 border border-slate-800 rounded-2xl p-6 sm:p-8 space-y-6 max-w-4xl mx-auto">
          <div className="flex items-center gap-3.5 border-b border-slate-800 pb-4">
            <div className="p-3 bg-emerald-500/20 text-emerald-400 rounded-xl">
              <ShieldCheck className="w-6 h-6" />
            </div>
            <div>
              <h2 className="text-lg font-bold text-white">
                SOP Pengelolaan UMK Kas Kecil Seksi Umum (GA) & Pertanggungjawaban 2 Minggu
              </h2>
              <p className="text-xs text-slate-400">
                Standar Operasional Prosedur Perbendaharaan PT MEDIAN CLOUD
              </p>
            </div>
          </div>

          <div className="space-y-4 text-xs text-slate-300 leading-relaxed">
            <div className="p-4 bg-slate-950 rounded-xl border border-slate-800 space-y-2">
              <h4 className="font-bold text-sm text-emerald-400 flex items-center gap-2">
                <span>1. Ketentuan Batas Waktu 2 Minggu (14 Hari Kalender)</span>
              </h4>
              <p>
                Setiap pencairan Uang Muka Kerja (UMK) Kas Kecil Seksi Umum wajib dipertanggungjawabkan paling lambat <strong>14 hari kalender (2 minggu)</strong> sejak dana dicairkan oleh kasir perbendaharaan. Sistem secara otomatis menghitung masa tenggang dan memberikan peringatan dini (countdown) status jatuh tempo.
              </p>
            </div>

            <div className="p-4 bg-slate-950 rounded-xl border border-slate-800 space-y-2">
              <h4 className="font-bold text-sm text-sky-400 flex items-center gap-2">
                <span>2. Akun Anggaran UMK Induk (Lampiran Pengeluaran Awal)</span>
              </h4>
              <p>
                Pencairan awal UMK menggunakan 1 Akun Anggaran Induk resmi: <strong>1101.02 - Kas Kecil Seksi Umum GA / UMK Operasional</strong> yang menjadi lampiran voucher kas keluar awal dari bagian keuangan.
              </p>
            </div>

            <div className="p-4 bg-slate-950 rounded-xl border border-slate-800 space-y-2">
              <h4 className="font-bold text-sm text-amber-400 flex items-center gap-2">
                <span>3. Kewajiban Pelaporan Kembali dengan Dua (2) Voucher Resmi</span>
              </h4>
              <p>
                Dalam proses settlement / rekonsiliasi LPJ ke bagian keuangan, pemegang kasir GA wajib menerbitkan dan melampirkan 2 Voucher:
              </p>
              <ul className="list-disc pl-5 space-y-1 text-slate-300">
                <li>
                  <strong>Voucher 1: Voucher Pengembalian UMK</strong> — Bukti setor pengembalian sisa dana kas kecil yang tidak terpakai kembali ke Kasir Perbendaharaan Pusat.
                </li>
                <li>
                  <strong>Voucher 2: Voucher Realisasi UMK</strong> — Rincian belanja aktual yang memuat minimal 1 mata anggaran Expendables (Bahan Habis Pakai) atau multi mata anggaran operasional beserta kuitansi sah.
                </li>
              </ul>
            </div>

            <div className="p-4 bg-slate-950 rounded-xl border border-slate-800 space-y-2">
              <h4 className="font-bold text-sm text-purple-400 flex items-center gap-2">
                <span>4. Keabsahan Kuitansi & Bukti Pengeluaran</span>
              </h4>
              <p>
                Seluruh transaksi belanja kas kecil wajib didukung dengan kuitansi sah (Struk Kasir Resmi bermesin kasir, Kuitansi Bermaterai untuk transaksi sesuai ambang batas perundangan, atau Faktur/e-Invoice Toko Resmi).
              </p>
            </div>
          </div>
        </div>
      )}

      {/* Modals */}
      {isRequestModalOpen && (
        <UmkRequestFormModal
          isOpen={isRequestModalOpen}
          onClose={() => setIsRequestModalOpen(false)}
          onSubmit={handleCreateUmk}
        />
      )}

      {isSettlementModalOpen && selectedUmk && (
        <UmkSettlementModal
          umk={selectedUmk}
          isOpen={isSettlementModalOpen}
          onClose={() => setIsSettlementModalOpen(false)}
          onSave={handleUpdateUmk}
          onOpenPrint={handleOpenPrint}
        />
      )}

      {isPrintModalOpen && selectedUmk && (
        <UmkPrintDoc
          umk={selectedUmk}
          initialDocType={printDocType}
          onClose={() => setIsPrintModalOpen(false)}
          onOpenValidator={(u) => {
            handleOpenQrValidator(u);
          }}
        />
      )}

      {isQrValidationOpen && (
        <UmkQrValidationModal
          isOpen={isQrValidationOpen}
          onClose={() => setIsQrValidationOpen(false)}
          allUmkRequests={umkList}
          preselectedUmk={targetQrUmk}
          onUpdateUmk={handleUpdateUmk}
          onOpenPrint={(umk, docType) => {
            setIsQrValidationOpen(false);
            handleOpenPrint(umk, docType);
          }}
        />
      )}

      {/* Email Gateway Dispatch Drawer / Modal */}
      {isEmailLogsOpen && (
        <EmailGatewayDrawerModal
          isOpen={isEmailLogsOpen}
          onClose={() => setIsEmailLogsOpen(false)}
        />
      )}

    </div>
  );
};

export default UmkModule;