/* Administração de dispositivos de RV — ESP-0009 (RF-DISPOSITIVOS-01, 08, 12,
   13, 17). Vive dentro do shell, como `view_users.jsx`.

   Esconder o item de menu não é proteção — `/api/devices` recusa quem não é
   administrador. As rotas públicas de registro (`/registrations/*`) são do app
   de RV; esta tela só faz o lado administrativo.

   O painel "Conectar dispositivo" gera, client-side, um QR-Code com a URL do
   Portal (`window.NAZIDE_CONFIG.API_BASE`) para o headset ler na tela de
   configuração. O QR carrega **só a URL**, nunca o segredo. */

const STATUS_DO_DISPOSITIVO = {
  pendente: { rotulo: "Pendente", tag: "accent" },
  ativo: { rotulo: "Ativo", tag: "go" },
  inativo: { rotulo: "Inativo", tag: "danger" },
};

const ERROS_DE_DISPOSITIVO = {
  codigo_de_pareamento_invalido: "Código de pareamento incorreto. Confira o que o app exibe.",
  install_id_ja_registrado: null, // a mensagem do backend já orienta
  status_invalido: null,
  credencial_ja_resgatada: "A credencial deste dispositivo já foi resgatada.",
  dispositivo_nao_encontrado: "Dispositivo não encontrado. Atualize a listagem.",
  pendentes_no_limite: null,
};

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

function formatarInstante(iso) {
  if (!iso) return "—";
  try {
    return new Date(iso).toLocaleString("pt-BR", {
      day: "2-digit", month: "2-digit", year: "numeric",
      hour: "2-digit", minute: "2-digit",
    });
  } catch (e) {
    return iso;
  }
}

/* --- QR-Code client-side (biblioteca qrcode-generator via CDN) ------------- */

function QrCode({ texto, tamanho = 200 }) {
  const dataUrl = React.useMemo(() => {
    if (!texto || typeof window.qrcode !== "function") return null;
    try {
      const qr = window.qrcode(0, "M"); // versão automática, correção média
      qr.addData(texto);
      qr.make();
      return qr.createDataURL(5, 4); // cellSize (px), margin (módulos)
    } catch (e) {
      return null;
    }
  }, [texto]);

  if (!dataUrl) {
    return <code className="qr-fallback">{texto || "URL não configurada"}</code>;
  }
  return (
    <img className="qr-img" src={dataUrl} alt={"QR-Code da URL do Portal: " + texto}
      style={{ width: tamanho, height: tamanho }} />
  );
}

function PainelConectarDispositivo() {
  const apiBase = (window.NAZIDE_CONFIG && window.NAZIDE_CONFIG.API_BASE) || "";

  return (
    <div className="card qr-panel">
      <div className="qr-panel-texto">
        <div className="row-title">Conectar um dispositivo</div>
        <p className="page-desc" style={{ margin: "var(--sp-2) 0 0" }}>
          Na primeira execução, o app de RV pede a URL do Portal. Aponte o headset
          para este QR-Code — ou digite a URL no teclado do visor. O código
          transporta apenas o endereço, nunca uma credencial.
        </p>
        {apiBase ? (
          <code className="qr-url">{apiBase}</code>
        ) : (
          <InlineNote kind="warning" title="URL do Portal não configurada">
            Defina <code>window.NAZIDE_CONFIG.API_BASE</code> em <code>config.js</code>{" "}
            para gerar o QR-Code.
          </InlineNote>
        )}
      </div>
      {apiBase && (
        <div className="qr-panel-code">
          <QrCode texto={apiBase} />
        </div>
      )}
    </div>
  );
}

/* --- Modais -------------------------------------------------------------- */

