// modules-super.jsx — Clients, CreditoAPI, Module access, Bank account, Support panel
window.NA = window.NA || {};
window.NA.M = window.NA.M || {};
const _na5 = window.NA;
const { useState: useStateS, useMemo: useMemoS } = React;

// ============================================================
// CLIENTS — Painel de Controle (admin)
// ============================================================
function ModuleClients({ t, lang }) {
  const [q, setQ] = useStateS("");
  const [filter, setFilter] = useStateS("all");

  const clients = [
    { name: "Willian Bernardes", email: "pessoawillianbernardes@gmail.com", company: "Willian Bernardes", registered: "08/05/2026", last: "08/05/2026, 12:58", status: "active", expires: "—", api: false, super: false },
    { name: "União Bernardes", email: "uniaobernardes@gmail.com", company: "União Bernardes", registered: "07/05/2026", last: "15/05/2026, 17:34", status: "active", expires: "—", api: false, super: false },
    { name: "APIBRASIL", email: "contato@apibrasil.com.br", company: "APIBRASIL", registered: "29/04/2026", last: "29/04/2026, 13:33", status: "trial_expired", expires: "06/05/2026", api: false, super: false },
    { name: "Dione", email: "momentoscomdeus1511@gmail.com", company: "Dione", registered: "27/04/2026", last: "27/04/2026, 11:43", status: "trial_expired", expires: "04/05/2026", api: false, super: false },
    { name: "PARA MEU NEGÓCIO", email: "parameunegocio1511@gmail.com", company: "PARA MEU NEGÓCIO", registered: "24/04/2026", last: "28/04/2026, 19:30", status: "trial_expired", expires: "04/05/2026", api: false, super: false },
    { name: "Pablo", email: "pablexavier258@gmail.com", company: "Pablo", registered: "24/04/2026", last: "17/05/2026, 09:50", status: "active", expires: "—", api: false, super: false },
    { name: "Alex", email: "ideiasdenegocio1588@gmail.com", company: "Alex", registered: "23/04/2026", last: "27/04/2026, 06:38", status: "trial_expired", expires: "30/04/2026", api: false, super: false },
    { name: "paloma", email: "palomaferreira0504@gmail.com", company: "paloma", registered: "21/04/2026", last: "23/04/2026, 18:10", status: "trial_expired", expires: "28/04/2026", api: false, super: false },
    { name: "teste", email: "axortech@gmail.com", company: "teste", registered: "21/04/2026", last: "24/04/2026, 22:11", status: "trial_expired", expires: "—", api: false, super: false },
    { name: "teste", email: "ideiasdenegocio1511@gmail.com", company: "teste", registered: "21/04/2026", last: "24/04/2026, 21:19", status: "trial_expired", expires: "—", api: false, super: false },
    { name: "dionealves", email: "tjdigital123@gmail.com", company: "dionealves", registered: "21/04/2026", last: "23/05/2026, 01:06", status: "super_admin", expires: "28/04/2026", api: true, super: true },
    { name: "paloma alexandra da costa ferreira dias", email: "palferreira0504@gmail.com", company: "paloma alexandra da costa ferreira dias", registered: "21/04/2026", last: "24/04/2026, 13:00", status: "trial_expired", expires: "28/04/2026", api: false, super: false },
    { name: "dione jose alves dias", email: "parameunegocio1511@gmail.com", company: "dione jose alves dias", registered: "21/04/2026", last: "08/05/2026, 13:51", status: "active", expires: "28/04/2027", api: false, super: false },
    { name: "velocicar", email: "veiculosmuitomais@gmail.com", company: "Velocicar", registered: "21/04/2026", last: "08/05/2026, 10:19", status: "super_admin", expires: "28/04/2026", api: true, super: true },
  ];
  const filtered = clients.filter(c => {
    if (q && !(c.name.toLowerCase().includes(q.toLowerCase()) || c.email.toLowerCase().includes(q.toLowerCase()) || c.company.toLowerCase().includes(q.toLowerCase()))) return false;
    if (filter === "active") return c.status === "active";
    if (filter === "trial") return c.status === "trial";
    if (filter === "expired") return c.status === "trial_expired";
    return true;
  });
  const counts = {
    total: clients.length,
    active: clients.filter(c => c.status === "active").length,
    trial: 0,
    expired: clients.filter(c => c.status === "trial_expired").length,
    noplan: 0,
    blocked: 0
  };

  return (
    <div data-screen-label="Clients">
      <_na5.PageHead icon="users-2" title={lang === "pt" ? "Painel de controle — Clientes" : "Control panel — Clients"}
        subtitle={lang === "pt" ? "Gestão completa: bloqueie, libere, estenda trial e exclua qualquer cliente da plataforma." : "Full management: block, release, extend trial and delete any client."}
        right={<_na5.Button kind="default" icon="refresh-cw">{t("common_refresh")}</_na5.Button>} />

      <div className="stat-strip" style={{ gridTemplateColumns: "repeat(6, 1fr)" }}>
        <_na5.Stat label="Total" value={counts.total} icon="users" />
        <_na5.Stat label={lang === "pt" ? "Ativos" : "Active"} value={counts.active} accent="success" icon="check-circle" />
        <_na5.Stat label={lang === "pt" ? "Em trial" : "On trial"} value={counts.trial} accent="primary" icon="clock" />
        <_na5.Stat label={lang === "pt" ? "Expirados" : "Expired"} value={counts.expired} accent="warning" icon="alert-circle" />
        <_na5.Stat label={lang === "pt" ? "Sem plano" : "No plan"} value={counts.noplan} icon="ban" />
        <_na5.Stat label={lang === "pt" ? "Bloqueados" : "Blocked"} value={counts.blocked} icon="lock" />
      </div>

      <_na5.Card className="mt-16">
        <_na5.CardHead title={lang === "pt" ? "Faturamento e Perda de Juros" : "Revenue & churn"} icon="trending-up"
          right={<_na5.Icon name="chevron-down" />} />
      </_na5.Card>

      <_na5.Card className="mt-16">
        <_na5.CardHead title={lang === "pt" ? "Avaliações e comentários dos clientes" : "Client reviews & comments"} icon="message-square"
          right={<_na5.Button kind="default" icon="refresh-cw" size="sm">{t("common_refresh")}</_na5.Button>} />
        <_na5.CardBody>
          <div className="row gap-12 mb-16">
            <_na5.Field label={lang === "pt" ? "Data inicial" : "From"}><_na5.Input type="date" /></_na5.Field>
            <_na5.Field label={lang === "pt" ? "Data final" : "To"}><_na5.Input type="date" /></_na5.Field>
            <_na5.Button kind="primary" icon="filter" style={{ alignSelf: "end" }}>{t("common_filter")}</_na5.Button>
          </div>
          <div className="text-muted fs-12 mb-8">2 {lang === "pt" ? "respostas — média" : "responses — avg"} <b>5.0</b></div>
          <table className="tbl">
            <thead><tr>
              <th>{t("common_client")}</th><th>{lang === "pt" ? "Nota" : "Rating"}</th>
              <th>{lang === "pt" ? "Comentário" : "Comment"}</th><th>{t("common_date")}</th>
            </tr></thead>
            <tbody>
              <tr><td><b>PARA MEU NEGÓCIO</b><div className="text-faint fs-11">parameunegocio1511@gmail.com</div></td>
                <td className="text-warning">★★★★★ <span className="text-muted mono">5</span></td>
                <td>top</td><td className="mono fs-12">28/04/2026, 19:31:38</td></tr>
              <tr><td><b>dionealves</b><div className="text-faint fs-11">dionealves</div></td>
                <td className="text-warning">★★★★★ <span className="text-muted mono">5</span></td>
                <td>{lang === "pt" ? "Sistema top de mais parabéns a toda equipe" : "Great system, congrats team"}</td><td className="mono fs-12">23/04/2026, 12:15:11</td></tr>
            </tbody>
          </table>
        </_na5.CardBody>
      </_na5.Card>

      <_na5.Card className="mt-16">
        <_na5.CardHead title={lang === "pt" ? "Lista de clientes" : "Client list"} icon="users" />
        <_na5.CardBody>
          <div className="row gap-8 mb-16">
            <_na5.SearchBox value={q} onChange={setQ} placeholder={lang === "pt" ? "Buscar por nome, email ou empresa…" : "Search name, email or company…"} style={{ flex: 1 }} />
            {[
              { k: "all", l: lang === "pt" ? "Todos" : "All" },
              { k: "active", l: lang === "pt" ? "Ativos" : "Active" },
              { k: "trial", l: "Trial" },
              { k: "expired", l: lang === "pt" ? "Expirados" : "Expired" },
              { k: "cancelled", l: lang === "pt" ? "Cancelados" : "Cancelled" },
              { k: "noplan", l: lang === "pt" ? "Sem plano" : "No plan" },
              { k: "blocked", l: lang === "pt" ? "Bloqueados" : "Blocked" },
            ].map(b => (
              <button key={b.k} className={"btn sm " + (filter === b.k ? "primary" : "default")} onClick={() => setFilter(b.k)}>{b.l}</button>
            ))}
          </div>
          <table className="tbl">
            <thead><tr>
              <th>{t("common_client")}</th><th>{lang === "pt" ? "Empresa" : "Company"}</th>
              <th>{lang === "pt" ? "Cadastro" : "Registered"}</th><th>{lang === "pt" ? "Último acesso" : "Last access"}</th>
              <th>Status</th><th>{lang === "pt" ? "Vence em" : "Expires"}</th>
              <th>APIBrasil</th><th>{t("common_actions")}</th>
            </tr></thead>
            <tbody>{filtered.map((c, i) => (
              <tr key={i}>
                <td><div className="fw-500">{c.name}</div><div className="text-faint fs-11">{c.email}</div></td>
                <td>{c.company}</td>
                <td className="mono fs-12">{c.registered}</td>
                <td className="mono fs-12">{c.last}</td>
                <td>
                  {c.status === "active" && <_na5.Tag kind="success">{lang === "pt" ? "ATIVO" : "ACTIVE"}</_na5.Tag>}
                  {c.status === "trial_expired" && <_na5.Tag kind="warning">{lang === "pt" ? "TRIAL EXPIRADO" : "TRIAL EXPIRED"}</_na5.Tag>}
                  {c.status === "super_admin" && <_na5.Tag kind="info">SUPER ADMIN</_na5.Tag>}
                </td>
                <td className="mono fs-12">{c.expires}</td>
                <td>{c.super ? <_na5.Tag kind="warning">{lang === "pt" ? "ILIMITADO" : "UNLIMITED"}</_na5.Tag> : <span className="text-faint">—</span>}</td>
                <td><button className="icon-btn-sq" style={{ width: 24, height: 24 }}><_na5.Icon name="more-horizontal" size={12} /></button></td>
              </tr>
            ))}</tbody>
          </table>
        </_na5.CardBody>
      </_na5.Card>
    </div>
  );
}
window.NA.M.clients = ModuleClients;

