"use client";

import { useState } from "react";

import { Plus } from "lucide-react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { dashboardCsrfHeader } from "@/lib/csrf.client";

type CreatedOption = {
  value: string;
  label: string;
};

type Props = {
  onCreated: (option: CreatedOption) => void;
};

export function QuickAddCommodityNameButton({ onCreated }: Props) {
  const [open, setOpen] = useState(false);
  const [name, setName] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);

  async function handleSave() {
    const trimmed = name.trim();
    if (!trimmed) {
      setError("Enter a commodity name.");
      return;
    }

    setSaving(true);
    setError(null);

    try {
      const response = await fetch("/dashboard/master/commodity-ticket/insert-parent", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          ...dashboardCsrfHeader(),
        },
        body: JSON.stringify({ name: trimmed }),
      });
      const data = (await response.json().catch(() => null)) as {
        status?: string;
        message?: string;
        data?: { value?: string; label?: string; id?: number; name?: string };
      } | null;

      if (!response.ok || data?.status !== "success" || !data.data?.value) {
        const message = data?.message ?? "Commodity name could not be created.";
        setError(message);
        return;
      }

      onCreated({
        value: String(data.data.value),
        label: data.data.label ?? data.data.name ?? trimmed,
      });
      toast.success("Commodity name created");
      setName("");
      setOpen(false);
    } catch {
      setError("Commodity name could not be created.");
    } finally {
      setSaving(false);
    }
  }

  return (
    <Popover
      open={open}
      onOpenChange={(next) => {
        setOpen(next);
        if (!next) {
          setError(null);
          setName("");
        }
      }}
    >
      <PopoverTrigger asChild>
        <Button
          type="button"
          variant="outline"
          size="icon-xs"
          className="text-primary"
          aria-label="Add commodity name"
          title="Add commodity name"
        >
          <Plus className="size-3.5" />
        </Button>
      </PopoverTrigger>
      <PopoverContent align="end" className="w-80">
        <div className="flex gap-2">
          <Input
            value={name}
            onChange={(event) => setName(event.target.value)}
            placeholder="Enter Your title"
            disabled={saving}
            onKeyDown={(event) => {
              if (event.key === "Enter") {
                event.preventDefault();
                void handleSave();
              }
            }}
          />
          <Button type="button" size="sm" disabled={saving} onClick={() => void handleSave()}>
            {saving ? "Saving…" : "Save"}
          </Button>
        </div>
        {error ? <p className="text-destructive text-xs">{error}</p> : null}
      </PopoverContent>
    </Popover>
  );
}