/* Módulo de Configurações — RF-CONFIG-01 a 14 (ESP-0010, ADR-0008).
   Vive dentro do shell, como `view_users.jsx`, e não como takeover.

   Duas seções, sem endpoint nem tela em comum entre elas (RF-CONFIG-02):
   Parâmetros (RF-CONFIG-07, valor sempre visível) e Segredos (RF-CONFIG-03,
   write-only — o valor nunca volta do backend, só `prefixo`/`sufixo`
   mascarados). Esconder o item de menu para quem não é administrador não é
   proteção — a autorização é do backend (RF-CONFIG-01). */

const TIPOS_DE_PARAMETRO = [
  ["bool", "Sim/Não"],
  ["enum", "Lista de opções"],
  ["int", "Número inteiro"],
];

const CATEGORIAS_DE_SEGREDO = [
  ["llm", "Modelo de linguagem (LiteLLM)"],
  ["tts", "Síntese de voz (TTS)"],
  ["litellm_admin", "Master key do LiteLLM"],
];

const NOME_DA_CATEGORIA = Object.fromEntries(CATEGORIAS_DE_SEGREDO);

// Só os provedores com testador implementado em `services/credential_test.py`
// (ADR-0008 item 8: documentado por provedor, não genérico).
const PROVIDERS_POR_CATEGORIA = {
  llm: [
    ["openai", "OpenAI"],
    ["anthropic", "Anthropic"],
    ["gemini", "Google Gemini"],
  ],
  tts: [
    ["openai", "OpenAI TTS"],
    ["azure_speech", "Azure Speech"],
    ["elevenlabs", "ElevenLabs"],
  ],
  litellm_admin: [["litellm", "LiteLLM"]],
};

const ERROS_DE_CONFIGURACAO = {
  parametro_invalido: null, // a mensagem do backend já orienta
  segredo_invalido: null,
  segredo_nao_encontrado: "Credencial não encontrada. Atualize a listagem.",
  cooldown_ativo: null, // o backend já informa o tempo restante
  etapa_indisponivel: null,
  litellm_registro_falhou: null,
};

function mensagemDeErroDeConfiguracao(erro) {
  if (!erro) return "";
  const especifica = ERROS_DE_CONFIGURACAO[erro.code];
  if (especifica) return especifica;
  return erro.message || "Não foi possível concluir a solicitação.";
}

/* --- Parâmetros simples (RF-CONFIG-07) ------------------------------------ */

// RF-CONFIG-15: inteiro não-negativo. O `<input type="number">` pode devolver
// "" (campo vazio) — nesse estado o Salvar fica travado, o backend recusaria.
function IntInput({ valor, onChange }) {
  return (
    <div className="finput">
      <input type="number" min="0" step="1" inputMode="numeric" value={valor}
        onChange={e => {
          const cru = e.target.value;
          if (cru === "") { onChange(""); return; }
          const n = parseInt(cru, 10);
          onChange(Number.isFinite(n) ? Math.max(0, n) : "");
        }} />
    </div>
  );
}

function ParameterRow({ parametro, onSalvar, busy }) {
  const [valor, setValor] = React.useState(parametro.valor);
  const alterado = JSON.stringify(valor) !== JSON.stringify(parametro.valor);
  const intInvalido = parametro.tipo === "int" && !Number.isInteger(valor);

  return (
    <tr>
      <td style={{ width: "24%" }}>
        {parametro.rotulo ? (
          <>
            <div className="row-title">{parametro.rotulo}</div>
            <div className="row-sub"><code>{parametro.chave}</code></div>
          </>
        ) : (
          <code>{parametro.chave}</code>
        )}
      </td>
      <td className="cell-muted">{parametro.descricao || <span className="faint">sem descrição</span>}</td>
      <td>
        {parametro.tipo === "bool" ? (
          <SegBinary value={!!valor} onChange={setValor} />
        ) : parametro.tipo === "int" ? (
          <IntInput valor={valor} onChange={setValor} />
        ) : (
          <FSelect value={valor} onChange={setValor} options={(parametro.opcoes || []).map(o => [o, o])} />
        )}
      </td>
      <td>
        <Btn kind="ghost" disabled={!alterado || busy || intInvalido}
          onClick={() => onSalvar({ ...parametro, valor })}>
          Salvar
        </Btn>
      </td>
    </tr>
  );
}

