import { useRef } from "react";
import { FormDialog, val } from "@/components/sip/FormDialog";
import { Section, DataTable } from "@/components/sip/Section";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Plus, Pencil, Trash2, Download, Upload } from "lucide-react";
import { toast } from "sonner";
import { newId, useSip, type Jadwal } from "@/lib/sip-data";

const HARI = ["Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];

export function JadwalPiket() {
  const { jadwal, setJadwal, currentUser } = useSip();
  const isAdmin = currentUser?.role === "Admin";
  const fileRef = useRef<HTMLInputElement>(null);

  const downloadTemplate = async () => {
    const XLSX = await import("xlsx");
    const ws = XLSX.utils.json_to_sheet([
      {
        Hari: "Senin",
        Grup: "Tim Piket A",
        "Daftar Guru": "Budi Santoso, S.Pd & Siti Aminah, S.Pd",
        Jam: "06:30 - 14:00",
        Keterangan: "Piket Gerbang Utama",
      },
    ]);
    ws["!cols"] = [{ wch: 10 }, { wch: 18 }, { wch: 40 }, { wch: 16 }, { wch: 26 }];
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Jadwal Piket");
    XLSX.writeFile(wb, "template-jadwal-piket.xlsx");
    toast.success("Template Excel diunduh");
  };

  const handleUpload = async (file: File) => {
    try {
      const XLSX = await import("xlsx");
      const wb = XLSX.read(await file.arrayBuffer(), { type: "array" });
      const sheetName = wb.SheetNames[0];
      if (!sheetName) throw new Error("kosong");
      const rows = XLSX.utils.sheet_to_json<Record<string, unknown>>(wb.Sheets[sheetName]!);
      const parsed: Jadwal[] = [];
      for (const r of rows) {
        const get = (k: string) =>
          String(
            (r[k] ?? r[k.toUpperCase()] ?? r[k.toLowerCase()] ?? "") as string | number,
          ).trim();
        const hari = get("Hari");
        const grup = get("Grup") || get("Nama Grup");
        if (!hari || !grup) continue;
        parsed.push({
          id: newId("J"),
          hari,
          nama_grup: grup,
          daftar_guru: get("Daftar Guru"),
          jam_piket: get("Jam") || get("Jam Piket"),
          keterangan: get("Keterangan") || "-",
        });
      }
      if (parsed.length === 0) {
        toast.error("Tidak ada data valid", { description: "Gunakan template yang disediakan." });
        return;
      }
      setJadwal((prev) => [...prev, ...parsed]);
      toast.success(`${parsed.length} jadwal piket diimpor`);
    } catch {
      toast.error("Gagal membaca file", { description: "Pastikan file berformat .xlsx atau .xls" });
    }
  };

  const fields = (j?: Jadwal) => [
    { name: "hari", label: "Hari", type: "select" as const, options: HARI, defaultValue: j?.hari },
    { name: "nama_grup", label: "Nama Grup Piket", defaultValue: j?.nama_grup },
    { name: "daftar_guru", label: "Daftar Guru", type: "textarea" as const, defaultValue: j?.daftar_guru },
    { name: "jam_piket", label: "Jam Piket", placeholder: "06:30 - 14:00", defaultValue: j?.jam_piket },
    { name: "keterangan", label: "Keterangan", optional: true, defaultValue: j?.keterangan },
  ];

  const toJadwal = (v: Record<string, string>, id: string): Jadwal => ({
    id,
    hari: val(v, "hari"),
    nama_grup: val(v, "nama_grup"),
    daftar_guru: val(v, "daftar_guru"),
    jam_piket: val(v, "jam_piket"),
    keterangan: val(v, "keterangan") || "-",
  });

  return (
    <Section
      title={isAdmin ? "Kelola Jadwal Piket" : "Jadwal Petugas Piket"}
      action={
        isAdmin ? (
          <div className="flex w-full flex-wrap items-center gap-2 md:w-auto">
          <input
            ref={fileRef}
            type="file"
            accept=".xlsx,.xls"
            className="hidden"
            onChange={(e) => {
              const f = e.target.files?.[0];
              if (f) void handleUpload(f);
              e.target.value = "";
            }}
          />
          <Button size="sm" variant="outline" onClick={() => void downloadTemplate()}>
            <Download className="mr-1 h-4 w-4" /> Template
          </Button>
          <Button size="sm" variant="outline" onClick={() => fileRef.current?.click()}>
            <Upload className="mr-1 h-4 w-4" /> Unggah Excel
          </Button>
          <FormDialog
            title="Tambah Jadwal Piket"
            fields={fields()}
            onSubmit={(v) => {
              setJadwal((prev) => [...prev, toJadwal(v, newId("J"))]);
              toast.success("Jadwal piket ditambahkan");
            }}
            trigger={
              <Button size="sm">
                <Plus className="mr-1 h-4 w-4" /> Tambah Jadwal
              </Button>
            }
          />
          </div>
        ) : null
      }
    >
      <DataTable
        head={isAdmin ? ["Hari", "Grup", "Daftar Guru", "Jam", "Keterangan", "Aksi"] : ["Hari", "Grup", "Daftar Guru", "Jam", "Keterangan"]}
        alignLast={isAdmin}
        empty="Belum ada jadwal piket."
        rows={jadwal.map((j) => {
          const base = [
            <Badge>{j.hari}</Badge>,
            <span className="font-medium">{j.nama_grup}</span>,
            j.daftar_guru,
            j.jam_piket,
            <span className="text-muted-foreground">{j.keterangan}</span>,
          ];
          if (!isAdmin) return base;
          return [
            ...base,
            <div className="flex justify-center gap-1">
              <FormDialog
                title="Edit Jadwal Piket"
                fields={fields(j)}
                submitLabel="Update"
                onSubmit={(v) => {
                  setJadwal((prev) => prev.map((x) => (x.id === j.id ? toJadwal(v, j.id) : x)));
                  toast.success("Jadwal piket diperbarui");
                }}
                trigger={
                  <Button size="icon" variant="ghost">
                    <Pencil className="h-4 w-4" />
                  </Button>
                }
              />
              <Button
                size="icon"
                variant="ghost"
                onClick={() => {
                  setJadwal((prev) => prev.filter((x) => x.id !== j.id));
                  toast.success("Jadwal dihapus");
                }}
              >
                <Trash2 className="text-destructive h-4 w-4" />
              </Button>
            </div>,
          ];
        })}
      />
    </Section>
  );
}