"use client";

import { useState, useTransition } from "react";
import {
  runPromptAction,
  generateMetaAction,
  pingProviderAction,
} from "./_actions";

export type ArticleOption = {
  id: string;
  title: string;
  slug: string;
  hasMeta: boolean;
};

type RunMeta = {
  model: string;
  latencyMs: number;
  promptTokens: number;
  completionTokens: number;
  totalTokens: number;
};

const PRESETS: Array<{
  label: string;
  system: string;
  user: string;
}> = [
  {
    label: "Tóm tắt",
    system:
      "Bạn là editor tài chính. Tóm tắt bài bằng 3 bullet, mỗi bullet ≤ 25 từ, tiếng Việt.",
    user: "Tóm tắt bài viết sau: <paste nội dung>",
  },
  {
    label: "Sinh ý tưởng tiêu đề",
    system: "Bạn là chuyên gia SEO. Sinh 5 tiêu đề thay thế, mỗi tiêu đề ≤ 60 ký tự, dùng tiếng Việt, tránh clickbait.",
    user: "Tiêu đề gốc: <paste tiêu đề>",
  },
  {
    label: "Outline",
    system:
      "Bạn là editor tài chính. Tạo outline 5 mục H2 và 1-2 H3 mỗi H2 cho bài về chủ đề người dùng đưa.",
    user: "Chủ đề: <paste chủ đề>",
  },
  {
    label: "Diễn giải đơn giản",
    system:
      "Bạn là biên tập viên giải thích khái niệm tài chính cho người không chuyên. Viết 2 đoạn ngắn, dễ hiểu, tiếng Việt.",
    user: "Khái niệm: <paste khái niệm>",
  },
];

export function ProviderPing() {
  const [pending, startTransition] = useTransition();
  const [result, setResult] = useState<{
    ok: boolean;
    msg: string;
  } | null>(null);

  function ping() {
    setResult(null);
    startTransition(async () => {
      const res = await pingProviderAction();
      if (res.ok) {
        setResult({
          ok: true,
          msg: `${res.model} → "${res.content}" (${res.latencyMs}ms)`,
        });
      } else {
        setResult({ ok: false, msg: res.error });
      }
    });
  }

  return (
    <div className="flex items-center gap-3">
      <button
        type="button"
        onClick={ping}
        disabled={pending}
        className="px-4 py-2 rounded-lg bg-bg-elevated border border-stroke-subtle text-sm hover:border-accent-primary disabled:opacity-50 transition"
      >
        {pending ? "Đang ping…" : "Ping provider"}
      </button>
      {result && (
        <span
          className={`text-sm ${result.ok ? "text-emerald-300" : "text-rose-300"}`}
        >
          {result.ok ? "✓" : "✗"} {result.msg}
        </span>
      )}
    </div>
  );
}

export function PromptStudio() {
  const [pending, startTransition] = useTransition();
  const [output, setOutput] = useState<string>("");
  const [error, setError] = useState<string | null>(null);
  const [meta, setMeta] = useState<RunMeta | null>(null);
  const [system, setSystem] = useState("");
  const [prompt, setPrompt] = useState("");
  const [copied, setCopied] = useState(false);

  function applyPreset(p: (typeof PRESETS)[number]) {
    setSystem(p.system);
    setPrompt(p.user);
  }

  function submit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    setOutput("");
    setMeta(null);
    const fd = new FormData(e.currentTarget);
    startTransition(async () => {
      const res = await runPromptAction(fd);
      if (!res.ok) {
        setError(res.error);
      } else {
        setOutput(res.output);
        setMeta(res.meta);
      }
    });
  }

  function copyOutput() {
    if (!output) return;
    navigator.clipboard.writeText(output).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    });
  }

  return (
    <form
      onSubmit={submit}
      className="rounded-xl border border-stroke-subtle bg-bg-elevated/40 p-5"
    >
      <h2 className="font-display font-semibold text-lg mb-3">Prompt Studio</h2>
      <p className="text-xs text-ink-muted mb-4">
        Viết prompt, gọi AI, lấy kết quả. Dùng preset bên dưới để bắt đầu nhanh.
      </p>

      <div className="flex flex-wrap gap-2 mb-4">
        {PRESETS.map((p) => (
          <button
            key={p.label}
            type="button"
            onClick={() => applyPreset(p)}
            className="text-xs px-3 py-1.5 rounded-full border border-stroke-subtle hover:border-accent-primary text-ink-secondary hover:text-ink-primary transition"
          >
            {p.label}
          </button>
        ))}
      </div>

      <div className="space-y-3">
        <label className="block text-xs">
          System prompt <span className="text-ink-muted/60">(role + style guide)</span>
          <textarea
            name="system"
            rows={2}
            value={system}
            onChange={(e) => setSystem(e.target.value)}
            className="mt-1 w-full px-3 py-2 rounded-lg bg-bg-elevated border border-stroke-subtle text-sm font-mono"
            placeholder="Bạn là editor tài chính..."
          />
        </label>
        <label className="block text-xs">
          User prompt *
          <textarea
            name="prompt"
            required
            rows={6}
            value={prompt}
            onChange={(e) => setPrompt(e.target.value)}
            className="mt-1 w-full px-3 py-2 rounded-lg bg-bg-elevated border border-stroke-subtle text-sm font-mono"
            placeholder="Viết yêu cầu của bạn..."
          />
        </label>
        <div className="grid grid-cols-2 gap-3">
          <label className="text-xs">
            Temperature
            <input
              name="temperature"
              type="number"
              step="0.1"
              min="0"
              max="2"
              defaultValue={0.6}
              className="mt-1 w-full px-3 py-2 rounded-lg bg-bg-elevated border border-stroke-subtle text-sm"
            />
          </label>
          <label className="text-xs">
            Max tokens
            <input
              name="maxTokens"
              type="number"
              min="50"
              max="4000"
              step="50"
              defaultValue={800}
              className="mt-1 w-full px-3 py-2 rounded-lg bg-bg-elevated border border-stroke-subtle text-sm"
            />
          </label>
        </div>
      </div>

      <div className="flex items-center justify-between mt-5">
        <span className="text-xs text-ink-muted">
          {meta
            ? `${meta.model} · ${meta.totalTokens} tokens · ${meta.latencyMs}ms`
            : "Chưa chạy"}
        </span>
        <button
          type="submit"
          disabled={pending}
          className="px-5 py-2 rounded-lg bg-accent-primary text-white text-sm font-medium hover:bg-accent-primary/90 disabled:opacity-50 transition"
        >
          {pending ? "Đang gọi AI…" : "Gọi AI"}
        </button>
      </div>

      {error && (
        <div className="mt-4 rounded-lg border border-rose-500/40 bg-rose-500/10 px-3 py-2 text-sm text-rose-300 whitespace-pre-wrap">
          {error}
        </div>
      )}
      {output && (
        <div className="mt-4 rounded-lg border border-stroke-subtle bg-bg-overlay/40 p-4 relative">
          <button
            type="button"
            onClick={copyOutput}
            className="absolute top-2 right-2 text-xs px-2 py-1 rounded border border-stroke-subtle hover:border-accent-primary"
          >
            {copied ? "Đã copy ✓" : "Copy"}
          </button>
          <pre className="text-sm whitespace-pre-wrap font-mono">{output}</pre>
        </div>
      )}
    </form>
  );
}

