"use client";

import Link from "next/link";
import { useParams } from "next/navigation";
import useSWR from "swr";
import { ArrowLeft, Printer } from "lucide-react";
import type { Desa } from "@/lib/types";
import { fetcher } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { Logo } from "@/components/logo";
import { formatDate } from "@/lib/utils";

interface SuratDinas {
  id: number;
  jenisId: number | null;
  nomor: string;
  tanggal: string;
  pengirim: string | null;
  alamat: string | null;
  perihal: string;
  isi: string | null;
  lampiran: string | null;
}

interface Jenis {
  id: number;
  nama: string;
  orientasi: string | null;
  ukuran: string | null;
  marginGlobal: boolean;
  marginKiri: number | null;
  marginAtas: number | null;
  marginKanan: number | null;
  marginBawah: number | null;
  header: string | null;
  footer: boolean;
}

const UKURAN_KERTAS: Record<string, string> = {
  A4: "A4",
  F4: "215mm 330mm",
  LEGAL: "legal",
  LETTER: "letter",
};

export default function CetakSuratDinasPage() {
  const params = useParams<{ id: string }>();
  const { data: surat, isLoading } = useSWR<SuratDinas>(
    params?.id ? `/master/surat-dinas/${params.id}` : null,
    fetcher,
  );
  const { data: jenis } = useSWR<Jenis[]>("/master/jenis-surat-dinas", fetcher);
  const { data: desa } = useSWR<Desa>("/desa", fetcher);

  const detailJenis = jenis?.find((item) => item.id === surat?.jenisId);
  const namaJenis = detailJenis?.nama;
  const tampilHeader = detailJenis?.header !== "TIDAK";
  const ukuranKertas = UKURAN_KERTAS[detailJenis?.ukuran ?? "A4"] ?? "A4";
  const orientasiKertas = detailJenis?.orientasi === "LANDSCAPE" ? "landscape" : "portrait";
  const marginKertas = [
    detailJenis?.marginAtas ?? 0.63,
    detailJenis?.marginKanan ?? 1.78,
    detailJenis?.marginBawah ?? 1.37,
    detailJenis?.marginKiri ?? 1.78,
  ]
    .map((nilai) => `${nilai}cm`)
    .join(" ");

  if (isLoading) {
    return <div className="p-8 text-sm text-muted-foreground">Memuat surat…</div>;
  }
  if (!surat) {
    return <div className="p-8 text-sm text-muted-foreground">Surat tidak ditemukan.</div>;
  }

  return (
    <div className="min-h-screen bg-slate-100 print:bg-white">
      <style>{`@media print { @page { size: ${ukuranKertas} ${orientasiKertas}; margin: ${marginKertas}; } }`}</style>
      <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-4xl items-center justify-between gap-3 px-4 py-3">
          <Link href="/admin/surat-dinas">
            <Button variant="outline" size="sm">
              <ArrowLeft className="h-4 w-4" /> Kembali
            </Button>
          </Link>
          <Button size="sm" onClick={() => window.print()}>
            <Printer className="h-4 w-4" /> Cetak
          </Button>
        </div>
      </div>

      <div className="mx-auto max-w-4xl px-4 py-6 print:max-w-none print:p-0">
        <article className="mx-auto bg-white p-10 shadow-sm print:p-0 print:shadow-none">
          {tampilHeader && (
          <header className="flex items-center gap-4 border-b-[3px] border-black pb-3">
            <Logo className="h-20 w-auto" />
            <div className="flex-1 text-center">
              <p className="text-sm font-semibold uppercase tracking-wide">
                Pemerintah Kabupaten {desa?.kabupaten ?? "Cilacap"}
              </p>
              <p className="text-sm font-semibold uppercase tracking-wide">
                Kecamatan {desa?.kecamatan ?? "Cipari"}
              </p>
              <p className="text-2xl font-bold uppercase leading-tight">
                Desa {desa?.nama?.replace(/^Desa\s+/i, "") ?? "Mulyadadi"}
              </p>
              <p className="mt-1 text-xs">
                {desa?.alamat ?? "Jl. Raya Mulyadadi"} · {desa?.telepon ?? "-"}
              </p>
            </div>
          </header>
          )}

          <div className="mt-6 text-center">
            <p className="text-lg font-bold uppercase underline underline-offset-4">
              {namaJenis ?? "Surat Dinas"}
            </p>
            <p className="text-sm">Nomor: {surat.nomor}</p>
          </div>

          <div className="mt-6 space-y-1 text-sm">
            <div className="grid grid-cols-[90px_12px_1fr]">
              <span>Tanggal</span>
              <span>:</span>
              <span>{formatDate(surat.tanggal)}</span>
            </div>
            {surat.lampiran && (
              <div className="grid grid-cols-[90px_12px_1fr]">
                <span>Lampiran</span>
                <span>:</span>
                <span>{surat.lampiran}</span>
              </div>
            )}
            <div className="grid grid-cols-[90px_12px_1fr]">
              <span>Perihal</span>
              <span>:</span>
              <span className="font-semibold">{surat.perihal}</span>
            </div>
          </div>

          <div className="mt-6 space-y-1 text-sm">
            <p>Kepada Yth.</p>
            <p className="font-semibold">{surat.alamat || surat.pengirim || "—"}</p>
            <p>di tempat</p>
          </div>

          <div className="mt-6 whitespace-pre-wrap text-sm leading-relaxed">
            {surat.isi?.trim() || "…"}
          </div>

          <div className="mt-12 flex justify-end">
            <div className="text-center text-sm">
              <p>Mulyadadi, {formatDate(surat.tanggal)}</p>
              <p className="font-semibold">
                KEPALA DESA {(desa?.nama?.replace(/^Desa\s+/i, "") ?? "Mulyadadi").toUpperCase()}
              </p>
              <div className="h-20" />
              <p className="font-bold underline">{desa?.kepalaDesa ?? "………………………………"}</p>
              {desa?.nipKepalaDesa && <p>NIP. {desa.nipKepalaDesa}</p>}
            </div>
          </div>

          {detailJenis?.footer && (
            <footer className="mt-10 flex justify-between border-t border-black/40 pt-2 text-[11px] text-muted-foreground">
              <span>{desa?.alamat ?? "Jl. Raya Mulyadadi"}</span>
              <span>{desa?.telepon ?? "-"}</span>
            </footer>
          )}
        </article>
      </div>
    </div>
  );
}