"use client";

import { useState } from "react";
import useSWR from "swr";
import { Pencil, Plus, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { ApiError, apiSend, fetcher } from "@/lib/api";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} 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 {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Textarea } from "@/components/ui/textarea";

const ENDPOINT = "/master/kode-isian-alias";

interface KodeIsian {
  id: number;
  judul: string;
  alias: string;
  isi: string;
}

const kosong = { judul: "", alias: "", isi: "" };

export function KodeIsianAlias() {
  const { data, isLoading, mutate } = useSWR<KodeIsian[]>(ENDPOINT, fetcher);
  const [open, setOpen] = useState(false);
  const [editing, setEditing] = useState<KodeIsian | null>(null);
  const [form, setForm] = useState(kosong);
  const [saving, setSaving] = useState(false);
  const [target, setTarget] = useState<KodeIsian | null>(null);
  const [deleting, setDeleting] = useState(false);

  function bukaEditor(row?: KodeIsian) {
    setEditing(row ?? null);
    setForm(
      row
        ? { judul: row.judul, alias: row.alias, isi: row.isi ?? "" }
        : { ...kosong },
    );
    setOpen(true);
  }

  async function simpan(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSaving(true);
    try {
      if (editing) {
        await apiSend(`${ENDPOINT}/${editing.id}`, "PATCH", form);
        toast.success("Kode isian diperbarui");
      } else {
        await apiSend(ENDPOINT, "POST", form);
        toast.success("Kode isian ditambahkan");
      }
      setOpen(false);
      await mutate();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menyimpan kode isian");
    } finally {
      setSaving(false);
    }
  }

  async function hapus() {
    if (!target) return;
    setDeleting(true);
    try {
      await apiSend(`${ENDPOINT}/${target.id}`, "DELETE");
      toast.success(`${target.judul} dihapus`);
      setTarget(null);
      await mutate();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menghapus kode isian");
    } finally {
      setDeleting(false);
    }
  }

  const daftar = data ?? [];

  return (
    <Card>
      <CardHeader className="flex-row items-start justify-between gap-3 space-y-0">
        <div className="space-y-1.5">
          <CardTitle className="text-base">Kode Isian Alias</CardTitle>
          <CardDescription>
            Potongan teks berulang yang dapat dipakai kembali pada isi surat.
          </CardDescription>
        </div>
        <Button type="button" size="sm" onClick={() => bukaEditor()}>
          <Plus className="h-4 w-4" /> Tambah
        </Button>
      </CardHeader>
      <CardContent>
        <div className="rounded-lg border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Judul</TableHead>
                <TableHead>Alias</TableHead>
                <TableHead>Isi</TableHead>
                <TableHead className="w-24 text-right">Aksi</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {isLoading ? (
                <TableRow>
                  <TableCell colSpan={4} className="py-6 text-center text-sm text-muted-foreground">
                    Memuat…
                  </TableCell>
                </TableRow>
              ) : daftar.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={4} className="py-6 text-center text-sm text-muted-foreground">
                    Data tidak tersedia
                  </TableCell>
                </TableRow>
              ) : (
                daftar.map((row) => (
                  <TableRow key={row.id}>
                    <TableCell className="font-medium">{row.judul}</TableCell>
                    <TableCell className="font-mono text-xs">{row.alias}</TableCell>
                    <TableCell className="max-w-md truncate text-xs text-muted-foreground">
                      {row.isi}
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-1">
                        <Button
                          type="button"
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8"
                          onClick={() => bukaEditor(row)}
                        >
                          <Pencil className="h-4 w-4" />
                        </Button>
                        <Button
                          type="button"
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8"
                          onClick={() => setTarget(row)}
                        >
                          <Trash2 className="h-4 w-4 text-destructive" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>
      </CardContent>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>Kode Isian Alias</DialogTitle>
            <DialogDescription>
              {editing ? "Ubah kode isian alias." : "Tambah kode isian alias baru."}
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={simpan} className="space-y-4">
            <div className="space-y-1.5">
              <Label htmlFor="kode-isian-judul">Judul</Label>
              <Input
                id="kode-isian-judul"
                name="judul_kodeisian"
                required
                value={form.judul}
                onChange={(event) => setForm((c) => ({ ...c, judul: event.target.value }))}
              />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="kode-isian-alias">Alias</Label>
              <Input
                id="kode-isian-alias"
                name="alias_kodeisian"
                required
                value={form.alias}
                onChange={(event) => setForm((c) => ({ ...c, alias: event.target.value }))}
              />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="editor-kodeisian">Isi</Label>
              <Textarea
                id="editor-kodeisian"
                required
                rows={6}
                value={form.isi}
                onChange={(event) => setForm((c) => ({ ...c, isi: event.target.value }))}
              />
            </div>
            <DialogFooter>
              <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
                Batal
              </Button>
              <Button type="submit" disabled={saving}>
                {saving ? "Menyimpan…" : "Simpan"}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      <Dialog open={Boolean(target)} onOpenChange={(value) => !value && setTarget(null)}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Hapus Kode Isian</DialogTitle>
            <DialogDescription>
              Hapus <span className="font-medium">{target?.judul}</span> dari daftar kode
              isian alias?
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button type="button" variant="ghost" onClick={() => setTarget(null)}>
              Batal
            </Button>
            <Button type="button" variant="destructive" disabled={deleting} onClick={hapus}>
              {deleting ? "Menghapus…" : "Hapus"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Card>
  );
}