// ============================================================
// CREDIT API — Painel CreditoAPI
// ============================================================
function ModuleCreditApi({ t, lang }) {
  const [q, setQ] = useStateS("");
  const clients = [
    { name: "Willian Bernardes", email: "pessoawillianbernardes@gmail.com", company: "Willian Bernardes", credits: 0 },
    { name: "União Bernardes", email: "uniaobernardes@gmail.com", company: "União Bernardes", credits: 0 },
    { name: "APIBRASIL", email: "contato@apibrasil.com.br", company: "APIBRASIL", credits: 0 },
    { name: "Dione", email: "momentoscomdeus1511@gmail.com", company: "Dione", credits: 0 },
    { name: "PARA MEU NEGÓCIO", email: "parameunegocio1511@gmail.com", company: "PARA MEU NEGÓCIO", credits: 0 },
    { name: "Pablo", email: "pablexavier258@gmail.com", company: "Pablo", credits: 0 },
    { name: "Alex", email: "ideiasdenegocio1588@gmail.com", company: "Alex", credits: 0 },
    { name: "paloma", email: "palomaferreira0504@gmail.com", company: "paloma", credits: 0 },
    { name: "teste", email: "axortech@gmail.com", company: "teste", credits: 0 },
    { name: "teste", email: "ideiasdenegocio1511@gmail.com", company: "teste", credits: 0 },
    { name: "paloma alexandra da costa ferreira dias", email: "palferreira0504@gmail.com", company: "paloma alexandra da costa ferreira dias", credits: 0 },
    { name: "dione jose alves dias", email: "parameunegocio1511@gmail.com", company: "dione jose alves dias", credits: 0 },
  ];
  const filtered = clients.filter(c => !q || c.name.toLowerCase().includes(q.toLowerCase()) || c.email.toLowerCase().includes(q.toLowerCase()));

  return (
    <div data-screen-label="CreditApi">
      <_na5.PageHead icon="key-round" title="CRÉDITOAPI — APIBRASIL"
        subtitle={lang === "pt" ? "Libere, remova ou defina créditos de consulta APIBrasil para cada cliente. Apenas o super administrador pode ativar o modo automático (cobrança direta)." : "Set, grant or remove credits per client. Only super admin enables auto-billing mode."}
        right={<_na5.Button kind="default" icon="refresh-cw">{t("common_refresh")}</_na5.Button>} />

      <div className="stat-strip" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
        <_na5.Stat label={lang === "pt" ? "Empresas" : "Companies"} value={12} icon="users" />
        <_na5.Stat label={lang === "pt" ? "Créditos em circulação" : "Credits in circulation"} value={0} icon="coins" />
        <_na5.Stat label={lang === "pt" ? "Modo automático" : "Auto mode"} value={0} icon="zap" accent="primary" />
      </div>

      <_na5.Card className="mt-16">
        <_na5.CardHead title={lang === "pt" ? "Clientes" : "Clients"} icon="users-2" />
        <_na5.CardBody>
          <_na5.SearchBox value={q} onChange={setQ} placeholder={lang === "pt" ? "Buscar por nome, email ou empresa…" : "Search name, email or company…"} />
          <table className="tbl" style={{ marginTop: 16 }}>
            <thead><tr>
              <th>{lang === "pt" ? "Empresa" : "Company"}</th><th>{lang === "pt" ? "Responsável" : "Owner"}</th>
              <th>Status APIBrasil</th><th>{t("common_actions")}</th>
            </tr></thead>
            <tbody>{filtered.map((c, i) => (
              <tr key={i}>
                <td className="fw-500">{c.company}</td>
                <td><div className="fw-500">{c.name}</div><div className="text-faint fs-11">{c.email}</div></td>
                <td><_na5.Tag kind="info"><_na5.Icon name="link" size={11} />{c.credits} créditos</_na5.Tag></td>
                <td><div className="row gap-4">
                  <_na5.Button kind="default" size="sm" icon="key-round">Créditos</_na5.Button>
                  <_na5.Button kind="default" size="sm" icon="zap">Ativar auto</_na5.Button>
                  <_na5.Button kind="success" size="sm" icon="unlock">{lang === "pt" ? "Liberar" : "Release"}</_na5.Button>
                </div></td>
              </tr>
            ))}</tbody>
          </table>
        </_na5.CardBody>
      </_na5.Card>
    </div>
  );
}
window.NA.M.credit_api = ModuleCreditApi;

