"use client";

import { useCallback, useEffect, useState } from "react";

type AiSettings = {
  provider: string;
  model: string;
  available: boolean;
  fallbackEnabled: boolean;
  note: string;
  envConfigured: { openai: boolean; gemini: boolean; anthropic: boolean };
  dbOverrides?: {
    aiProvider?: string;
    openaiModel?: string;
    geminiModel?: string;
    anthropicModel?: string;
  };
};

type PreviewResult = {
  intent?: string;
  sentiment?: string;
  summary?: string;
  confidence?: number;
  provider?: string;
  model?: string;
  error?: string;
};

const PROVIDERS = ["fallback", "openai", "gemini", "anthropic"] as const;

export function AiSettingsClient() {
  const [settings, setSettings] = useState<AiSettings | null>(null);
  const [provider, setProvider] = useState("fallback");
  const [model, setModel] = useState("");
  const [subject, setSubject] = useState("");
  const [bodyText, setBodyText] = useState("");
  const [preview, setPreview] = useState<PreviewResult | null>(null);
  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");

  const load = useCallback(async () => {
    setLoading(true);
    const res = await fetch("/api/settings/ai");
    const json = (await res.json()) as { data?: AiSettings; error?: string };
    if (!res.ok) {
      setError(json.error ?? "Failed to load");
    } else if (json.data) {
      setSettings(json.data);
      setProvider(json.data.provider);
      setModel(json.data.model);
    }
    setLoading(false);
  }, []);

  useEffect(() => {
    const timeout = window.setTimeout(() => {
      void load();
    }, 0);
    return () => window.clearTimeout(timeout);
  }, [load]);

  async function save(e: React.FormEvent) {
    e.preventDefault();
    setError("");
    setMessage("");
    const payload: Record<string, string> = { aiProvider: provider };
    if (provider === "openai") payload.openaiModel = model;
    if (provider === "gemini") payload.geminiModel = model;
    if (provider === "anthropic") payload.anthropicModel = model;

    const res = await fetch("/api/settings/ai", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
    const json = (await res.json()) as { error?: string };
    if (!res.ok) {
      setError(json.error ?? "Save failed");
      return;
    }
    setMessage("AI settings saved");
    void load();
  }

  async function runTest() {
    setPreview(null);
    const res = await fetch("/api/settings/ai", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ subject, bodyText }),
    });
    const json = (await res.json()) as { data?: PreviewResult; error?: string };
    if (!res.ok) {
      setPreview({ error: json.error });
      return;
    }
    setPreview(json.data ?? null);
  }

  if (loading && !settings) {
    return <p className="text-sm text-neutral-500">جاري التحميل...</p>;
  }

  return (
    <div className="space-y-6">
      <header>
        <h1 className="text-xl font-bold">إعدادات الذكاء الاصطناعي</h1>
        <p className="text-sm text-neutral-500">AI — provider &amp; model (keys via env only)</p>
      </header>

      <section className="rounded border bg-white p-4">
        <p className="text-sm font-medium text-amber-800">
          Configured via Environment Variables — API keys are not stored in the database.
        </p>
        {settings ? (
          <dl className="mt-3 grid gap-2 text-sm md:grid-cols-2">
            <div>
              <dt className="text-neutral-500">Status</dt>
              <dd>{settings.available ? "Available" : "Unavailable / fallback"}</dd>
            </div>
            <div>
              <dt className="text-neutral-500">Keys</dt>
              <dd>
                OpenAI: {settings.envConfigured.openai ? "yes" : "no"} · Gemini:{" "}
                {settings.envConfigured.gemini ? "yes" : "no"} · Anthropic:{" "}
                {settings.envConfigured.anthropic ? "yes" : "no"}
              </dd>
            </div>
          </dl>
        ) : null}
      </section>

      {error ? <p className="text-sm text-red-600">{error}</p> : null}
      {message ? <p className="text-sm text-green-700">{message}</p> : null}

      <form onSubmit={(e) => void save(e)} className="space-y-3 rounded border bg-white p-4">
        <label className="block text-sm">
          Provider
          <select
            className="mt-1 w-full rounded border px-3 py-2"
            value={provider}
            onChange={(e) => setProvider(e.target.value)}
          >
            {PROVIDERS.map((p) => (
              <option key={p} value={p}>
                {p}
              </option>
            ))}
          </select>
        </label>
        <label className="block text-sm">
          Model
          <input
            className="mt-1 w-full rounded border px-3 py-2"
            value={model}
            onChange={(e) => setModel(e.target.value)}
          />
        </label>
        <button type="submit" className="rounded bg-[var(--accent)] px-3 py-2 text-sm text-white">
          حفظ
        </button>
      </form>

      <section className="rounded border bg-white p-4 space-y-3">
        <h2 className="font-medium">Test classification</h2>
        <input
          className="w-full rounded border px-3 py-2 text-sm"
          placeholder="Subject"
          value={subject}
          onChange={(e) => setSubject(e.target.value)}
        />
        <textarea
          className="w-full rounded border px-3 py-2 text-sm"
          rows={4}
          placeholder="Body text"
          value={bodyText}
          onChange={(e) => setBodyText(e.target.value)}
        />
        <button
          type="button"
          onClick={() => void runTest()}
          className="rounded border px-3 py-1 text-sm"
        >
          Run test
        </button>
        {preview ? (
          <pre className="overflow-auto rounded bg-neutral-50 p-3 text-xs">
            {JSON.stringify(preview, null, 2)}
          </pre>
        ) : null}
      </section>
    </div>
  );
}