"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import useSWR from "swr";
import {
  AlertCircle,
  CheckCircle2,
  ClipboardList,
  Eye,
  FileText,
  Layers,
  Pencil,
  Plus,
  Search,
  X,
} from "lucide-react";
import { toast } from "sonner";
import type { SuratJenis } from "@/lib/types";
import { ApiError, apiSend, fetcher } from "@/lib/api";
import { useSession } from "@/lib/use-session";
import {
  SYARAT_UMUM,
  isSyaratUmum,
  parseSyarat,
  serializeSyarat,
  sortSyarat,
} from "@/lib/surat/syarat";
import { StatCard } from "@/components/page-header";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select } from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";

type StatusFilter = "" | "lengkap" | "kosong";

export function PersyaratanLayanan() {
  const { user } = useSession();
  const isAdmin = user?.role === "ADMIN";

  const { data: jenisList, isLoading, mutate } = useSWR<SuratJenis[]>(
    "/surat/jenis",
    fetcher,
  );

  const [search, setSearch] = useState("");
  const [status, setStatus] = useState<StatusFilter>("");
  const [filterSyarat, setFilterSyarat] = useState("");

  const [editing, setEditing] = useState<SuratJenis | null>(null);
  const [draft, setDraft] = useState<string[]>([]);
  const [customInput, setCustomInput] = useState("");
  const [saving, setSaving] = useState(false);

  const catalog = useMemo(() => {
    const map = new Map<string, { nama: string; count: number; umum: boolean }>();
    for (const item of SYARAT_UMUM) {
      map.set(item.toLowerCase(), { nama: item, count: 0, umum: true });
    }
    for (const jenis of jenisList ?? []) {
      for (const item of parseSyarat(jenis.syarat)) {
        const key = item.toLowerCase();
        const entry = map.get(key);
        if (entry) entry.count += 1;
        else map.set(key, { nama: item, count: 1, umum: false });
      }
    }
    return [...map.values()].sort(
      (a, b) =>
        b.count - a.count ||
        Number(b.umum) - Number(a.umum) ||
        a.nama.localeCompare(b.nama),
    );
  }, [jenisList]);

  const daftar = useMemo(() => {
    const kata = search.trim().toLowerCase();
    return (jenisList ?? []).filter((jenis) => {
      if (
        kata &&
        !(
          jenis.nama.toLowerCase().includes(kata) ||
          jenis.kode.toLowerCase().includes(kata) ||
          (jenis.urlSurat ?? "").toLowerCase().includes(kata) ||
          (jenis.syarat ?? "").toLowerCase().includes(kata)
        )
      ) {
        return false;
      }
      const items = parseSyarat(jenis.syarat);
      if (status === "lengkap" && !items.length) return false;
      if (status === "kosong" && items.length) return false;
      if (
        filterSyarat &&
        !items.some((item) => item.toLowerCase() === filterSyarat.toLowerCase())
      ) {
        return false;
      }
      return true;
    });
  }, [jenisList, search, status, filterSyarat]);

  const total = jenisList?.length ?? 0;
  const sudahDiatur = (jenisList ?? []).filter(
    (jenis) => parseSyarat(jenis.syarat).length > 0,
  ).length;
  const totalButir = (jenisList ?? []).reduce(
    (jumlah, jenis) => jumlah + parseSyarat(jenis.syarat).length,
    0,
  );

  function openEditor(jenis: SuratJenis) {
    setEditing(jenis);
    setDraft(sortSyarat(parseSyarat(jenis.syarat)));
    setCustomInput("");
  }

  function hasDraft(item: string) {
    return draft.some((value) => value.toLowerCase() === item.toLowerCase());
  }

  function toggleUmum(item: string) {
    setDraft((current) =>
      current.some((value) => value.toLowerCase() === item.toLowerCase())
        ? current.filter((value) => value.toLowerCase() !== item.toLowerCase())
        : [...current, item],
    );
  }

  function tambahKhusus() {
    const item = customInput.trim();
    if (!item) return;
    if (hasDraft(item)) {
      toast.info("Persyaratan tersebut sudah ada di daftar");
      return;
    }
    setDraft((current) => [...current, item]);
    setCustomInput("");
  }

  function hapusKhusus(item: string) {
    setDraft((current) =>
      current.filter((value) => value.toLowerCase() !== item.toLowerCase()),
    );
  }

  async function simpan() {
    if (!editing) return;
    setSaving(true);
    try {
      await apiSend(`/surat/jenis/${editing.id}`, "PATCH", {
        syarat: serializeSyarat(sortSyarat(draft)),
      });
      toast.success("Persyaratan layanan disimpan");
      setEditing(null);
      await mutate();
    } catch (error) {
      toast.error(
        error instanceof ApiError ? error.message : "Gagal menyimpan persyaratan",
      );
    } finally {
      setSaving(false);
    }
  }

  const custom = draft.filter((item) => !isSyaratUmum(item));

  return (
    <div className="space-y-6">
      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <StatCard
          title="Layanan surat"
          value={total}
          hint="Jenis surat terdaftar"
          icon={ClipboardList}
          tone="emerald"
        />
        <StatCard
          title="Sudah diatur"
          value={sudahDiatur}
          hint={`${total - sudahDiatur} layanan belum memiliki syarat`}
          icon={CheckCircle2}
          tone="sky"
        />
        <StatCard
          title="Belum diatur"
          value={total - sudahDiatur}
          hint="Perlu dilengkapi petugas"
          icon={AlertCircle}
          tone="amber"
        />
        <StatCard
          title="Total butir syarat"
          value={totalButir}
          hint={`${catalog.length} jenis persyaratan unik`}
          icon={Layers}
          tone="violet"
        />
      </div>

      <Card>
        <CardContent className="space-y-4 p-5">
          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <p className="font-semibold">Katalog persyaratan</p>
              <p className="text-xs text-muted-foreground">
                Klik salah satu persyaratan untuk menyaring layanan yang memerlukannya.
              </p>
            </div>
            <span className="text-xs text-muted-foreground">
              {catalog.length} jenis persyaratan
            </span>
          </div>
          <div className="flex flex-wrap gap-2">
            <button
              type="button"
              onClick={() => setFilterSyarat("")}
              className={cn(
                "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs transition-colors",
                !filterSyarat
                  ? "border-primary bg-primary/10 font-semibold text-primary"
                  : "border-border bg-background text-muted-foreground hover:bg-muted",
              )}
            >
              Semua layanan
              <span className="rounded-full bg-background/70 px-1.5 py-0.5 font-mono text-[10px]">
                {total}
              </span>
            </button>
            {catalog.map((item) => (
              <button
                key={item.nama}
                type="button"
                title={item.nama}
                onClick={() =>
                  setFilterSyarat(
                    filterSyarat.toLowerCase() === item.nama.toLowerCase()
                      ? ""
                      : item.nama,
                  )
                }
                className={cn(
                  "inline-flex max-w-[300px] items-center gap-2 rounded-full border px-3 py-1 text-xs transition-colors",
                  filterSyarat.toLowerCase() === item.nama.toLowerCase()
                    ? "border-primary bg-primary/10 font-semibold text-primary"
                    : "border-border bg-background text-muted-foreground hover:bg-muted",
                  item.count === 0 && "opacity-60",
                )}
              >
                <span className="truncate">{item.nama}</span>
                <span className="rounded-full bg-background/70 px-1.5 py-0.5 font-mono text-[10px]">
                  {item.count}
                </span>
              </button>
            ))}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-0">
          <div className="flex flex-col gap-3 border-b p-4 lg:flex-row lg:items-center lg:justify-between">
            <div className="relative w-full lg:max-w-sm">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                value={search}
                onChange={(event) => setSearch(event.target.value)}
                placeholder="Cari layanan, kode, atau persyaratan…"
                className="pl-9"
              />
            </div>
            <div className="flex flex-wrap items-center gap-2">
              <Select
                value={status}
                onChange={(event) => setStatus(event.target.value as StatusFilter)}
                aria-label="Filter kelengkapan persyaratan"
                className="w-full sm:w-48"
              >
                <option value="">Semua layanan</option>
                <option value="lengkap">Sudah diatur</option>
                <option value="kosong">Belum diatur</option>
              </Select>
              {(search || status || filterSyarat) && (
                <Button
                  type="button"
                  variant="ghost"
                  onClick={() => {
                    setSearch("");
                    setStatus("");
                    setFilterSyarat("");
                  }}
                >
                  Reset
                </Button>
              )}
              <span className="text-xs text-muted-foreground">
                {daftar.length} dari {total} layanan
              </span>
            </div>
          </div>

          {filterSyarat && (
            <div className="flex flex-wrap items-center gap-2 border-b bg-muted/30 px-4 py-2 text-xs text-muted-foreground">
              <span>Filter aktif:</span>
              <Badge variant="outline" className="gap-1 bg-background">
                {filterSyarat}
                <button
                  type="button"
                  onClick={() => setFilterSyarat("")}
                  aria-label="Hapus filter persyaratan"
                >
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            </div>
          )}

          {isLoading ? (
            <div className="space-y-2 p-4">
              {Array.from({ length: 6 }).map((_, index) => (
                <div key={index} className="h-14 animate-pulse rounded-lg bg-muted" />
              ))}
            </div>
          ) : daftar.length ? (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Layanan</TableHead>
                  <TableHead>Kode</TableHead>
                  <TableHead>Persyaratan</TableHead>
                  <TableHead className="w-20 text-center">Butir</TableHead>
                  <TableHead className="text-right">Aksi</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {daftar.map((jenis) => {
                  const items = parseSyarat(jenis.syarat);
                  return (
                    <TableRow key={jenis.id}>
                      <TableCell>
                        <div className="flex flex-wrap items-center gap-2">
                          <span className="font-medium">{jenis.nama}</span>
                          {jenis.mandiri && <Badge variant="info">Mandiri</Badge>}
                          {!jenis.aktif && <Badge variant="secondary">Nonaktif</Badge>}
                        </div>
                        {jenis.deskripsi && (
                          <p className="mt-0.5 line-clamp-1 max-w-sm text-xs text-muted-foreground">
                            {jenis.deskripsi}
                          </p>
                        )}
                      </TableCell>
                      <TableCell>
                        <span className="rounded-full bg-muted px-2 py-0.5 font-mono text-[11px] text-muted-foreground">
                          {jenis.kode}
                        </span>
                      </TableCell>
                      <TableCell>
                        {items.length ? (
                          <div className="flex max-w-xl flex-wrap items-center gap-1">
                            {items.slice(0, 3).map((item) => (
                              <Badge
                                key={item}
                                variant="secondary"
                                title={item}
                                className="max-w-[230px] justify-start truncate font-normal"
                              >
                                {item}
                              </Badge>
                            ))}
                            {items.length > 3 && (
                              <Badge variant="outline">+{items.length - 3} lainnya</Badge>
                            )}
                          </div>
                        ) : (
                          <span className="inline-flex items-center gap-1.5 text-xs text-amber-700">
                            <AlertCircle className="h-3.5 w-3.5" />
                            Belum diatur
                          </span>
                        )}
                      </TableCell>
                      <TableCell className="text-center">
                        <span className="font-semibold">{items.length}</span>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-1">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => openEditor(jenis)}
                          >
                            {isAdmin ? (
                              <Pencil className="h-4 w-4" />
                            ) : (
                              <Eye className="h-4 w-4" />
                            )}
                            {isAdmin ? "Atur" : "Lihat"}
                          </Button>
                          <Button variant="ghost" size="icon" className="h-8 w-8" asChild>
                            <Link
                              href={`/admin/cetak-surat/${jenis.id}`}
                              aria-label={`Buka template ${jenis.nama}`}
                              title="Buka template"
                            >
                              <FileText className="h-4 w-4" />
                            </Link>
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          ) : (
            <div className="py-16 text-center">
              <p className="font-semibold">Tidak ada layanan yang cocok</p>
              <p className="mt-1 text-sm text-muted-foreground">
                Ubah kata pencarian atau filter persyaratan.
              </p>
            </div>
          )}
        </CardContent>
      </Card>

      <Dialog open={!!editing} onOpenChange={(open) => !open && setEditing(null)}>
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>Persyaratan {editing?.nama}</DialogTitle>
            <DialogDescription>
              {editing?.kode} · {draft.length} butir persyaratan dipilih. Centang
              persyaratan umum atau tambahkan syarat khusus layanan ini.
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-5">
            <div className="rounded-xl border border-border bg-muted/30 p-4">
              <div className="flex flex-wrap items-center justify-between gap-2">
                <div>
                  <p className="text-sm font-semibold">Persyaratan umum</p>
                  <p className="text-xs text-muted-foreground">
                    Acuan standar OpenSID untuk layanan surat desa.
                  </p>
                </div>
                {isAdmin && (
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={() =>
                      setDraft((current) => [
                        ...new Set([...current, ...SYARAT_UMUM.slice(0, 3)]),
                      ])
                    }
                  >
                    Paket dasar
                  </Button>
                )}
              </div>
              <div className="mt-3 grid gap-2 sm:grid-cols-2">
                {SYARAT_UMUM.map((item) => {
                  const checked = hasDraft(item);
                  return (
                    <label
                      key={item}
                      className={cn(
                        "flex cursor-pointer items-start gap-2 rounded-lg border px-3 py-2 text-xs leading-relaxed transition-colors",
                        checked
                          ? "border-primary/40 bg-primary/5 text-foreground"
                          : "border-border bg-background text-muted-foreground hover:bg-muted",
                        !isAdmin && "cursor-default",
                      )}
                    >
                      <input
                        type="checkbox"
                        checked={checked}
                        disabled={!isAdmin}
                        onChange={() => toggleUmum(item)}
                        className="mt-0.5 h-3.5 w-3.5 shrink-0 accent-emerald-600"
                      />
                      <span>{item}</span>
                    </label>
                  );
                })}
              </div>
            </div>

            <div className="space-y-3">
              <div>
                <p className="text-sm font-semibold">Persyaratan tambahan</p>
                <p className="text-xs text-muted-foreground">
                  Syarat khusus di luar daftar umum, misalnya surat kehilangan atau
                  fotokopi sertifikat.
                </p>
              </div>

              {custom.length ? (
                <div className="flex flex-wrap gap-2">
                  {custom.map((item) => (
                    <span
                      key={item}
                      className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-3 py-1 text-xs text-foreground"
                    >
                      {item}
                      {isAdmin && (
                        <button
                          type="button"
                          onClick={() => hapusKhusus(item)}
                          aria-label={`Hapus ${item}`}
                          className="rounded-full p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground"
                        >
                          <X className="h-3 w-3" />
                        </button>
                      )}
                    </span>
                  ))}
                </div>
              ) : (
                <p className="rounded-lg border border-dashed border-border px-3 py-3 text-xs text-muted-foreground">
                  Belum ada persyaratan tambahan.
                </p>
              )}

              {isAdmin && (
                <form
                  onSubmit={(event) => {
                    event.preventDefault();
                    tambahKhusus();
                  }}
                  className="flex flex-col gap-2 sm:flex-row"
                >
                  <div className="flex-1 space-y-1.5">
                    <Label htmlFor="syarat-baru" className="sr-only">
                      Persyaratan tambahan
                    </Label>
                    <Input
                      id="syarat-baru"
                      value={customInput}
                      onChange={(event) => setCustomInput(event.target.value)}
                      placeholder="Contoh: Fotokopi buku tabungan"
                    />
                  </div>
                  <Button type="submit" variant="outline" disabled={!customInput.trim()}>
                    <Plus className="h-4 w-4" />
                    Tambah
                  </Button>
                </form>
              )}
            </div>
          </div>

          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => setEditing(null)}>
              {isAdmin ? "Batal" : "Tutup"}
            </Button>
            {isAdmin && (
              <Button type="button" onClick={simpan} disabled={saving}>
                {saving ? "Menyimpan…" : "Simpan Persyaratan"}
              </Button>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}