"use client";

/**
 * فرم تنظیمات هوش مصنوعی: انتخاب سرویس‌دهنده (Claude یا هر سرویس سازگار با OpenAI)، آدرس API، مدل،
 * کلید API (فقط نوشتنی)، دستیار AI Beauty، تعداد پیام مهمان، و ربات‌های هوش مصنوعی (GEO).
 */
import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import { saveAiSettingsAction, testAiConnectionAction } from "@/server/admin/ai";

interface Preset {
  id: string;
  provider: "anthropic" | "openai";
  label: string;
  baseUrl: string;
  models: readonly string[];
}

interface Props {
  initial: {
    enabled: boolean;
    chatEnabled: boolean;
    preset: string;
    model: string;
    baseUrl: string;
    effort: "low" | "medium" | "high";
    assistantName: string;
    instructions: string;
    guestMessages: number;
    allowAiCrawlers: boolean;
  };
  keyLast4?: string;
  envKey: boolean;
  presets: Preset[];
}

const Toggle = ({ checked, onChange, label, hint }: { checked: boolean; onChange: (v: boolean) => void; label: string; hint?: string }) => (
  <label className="flex items-start gap-3">
    <input type="checkbox" className="mt-1 size-4 accent-ink" checked={checked} onChange={(e) => onChange(e.target.checked)} />
    <span>
      <span className="block text-sm font-medium">{label}</span>
      {hint && <span className="block text-xs leading-5 text-muted">{hint}</span>}
    </span>
  </label>
);

