"use client";

import { Suspense, useEffect, useState } from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import useSWR from "swr";
import { ArrowLeft, Save } from "lucide-react";
import { toast } from "sonner";
import { apiSend, ApiError, fetcher } from "@/lib/api";
import { PageHeader } from "@/components/page-header";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";

interface Jenis {
  id: number;
  nama: string;
  template: string | null;
}

export default function BuatSuratDinasPage() {
  return (
    <Suspense>
      <BuatSuratDinasForm />
    </Suspense>
  );
}

function BuatSuratDinasForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const jenisAwal = searchParams.get("jenisId") ?? "";
  const { data: jenis } = useSWR<Jenis[]>("/master/jenis-surat-dinas", fetcher);
  const [form, setForm] = useState({
    jenisId: jenisAwal,
    nomor: "",
    tanggal: new Date().toISOString().slice(0, 10),
    pengirim: "",
    alamat: "",
    perihal: "",
    isi: "",
    lampiran: "",
  });
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (!jenisAwal || !jenis?.length) return;
    const dipilih = jenis.find((item) => String(item.id) === jenisAwal);
    if (!dipilih) return;
    setForm((current) => (current.isi ? current : { ...current, isi: dipilih.template ?? "" }));
  }, [jenisAwal, jenis]);

  function set(field: keyof typeof form, value: string) {
    setForm((current) => ({ ...current, [field]: value }));
  }

  function pilihJenis(value: string) {
    const selected = jenis?.find((item) => String(item.id) === value);
    setForm((current) => ({
      ...current,
      jenisId: value,
      isi: current.isi || selected?.template || "",
    }));
  }

  async function save(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSaving(true);
    try {
      const created = await apiSend<{ id: number }>("/master/surat-dinas", "POST", {
        ...form,
        jenisId: form.jenisId ? Number(form.jenisId) : null,
      });
      toast.success("Surat dinas dibuat");
      router.push(`/admin/surat-dinas/cetak/${created.id}`);
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menyimpan surat");
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className="space-y-5">
      <PageHeader
        title="Tambah Surat Dinas"
        description="Buat surat dinas baru, lalu cetak atau simpan ke arsip."
        action={
          <Link href="/admin/surat-dinas">
            <Button variant="outline" size="sm">
              <ArrowLeft className="h-4 w-4" /> Kembali
            </Button>
          </Link>
        }
      />
      <Card>
        <CardContent className="p-4 md:p-5">
          <form onSubmit={save} className="space-y-4">
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-1.5">
                <Label htmlFor="jenis">Jenis Surat</Label>
                <Select id="jenis" value={form.jenisId} onChange={(event) => pilihJenis(event.target.value)}>
                  <option value="">— Pilih jenis —</option>
                  {(jenis ?? []).map((item) => (
                    <option key={item.id} value={item.id}>
                      {item.nama}
                    </option>
                  ))}
                </Select>
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="nomor">Nomor Surat</Label>
                <Input id="nomor" value={form.nomor} onChange={(event) => set("nomor", event.target.value)} required />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="tanggal">Tanggal</Label>
                <Input id="tanggal" type="date" value={form.tanggal} onChange={(event) => set("tanggal", event.target.value)} required />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="pengirim">Pengirim</Label>
                <Input id="pengirim" value={form.pengirim} onChange={(event) => set("pengirim", event.target.value)} />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="alamat">Alamat Tujuan</Label>
                <Input id="alamat" value={form.alamat} onChange={(event) => set("alamat", event.target.value)} />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="lampiran">Lampiran</Label>
                <Input id="lampiran" value={form.lampiran} onChange={(event) => set("lampiran", event.target.value)} placeholder="Jumlah / keterangan lampiran" />
              </div>
              <div className="space-y-1.5 sm:col-span-2">
                <Label htmlFor="perihal">Perihal</Label>
                <Input id="perihal" value={form.perihal} onChange={(event) => set("perihal", event.target.value)} required />
              </div>
              <div className="space-y-1.5 sm:col-span-2">
                <Label htmlFor="isi">Isi Surat</Label>
                <Textarea
                  id="isi"
                  value={form.isi}
                  onChange={(event) => set("isi", event.target.value)}
                  rows={10}
                  placeholder="Tulis isi surat dinas…"
                />
              </div>
            </div>
            <div className="flex justify-end gap-2">
              <Button type="button" variant="outline" onClick={() => router.push("/admin/surat-dinas")}>
                Batal
              </Button>
              <Button type="submit" disabled={saving}>
                <Save className="h-4 w-4" /> {saving ? "Menyimpan…" : "Simpan & Cetak"}
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}