function NovoParametroForm({ onCriar, busy }) {
  const [chave, setChave] = React.useState("");
  const [tipo, setTipo] = React.useState("bool");
  const [valorBool, setValorBool] = React.useState(false);
  const [valorEnum, setValorEnum] = React.useState("");
  const [valorInt, setValorInt] = React.useState(0);
  const [opcoesTexto, setOpcoesTexto] = React.useState("");
  const [descricao, setDescricao] = React.useState("");
  const [rotulo, setRotulo] = React.useState("");

  const listaDeOpcoes = opcoesTexto.split(",").map(o => o.trim()).filter(Boolean);
  const podeCriar = chave.trim() && (
    tipo === "bool"
    || (tipo === "int" && Number.isInteger(valorInt))
    || (tipo === "enum" && listaDeOpcoes.length > 0 && valorEnum)
  );

  const valorPorTipo = { bool: valorBool, int: valorInt, enum: valorEnum };

  const submeter = () => {
    if (!podeCriar || busy) return;
    onCriar({
      chave: chave.trim(),
      tipo,
      valor: valorPorTipo[tipo],
      opcoes: tipo === "enum" ? listaDeOpcoes : null,
      descricao: descricao.trim(),
      rotulo: rotulo.trim() || null,
    });
    setChave(""); setDescricao(""); setRotulo(""); setOpcoesTexto(""); setValorEnum(""); setValorBool(false); setValorInt(0);
  };

  return (
    <div className="card" style={{ padding: "var(--sp-5)", marginBottom: "var(--sp-5)" }}>
      <div className="fgrid c2">
        <FInput label="Chave" required value={chave} onChange={setChave}
          placeholder="ex.: gate_publicacao_audio_completo" />
        <FSelect label="Tipo" value={tipo} onChange={setTipo} options={TIPOS_DE_PARAMETRO} />
      </div>

      <div className="fgrid" style={{ marginTop: "var(--sp-4)" }}>
        <FInput label="Rótulo" opt value={rotulo} onChange={setRotulo}
          placeholder="Nome curto exibido na tela (sem, a chave crua é usada)" />
      </div>

      <div className="fgrid c2" style={{ marginTop: "var(--sp-4)" }}>
        {tipo === "bool" ? (
          <div>
            <label className="flabel">Valor inicial</label>
            <SegBinary value={valorBool} onChange={setValorBool} />
          </div>
        ) : tipo === "int" ? (
          <div>
            <label className="flabel">Valor inicial</label>
            <IntInput valor={valorInt} onChange={setValorInt} />
          </div>
        ) : (
          <>
            <FInput label="Opções (separadas por vírgula)" required value={opcoesTexto} onChange={setOpcoesTexto}
              placeholder="azul, verde, vermelho" />
            <FInput label="Valor inicial" required value={valorEnum} onChange={setValorEnum}
              placeholder="uma das opções acima" />
          </>
        )}
      </div>

      <div className="fgrid" style={{ marginTop: "var(--sp-4)" }}>
        <FInput label="Descrição" opt value={descricao} onChange={setDescricao}
          placeholder="Para que serve este parâmetro" />
      </div>

      <div className="toolbar" style={{ marginTop: "var(--sp-4)", marginBottom: 0 }}>
        <div className="spacer"></div>
        <Btn kind="primary" icon="plus" disabled={!podeCriar || busy} onClick={submeter}>
          Adicionar parâmetro
        </Btn>
      </div>
    </div>
  );
}

