"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import useSWR from "swr";
import {
  ArrowLeft,
  CircleAlert,
  FileCheck2,
  Printer,
  Save,
  Sparkles,
} from "lucide-react";
import { toast } from "sonner";
import type { Desa, PermohonanSuratDetail } from "@/lib/types";
import { ApiError, apiSend, fetcher } from "@/lib/api";
import { getSuratTemplate } from "@/lib/surat/templates";
import { applyTemplateOverride } from "@/lib/surat/override";
import type { SuratData } from "@/lib/surat/types";
import { SuratDocument } from "@/components/surat/surat-document";
import { SuratDataForm } from "@/components/surat/surat-data-form";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { labelStatusSurat } from "@/lib/utils";

export default function CetakSuratPage() {
  const params = useParams<{ id: string }>();
  const { data: surat, isLoading, mutate } = useSWR<PermohonanSuratDetail>(
    params?.id ? `/surat/${params.id}` : null,
    fetcher,
  );
  const { data: desa } = useSWR<Desa>("/desa", fetcher);

  const [data, setData] = useState<SuratData>({});
  const [keperluan, setKeperluan] = useState("");
  const [pemohon, setPemohon] = useState("");
  const [loadedId, setLoadedId] = useState<number | null>(null);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (!surat || surat.id === loadedId) return;
    setData((surat.dataIsian as SuratData | null) ?? {});
    setKeperluan(surat.keperluan);
    setPemohon(surat.pemohon ?? "");
    setLoadedId(surat.id);
  }, [surat, loadedId]);

  const template = useMemo(
    () =>
      applyTemplateOverride(
        getSuratTemplate(surat?.jenis?.urlSurat, surat?.jenis?.nama),
        surat?.jenis?.template,
      ),
    [surat?.jenis?.urlSurat, surat?.jenis?.nama, surat?.jenis?.template],
  );

  const missing = template.fields.filter(
    (field) => field.required && !data[field.key]?.trim(),
  );

  async function saveData() {
    if (!surat) return;
    setSaving(true);
    try {
      await apiSend(`/surat/${surat.id}/isian`, "PATCH", {
        dataIsian: data,
        ...(keperluan.trim() ? { keperluan: keperluan.trim() } : {}),
        pemohon: pemohon.trim(),
      });
      toast.success("Data surat disimpan");
      await mutate();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menyimpan data surat");
    } finally {
      setSaving(false);
    }
  }

  if (isLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
        Memuat surat…
      </div>
    );
  }

  if (!surat) {
    return (
      <div className="flex min-h-screen flex-col items-center justify-center gap-3 text-sm">
        <p className="font-semibold">Surat tidak ditemukan</p>
        <Link className="text-primary underline" href="/admin/surat">
          Kembali ke daftar surat
        </Link>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-100 print:bg-white">
      <div className="no-print sticky top-0 z-30 border-b border-border bg-white/90 backdrop-blur">
        <div className="mx-auto flex max-w-[1480px] flex-wrap items-center justify-between gap-3 px-4 py-3">
          <div className="flex items-center gap-3">
            <Button variant="outline" size="sm" asChild>
              <Link href="/admin/surat">
                <ArrowLeft className="h-4 w-4" />
                Kembali
              </Link>
            </Button>
            <div>
              <div className="flex items-center gap-2">
                <p className="text-sm font-semibold">{template.nama}</p>
                <Badge variant="info">{template.kode}</Badge>
                <Badge variant={surat.status === "SELESAI" ? "success" : "warning"}>
                  {labelStatusSurat(surat.status)}
                </Badge>
              </div>
              <p className="font-mono text-[11px] text-muted-foreground">{surat.nomor}</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" onClick={saveData} disabled={saving}>
              <Save className="h-4 w-4" />
              {saving ? "Menyimpan…" : "Simpan data"}
            </Button>
            <Button size="sm" onClick={() => window.print()}>
              <Printer className="h-4 w-4" />
              Cetak / PDF
            </Button>
          </div>
        </div>
      </div>

      <div className="mx-auto grid max-w-[1480px] gap-6 px-4 py-6 xl:grid-cols-[380px_minmax(0,1fr)] print:block print:max-w-none print:p-0">
        <aside className="no-print space-y-4 self-start xl:sticky xl:top-[76px]">
          <div className="rounded-xl border border-border bg-white p-4 shadow-sm">
            <div className="flex items-start gap-2">
              <span className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-secondary text-primary">
                <Sparkles className="h-4 w-4" />
              </span>
              <div>
                <p className="text-sm font-semibold">Data isian surat</p>
                <p className="text-xs text-muted-foreground">
                  Template OpenSID · {template.kategori}
                </p>
              </div>
            </div>
            <div className="mt-3 space-y-1.5">
              <Label htmlFor="keperluan-surat" className="text-xs">
                Keperluan surat
              </Label>
              <Input
                id="keperluan-surat"
                value={keperluan}
                onChange={(event) => setKeperluan(event.target.value)}
                placeholder="Contoh: persyaratan administrasi bank"
              />
              <Label htmlFor="pemohon-surat" className="text-xs">
                Pemohon
              </Label>
              <Input
                id="pemohon-surat"
                value={pemohon}
                onChange={(event) => setPemohon(event.target.value)}
                placeholder={surat.penduduk.nama}
              />
              <p className="text-[11px] text-muted-foreground">
                Warga di atas tercatat sebagai Terlapor; isi Pemohon bila yang
                mengajukan surat orang lain.
              </p>
            </div>
            {missing.length > 0 && (
              <div className="mt-3 flex items-start gap-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-[11px] leading-relaxed text-amber-900">
                <CircleAlert className="mt-0.5 h-3.5 w-3.5 shrink-0" />
                <span>
                  {missing.length} data wajib belum terisi:{" "}
                  {missing.map((field) => field.label).join(", ")}.
                </span>
              </div>
            )}
          </div>

          <div className="max-h-[calc(100vh-260px)] overflow-y-auto rounded-xl border border-border bg-white p-4 shadow-sm">
            <SuratDataForm
              template={template}
              value={data}
              onChange={setData}
              idPrefix={`surat-${surat.id}`}
            />
          </div>

          <div className="flex items-center gap-2 rounded-xl border border-dashed border-border bg-white/60 px-4 py-3 text-[11px] text-muted-foreground">
            <FileCheck2 className="h-4 w-4 text-primary" />
            Data pemohon diambil otomatis dari kependudukan. Isian di panel ini khusus
            untuk surat {template.nama}.
          </div>
        </aside>

        <main className="min-w-0 print:contents">
          <SuratDocument
            template={template}
            surat={{ ...surat, keperluan: keperluan.trim() || surat.keperluan }}
            desa={desa}
            data={data}
          />
        </main>
      </div>
    </div>
  );
}