import { useState } from "react";
import { FormDialog, val } from "@/components/sip/FormDialog";
import { SearchToggleBar, SummaryCards, type ViewMode } from "@/components/sip/FilterBar";
import { Section, DataTable } from "@/components/sip/Section";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Plus, Check, X, Trash2, ExternalLink } from "lucide-react";
import { toast } from "sonner";
import {
  JENIS_IZIN_GURU,
  newId,
  todayISO,
  useSip,
  type IzinGuru,
  type StatusIzinGuru,
} from "@/lib/sip-data";
import { parseDriveFolderId } from "@/lib/drive";
import { uploadToDrive } from "@/lib/drive.functions";
import { useServerFn } from "@tanstack/react-start";

const statusVariant = (s: StatusIzinGuru) =>
  s === "Disetujui" ? "default" : s === "Ditolak" ? "destructive" : "secondary";

export function KehadiranGuru({ context }: { context: string }) {
  const { currentUser, izinGuru, setIzinGuru, driveIzinGuruUrl } = useSip();
  const upload = useServerFn(uploadToDrive);

  const isGuru = context === "izin_guru_saya";
  const isPiket = context === "piket_guru_absen";

  const [query, setQuery] = useState("");
  const [view, setView] = useState<ViewMode>("rinci");

  const mine = izinGuru.filter((i) => i.guru === currentUser?.nama);
  const q = query.trim().toLowerCase();
  const cocok = (i: IzinGuru) =>
    !q ||
    i.guru.toLowerCase().includes(q) ||
    i.mapel.toLowerCase().includes(q) ||
    i.jenis.toLowerCase().includes(q) ||
    i.status.toLowerCase().includes(q) ||
    i.tanggal.includes(q);
  const list = (isGuru ? mine : izinGuru).filter(cocok);
  const ringkas = (rows: IzinGuru[]) => [
    ...JENIS_IZIN_GURU.map((j) => ({ label: j, value: rows.filter((r) => r.jenis === j).length })),
    { label: "Menunggu", value: rows.filter((r) => r.status === "Menunggu").length },
    { label: "Disetujui", value: rows.filter((r) => r.status === "Disetujui").length },
    { label: "Ditolak", value: rows.filter((r) => r.status === "Ditolak").length },
  ];

  const ajukan = async (v: Record<string, string>) => {
    const id = newId("IG");
    const item: IzinGuru = {
      id,
      tanggal: val(v, "tanggal") || todayISO(),
      guru: currentUser?.nama ?? "-",
      mapel: currentUser?.keterangan ?? "-",
      jenis: (val(v, "jenis") as IzinGuru["jenis"]) || "Izin",
      alasan: val(v, "alasan"),
      status: "Menunggu",
      catatan: "-",
      lampiran: v["lampiran"] ?? "",
    };
    setIzinGuru((prev) => [item, ...prev]);
    toast.success("Permintaan izin dikirim ke Kepala Sekolah");
    if (item.lampiran && driveIzinGuruUrl) {
      const folderId = parseDriveFolderId(driveIzinGuruUrl);
      if (!folderId) {
        window.open(driveIzinGuruUrl, "_blank", "noopener");
        return;
      }
      try {
        const fileName = `IzinGuru_${item.guru.replace(/\s+/g, "_")}_${Date.now()}.jpg`;
        const res = await upload({
          data: { folderId, name: fileName, dataUrl: item.lampiran },
        });
        setIzinGuru((prev) =>
          prev.map((i) => (i.id === id ? { ...i, driveUrl: res.webViewLink } : i))
        );
        toast.success("Lampiran izin berhasil diunggah ke Google Drive");
      } catch (err) {
        toast.error("Lampiran tersimpan lokal, tetapi gagal diunggah ke Drive", {
          description: String(err),
        });
        window.open(driveIzinGuruUrl, "_blank", "noopener");
      }
    }
  };

  const setStatus = (id: string, status: StatusIzinGuru) => {
    setIzinGuru((prev) => prev.map((i) => (i.id === id ? { ...i, status } : i)));
    toast.success(`Pengajuan ${status.toLowerCase()}`);
  };

  if (isPiket) {
    const hariIni = izinGuru
      .filter((i) => i.tanggal === todayISO() || i.status !== "Ditolak")
      .filter(cocok);
    return (
      <div className="space-y-6">
        <Section title="Guru Tidak Hadir">
          <SearchToggleBar
            query={query}
            onQueryChange={setQuery}
            view={view}
            onViewChange={setView}
            placeholder="Cari nama guru / tanggal / jenis..."
          />
          {view === "ringkas" ? (
            <SummaryCards
              total={hariIni.length}
              totalLabel="Total Guru Tidak Hadir"
              items={ringkas(hariIni)}
            />
          ) : (
            <DataTable
              head={["Tanggal", "Nama Guru", "Keterangan"]}
              empty="Semua guru hadir hari ini."
              rows={hariIni.map((i) => [
                i.tanggal,
                <span className="font-medium">{i.guru}</span>,
                <Badge variant={statusVariant(i.status)}>Tidak hadir · {i.jenis}</Badge>,
              ])}
            />
          )}
          <p className="text-muted-foreground mt-3 text-xs">
            Petugas piket hanya melihat nama guru yang tidak hadir, tanpa detail alasan.
          </p>
        </Section>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <Section
        title={isGuru ? "Pengajuan Izin Saya" : "Permintaan Izin / Sakit Guru"}
        action={
          isGuru ? (
            <div className="flex flex-wrap items-center gap-2">
              {driveIzinGuruUrl ? (
                <Button size="sm" variant="outline" asChild>
                  <a href={driveIzinGuruUrl} target="_blank" rel="noreferrer">
                    <ExternalLink className="mr-1 h-4 w-4" /> Folder Drive Lampiran
                  </a>
                </Button>
              ) : null}
              <FormDialog
                title="Ajukan Izin Tidak Mengajar"
                description={
                  driveIzinGuruUrl
                    ? "Permintaan diteruskan ke Kepala Sekolah. Lampiran foto tersimpan pada arsip dan folder Drive yang diatur admin."
                    : "Permintaan diteruskan ke Kepala Sekolah. Admin belum mengatur link folder Drive untuk arsip lampiran."
                }
                fields={[
                  { name: "tanggal", label: "Tanggal", type: "date", defaultValue: todayISO() },
                  { name: "jenis", label: "Jenis", type: "select", options: [...JENIS_IZIN_GURU] },
                  {
                    name: "alasan",
                    label: "Alasan Tidak Masuk Mengajar",
                    type: "textarea",
                    placeholder: "Tuliskan alasan secara singkat dan jelas",
                  },
                  { name: "lampiran", label: "Lampiran Foto", type: "photo", optional: true },
                ]}
                submitLabel="Kirim Permintaan"
                onSubmit={ajukan}
                trigger={
                  <Button size="sm">
                    <Plus className="mr-1 h-4 w-4" /> Ajukan Izin
                  </Button>
                }
              />
            </div>
          ) : undefined
        }
      >
        <SearchToggleBar
          query={query}
          onQueryChange={setQuery}
          view={view}
          onViewChange={setView}
          placeholder="Cari nama guru / mapel / jenis / status..."
        />
        {view === "ringkas" ? (
          <SummaryCards total={list.length} totalLabel="Total Pengajuan" items={ringkas(list)} />
        ) : (
        <DataTable
          head={["Tanggal", "Nama Guru", "Mapel", "Jenis", "Alasan", "Lampiran", "Status", "Aksi"]}
          alignLast
          empty="Belum ada pengajuan izin."
          rows={list.map((i) => [
            i.tanggal,
            <span className="font-medium">{i.guru}</span>,
            i.mapel,
            <Badge variant="outline">{i.jenis}</Badge>,
            <span className="text-xs">{i.alasan}</span>,
            i.lampiran ? (
              <img
                src={i.lampiran}
                alt={`Lampiran izin ${i.guru}`}
                className="border-border h-12 w-12 rounded-md border object-cover"
              />
            ) : (
              <span className="text-muted-foreground">-</span>
            ),
            <Badge variant={statusVariant(i.status)}>{i.status}</Badge>,
            <div className="flex justify-center gap-1">
              {isGuru ? (
                <Button
                  size="icon"
                  variant="ghost"
                  onClick={() => {
                    setIzinGuru((prev) => prev.filter((x) => x.id !== i.id));
                    toast.success("Pengajuan dibatalkan");
                  }}
                >
                  <Trash2 className="text-destructive h-4 w-4" />
                </Button>
              ) : (
                <>
                  <Button
                    size="icon"
                    variant="ghost"
                    disabled={i.status === "Disetujui"}
                    onClick={() => setStatus(i.id, "Disetujui")}
                  >
                    <Check className="text-success h-4 w-4" />
                  </Button>
                  <Button
                    size="icon"
                    variant="ghost"
                    disabled={i.status === "Ditolak"}
                    onClick={() => setStatus(i.id, "Ditolak")}
                  >
                    <X className="text-destructive h-4 w-4" />
                  </Button>
                </>
              )}
            </div>,
          ])}
        />
        )}
      </Section>
    </div>
  );
}