function ParametersTab({ onToast }) {
  const [itens, setItens] = React.useState([]);
  const [carregando, setCarregando] = React.useState(true);
  const [erro, setErro] = React.useState(null);
  const [busy, setBusy] = React.useState(false);

  const carregar = React.useCallback(() => {
    setCarregando(true);
    setErro(null);
    window.API.listSettings().then(itens => {
      setItens(itens || []);
      setCarregando(false);
    }).catch(erro => {
      setErro(erro);
      setCarregando(false);
    });
  }, []);

  React.useEffect(() => { carregar(); }, [carregar]);

  const salvar = (parametro) => {
    setBusy(true);
    setErro(null);
    window.API.updateSetting(parametro.chave, {
      tipo: parametro.tipo,
      valor: parametro.valor,
      opcoes: parametro.opcoes,
      descricao: parametro.descricao,
      rotulo: parametro.rotulo,
    }).then(() => {
      setBusy(false);
      onToast("Parâmetro salvo.");
      carregar();
    }).catch(erro => {
      setBusy(false);
      setErro(erro);
    });
  };

  return (
    <div>
      {erro && (
        <InlineNote kind="error" title="Não foi possível concluir" onClose={() => setErro(null)}>
          {mensagemDeErroDeConfiguracao(erro)}
        </InlineNote>
      )}

      <NovoParametroForm onCriar={salvar} busy={busy} />

      <div className="card" style={{ overflow: "hidden" }}>
        {carregando ? (
          <div style={{ textAlign: "center", padding: "var(--sp-6)", color: "var(--text-faint)" }}>Carregando...</div>
        ) : (
          <table className="tbl">
            <thead>
              <tr><th>Chave</th><th>Descrição</th><th>Valor</th><th><span className="sr-only">Ações</span></th></tr>
            </thead>
            <tbody>
              {itens.map(parametro => (
                <ParameterRow key={parametro.chave} parametro={parametro} onSalvar={salvar} busy={busy} />
              ))}
            </tbody>
          </table>
        )}
        {!carregando && !itens.length && (
          <div style={{ textAlign: "center", padding: "var(--sp-7)", color: "var(--text-faint)" }}>
            Nenhum parâmetro cadastrado ainda.
          </div>
        )}
      </div>
    </div>
  );
}

/* --- Segredos / credenciais externas (RF-CONFIG-03 a 14) ------------------ */

function TestResultBadge({ resultado }) {
  if (!resultado) return <Tag>nunca testada nesta sessão</Tag>;
  if (resultado.sucesso) {
    return <Tag kind="go"><Icon name="check" size={12} />etapa {resultado.etapa === "litellm" ? "LiteLLM" : "provedor"} ok</Tag>;
  }
  return <Tag kind="danger">{resultado.mensagem || "falhou"}</Tag>;
}

