import { useState } from "react";
import { FormDialog, val } from "@/components/sip/FormDialog";
import { Section, DataTable } from "@/components/sip/Section";
import { SearchToggleBar, SummaryCards, type ViewMode } from "@/components/sip/FilterBar";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Plus, Check, LogIn } from "lucide-react";
import { toast } from "sonner";
import { newId, nowTime, todayISO, useSip, waliKelasOf, type StatusIzin } from "@/lib/sip-data";

const statusVariant = (s: StatusIzin) =>
  s === "Menunggu" ? "outline" : s === "Diizinkan Keluar" ? "default" : "secondary";

export function IzinKeluar({ context }: { context: string }) {
  const { izin, setIzin, kelasList, siswa, currentUser } = useSip();
  const isPiket = currentUser?.role === "Petugas Piket";
  const isSatpam = currentUser?.role === "Satpam";
  const isWali = context === "rekap_kelas_izin";
  const myClass = waliKelasOf(currentUser) || "-";
  const [query, setQuery] = useState("");
  const [view, setView] = useState<ViewMode>("rinci");

  const scoped = isWali ? izin.filter((i) => i.kelas === myClass) : izin;
  const q = query.trim().toLowerCase();
  const data = scoped.filter(
    (i) =>
      !q ||
      i.nama.toLowerCase().includes(q) ||
      i.kelas.toLowerCase().includes(q) ||
      i.alasan.toLowerCase().includes(q) ||
      i.status.toLowerCase().includes(q) ||
      i.tanggal.includes(q),
  );
  const perStatus = (["Menunggu", "Diizinkan Keluar", "Sudah Kembali"] as StatusIzin[]).map((s) => ({
    label: s,
    value: data.filter((i) => i.status === s).length,
  }));
  const perKelas = Array.from(
    data.reduce((m, i) => m.set(i.kelas, (m.get(i.kelas) ?? 0) + 1), new Map<string, number>()),
  ).map(([k, v]) => ({ label: `Kelas ${k}`, value: v }));


  const setStatus = (id: string, status: StatusIzin) => {
    setIzin((prev) =>
      prev.map((i) =>
        i.id === id
          ? {
              ...i,
              status,
              waktu_keluar: status === "Diizinkan Keluar" ? nowTime() : i.waktu_keluar,
              waktu_kembali: status === "Sudah Kembali" ? nowTime() : i.waktu_kembali,
            }
          : i,
      ),
    );
    toast.success(
      status === "Diizinkan Keluar" ? "Siswa diizinkan keluar oleh Satpam" : "Siswa tercatat sudah kembali",
    );
  };

  const head = ["Tanggal", "Nama Siswa", "Kelas", "Alasan", "Keluar", "Kembali", "Status"];
  if (isSatpam) head.push("Aksi");

  return (
    <Section
      title={isWali ? `Izin Keluar Siswa Kelas ${myClass}` : "Data Izin Keluar Sekolah"}
      action={
        isPiket ? (
          <FormDialog
            title="Buat Surat Izin Keluar"
            fields={[
              { name: "kelas", label: "Kelas", type: "select", options: kelasList },
              {
                name: "nama",
                label: "Nama Siswa",
                type: "select",
                options: (values) =>
                  siswa
                    .filter((s) => s.kelas === values["kelas"])
                    .map((s) => s.nama),
              },
              { name: "alasan", label: "Alasan Izin", type: "textarea" },
            ]}
            submitLabel="Terbitkan Izin"
            onSubmit={(v) => {
              setIzin((prev) => [
                ...prev,
                {
                  id: newId("I"),
                  tanggal: todayISO(),
                  waktu_keluar: "-",
                  waktu_kembali: "-",
                  nama: val(v, "nama"),
                  kelas: val(v, "kelas"),
                  alasan: val(v, "alasan"),
                  status: "Menunggu",
                },
              ]);
              toast.success("Surat izin dibuat", { description: "Menunggu verifikasi Satpam." });
            }}
            trigger={
              <Button size="sm">
                <Plus className="mr-1 h-4 w-4" /> Buat Surat Izin
              </Button>
            }
          />
        ) : null
      }
    >
      <SearchToggleBar
        query={query}
        onQueryChange={setQuery}
        view={view}
        onViewChange={setView}
        placeholder="Cari nama / kelas / alasan / status..."
      />
      {view === "ringkas" ? (
        <SummaryCards
          total={data.length}
          totalLabel="Total Izin Keluar"
          items={[...perStatus, ...perKelas]}
        />
      ) : (
      <DataTable
        head={head}
        alignLast={isSatpam}
        empty="Tidak ada data izin keluar."
        rows={data.map((i) => {
          const base = [
            <span className="text-muted-foreground whitespace-nowrap">{i.tanggal}</span>,
            <span className="font-semibold">{i.nama}</span>,
            <Badge variant="secondary">{i.kelas}</Badge>,
            i.alasan,
            i.waktu_keluar,
            i.waktu_kembali,
            <Badge variant={statusVariant(i.status)}>{i.status}</Badge>,
          ];
          if (!isSatpam) return base;
          return [
            ...base,
            <div className="flex justify-center gap-2">
              {i.status === "Menunggu" ? (
                <Button size="sm" onClick={() => setStatus(i.id, "Diizinkan Keluar")}>
                  <Check className="mr-1 h-4 w-4" /> Izinkan
                </Button>
              ) : null}
              {i.status === "Diizinkan Keluar" ? (
                <Button size="sm" variant="secondary" onClick={() => setStatus(i.id, "Sudah Kembali")}>
                  <LogIn className="mr-1 h-4 w-4" /> Sudah Kembali
                </Button>
              ) : null}
              {i.status === "Sudah Kembali" ? (
                <span className="text-muted-foreground text-xs">Selesai</span>
              ) : null}
            </div>,
          ];
        })}
      />
      )}
    </Section>
  );
}