export function AiSettingsForm({ initial, keyLast4, envKey, presets }: Props) {
  const router = useRouter();
  const [f, setF] = useState(initial);
  const [apiKey, setApiKey] = useState("");
  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
  const [pending, start] = useTransition();
  const [testing, setTesting] = useState(false);
  const set = <K extends keyof typeof f>(k: K, v: (typeof f)[K]) => setF((p) => ({ ...p, [k]: v }));
  const preset = presets.find((p) => p.id === f.preset) ?? presets[0];
  const isClaude = preset.provider === "anthropic";

  function choosePreset(id: string) {
    const p = presets.find((x) => x.id === id)!;
    setF((prev) => ({
      ...prev,
      preset: id,
      baseUrl: p.provider === "anthropic" ? "" : p.baseUrl || (prev.preset === "custom" ? prev.baseUrl : ""),
      model: p.models[0] ?? (prev.preset === id ? prev.model : ""),
    }));
  }

  function save(removeKey = false) {
    setMsg(null);
    start(async () => {
      const res = await saveAiSettingsAction({ ...f, apiKey: apiKey || undefined, removeKey });
      setMsg(res.ok ? { ok: true, text: removeKey ? "کلید حذف شد" : "تنظیمات ذخیره شد" } : { ok: false, text: res.error });
      if (res.ok) {
        setApiKey("");
        router.refresh();
      }
    });
  }

  async function test() {
    setTesting(true);
    setMsg(null);
    const res = await testAiConnectionAction().catch(() => ({ ok: false as const, error: "ارتباط با سرور قطع شد" }));
    setTesting(false);
    setMsg(res.ok ? { ok: true, text: `اتصال برقرار است (${res.model}): «${res.reply}»` } : { ok: false, text: res.error });
  }

  return (
    <div className="grid gap-4 lg:grid-cols-2">
      <section className="space-y-4 rounded-2xl bg-paper p-5">
        <h2 className="text-sm font-bold">سرویس هوش مصنوعی و کلید API</h2>
        <Toggle checked={f.enabled} onChange={(v) => set("enabled", v)} label="هوش مصنوعی فعال باشد" hint="دستیار AI Beauty و پیشنهاد سئو در مجله از این اتصال استفاده می‌کنند" />
        <label className="block">
          <span className="label">سرویس‌دهنده</span>
          <select className="field h-10" value={f.preset} onChange={(e) => choosePreset(e.target.value)}>
            {presets.map((p) => <option key={p.id} value={p.id}>{p.label}</option>)}
          </select>
          {!isClaude && (
            <span className="mt-1 block text-[11px] leading-5 text-muted">
              هر سرویسی که API «سازگار با OpenAI» دارد کار می‌کند؛ از جمله سرویس‌های ایرانی که روی سرور داخل ایران هم در دسترس‌اند. آدرس API، نام مدل و کلید را از پنل همان سرویس بگیرید.
            </span>
          )}
        </label>
        <label className="block">
          <span className="label">آدرس API {isClaude ? "(اختیاری)" : ""}</span>
          <input
            className="field h-10"
            dir="ltr"
            placeholder={isClaude ? "خالی = api.anthropic.com" : "https://…/v1"}
            value={f.baseUrl}
            onChange={(e) => set("baseUrl", e.target.value)}
          />
        </label>
        <label className="block">
          <span className="label">نام مدل</span>
          <input className="field h-10" dir="ltr" list="ai-models" placeholder="نام مدل از پنل سرویس‌دهنده" value={f.model} onChange={(e) => set("model", e.target.value)} />
          <datalist id="ai-models">{preset.models.map((m) => <option key={m} value={m} />)}</datalist>
        </label>
        <label className="block">
          <span className="label">کلید API</span>
          <input
            className="field h-10"
            dir="ltr"
            type="password"
            autoComplete="off"
            placeholder={keyLast4 ? `•••• ${keyLast4} (برای تعویض، کلید جدید را وارد کنید)` : envKey ? "از متغیر محیطی سرور استفاده می‌شود" : "کلید API سرویس"}
            value={apiKey}
            onChange={(e) => setApiKey(e.target.value)}
          />
          <span className="mt-1 block text-[11px] leading-5 text-muted">کلید رمزگذاری‌شده در دیتابیس ذخیره می‌شود و دیگر نمایش داده نمی‌شود.</span>
        </label>
        {keyLast4 && (
          <button type="button" className="text-xs text-muted underline" disabled={pending} onClick={() => confirm("کلید API حذف شود؟") && save(true)}>
            حذف کلید ذخیره‌شده
          </button>
        )}
        {isClaude && (
          <label className="block">
            <span className="label">عمق پاسخ در گفت‌وگو</span>
            <select className="field h-10" value={f.effort} onChange={(e) => set("effort", e.target.value as typeof f.effort)}>
              <option value="low">کم (سریع‌تر و ارزان‌تر؛ پیشنهادی برای گفت‌وگو)</option>
              <option value="medium">متوسط</option>
              <option value="high">زیاد (دقیق‌تر و کندتر)</option>
            </select>
          </label>
        )}
      </section>

      <section className="space-y-4 rounded-2xl bg-paper p-5">
        <h2 className="text-sm font-bold">دستیار AI Beauty در سایت</h2>
        <Toggle checked={f.chatEnabled} onChange={(v) => set("chatEnabled", v)} label="گفت‌وگو با هوش مصنوعی در پنل AI Beauty" hint="اگر خاموش باشد، پنل فقط پیشنهادهای آماده و جستجو را نشان می‌دهد" />
        <label className="block">
          <span className="label">تعداد پیام بدون ثبت‌نام</span>
          <input className="field h-10 max-w-32" type="number" min={0} max={20} value={f.guestMessages} onChange={(e) => set("guestMessages", Number(e.target.value))} />
          <span className="mt-1 block text-[11px] leading-5 text-muted">بعد از این تعداد، دستیار می‌گوید برای ادامه ثبت‌نام کنید (با شماره موبایل) و بعد از ورود، گفت‌وگو از همان‌جا ادامه پیدا می‌کند. ۰ = از اول ثبت‌نام لازم است.</span>
        </label>
        <label className="block">
          <span className="label">نام دستیار</span>
          <input className="field h-10" maxLength={40} value={f.assistantName} onChange={(e) => set("assistantName", e.target.value)} />
        </label>
        <label className="block">
          <span className="label">دستورالعمل اضافه (لحن، تخفیف‌های جاری، محدودیت‌ها)</span>
          <textarea className="field h-28 py-2" maxLength={2000} placeholder="مثلاً: صمیمی و کوتاه جواب بده. این هفته ارسال رایگان برای همه سفارش‌هاست." value={f.instructions} onChange={(e) => set("instructions", e.target.value)} />
        </label>
        <h2 className="pt-2 text-sm font-bold">GEO (موتورهای پاسخ هوش مصنوعی)</h2>
        <Toggle
          checked={f.allowAiCrawlers}
          onChange={(v) => set("allowAiCrawlers", v)}
          label="اجازه خواندن سایت به ربات‌های هوش مصنوعی"
          hint="GPTBot، ClaudeBot، PerplexityBot، Google-Extended و… — لازم است تا محصولات و مقاله‌ها در پاسخ ChatGPT، Claude، Perplexity و Gemini دیده شوند"
        />
      </section>

      <div className="flex flex-wrap items-center gap-3 lg:col-span-2">
        <button type="button" className="btn-primary h-11 px-6" disabled={pending} onClick={() => save()}>{pending ? "در حال ذخیره…" : "ذخیره تنظیمات"}</button>
        <button type="button" className="btn-outline h-11 px-6" disabled={testing} onClick={test}>{testing ? "در حال تست…" : "تست اتصال"}</button>
        {msg && <p role="status" className={`text-sm ${msg.ok ? "" : "font-medium"}`}>{msg.ok ? "✓" : "⚠"} {msg.text}</p>}
      </div>
    </div>
  );
}