"use client";

import { useState } from "react";

interface Props {
  toolId: number;
  slug: string;
  placeholder: string;
  buttonLabel?: string;
}

interface Result {
  ok: boolean;
  items: string[];
  providerName?: string;
  demo?: boolean;
  error?: string;
  remaining?: number;
  limit?: number;
}

export function ToolRunner({ toolId, slug, placeholder, buttonLabel = "Generate" }: Props) {
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<Result | null>(null);
  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);

  async function run() {
    if (!input.trim() || loading) return;
    setLoading(true);
    setResult(null);
    try {
      const res = await fetch("/api/generate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ toolId, slug, input }),
      });
      const json = await res.json();
      setResult(json);
    } catch {
      setResult({
        ok: false,
        items: [],
        error: "Something went wrong. Please try again later.",
      });
    } finally {
      setLoading(false);
    }
  }

  async function copy(text: string, index: number) {
    try {
      await navigator.clipboard.writeText(text);
      setCopiedIndex(index);
      setTimeout(() => setCopiedIndex(null), 1500);
    } catch {
      /* ignore */
    }
  }

  const copyAll = async () => {
    if (!result) return;
    try {
      await navigator.clipboard.writeText(result.items.join("\n\n"));
      setCopiedIndex(-1);
      setTimeout(() => setCopiedIndex(null), 1500);
    } catch {
      /* ignore */
    }
  };

  return (
    <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
      <div className="border-b border-slate-100 bg-gradient-to-r from-indigo-50 to-violet-50 p-4 sm:p-5">
        <label className="mb-1.5 block text-sm font-medium text-slate-700">Your topic</label>
        <textarea
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) run();
          }}
          rows={3}
          placeholder={placeholder}
          className="w-full resize-none rounded-lg border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200"
        />
        <div className="mt-2 flex flex-wrap items-center justify-between gap-2">
          <span className="text-xs text-slate-400">{input.length} characters</span>
          <div className="flex gap-2">
            {result && result.items.length > 0 && (
              <button
                onClick={() => setResult(null)}
                className="rounded-lg border border-slate-300 px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-50"
              >
                Clear
              </button>
            )}
            <button
              onClick={run}
              disabled={loading || !input.trim()}
              className="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-1.5 text-sm font-semibold text-white transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
            >
              {loading && <span className="spinner" />}
              {loading ? "Generating…" : buttonLabel}
            </button>
          </div>
        </div>
        {result?.remaining !== undefined && (
          <p className="mt-2 text-xs text-slate-400">
            {result.remaining} of {result.limit} requests remaining this hour
          </p>
        )}
      </div>

      <div className="p-4 sm:p-5">
        {loading && (
          <div className="flex flex-col items-center gap-3 py-10 text-center">
            <span className="spinner !border-indigo-200 !border-t-indigo-600 !w-8 !h-8" />
            <p className="text-sm text-slate-500">Generating your results…</p>
          </div>
        )}

        {!loading && result && !result.ok && (
          <div className="rounded-xl bg-red-50 px-4 py-4 text-center">
            <p className="text-sm font-medium text-red-700">
              {result.error || "The AI service is temporarily unavailable. Please try again."}
            </p>
          </div>
        )}

        {!loading && result?.ok && result.items.length > 0 && (
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <p className="text-sm font-semibold text-slate-700">
                {result.items.length} result{result.items.length > 1 ? "s" : ""}
              </p>
              <div className="flex gap-2">
                <button
                  onClick={copyAll}
                  className="rounded-lg border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-600 hover:bg-slate-50"
                >
                  {copiedIndex === -1 ? "Copied ✓" : "Copy All"}
                </button>
                <button
                  onClick={run}
                  className="rounded-lg border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-600 hover:bg-slate-50"
                >
                  Regenerate
                </button>
              </div>
            </div>

            {result.items.map((item, i) => (
              <div
                key={i}
                className="group flex items-start gap-3 rounded-xl border border-slate-200 p-3.5 transition hover:border-indigo-200 hover:bg-indigo-50/40"
              >
                <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-xs font-bold text-indigo-700">
                  {i + 1}
                </span>
                <p className="flex-1 text-sm leading-relaxed text-slate-800">{item}</p>
                <button
                  onClick={() => copy(item, i)}
                  className="shrink-0 rounded-lg border border-slate-200 px-2.5 py-1 text-xs font-medium text-slate-500 opacity-100 transition hover:bg-white hover:text-slate-800 sm:opacity-0 sm:group-hover:opacity-100"
                >
                  {copiedIndex === i ? "Copied ✓" : "Copy"}
                </button>
              </div>
            ))}

            {result.demo && (
              <p className="rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700">
                Demo output — connect an AI provider in the admin panel for live results.
              </p>
            )}
          </div>
        )}

        {!loading && result?.ok && result.items.length === 0 && (
          <p className="py-8 text-center text-sm text-slate-500">
            No results returned. Try a different topic.
          </p>
        )}

        {!loading && !result && (
          <div className="flex items-center justify-center gap-3 py-8 text-center text-sm text-slate-400">
            <span className="text-xl">✨</span> Enter a topic and generate ideas above.
          </div>
        )}
      </div>
    </div>
  );
}