function ModalAprovar({ dispositivo, onConfirmar, onFechar, busy, erro }) {
  const [codigo, setCodigo] = React.useState("");
  const [nome, setNome] = React.useState(dispositivo.nome || "");
  const codigoCompleto = codigo.trim().length === 6;

  return (
    <ConfirmModal
      open
      title="Aprovar dispositivo"
      confirmLabel="Aprovar"
      confirmIcon="checkCircle"
      busy={busy}
      error={erro ? { code: erro.code, message: mensagemDeErroDeDispositivo(erro) } : null}
      onConfirm={() => codigoCompleto && onConfirmar({ pairing_code: codigo.trim().toUpperCase(), nome: nome.trim() || undefined })}
      onClose={onFechar}
    >
      <p className="page-desc" style={{ marginTop: 0 }}>
        O app mostra um <b>código de pareamento</b> de 6 caracteres. Digite-o
        exatamente como aparece no visor — é a prova de que você está diante do
        aparelho certo.
      </p>
      <div className="fgrid c2">
        <FInput label="Código de pareamento" required value={codigo}
          onChange={v => setCodigo(v.toUpperCase().slice(0, 6))}
          placeholder="ABC234" />
        <FInput label="Rótulo do dispositivo" value={nome} onChange={setNome}
          placeholder="Quest — bancada da janela" />
      </div>
      <div className="row-sub" style={{ marginTop: "var(--sp-3)" }}>
        <code>{dispositivo.install_id}</code>
      </div>
    </ConfirmModal>
  );
}

function ModalSegredo({ dispositivo, onFechar }) {
  const [copiado, setCopiado] = React.useState(false);
  const copiar = () => {
    try {
      navigator.clipboard.writeText(dispositivo.secret);
      setCopiado(true);
      setTimeout(() => setCopiado(false), 2000);
    } catch (e) {}
  };
  return (
    <ModalSemSaida
      title="Credencial do dispositivo"
      footer={<Btn kind="primary" onClick={onFechar}>Entendi, guardei a credencial</Btn>}
    >
      <InlineNote kind="warning" title="Esta credencial não será exibida novamente">
        Copie o segredo agora e provisione-o no dispositivo{" "}
        <code>{dispositivo.nome}</code>. Ele não fica salvo no Portal.
      </InlineNote>
      <div className="segredo-box">
        <code>{dispositivo.secret}</code>
        <Btn kind="ghost" icon="copy" onClick={copiar}>{copiado ? "Copiado" : "Copiar"}</Btn>
      </div>
    </ModalSemSaida>
  );
}

function ModalEditarRotulo({ dispositivo, onConfirmar, onFechar, busy, erro }) {
  const [nome, setNome] = React.useState(dispositivo.nome || "");
  return (
    <ConfirmModal
      open
      title="Editar rótulo"
      confirmLabel="Salvar"
      busy={busy}
      error={erro ? { code: erro.code, message: mensagemDeErroDeDispositivo(erro) } : null}
      onConfirm={() => nome.trim() && onConfirmar(nome.trim())}
      onClose={onFechar}
    >
      <FInput label="Rótulo do dispositivo" required value={nome} onChange={setNome}
        placeholder="Quest — bancada da janela" />
    </ConfirmModal>
  );
}

/* --- Vista ------------------------------------------------------------- */

const FILTROS = [
  ["pendente", "Pendentes"],
  ["ativo", "Ativos"],
  ["inativo", "Inativos"],
  ["", "Todos"],
];