export function MetaGenerator({ articles }: { articles: ArticleOption[] }) {
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  function submit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    setSuccess(null);
    const fd = new FormData(e.currentTarget);
    const articleId = String(fd.get("articleId") ?? "");
    if (!articleId) {
      setError("Chọn 1 bài.");
      return;
    }
    startTransition(async () => {
      const res = await generateMetaAction(articleId);
      if (!res.ok) setError(res.error);
      else
        setSuccess(
          `✓ Đã sinh meta. Title: "${res.metaTitle}". Desc: "${res.metaDesc.slice(0, 80)}…" (${res.meta.latencyMs}ms, ${res.meta.tokens} tokens)`,
        );
    });
  }

  return (
    <form
      onSubmit={submit}
      className="rounded-xl border border-stroke-subtle bg-bg-elevated/40 p-5"
    >
      <h2 className="font-display font-semibold text-lg mb-1">Sinh meta tự động</h2>
      <p className="text-xs text-ink-muted mb-4">
        Chọn bài, AI sẽ sinh meta title + description, ghi đè vào DB.{" "}
        {articles.filter((a) => !a.hasMeta).length > 0 && (
          <span className="text-amber-300">
            ({articles.filter((a) => !a.hasMeta).length} bài đang thiếu meta)
          </span>
        )}
      </p>
      <div className="flex gap-3">
        <select
          name="articleId"
          className="flex-1 px-3 py-2 rounded-lg bg-bg-elevated border border-stroke-subtle text-sm"
          required
        >
          <option value="">— Chọn bài —</option>
          <optgroup label="Thiếu meta (ưu tiên)">
            {articles
              .filter((a) => !a.hasMeta)
              .map((a) => (
                <option key={a.id} value={a.id}>
                  {a.title}
                </option>
              ))}
          </optgroup>
          <optgroup label="Đã có meta (sẽ ghi đè)">
            {articles
              .filter((a) => a.hasMeta)
              .map((a) => (
                <option key={a.id} value={a.id}>
                  {a.title}
                </option>
              ))}
          </optgroup>
        </select>
        <button
          type="submit"
          disabled={pending}
          className="px-5 py-2 rounded-lg bg-accent-primary text-white text-sm font-medium hover:bg-accent-primary/90 disabled:opacity-50 transition whitespace-nowrap"
        >
          {pending ? "Đang sinh…" : "Sinh meta"}
        </button>
      </div>
      {error && (
        <div className="mt-3 rounded-lg border border-rose-500/40 bg-rose-500/10 px-3 py-2 text-sm text-rose-300">
          {error}
        </div>
      )}
      {success && (
        <div className="mt-3 rounded-lg border border-emerald-500/40 bg-emerald-500/10 px-3 py-2 text-sm text-emerald-300">
          {success}
        </div>
      )}
    </form>
  );
}