function SecretForm({ segredo, busy, erro, testando, resultadoTeste, onSalvar, onTestar, onCancelar }) {
  const editando = !!segredo;
  const [chave, setChave] = React.useState(segredo ? segredo.chave : "");
  const [categoria, setCategoria] = React.useState(segredo ? segredo.categoria : "llm");
  const [provider, setProvider] = React.useState(
    segredo ? segredo.provider : PROVIDERS_POR_CATEGORIA.llm[0][0]
  );
  const [roteado, setRoteado] = React.useState(segredo ? segredo.roteado_por_litellm : false);
  const [modelName, setModelName] = React.useState(segredo && segredo.model_name ? segredo.model_name : "");
  const [regiao, setRegiao] = React.useState(
    segredo && segredo.parametros ? (segredo.parametros.regiao || "") : ""
  );
  const [valor, setValor] = React.useState("");

  // Trocar de categoria muda o conjunto de provedores válidos; RF-CONFIG-06
  // proíbe TTS/master-key roteados pelo LiteLLM.
  React.useEffect(() => {
    const opcoes = PROVIDERS_POR_CATEGORIA[categoria] || [];
    if (!opcoes.some(([v]) => v === provider)) setProvider(opcoes[0] ? opcoes[0][0] : "");
    if (categoria !== "llm" && roteado) setRoteado(false);
  }, [categoria]);

  const precisaRegiao = provider === "azure_speech";
  const podeTestar = chave.trim() && valor.trim() && !testando;
  const podeSalvar =
    chave.trim() &&
    provider &&
    valor.trim() &&
    (!roteado || modelName.trim()) &&
    (!precisaRegiao || regiao.trim());

  const submeter = () => {
    if (!podeSalvar || busy) return;
    onSalvar(chave.trim(), {
      categoria,
      provider,
      roteado_por_litellm: roteado,
      model_name: roteado ? modelName.trim() : null,
      parametros: precisaRegiao ? { regiao: regiao.trim() } : null,
      valor,
    });
  };

  return (
    <div className="card" style={{ padding: "var(--sp-5)" }}>
      {erro && <InlineNote kind="error" title="Não foi possível salvar">{mensagemDeErroDeConfiguracao(erro)}</InlineNote>}

      <div className="fgrid c2">
        <FInput label="Chave" required value={chave} onChange={setChave} disabled={editando}
          placeholder="ex.: openai_principal" />
        <FSelect label="Categoria" value={categoria} onChange={setCategoria} options={CATEGORIAS_DE_SEGREDO} />
      </div>

      <div className="fgrid c2" style={{ marginTop: "var(--sp-4)" }}>
        <FSelect label="Provedor" value={provider} onChange={setProvider}
          options={PROVIDERS_POR_CATEGORIA[categoria] || []} />
        {categoria === "llm" && (
          <div>
            <label className="flabel">Roteada pelo LiteLLM</label>
            <SegBinary value={roteado} onChange={setRoteado} />
          </div>
        )}
      </div>

      {roteado && (
        <div className="fgrid" style={{ marginTop: "var(--sp-4)" }}>
          <FInput label="Nome do modelo no LiteLLM (model_name)" required value={modelName} onChange={setModelName}
            placeholder="ex.: gpt-4o-mini" />
        </div>
      )}

      {precisaRegiao && (
        <div className="fgrid" style={{ marginTop: "var(--sp-4)" }}>
          <FInput label="Região do Azure Speech" required value={regiao} onChange={setRegiao}
            placeholder="ex.: eastus" />
        </div>
      )}

      <div className="fgrid" style={{ marginTop: "var(--sp-4)" }}>
        <FInput label={editando ? "Novo valor (rotação)" : "Valor"} required type="password"
          value={valor} onChange={setValor} placeholder="Cole a chave/credencial aqui" />
      </div>

      {resultadoTeste && (
        <InlineNote kind={resultadoTeste.sucesso ? "success" : "error"}
          title={resultadoTeste.sucesso ? "Teste bem-sucedido" : "Teste falhou"}>
          {resultadoTeste.sucesso ? "O provedor aceitou a chave." : resultadoTeste.mensagem}
        </InlineNote>
      )}

      <div className="toolbar" style={{ marginTop: "var(--sp-5)", marginBottom: 0 }}>
        <Btn kind="ghost" icon="pulse" disabled={!podeTestar}
          onClick={() => onTestar({ chave: chave.trim(), etapa: "provedor", valor, provider })}>
          {testando ? "Testando..." : "Testar antes de salvar"}
        </Btn>
        <div className="spacer"></div>
        <Btn kind="ghost" onClick={onCancelar} disabled={busy}>Cancelar</Btn>
        <Btn kind="primary" onClick={submeter} disabled={!podeSalvar || busy}>
          {busy ? "Salvando..." : (editando ? "Rotacionar credencial" : "Cadastrar credencial")}
        </Btn>
      </div>
    </div>
  );
}

