"use client";

import * as React from "react";
import { useActionState } from "react";
import { Plus, Settings2, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  saveCannedResponsesAction,
  type AdminTicketActionState,
} from "@/lib/actions/admin-tickets";
import { adminTexts } from "@/lib/i18n/admin";
import { adminTicketsTexts as tx } from "@/lib/i18n/admin-tickets";
import type { CannedResponse } from "./types";

/**
 * Small ADMIN-only manager for the "tickets:canned" setting. The whole list is
 * submitted as one JSON field so add/remove needs no per-row action.
 */
export function CannedManagerDialog({ items }: { items: CannedResponse[] }) {
  const [open, setOpen] = React.useState(false);
  const [draft, setDraft] = React.useState<CannedResponse[]>(items);
  const [title, setTitle] = React.useState("");
  const [body, setBody] = React.useState("");
  const [state, formAction, pending] = useActionState<
    AdminTicketActionState,
    FormData
  >(saveCannedResponsesAction, null);

  React.useEffect(() => {
    if (open) setDraft(items);
  }, [open, items]);

  const lastState = React.useRef<AdminTicketActionState>(null);
  React.useEffect(() => {
    if (state === lastState.current) return;
    lastState.current = state;
    if (!state) return;
    if (state.ok) {
      toast.success(tx.canned.saved);
      setOpen(false);
    } else {
      toast.error(state.error);
    }
  }, [state]);

  function add() {
    const nextTitle = title.trim();
    const nextBody = body.trim();
    if (!nextTitle || !nextBody) {
      toast.error(tx.errors.canned);
      return;
    }
    setDraft((prev) => [...prev, { title: nextTitle, body: nextBody }]);
    setTitle("");
    setBody("");
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button type="button" variant="ghost" size="sm" className="text-muted-foreground">
          <Settings2 className="size-3.5" />
          {tx.reply.cannedManage}
        </Button>
      </DialogTrigger>

      <DialogContent className="sm:max-w-2xl">
        <DialogHeader>
          <DialogTitle className="font-display text-base">{tx.canned.title}</DialogTitle>
          <DialogDescription className="text-sm">{tx.canned.hint}</DialogDescription>
        </DialogHeader>

        <div className="max-h-64 space-y-2 overflow-y-auto pr-1">
          {draft.length === 0 ? (
            <p className="py-4 text-center text-sm text-muted-foreground">
              {tx.reply.cannedEmpty}
            </p>
          ) : (
            draft.map((item, index) => (
              <div
                key={`${item.title}-${index}`}
                className="flex items-start gap-2 rounded-lg border bg-card px-2.5 py-2"
              >
                <div className="min-w-0 flex-1">
                  <p className="truncate text-sm font-medium">{item.title}</p>
                  <p className="line-clamp-2 text-xs text-muted-foreground">
                    {item.body}
                  </p>
                </div>
                <Button
                  type="button"
                  variant="ghost"
                  size="icon-sm"
                  aria-label={tx.canned.remove}
                  onClick={() =>
                    setDraft((prev) => prev.filter((_, i) => i !== index))
                  }
                >
                  <Trash2 className="size-3.5" />
                </Button>
              </div>
            ))
          )}
        </div>

        <div className="space-y-2 rounded-lg border border-dashed p-2.5">
          <p className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
            {tx.canned.addTitle}
          </p>
          <div className="space-y-1.5">
            <Label htmlFor="canned-title" className="text-xs">
              {tx.canned.titleLabel}
            </Label>
            <Input
              id="canned-title"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder={tx.canned.titlePlaceholder}
              className="h-8 text-sm"
            />
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="canned-body" className="text-xs">
              {tx.canned.bodyLabel}
            </Label>
            <Textarea
              id="canned-body"
              value={body}
              onChange={(e) => setBody(e.target.value)}
              rows={3}
              placeholder={tx.canned.bodyPlaceholder}
              className="text-sm"
            />
          </div>
          <Button type="button" variant="outline" size="sm" onClick={add}>
            <Plus className="size-3.5" />
            {tx.canned.add}
          </Button>
        </div>

        <form action={formAction}>
          <input type="hidden" name="items" value={JSON.stringify(draft)} />
          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              size="lg"
              onClick={() => setOpen(false)}
            >
              {adminTexts.common.close}
            </Button>
            <Button type="submit" size="lg" disabled={pending}>
              {pending ? "…" : tx.canned.save}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}

export default CannedManagerDialog;