import { Section, DataTable } from "@/components/sip/Section";
import { FormDialog, val, type Field } from "@/components/sip/FormDialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Plus, Trash2, RotateCcw } from "lucide-react";
import { toast } from "sonner";
import {
  JENJANG_OPTIONS,
  newId,
  todayISO,
  useSip,
  type Jenjang,
  type Tautan,
} from "@/lib/sip-data";

export function KelolaInformasi() {
  const {
    kelasList,
    pengumuman,
    setPengumuman,
    pengumumanHistori,
    setPengumumanHistori,
    tautan,
    setTautan,
    driveTamuUrl,
    setDriveTamuUrl,
    driveIzinGuruUrl,
    setDriveIzinGuruUrl,
    driveSuratBkUrl,
    setDriveSuratBkUrl,
    driveSaranUrl,
    drivePrestasiUrl,
    setDrivePrestasiUrl,
    setDriveSaranUrl,
  } = useSip();

  const pengumumanFields: Field[] = [
    { name: "tanggal", label: "Tanggal", type: "date", defaultValue: todayISO() },
    {
      name: "jenjang",
      label: "Tujuan Jenjang Kelas",
      type: "select",
      options: JENJANG_OPTIONS as unknown as string[],
      defaultValue: "Semua",
    },
    { name: "judul", label: "Judul Pengumuman" },
    { name: "isi", label: "Isi Pengumuman", type: "textarea" },
    {
      name: "lampiran",
      label: "Link URL File Lampiran",
      optional: true,
      placeholder: "https://drive.google.com/...",
    },
  ];

  const tautanFields = (jenis: Tautan["jenis"]): Field[] => [
    { name: "judul", label: "Judul Dokumen", placeholder: `${jenis} Tahun Ajaran 2026/2027` },
    { name: "kelas", label: "Kelas", type: "select", options: kelasList, optional: true },
    {
      name: "url",
      label: "Tautan File (Google Drive / PDF)",
      placeholder: "https://drive.google.com/...",
    },
    {
      name: "gambar",
      label: "URL Gambar Sampul",
      optional: true,
      placeholder: "https://.../sampul.jpg",
    },
  ];

  const addTautan = (jenis: Tautan["jenis"]) => (v: Record<string, string>) => {
    setTautan((prev) => [
      ...prev,
      {
        id: newId("TA"),
        jenis,
        judul: val(v, "judul"),
        kelas: val(v, "kelas"),
        url: val(v, "url"),
        gambar: val(v, "gambar"),
      },
    ]);
    toast.success(`Tautan ${jenis} ditambahkan`);
  };

  const tautanTable = (jenis: Tautan["jenis"]) => (
    <DataTable
      head={["Sampul", "Judul", "Kelas", "Tautan", "Aksi"]}
      alignLast
      rows={tautan
        .filter((t) => t.jenis === jenis)
        .map((t) => [
          t.gambar ? (
            <img
              key={`${t.id}-img`}
              src={t.gambar}
              alt={t.judul}
              className="h-12 w-16 rounded object-cover"
            />
          ) : (
            <span key={`${t.id}-img`} className="text-muted-foreground text-xs">
              Tanpa gambar
            </span>
          ),
          t.judul,
          t.kelas || "Semua kelas",
          <a
            key={`${t.id}-url`}
            href={t.url}
            target="_blank"
            rel="noopener noreferrer"
            className="text-primary break-all underline"
          >
            {t.url}
          </a>,
          <div className="text-center" key={t.id}>
            <Button
              size="icon"
              variant="destructive"
              onClick={() => {
                setTautan((prev) => prev.filter((x) => x.id !== t.id));
                toast.success("Tautan dihapus");
              }}
            >
              <Trash2 className="h-4 w-4" />
            </Button>
          </div>,
        ])}
      empty={`Belum ada tautan ${jenis}.`}
    />
  );

  return (
    <div className="space-y-6">
      <Section
        title="Pengumuman Resmi Sekolah"
        action={
          <FormDialog
            title="Tambah Pengumuman"
            fields={pengumumanFields}
            trigger={
              <Button size="sm">
                <Plus className="mr-2 h-4 w-4" /> Tambah
              </Button>
            }
            onSubmit={(v) => {
              setPengumuman((prev) => [
                {
                  id: newId("PG"),
                  tanggal: val(v, "tanggal"),
                  judul: val(v, "judul"),
                  isi: val(v, "isi"),
                  lampiran: val(v, "lampiran"),
                  jenjang: (val(v, "jenjang") || "Semua") as Jenjang,
                },
                ...prev,
              ]);
              toast.success("Pengumuman terkirim ke orang tua sesuai jenjang kelas");
            }}
          />
        }
      >
        <DataTable
          head={["Tanggal", "Jenjang", "Judul", "Isi", "Lampiran", "Aksi"]}
          alignLast
          rows={pengumuman.map((p) => [
            p.tanggal,
            <span key={`${p.id}-jenjang`} className="text-primary text-xs font-bold">
              {p.jenjang && p.jenjang !== "Semua" ? `Kelas ${p.jenjang}` : "Semua Jenjang"}
            </span>,
            p.judul,
            p.isi,
            p.lampiran ? (
              <a
                key={`${p.id}-lampiran`}
                href={p.lampiran}
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary break-all underline"
              >
                {p.lampiran}
              </a>
            ) : (
              <span key={`${p.id}-lampiran`} className="text-muted-foreground text-xs">
                Tidak ada
              </span>
            ),
            <div className="text-center" key={p.id}>
              <Button
                size="icon"
                variant="destructive"
                onClick={() => {
                  setPengumuman((prev) => prev.filter((x) => x.id !== p.id));
                  setPengumumanHistori((prev) => [
                    { ...p, dihapusPada: new Date().toISOString().slice(0, 16).replace("T", " ") },
                    ...prev,
                  ]);
                  toast.success("Pengumuman dipindahkan ke histori");
                }}
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>,
          ])}
          empty="Belum ada pengumuman."
        />
      </Section>

      <Section title="Histori Pengumuman Dihapus">
        <DataTable
          head={["Dihapus Pada", "Tanggal", "Jenjang", "Judul", "Isi", "Aksi"]}
          alignLast
          rows={pengumumanHistori.map((h) => [
            <span key={`${h.id}-del`} className="text-muted-foreground text-xs">
              {h.dihapusPada ?? "-"}
            </span>,
            h.tanggal,
            h.jenjang && h.jenjang !== "Semua" ? `Kelas ${h.jenjang}` : "Semua Jenjang",
            h.judul,
            h.isi,
            <div className="flex justify-center gap-1" key={h.id}>
              <Button
                size="icon"
                variant="outline"
                title="Pulihkan"
                onClick={() => {
                  const { dihapusPada: _d, ...rest } = h;
                  setPengumuman((prev) => [rest, ...prev]);
                  setPengumumanHistori((prev) => prev.filter((x) => x.id !== h.id));
                  toast.success("Pengumuman dipulihkan");
                }}
              >
                <RotateCcw className="h-4 w-4" />
              </Button>
              <Button
                size="icon"
                variant="destructive"
                title="Hapus permanen"
                onClick={() => {
                  setPengumumanHistori((prev) => prev.filter((x) => x.id !== h.id));
                  toast.success("Histori dihapus permanen");
                }}
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>,
          ])}
          empty="Belum ada histori pengumuman yang dihapus."
        />
      </Section>

      <Section title="Pengaturan Folder Drive Foto Buku Tamu">
        <div className="grid gap-3 sm:grid-cols-[1fr_auto] sm:items-end">
          <div className="grid gap-2">
            <label htmlFor="drive-tamu" className="text-sm font-medium">
              Link atau ID Folder Google Drive
            </label>
            <Input
              id="drive-tamu"
              value={driveTamuUrl}
              placeholder="https://drive.google.com/drive/folders/... atau 1AbC..."
              onChange={(e) => setDriveTamuUrl(e.target.value)}
            />
            <p className="text-muted-foreground text-xs">
              Bisa diisi link folder Google Drive maupun ID folder-nya. Foto tamu akan otomatis
              tersimpan di folder ini.
            </p>
          </div>
          <Button
            onClick={() => toast.success("Link folder Drive disimpan")}
            disabled={!driveTamuUrl.trim()}
          >
            Simpan Link
          </Button>
        </div>
      </Section>

      <Section title="Pengaturan Folder Drive Lampiran Izin Guru Mapel">
        <div className="grid gap-3 sm:grid-cols-[1fr_auto] sm:items-end">
          <div className="grid gap-2">
            <label htmlFor="drive-izin-guru" className="text-sm font-medium">
              Link atau ID Folder Google Drive
            </label>
            <Input
              id="drive-izin-guru"
              value={driveIzinGuruUrl}
              placeholder="https://drive.google.com/drive/folders/... atau 1AbC..."
              onChange={(e) => setDriveIzinGuruUrl(e.target.value)}
            />
            <p className="text-muted-foreground text-xs">
              Bisa diisi link folder Google Drive maupun ID folder-nya. Lampiran foto izin guru
              akan otomatis tersimpan di folder ini.
            </p>
          </div>
          <Button
            onClick={() => toast.success("Link folder Drive izin guru disimpan")}
            disabled={!driveIzinGuruUrl.trim()}
          >
            Simpan Link
          </Button>
        </div>
      </Section>

      <Section title="Pengaturan Folder Drive Lampiran Surat Guru BK">
        <div className="grid gap-3 sm:grid-cols-[1fr_auto] sm:items-end">
          <div className="grid gap-2">
            <label htmlFor="drive-surat-bk" className="text-sm font-medium">
              Link atau ID Folder Google Drive
            </label>
            <Input
              id="drive-surat-bk"
              value={driveSuratBkUrl}
              placeholder="https://drive.google.com/drive/folders/... atau 1AbC..."
              onChange={(e) => setDriveSuratBkUrl(e.target.value)}
            />
            <p className="text-muted-foreground text-xs">
              Lampiran foto atau PDF surat pemanggilan dari Guru BK akan otomatis tersimpan di
              folder ini.
            </p>
          </div>
          <Button
            onClick={() => toast.success("Link folder Drive surat BK disimpan")}
            disabled={!driveSuratBkUrl.trim()}
          >
            Simpan Link
          </Button>
        </div>
      </Section>

      <Section title="Pengaturan Folder Drive Lampiran Saran / Laporan Orang Tua">
        <div className="grid gap-3 sm:grid-cols-[1fr_auto] sm:items-end">
          <div className="grid gap-2">
            <label htmlFor="drive-saran" className="text-sm font-medium">
              Link atau ID Folder Google Drive
            </label>
            <Input
              id="drive-saran"
              value={driveSaranUrl}
              placeholder="https://drive.google.com/drive/folders/... atau 1AbC..."
              onChange={(e) => setDriveSaranUrl(e.target.value)}
            />
            <p className="text-muted-foreground text-xs">
              Lampiran foto atau dokumen dari kotak saran orang tua akan otomatis tersimpan di
              folder ini.
            </p>
          </div>
          <Button
            onClick={() => toast.success("Link folder Drive saran orang tua disimpan")}
            disabled={!driveSaranUrl.trim()}
          >
            Simpan Link
          </Button>
        </div>
      </Section>

      <Section title="Pengaturan Folder Drive Bukti Prestasi Siswa">
        <div className="grid gap-3 sm:grid-cols-[1fr_auto] sm:items-end">
          <div className="grid gap-2">
            <label htmlFor="drive-prestasi" className="text-sm font-medium">
              Link atau ID Folder Google Drive
            </label>
            <Input
              id="drive-prestasi"
              value={drivePrestasiUrl}
              placeholder="https://drive.google.com/drive/folders/... atau 1AbC..."
              onChange={(e) => setDrivePrestasiUrl(e.target.value)}
            />
            <p className="text-muted-foreground text-xs">
              Sertifikat, piagam, surat keterangan, dan foto penyerahan penghargaan dari Waka
              Kesiswaan akan otomatis tersimpan di folder ini.
            </p>
          </div>
          <Button
            onClick={() => toast.success("Link folder Drive prestasi disimpan")}
            disabled={!drivePrestasiUrl.trim()}
          >
            Simpan Link
          </Button>
        </div>
      </Section>

      <Section
        title="Tautan Tata Tertib Sekolah"
        action={
          <FormDialog
            title="Tambah Tautan Tata Tertib"
            description="Orang tua akan melihat gambar sampul yang bisa diklik untuk membuka file."
            fields={tautanFields("Tata Tertib")}
            trigger={
              <Button size="sm">
                <Plus className="mr-2 h-4 w-4" /> Tambah
              </Button>
            }
            onSubmit={addTautan("Tata Tertib")}
          />
        }
      >
        {tautanTable("Tata Tertib")}
      </Section>

      <Section
        title="Tautan Jadwal Pelajaran"
        action={
          <FormDialog
            title="Tambah Tautan Jadwal Pelajaran"
            description="Kosongkan kelas jika berlaku untuk semua kelas."
            fields={tautanFields("Jadwal Pelajaran")}
            trigger={
              <Button size="sm">
                <Plus className="mr-2 h-4 w-4" /> Tambah
              </Button>
            }
            onSubmit={addTautan("Jadwal Pelajaran")}
          />
        }
      >
        {tautanTable("Jadwal Pelajaran")}
      </Section>
    </div>
  );
}