function DevicesView({ onToast }) {
  const [itens, setItens] = React.useState([]);
  const [filtro, setFiltro] = React.useState("pendente");
  const [carregando, setCarregando] = React.useState(true);
  const [erroLista, setErroLista] = React.useState(null);

  const [aprovando, setAprovando] = React.useState(null);
  const [editando, setEditando] = React.useState(null);
  const [segredo, setSegredo] = React.useState(null);
  const [confirmando, setConfirmando] = React.useState(null); // {tipo, dispositivo}
  const [busy, setBusy] = React.useState(false);
  const [erroForm, setErroForm] = React.useState(null);

  const carregar = React.useCallback(() => {
    setCarregando(true);
    setErroLista(null);
    window.API.listDevices(filtro ? { status: filtro } : {})
      .then(dados => {
        setItens(dados.items || []);
        setCarregando(false);
      })
      .catch(erro => {
        setErroLista(erro);
        setItens([]);
        setCarregando(false);
      });
  }, [filtro]);

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

  const aprovar = (dados) => {
    setBusy(true);
    setErroForm(null);
    window.API.approveDevice(aprovando.id, dados)
      .then(() => {
        setBusy(false);
        setAprovando(null);
        onToast("Dispositivo aprovado. O app pode resgatar a credencial.");
        carregar();
      })
      .catch(erro => { setBusy(false); setErroForm(erro); });
  };

  const editarRotulo = (nome) => {
    setBusy(true);
    setErroForm(null);
    window.API.updateDevice(editando.id, { nome })
      .then(() => {
        setBusy(false);
        setEditando(null);
        onToast("Rótulo atualizado.");
        carregar();
      })
      .catch(erro => { setBusy(false); setErroForm(erro); });
  };

  const executarConfirmacao = () => {
    const { tipo, dispositivo } = confirmando;
    setBusy(true);
    setErroForm(null);
    let promessa;
    if (tipo === "recusar") promessa = window.API.rejectDevice(dispositivo.id);
    else if (tipo === "desativar") promessa = window.API.setDeviceActive(dispositivo.id, false);
    else if (tipo === "ativar") promessa = window.API.setDeviceActive(dispositivo.id, true);
    else if (tipo === "rotacionar") promessa = window.API.rotateDeviceSecret(dispositivo.id);
    else return;

    promessa
      .then(resultado => {
        setBusy(false);
        setConfirmando(null);
        if (tipo === "rotacionar" && resultado && resultado.secret) {
          setSegredo(resultado);
        } else {
          onToast({
            recusar: "Solicitação recusada.",
            desativar: "Dispositivo desativado.",
            ativar: "Dispositivo reativado.",
          }[tipo]);
        }
        carregar();
      })
      .catch(erro => { setBusy(false); setErroForm(erro); });
  };

  const TEXTO_CONFIRMACAO = {
    recusar: { titulo: "Recusar solicitação", label: "Recusar", corpo: "A solicitação pendente será apagada. Se o app tentar de novo, uma nova solicitação aparecerá aqui." },
    desativar: { titulo: "Desativar dispositivo", label: "Desativar", corpo: "A próxima autenticação do dispositivo passa a falhar. Ele não é apagado — pode ser reativado depois." },
    ativar: { titulo: "Reativar dispositivo", label: "Reativar", corpo: "O dispositivo volta a autenticar com a credencial que já tem." },
    rotacionar: { titulo: "Rotacionar credencial", label: "Rotacionar", corpo: "Um novo segredo é gerado e o anterior deixa de valer imediatamente. O novo segredo aparece uma única vez — provisione-o no dispositivo." },
  };

  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">Dispositivos</h1>
            <p className="page-desc">
              Headsets Meta Quest cadastrados. Cada um se registra pelo próprio
              app; aqui você aprova, ativa e desativa.
            </p>
          </div>
        </div>

        <PainelConectarDispositivo />

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

        <div className="toolbar">
          <div className="seg" aria-label="Filtrar por situação">
            {FILTROS.map(([valor, rotulo]) => (
              <button key={valor || "todos"} className={filtro === valor ? "on" : ""}
                onClick={() => setFiltro(valor)}>{rotulo}</button>
            ))}
          </div>
        </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>Dispositivo</th>
                  <th>Situação</th>
                  <th>Último acesso</th>
                  <th><span className="sr-only">Ações</span></th>
                </tr>
              </thead>
              <tbody>
                {itens.map(dispositivo => {
                  const meta = STATUS_DO_DISPOSITIVO[dispositivo.status] || { rotulo: dispositivo.status, tag: "" };
                  const pendente = dispositivo.status === "pendente";
                  return (
                    <tr key={dispositivo.id}>
                      <td style={{ width: "40%" }}>
                        <div className="row-title">{dispositivo.nome}</div>
                        <div className="row-sub">
                          <code>{dispositivo.install_id}</code>
                          {dispositivo.app_version && <span className="faint"> · app {dispositivo.app_version}</span>}
                        </div>
                      </td>
                      <td>
                        <Tag kind={meta.tag}>{meta.rotulo}</Tag>
                        {!pendente && !dispositivo.credencial_resgatada && (
                          <Tag>aguardando resgate</Tag>
                        )}
                      </td>
                      <td className="cell-muted">{formatarInstante(dispositivo.ultimo_acesso_em)}</td>
                      <td>
                        <div className="case-row-actions">
                          {pendente ? (
                            <>
                              <ActionIcon icon="checkCircle" label="Aprovar" go
                                onClick={() => { setErroForm(null); setAprovando(dispositivo); }} />
                              <ActionIcon icon="x" label="Recusar"
                                onClick={() => { setErroForm(null); setConfirmando({ tipo: "recusar", dispositivo }); }} />
                            </>
                          ) : (
                            <>
                              <ActionIcon icon="edit" label="Editar rótulo"
                                onClick={() => { setErroForm(null); setEditando(dispositivo); }} />
                              {dispositivo.status === "ativo" ? (
                                <ActionIcon icon="x" label="Desativar"
                                  onClick={() => { setErroForm(null); setConfirmando({ tipo: "desativar", dispositivo }); }} />
                              ) : (
                                <ActionIcon icon="check" label="Reativar"
                                  onClick={() => { setErroForm(null); setConfirmando({ tipo: "ativar", dispositivo }); }} />
                              )}
                              {dispositivo.status === "ativo" && dispositivo.credencial_resgatada && (
                                <ActionIcon icon="restore" label="Rotacionar credencial"
                                  onClick={() => { setErroForm(null); setConfirmando({ tipo: "rotacionar", dispositivo }); }} />
                              )}
                            </>
                          )}
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
          {!carregando && !itens.length && (
            <div style={{ textAlign: "center", padding: "var(--sp-7)", color: "var(--text-faint)" }}>
              {filtro === "pendente" ? "Nenhuma solicitação de registro pendente." : "Nenhum dispositivo nesta situação."}
            </div>
          )}
        </div>
      </div>

      {aprovando && (
        <ModalAprovar dispositivo={aprovando} busy={busy} erro={erroForm}
          onConfirmar={aprovar}
          onFechar={() => { setAprovando(null); setErroForm(null); }} />
      )}

      {editando && (
        <ModalEditarRotulo dispositivo={editando} busy={busy} erro={erroForm}
          onConfirmar={editarRotulo}
          onFechar={() => { setEditando(null); setErroForm(null); }} />
      )}

      {confirmando && (
        <ConfirmModal
          open
          title={TEXTO_CONFIRMACAO[confirmando.tipo].titulo}
          confirmLabel={TEXTO_CONFIRMACAO[confirmando.tipo].label}
          busy={busy}
          error={erroForm ? { code: erroForm.code, message: mensagemDeErroDeDispositivo(erroForm) } : null}
          onConfirm={executarConfirmacao}
          onClose={() => { setConfirmando(null); setErroForm(null); }}
        >
          <p style={{ margin: 0 }}>{TEXTO_CONFIRMACAO[confirmando.tipo].corpo}</p>
          <div className="row-sub" style={{ marginTop: "var(--sp-3)" }}>
            <code>{confirmando.dispositivo.nome}</code>
          </div>
        </ConfirmModal>
      )}

      {segredo && (
        <ModalSegredo dispositivo={segredo} onFechar={() => setSegredo(null)} />
      )}
    </div>
  );
}

Object.assign(window, { DevicesView });