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, Trash2, Paperclip } from "lucide-react";
import { useServerFn } from "@tanstack/react-start";
import { parseDriveFolderId } from "@/lib/drive";
import { uploadToDrive } from "@/lib/drive.functions";
import { toast } from "sonner";
import {
  JENIS_PEMBERITAHUAN,
  newId,
  nowTime,
  todayISO,
  useSip,
  type JenisPemberitahuan,
} from "@/lib/sip-data";

export function PemberitahuanBK({ context }: { context: string }) {
  const { pemberitahuanBk, setPemberitahuanBk, kelasList, siswa, currentUser, driveSuratBkUrl } =
    useSip();
  const upload = useServerFn(uploadToDrive);
  const isOrtu = context === "ortu_pemberitahuan";

  const anak = currentUser?.anak ?? "";
  const kelasAnak = currentUser?.keterangan ?? "";

  const rows = isOrtu
    ? pemberitahuanBk.filter((p) => p.nama === anak && p.kelas === kelasAnak)
    : pemberitahuanBk;

  const sorted = [...rows].sort((a, b) => (a.tanggal < b.tanggal ? 1 : -1));

  const jenisBadge = (jenis: JenisPemberitahuan) =>
    jenis === "Surat Pemanggilan" ? (
      <span className="bg-risk-mid text-risk-mid-foreground rounded-md px-2 py-1 text-xs font-semibold">
        {jenis}
      </span>
    ) : (
      <Badge variant="secondary">{jenis}</Badge>
    );

  const lampiranCell = (url?: string) =>
    url ? (
      <a
        href={url}
        target="_blank"
        rel="noreferrer"
        className="text-primary inline-flex items-center gap-1 font-semibold underline"
      >
        <Paperclip className="h-3.5 w-3.5" /> Lihat / Unduh
      </a>
    ) : (
      <span className="text-muted-foreground text-xs">-</span>
    );

  if (isOrtu) {
    return (
      <div className="space-y-6">
        <p className="text-muted-foreground text-sm">
          Pemberitahuan dari Guru BK untuk ananda{" "}
          <span className="text-foreground font-semibold">{anak || "-"}</span> · kelas{" "}
          <span className="text-foreground font-semibold">{kelasAnak || "-"}</span>
        </p>

        {sorted.length === 0 ? (
          <div className="surface-card text-muted-foreground p-6 text-sm">
            Belum ada pemberitahuan dari Guru BK.
          </div>
        ) : (
          <div className="grid gap-4 md:grid-cols-2">
            {sorted.map((p) => (
              <div key={p.id} className="surface-card space-y-3 p-5">
                <div className="flex items-start justify-between gap-3">
                  <h3 className="text-base font-bold">{p.judul}</h3>
                  {jenisBadge(p.jenis)}
                </div>
                <p className="text-muted-foreground text-xs">
                  {p.tanggal} {p.waktu} · {p.pengirim}
                </p>
                <p className="text-sm whitespace-pre-line">{p.isi}</p>
                {p.lampiran ? (
                  <a
                    href={p.lampiran}
                    target="_blank"
                    rel="noreferrer"
                    className="text-primary inline-flex items-center gap-1 text-sm font-semibold underline"
                  >
                    <Paperclip className="h-4 w-4" /> Lihat / Unduh Lampiran Surat
                  </a>
                ) : null}
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }

  return (
    <Section
      title="Pemberitahuan & Surat Pemanggilan Orang Tua"
      action={
        <FormDialog
          title="Kirim Pemberitahuan ke Orang Tua"
          description="Pesan akan tampil pada akun orang tua siswa terkait."
          fields={[
            { name: "jenis", label: "Jenis", type: "select", options: [...JENIS_PEMBERITAHUAN] },
            { 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: "judul", label: "Judul", placeholder: "Contoh: Panggilan Orang Tua/Wali" },
            { name: "isi", label: "Isi Pesan", type: "textarea" },
            { name: "lampiran", label: "Link Lampiran Surat (opsional)", optional: true },
            {
              name: "berkas",
              label: "Unggah Lampiran Foto / PDF (otomatis ke Google Drive)",
              type: "file",
              optional: true,
            },
          ]}
          submitLabel="Kirim Pemberitahuan"
          onSubmit={async (v) => {
            const id = newId("PB");
            const berkas = v["berkas"] ?? "";
            const namaBerkas = v["berkas__nama"] ?? "lampiran";
            setPemberitahuanBk((prev) => [
              ...prev,
              {
                id,
                tanggal: todayISO(),
                waktu: nowTime(),
                jenis: (val(v, "jenis") || "Pemberitahuan") as JenisPemberitahuan,
                nama: val(v, "nama"),
                kelas: val(v, "kelas"),
                judul: val(v, "judul"),
                isi: val(v, "isi"),
                lampiran: val(v, "lampiran"),
                pengirim: currentUser?.nama ?? "Guru BK",
              },
            ]);
            toast.success("Pemberitahuan terkirim ke orang tua");

            if (berkas) {
              const folderId = parseDriveFolderId(driveSuratBkUrl);
              if (!folderId) {
                toast.error("Folder Google Drive surat BK belum diatur oleh admin");
                return;
              }
              try {
                const res = await upload({
                  data: {
                    folderId,
                    name: `SuratBK_${val(v, "nama").replace(/\s+/g, "_")}_${Date.now()}_${namaBerkas}`,
                    dataUrl: berkas,
                  },
                });
                setPemberitahuanBk((prev) =>
                  prev.map((p) => (p.id === id ? { ...p, lampiran: res.webViewLink } : p))
                );
                toast.success("Lampiran surat berhasil diunggah ke Google Drive");
              } catch (err) {
                toast.error("Lampiran gagal diunggah ke Google Drive", {
                  description: String(err),
                });
              }
            }
          }}
          trigger={
            <Button size="sm">
              <Plus className="mr-1 h-4 w-4" /> Kirim Pemberitahuan
            </Button>
          }
        />
      }
    >
      <DataTable
        head={["Tanggal", "Jenis", "Nama Siswa", "Kelas", "Judul", "Lampiran", "Aksi"]}
        empty="Belum ada pemberitahuan yang dikirim."
        rows={sorted.map((p) => [
          <span className="text-muted-foreground whitespace-nowrap">
            {p.tanggal} {p.waktu}
          </span>,
          jenisBadge(p.jenis),
          <span className="font-semibold">{p.nama}</span>,
          <Badge variant="secondary">{p.kelas}</Badge>,
          p.judul,
          lampiranCell(p.lampiran),
          <Button
            size="icon"
            variant="destructive"
            onClick={() => {
              setPemberitahuanBk((prev) => prev.filter((x) => x.id !== p.id));
              toast.success("Pemberitahuan dihapus");
            }}
          >
            <Trash2 className="h-4 w-4" />
          </Button>,
        ])}
      />
    </Section>
  );
}