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, Paperclip, Trash2, MessageSquareReply } 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_SARAN, newId, nowTime, todayISO, useSip, type JenisSaran } from "@/lib/sip-data";

export function KotakSaran({ context }: { context: string }) {
  const { saranOrtu, setSaranOrtu, currentUser, driveSaranUrl } = useSip();
  const upload = useServerFn(uploadToDrive);
  const isOrtu = context === "ortu_saran";

  const rows = isOrtu ? saranOrtu.filter((s) => s.pengirim === currentUser?.nama) : saranOrtu;
  const sorted = [...rows].sort((a, b) => (a.tanggal < b.tanggal ? 1 : -1));

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

  if (isOrtu) {
    return (
      <div className="space-y-6">
        <Section
          title="Kotak Saran & Laporan untuk Sekolah"
          action={
            <FormDialog
              title="Kirim Saran / Laporan"
              description="Pesan akan langsung terkirim ke akun Kepala Sekolah."
              fields={[
                { name: "jenis", label: "Jenis", type: "select", options: [...JENIS_SARAN] },
                { name: "judul", label: "Judul", placeholder: "Contoh: Usulan jam masuk sekolah" },
                { name: "isi", label: "Isi Pesan", type: "textarea" },
                { name: "lampiran", label: "Link Lampiran (opsional)", optional: true },
                {
                  name: "berkas",
                  label: "Unggah Lampiran Foto / Dokumen (otomatis ke Google Drive)",
                  type: "file",
                  optional: true,
                },
              ]}
              submitLabel="Kirim ke Kepala Sekolah"
              onSubmit={async (v) => {
                const id = newId("SR");
                const berkas = v["berkas"] ?? "";
                const namaBerkas = v["berkas__nama"] ?? "lampiran";
                setSaranOrtu((prev) => [
                  ...prev,
                  {
                    id,
                    tanggal: todayISO(),
                    waktu: nowTime(),
                    jenis: (val(v, "jenis") || "Saran") as JenisSaran,
                    pengirim: currentUser?.nama ?? "Orang Tua",
                    anak: currentUser?.anak ?? "-",
                    kelas: currentUser?.keterangan ?? "-",
                    judul: val(v, "judul"),
                    isi: val(v, "isi"),
                    lampiran: val(v, "lampiran"),
                    status: "Terkirim",
                    tanggapan: "",
                  },
                ]);
                toast.success("Terkirim ke Kepala Sekolah");

                if (berkas) {
                  const folderId = parseDriveFolderId(driveSaranUrl);
                  if (!folderId) {
                    toast.error("Folder Google Drive saran orang tua belum diatur oleh admin");
                    return;
                  }
                  try {
                    const res = await upload({
                      data: {
                        folderId,
                        name: `Saran_${(currentUser?.nama ?? "Ortu").replace(/\s+/g, "_")}_${Date.now()}_${namaBerkas}`,
                        dataUrl: berkas,
                      },
                    });
                    setSaranOrtu((prev) =>
                      prev.map((x) => (x.id === id ? { ...x, lampiran: res.webViewLink } : x)),
                    );
                    toast.success("Lampiran 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 Saran / Laporan
                </Button>
              }
            />
          }
        >
          <p className="text-muted-foreground text-sm">
            Sampaikan saran, laporan, atau pengaduan Anda. Pesan diterima langsung oleh Kepala
            Sekolah dan tanggapannya akan tampil di halaman ini.
          </p>
        </Section>

        {sorted.length === 0 ? (
          <div className="surface-card text-muted-foreground p-6 text-sm">
            Belum ada saran atau laporan yang Anda kirim.
          </div>
        ) : (
          <div className="grid gap-4 md:grid-cols-2">
            {sorted.map((s) => (
              <div key={s.id} className="surface-card space-y-3 p-5">
                <div className="flex items-start justify-between gap-3">
                  <h3 className="text-base font-bold">{s.judul}</h3>
                  {jenisBadge(s.jenis)}
                </div>
                <p className="text-muted-foreground text-xs">
                  {s.tanggal} {s.waktu} · Status: {s.status}
                </p>
                <p className="text-sm whitespace-pre-line">{s.isi}</p>
                {s.lampiran ? (
                  <a
                    href={s.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 Lampiran
                  </a>
                ) : null}
                {s.tanggapan ? (
                  <div className="bg-muted rounded-md p-3 text-sm">
                    <p className="mb-1 font-semibold">Tanggapan Kepala Sekolah</p>
                    <p className="whitespace-pre-line">{s.tanggapan}</p>
                  </div>
                ) : null}
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }

  return (
    <Section title="Kotak Saran & Laporan Orang Tua">
      <DataTable
        head={["Tanggal", "Jenis", "Pengirim", "Anak / Kelas", "Judul", "Isi", "Lampiran", "Status", "Aksi"]}
        empty="Belum ada saran atau laporan masuk."
        rows={sorted.map((s) => [
          <span className="text-muted-foreground whitespace-nowrap">
            {s.tanggal} {s.waktu}
          </span>,
          jenisBadge(s.jenis),
          <span className="font-semibold">{s.pengirim}</span>,
          <span className="text-sm">
            {s.anak} <Badge variant="secondary">{s.kelas}</Badge>
          </span>,
          s.judul,
          <span className="text-muted-foreground block max-w-[280px] text-xs">{s.isi}</span>,
          s.lampiran ? (
            <a
              href={s.lampiran}
              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
            </a>
          ) : (
            <span className="text-muted-foreground text-xs">-</span>
          ),
          <Badge variant={s.status === "Ditanggapi" ? "default" : "secondary"}>{s.status}</Badge>,
          <div className="flex gap-2">
            <FormDialog
              title="Tanggapi Saran / Laporan"
              description={`${s.jenis} dari ${s.pengirim}`}
              fields={[
                { name: "tanggapan", label: "Tanggapan", type: "textarea", defaultValue: s.tanggapan },
              ]}
              submitLabel="Kirim Tanggapan"
              onSubmit={(v) => {
                setSaranOrtu((prev) =>
                  prev.map((x) =>
                    x.id === s.id
                      ? { ...x, tanggapan: val(v, "tanggapan"), status: "Ditanggapi" as const }
                      : x,
                  ),
                );
                toast.success("Tanggapan terkirim ke orang tua");
              }}
              trigger={
                <Button size="icon" variant="outline">
                  <MessageSquareReply className="h-4 w-4" />
                </Button>
              }
            />
            <Button
              size="icon"
              variant="destructive"
              onClick={() => {
                setSaranOrtu((prev) => prev.filter((x) => x.id !== s.id));
                toast.success("Data dihapus");
              }}
            >
              <Trash2 className="h-4 w-4" />
            </Button>
          </div>,
        ])}
      />
    </Section>
  );
}