import { useState, useEffect } from "react";
import { api } from "@/services/api";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Building2, Users, ShoppingCart, FileText, DollarSign, Truck, UtensilsCrossed, ClipboardList } from "lucide-react";
import TabInfoSPPG from "../../components/sppg/TabInfoSPPG";
import TabKaryawan from "../../components/sppg/TabKaryawan";
import TabBahanMakanan from "../../components/sppg/TabBahanMakanan";
import TabLaporan from "../../components/sppg/TabLaporan";
import TabRekapDana from "../../components/sppg/TabRekapDana";
import TabOmprengan from "../../components/sppg/TabOmprengan";
import TabGizi from "../../components/sppg/TabGizi";
import TabOperasional from "../../components/sppg/TabOperasional";

export default function ManajemenSPPG() {
  const [sppgList, setSppgList] = useState([]);
  const [selectedSppg, setSelectedSppg] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api.list("SPPG").then((data) => {
      setSppgList(data);
      if (data.length > 0) setSelectedSppg(data[0]);
      setLoading(false);
    });
  }, []);

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
      </div>
    );
  }

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-black text-foreground">Manajemen SPPG</h1>
          <p className="text-sm text-muted-foreground mt-1">Kelola semua data operasional SPPG secara lengkap.</p>
        </div>
        <select
          className="border border-input rounded-lg px-3 py-2 text-sm bg-background w-full sm:w-72"
          value={selectedSppg?.id || ""}
          onChange={(e) => {
            const s = sppgList.find((x) => x.id === e.target.value);
            setSelectedSppg(s || null);
          }}
        >
          {sppgList.map((s) => (
            <option key={s.id} value={s.id}>{s.nama}</option>
          ))}
        </select>
      </div>

      {!selectedSppg ? (
        <div className="text-center py-20 text-muted-foreground">Belum ada data SPPG.</div>
      ) : (
        <Tabs defaultValue="info" className="w-full">
          <div className="overflow-x-auto">
            <TabsList className="flex w-max min-w-full gap-1 h-auto flex-wrap mb-2">
              <TabsTrigger value="info" className="flex items-center gap-1.5 text-xs px-3 py-2"><Building2 className="w-3.5 h-3.5" />Info SPPG</TabsTrigger>
              <TabsTrigger value="karyawan" className="flex items-center gap-1.5 text-xs px-3 py-2"><Users className="w-3.5 h-3.5" />Karyawan</TabsTrigger>
              <TabsTrigger value="bahan" className="flex items-center gap-1.5 text-xs px-3 py-2"><ShoppingCart className="w-3.5 h-3.5" />Bahan Makanan</TabsTrigger>
              <TabsTrigger value="gizi" className="flex items-center gap-1.5 text-xs px-3 py-2"><UtensilsCrossed className="w-3.5 h-3.5" />Rekap Gizi</TabsTrigger>
              <TabsTrigger value="omprengan" className="flex items-center gap-1.5 text-xs px-3 py-2"><Truck className="w-3.5 h-3.5" />Data Omprengan</TabsTrigger>
              <TabsTrigger value="dana" className="flex items-center gap-1.5 text-xs px-3 py-2"><DollarSign className="w-3.5 h-3.5" />Rekap Dana</TabsTrigger>
              <TabsTrigger value="laporan" className="flex items-center gap-1.5 text-xs px-3 py-2"><FileText className="w-3.5 h-3.5" />Laporan</TabsTrigger>
              <TabsTrigger value="operasional" className="flex items-center gap-1.5 text-xs px-3 py-2"><ClipboardList className="w-3.5 h-3.5" />Operasional</TabsTrigger>
            </TabsList>
          </div>

          <TabsContent value="info"><TabInfoSPPG sppg={selectedSppg} onUpdate={(updated) => setSelectedSppg(updated)} /></TabsContent>
          <TabsContent value="karyawan"><TabKaryawan sppgId={selectedSppg.id} /></TabsContent>
          <TabsContent value="bahan"><TabBahanMakanan sppgId={selectedSppg.id} /></TabsContent>
          <TabsContent value="gizi"><TabGizi sppgId={selectedSppg.id} /></TabsContent>
          <TabsContent value="omprengan"><TabOmprengan sppgId={selectedSppg.id} /></TabsContent>
          <TabsContent value="dana"><TabRekapDana sppgId={selectedSppg.id} /></TabsContent>
          <TabsContent value="laporan"><TabLaporan sppgId={selectedSppg.id} /></TabsContent>
          <TabsContent value="operasional"><TabOperasional sppgId={selectedSppg.id} /></TabsContent>
        </Tabs>
      )}
    </div>
  );
}