/* ============================================================
   EDUCARE — Gestão de contas

   Painel da dona do produto: criar, editar, cancelar, reativar e apagar
   contas, e enxergar a situação de cada uma.

   A restrição de verdade está no SERVIDOR, não aqui. Editar plano e
   datas passa pelas funções SQL admin_* (SECURITY DEFINER, checam
   is_admin); criar e apagar passam pela Edge Function admin-contas, que
   detém a service role. Esconder o menu é conveniência — quem forçar a
   tela não consegue nada.
   ============================================================ */
(function () {
  const { useState, useEffect } = React;
  const Icon = window.Icon;

  /* ------------------------------------------------------------
     Rótulos dos planos, para o seletor deste painel.

     A LISTA fica aqui, e não em billing_plans, porque este painel
     mostra também os planos legados e o "teste", que não é plano e sim
     status. É a única tela do app que precisa enxergar as duas eras ao
     mesmo tempo.

     A troca de plano em si passa por admin_definir_plano, que desde
     20260803030000 escreve em subscriptions (que é o que decide o
     acesso) e mantém profiles em dia para esta tela. Ou seja: liberar
     conta por aqui libera de verdade.
     ------------------------------------------------------------ */
  const ORDEM = ["teste", "inicio", "clinico", "clinica", "pro", "ilimitado", "anual"];

  const PLANOS_LEGADO = {
    teste:     { rotulo: "Teste grátis",       precoRotulo: "grátis por 3 dias" },
    inicio:    { rotulo: "Início",             precoRotulo: "R$ 39,90/mês" },
    clinico:   { rotulo: "Clínico",            precoRotulo: "R$ 79,90/mês" },
    clinica:   { rotulo: "Clínica",            precoRotulo: "R$ 149,90/mês" },
    pro:       { rotulo: "Pro (legado)",       precoRotulo: "R$ 59,90/mês" },
    ilimitado: { rotulo: "Ilimitado (legado)", precoRotulo: "R$ 99,90/mês" },
    anual:     { rotulo: "Anual (legado)",     precoRotulo: "R$ 799,90/ano" },
  };
  const rotuloDoPlano = (k) => (PLANOS_LEGADO[k] || { rotulo: k || "—" }).rotulo;

  /* Situação da conta no modelo antigo. Pura, calculada e nunca
     gravada: data guardada e situação calculada não podem divergir. */
  const SITUACOES = {
    em_teste:      { rotulo: "Em teste",      cor: "#0F766E", temAcesso: true },
    teste_vencido: { rotulo: "Teste vencido", cor: "#EF4444", temAcesso: false },
    ativa:         { rotulo: "Ativa",         cor: "#16A34A", temAcesso: true },
    cancelada:     { rotulo: "Cancelada",     cor: "#D97706", temAcesso: true },
    vencida:       { rotulo: "Vencida",       cor: "#EF4444", temAcesso: false },
  };

  function situacao(conta) {
    const quando = (v) => (v ? new Date(v).getTime() : null);
    const agora = Date.now();
    const fimTeste = quando(conta.teste_expira_em);
    const fimAssinatura = quando(conta.assinatura_expira_em);
    const cancelada = quando(conta.cancelada_em);

    let chave;
    if (conta.plano === "teste") {
      chave = fimTeste && agora > fimTeste ? "teste_vencido" : "em_teste";
    } else if (fimAssinatura && agora > fimAssinatura) {
      chave = "vencida";
    } else if (cancelada) {
      chave = "cancelada";
    } else {
      chave = "ativa";
    }
    return { chave, ...SITUACOES[chave] };
  }

  const fmtData = (v) => (v ? new Date(v).toLocaleDateString("pt-BR") : "—");

  /* Data que interessa em cada situação: no teste é o fim do teste, no
     resto é o fim do período pago. */
  function validadeDe(conta) {
    return conta.plano === "teste" ? conta.teste_expira_em : conta.assinatura_expira_em;
  }

  /* <input type="date"> fala "AAAA-MM-DD"; o banco fala ISO completo. */
  const paraCampoData = (v) => (v ? new Date(v).toISOString().slice(0, 10) : "");
  const paraISO = (v) => (v ? new Date(`${v}T23:59:59`).toISOString() : null);

  const resumoDoPlano = (chave) =>
    (PLANOS_LEGADO[chave] || { precoRotulo: "" }).precoRotulo;

  function Chip({ situacao }) {
    return (
      <span
        className="chip"
        style={{ background: situacao.cor + "1A", color: situacao.cor, fontWeight: 800 }}
      >
        {situacao.rotulo}
      </span>
    );
  }

  /* ---------------- criar conta ---------------- */
  function ModalCriar({ onClose, onCriada }) {
    const [f, setF] = useState({ nome: "", email: "", senha: "", plano: "teste" });
    const [erro, setErro] = useState("");
    const [salvando, setSalvando] = useState(false);
    const set = (k) => (e) => setF((a) => ({ ...a, [k]: e.target.value }));

    async function criar() {
      setErro(""); setSalvando(true);
      const { data, error } = await window.sb.functions.invoke("admin-contas", {
        body: { acao: "criar", ...f },
      });
      setSalvando(false);

      /* O supabase-js devolve mensagem genérica; a útil vem no corpo. */
      if (error) {
        let msg = "Não foi possível criar a conta.";
        if (error.context && typeof error.context.json === "function") {
          try { const c = await error.context.json(); if (c && c.erro) msg = c.erro; } catch (e) { /* */ }
        }
        setErro(msg); return;
      }
      if (data && data.erro) { setErro(data.erro); return; }
      onCriada(data && data.aviso ? data.aviso : `Conta de ${f.email} criada.`);
    }

    return (
      <div className="modal-scrim" onClick={onClose}>
        <div className="modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 520 }}>
          <div className="modal-head">
            <div><h3>Nova conta</h3><p>A profissional entra com o e-mail e a senha que você definir aqui.</p></div>
            <button className="x" onClick={onClose} aria-label="Fechar"><Icon name="x" size={18} /></button>
          </div>
          <div className="modal-body">
            <div className="fld"><label>Nome</label>
              <input className="ctrl" value={f.nome} onChange={set("nome")} placeholder="Nome da profissional" /></div>
            <div className="fld"><label>E-mail *</label>
              <input className="ctrl" type="email" value={f.email} onChange={set("email")} placeholder="profissional@email.com" /></div>
            <div className="fld"><label>Senha *</label>
              <input className="ctrl" value={f.senha} onChange={set("senha")} placeholder="mínimo 8 caracteres" /></div>
            <div className="fld"><label>Plano inicial</label>
              <select className="ctrl" value={f.plano} onChange={set("plano")}>
                {ORDEM.map((k) => <option key={k} value={k}>{rotuloDoPlano(k)}</option>)}
              </select></div>
            <p className="help-text">
              A conta já nasce confirmada — a pessoa não recebe e-mail de confirmação.
              Combine com ela para trocar a senha no primeiro acesso.
            </p>
            {erro && <p className="form-err" role="alert" style={{ color: "#EF4444", fontWeight: 700, fontSize: 13.5 }}>
              <Icon name="x" size={15} /> {erro}</p>}
            <div className="save-bar">
              <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
              <button className="btn btn-primary" onClick={criar}
                disabled={salvando || !f.email.trim() || f.senha.length < 8}>
                <Icon name="plus" size={17} /> {salvando ? "Criando…" : "Criar conta"}
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  /* ---------------- editar conta ---------------- */
  function ModalEditar({ conta, onClose, onSalva }) {
    const [f, setF] = useState({
      nome: conta.nome || "",
      plano: conta.plano,
      expiraTeste: paraCampoData(conta.teste_expira_em),
      expiraAssinatura: paraCampoData(conta.assinatura_expira_em),
    });
    const [erro, setErro] = useState("");
    const [salvando, setSalvando] = useState(false);
    const set = (k) => (e) => setF((a) => ({ ...a, [k]: e.target.value }));

    async function salvar() {
      setErro(""); setSalvando(true);
      const { error } = await window.sb.rpc("admin_atualizar_conta", {
        conta: conta.id,
        novo_nome: f.nome,
        novo_plano: f.plano,
        expira_teste: paraISO(f.expiraTeste),
        expira_assinatura: paraISO(f.expiraAssinatura),
      });
      setSalvando(false);
      if (error) { setErro(error.message); return; }
      onSalva(`Conta de ${conta.email} atualizada.`);
    }

    return (
      <div className="modal-scrim" onClick={onClose}>
        <div className="modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 520 }}>
          <div className="modal-head">
            <div><h3>Editar conta</h3><p>{conta.email}</p></div>
            <button className="x" onClick={onClose} aria-label="Fechar"><Icon name="x" size={18} /></button>
          </div>
          <div className="modal-body">
            <div className="fld"><label>Nome</label>
              <input className="ctrl" value={f.nome} onChange={set("nome")} /></div>
            <div className="fld"><label>Plano</label>
              <select className="ctrl" value={f.plano} onChange={set("plano")}>
                {ORDEM.map((k) => <option key={k} value={k}>{rotuloDoPlano(k)}</option>)}
              </select></div>
            <div className="fld"><label>Teste vence em</label>
              <input className="ctrl" type="date" value={f.expiraTeste} onChange={set("expiraTeste")} /></div>
            <div className="fld"><label>Assinatura vale até</label>
              <input className="ctrl" type="date" value={f.expiraAssinatura} onChange={set("expiraAssinatura")} /></div>
            <p className="help-text">
              A data em branco significa "sem prazo". No plano de teste vale a primeira data;
              nos planos pagos, a segunda.
            </p>
            {erro && <p className="form-err" role="alert" style={{ color: "#EF4444", fontWeight: 700, fontSize: 13.5 }}>
              <Icon name="x" size={15} /> {erro}</p>}
            <div className="save-bar">
              <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
              <button className="btn btn-primary" onClick={salvar} disabled={salvando}>
                <Icon name="clipboardCheck" size={17} /> {salvando ? "Salvando…" : "Salvar"}
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  /* ---------------- apagar conta ---------------- */
  function ModalApagar({ conta, onClose, onApagada }) {
    const [confirmacao, setConfirmacao] = useState("");
    const [erro, setErro] = useState("");
    const [apagando, setApagando] = useState(false);
    const liberado = confirmacao.trim().toLowerCase() === "apagar";

    async function apagar() {
      setErro(""); setApagando(true);
      const { data, error } = await window.sb.functions.invoke("admin-contas", {
        body: { acao: "apagar", id: conta.id },
      });
      setApagando(false);
      if (error) {
        let msg = "Não foi possível apagar a conta.";
        if (error.context && typeof error.context.json === "function") {
          try { const c = await error.context.json(); if (c && c.erro) msg = c.erro; } catch (e) { /* */ }
        }
        setErro(msg); return;
      }
      if (data && data.erro) { setErro(data.erro); return; }
      onApagada(`Conta de ${conta.email} apagada.`);
    }

    return (
      <div className="modal-scrim" onClick={onClose}>
        <div className="modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 520 }}>
          <div className="modal-head">
            <div><h3 style={{ color: "#EF4444" }}>Apagar conta</h3><p>{conta.email}</p></div>
            <button className="x" onClick={onClose} aria-label="Fechar"><Icon name="x" size={18} /></button>
          </div>
          <div className="modal-body">
            <div className="an-status todo" style={{ alignItems: "flex-start", marginBottom: 14 }}>
              <span className="ai"><Icon name="x" size={24} /></span>
              <div>
                <b>Isso não tem volta</b>
                <span>
                  Apaga a conta e junto todos os dados dela: pacientes, anamneses, avaliações,
                  laudos, planejamentos, agenda e financeiro. Não existe lixeira nem backup pelo
                  painel. Se a intenção é só interromper a cobrança, use "Cancelar assinatura".
                </span>
              </div>
            </div>
            <div className="fld">
              <label>Para confirmar, digite <b>APAGAR</b></label>
              <input className="ctrl" value={confirmacao} onChange={(e) => setConfirmacao(e.target.value)} placeholder="APAGAR" />
            </div>
            {erro && <p className="form-err" role="alert" style={{ color: "#EF4444", fontWeight: 700, fontSize: 13.5 }}>
              <Icon name="x" size={15} /> {erro}</p>}
            <div className="save-bar">
              <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
              <button className="btn btn-primary" onClick={apagar} disabled={!liberado || apagando}
                style={{ background: liberado ? "#EF4444" : undefined, opacity: liberado ? 1 : 0.5 }}>
                <Icon name="x" size={17} /> {apagando ? "Apagando…" : "Apagar definitivamente"}
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  /* ---------------- pagamentos recebidos ----------------
     O link de assinatura é o mesmo para todas, então o aviso de
     pagamento só identifica a conta pelo e-mail do checkout. Quando
     casa, a liberação já aconteceu sozinha e o registro aparece aqui só
     como comprovante. Quando não casa, é aqui que se resolve. */
  const brl = (centavos) =>
    centavos == null ? "—" : "R$ " + (centavos / 100).toLocaleString("pt-BR", { minimumFractionDigits: 2 });

  /* Estornado é a única situação vermelha: dinheiro que voltou e acesso
     que foi retirado sozinho. Cancelado não é problema — a recorrência
     foi desligada e o período pago segue valendo até o fim. */
  const SITUACAO_PAGAMENTO = {
    aplicado: { rotulo: "Liberado", cor: "#16A34A" },
    nao_identificado: { rotulo: "Precisa de você", cor: "#D97706" },
    estornado: { rotulo: "Estornado", cor: "#EF4444" },
    cancelado: { rotulo: "Não renova mais", cor: "#6366F1" },
    ignorado: { rotulo: "Ignorado", cor: "var(--text-3)" },
  };

  function Pagamentos({ contas, onMudou, onAviso }) {
    const [lista, setLista] = useState(null);
    const [erro, setErro] = useState("");
    const [ocupado, setOcupado] = useState(null);
    const [escolha, setEscolha] = useState({}); // id do pagamento -> id da conta

    async function carregar() {
      setErro("");
      const { data, error } = await window.sb.rpc("admin_listar_pagamentos");
      if (error) { setErro(error.message); setLista([]); return; }
      setLista(data || []);
    }

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

    async function vincular(pg) {
      const conta = escolha[pg.id];
      if (!conta) return;
      setOcupado(pg.id);
      const { error } = await window.sb.rpc("admin_vincular_pagamento", { pagamento: pg.id, conta });
      setOcupado(null);
      if (error) { onAviso({ kind: "err", text: error.message }); return; }
      onAviso({ text: "Pagamento vinculado e plano liberado." });
      await carregar();
      onMudou();
    }

    async function ignorar(pg) {
      setOcupado(pg.id);
      const { error } = await window.sb.rpc("admin_ignorar_pagamento", { pagamento: pg.id });
      setOcupado(null);
      if (error) { onAviso({ kind: "err", text: error.message }); return; }
      await carregar();
    }

    const pendentes = (lista || []).filter((p) => p.situacao === "nao_identificado").length;

    return (
      <>
        <div className="page-head" style={{ marginTop: 26 }}>
          <div>
            <h1 style={{ fontSize: 22 }}><Icon name="wallet" size={22} /> Pagamentos recebidos</h1>
            <p className="sub">
              {pendentes > 0
                ? `${pendentes} pagamento${pendentes > 1 ? "s" : ""} aguardando você identificar a conta.`
                : "Avisos da Cakto. O que é identificado libera o plano sozinho."}
            </p>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={carregar}>
            <Icon name="clipboardCheck" size={16} /> Atualizar
          </button>
        </div>

        {erro && (
          <p className="form-err" role="alert" style={{ color: "#EF4444", fontWeight: 700, fontSize: 13.5 }}>
            <Icon name="x" size={15} /> {erro}
          </p>
        )}

        {lista === null && <p className="help-text">Carregando pagamentos…</p>}

        {lista !== null && !lista.length && !erro && (
          <p className="help-text">
            Nenhum pagamento recebido ainda. Assim que a Cakto avisar o primeiro, ele aparece aqui.
          </p>
        )}

        {(lista || []).length > 0 && (
          <div style={{ overflowX: "auto" }}>
            <table className="hay-sheet">
              <thead>
                <tr><th>Quando</th><th>Quem pagou</th><th>Valor</th><th>Plano</th><th>Situação</th><th>Conta</th></tr>
              </thead>
              <tbody>
                {lista.map((pg) => {
                  const sit = SITUACAO_PAGAMENTO[pg.situacao] || SITUACAO_PAGAMENTO.ignorado;
                  const trabalhando = ocupado === pg.id;
                  return (
                    <tr key={pg.id} style={trabalhando ? { opacity: 0.5 } : null}>
                      <td className="c">{fmtData(pg.recebido_em)}</td>
                      <td>
                        {pg.nome || "—"}
                        <br /><span style={{ fontSize: 12, color: "var(--text-3)" }}>{pg.email || "sem e-mail no aviso"}</span>
                      </td>
                      <td className="c">{brl(pg.valor_centavos)}</td>
                      <td className="c">
                        {pg.plano ? rotuloDoPlano(pg.plano) : "—"}
                        {/* Sem o evento, um boleto só emitido e uma venda paga
                            ficam idênticos aqui: mesmo e-mail, mesmo valor. */}
                        {pg.evento && (
                          <><br /><span style={{ fontSize: 11.5, color: "var(--text-3)" }}>{pg.evento}</span></>
                        )}
                      </td>
                      <td>
                        <span className="chip" style={{ background: sit.cor + "1A", color: sit.cor, fontWeight: 800 }}>
                          {sit.rotulo}
                        </span>
                        {pg.observacao && (
                          <><br /><span style={{ fontSize: 11.5, color: "var(--text-3)" }}>{pg.observacao}</span></>
                        )}
                      </td>
                      <td>
                        {pg.situacao === "nao_identificado" ? (
                          <div style={{ display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center" }}>
                            <select
                              className="ctrl" style={{ padding: "4px 8px", minWidth: 190 }}
                              value={escolha[pg.id] || ""} disabled={trabalhando}
                              onChange={(e) => setEscolha((a) => ({ ...a, [pg.id]: e.target.value }))}
                            >
                              <option value="">Escolha a conta…</option>
                              {(contas || []).map((c) => (
                                <option key={c.id} value={c.id}>{c.email}</option>
                              ))}
                            </select>
                            <button className="btn btn-primary btn-xs" disabled={trabalhando || !escolha[pg.id]}
                              onClick={() => vincular(pg)}>Liberar</button>
                            <button className="btn btn-ghost btn-xs" disabled={trabalhando}
                              onClick={() => ignorar(pg)}>Ignorar</button>
                          </div>
                        ) : (
                          pg.conta_email || "—"
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </>
    );
  }

  /* ---------------- painel ---------------- */
  function AdminPlanos({ onBack }) {
    const [contas, setContas] = useState(null);
    const [erro, setErro] = useState("");
    const [busca, setBusca] = useState("");
    const [ocupado, setOcupado] = useState(null); // id em operação
    const [aviso, setAviso] = useState(null);
    const [modal, setModal] = useState(null);     // { tipo, conta }

    async function carregar() {
      setErro("");
      const { data, error } = await window.sb.rpc("admin_listar_contas");
      if (error) { setErro(error.message); setContas([]); return; }
      setContas(data || []);
    }

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

    /* Depois de qualquer mudança recarregamos do servidor: manter uma
       cópia esperta em memória convidaria a divergir do banco. */
    async function depoisDeMudar(texto) {
      setModal(null);
      setAviso({ text: texto });
      await carregar();
      await recarregarPlanoProprio();
    }

    async function recarregarPlanoProprio() {
      const { data: s } = await window.sb.auth.getSession();
      if (s && s.session) window.EducareBilling.carregar();
    }

    async function chamar(conta, fn, args, texto) {
      setOcupado(conta.id); setAviso(null);
      const { error } = await window.sb.rpc(fn, args);
      setOcupado(null);
      if (error) { setAviso({ kind: "err", text: error.message }); return; }
      depoisDeMudar(texto);
    }

    const trocarPlano = (conta, plano) => plano !== conta.plano && chamar(
      conta, "admin_definir_plano", { conta: conta.id, novo_plano: plano },
      `${conta.nome || conta.email} agora está no ${rotuloDoPlano(plano)}.`);

    const cancelar = (conta) => chamar(
      conta, "admin_cancelar_assinatura", { conta: conta.id },
      `Assinatura de ${conta.email} cancelada. O acesso vale até ${fmtData(conta.assinatura_expira_em)}.`);

    const reativar = (conta) => chamar(
      conta, "admin_reativar_assinatura", { conta: conta.id },
      `Assinatura de ${conta.email} reativada.`);

    const termo = busca.trim().toLowerCase();
    const visiveis = (contas || []).filter((c) =>
      !termo
      || String(c.nome || "").toLowerCase().includes(termo)
      || String(c.email || "").toLowerCase().includes(termo));

    const contagem = (chave) =>
      (contas || []).filter((c) => situacao(c).chave === chave).length;

    return (
      <>
        <div className="crumb">
          <button className="pt-back" onClick={onBack}><Icon name="chevL" size={16} /> Voltar</button>
        </div>
        <div className="page-head">
          <div>
            <h1><Icon name="users" size={26} /> Contas e planos</h1>
            <p className="sub">Crie, edite, cancele e acompanhe a situação de cada assinatura.</p>
          </div>
          <button className="btn btn-primary btn-sm" onClick={() => setModal({ tipo: "criar" })}>
            <Icon name="plus" size={17} /> Nova conta
          </button>
        </div>

        {contas && contas.length > 0 && (
          <div className="hay-scores" style={{ marginBottom: 14 }}>
            <div className="hsc"><span>Total</span><b>{contas.length}</b></div>
            <div className="hsc"><span>Em teste</span><b>{contagem("em_teste")}</b></div>
            <div className="hsc"><span>Ativas</span><b>{contagem("ativa")}</b></div>
            <div className="hsc"><span>Canceladas</span><b>{contagem("cancelada")}</b></div>
            <div className="hsc"><span>Sem acesso</span><b>{contagem("vencida") + contagem("teste_vencido")}</b></div>
          </div>
        )}

        <div className="form-card" style={{ marginBottom: 14 }}>
          <div className="sec-head">Planos</div>
          <div className="kv-grid">
            {ORDEM.map((k) => (
              <div className="kv" key={k}>
                <div className="k">{rotuloDoPlano(k)}</div>
                <div className="v" style={{ fontSize: 13 }}>{resumoDoPlano(k)}</div>
              </div>
            ))}
          </div>
          <p className="help-text" style={{ marginTop: 10 }}>
            O teste dura 3 dias com tudo liberado. Sem acesso, a conta consulta tudo o que já
            registrou mas não cria nada. Cancelar não corta na hora: vale até o fim do período pago.
          </p>
        </div>

        <input
          className="ctrl"
          placeholder="Buscar por nome ou e-mail..."
          value={busca}
          onChange={(e) => setBusca(e.target.value)}
          style={{ marginBottom: 12, maxWidth: 420 }}
        />

        {erro && (
          <p className="form-err" role="alert" style={{ color: "#EF4444", fontWeight: 700, fontSize: 13.5 }}>
            <Icon name="x" size={15} /> {erro}
          </p>
        )}

        {contas === null && <p className="help-text">Carregando contas…</p>}

        {contas !== null && !erro && !visiveis.length && (
          <p className="help-text">
            {termo ? "Nenhuma conta encontrada para essa busca." : "Nenhuma conta cadastrada ainda."}
          </p>
        )}

        {visiveis.length > 0 && (
          <div style={{ overflowX: "auto" }}>
            <table className="hay-sheet">
              <thead>
                <tr>
                  <th>Conta</th><th>Situação</th><th>Plano</th>
                  <th>Vale até</th><th>Último acesso</th><th>Ações</th>
                </tr>
              </thead>
              <tbody>
                {visiveis.map((c) => {
                  const sit = situacao(c);
                  const trabalhando = ocupado === c.id;
                  return (
                    <tr key={c.id} style={trabalhando ? { opacity: 0.5 } : null}>
                      <td>
                        <b>{c.nome || "—"}</b>
                        {c.is_admin && <span className="chip" style={{ marginLeft: 6 }}>admin</span>}
                        <br /><span style={{ fontSize: 12, color: "var(--text-3)" }}>{c.email}</span>
                      </td>
                      <td><Chip situacao={sit} /></td>
                      <td>
                        <select className="ctrl" value={c.plano} disabled={trabalhando}
                          onChange={(e) => trocarPlano(c, e.target.value)}
                          style={{ padding: "4px 8px", minWidth: 140 }}>
                          {ORDEM.map((k) => (
                            <option key={k} value={k}>{rotuloDoPlano(k)}</option>
                          ))}
                        </select>
                      </td>
                      <td className="c">{fmtData(validadeDe(c))}</td>
                      <td className="c">{fmtData(c.ultimo_acesso)}</td>
                      <td>
                        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                          <button className="btn btn-ghost btn-xs" disabled={trabalhando}
                            onClick={() => setModal({ tipo: "editar", conta: c })}>
                            <Icon name="fileText" size={13} /> Editar
                          </button>
                          {c.plano !== "teste" && (
                            c.cancelada_em
                              ? <button className="btn btn-ghost btn-xs" disabled={trabalhando} onClick={() => reativar(c)}>
                                  <Icon name="clipboardCheck" size={13} /> Reativar
                                </button>
                              : <button className="btn btn-ghost btn-xs" disabled={trabalhando} onClick={() => cancelar(c)}>
                                  <Icon name="x" size={13} /> Cancelar
                                </button>
                          )}
                          {!c.is_admin && (
                            <button className="btn btn-ghost btn-xs" disabled={trabalhando}
                              style={{ color: "#EF4444" }}
                              onClick={() => setModal({ tipo: "apagar", conta: c })}>
                              <Icon name="x" size={13} /> Apagar
                            </button>
                          )}
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}

        {aviso && (
          <p role="status" style={{
            marginTop: 12, fontSize: 13.5, fontWeight: 700,
            color: aviso.kind === "err" ? "#EF4444" : "var(--primary)",
            display: "flex", alignItems: "center", gap: 7,
          }}>
            <Icon name={aviso.kind === "err" ? "x" : "clipboardCheck"} size={15} /> {aviso.text}
          </p>
        )}

        <Pagamentos contas={contas} onMudou={carregar} onAviso={setAviso} />

        {modal && modal.tipo === "criar" && (
          <ModalCriar onClose={() => setModal(null)} onCriada={depoisDeMudar} />
        )}
        {modal && modal.tipo === "editar" && (
          <ModalEditar conta={modal.conta} onClose={() => setModal(null)} onSalva={depoisDeMudar} />
        )}
        {modal && modal.tipo === "apagar" && (
          <ModalApagar conta={modal.conta} onClose={() => setModal(null)} onApagada={depoisDeMudar} />
        )}
      </>
    );
  }

  window.AdminPlanos = AdminPlanos;
})();