// Módulo CONFIGURAÇÕES — Módulos, Usuários e Permissões

const ConfigPage = () => {
  const [tab, setTab] = React.useState("modulos");
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <span className="eyebrow"><span className="play"/>Sistema</span>
          <h1 style={{marginTop:10}}>Configurações</h1>
          <p className="lead">Módulos contratados · usuários e permissões · integrações · regras de negócio.</p>
        </div>
      </div>

      <Tabs active={tab} onChange={setTab} tabs={[
        { id: "modulos", label: "Módulos" },
        { id: "usuarios", label: "Usuários & permissões" },
        { id: "empresa", label: "Dados da empresa" },
        { id: "integracoes", label: "Integrações" },
        { id: "regras", label: "Regras de negócio" },
        { id: "auditoria", label: "Auditoria & LGPD" },
      ]}/>

      {tab === "modulos" && <ModulosView/>}
      {tab === "usuarios" && <UsuariosView/>}
      {tab === "empresa" && <EmpresaView/>}
      {tab === "integracoes" && <IntegracoesView/>}
      {tab === "regras" && <RegrasView/>}
      {tab === "auditoria" && <AuditoriaView/>}
    </div>
  );
};

const ModulosView = () => {
  const ativos = MODULOS.filter(m => m.ativo);
  const inativos = MODULOS.filter(m => !m.ativo);
  const totalAtivos = ativos.reduce((s, m) => s + m.preco, 0);

  return (
    <div className="stack">
      <div className="stat-grid cols-3">
        <Stat label="Módulos ativos" value={`${ativos.length} / ${MODULOS.length}`}/>
        <Stat glow label="Mensalidade módulos" value={brl(totalAtivos)} hint="cobrança no dia 1"/>
        <Stat glow="green" label="Plano base · Pro" value={brl(189.00)}/>
      </div>

      <div>
        <div className="t-mono-label mb-12">Ativos · {ativos.length}</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))', gap:12}}>
          {ativos.map(m => <ModuloCard key={m.nome} mod={m}/>)}
        </div>
      </div>

      <div>
        <div className="t-mono-label mb-12">Disponíveis para contratar · {inativos.length}</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))', gap:12}}>
          {inativos.map(m => <ModuloCard key={m.nome} mod={m}/>)}
        </div>
      </div>
    </div>
  );
};

const ModuloCard = ({ mod }) => (
  <div className="card tight" style={{position:'relative', overflow:'hidden', opacity: mod.ativo ? 1 : 0.88}}>
    {mod.ativo && <div style={{position:'absolute', top:0, right:0, padding:'3px 10px', background:'var(--green)', color:'#0a1a02', fontFamily:'var(--mono)', fontSize:9, letterSpacing:'0.18em', borderRadius:'0 0 0 8px', fontWeight:600}}>ATIVO</div>}
    <div className="row gap-10 mb-12">
      <div style={{width:32, height:32, background: mod.ativo ? 'var(--accent-soft)' : 'var(--bg-3)', borderRadius:7, display:'flex', alignItems:'center', justifyContent:'center', color: mod.ativo ? 'var(--accent)' : 'var(--text-3)'}}>
        <Ic name={mod.nome.includes("Whats") ? "whatsapp" : mod.nome.includes("Cashback") ? "sparkles" : mod.nome.includes("Ligação") ? "phone" : mod.nome.includes("Fidelidade") ? "gift" : mod.nome.includes("Multi") ? "store" : mod.nome.includes("NF") ? "file" : "devices"} size={16}/>
      </div>
      <div style={{flex:1}}>
        <div style={{fontSize:13, fontWeight:500}}>{mod.nome}</div>
        <div className="t-3" style={{fontSize:11}}>{brl(mod.preco)}<span style={{fontSize:10}}>/mês</span></div>
      </div>
    </div>
    <p className="t-2" style={{fontSize:12, margin:'0 0 14px', minHeight:32}}>{mod.desc}</p>
    {mod.ativo ? (
      <div className="row gap-6">
        <button className="btn sm ghost grow">Configurar</button>
        <button className="btn sm grow">Detalhes</button>
      </div>
    ) : (
      <div className="row gap-6">
        <button className="btn sm ghost grow">Saber mais</button>
        <button className="btn sm accent grow">Contratar</button>
      </div>
    )}
  </div>
);