// ============================================================
// MODULES — Liberação de módulos
// ============================================================
function ModuleModules({ t, lang }) {
  const allModules = window.NA.modules.filter(m => !["modules", "clients", "credit_api", "bank_account", "support_panel"].includes(m.key));
  const initialClient = "Willian Bernardes";
  const [selectedClient, setSelectedClient] = useStateS(initialClient);
  const [enabled, setEnabled] = useStateS(() => {
    const o = {}; allModules.forEach(m => o[m.key] = true); return o;
  });

  const clients = ["Willian Bernardes", "União Bernardes", "APIBRASIL", "Dione", "paramunegocio1511", "Pablo", "Alex", "paloma", "teste", "teste", "paloma alexandra da costa fer...", "dione jose alves dias"];

  const moduleDetails = {
    reviews: { route: "/avaliacoes", desc: lang === "pt" ? "Aba Avaliações do sistema" : "Reviews tab" },
    dashboard: { route: "/dashboard", desc: lang === "pt" ? "Visão geral / painel principal" : "Main dashboard" },
    analysis: { route: "/", desc: lang === "pt" ? "Calculadora de oportunidades" : "Opportunity calculator" },
    opportunities: { route: "/historico", desc: lang === "pt" ? "Histórico de análises" : "Analysis history" },
    financing: { route: "/financiamento", desc: lang === "pt" ? "Simulador de financiamento" : "Financing simulator" },
    acquisitions: { route: "/aquisicoes", desc: lang === "pt" ? "Cadastro e gestão de aquisições" : "Acquisition management" },
    management: { route: "/contratos", desc: lang === "pt" ? "Gestão de veículos e processos" : "Vehicle & process management" },
    contracts: { route: "/contratos", desc: lang === "pt" ? "Geração e modelos de contrato" : "Contract templates" },
    trackers: { route: "/rastreadores", desc: lang === "pt" ? "Mapa e dispositivos de rastreio" : "Tracker map" },
    lawyer: { route: "/advogado", desc: lang === "pt" ? "Painel jurídico das aquisições" : "Legal panel" },
    finance: { route: "/financeiro", desc: lang === "pt" ? "Aba Financeiro e relatórios" : "Finance tab" },
    cashbook: { route: "/caixa", desc: lang === "pt" ? "Lançamentos do caixa" : "Cashbook entries" },
    team: { route: "/equipe", desc: lang === "pt" ? "Gestão de membros e setores do cliente" : "Team management" },
    maintenance: { route: "/administrativo", desc: lang === "pt" ? "Centro administrativo do cliente" : "Admin center" },
    support: { route: "/suporte", desc: lang === "pt" ? "Chat de suporte com a equipe" : "Support chat" },
  };

  return (
    <div data-screen-label="Modules">
      <_na5.PageHead icon="shield-check" title={lang === "pt" ? "Controle de acesso" : "Module access"}
        subtitle={lang === "pt" ? "Ative ou desative módulos do sistema individualmente para cada cliente. Mudanças refletem em tempo real." : "Activate/deactivate modules per client. Changes are live."} />

      <_na5.Card>
        <_na5.CardBody style={{ padding: 0 }}>
          <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", minHeight: 600 }}>
            <div style={{ borderRight: "1px solid var(--color-border-secondary)", padding: 12 }}>
              <div className="text-faint fs-11 fw-600 mb-8" style={{ letterSpacing: "0.06em", textTransform: "uppercase" }}>{lang === "pt" ? "CLIENTES" : "CLIENTS"}</div>
              <_na5.SearchBox placeholder={lang === "pt" ? "Buscar cliente…" : "Search client…"} style={{ marginBottom: 8 }} />
              <div className="col" style={{ gap: 2, maxHeight: 540, overflow: "auto" }}>
                {clients.map(c => (
                  <div key={c} onClick={() => setSelectedClient(c)}
                    style={{
                      padding: "8px 10px", borderRadius: 6, cursor: "pointer", fontSize: 12,
                      background: selectedClient === c ? "var(--color-success-bg)" : "transparent",
                      color: selectedClient === c ? "var(--green-7)" : "var(--fg1)",
                      border: "1px solid " + (selectedClient === c ? "var(--color-success-border)" : "transparent")
                    }}>{c}</div>
                ))}
              </div>
            </div>
            <div style={{ padding: 16 }}>
              <div className="row jcsb mb-16">
                <div className="fs-15 fw-600" style={{ textTransform: "uppercase" }}>{selectedClient}</div>
                <div className="row gap-8">
                  <_na5.Button kind="success" size="sm" icon="check-square" onClick={() => {
                    const o = {}; allModules.forEach(m => o[m.key] = true); setEnabled(o);
                  }}>{lang === "pt" ? "Ativar todos" : "Activate all"}</_na5.Button>
                  <_na5.Button kind="default" size="sm" icon="square" onClick={() => {
                    const o = {}; allModules.forEach(m => o[m.key] = false); setEnabled(o);
                  }}>{lang === "pt" ? "Desativar todos" : "Deactivate all"}</_na5.Button>
                </div>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
                {allModules.map(m => {
                  const det = moduleDetails[m.key] || { route: "/" + m.key, desc: "" };
                  return (
                    <div key={m.key} style={{
                      padding: 12, border: "1px solid var(--color-border-secondary)", borderRadius: 8,
                      background: enabled[m.key] ? "var(--color-success-bg)" : "var(--color-fill-quaternary)",
                      borderColor: enabled[m.key] ? "var(--color-success-border)" : "var(--color-border-secondary)"
                    }}>
                      <div className="row gap-8">
                        <_na5.Icon name={m.icon} size={16} style={{ color: enabled[m.key] ? "var(--green-7)" : "var(--fg3)" }} />
                        <span className="fw-600 fs-13">{_na5.t(m.i18n, lang)}</span>
                        {enabled[m.key] && <_na5.Tag kind="success">{lang === "pt" ? "Visível" : "Visible"}</_na5.Tag>}
                        <span className="spacer"></span>
                        <_na5.Switch on={enabled[m.key]} onChange={(v) => setEnabled(e => ({ ...e, [m.key]: v }))} />
                      </div>
                      <div className="text-muted fs-12 mt-8">{det.desc}</div>
                      <div className="mono fs-11 text-faint mt-8">{det.route}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </_na5.CardBody>
      </_na5.Card>
    </div>
  );
}
window.NA.M.modules = ModuleModules;

// ============================================================
// BANK ACCOUNT — Conta para receber
// ============================================================
function ModuleBankAccount({ t, lang }) {
  return (
    <div data-screen-label="BankAccount">
      <div style={{ maxWidth: 720 }}>
        <_na5.PageHead icon="banknote" title={lang === "pt" ? "Conta bancária para receber" : "Bank account for receivables"}
          subtitle={lang === "pt" ? "Cadastre ou altere a conta onde o dinheiro das suas vendas cai." : "Set the account where sales revenue goes."}
          right={<_na5.Button kind="ghost" icon="arrow-left">{lang === "pt" ? "Voltar" : "Back"}</_na5.Button>} />

        <_na5.Card className="mb-16">
          <_na5.CardBody>
            <div className="row gap-8 mb-8">
              <_na5.Icon name="shield-check" size={18} style={{ color: "var(--color-success)" }} />
              <strong className="fs-14">{lang === "pt" ? "100% seguro" : "100% secure"}</strong>
            </div>
            <div className="text-muted fs-13">{lang === "pt" ? "Seus dados são enviados direto para o nosso suporte financeiro pelo WhatsApp e ficam guardados em sigilo. A troca acontece em até 1 dia útil." : "Data is sent directly to our finance support via WhatsApp and is kept secret. Change takes up to 1 business day."}</div>
          </_na5.CardBody>
        </_na5.Card>

        <_na5.Card className="mb-16">
          <_na5.CardHead title={lang === "pt" ? "Receba na hora que o cliente pagar" : "Receive payments instantly"} icon="zap" />
          <_na5.CardBody>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 16 }}>
              <_na5.Card padded>
                <div className="row gap-8 mb-8"><_na5.Icon name="zap" style={{ color: "var(--color-primary)" }} /><strong>PIX {lang === "pt" ? "instantâneo" : "instant"}</strong></div>
                <div className="text-muted fs-13">{lang === "pt" ? "Confirmação em segundos. Sem taxa de máquina." : "Confirmation in seconds. No card fees."}</div>
              </_na5.Card>
              <_na5.Card padded>
                <div className="row gap-8 mb-8"><_na5.Icon name="credit-card" style={{ color: "var(--color-primary)" }} /><strong>{lang === "pt" ? "Cartão de crédito" : "Credit card"}</strong></div>
                <div className="text-muted fs-13">{lang === "pt" ? "À vista ou parcelado, com antecipação automática." : "Lump-sum or installments, auto-advanced."}</div>
              </_na5.Card>
            </div>
            <div className="alert info">
              <_na5.Icon name="info" />
              <div className="body">{lang === "pt" ? "Basta cadastrar abaixo a conta (ou chave PIX) que você quer receber. Nosso suporte ativa o repasse automático em até 1 dia útil — depois disso, todo pagamento que seu cliente fizer dentro do sistema cai direto para você." : "Set the account or PIX key below. Support enables auto-transfer in up to 1 business day."}</div>
            </div>
          </_na5.CardBody>
        </_na5.Card>

        <_na5.Card>
          <_na5.CardHead title={lang === "pt" ? "Dados da sua conta" : "Your account data"} icon="banknote" />
          <_na5.CardBody>
            <div className="field-row">
              <_na5.Field label={lang === "pt" ? "Tipo de recebimento" : "Receipt type"}>
                <_na5.Select options={[lang === "pt" ? "Conta corrente" : "Checking account", lang === "pt" ? "Conta poupança" : "Savings", "PIX"]} />
              </_na5.Field>
              <_na5.Field label={lang === "pt" ? "Nome do titular" : "Account holder name"} required>
                <_na5.Input placeholder={lang === "pt" ? "Nome completo ou razão social" : "Full name or business name"} />
              </_na5.Field>
            </div>
            <_na5.Field label={lang === "pt" ? "CPF ou CNPJ do titular" : "Tax ID"} style={{ marginTop: 12 }}>
              <_na5.Input mono placeholder="000.000.000-00 ou 00.000.000/0000-00" />
            </_na5.Field>
            <_na5.Field label={t("common_bank")} required style={{ marginTop: 12 }}>
              <_na5.Input placeholder="Ex.: Itaú, Bradesco, Nubank" />
            </_na5.Field>
            <div className="field-row" style={{ marginTop: 12 }}>
              <_na5.Field label="Agência" required><_na5.Input mono placeholder="0000" /></_na5.Field>
              <_na5.Field label={lang === "pt" ? "Conta com dígito" : "Account with digit"} required><_na5.Input mono placeholder="00000-0" /></_na5.Field>
            </div>
            <_na5.Field label={lang === "pt" ? "Observações (opcional)" : "Notes (optional)"} style={{ marginTop: 12 }}>
              <_na5.Textarea placeholder={lang === "pt" ? "Algo que o suporte precisa saber sobre essa conta?" : "Anything support needs to know?"} />
            </_na5.Field>
            <div className="alert info mt-16">
              <_na5.Icon name="message-circle" />
              <div className="body">{lang === "pt" ? "Ao enviar, abriremos o WhatsApp do suporte com seus dados já preenchidos. Basta confirmar o envio na conversa." : "On submit, we'll open WhatsApp support with your data prefilled. Confirm in chat."}</div>
            </div>
            <_na5.Button kind="primary" icon="send" style={{ marginTop: 16, width: "100%", justifyContent: "center", height: 42 }}>{lang === "pt" ? "Enviar para o suporte" : "Send to support"}</_na5.Button>
          </_na5.CardBody>
        </_na5.Card>
      </div>
    </div>
  );
}
window.NA.M.bank_account = ModuleBankAccount;

// ============================================================
// SUPPORT PANEL — Painel de Suporte (admin)
// ============================================================
function ModuleSupportPanel({ t, lang }) {
  const [online, setOnline] = useStateS(true);
  const [internalOn, setInternalOn] = useStateS(true);
  const agents = [
    { name: "Suporte Velocicar", phone: "5531999999999", priority: 0, available: 5, total: 0, active: true, status: "available" },
    { name: "dione", phone: "32999734232", priority: 0, available: 5, total: 0, active: true, status: "available" }
  ];
  const monthsTickets = [
    { month: "DEZ. DE 25", value: 0 }, { month: "JAN. DE 26", value: 0 }, { month: "FEV. DE 26", value: 0 },
    { month: "MAR. DE 26", value: 0 }, { month: "ABR. DE 26", value: 24 }, { month: "MAI. DE 26", value: 1 },
  ];

  return (
    <div data-screen-label="SupportPanel">
      <_na5.PageHead icon="headset" title={lang === "pt" ? "Suporte (painel completo)" : "Support (full panel)"}
        subtitle={lang === "pt" ? "Gerencie atendentes WhatsApp, status online/offline, distribuição automática e métricas." : "Manage WhatsApp agents, online status, auto distribution and metrics."} />

      <_na5.Card>
        <_na5.CardHead title={lang === "pt" ? "Status do suporte" : "Support status"} icon="wifi"
          right={<_na5.Tag kind={online ? "success" : "default"}>{online ? "ONLINE" : "OFFLINE"}</_na5.Tag>} />
        <_na5.CardBody>
          <div className="row jcsb">
            <div className="col gap-4">
              <strong>{lang === "pt" ? "Suporte interno disponível" : "Internal support available"}</strong>
              <div className="text-muted fs-13">{lang === "pt" ? "Quando OFFLINE, todo cliente que clicar no suporte será redirecionado automaticamente para um atendente WhatsApp." : "When OFFLINE, all clients are auto-redirected to WhatsApp."}</div>
            </div>
            <_na5.Switch on={internalOn} onChange={setInternalOn} />
          </div>
          <div className="field-row mt-16">
            <_na5.Field label={lang === "pt" ? "Modo de distribuição (WhatsApp)" : "Distribution mode (WhatsApp)"}>
              <_na5.Select options={[
                lang === "pt" ? "Round-robin (alterna entre ativos)" : "Round-robin (alternate)",
                lang === "pt" ? "Por prioridade" : "By priority",
                lang === "pt" ? "Manual" : "Manual"
              ]} />
            </_na5.Field>
            <_na5.Field label={lang === "pt" ? "Mensagem padrão WhatsApp" : "Default WhatsApp message"}>
              <_na5.Input value={lang === "pt" ? "Olá, preciso de suporte" : "Hi, I need support"} />
            </_na5.Field>
          </div>
          <_na5.Button kind="success" icon="save" style={{ marginTop: 16 }}>{lang === "pt" ? "Salvar status e distribuição" : "Save status & distribution"}</_na5.Button>
        </_na5.CardBody>
      </_na5.Card>

      <_na5.Card className="mt-16">
        <_na5.CardHead title={lang === "pt" ? "Atendentes WhatsApp" : "WhatsApp agents"} icon="message-circle"
          right={<>
            <_na5.Tag kind="success">{agents.filter(a => a.active).length} {lang === "pt" ? "ativos" : "active"}</_na5.Tag>
            <_na5.Tag kind="info">{agents.length} {lang === "pt" ? "disponível" : "available"}</_na5.Tag>
            <_na5.Tag kind="default">0 {lang === "pt" ? "ocupado" : "busy"}</_na5.Tag>
            <_na5.Tag kind="default">0 offline</_na5.Tag>
            <_na5.Tag kind="warning">0 {lang === "pt" ? "em atendimento" : "in chat"}</_na5.Tag>
          </>} />
        <_na5.CardBody>
          <div className="row gap-8 mb-16">
            <_na5.Input placeholder={lang === "pt" ? "Ex: João, Comercial" : "e.g. John, Sales"} style={{ flex: 1 }} />
            <_na5.Input mono placeholder="+55 11 98765-4321" style={{ flex: 1 }} />
            <_na5.Input mono type="number" placeholder="0" style={{ width: 80 }} />
            <_na5.Button kind="primary" icon="plus">{lang === "pt" ? "Adicionar" : "Add"}</_na5.Button>
          </div>
          {agents.map((a, i) => (
            <div key={i} className="row gap-12" style={{ padding: 12, border: "1px solid var(--color-border-secondary)", borderRadius: 6, marginBottom: 8 }}>
              <span className="row gap-4" style={{ color: "var(--color-success)" }}>● <strong className="text-success">{a.name}</strong></span>
              <_na5.Tag kind="success">{lang === "pt" ? "DISPONÍVEL" : "AVAILABLE"}</_na5.Tag>
              <span className="text-muted fs-11">{lang === "pt" ? "Prioridade" : "Priority"} {a.priority}</span>
              <span className="text-muted fs-11">{a.available}/5 {lang === "pt" ? "ativos" : "active"}</span>
              <span className="text-muted fs-11">{a.total} total</span>
              <span className="text-faint mono fs-11">{a.phone}</span>
              <span className="spacer"></span>
              <_na5.Select options={[lang === "pt" ? "Disponível" : "Available", lang === "pt" ? "Ocupado" : "Busy", "Offline"]} style={{ width: 130 }} />
              <_na5.Input mono type="number" defaultValue={5} style={{ width: 60 }} />
              <_na5.Input mono type="number" defaultValue={0} style={{ width: 50 }} />
              <_na5.Tag kind="success">ATIVO</_na5.Tag>
              <button className="icon-btn-sq" style={{ width: 26, height: 26, color: "var(--color-error)" }}><_na5.Icon name="trash-2" size={12} /></button>
            </div>
          ))}
        </_na5.CardBody>
      </_na5.Card>

      <_na5.Card className="mt-16">
        <_na5.CardHead title={lang === "pt" ? "Fila de espera" : "Waiting queue"} icon="users"
          right={<>
            <span className="text-muted fs-12">0 {lang === "pt" ? "aguardando" : "waiting"}</span>
            <_na5.Button kind="default" icon="zap" size="sm">{lang === "pt" ? "Processar fila agora" : "Process queue now"}</_na5.Button>
          </>} />
        <_na5.CardBody>
          <_na5.Empty icon="users" title={lang === "pt" ? "Nenhum cliente aguardando — todos foram atribuídos automaticamente." : "No clients waiting — all auto-assigned."} />
        </_na5.CardBody>
      </_na5.Card>

      <_na5.Card className="mt-16">
        <_na5.CardHead title={lang === "pt" ? "Atendimentos" : "Tickets"} icon="bar-chart-2"
          right={<>
            <_na5.Tag kind="info">0 total</_na5.Tag>
            <_na5.Tag kind="success">0 {lang === "pt" ? "resolvidos" : "resolved"}</_na5.Tag>
            <_na5.Tag kind="warning">0 {lang === "pt" ? "pendentes" : "pending"}</_na5.Tag>
            <_na5.Button kind="default" size="sm" icon="refresh-cw">{t("common_refresh")}</_na5.Button>
          </>} />
        <_na5.CardBody>
          <div className="field-row cols-4">
            <_na5.Field label={lang === "pt" ? "Mês" : "Month"}><_na5.Select options={[t("common_all")]} /></_na5.Field>
            <_na5.Field label={lang === "pt" ? "Ano" : "Year"}><_na5.Select options={["2026"]} /></_na5.Field>
            <_na5.Field label={t("common_from")}><_na5.Input type="date" /></_na5.Field>
            <_na5.Field label={t("common_to")}><_na5.Input type="date" /></_na5.Field>
          </div>
          <div className="stat-strip mt-16" style={{ gridTemplateColumns: "repeat(6, 1fr)" }}>
            <_na5.Stat label="WhatsApp" value={0} />
            <_na5.Stat label={lang === "pt" ? "Internos" : "Internal"} value={0} />
            <_na5.Stat label={lang === "pt" ? "Resolvidos" : "Resolved"} value={0} accent="success" />
            <_na5.Stat label={lang === "pt" ? "Pendentes" : "Pending"} value={0} accent="warning" />
            <_na5.Stat label={lang === "pt" ? "Tempo médio resp." : "Avg response"} value="—" />
            <_na5.Stat label={lang === "pt" ? "Atend. médio" : "Avg ticket"} value="—" />
          </div>
          <_na5.Empty icon="inbox" title={lang === "pt" ? "Nenhum atendimento no período." : "No tickets in period."} />
        </_na5.CardBody>
      </_na5.Card>

      <_na5.Card className="mt-16">
        <_na5.CardHead title={lang === "pt" ? "Chamados internos por mês" : "Internal tickets by month"} icon="bar-chart-3"
          right={<>
            <span className="text-muted fs-12">25 {lang === "pt" ? "no período" : "in period"}</span>
            <_na5.Tag kind="info">7 {lang === "pt" ? "clientes únicos" : "unique clients"}</_na5.Tag>
            <_na5.Select value="6" options={[{ value: "6", label: lang === "pt" ? "Últimos 6 meses" : "Last 6 months" }]} style={{ width: 180 }} />
          </>} />
        <_na5.CardBody>
          {monthsTickets.map(m => (
            <div key={m.month} style={{ display: "grid", gridTemplateColumns: "120px 1fr 120px", gap: 12, alignItems: "center", marginBottom: 6 }}>
              <span className="fs-12 fw-500">{m.month}</span>
              <div className="progress" style={{ height: 18 }}>
                <div className="bar success" style={{ width: (m.value / 24) * 100 + "%" }}></div>
              </div>
              <span className="mono fs-12 text-right">{m.value} chamados {m.value > 0 && <span className="text-faint">({Math.min(m.value, 7)} cliente{m.value > 1 ? "s" : ""})</span>}</span>
            </div>
          ))}
        </_na5.CardBody>
      </_na5.Card>
    </div>
  );
}
window.NA.M.support_panel = ModuleSupportPanel;