function SecretRow({ segredo, onEditar, onTestar, testando, resultadoTeste }) {
  return (
    <tr>
      <td style={{ width: "22%" }}>
        <div className="row-title">{segredo.chave}</div>
        <div className="row-sub">
          {segredo.provider}
          {segredo.roteado_por_litellm && segredo.model_name ? " · " + segredo.model_name : ""}
        </div>
      </td>
      <td>
        <Tag kind="accent">{NOME_DA_CATEGORIA[segredo.categoria] || segredo.categoria}</Tag>
        {segredo.roteado_por_litellm && <Tag>roteada</Tag>}
      </td>
      <td className="cell-muted">{segredo.prefixo}••••••{segredo.sufixo}</td>
      <td className="cell-muted">{new Date(segredo.atualizado_em).toLocaleString("pt-BR")}</td>
      <td>{testando ? <Tag>testando...</Tag> : <TestResultBadge resultado={resultadoTeste} />}</td>
      <td>
        <div className="case-row-actions">
          <ActionIcon icon="shield" label="Rotacionar credencial" onClick={() => onEditar(segredo)} />
          <ActionIcon icon="pulse" label="Testar direto no provedor" disabled={testando}
            onClick={() => onTestar(segredo, "provedor")} />
          {segredo.roteado_por_litellm && (
            <ActionIcon icon="send" label="Testar via LiteLLM" disabled={testando}
              onClick={() => onTestar(segredo, "litellm")} />
          )}
        </div>
      </td>
    </tr>
  );
}