const UsuariosView = () => (
  <div className="stack">
    <div className="row" style={{justifyContent:'space-between'}}>
      <div className="row gap-12">
        <Stat label="Usuários ativos" value={USUARIOS.length}/>
      </div>
      <div className="actions">
        <button className="btn ghost"><Ic name="filter" size={13}/> Perfis</button>
        <button className="btn primary"><Ic name="plus" size={13}/> Novo usuário</button>
      </div>
    </div>

    <div className="tbl-wrap">
      <table className="tbl">
        <thead>
          <tr><th>Usuário</th><th>Email</th><th>Cargo</th><th>Perfil de acesso</th><th>Último acesso</th><th>Status</th><th></th></tr>
        </thead>
        <tbody>
          {USUARIOS.map((u, i) => (
            <tr key={i}>
              <td className="row gap-8"><ClientAvatar name={u.nome}/><span className="strong">{u.nome}</span></td>
              <td className="t-3 mono" style={{fontSize:11.5}}>{u.email}</td>
              <td>{u.cargo}</td>
              <td><Badge kind={u.perfil === "Administrador" ? "accent" : "muted"} dot>{u.perfil}</Badge></td>
              <td className="t-3 mono">{u.ultimoAcesso}</td>
              <td><Badge kind={u.ativo ? "green" : "muted"} dot>{u.ativo ? "Ativo" : "Inativo"}</Badge></td>
              <td className="row-action"><div className="menu-dot">⋯</div></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

    <div className="card">
      <div className="card-head"><h3>Matriz de permissões · por perfil</h3></div>
      <table className="tbl">
        <thead>
          <tr>
            <th>Módulo</th>
            <th style={{textAlign:'center'}}>Admin</th>
            <th style={{textAlign:'center'}}>Gerente</th>
            <th style={{textAlign:'center'}}>Op. Live</th>
            <th style={{textAlign:'center'}}>Vendedor</th>
            <th style={{textAlign:'center'}}>Estoque</th>
            <th style={{textAlign:'center'}}>Financeiro</th>
            <th style={{textAlign:'center'}}>Marketing</th>
          </tr>
        </thead>
        <tbody>
          <PermRow mod="Dashboard" perms={["full","full","read","read","read","read","read"]}/>
          <PermRow mod="Live · Apresentar" perms={["full","full","full","none","none","none","none"]}/>
          <PermRow mod="Live · Pedidos" perms={["full","full","read","read","none","read","none"]}/>
          <PermRow mod="Loja · Caixa (PDV)" perms={["full","full","none","full","none","read","none"]}/>
          <PermRow mod="Loja · Crediário" perms={["full","full","none","read","none","full","none"]}/>
          <PermRow mod="Loja · Financeiro" perms={["full","read","none","none","none","full","none"]}/>
          <PermRow mod="Produtos" perms={["full","full","read","read","full","read","read"]}/>
          <PermRow mod="Clientes" perms={["full","full","read","read","none","read","full"]}/>
          <PermRow mod="Marketing" perms={["full","full","none","none","none","none","full"]}/>
          <PermRow mod="Relatórios" perms={["full","full","read","none","read","full","read"]}/>
          <PermRow mod="Configurações" perms={["full","none","none","none","none","none","none"]}/>
        </tbody>
      </table>
      <p className="t-3 mt-12" style={{fontSize:11.5}}><span className="mono">●</span> total · <span className="mono t-cyan">◐</span> leitura · <span className="mono t-4">○</span> sem acesso</p>
    </div>
  </div>
);

const PermRow = ({ mod, perms }) => (
  <tr>
    <td className="strong">{mod}</td>
    {perms.map((p, i) => (
      <td key={i} style={{textAlign:'center'}}>
        {p === "full" && <span style={{color:'var(--green)', fontSize:14}}>●</span>}
        {p === "read" && <span style={{color:'var(--cyan)', fontSize:14}}>◐</span>}
        {p === "none" && <span style={{color:'var(--text-4)', fontSize:14}}>○</span>}
      </td>
    ))}
  </tr>
);

const EmpresaView = () => (
  <div className="card">
    <div className="card-head"><h3>Dados da empresa</h3><button className="btn sm"><Ic name="edit" size={11}/> Editar</button></div>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
      <Field label="Razão social" value="ESTÚDIO AURORA COMÉRCIO DE VESTUÁRIO LTDA"/>
      <Field label="Nome fantasia" value="Estúdio Aurora"/>
      <Field label="CNPJ" value="42.198.347/0001-88" mono/>
      <Field label="Inscrição estadual" value="10.842.071-9" mono/>
      <Field label="Endereço" value="R. T-31, 1208 · Setor Bueno · Goiânia/GO"/>
      <Field label="CEP" value="74.215-010" mono/>
      <Field label="Telefone" value="(62) 3091-4488" mono/>
      <Field label="Email" value="contato@estudioaurora.com.br" mono/>
      <Field label="Regime tributário" value="Simples Nacional"/>
      <Field label="Fuso horário" value="UTC-3 · Brasília"/>
    </div>
  </div>
);

const IntegracoesView = () => (
  <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))', gap:12}}>
    {[
      { nome: "Mercado Pago", desc: "Pix · Cartão · Maquininha", status: "conectado", color: "green" },
      { nome: "Correios SIGEP", desc: "Cálculo de frete · etiquetas", status: "online", color: "green" },
      { nome: "WhatsApp Business API", desc: "Mensagens oficiais", status: "saldo R$ 28,40", color: "amber" },
      { nome: "Bling NF-e", desc: "Emissão fiscal automática", status: "conectado · 218/mês", color: "green" },
      { nome: "ViaCEP", desc: "Endereço por CEP", status: "ativo", color: "green" },
      { nome: "Jadlog", desc: "Transportadora alternativa", status: "não configurado", color: "muted" },
      { nome: "Instagram Graph", desc: "Captura comentários live", status: "não configurado", color: "muted" },
      { nome: "Google Analytics 4", desc: "Analytics da loja virtual", status: "conectado", color: "green" },
    ].map((i, idx) => (
      <div key={idx} className="card tight">
        <div className="row gap-8 mb-8">
          <span style={{ width:7, height:7, borderRadius:'50%', background: `var(--${i.color === 'muted' ? 'text-4' : i.color})`, boxShadow: i.color !== 'muted' ? `0 0 8px var(--${i.color})` : 'none' }}/>
          <div style={{flex:1, fontSize:13, fontWeight:500}}>{i.nome}</div>
        </div>
        <p className="t-3" style={{fontSize:11.5, margin:'0 0 12px'}}>{i.desc}</p>
        <div className="row" style={{justifyContent:'space-between', alignItems:'center'}}>
          <span className="t-mono-label" style={{fontSize:10}}>{i.status}</span>
          <button className="btn sm ghost">{i.color === 'muted' ? "Conectar" : "Configurar"}</button>
        </div>
      </div>
    ))}
  </div>
);

const RegrasView = () => (
  <div className="stack">
    <div className="card">
      <div className="card-head"><h3>Progressão de nível · 11 níveis</h3><button className="btn sm ghost"><Ic name="edit" size={11}/></button></div>
      <table className="tbl">
        <thead><tr><th>Nível</th><th>Total gasto mínimo</th><th>OU Pedidos mínimos</th><th>Benefício</th><th>% Cashback</th></tr></thead>
        <tbody>
          {[
            { n: 1, gasto: 0, pedidos: 1, ben: "—", cb: 0 },
            { n: 3, gasto: 500, pedidos: 3, ben: "Frete grátis acima R$300", cb: 2 },
            { n: 5, gasto: 1500, pedidos: 8, ben: "5% desc Live", cb: 3 },
            { n: 7, gasto: 3500, pedidos: 15, ben: "10% desc Live + frete grátis", cb: 5 },
            { n: 9, gasto: 6000, pedidos: 25, ben: "15% desc + acesso preview", cb: 7 },
            { n: 11, gasto: "manual", pedidos: "—", ben: "VIP · presente anual", cb: 10 },
          ].map((r) => (
            <tr key={r.n}>
              <td><Level n={r.n}/></td>
              <td className="num">{typeof r.gasto === 'number' ? brl(r.gasto) : r.gasto}</td>
              <td className="num">{r.pedidos}</td>
              <td className="t-2" style={{fontSize:12}}>{r.ben}</td>
              <td><Badge kind="green">{r.cb}%</Badge></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
      <div className="card">
        <div className="card-head"><h3>Cashback · regras gerais</h3><Toggle on/></div>
        <dl className="kv">
          <dt>Validade cashback</dt><dd className="mono">90 dias</dd>
          <dt>Cashback Live</dt><dd><Badge kind="green">5% padrão</Badge></dd>
          <dt>Cashback Loja</dt><dd><Badge kind="green">3%</Badge></dd>
          <dt>Cashback Site</dt><dd><Badge kind="green">4%</Badge></dd>
          <dt>Mínimo p/ resgate</dt><dd className="mono">R$ 20,00</dd>
        </dl>
      </div>
      <div className="card">
        <div className="card-head"><h3>Estoque · alertas</h3></div>
        <dl className="kv">
          <dt>Estoque mínimo padrão</dt><dd className="mono">2 unidades</dd>
          <dt>Pedido parado · alerta</dt><dd className="mono">2 dias úteis</dd>
          <dt>Carrinho expira em</dt><dd className="mono">48 horas</dd>
          <dt>Desconto máx vendedor</dt><dd className="mono">15% sem aprovação</dd>
        </dl>
      </div>
    </div>
  </div>
);

const AuditoriaView = () => (
  <div className="stack">
    <div className="card">
      <div className="card-head"><h3>Log de auditoria · últimos eventos</h3><span className="meta">30 dias retidos</span></div>
      <table className="tbl">
        <thead><tr><th>Hora</th><th>Usuário</th><th>Ação</th><th>Objeto</th><th>IP</th></tr></thead>
        <tbody>
          <tr><td className="mono t-3">20:41</td><td className="strong">Letícia Borges</td><td><Badge kind="green">CRIOU</Badge> pedido</td><td className="t-2">Pedido L-2847</td><td className="mono t-3">189.x.x.42</td></tr>
          <tr><td className="mono t-3">20:32</td><td className="strong">Marcela Coutinho</td><td><Badge kind="accent">ALTEROU</Badge> preço</td><td className="t-2">Vestido Luna · R$ 219 → R$ 189 (live)</td><td className="mono t-3">177.x.x.18</td></tr>
          <tr><td className="mono t-3">19:14</td><td className="strong">Bruna Carvalho</td><td><Badge kind="green">CRIOU</Badge> venda PDV</td><td className="t-2">Venda P-8442 · R$ 359,80</td><td className="mono t-3">192.168.1.4</td></tr>
          <tr><td className="mono t-3">18:00</td><td className="strong">Marcela Coutinho</td><td><Badge kind="cyan">EXPORTOU</Badge> dados</td><td className="t-2">Relatório de vendas Mai/26 · CSV</td><td className="mono t-3">177.x.x.18</td></tr>
          <tr><td className="mono t-3">17:42</td><td className="strong">Janaína Ferreira</td><td><Badge kind="red">CANCELOU</Badge> pedido</td><td className="t-2">Pedido S-12842 · motivo: desistência</td><td className="mono t-3">200.x.x.92</td></tr>
          <tr><td className="mono t-3">14:30</td><td className="strong">Tatiana Reis</td><td><Badge kind="accent">AJUSTOU</Badge> estoque</td><td className="t-2">Cropped Pétala · +12 un · OC-184</td><td className="mono t-3">192.168.1.7</td></tr>
        </tbody>
      </table>
    </div>

    <div className="card">
      <div className="card-head"><h3>LGPD · solicitações de privacidade</h3></div>
      <table className="tbl">
        <thead><tr><th>Cliente</th><th>Solicitação</th><th>Data</th><th>Status</th><th></th></tr></thead>
        <tbody>
          <tr><td className="strong">Aline Rocha</td><td>Exclusão completa de dados</td><td className="mono">14/05/2026</td><td><Badge kind="green" dot>Concluído</Badge></td><td><span className="menu-dot">⋯</span></td></tr>
          <tr><td className="strong">Marcos Eduardo</td><td>Portabilidade · exportar JSON</td><td className="mono">08/05/2026</td><td><Badge kind="cyan" dot>Em processamento</Badge></td><td><span className="menu-dot">⋯</span></td></tr>
        </tbody>
      </table>
    </div>
  </div>
);

Object.assign(window, { ConfigPage });