"use client";

import { useState } from "react";

import { Spinner } from "@/components/common/Spinner";

type Props = {
  /** ID-of <textarea> ili name selector koji će biti popunjen kada se klikne "Primeni". */
  targetSelector?: string;
  category?: string;
  locale?: string;
  /** Callback kada korisnik primeni rezultat. */
  onApply?: (description: string) => void;
};

/**
 * Plug-in dugme „✨ Generiši opis pomoću AI" — otvara modal sa par polja,
 * zove `/api/ai/listing-copy` i puni ciljano polje opisa nakon "Primeni".
 */
export function AiCopyAssist({ targetSelector, category, locale, onApply }: Props) {
  const [open, setOpen] = useState(false);
  const [bullets, setBullets] = useState("");
  const [tone, setTone] = useState<"profesionalno" | "prijateljski" | "premium">("profesionalno");
  const [length, setLength] = useState<"kratak" | "srednji" | "dug">("srednji");
  const [result, setResult] = useState("");
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");

  async function generate() {
    setBusy(true);
    setErr("");
    try {
      const res = await fetch("/api/ai/listing-copy", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ bullets, tone, length, category, locale }),
      });
      const data = (await res.json()) as { description?: string; error?: string };
      if (!res.ok) {
        setErr(data.error ?? "Greška.");
      } else {
        setResult(data.description ?? "");
      }
    } catch {
      setErr("Greška u komunikaciji sa serverom.");
    } finally {
      setBusy(false);
    }
  }

  function apply() {
    if (onApply) onApply(result);
    if (targetSelector) {
      const el = document.querySelector<HTMLTextAreaElement | HTMLInputElement>(targetSelector);
      if (el) {
        el.value = result;
        el.dispatchEvent(new Event("input", { bubbles: true }));
        el.dispatchEvent(new Event("change", { bubbles: true }));
      }
    }
    setOpen(false);
  }

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="inline-flex items-center gap-2 rounded-full border border-primary/40 bg-primary/5 px-3 py-1.5 text-xs font-semibold text-primary transition hover:bg-primary hover:text-white"
      >
        <span aria-hidden>✨</span> Generiši opis pomoću AI
      </button>

      {open && (
        <div
          role="dialog"
          aria-modal="true"
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
          onClick={(e) => {
            if (e.target === e.currentTarget) setOpen(false);
          }}
        >
          <div className="w-full max-w-xl rounded-3xl bg-white p-6 shadow-2xl">
            <h2 className="font-display text-xl font-semibold">AI opis</h2>
            <p className="mt-1 text-sm text-muted-foreground">
              Unesi par tačaka šta tvoja firma radi — AI vraća SEO-friendly opis.
            </p>

            <label className="mt-4 block">
              <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                Šta tvoja firma radi? Par tačaka
              </span>
              <textarea
                rows={4}
                value={bullets}
                onChange={(e) => setBullets(e.target.value)}
                placeholder="• servisiramo kočnice na svim markama&#10;• 15 godina iskustva&#10;• Novi Sad, radimo subotom"
                className="mt-1 w-full rounded-xl border border-border bg-white px-3 py-2 text-sm"
              />
            </label>

            <div className="mt-3 grid gap-3 sm:grid-cols-2">
              <label className="block">
                <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                  Ton
                </span>
                <select
                  value={tone}
                  onChange={(e) => setTone(e.target.value as typeof tone)}
                  className="mt-1 w-full rounded-xl border border-border bg-white px-3 py-2 text-sm"
                >
                  <option value="profesionalno">Profesionalno</option>
                  <option value="prijateljski">Prijateljski</option>
                  <option value="premium">Premium</option>
                </select>
              </label>
              <label className="block">
                <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                  Dužina
                </span>
                <select
                  value={length}
                  onChange={(e) => setLength(e.target.value as typeof length)}
                  className="mt-1 w-full rounded-xl border border-border bg-white px-3 py-2 text-sm"
                >
                  <option value="kratak">Kratak</option>
                  <option value="srednji">Srednji</option>
                  <option value="dug">Dug</option>
                </select>
              </label>
            </div>

            {err && (
              <p className="mt-3 rounded-xl bg-rose-50 px-3 py-2 text-sm text-rose-700">{err}</p>
            )}

            {result && (
              <label className="mt-4 block">
                <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                  Rezultat — slobodno doteraj pre nego primeniš
                </span>
                <textarea
                  rows={8}
                  value={result}
                  onChange={(e) => setResult(e.target.value)}
                  className="mt-1 w-full rounded-xl border border-border bg-white px-3 py-2 text-sm"
                />
              </label>
            )}

            <div className="mt-5 flex flex-wrap items-center justify-end gap-2">
              <button
                type="button"
                onClick={() => setOpen(false)}
                className="rounded-full border border-border px-4 py-2 text-sm font-semibold"
              >
                Zatvori
              </button>
              <button
                type="button"
                onClick={generate}
                disabled={busy || bullets.length < 5}
                className="inline-flex items-center justify-center gap-2 rounded-full border border-primary px-4 py-2 text-sm font-semibold text-primary disabled:opacity-50"
              >
                {busy ? <Spinner className="h-4 w-4" /> : null}
                {busy ? "Generišem…" : result ? "Generiši ponovo" : "Generiši"}
              </button>
              {result && (
                <button
                  type="button"
                  onClick={apply}
                  className="primary-button rounded-full px-5 py-2 text-sm"
                >
                  Primeni
                </button>
              )}
            </div>
          </div>
        </div>
      )}
    </>
  );
}