function SecretsTab({ onToast }) {
  const [itens, setItens] = React.useState([]);
  const [carregando, setCarregando] = React.useState(true);
  const [erroLista, setErroLista] = React.useState(null);

  const [editando, setEditando] = React.useState(null); // null | "novo" | segredo
  const [busy, setBusy] = React.useState(false);
  const [erroForm, setErroForm] = React.useState(null);
  const [testandoForm, setTestandoForm] = React.useState(false);
  const [resultadoForm, setResultadoForm] = React.useState(null);

  // Resultado do último teste por linha — só nesta sessão de tela. O backend
  // não guarda "último resultado" no segredo, só em registros de auditoria
  // (RF-CONFIG-14), que não são o que esta lista consulta.
  const [resultadosPorChave, setResultadosPorChave] = React.useState({});
  const [testandoChave, setTestandoChave] = React.useState(null);

  const carregar = React.useCallback(() => {
    setCarregando(true);
    setErroLista(null);
    window.API.listSecrets().then(itens => {
      setItens(itens || []);
      setCarregando(false);
    }).catch(erro => {
      setErroLista(erro);
      setCarregando(false);
    });
  }, []);

  React.useEffect(() => { carregar(); }, [carregar]);

  const salvar = (chave, dados) => {
    setBusy(true);
    setErroForm(null);
    window.API.updateSecret(chave, dados).then(() => {
      setBusy(false);
      const eraNovo = editando === "novo";
      setEditando(null);
      setResultadoForm(null);
      onToast(eraNovo ? "Credencial cadastrada." : "Credencial rotacionada.");
      carregar();
    }).catch(erro => {
      setBusy(false);
      setErroForm(erro);
    });
  };

  const testarNoFormulario = (pedido) => {
    setTestandoForm(true);
    setResultadoForm(null);
    const { chave, ...corpo } = pedido;
    window.API.testSecret(chave, corpo).then(resultado => {
      setTestandoForm(false);
      setResultadoForm(resultado);
    }).catch(erro => {
      setTestandoForm(false);
      setResultadoForm({ sucesso: false, mensagem: mensagemDeErroDeConfiguracao(erro) });
    });
  };

  const testarNaLista = (segredo, etapa) => {
    setTestandoChave(segredo.chave);
    setErroLista(null);
    window.API.testSecret(segredo.chave, { etapa }).then(resultado => {
      setTestandoChave(null);
      setResultadosPorChave(anterior => ({ ...anterior, [segredo.chave]: resultado }));
    }).catch(erro => {
      setTestandoChave(null);
      setResultadosPorChave(anterior => ({
        ...anterior,
        [segredo.chave]: { sucesso: false, etapa, mensagem: mensagemDeErroDeConfiguracao(erro) },
      }));
    });
  };

  if (editando) {
    return (
      <div>
        <div style={{ marginBottom: "var(--sp-5)" }}>
          <h2 style={{ fontSize: "1.1rem", margin: 0 }}>
            {editando === "novo" ? "Nova credencial" : "Rotacionar " + editando.chave}
          </h2>
          <p className="page-desc" style={{ margin: "4px 0 0" }}>
            O valor nunca é reexibido depois de salvo — só os últimos caracteres, como metadado.
          </p>
        </div>
        <SecretForm
          segredo={editando === "novo" ? null : editando}
          busy={busy}
          erro={erroForm}
          testando={testandoForm}
          resultadoTeste={resultadoForm}
          onTestar={testarNoFormulario}
          onSalvar={salvar}
          onCancelar={() => { setEditando(null); setErroForm(null); setResultadoForm(null); }}
        />
      </div>
    );
  }

  return (
    <div>
      {erroLista && (
        <InlineNote kind="error" title="Não foi possível concluir" onClose={() => setErroLista(null)}>
          {mensagemDeErroDeConfiguracao(erroLista)}
        </InlineNote>
      )}

      <div className="toolbar">
        <div className="spacer"></div>
        <Btn kind="primary" icon="plus" onClick={() => setEditando("novo")}>Nova credencial</Btn>
      </div>

      <div className="card" style={{ overflow: "hidden" }}>
        {carregando ? (
          <div style={{ textAlign: "center", padding: "var(--sp-6)", color: "var(--text-faint)" }}>Carregando...</div>
        ) : (
          <table className="tbl">
            <thead>
              <tr>
                <th>Credencial</th><th>Categoria</th><th>Valor</th>
                <th>Atualizada em</th><th>Último teste</th><th><span className="sr-only">Ações</span></th>
              </tr>
            </thead>
            <tbody>
              {itens.map(segredo => (
                <SecretRow key={segredo.chave} segredo={segredo}
                  onEditar={setEditando}
                  onTestar={testarNaLista}
                  testando={testandoChave === segredo.chave}
                  resultadoTeste={resultadosPorChave[segredo.chave]} />
              ))}
            </tbody>
          </table>
        )}
        {!carregando && !itens.length && (
          <div style={{ textAlign: "center", padding: "var(--sp-7)", color: "var(--text-faint)" }}>
            Nenhuma credencial cadastrada ainda.
          </div>
        )}
      </div>
    </div>
  );
}

/* --- Tela --------------------------------------------------------------- */

function SettingsView({ onToast }) {
  const [aba, setAba] = React.useState("parametros");

  return (
    <div className="scroll">
      <div className="page fade-in">
        <div className="page-head">
          <div style={{ flex: 1 }}>
            <div className="page-eyebrow">Administração</div>
            <h1 className="page-title">Configurações</h1>
            <p className="page-desc">Parâmetros do Portal e credenciais externas de IA — sem redeploy.</p>
          </div>
        </div>

        <div className="seg" aria-label="Seção de Configurações" style={{ marginBottom: "var(--sp-5)" }}>
          <button className={aba === "parametros" ? "on" : ""} onClick={() => setAba("parametros")}>Parâmetros</button>
          <button className={aba === "segredos" ? "on" : ""} onClick={() => setAba("segredos")}>Segredos</button>
        </div>

        {aba === "parametros" ? <ParametersTab onToast={onToast} /> : <SecretsTab onToast={onToast} />}
      </div>
    </div>
  );
}

Object.assign(window, { SettingsView });