import React, { useState, useMemo } from "react";
import { 
  Employee, 
  ProcurementRequest, 
  ProcurementCategory, 
  ProcurementStatus, 
  ProcurementItem, 
  VendorBid 
} from "../types";
import { 
  ShoppingBag, 
  Plus, 
  Search, 
  Filter, 
  CheckCircle2, 
  XCircle, 
  Clock, 
  Building2, 
  FileText, 
  DollarSign, 
  Package, 
  Truck, 
  ClipboardCheck, 
  Award, 
  UserCheck, 
  Download, 
  Sparkles, 
  Layers, 
  AlertCircle,
  ShieldCheck,
  Check
} from "lucide-react";

interface ProcurementGaModuleProps {
  currentUser: Employee;
  requests: ProcurementRequest[];
  onUpdateRequests: React.Dispatch<React.SetStateAction<ProcurementRequest[]>>;
}

export default function ProcurementGaModule({
  currentUser,
  requests,
  onUpdateRequests
}: ProcurementGaModuleProps) {
  // Navigation Tabs: 'all' | 'pr' | 'bidding' | 'po' | 'bast'
  const [activeTab, setActiveTab] = useState<"all" | "pr" | "bidding" | "po" | "bast">("all");

  // Search & Filters
  const [searchQuery, setSearchQuery] = useState("");
  const [categoryFilter, setCategoryFilter] = useState<string>("ALL");
  const [statusFilter, setStatusFilter] = useState<string>("ALL");

  // Create PR Modal State
  const [isCreatePrModalOpen, setIsCreatePrModalOpen] = useState(false);
  const [prTitle, setPrTitle] = useState("");
  const [category, setCategory] = useState<ProcurementCategory>("Perlengkapan Kantor");
  const [targetDate, setTargetDate] = useState(new Date(Date.now() + 14 * 24 * 3600 * 1000).toISOString().split("T")[0]);
  const [justification, setJustification] = useState("");

  // Items List State inside Modal
  const [items, setItems] = useState<Array<{ name: string; spec: string; qty: number; unit: string; price: number }>>([
    { name: "Kertas HPL A4 80gr & Spidol Whiteboard", spec: "Dus 5 Ream", qty: 20, unit: "Dus", price: 250000 }
  ]);

  // Vendor Bidding Modal State
  const [isBiddingModalOpen, setIsBiddingModalOpen] = useState(false);
  const [selectedPrForBidding, setSelectedPrForBidding] = useState<ProcurementRequest | null>(null);
  const [bids, setBids] = useState<Array<{ vendorName: string; contact: string; phone: string; amount: number; days: number; warranty: string; score: number; notes: string }>>([
    { vendorName: "PT Offix Solution", contact: "Andi", phone: "0812-1122-3344", amount: 5000000, days: 3, warranty: "1 Tahun", score: 90, notes: "Stok ready" },
    { vendorName: "CV Mitra Utama Office", contact: "Budi", phone: "0813-4455-6677", amount: 5200000, days: 5, warranty: "1 Tahun", score: 82, notes: "Free kirim" }
  ]);
  const [winnerVendorIndex, setWinnerVendorIndex] = useState<number>(0);

  // BAST Modal State
  const [isBastModalOpen, setIsBastModalOpen] = useState(false);
  const [bastProcurement, setBastProcurement] = useState<ProcurementRequest | null>(null);
  const [inspectorName, setInspectorName] = useState(currentUser.name);
  const [conditionStatus, setConditionStatus] = useState<"Lengkap & Baik" | "Ada Kerusakan/Sesuai Garansi" | "Tidak Sesuai Specs">("Lengkap & Baik");
  const [bastNotes, setBastNotes] = useState("Seluruh barang telah diperiksa fisik, diuji fungsi, dan diterima dalam keadaan lengkap.");

  // Toast Notification
  const [toastMsg, setToastMsg] = useState<string | null>(null);

  const showToast = (msg: string) => {
    setToastMsg(msg);
    setTimeout(() => setToastMsg(null), 4000);
  };

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

  // Add Item Row in PR Form
  const handleAddItem = () => {
    setItems(prev => [...prev, { name: "", spec: "", qty: 1, unit: "Unit", price: 0 }]);
  };

  const handleRemoveItem = (idx: number) => {
    setItems(prev => prev.filter((_, i) => i !== idx));
  };

  // Submit PR Request
  const handleCreatePr = (e: React.FormEvent) => {
    e.preventDefault();
    if (!prTitle.trim()) {
      alert("Masukkan Judul Pengadaan!");
      return;
    }

    const prNumber = `PR-GA-${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, "0")}-${String(requests.length + 1).padStart(3, "0")}`;

    const formattedItems: ProcurementItem[] = items.map((it, idx) => ({
      id: `pitem-${Date.now()}-${idx}`,
      itemName: it.name || "Item Pengadaan",
      specification: it.spec || "-",
      qty: Number(it.qty) || 1,
      unit: it.unit || "Unit",
      estimatedUnitPrice: Number(it.price) || 0,
      totalPrice: (Number(it.qty) || 1) * (Number(it.price) || 0)
    }));

    const totalCost = formattedItems.reduce((acc, curr) => acc + curr.totalPrice, 0);

    const newPr: ProcurementRequest = {
      id: `proc-${Date.now()}`,
      prNo: prNumber,
      title: prTitle,
      category,
      requesterId: currentUser.id,
      requesterName: currentUser.name,
      requesterDivision: currentUser.division || "General Affairs",
      requestDate: new Date().toISOString().split("T")[0],
      targetDate,
      justification: justification || "Pengadaan sarana operasional General Affairs",
      items: formattedItems,
      totalEstimatedCost: totalCost,
      vendorBids: [],
      status: "Menunggu Approval GA & CFO",
      createdAt: new Date().toISOString()
    };

    onUpdateRequests(prev => [newPr, ...prev]);
    setIsCreatePrModalOpen(false);
    showToast(`Purchase Request ${prNumber} berhasil dibuat & diajukan!`);
  };

  // Approval by Head of GA & CFO
  const handleApproveProcurement = (proc: ProcurementRequest) => {
    onUpdateRequests(prev => prev.map(p => {
      if (p.id !== proc.id) return p;
      return {
        ...p,
        status: "Evaluasi Vendor (Bidding)",
        gaApproval: {
          approverName: `${currentUser.name} (${currentUser.position})`,
          approvedAt: new Date().toISOString().replace("T", " ").substring(0, 16),
          notes: "Approved GA & CFO. Lanjutkan ke tahap Bidding Vendor."
        }
      };
    }));
    showToast(`PR ${proc.prNo} disetujui! Lanjutkan ke Evaluasi Vendor Bidding.`);
  };

  // Submit Vendor Bidding Winner
  const handleSaveBiddingWinner = (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedPrForBidding) return;

    const formattedBids: VendorBid[] = bids.map((b, idx) => ({
      id: `vbid-${Date.now()}-${idx}`,
      vendorName: b.vendorName || `Vendor ${idx + 1}`,
      contactPerson: b.contact,
      phone: b.phone,
      quotedAmount: Number(b.amount) || 0,
      deliveryDays: Number(b.days) || 7,
      warrantyPeriod: b.warranty || "1 Tahun",
      score: Number(b.score) || 80,
      notes: b.notes,
      isSelected: idx === winnerVendorIndex
    }));

    const winner = formattedBids[winnerVendorIndex];
    const poNumber = `PO-GA-${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, "0")}-${String(requests.length + 1).padStart(3, "0")}`;

    onUpdateRequests(prev => prev.map(p => {
      if (p.id !== selectedPrForBidding.id) return p;
      return {
        ...p,
        poNo: poNumber,
        vendorBids: formattedBids,
        selectedVendorName: winner?.vendorName || "Vendor Pemenang",
        finalPoAmount: winner?.quotedAmount || p.totalEstimatedCost,
        status: "PO Issued"
      };
    }));

    setIsBiddingModalOpen(false);
    showToast(`Vendor ${winner?.vendorName} terpilih! PO ${poNumber} diterbitkan.`);
  };

  // Submit BAST (Berita Acara Serah Terima GA)
  const handleSaveBast = (e: React.FormEvent) => {
    e.preventDefault();
    if (!bastProcurement) return;

    const bastNo = `BAST-GA-${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, "0")}-${String(requests.length + 1).padStart(3, "0")}`;

    onUpdateRequests(prev => prev.map(p => {
      if (p.id !== bastProcurement.id) return p;
      return {
        ...p,
        status: "Selesai",
        bastDetails: {
          bastNo,
          receivedDate: new Date().toISOString().split("T")[0],
          inspectorName: inspectorName || currentUser.name,
          conditionStatus,
          bastNotes,
          attachmentName: `BAST_${bastNo}.pdf`
        }
      };
    }));

    setIsBastModalOpen(false);
    showToast(`Berita Acara Serah Terima (BAST GA) ${bastNo} diterbitkan & Selesai!`);
  };

  // Filtered List
  const filteredRequests = useMemo(() => {
    return requests.filter(r => {
      const q = searchQuery.toLowerCase();
      const matchQuery = 
        r.prNo.toLowerCase().includes(q) ||
        (r.poNo && r.poNo.toLowerCase().includes(q)) ||
        r.title.toLowerCase().includes(q) ||
        r.requesterName.toLowerCase().includes(q) ||
        (r.selectedVendorName && r.selectedVendorName.toLowerCase().includes(q));

      const matchTab = 
        activeTab === "all" ? true :
        activeTab === "pr" ? r.status === "Draft PR" || r.status === "Menunggu Approval GA & CFO" :
        activeTab === "bidding" ? r.status === "Evaluasi Vendor (Bidding)" :
        activeTab === "po" ? r.status === "PO Issued" || r.status === "Pengiriman Vendor" :
        activeTab === "bast" ? r.status === "Penerimaan & BAST GA" || r.status === "Selesai" : true;

      const matchCategory = categoryFilter === "ALL" || r.category === categoryFilter;
      const matchStatus = statusFilter === "ALL" || r.status === statusFilter;

      return matchQuery && matchTab && matchCategory && matchStatus;
    });
  }, [requests, searchQuery, activeTab, categoryFilter, statusFilter]);

  return (
    <div className="space-y-6 animate-in fade-in duration-300">
      
      {/* Toast Alert */}
      {toastMsg && (
        <div className="fixed bottom-5 right-5 z-50 bg-[#0f172a] border-2 border-emerald-400 text-emerald-100 px-5 py-3 rounded-lg shadow-2xl flex items-center gap-3 font-mono text-xs animate-bounce">
          <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0" />
          <span>{toastMsg}</span>
        </div>
      )}

      {/* GA Executive Banner */}
      <div className="bg-gradient-to-r from-slate-900 via-[#0a1829] to-slate-900 border-2 border-emerald-500/40 p-5 sm:p-6 rounded-xl shadow-2xl relative overflow-hidden">
        <div className="absolute top-0 right-0 w-96 h-96 bg-emerald-500/10 rounded-full blur-3xl pointer-events-none"></div>
        <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 relative z-10">
          <div>
            <div className="flex items-center gap-2 mb-1">
              <span className="px-2.5 py-0.5 bg-emerald-500/20 text-emerald-300 border border-emerald-400/40 text-[10px] font-mono font-bold rounded uppercase tracking-wider">
                GENERAL AFFAIRS (GA) PROCUREMENT
              </span>
              <span className="px-2.5 py-0.5 bg-sky-500/20 text-sky-300 border border-sky-400/40 text-[10px] font-mono font-bold rounded uppercase tracking-wider flex items-center gap-1">
                <span className="w-1.5 h-1.5 rounded-full bg-sky-400 animate-pulse"></span>
                PR, PO, BIDDING VENDOR & BAST
              </span>
            </div>
            <h2 className="text-xl sm:text-2xl font-black uppercase tracking-tight text-white flex items-center gap-2.5">
              <ShoppingBag className="w-6 h-6 text-emerald-400 shrink-0" />
              Sistem Pengadaan Barang & Jasa (Divisi GA)
            </h2>
            <p className="text-xs text-slate-300 max-w-3xl mt-1 leading-relaxed">
              Pengelolaan seluruh rantai pengadaan General Affairs (Perlengkapan Kantor, Perangkat IT, Pemeliharaan Gedung, Jasa Vendor & Kendaraan Operasional) mulai dari Purchase Request (PR), Bidding Penawaran Vendor, Purchase Order (PO), hingga Penerimaan & Berita Acara Serah Terima (BAST GA).
            </p>
          </div>

          <button
            onClick={() => setIsCreatePrModalOpen(true)}
            className="w-full lg:w-auto px-5 py-2.5 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-black font-black text-xs uppercase tracking-wider rounded-lg shadow-lg shadow-emerald-500/30 flex items-center justify-center gap-2 transition-all active:scale-95 shrink-0"
          >
            <Plus className="w-4 h-4" />
            Buat Purchase Request (PR GA)
          </button>
        </div>

        {/* Realtime Procurement Metrics */}
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-5 pt-4 border-t border-emerald-500/20 font-mono text-xs">
          <div className="bg-[#081026]/80 p-2.5 rounded-lg border border-emerald-500/30">
            <span className="text-[10px] uppercase text-slate-400 font-bold block">Total Pengadaan:</span>
            <span className="text-base font-black text-emerald-300 block mt-0.5">{requests.length} Permohonan</span>
          </div>
          <div className="bg-[#081026]/80 p-2.5 rounded-lg border border-amber-500/30">
            <span className="text-[10px] uppercase text-slate-400 font-bold block">Tahap Bidding Vendor:</span>
            <span className="text-base font-black text-amber-400 block mt-0.5">
              {requests.filter(r => r.status === "Evaluasi Vendor (Bidding)").length} Pengadaan
            </span>
          </div>
          <div className="bg-[#081026]/80 p-2.5 rounded-lg border border-sky-500/30">
            <span className="text-[10px] uppercase text-slate-400 font-bold block">PO Issued Active:</span>
            <span className="text-base font-black text-sky-400 block mt-0.5">
              {requests.filter(r => r.status === "PO Issued").length} Order
            </span>
          </div>
          <div className="bg-[#081026]/80 p-2.5 rounded-lg border border-purple-500/30">
            <span className="text-[10px] uppercase text-slate-400 font-bold block">Nilai Total Pengadaan:</span>
            <span className="text-sm font-black text-purple-300 block mt-0.5">
              {formatIDR(requests.reduce((acc, curr) => acc + (curr.finalPoAmount || curr.totalEstimatedCost), 0))}
            </span>
          </div>
        </div>
      </div>

      {/* Tabs Bar */}
      <div className="flex items-center gap-1.5 overflow-x-auto no-scrollbar border-b border-[#1e293b] pb-2">
        <button
          onClick={() => setActiveTab("all")}
          className={`px-3.5 py-2 rounded-lg text-xs font-bold uppercase tracking-wide transition-all whitespace-nowrap flex items-center gap-2 ${
            activeTab === "all"
              ? "bg-emerald-500 text-black shadow-md shadow-emerald-500/30"
              : "bg-[#0f172a] text-slate-300 hover:bg-[#1e293b] border border-[#1e293b]"
          }`}
        >
          <Layers className="w-4 h-4" />
          Semua Pengadaan ({requests.length})
        </button>

        <button
          onClick={() => setActiveTab("pr")}
          className={`px-3.5 py-2 rounded-lg text-xs font-bold uppercase tracking-wide transition-all whitespace-nowrap flex items-center gap-2 ${
            activeTab === "pr"
              ? "bg-emerald-500 text-black shadow-md shadow-emerald-500/30"
              : "bg-[#0f172a] text-slate-300 hover:bg-[#1e293b] border border-[#1e293b]"
          }`}
        >
          <FileText className="w-4 h-4 text-amber-400" />
          1. Purchase Request (PR)
        </button>

        <button
          onClick={() => setActiveTab("bidding")}
          className={`px-3.5 py-2 rounded-lg text-xs font-bold uppercase tracking-wide transition-all whitespace-nowrap flex items-center gap-2 ${
            activeTab === "bidding"
              ? "bg-emerald-500 text-black shadow-md shadow-emerald-500/30"
              : "bg-[#0f172a] text-slate-300 hover:bg-[#1e293b] border border-[#1e293b]"
          }`}
        >
          <Award className="w-4 h-4 text-sky-400" />
          2. Bidding & Penawaran Vendor
        </button>

        <button
          onClick={() => setActiveTab("po")}
          className={`px-3.5 py-2 rounded-lg text-xs font-bold uppercase tracking-wide transition-all whitespace-nowrap flex items-center gap-2 ${
            activeTab === "po"
              ? "bg-emerald-500 text-black shadow-md shadow-emerald-500/30"
              : "bg-[#0f172a] text-slate-300 hover:bg-[#1e293b] border border-[#1e293b]"
          }`}
        >
          <Package className="w-4 h-4 text-purple-400" />
          3. Purchase Order (PO Issued)
        </button>

        <button
          onClick={() => setActiveTab("bast")}
          className={`px-3.5 py-2 rounded-lg text-xs font-bold uppercase tracking-wide transition-all whitespace-nowrap flex items-center gap-2 ${
            activeTab === "bast"
              ? "bg-emerald-500 text-black shadow-md shadow-emerald-500/30"
              : "bg-[#0f172a] text-slate-300 hover:bg-[#1e293b] border border-[#1e293b]"
          }`}
        >
          <ClipboardCheck className="w-4 h-4 text-emerald-400" />
          4. Penerimaan & BAST GA
        </button>
      </div>

      {/* Filter Bar */}
      <div className="bg-[#0f172a] border border-[#1e293b] p-4 rounded-xl flex flex-col md:flex-row items-center justify-between gap-3 font-mono text-xs">
        <div className="relative w-full md:w-80">
          <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
          <input
            type="text"
            value={searchQuery}
            onChange={e => setSearchQuery(e.target.value)}
            placeholder="Cari PR No, PO No, vendor, pemohon..."
            className="w-full bg-[#081026] border border-[#1e293b] pl-9 pr-3 py-1.5 text-xs text-white placeholder-slate-500 rounded-lg focus:outline-none focus:border-emerald-400"
          />
        </div>

        <div className="flex flex-wrap items-center gap-2 w-full md:w-auto">
          <select
            value={categoryFilter}
            onChange={e => setCategoryFilter(e.target.value)}
            className="bg-[#081026] border border-[#1e293b] px-3 py-1.5 text-xs text-slate-300 rounded-lg focus:outline-none focus:border-emerald-400"
          >
            <option value="ALL">Semua Kategori Pengadaan</option>
            <option value="Perlengkapan Kantor">Perlengkapan Kantor</option>
            <option value="Perangkat IT & Elektronik">Perangkat IT & Elektronik</option>
            <option value="Pemeliharaan Gedung & Fasilitas">Pemeliharaan Gedung & Fasilitas</option>
            <option value="Jasa Konsultan & Vendor">Jasa Konsultan & Vendor</option>
            <option value="Kendaraan Operasional">Kendaraan Operasional</option>
          </select>
        </div>
      </div>

      {/* Procurement Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {filteredRequests.length === 0 ? (
          <div className="col-span-full bg-[#0f172a] border border-[#1e293b] p-12 rounded-xl text-center text-slate-400 font-mono text-xs">
            Tidak ada permohonan pengadaan barang / jasa yang sesuai.
          </div>
        ) : (
          filteredRequests.map(req => (
            <div
              key={req.id}
              className="bg-[#0f172a] border border-[#1e293b] hover:border-emerald-500/50 p-5 rounded-xl shadow-xl flex flex-col justify-between space-y-4 relative transition-all"
            >
              <div>
                {/* Badge Header */}
                <div className="flex items-center justify-between gap-2 mb-2">
                  <span className="px-2.5 py-0.5 bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 text-[10px] font-mono font-bold rounded uppercase">
                    {req.category}
                  </span>

                  <span className={`px-2 py-0.5 rounded text-[10px] font-mono font-bold ${
                    req.status === "Selesai"
                      ? "bg-emerald-500/20 text-emerald-300 border border-emerald-500/40"
                      : req.status === "PO Issued"
                      ? "bg-sky-500/20 text-sky-300 border border-sky-500/40"
                      : req.status === "Evaluasi Vendor (Bidding)"
                      ? "bg-amber-500/20 text-amber-300 border border-amber-500/40"
                      : "bg-purple-500/20 text-purple-300 border border-purple-500/40"
                  }`}>
                    {req.status}
                  </span>
                </div>

                {/* PR & PO Number */}
                <div className="flex items-center justify-between gap-2 font-mono text-xs">
                  <span className="font-bold text-sky-300">{req.prNo}</span>
                  {req.poNo && <span className="font-bold text-purple-300">{req.poNo}</span>}
                </div>

                <h3 className="text-sm font-bold text-white mt-1 line-clamp-2">
                  {req.title}
                </h3>

                {/* Requester & Costs */}
                <div className="mt-3 pt-3 border-t border-[#1e293b] grid grid-cols-2 gap-2 font-mono text-[11px] text-slate-300">
                  <div>
                    <span className="text-slate-400 block text-[10px]">Pemohon:</span>
                    <strong className="text-slate-200">{req.requesterName} ({req.requesterDivision})</strong>
                  </div>

                  <div className="text-right">
                    <span className="text-slate-400 block text-[10px]">Estimasi / Nilai PO:</span>
                    <strong className="text-emerald-400 font-black text-xs">
                      {formatIDR(req.finalPoAmount || req.totalEstimatedCost)}
                    </strong>
                  </div>
                </div>

                {/* Items Summary */}
                <div className="mt-3 p-2.5 bg-[#081026] rounded border border-[#1e293b] font-mono text-[10px] space-y-1">
                  <span className="text-slate-400 font-bold block uppercase text-[9px]">Daftar Item Barang ({req.items.length}):</span>
                  {req.items.map((it, i) => (
                    <div key={i} className="flex justify-between text-slate-300">
                      <span>• {it.itemName} ({it.qty} {it.unit})</span>
                      <span className="text-slate-400">{formatIDR(it.totalPrice)}</span>
                    </div>
                  ))}
                </div>

                {/* Selected Vendor Info */}
                {req.selectedVendorName && (
                  <div className="mt-3 p-2 bg-sky-950/40 border border-sky-500/30 rounded font-mono text-[10px] text-sky-200 flex items-center justify-between">
                    <div>
                      <span className="text-slate-400 block text-[9px]">Vendor Terpilih:</span>
                      <strong>🏆 {req.selectedVendorName}</strong>
                    </div>
                    <span className="text-emerald-400 font-bold">{formatIDR(req.finalPoAmount || 0)}</span>
                  </div>
                )}

                {/* BAST Details */}
                {req.bastDetails && (
                  <div className="mt-3 p-2 bg-emerald-950/40 border border-emerald-500/40 rounded font-mono text-[10px] text-emerald-200 space-y-1">
                    <div className="font-bold flex items-center gap-1">
                      <ClipboardCheck className="w-3.5 h-3.5 text-emerald-400" />
                      BERITA ACARA SERAH TERIMA GA: {req.bastDetails.bastNo}
                    </div>
                    <div>Status Fisik: <strong className="text-emerald-300">{req.bastDetails.conditionStatus}</strong></div>
                    <div className="text-[9px] text-slate-300">Pemeriksa: {req.bastDetails.inspectorName}</div>
                  </div>
                )}
              </div>

              {/* Card Actions */}
              <div className="pt-3 border-t border-[#1e293b] flex items-center justify-between gap-2 font-mono">
                <span className="text-[10px] text-slate-400">Target: {req.targetDate}</span>

                <div className="flex items-center gap-1">
                  {/* Approve PR */}
                  {req.status === "Menunggu Approval GA & CFO" && (
                    <button
                      onClick={() => handleApproveProcurement(req)}
                      className="px-3 py-1 bg-emerald-500 hover:bg-emerald-400 text-black font-bold text-[10px] uppercase rounded shadow flex items-center gap-1"
                    >
                      <CheckCircle2 className="w-3.5 h-3.5" />
                      Approve PR
                    </button>
                  )}

                  {/* Bidding Vendor Modal Trigger */}
                  {req.status === "Evaluasi Vendor (Bidding)" && (
                    <button
                      onClick={() => {
                        setSelectedPrForBidding(req);
                        setIsBiddingModalOpen(true);
                      }}
                      className="px-3 py-1 bg-amber-500 hover:bg-amber-400 text-black font-bold text-[10px] uppercase rounded shadow flex items-center gap-1"
                    >
                      <Award className="w-3.5 h-3.5" />
                      Evaluasi Bidding
                    </button>
                  )}

                  {/* Generate BAST GA */}
                  {req.status === "PO Issued" && (
                    <button
                      onClick={() => {
                        setBastProcurement(req);
                        setIsBastModalOpen(true);
                      }}
                      className="px-3 py-1 bg-sky-500 hover:bg-sky-400 text-black font-bold text-[10px] uppercase rounded shadow flex items-center gap-1"
                    >
                      <ClipboardCheck className="w-3.5 h-3.5" />
                      Terbitkan BAST GA
                    </button>
                  )}
                </div>
              </div>

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

      {/* ========================================================================= */}
      {/* MODAL 1: FORM PURCHASE REQUEST (PR GA)                                    */}
      {/* ========================================================================= */}
      {isCreatePrModalOpen && (
        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto animate-in fade-in">
          <div className="bg-[#0f172a] border-2 border-emerald-500/40 rounded-xl max-w-3xl w-full p-6 space-y-5 text-slate-100 shadow-2xl my-8">
            <div className="flex items-center justify-between border-b border-[#1e293b] pb-3">
              <h3 className="text-lg font-black uppercase text-white tracking-tight flex items-center gap-2">
                <ShoppingBag className="w-5 h-5 text-emerald-400" />
                Form Pengajuan Purchase Request (PR General Affairs)
              </h3>
              <button
                onClick={() => setIsCreatePrModalOpen(false)}
                className="text-slate-400 hover:text-white font-mono font-bold text-sm"
              >
                ✕
              </button>
            </div>

            <form onSubmit={handleCreatePr} className="space-y-4 font-mono text-xs">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                  <label className="text-[10px] uppercase font-bold text-slate-400 block mb-1">Judul Pengadaan (*):</label>
                  <input
                    type="text"
                    value={prTitle}
                    onChange={e => setPrTitle(e.target.value)}
                    placeholder="e.g. Pengadaan Ergonomic Working Desk Staff HQ"
                    className="w-full bg-[#081026] border border-[#1e293b] p-2 text-xs text-white rounded font-bold"
                    required
                  />
                </div>

                <div>
                  <label className="text-[10px] uppercase font-bold text-slate-400 block mb-1">Kategori Pengadaan:</label>
                  <select
                    value={category}
                    onChange={e => setCategory(e.target.value as ProcurementCategory)}
                    className="w-full bg-[#081026] border border-[#1e293b] p-2 text-xs text-emerald-300 font-bold rounded"
                  >
                    <option value="Perlengkapan Kantor">Perlengkapan Kantor</option>
                    <option value="Perangkat IT & Elektronik">Perangkat IT & Elektronik</option>
                    <option value="Pemeliharaan Gedung & Fasilitas">Pemeliharaan Gedung & Fasilitas</option>
                    <option value="Jasa Konsultan & Vendor">Jasa Konsultan & Vendor</option>
                    <option value="Kendaraan Operasional">Kendaraan Operasional</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="text-[10px] uppercase font-bold text-slate-400 block mb-1">Justifikasi & Alasan Kebutuhan:</label>
                <textarea
                  rows={2}
                  value={justification}
                  onChange={e => setJustification(e.target.value)}
                  placeholder="e.g. Untuk kenyamanan operasional dan penggantian fasilitas yang rusak"
                  className="w-full bg-[#081026] border border-[#1e293b] p-2 text-xs text-slate-200 rounded"
                />
              </div>

              {/* Items Dynamic Table */}
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <label className="text-[10px] uppercase font-bold text-slate-400 block">Daftar Rincian Barang / Spesifikasi:</label>
                  <button
                    type="button"
                    onClick={handleAddItem}
                    className="px-2.5 py-1 bg-emerald-600 hover:bg-emerald-500 text-black font-bold text-[10px] uppercase rounded flex items-center gap-1"
                  >
                    <Plus className="w-3 h-3" /> Tambah Baris Barang
                  </button>
                </div>

                <div className="space-y-2">
                  {items.map((it, idx) => (
                    <div key={idx} className="p-2.5 bg-[#081026] rounded border border-[#1e293b] grid grid-cols-12 gap-2 items-center">
                      <div className="col-span-4">
                        <input
                          type="text"
                          value={it.name}
                          onChange={e => {
                            const val = e.target.value;
                            setItems(prev => prev.map((item, i) => i === idx ? { ...item, name: val } : item));
                          }}
                          placeholder="Nama Barang"
                          className="w-full bg-[#0f172a] border border-[#1e293b] p-1.5 text-xs text-white rounded"
                        />
                      </div>
                      <div className="col-span-3">
                        <input
                          type="text"
                          value={it.spec}
                          onChange={e => {
                            const val = e.target.value;
                            setItems(prev => prev.map((item, i) => i === idx ? { ...item, spec: val } : item));
                          }}
                          placeholder="Spesifikasi"
                          className="w-full bg-[#0f172a] border border-[#1e293b] p-1.5 text-xs text-white rounded"
                        />
                      </div>
                      <div className="col-span-2">
                        <input
                          type="number"
                          value={it.qty}
                          onChange={e => {
                            const val = Number(e.target.value);
                            setItems(prev => prev.map((item, i) => i === idx ? { ...item, qty: val } : item));
                          }}
                          placeholder="Qty"
                          className="w-full bg-[#0f172a] border border-[#1e293b] p-1.5 text-xs text-white rounded text-center"
                        />
                      </div>
                      <div className="col-span-2">
                        <input
                          type="number"
                          value={it.price}
                          onChange={e => {
                            const val = Number(e.target.value);
                            setItems(prev => prev.map((item, i) => i === idx ? { ...item, price: val } : item));
                          }}
                          placeholder="Harga Satuan"
                          className="w-full bg-[#0f172a] border border-[#1e293b] p-1.5 text-xs text-white rounded"
                        />
                      </div>
                      <div className="col-span-1 text-center">
                        <button
                          type="button"
                          onClick={() => handleRemoveItem(idx)}
                          className="text-rose-400 hover:text-rose-300 font-bold text-sm"
                        >
                          ✕
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="flex items-center justify-end gap-3 pt-3 border-t border-[#1e293b]">
                <button
                  type="button"
                  onClick={() => setIsCreatePrModalOpen(false)}
                  className="px-4 py-2 bg-[#1e293b] text-slate-300 font-bold rounded"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="px-5 py-2 bg-emerald-500 hover:bg-emerald-400 text-black font-black uppercase rounded shadow-lg shadow-emerald-500/30"
                >
                  Ajukan PR GA
                </button>
              </div>
            </form>

          </div>
        </div>
      )}

      {/* ========================================================================= */}
      {/* MODAL 2: EVALUASI BIDDING VENDOR & PEMILIHAN PEMENANG                     */}
      {/* ========================================================================= */}
      {isBiddingModalOpen && selectedPrForBidding && (
        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto animate-in fade-in">
          <div className="bg-[#0f172a] border-2 border-amber-500/40 rounded-xl max-w-3xl w-full p-6 space-y-5 text-slate-100 shadow-2xl my-8">
            <div className="flex items-center justify-between border-b border-[#1e293b] pb-3">
              <h3 className="text-base font-black uppercase text-amber-300 tracking-wide flex items-center gap-2">
                <Award className="w-5 h-5 text-amber-400" />
                Matriks Evaluasi Bidding Vendor ({selectedPrForBidding.prNo})
              </h3>
              <button
                onClick={() => setIsBiddingModalOpen(false)}
                className="text-slate-400 hover:text-white font-mono font-bold text-sm"
              >
                ✕
              </button>
            </div>

            <form onSubmit={handleSaveBiddingWinner} className="space-y-4 font-mono text-xs">
              <div className="bg-[#081026] p-3 rounded border border-amber-500/20 text-xs">
                <div>Pengadaan: <strong className="text-white">{selectedPrForBidding.title}</strong></div>
                <div>Estimasi PR: <strong className="text-emerald-400">{formatIDR(selectedPrForBidding.totalEstimatedCost)}</strong></div>
              </div>

              {/* Vendor List Input */}
              <div className="space-y-3">
                <label className="text-[10px] uppercase font-bold text-slate-400 block">
                  Perbandingan Penawaran Harga & Pilih Vendor Pemenang:
                </label>

                {bids.map((b, idx) => (
                  <div
                    key={idx}
                    className={`p-3 rounded-lg border flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 ${
                      winnerVendorIndex === idx
                        ? "bg-amber-950/40 border-amber-400 text-amber-100"
                        : "bg-[#081026] border-[#1e293b] text-slate-300"
                    }`}
                  >
                    <div className="flex items-center gap-3 w-full sm:w-auto">
                      <input
                        type="radio"
                        name="winnerVendor"
                        checked={winnerVendorIndex === idx}
                        onChange={() => setWinnerVendorIndex(idx)}
                        className="w-4 h-4 text-amber-500 focus:ring-0"
                      />
                      <div>
                        <input
                          type="text"
                          value={b.vendorName}
                          onChange={e => {
                            const val = e.target.value;
                            setBids(prev => prev.map((item, i) => i === idx ? { ...item, vendorName: val } : item));
                          }}
                          placeholder="Nama Vendor"
                          className="bg-[#0f172a] border border-[#1e293b] p-1 text-xs text-white font-bold rounded"
                        />
                        <div className="text-[10px] text-slate-400 mt-1">Garansi: {b.warranty} • Pengiriman: {b.days} Hari</div>
                      </div>
                    </div>

                    <div className="flex items-center gap-3 w-full sm:w-auto justify-between sm:justify-end">
                      <div className="text-right">
                        <span className="text-[10px] text-slate-400 block">Harga Penawaran:</span>
                        <input
                          type="number"
                          value={b.amount}
                          onChange={e => {
                            const val = Number(e.target.value);
                            setBids(prev => prev.map((item, i) => i === idx ? { ...item, amount: val } : item));
                          }}
                          className="bg-[#0f172a] border border-[#1e293b] p-1 text-xs text-emerald-400 font-bold rounded w-32 text-right"
                        />
                      </div>

                      {winnerVendorIndex === idx && (
                        <span className="px-2 py-1 bg-amber-500 text-black font-black text-[10px] uppercase rounded">
                          🏆 Pemenang
                        </span>
                      )}
                    </div>
                  </div>
                ))}
              </div>

              <div className="flex items-center justify-end gap-3 pt-3 border-t border-[#1e293b]">
                <button
                  type="button"
                  onClick={() => setIsBiddingModalOpen(false)}
                  className="px-4 py-2 bg-[#1e293b] text-slate-300 font-bold rounded"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="px-5 py-2 bg-amber-500 hover:bg-amber-400 text-black font-black uppercase rounded shadow-lg shadow-amber-500/20"
                >
                  Terbitkan Purchase Order (PO)
                </button>
              </div>
            </form>

          </div>
        </div>
      )}

      {/* ========================================================================= */}
      {/* MODAL 3: PENERIMAAN BARANG & BAST GA                                      */}
      {/* ========================================================================= */}
      {isBastModalOpen && bastProcurement && (
        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto animate-in fade-in">
          <div className="bg-[#0f172a] border-2 border-sky-500/40 rounded-xl max-w-xl w-full p-6 space-y-5 text-slate-100 shadow-2xl">
            <div className="flex items-center justify-between border-b border-[#1e293b] pb-3">
              <h3 className="text-base font-black uppercase text-sky-300 tracking-wide flex items-center gap-2">
                <ClipboardCheck className="w-5 h-5 text-sky-400" />
                Penerimaan Barang & BAST GA ({bastProcurement.poNo})
              </h3>
              <button
                onClick={() => setIsBastModalOpen(false)}
                className="text-slate-400 hover:text-white font-mono font-bold text-sm"
              >
                ✕
              </button>
            </div>

            <form onSubmit={handleSaveBast} className="space-y-4 font-mono text-xs">
              <div>
                <label className="text-[10px] uppercase font-bold text-slate-400 block mb-1">Pemeriksa GA / Inspector:</label>
                <input
                  type="text"
                  value={inspectorName}
                  onChange={e => setInspectorName(e.target.value)}
                  className="w-full bg-[#081026] border border-[#1e293b] p-2 text-xs text-white rounded font-bold"
                  required
                />
              </div>

              <div>
                <label className="text-[10px] uppercase font-bold text-slate-400 block mb-1">Status Kondisi Fisik Barang:</label>
                <select
                  value={conditionStatus}
                  onChange={e => setConditionStatus(e.target.value as any)}
                  className="w-full bg-[#081026] border border-[#1e293b] p-2 text-xs text-emerald-300 font-bold rounded"
                >
                  <option value="Lengkap & Baik">Lengkap & Baik (Sesuai Specs)</option>
                  <option value="Ada Kerusakan/Sesuai Garansi">Ada Kerusakan Cacat / Garansi Klaim</option>
                  <option value="Tidak Sesuai Specs">Tidak Sesuai Spesifikasi (Ditolak)</option>
                </select>
              </div>

              <div>
                <label className="text-[10px] uppercase font-bold text-slate-400 block mb-1">Catatan BAST Pemeriksaan GA:</label>
                <textarea
                  rows={3}
                  value={bastNotes}
                  onChange={e => setBastNotes(e.target.value)}
                  className="w-full bg-[#081026] border border-[#1e293b] p-2.5 text-xs text-slate-200 rounded"
                />
              </div>

              <div className="flex items-center justify-end gap-3 pt-3 border-t border-[#1e293b]">
                <button
                  type="button"
                  onClick={() => setIsBastModalOpen(false)}
                  className="px-4 py-2 bg-[#1e293b] text-slate-300 font-bold rounded"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="px-5 py-2 bg-sky-500 hover:bg-sky-400 text-black font-black uppercase rounded shadow-lg shadow-sky-500/20"
                >
                  Terbitkan BAST & Selesaikan
                </button>
              </div>
            </form>

          </div>
        </div>
      )}

    </div>
  );
}