/* ============================================================
   SKYVIDYA ADMIN — Agent Specs CRUD + LLM Config
   ============================================================ */
const { useState, useEffect, useCallback } = React;

const SESSION_ADMIN_KEY = "sky-admin-ikey";

function AdminView() {
  const [apiKey, setApiKey] = useState(() => sessionStorage.getItem(SESSION_ADMIN_KEY) || "");
  const [authed, setAuthed] = useState(false);
  const [authInput, setAuthInput] = useState("");
  const [authErr, setAuthErr] = useState("");
  const [checking, setChecking] = useState(false);
  const [tab, setTab] = useState("specs");

  // Specs state
  const [specs, setSpecs] = useState([]);
  const [selectedSpec, setSelectedSpec] = useState(null);
  const [editContent, setEditContent] = useState("");
  const [newId, setNewId] = useState("");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  const [msg, setMsg] = useState("");

  // LLM state
  const [llmConfig, setLlmConfig] = useState(null);
  const [llmKeyInput, setLlmKeyInput] = useState("");
  const [llmSaving, setLlmSaving] = useState(false);

  const apiBase = ((window.SKY_API_BASE || "")).replace(/\/$/, "");

  function authHeaders() {
    return { "Content-Type": "application/json", "X-Internal-Key": apiKey };
  }

  async function tryAuth(key) {
    if (!key.trim()) { setAuthErr("Informe a chave."); return; }
    setChecking(true);
    setAuthErr("");
    try {
      const r = await fetch(`${apiBase}/v1/atma/admin/llm-config`, {
        headers: { "X-Internal-Key": key.trim() },
      });
      if (r.ok) {
        sessionStorage.setItem(SESSION_ADMIN_KEY, key.trim());
        setApiKey(key.trim());
        setAuthed(true);
      } else {
        setAuthErr("Chave inválida. Verifique INTERNAL_API_KEY no .env do servidor.");
      }
    } catch (e) {
      setAuthErr("Erro ao conectar com a API: " + e.message);
    } finally {
      setChecking(false);
    }
  }

  // Verify session key on mount
  useEffect(() => {
    if (apiKey) tryAuth(apiKey);
  }, []);

  const loadSpecs = useCallback(async () => {
    setError("");
    try {
      const r = await fetch(`${apiBase}/v1/atma/admin/specs`, { headers: { "X-Internal-Key": apiKey } });
      if (!r.ok) throw new Error("HTTP " + r.status);
      setSpecs(await r.json());
    } catch (e) {
      setError("Erro ao carregar specs: " + e.message);
    }
  }, [apiKey]);

  const loadLlmConfig = useCallback(async () => {
    try {
      const r = await fetch(`${apiBase}/v1/atma/admin/llm-config`, { headers: { "X-Internal-Key": apiKey } });
      if (r.ok) setLlmConfig(await r.json());
    } catch {}
  }, [apiKey]);

  useEffect(() => {
    if (authed) {
      loadSpecs();
      loadLlmConfig();
    }
  }, [authed]);

  function buildRawFromSpec(spec) {
    const kws = (spec.keywords || []).join(", ");
    return `---\nid: ${spec.id}\nname: ${spec.name}\ndesc: ${spec.desc || ""}\nkeywords: [${kws}]\n---\n\n${spec.body || ""}`;
  }

  function selectSpec(spec) {
    setSelectedSpec(spec);
    setEditContent(buildRawFromSpec(spec));
    setNewId("");
    setMsg("");
    setError("");
  }

  function startNew() {
    setSelectedSpec(null);
    setEditContent("---\nid: novo-agente\nname: Novo Agente\ndesc: Especialista em ...\nkeywords: []\n---\n\nVocê é um analista especializado...\n");
    setNewId("novo-agente");
    setMsg("");
    setError("");
  }

  async function saveSpec() {
    const id = selectedSpec ? selectedSpec.id : newId.trim();
    if (!id) { setError("Informe o ID do spec."); return; }
    setSaving(true);
    setError("");
    setMsg("");
    try {
      const r = await fetch(`${apiBase}/v1/atma/admin/specs/${encodeURIComponent(id)}`, {
        method: "PUT",
        headers: authHeaders(),
        body: JSON.stringify({ content: editContent }),
      });
      if (!r.ok) throw new Error("HTTP " + r.status);
      setMsg(`"${id}" salvo com sucesso.`);
      setNewId("");
      await loadSpecs();
    } catch (e) {
      setError("Erro ao salvar: " + e.message);
    } finally {
      setSaving(false);
    }
  }

  async function deleteSpec(specId) {
    if (!window.confirm(`Excluir agent spec "${specId}"? O histórico será preservado.`)) return;
    setError("");
    try {
      const r = await fetch(`${apiBase}/v1/atma/admin/specs/${encodeURIComponent(specId)}`, {
        method: "DELETE",
        headers: authHeaders(),
      });
      if (!r.ok) throw new Error("HTTP " + r.status);
      setMsg(`"${specId}" excluído.`);
      if (selectedSpec && selectedSpec.id === specId) {
        setSelectedSpec(null);
        setEditContent("");
      }
      await loadSpecs();
    } catch (e) {
      setError("Erro ao excluir: " + e.message);
    }
  }

  async function saveLlmKey() {
    if (!llmKeyInput.trim()) return;
    setLlmSaving(true);
    setError("");
    setMsg("");
    try {
      const r = await fetch(`${apiBase}/v1/atma/admin/llm-key`, {
        method: "PUT",
        headers: authHeaders(),
        body: JSON.stringify({ api_key: llmKeyInput.trim(), provider: "gemini", model: "gemini-2.5-flash" }),
      });
      if (!r.ok) throw new Error("HTTP " + r.status);
      setLlmConfig(await r.json());
      setLlmKeyInput("");
      setMsg("API Key salva. O assistente AI está pronto para uso.");
    } catch (e) {
      setError("Erro ao salvar API Key: " + e.message);
    } finally {
      setLlmSaving(false);
    }
  }

  function logout() {
    sessionStorage.removeItem(SESSION_ADMIN_KEY);
    setAuthed(false);
    setApiKey("");
    setAuthInput("");
    setSpecs([]);
    setLlmConfig(null);
  }

  /* ── Auth gate ───────────────────────────────────────── */
  if (!authed) {
    return (
      <div className="v2-pad fade-up" style={{ maxWidth: 400, margin: "60px auto" }}>
        <ViewHead eyebrow="// admin" title="Administrador"
          sub="Autenticação obrigatória para acessar configurações avançadas." />
        <div className="v2-card" style={{ padding: 24 }}>
          <label className="mono" style={{ fontSize: 11, color: "var(--fg-soft)", display: "block", marginBottom: 6, letterSpacing: ".06em" }}>
            INTERNAL API KEY
          </label>
          <input
            type="password"
            value={authInput}
            onChange={(e) => setAuthInput(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && tryAuth(authInput)}
            placeholder="Chave de acesso…"
            autoFocus
            style={{ width: "100%", padding: "9px 12px", borderRadius: 6, border: "1px solid var(--border)", background: "var(--surface)", color: "var(--fg)", fontSize: 14, boxSizing: "border-box" }}
          />
          {authErr && (
            <p style={{ color: "var(--sv-coral)", fontSize: 12, marginTop: 8, lineHeight: 1.4 }}>{authErr}</p>
          )}
          <button className="btn" style={{ marginTop: 14, width: "100%", padding: "10px 0" }}
            onClick={() => tryAuth(authInput)} disabled={checking}>
            {checking ? "Verificando…" : "Autenticar"}
          </button>
        </div>
      </div>
    );
  }

  /* ── Admin UI ────────────────────────────────────────── */
  return (
    <div className="v2-pad fade-up">
      <div style={{ display: "flex", alignItems: "flex-start", marginBottom: 20 }}>
        <ViewHead eyebrow="// admin" title="Administrador"
          sub="Configuração de agent specs e API da LLM (Gemini 2.5 Flash)." />
        <button className="btn btn-ghost" style={{ marginLeft: "auto", padding: "5px 12px", fontSize: 11, flexShrink: 0 }}
          onClick={logout}>
          Sair
        </button>
      </div>

      {/* Tab bar */}
      <div style={{ display: "flex", gap: 8, marginBottom: 20 }}>
        {[["specs", "Agent Specs"], ["llm", "Configuração LLM"]].map(([id, label]) => (
          <button key={id}
            className={tab === id ? "btn" : "btn btn-ghost"}
            style={{ padding: "6px 16px" }}
            onClick={() => { setTab(id); setError(""); setMsg(""); }}>
            {label}
          </button>
        ))}
      </div>

      {/* Alerts */}
      {error && (
        <div style={{ background: "rgba(255,100,80,.1)", border: "1px solid rgba(255,100,80,.3)", borderRadius: 6, padding: "10px 14px", color: "var(--sv-coral)", fontSize: 13, marginBottom: 16 }}>
          {error}
        </div>
      )}
      {msg && (
        <div style={{ background: "rgba(78,210,210,.08)", border: "1px solid rgba(78,210,210,.25)", borderRadius: 6, padding: "10px 14px", color: "var(--sv-cyan)", fontSize: 13, marginBottom: 16 }}>
          {msg}
        </div>
      )}

      {/* ── Agent Specs ── */}
      {tab === "specs" && (
        <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: 16, alignItems: "start" }}>
          {/* Spec list */}
          <div className="v2-card" style={{ padding: 0, overflow: "hidden" }}>
            <div style={{ padding: "10px 12px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 8 }}>
              <span className="mono" style={{ flex: 1, fontSize: 10, color: "var(--fg-soft)", letterSpacing: ".06em" }}>
                SPECS ({specs.length})
              </span>
              <button className="btn" style={{ padding: "4px 10px", fontSize: 11 }} onClick={startNew}>
                + Novo
              </button>
            </div>
            {specs.length === 0 && (
              <p style={{ padding: "14px 12px", fontSize: 12, color: "var(--fg-mute)" }}>
                Nenhum spec encontrado.
              </p>
            )}
            {specs.map((s) => {
              const active = selectedSpec && selectedSpec.id === s.id;
              return (
                <button key={s.id} onClick={() => selectSpec(s)} style={{
                  width: "100%", textAlign: "left", padding: "10px 12px",
                  background: active ? "var(--surface-raised)" : "transparent",
                  borderBottom: "1px solid var(--border)", cursor: "pointer",
                  border: "none", borderBottom: "1px solid var(--border)", display: "block",
                }}>
                  <div style={{ fontWeight: 600, fontSize: 13, color: "var(--fg)" }}>{s.name}</div>
                  <div style={{ fontSize: 11, color: "var(--fg-soft)", marginTop: 2, fontFamily: "monospace" }}>{s.id}</div>
                </button>
              );
            })}
          </div>

          {/* Editor */}
          <div className="v2-card" style={{ padding: 16 }}>
            {(!selectedSpec && !newId) ? (
              <p style={{ color: "var(--fg-mute)", fontSize: 13 }}>
                Selecione um spec à esquerda ou clique "+ Novo" para criar.
              </p>
            ) : (
              <>
                {!selectedSpec && (
                  <div style={{ marginBottom: 12 }}>
                    <label className="mono" style={{ fontSize: 11, color: "var(--fg-soft)", display: "block", marginBottom: 4, letterSpacing: ".06em" }}>ID DO SPEC (sem espaços)</label>
                    <input value={newId} onChange={(e) => setNewId(e.target.value.toLowerCase().replace(/\s+/g, "-"))}
                      placeholder="ex: weather"
                      style={{ padding: "6px 10px", borderRadius: 5, border: "1px solid var(--border)", background: "var(--surface)", color: "var(--fg)", fontSize: 13, width: "100%", boxSizing: "border-box", fontFamily: "monospace" }} />
                  </div>
                )}
                {selectedSpec && (
                  <div style={{ marginBottom: 10, padding: "6px 10px", background: "var(--surface-raised)", borderRadius: 5, fontSize: 12, fontFamily: "monospace", color: "var(--fg-soft)" }}>
                    {selectedSpec.id}  ·  {selectedSpec.name}
                  </div>
                )}
                <label className="mono" style={{ fontSize: 11, color: "var(--fg-soft)", display: "block", marginBottom: 4, letterSpacing: ".06em" }}>
                  CONTEÚDO (.md — frontmatter YAML + prompt de sistema)
                </label>
                <textarea
                  value={editContent}
                  onChange={(e) => setEditContent(e.target.value)}
                  style={{ width: "100%", height: 380, padding: 10, borderRadius: 6, border: "1px solid var(--border)", background: "var(--surface-raised)", color: "var(--fg)", fontSize: 12, fontFamily: "monospace", boxSizing: "border-box", resize: "vertical", lineHeight: 1.5 }}
                />
                <div style={{ display: "flex", gap: 8, marginTop: 10, flexWrap: "wrap" }}>
                  <button className="btn" style={{ padding: "7px 18px" }} onClick={saveSpec} disabled={saving}>
                    {saving ? "Salvando…" : "Salvar"}
                  </button>
                  {selectedSpec && (
                    <button className="btn btn-ghost"
                      style={{ padding: "7px 14px", color: "var(--sv-coral)", borderColor: "rgba(255,100,80,.4)" }}
                      onClick={() => deleteSpec(selectedSpec.id)}>
                      Excluir
                    </button>
                  )}
                  <button className="btn btn-ghost" style={{ padding: "7px 14px", marginLeft: "auto" }}
                    onClick={() => { setSelectedSpec(null); setNewId(""); setEditContent(""); setMsg(""); }}>
                    Cancelar
                  </button>
                </div>
              </>
            )}
          </div>
        </div>
      )}

      {/* ── LLM Config ── */}
      {tab === "llm" && (
        <div className="v2-card" style={{ padding: 24, maxWidth: 520 }}>
          <div style={{ marginBottom: 24 }}>
            <div className="mono" style={{ fontSize: 11, color: "var(--fg-soft)", marginBottom: 12, letterSpacing: ".06em" }}>
              STATUS ATUAL
            </div>
            {!llmConfig ? (
              <p style={{ color: "var(--fg-mute)", fontSize: 13 }}>Carregando…</p>
            ) : (
              <div style={{ display: "grid", gap: 10 }}>
                {[
                  { k: "Provider", v: llmConfig.provider, ok: true },
                  { k: "Modelo", v: llmConfig.model, ok: true },
                  { k: "API Key", v: llmConfig.api_key_set ? `✓ configurada  (${llmConfig.api_key_preview})` : "⚠ não configurada — AI desativada", ok: llmConfig.api_key_set },
                ].map(({ k, v, ok }) => (
                  <div key={k} style={{ display: "flex", gap: 12, alignItems: "center", fontSize: 13 }}>
                    <span style={{ color: "var(--fg-soft)", width: 72, flexShrink: 0 }}>{k}</span>
                    <span style={{ color: ok ? "var(--fg)" : "var(--sv-coral)", fontFamily: k === "API Key" ? "monospace" : undefined }}>{v}</span>
                  </div>
                ))}
              </div>
            )}
          </div>

          <div style={{ borderTop: "1px solid var(--border)", paddingTop: 20 }}>
            <label className="mono" style={{ fontSize: 11, color: "var(--fg-soft)", display: "block", marginBottom: 6, letterSpacing: ".06em" }}>
              NOVA API KEY — Gemini (Google AI Studio)
            </label>
            <input type="password" value={llmKeyInput} onChange={(e) => setLlmKeyInput(e.target.value)}
              placeholder="AIzaSy…"
              style={{ width: "100%", padding: "9px 12px", borderRadius: 6, border: "1px solid var(--border)", background: "var(--surface)", color: "var(--fg)", fontSize: 14, boxSizing: "border-box", fontFamily: "monospace" }} />
            <p className="mono" style={{ fontSize: 10, color: "var(--fg-mute)", margin: "8px 0 14px", letterSpacing: ".04em", lineHeight: 1.5 }}>
              OBTER EM aistudio.google.com/apikey · A chave é salva em backend/.secrets/llm.json (chmod 600) e nunca retornada em texto plano.
            </p>
            <button className="btn" style={{ padding: "9px 22px" }} onClick={saveLlmKey}
              disabled={llmSaving || !llmKeyInput.trim()}>
              {llmSaving ? "Salvando…" : "Salvar API Key"}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { AdminView });