ai-rpg/frontend/src/pages/AdminPanelPage.tsx

import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { adminApi } from "@/api";
import type { LlmLog, SettingsOut } from "@/types";
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import { Card, CardBody, CardHeader } from "@/components/ui/Card";
import { Save, ArrowLeft, Activity, Users, Zap, Ban, CheckCircle2, Terminal, Wrench } from "lucide-react";

export function AdminPanelPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [settings, setSettings] = useState<SettingsOut | null>(null);
  const [values, setValues] = useState<Record<string, any>>({});
  const [logs, setLogs] = useState<LlmLog[]>([]);
  const [users, setUsers] = useState<any[]>([]);
  const [tab, setTab] = useState<"settings" | "logs" | "users">("settings");
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState("");
  const [embeddingTest, setEmbeddingTest] = useState<null | { ok: boolean; msg: string }>(null);
  const [testingEmbeddings, setTestingEmbeddings] = useState(false);
  const [llmTest, setLlmTest] = useState<null | { ok: boolean; msg: string }>(null);
  const [testingLlm, setTestingLlm] = useState(false);
  const [llmToolsTest, setLlmToolsTest] = useState<null | { ok: boolean; msg: string }>(null);
  const [testingLlmTools, setTestingLlmTools] = useState(false);
  const [userActionError, setUserActionError] = useState("");

  useEffect(() => {
    (async () => {
      try {
        const s = await adminApi.getSettings();
        setSettings(s);
        setValues(s.values);
        const l = await adminApi.listLlmLogs(50);
        setLogs(l);
        const u = await adminApi.listUsers();
        setUsers(u);
      } catch (err: any) {
        setError(err.response?.data?.detail || t("errors.unknown"));
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  const save = async () => {
    setError("");
    setSaving(true);
    setSaved(false);
    try {
      // Strip masked api_key unless user typed a new one
      const payload: Record<string, any> = { ...values };
      for (const k of ["llm.api_key", "embedding.api_key"]) {
        if (typeof payload[k] === "string" && payload[k].includes("***")) {
          delete payload[k];
        }
      }
      const s = await adminApi.updateSettings(payload);
      setSettings(s);
      setValues(s.values);
      setSaved(true);
      setTimeout(() => setSaved(false), 2000);
    } catch (err: any) {
      setError(err.response?.data?.detail || t("errors.unknown"));
    } finally {
      setSaving(false);
    }
  };

  const testEmbeddings = async () => {
    setError("");
    setTestingEmbeddings(true);
    setEmbeddingTest(null);
    try {
      // Build overrides from current form values (excluding masked api_key)
      const overrides: Record<string, any> = {};
      for (const k of [
        "embedding.provider",
        "embedding.base_url",
        "embedding.api_key",
        "embedding.model",
        "embedding.dim",
        "embedding.request_timeout",
        "llm.base_url",
        "llm.api_key",
      ]) {
        const v = values[k];
        if (v !== undefined && v !== null && !(typeof v === "string" && v.includes("***"))) {
          overrides[k] = v;
        }
      }
      const r = await adminApi.testEmbeddings(overrides);
      if (r.ok) {
        setEmbeddingTest({
          ok: true,
          msg: t("admin.embedding_test_ok", {
            provider: r.provider,
            dim: r.dim,
            norm: r.sample_norm,
          }),
        });
      } else {
        setEmbeddingTest({ ok: false, msg: t("admin.embedding_test_fail", { error: r.error || "unknown" }) });
      }
    } catch (err: any) {
      setEmbeddingTest({
        ok: false,
        msg: t("admin.embedding_test_fail", { error: err.response?.data?.detail || err.message }),
      });
    } finally {
      setTestingEmbeddings(false);
    }
  };

  // Build LLM overrides from current form values (excluding masked api_key).
  // Used by both testLlm and testLlmTools so the operator can tweak base_url
  // / model / api_key in the form and test before saving.
  const buildLlmOverrides = (): Record<string, any> => {
    const overrides: Record<string, any> = {};
    for (const k of ["llm.base_url", "llm.api_key", "llm.model", "llm.request_timeout"]) {
      const v = values[k];
      if (v !== undefined && v !== null && !(typeof v === "string" && v.includes("***"))) {
        overrides[k] = v;
      }
    }
    return overrides;
  };

  const testLlm = async () => {
    setError("");
    setTestingLlm(true);
    setLlmTest(null);
    try {
      const r = await adminApi.testLlm(buildLlmOverrides());
      if (r.ok) {
        setLlmTest({
          ok: true,
          msg: t("admin.llm_test_ok", {
            latency: r.latency_ms ?? 0,
            preview: (r.response_preview || "").slice(0, 80),
          }),
        });
      } else {
        setLlmTest({
          ok: false,
          msg: t("admin.llm_test_fail", { error: r.error || `(${r.error_type || "unknown"})` }),
        });
      }
    } catch (err: any) {
      setLlmTest({
        ok: false,
        msg: t("admin.llm_test_fail", { error: err.response?.data?.detail || err.message }),
      });
    } finally {
      setTestingLlm(false);
    }
  };

  const testLlmTools = async () => {
    setError("");
    setTestingLlmTools(true);
    setLlmToolsTest(null);
    try {
      const r = await adminApi.testLlmTools(buildLlmOverrides());
      if (r.ok && r.tool_calls_returned) {
        // Model returned a proper tool_call — function-calling works.
        setLlmToolsTest({
          ok: true,
          msg: t("admin.llm_test_tools_ok_with_call", {
            name: r.tool_call_name || "?",
            args: JSON.stringify(r.tool_call_args || {}),
            latency: r.latency_ms ?? 0,
          }),
        });
      } else if (r.ok && !r.tool_calls_returned) {
        // Model responded but did NOT use the tool — function-calling is NOT
        // supported. The fallback JSON parser will still work, but tool-based
        // flows (orchestrator, step-writer) will be unreliable.
        setLlmToolsTest({
          ok: false,
          msg: t("admin.llm_test_tools_ok_no_call", {
            text: (r.text || "").slice(0, 120),
          }),
        });
      } else {
        setLlmToolsTest({
          ok: false,
          msg: t("admin.llm_test_fail", { error: r.error || `(${r.error_type || "unknown"})` }),
        });
      }
    } catch (err: any) {
      setLlmToolsTest({
        ok: false,
        msg: t("admin.llm_test_fail", { error: err.response?.data?.detail || err.message }),
      });
    } finally {
      setTestingLlmTools(false);
    }
  };

  const toggleUserActive = async (userId: string, currentActive: boolean) => {
    setUserActionError("");
    try {
      const updated = await adminApi.setUserActive(userId, !currentActive);
      setUsers((prev) => prev.map((u) => (u.id === userId ? { ...u, is_active: updated.is_active } : u)));
    } catch (err: any) {
      setUserActionError(err.response?.data?.detail || t("errors.unknown"));
    }
  };

  if (loading) {
    return <div className="p-8 text-center text-ink-400">{t("common.loading")}</div>;
  }

  return (
    <div className="max-w-5xl mx-auto px-4 py-6">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-serif text-ink-100">{t("admin.title")}</h1>
        </div>
        <Button variant="ghost" onClick={() => navigate("/dashboard")}>
          <ArrowLeft size={14} className="mr-1" />
          {t("admin.back")}
        </Button>
      </div>

      {error && <p className="text-sm text-red-400 mb-4">{error}</p>}

      {/* Tabs */}
      <div className="flex gap-1 mb-4">
        <TabButton active={tab === "settings"} onClick={() => setTab("settings")}>
          {t("admin.settings")}
        </TabButton>
        <TabButton active={tab === "logs"} onClick={() => setTab("logs")}>
          <Activity size={12} className="mr-1" />
          {t("admin.llm_logs")}
        </TabButton>
        <TabButton active={tab === "users"} onClick={() => setTab("users")}>
          <Users size={12} className="mr-1" />
          {t("admin.users")}
        </TabButton>
      </div>

      {tab === "settings" && settings && (
        <div className="space-y-4">
          <Card>
            <CardHeader title={t("admin.settings")} />
            <CardBody className="space-y-3">
              <Input
                label={t("admin.base_url")}
                value={values["llm.base_url"] || ""}
                onChange={(e) => setValues({ ...values, "llm.base_url": e.target.value })}
                placeholder="http://localhost:1234/v1"
              />
              <Input
                label={t("admin.api_key")}
                type="password"
                value={values["llm.api_key"] || ""}
                onChange={(e) => setValues({ ...values, "llm.api_key": e.target.value })}
                placeholder="sk-..."
              />
              <Input
                label={t("admin.model")}
                value={values["llm.model"] || ""}
                onChange={(e) => setValues({ ...values, "llm.model": e.target.value })}
                placeholder="local-model"
              />
              <div className="grid grid-cols-2 gap-3">
                <NumberInput
                  label={t("admin.temperature")}
                  value={values["llm.temperature"]}
                  onChange={(v) => setValues({ ...values, "llm.temperature": v })}
                  step={0.1}
                />
                <NumberInput
                  label={t("admin.step_temperature")}
                  value={values["llm.step_temperature"]}
                  onChange={(v) => setValues({ ...values, "llm.step_temperature": v })}
                  step={0.1}
                />
                <NumberInput
                  label={t("admin.summary_temperature")}
                  value={values["llm.summary_temperature"]}
                  onChange={(v) => setValues({ ...values, "llm.summary_temperature": v })}
                  step={0.1}
                />
                <NumberInput
                  label={t("admin.max_tokens")}
                  value={values["llm.max_tokens"]}
                  onChange={(v) => setValues({ ...values, "llm.max_tokens": v })}
                />
                <NumberInput
                  label={t("admin.request_timeout")}
                  value={values["llm.request_timeout"]}
                  onChange={(v) => setValues({ ...values, "llm.request_timeout": v })}
                />
                <label className="flex items-center gap-2 text-xs text-ink-300 self-end mb-2">
                  <input
                    type="checkbox"
                    checked={!!values["llm.streaming"]}
                    onChange={(e) => setValues({ ...values, "llm.streaming": e.target.checked })}
                    className="rounded"
                  />
                  {t("admin.streaming")}
                </label>
              </div>

              {/* LLM connectivity tests — runs against current form values
                  (so the operator can tweak base_url / model / api_key and
                  test BEFORE saving). */}
              <div className="flex flex-wrap items-center gap-2 pt-1">
                <Button variant="ghost" onClick={testLlm} disabled={testingLlm}>
                  <Terminal size={14} className="mr-1" />
                  {testingLlm ? t("admin.llm_test_testing") : t("admin.llm_test")}
                </Button>
                <Button variant="ghost" onClick={testLlmTools} disabled={testingLlmTools}>
                  <Wrench size={14} className="mr-1" />
                  {testingLlmTools ? t("admin.llm_test_tools_testing") : t("admin.llm_test_tools")}
                </Button>
                {llmTest && (
                  <span className={`text-xs ${llmTest.ok ? "text-green-400" : "text-red-400"}`}>
                    {llmTest.msg}
                  </span>
                )}
                {llmToolsTest && (
                  <span className={`text-xs ${llmToolsTest.ok ? "text-green-400" : "text-red-400"}`}>
                    {llmToolsTest.msg}
                  </span>
                )}
              </div>
            </CardBody>
          </Card>

          {/* === Embeddings / RAG === */}
          <Card>
            <CardHeader
              title={t("admin.embedding_settings")}
              subtitle="hash = offline fallback · openai = real semantic search"
            />
            <CardBody className="space-y-3">
              <div>
                <label className="block text-xs text-ink-400 mb-1">{t("admin.embedding_provider")}</label>
                <select
                  className="w-full bg-ink-900 border border-ink-700 rounded px-2 py-1.5 text-sm text-ink-100"
                  value={values["embedding.provider"] || "hash"}
                  onChange={(e) => setValues({ ...values, "embedding.provider": e.target.value })}
                >
                  <option value="hash">{t("admin.embedding_provider_hash")}</option>
                  <option value="openai">{t("admin.embedding_provider_openai")}</option>
                </select>
              </div>
              <Input
                label={t("admin.embedding_base_url")}
                value={values["embedding.base_url"] || ""}
                onChange={(e) => setValues({ ...values, "embedding.base_url": e.target.value })}
                placeholder="http://localhost:1234/v1"
              />
              <Input
                label={t("admin.embedding_api_key")}
                type="password"
                value={values["embedding.api_key"] || ""}
                onChange={(e) => setValues({ ...values, "embedding.api_key": e.target.value })}
                placeholder="sk-... (пусто = как у LLM)"
              />
              <div className="grid grid-cols-3 gap-3">
                <Input
                  label={t("admin.embedding_model")}
                  value={values["embedding.model"] || ""}
                  onChange={(e) => setValues({ ...values, "embedding.model": e.target.value })}
                  placeholder="text-embedding-3-small"
                />
                <NumberInput
                  label={t("admin.embedding_dim")}
                  value={values["embedding.dim"]}
                  onChange={(v) => setValues({ ...values, "embedding.dim": v })}
                />
                <NumberInput
                  label={t("admin.embedding_timeout")}
                  value={values["embedding.request_timeout"]}
                  onChange={(v) => setValues({ ...values, "embedding.request_timeout": v })}
                />
              </div>

              <div className="flex items-center gap-2 pt-1">
                <Button variant="ghost" onClick={testEmbeddings} disabled={testingEmbeddings}>
                  <Zap size={14} className="mr-1" />
                  {testingEmbeddings ? t("admin.embedding_testing") : t("admin.embedding_test")}
                </Button>
                {embeddingTest && (
                  <span className={`text-xs ${embeddingTest.ok ? "text-green-400" : "text-red-400"}`}>
                    {embeddingTest.msg}
                  </span>
                )}
              </div>
            </CardBody>
          </Card>

          <Card>
            <CardHeader title={t("admin.context_settings")} />
            <CardBody>
              <div className="grid grid-cols-2 gap-3">
                <NumberInput
                  label={t("admin.recent_messages")}
                  value={values["context.recent_messages"]}
                  onChange={(v) => setValues({ ...values, "context.recent_messages": v })}
                />
                <NumberInput
                  label={t("admin.compress_threshold")}
                  value={values["context.compress_threshold"]}
                  onChange={(v) => setValues({ ...values, "context.compress_threshold": v })}
                />
                <NumberInput
                  label={t("admin.summary_messages")}
                  value={values["context.summary_messages"]}
                  onChange={(v) => setValues({ ...values, "context.summary_messages": v })}
                />
                <NumberInput
                  label={t("admin.max_tokens_total")}
                  value={values["context.max_tokens_total"]}
                  onChange={(v) => setValues({ ...values, "context.max_tokens_total": v })}
                />
              </div>
            </CardBody>
          </Card>

          <Card>
            <CardHeader title={t("admin.trigger_settings")} subtitle={t("admin.trigger_settings_desc")} />
            <CardBody>
              <label className="flex items-center gap-2 text-xs text-ink-300">
                <input
                  type="checkbox"
                  checked={!!values["triggers.enabled"]}
                  onChange={(e) => setValues({ ...values, "triggers.enabled": e.target.checked })}
                />
                {t("admin.triggers_enabled")}
              </label>
              <p className="text-xs text-ink-500 mt-2">{t("admin.triggers_enabled_desc")}</p>
            </CardBody>
          </Card>

          <div className="flex justify-end gap-2">
            {saved && <span className="text-sm text-green-400 self-center">{t("admin.saved")}</span>}
            <Button onClick={save} disabled={saving}>
              <Save size={14} className="mr-1" />
              {saving ? t("common.loading") : t("admin.save")}
            </Button>
          </div>
        </div>
      )}

      {tab === "logs" && (
        <Card>
          <CardHeader title={t("admin.llm_logs")} subtitle={`${logs.length} recent calls`} />
          <CardBody>
            <div className="overflow-x-auto">
              <table className="w-full text-xs">
                <thead>
                  <tr className="text-left text-ink-400 border-b border-ink-800">
                    <th className="py-2 pr-3">Time</th>
                    <th className="py-2 pr-3">Purpose</th>
                    <th className="py-2 pr-3">Model</th>
                    <th className="py-2 pr-3 text-right">Tokens</th>
                    <th className="py-2 pr-3 text-right">Latency</th>
                    <th className="py-2">Status</th>
                  </tr>
                </thead>
                <tbody>
                  {logs.map((l) => (
                    <tr key={l.id} className="border-b border-ink-900 hover:bg-ink-900/50">
                      <td className="py-2 pr-3 text-ink-400">
                        {new Date(l.created_at).toLocaleTimeString()}
                      </td>
                      <td className="py-2 pr-3 text-ink-100">{l.purpose}</td>
                      <td className="py-2 pr-3 text-ink-300">{l.model}</td>
                      <td className="py-2 pr-3 text-right text-ink-300">
                        {l.total_tokens ?? "—"}
                      </td>
                      <td className="py-2 pr-3 text-right text-ink-300">
                        {l.latency_ms ? `${l.latency_ms}ms` : "—"}
                      </td>
                      <td className="py-2">
                        {l.error ? (
                          <span className="text-red-400">err</span>
                        ) : (
                          <span className="text-green-400">ok</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardBody>
        </Card>
      )}

      {tab === "users" && (
        <Card>
          <CardHeader title={t("admin.users")} subtitle={`${users.length} users`} />
          <CardBody>
            {userActionError && (
              <p className="text-sm text-red-400 mb-3">{userActionError}</p>
            )}
            <div className="overflow-x-auto">
              <table className="w-full text-xs">
                <thead>
                  <tr className="text-left text-ink-400 border-b border-ink-800">
                    <th className="py-2 pr-3">Email</th>
                    <th className="py-2 pr-3">Username</th>
                    <th className="py-2 pr-3">Role</th>
                    <th className="py-2 pr-3">Active</th>
                    <th className="py-2 pr-3">Created</th>
                    <th className="py-2 text-right">{t("admin.users_actions")}</th>
                  </tr>
                </thead>
                <tbody>
                  {users.map((u) => (
                    <tr key={u.id} className="border-b border-ink-900">
                      <td className="py-2 pr-3 text-ink-100">{u.email}</td>
                      <td className="py-2 pr-3 text-ink-300">{u.username}</td>
                      <td className="py-2 pr-3">
                        {u.is_admin ? (
                          <span className="text-accent-400">admin</span>
                        ) : (
                          <span className="text-ink-400">user</span>
                        )}
                      </td>
                      <td className="py-2 pr-3">
                        {u.is_active ? (
                          <span className="text-green-400">●</span>
                        ) : (
                          <span className="text-red-400">●</span>
                        )}
                      </td>
                      <td className="py-2 pr-3 text-ink-400">
                        {new Date(u.created_at).toLocaleDateString()}
                      </td>
                      <td className="py-2 text-right">
                        {u.is_admin ? (
                          <span className="text-ink-500 text-xs">—</span>
                        ) : u.is_active ? (
                          <Button
                            size="sm"
                            variant="ghost"
                            onClick={() => toggleUserActive(u.id, u.is_active)}
                          >
                            <Ban size={12} className="mr-1" />
                            {t("admin.users_ban")}
                          </Button>
                        ) : (
                          <Button
                            size="sm"
                            variant="ghost"
                            onClick={() => toggleUserActive(u.id, u.is_active)}
                          >
                            <CheckCircle2 size={12} className="mr-1" />
                            {t("admin.users_unban")}
                          </Button>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardBody>
        </Card>
      )}
    </div>
  );
}

function TabButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
  return (
    <button
      onClick={onClick}
      className={`text-xs px-3 py-1.5 rounded-t border-b-2 transition-colors ${
        active
          ? "border-accent-500 text-accent-400 bg-ink-900/50"
          : "border-transparent text-ink-400 hover:text-ink-200"
      }`}
    >
      {children}
    </button>
  );
}

function NumberInput({
  label,
  value,
  onChange,
  step,
}: {
  label: string;
  value: any;
  onChange: (v: number) => void;
  step?: number;
}) {
  return (
    <Input
      label={label}
      type="number"
      step={step}
      value={value ?? 0}
      onChange={(e) => {
        const v = parseFloat(e.target.value);
        onChange(isNaN(v) ? 0 : v);
      }}
    />
  );
}