// app.jsx — UI do CheckIngresso · Parceiros em React (sem build: React UMD
// + Babel standalone). Painéis por papel: admin (produtores) · produtor
// (eventos + empresas) · empresa (participantes). Visual laranja.
const { useState, useEffect, useCallback } = React;

// ---------- helpers ----------
function toast(msg, err) {
  let t = document.getElementById('toast');
  if (!t) { t = document.createElement('div'); t.id = 'toast'; document.body.appendChild(t); }
  t.textContent = msg; t.className = 'toast' + (err ? ' err' : ''); t.hidden = false;
  clearTimeout(t._t); t._t = setTimeout(() => { t.hidden = true; }, 3200);
}
async function tokenIA(rotulo) {
  try { const r = await API.criarToken(rotulo); window.prompt('Token de API (copie agora — não aparece de novo):', r.token); }
  catch (e) { toast(e.message, true); }
}
function CotaPill({ e }) {
  if (e.cota <= 0) return <span className="pill muted">{e.usados} · ∞</span>;
  const cls = e.usados >= e.cota ? 'full' : (e.usados / e.cota > 0.8 ? 'warn' : 'ok');
  return <span className={'pill ' + cls}>{e.usados}/{e.cota}</span>;
}
function Topbar({ eu, left, onSair }) {
  const [brand, setBrand] = useState(null);
  useEffect(() => { API.branding().then(setBrand).catch(() => {}); }, []);
  return (
    <div className="topbar">
      <div className="brand"><img className="logo-ci" src="/checkingresso-logo.png" alt="CheckIngresso" /><small>Parceiros</small></div>
      {brand && brand.produtor_logo ? (
        <><span className="brand-sep"></span>
          <img className="brand-logo" src={brand.produtor_logo} alt={brand.produtor_nome} title={brand.produtor_nome} /></>
      ) : null}
      <span className="spacer"></span>
      {left}
      <span className="who">{(eu.nome || eu.login)} · <b>{eu.papel}</b></span>
      <button className="btn btn-ghost btn-sm" onClick={onSair}>Sair</button>
    </div>
  );
}

// ---------- App ----------
function App() {
  const cadastroPid = new URLSearchParams(window.location.search).get('cadastro');
  const [eu, setEu] = useState(undefined); // undefined=loading · null=deslogado
  useEffect(() => { if (!cadastroPid) API.me().then(setEu).catch(() => setEu(null)); }, [cadastroPid]);
  const onSair = async () => { try { await API.logout(); } catch (_) {} setEu(null); };

  if (cadastroPid) return <CadastroEmpresa produtorId={cadastroPid} />;
  if (eu === undefined) return <div className="empty" style={{ paddingTop: 80 }}>carregando…</div>;
  if (!eu) return <Login onLogin={setEu} />;
  if (eu.papel === 'admin') return <AdminPanel eu={eu} onSair={onSair} />;
  if (eu.papel === 'produtor') return <ProdutorHome eu={eu} onSair={onSair} />;
  return <EmpresaHome eu={eu} onSair={onSair} />;
}

// ---------- Cadastro público de empresa (via link do produtor) ----------
function CadastroEmpresa({ produtorId }) {
  const [info, setInfo] = useState(undefined); // undefined=loading · null=link inválido
  const [enviado, setEnviado] = useState(false);
  const [busy, setBusy] = useState(false);
  useEffect(() => { API.cadastroInfo(produtorId).then(setInfo).catch(() => setInfo(null)); }, [produtorId]);
  const submit = async (e) => {
    e.preventDefault(); const f = e.target; setBusy(true);
    try {
      await API.solicitarCadastro({ produtor_id: Number(produtorId), nome: f.nome.value.trim(), contato: f.contato.value.trim(), login: f.login.value.trim(), senha: f.senha.value });
      setEnviado(true);
    } catch (err) { toast(err.message, true); setBusy(false); }
  };
  const Wrap = ({ children }) => <div className="login-wrap"><div className="card login-card">{children}</div></div>;
  if (info === undefined) return <Wrap><div className="empty">carregando…</div></Wrap>;
  if (info === null) return <Wrap><div className="brand"><img className="logo-ci" src="/checkingresso-logo.png" alt="CheckIngresso" /></div><div className="empty">Link de cadastro inválido ou expirado.</div></Wrap>;
  if (enviado) return (
    <Wrap>
      <div className="brand"><img className="logo-ci" src="/checkingresso-logo.png" alt="CheckIngresso" /></div>
      <h1 className="page-title" style={{ marginTop: 10 }}>Solicitação enviada ✓</h1>
      <p className="page-sub">Recebemos seu cadastro para <b>{info.produtor}</b>. Assim que for aprovado e sua cota definida, você poderá entrar com o usuário e senha que escolheu.</p>
      <a className="btn btn-accent" href={window.location.pathname} style={{ width: '100%', marginTop: 10 }}>Ir para o login</a>
    </Wrap>
  );
  return (
    <Wrap>
      <div className="brand"><img className="logo-ci" src="/checkingresso-logo.png" alt="CheckIngresso" /><small>Parceiros</small></div>
      <div className="page-sub">Cadastro de parceiro · <b>{info.produtor}</b></div>
      <form onSubmit={submit}>
        <label className="req">Nome da empresa</label><input name="nome" placeholder="Apolo Agro" autoFocus />
        <label>Contato (e-mail ou telefone)</label><input name="contato" placeholder="contato@apolo.com" />
        <label className="req">Usuário (login)</label><input name="login" autoComplete="username" placeholder="apolo" />
        <label className="req">Senha</label><input name="senha" type="password" autoComplete="new-password" />
        <button className="btn btn-accent" style={{ width: '100%', marginTop: 16 }} disabled={busy}>{busy ? 'Enviando…' : 'Solicitar acesso'}</button>
      </form>
      <p className="page-sub" style={{ marginTop: 12, fontSize: 12 }}>O produtor aprova o cadastro e define sua cota de participantes.</p>
    </Wrap>
  );
}

function Login({ onLogin }) {
  const [busy, setBusy] = useState(false);
  const submit = async (e) => {
    e.preventDefault(); setBusy(true);
    const f = e.target;
    try { onLogin(await API.login(f.login.value.trim(), f.senha.value)); }
    catch (err) { toast(err.message, true); setBusy(false); }
  };
  return (
    <div className="login-wrap"><div className="card login-card">
      <div className="brand"><img className="logo-ci" src="/checkingresso-logo.png" alt="CheckIngresso" /></div>
      <div className="page-sub">Portal de parceiros</div>
      <form onSubmit={submit}>
        <label className="req">Usuário</label><input name="login" autoComplete="username" autoFocus />
        <label className="req">Senha</label><input name="senha" type="password" autoComplete="current-password" />
        <button className="btn btn-accent" style={{ width: '100%', marginTop: 18 }} disabled={busy}>
          {busy ? 'Entrando…' : 'Entrar'}
        </button>
      </form>
    </div></div>
  );
}

// ---------- Relatório de participantes (admin/produtor) ----------
function BarChart({ data, color }) {
  if (!data.length) return <div className="empty">sem dados</div>;
  const max = Math.max(1, ...data.map(d => d.value));
  return (
    <div className="barchart">
      {data.map(d => (
        <div className="bar-row" key={d.label}>
          <div className="bar-label" title={d.label}>{d.label}</div>
          <div className="bar-track"><div className="bar-fill" style={{ width: (d.value / max * 100) + '%', background: color || 'var(--laranja)' }} /></div>
          <div className="bar-val">{d.value}</div>
        </div>
      ))}
    </div>
  );
}
function agrupar(arr, key) {
  const m = {};
  arr.forEach(d => { const k = d[key] || '—'; m[k] = (m[k] || 0) + 1; });
  return Object.keys(m).map(label => ({ label, value: m[label] })).sort((a, b) => b.value - a.value);
}

function Relatorio() {
  const [dados, setDados] = useState(null);
  const [fEvento, setFEvento] = useState('');
  const [fEmpresa, setFEmpresa] = useState('');
  const [busca, setBusca] = useState('');
  // Dados REAIS do sistema de eventos (eventos passados), não mock.
  useEffect(() => { API.relatorioAttendees().then(setDados).catch(e => toast(e.message, true)); }, []);
  if (dados == null) return <div className="empty" style={{ paddingTop: 40 }}>carregando dados do sistema de eventos…</div>;
  const eventos = [...new Set(dados.map(d => d.evento_nome))].sort();
  const empresas = [...new Set(dados.map(d => d.empresa).filter(Boolean))].sort((a, b) => a.localeCompare(b));
  const q = busca.trim().toLowerCase();
  const filtrados = dados.filter(d =>
    (!fEvento || d.evento_nome === fEvento) &&
    (!fEmpresa || d.empresa === fEmpresa) &&
    (!q || (d.nome + ' ' + d.sobrenome + ' ' + (d.email || '')).toLowerCase().includes(q))
  );
  const nEmpresas = new Set(filtrados.map(d => d.empresa).filter(Boolean)).size;
  const nEventos = new Set(filtrados.map(d => d.evento_nome)).size;
  const presentes = filtrados.filter(d => d.presente).length;
  const porEmpresa = agrupar(filtrados, 'empresa').slice(0, 12);
  const porEvento = agrupar(filtrados, 'evento_nome');
  const exportarCSV = () => {
    const head = ['Nome', 'Sobrenome', 'Empresa', 'Evento', 'E-mail', 'Telefone', 'Pedido'];
    const linhas = filtrados.map(d => [d.nome, d.sobrenome, d.empresa, d.evento_nome, d.email, d.telefone, d.pedido]);
    const csv = [head, ...linhas].map(r => r.map(c => '"' + String(c == null ? '' : c).replace(/"/g, '""') + '"').join(';')).join('\n');
    const blob = new Blob(['' + csv], { type: 'text/csv;charset=utf-8' });
    const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'participantes.csv'; a.click();
    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
  };
  return (
    <div>
      <h1 className="page-title">Relatório de participantes</h1>
      <p className="page-sub">Dados reais do sistema de eventos · {filtrados.length} de {dados.length} participantes</p>
      <div className="card">
        <div className="row" style={{ alignItems: 'flex-end' }}>
          <div><label>Evento</label><select value={fEvento} onChange={e => setFEvento(e.target.value)}><option value="">Todos os eventos</option>{eventos.map(n => <option key={n} value={n}>{n}</option>)}</select></div>
          <div><label>Empresa</label><select value={fEmpresa} onChange={e => setFEmpresa(e.target.value)}><option value="">Todas as empresas</option>{empresas.map(n => <option key={n} value={n}>{n}</option>)}</select></div>
          <div style={{ flex: 2 }}><label>Buscar</label><input value={busca} onChange={e => setBusca(e.target.value)} placeholder="nome ou e-mail" /></div>
          <div className="grow0"><label>&nbsp;</label><button type="button" className="btn" onClick={exportarCSV}>Exportar CSV</button></div>
        </div>
      </div>

      <div className="kpis">
        <div className="kpi"><div className="num">{filtrados.length}</div><div className="lbl">Participantes</div></div>
        <div className="kpi"><div className="num">{nEmpresas}</div><div className="lbl">Empresas</div></div>
        <div className="kpi"><div className="num">{nEventos}</div><div className="lbl">Eventos</div></div>
        <div className="kpi"><div className="num" style={{ color: 'var(--ok)' }}>{presentes}</div><div className="lbl">Check-ins</div></div>
      </div>

      <div className="charts">
        <div className="card"><h2>Participantes por empresa{porEmpresa.length >= 12 ? ' (top 12)' : ''}</h2><BarChart data={porEmpresa} /></div>
        <div className="card"><h2>Participantes por evento</h2><BarChart data={porEvento} color="var(--amarelo)" /></div>
        <div className="card"><h2>Presença</h2><BarChart data={[{ label: 'Presentes', value: presentes }, { label: 'Ausentes', value: filtrados.length - presentes }]} color="var(--ok)" /></div>
      </div>

      <div className="card">
        {filtrados.length === 0 ? <div className="empty">Nenhum participante com esses filtros.</div>
          : <div className="table-wrap"><table>
            <thead><tr><th>Nome</th><th>Empresa</th><th className="hide-sm">Evento</th><th className="hide-sm">E-mail</th><th className="hide-sm">Telefone</th></tr></thead>
            <tbody>{filtrados.map((d, i) => (
              <tr key={d.pedido + '-' + i}><td><b>{d.nome} {d.sobrenome}</b></td><td>{d.empresa || '—'}</td>
                <td className="hide-sm">{d.evento_nome}</td><td className="hide-sm">{d.email}</td><td className="hide-sm">{d.telefone}</td></tr>
            ))}</tbody></table></div>}
      </div>
    </div>
  );
}

// ---------- Check-in (admin/produtor) ----------
function Checkin() {
  const [dados, setDados] = useState(null);
  const [evento, setEvento] = useState('');
  const [fEmpresa, setFEmpresa] = useState('');
  const [fStatus, setFStatus] = useState(''); // '' | presentes | ausentes
  const [busca, setBusca] = useState('');
  const [saving, setSaving] = useState({});
  useEffect(() => { API.relatorioAttendees().then(setDados).catch(e => toast(e.message, true)); }, []);
  if (dados == null) return <div className="empty" style={{ paddingTop: 40 }}>carregando…</div>;
  const eventos = [...new Set(dados.map(d => d.evento_nome))].sort();
  const ev = evento || (eventos.length === 1 ? eventos[0] : '');
  const doEvento = dados.filter(d => d.evento_nome === ev);
  const empresas = [...new Set(doEvento.map(d => d.empresa).filter(Boolean))].sort((a, b) => a.localeCompare(b));
  const q = busca.trim().toLowerCase();
  const lista = doEvento.filter(d =>
    (!fEmpresa || d.empresa === fEmpresa) &&
    (fStatus === '' || (fStatus === 'presentes' ? d.presente : !d.presente)) &&
    (!q || (d.nome + ' ' + d.sobrenome + ' ' + (d.email || '') + ' ' + (d.empresa || '')).toLowerCase().includes(q))
  );
  const presentes = doEvento.filter(d => d.presente).length;
  const toggle = async (d) => {
    const novo = !d.presente;
    setSaving(s => ({ ...s, [d.chave]: true }));
    try {
      await API.checkin(d.chave, novo);
      setDados(ds => ds.map(x => x.chave === d.chave ? { ...x, presente: novo } : x));
    } catch (e) { toast(e.message, true); }
    finally { setSaving(s => ({ ...s, [d.chave]: false })); }
  };
  return (
    <div>
      <h1 className="page-title">Check-in</h1>
      <p className="page-sub">Credenciamento no dia — marque a presença dos participantes reais do evento.</p>
      <div className="card">
        <div className="row" style={{ alignItems: 'flex-end' }}>
          <div><label>Evento</label><select value={ev} onChange={e => setEvento(e.target.value)}>{eventos.length > 1 && <option value="">— escolha o evento —</option>}{eventos.map(n => <option key={n} value={n}>{n}</option>)}</select></div>
          <div><label>Empresa</label><select value={fEmpresa} onChange={e => setFEmpresa(e.target.value)}><option value="">Todas as empresas</option>{empresas.map(n => <option key={n} value={n}>{n}</option>)}</select></div>
          <div><label>Status</label><select value={fStatus} onChange={e => setFStatus(e.target.value)}><option value="">Todos</option><option value="ausentes">Só ausentes</option><option value="presentes">Só presentes</option></select></div>
          <div style={{ flex: 2 }}><label>Buscar participante</label><input value={busca} onChange={e => setBusca(e.target.value)} placeholder="nome, e-mail ou empresa" autoFocus /></div>
        </div>
      </div>
      {!ev ? <div className="empty">Escolha um evento pra iniciar o check-in.</div> : (
        <>
          <div className="kpis">
            <div className="kpi"><div className="num" style={{ color: 'var(--ok)' }}>{presentes}</div><div className="lbl">Presentes</div></div>
            <div className="kpi"><div className="num">{doEvento.length - presentes}</div><div className="lbl">Ausentes</div></div>
            <div className="kpi"><div className="num">{doEvento.length}</div><div className="lbl">Total</div></div>
          </div>
          <div className="card">
            {lista.length === 0 ? <div className="empty">Nenhum participante encontrado.</div>
              : <div className="table-wrap"><table>
                <thead><tr><th>Nome</th><th>Empresa</th><th></th></tr></thead>
                <tbody>{lista.map(d => (
                  <tr key={d.chave}>
                    <td><b>{d.nome} {d.sobrenome}</b>{d.presente ? <span className="pill ok" style={{ marginLeft: 8 }}>✓ presente</span> : null}</td>
                    <td>{d.empresa || '—'}</td>
                    <td style={{ textAlign: 'right' }}>
                      <button className={'btn btn-sm' + (d.presente ? '' : ' btn-accent')} disabled={!!saving[d.chave]} onClick={() => toggle(d)}>
                        {d.presente ? 'Desfazer' : 'Check-in'}
                      </button>
                    </td>
                  </tr>
                ))}</tbody></table></div>}
          </div>
        </>
      )}
    </div>
  );
}

// ---------- Histórico de alterações (admin/produtor) ----------
function Historico() {
  const [logs, setLogs] = useState(null);
  const [busca, setBusca] = useState('');
  useEffect(() => { API.listarLogs().then(setLogs).catch(e => toast(e.message, true)); }, []);
  if (logs == null) return <div className="empty" style={{ paddingTop: 40 }}>carregando…</div>;
  const q = busca.trim().toLowerCase();
  const filtrados = logs.filter(l => !q || (l.acao + ' ' + l.detalhe + ' ' + l.ator).toLowerCase().includes(q));
  const fmt = (s) => { try { return new Date(s).toLocaleString('pt-BR'); } catch (_) { return s; } };
  const destrutiva = (a) => /EXCL|REMOV|TRAVAD|rejeit|desativ/i.test(a);
  return (
    <div>
      <h1 className="page-title">Histórico de alterações</h1>
      <p className="page-sub">Quem fez o quê e quando. Exclusões ficam registradas aqui mesmo depois do registro sumir.</p>
      <div className="card">
        <label>Buscar</label>
        <input value={busca} onChange={e => setBusca(e.target.value)} placeholder="ação, detalhe ou usuário" />
      </div>
      <div className="card">
        {filtrados.length === 0 ? <div className="empty">Nada no histórico ainda.</div>
          : <div className="table-wrap"><table>
            <thead><tr><th>Quando</th><th>Quem</th><th>Ação</th><th>Detalhe</th></tr></thead>
            <tbody>{filtrados.map(l => (
              <tr key={l.id}>
                <td style={{ whiteSpace: 'nowrap' }}>{fmt(l.criado_em)}</td>
                <td>{l.ator}{l.papel ? <span className="pill muted" style={{ marginLeft: 6 }}>{l.papel}</span> : null}</td>
                <td><b style={{ color: destrutiva(l.acao) ? 'var(--danger)' : 'inherit' }}>{l.acao}</b></td>
                <td>{l.detalhe}</td>
              </tr>
            ))}</tbody></table></div>}
      </div>
    </div>
  );
}

// ---------- Admin: configuração de e-mail (SMTP) ----------
function ConfigSMTP() {
  const [cfg, setCfg] = useState(null);
  const [senha, setSenha] = useState('');
  const [testEmail, setTestEmail] = useState('');
  const [busy, setBusy] = useState(false);
  const load = () => API.getSMTP().then(c => { setCfg(c); setSenha(''); }).catch(e => toast(e.message, true));
  useEffect(() => { load(); }, []);
  if (cfg == null) return <div className="empty" style={{ paddingTop: 40 }}>carregando…</div>;
  const set = (k, v) => setCfg(c => ({ ...c, [k]: v }));
  const payload = () => ({ host: cfg.host.trim(), porta: parseInt(cfg.porta || '587', 10), secure: !!cfg.secure, usuario: cfg.usuario.trim(), senha: senha, from_nome: cfg.from_nome.trim(), from_email: cfg.from_email.trim(), portal_url: cfg.portal_url.trim(), ativo: !!cfg.ativo });
  const salvar = async (e) => {
    e.preventDefault(); setBusy(true);
    try { const c = await API.saveSMTP(payload()); setCfg(c); setSenha(''); toast('Configuração salva'); }
    catch (err) { toast(err.message, true); } finally { setBusy(false); }
  };
  const testar = async () => {
    if (!testEmail.trim()) { toast('Informe um e-mail pra receber o teste', true); return; }
    setBusy(true);
    try { await API.testSMTP({ ...payload(), para: testEmail.trim() }); toast('E-mail de teste enviado para ' + testEmail.trim()); }
    catch (err) { toast(err.message, true); } finally { setBusy(false); }
  };
  return (
    <div>
      <h1 className="page-title">E-mail (SMTP)</h1>
      <p className="page-sub">Servidor de envio do portal — usado no e-mail de boas-vindas quando uma empresa é aprovada.</p>
      <form onSubmit={salvar}>
        <div className="card">
          <h2>Servidor</h2>
          <div className="row">
            <div style={{ flex: 2 }}><label className="req">Host SMTP</label><input value={cfg.host} onChange={e => set('host', e.target.value)} placeholder="smtp.gmail.com" /></div>
            <div style={{ minWidth: 90 }}><label className="req">Porta</label><input type="number" value={cfg.porta} onChange={e => set('porta', e.target.value)} /></div>
          </div>
          <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12 }}>
            <input type="checkbox" style={{ width: 'auto' }} checked={!!cfg.secure} onChange={e => set('secure', e.target.checked)} />
            Usar SSL/TLS direto (porta 465). Desmarcado = STARTTLS (587).
          </label>
          <div className="row" style={{ marginTop: 6 }}>
            <div><label>Usuário</label><input value={cfg.usuario} onChange={e => set('usuario', e.target.value)} placeholder="seu-email@gmail.com" autoComplete="off" /></div>
            <div><label>Senha {cfg.tem_senha ? '(cadastrada — preencha só pra trocar)' : ''}</label><input type="password" value={senha} onChange={e => setSenha(e.target.value)} placeholder={cfg.tem_senha ? '••••••••' : 'app password'} autoComplete="new-password" /></div>
          </div>
        </div>
        <div className="card">
          <h2>Remetente</h2>
          <div className="row">
            <div><label>Nome de exibição</label><input value={cfg.from_nome} onChange={e => set('from_nome', e.target.value)} placeholder="CheckIngresso Parceiros" /></div>
            <div><label className="req">E-mail remetente</label><input type="email" value={cfg.from_email} onChange={e => set('from_email', e.target.value)} placeholder="contato@checkingresso.com.br" /></div>
          </div>
          <label>URL do portal (vai no e-mail)</label><input value={cfg.portal_url} onChange={e => set('portal_url', e.target.value)} placeholder="https://parceiros.coanconsultoria.com.br/portal" />
          <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 14 }}>
            <input type="checkbox" style={{ width: 'auto' }} checked={!!cfg.ativo} onChange={e => set('ativo', e.target.checked)} />
            <b>Ativar o envio de e-mails</b> (sem isso, o portal não manda nada)
          </label>
        </div>
        <div className="card">
          <h2>Testar</h2>
          <div className="row" style={{ alignItems: 'flex-end' }}>
            <div style={{ flex: 2 }}><label>Enviar e-mail de teste para</label><input type="email" value={testEmail} onChange={e => setTestEmail(e.target.value)} placeholder="voce@gmail.com" /></div>
            <div className="grow0"><button type="button" className="btn" disabled={busy} onClick={testar}>Enviar teste</button></div>
          </div>
          <div className="page-sub" style={{ marginTop: 6 }}>O teste usa os dados acima (não precisa salvar antes).</div>
        </div>
        <button className="btn btn-accent" disabled={busy}>{busy ? 'Salvando…' : 'Salvar configuração'}</button>
      </form>
    </div>
  );
}

// ---------- Admin: produtores ----------
function AdminPanel({ eu, onSair }) {
  const [produtores, setProdutores] = useState(null);
  const [drill, setDrill] = useState(null); // {id, nome} de um produtor
  const [aba, setAba] = useState('produtores');

  const load = useCallback(() => { API.listarProdutores().then(setProdutores).catch(e => toast(e.message, true)); }, []);
  useEffect(() => { load(); }, [load]);

  if (drill) return <GestaoProdutor produtorId={drill.id} titulo={drill.nome} logoInicial={drill.logo} ehAdmin eu={eu} onSair={onSair} onVoltar={() => { setDrill(null); load(); }} />;

  const criar = async (e) => {
    e.preventDefault(); const f = e.target;
    try { await API.criarProdutor({ nome: f.nome.value.trim(), login: f.login.value.trim(), senha: f.senha.value }); f.reset(); toast('Produtor cadastrado'); load(); }
    catch (err) { toast(err.message, true); }
  };
  const abas = (
    <>
      <button className={'btn btn-sm' + (aba === 'produtores' ? ' btn-accent' : '')} onClick={() => setAba('produtores')}>Produtores</button>
      <button className={'btn btn-sm' + (aba === 'relatorio' ? ' btn-accent' : '')} onClick={() => setAba('relatorio')}>Relatório</button>
      <button className={'btn btn-sm' + (aba === 'checkin' ? ' btn-accent' : '')} onClick={() => setAba('checkin')}>Check-in</button>
      <button className={'btn btn-sm' + (aba === 'historico' ? ' btn-accent' : '')} onClick={() => setAba('historico')}>Histórico</button>
      <button className={'btn btn-sm' + (aba === 'smtp' ? ' btn-accent' : '')} onClick={() => setAba('smtp')}>E-mail</button>
      <button className="btn btn-sm" onClick={() => tokenIA('agente-ia-admin')}>Token p/ IA</button>
    </>
  );
  if (aba === 'relatorio') return <div><Topbar eu={eu} onSair={onSair} left={abas} /><div className="container"><Relatorio /></div></div>;
  if (aba === 'checkin') return <div><Topbar eu={eu} onSair={onSair} left={abas} /><div className="container"><Checkin /></div></div>;
  if (aba === 'historico') return <div><Topbar eu={eu} onSair={onSair} left={abas} /><div className="container"><Historico /></div></div>;
  if (aba === 'smtp') return <div><Topbar eu={eu} onSair={onSair} left={abas} /><div className="container"><ConfigSMTP /></div></div>;
  return (
    <div>
      <Topbar eu={eu} onSair={onSair} left={abas} />
      <div className="container">
        <h1 className="page-title">Produtores</h1>
        <p className="page-sub">Organizadores de evento. Cada produtor cadastra os próprios eventos e empresas.</p>
        <div className="card"><h2>Novo produtor</h2>
          <form onSubmit={criar}><div className="row">
            <div><label className="req">Nome</label><input name="nome" placeholder="Coan Consultoria" /></div>
            <div><label className="req">Login</label><input name="login" placeholder="coan" /></div>
            <div><label className="req">Senha</label><input name="senha" type="password" /></div>
          </div><button className="btn btn-accent" style={{ marginTop: 14 }}>Cadastrar produtor</button></form>
        </div>
        <div className="card">
          {produtores == null ? <div className="empty">carregando…</div>
            : produtores.length === 0 ? <div className="empty">Nenhum produtor ainda.</div>
              : <div className="table-wrap"><table>
                <thead><tr><th>Produtor</th><th>Empresas</th><th></th></tr></thead>
                <tbody>{produtores.map(p => (
                  <tr key={p.id}><td><b>{p.nome}</b></td><td>{p.empresas}</td>
                    <td style={{ textAlign: 'right' }}><button className="btn btn-sm" onClick={() => setDrill({ id: p.id, nome: p.nome, logo: p.logo_url })}>Gerenciar</button></td></tr>
                ))}</tbody></table></div>}
        </div>
      </div>
    </div>
  );
}

function ProdutorHome({ eu, onSair }) {
  return <GestaoProdutor produtorId={eu.produtor_id} titulo="Eventos e empresas" eu={eu} onSair={onSair} />;
}

// ---------- Produtor: eventos + empresas ----------
function GestaoProdutor({ produtorId, titulo, ehAdmin, eu, onSair, onVoltar, logoInicial }) {
  const [empresaSel, setEmpresaSel] = useState(null);
  const [aba, setAba] = useState('gestao');
  if (empresaSel) return <Participantes empresa={empresaSel} eu={eu} onSair={onSair} onVoltar={() => setEmpresaSel(null)} />;
  const left = (
    <>
      {onVoltar && <button className="btn btn-ghost btn-sm" onClick={onVoltar}>← Produtores</button>}
      {!ehAdmin && <>
        <button className={'btn btn-sm' + (aba === 'gestao' ? ' btn-accent' : '')} onClick={() => setAba('gestao')}>Gestão</button>
        <button className={'btn btn-sm' + (aba === 'relatorio' ? ' btn-accent' : '')} onClick={() => setAba('relatorio')}>Relatório</button>
        <button className={'btn btn-sm' + (aba === 'checkin' ? ' btn-accent' : '')} onClick={() => setAba('checkin')}>Check-in</button>
        <button className={'btn btn-sm' + (aba === 'historico' ? ' btn-accent' : '')} onClick={() => setAba('historico')}>Histórico</button>
      </>}
      <button className="btn btn-sm" onClick={() => tokenIA('agente-ia')}>Token p/ IA</button>
    </>
  );
  return (
    <div>
      <Topbar eu={eu} onSair={onSair} left={left} />
      <div className="container">
        {(!ehAdmin && aba === 'relatorio') ? <Relatorio />
          : (!ehAdmin && aba === 'checkin') ? <Checkin />
            : (!ehAdmin && aba === 'historico') ? <Historico /> : (
          <>
            <h1 className="page-title">{titulo}</h1>
            <LogoCard produtorId={produtorId} logoInicial={logoInicial} />
            <Eventos produtorId={produtorId} ehAdmin={ehAdmin} />
            <Empresas produtorId={produtorId} ehAdmin={ehAdmin} onAbrir={setEmpresaSel} />
          </>
        )}
      </div>
    </div>
  );
}

function LogoCard({ produtorId, logoInicial }) {
  const [logo, setLogo] = useState(logoInicial);
  const [busy, setBusy] = useState(false);
  useEffect(() => {
    if (logoInicial === undefined) API.branding().then(b => setLogo(b.produtor_logo)).catch(() => {});
  }, []);
  const enviar = async (e) => {
    const file = e.target.files[0]; if (!file) return;
    setBusy(true);
    try { const r = await API.uploadLogo(produtorId, file); setLogo(r.logo_url + '?t=' + Date.now()); toast('Logo atualizada'); }
    catch (err) { toast(err.message, true); } finally { setBusy(false); }
  };
  return (
    <div className="card">
      <h2>Identidade visual</h2>
      <p className="page-sub" style={{ marginTop: -6 }}>A logo aparece no topo, ao lado da do CheckIngresso, pros seus parceiros.</p>
      <div className="actions" style={{ gap: 14 }}>
        {logo ? <img className="logo-preview" src={logo} alt="logo" /> : <span className="muted">sem logo ainda</span>}
        <label className="btn btn-sm">{busy ? 'enviando…' : 'Enviar logo'}
          <input type="file" accept="image/png,image/jpeg,image/svg+xml,image/webp" hidden onChange={enviar} disabled={busy} />
        </label>
      </div>
    </div>
  );
}

function Eventos({ produtorId, ehAdmin }) {
  const [eventos, setEventos] = useState(null);
  const [wpEventos, setWpEventos] = useState(null); // eventos do sistema de eventos (dropdown)
  const load = useCallback(() => { API.listarEventos(ehAdmin ? produtorId : null).then(setEventos).catch(e => toast(e.message, true)); }, [produtorId, ehAdmin]);
  useEffect(() => { load(); }, [load]);
  useEffect(() => { API.eventosWP().then(setWpEventos).catch(() => setWpEventos([])); }, []);
  const onPickWp = (e) => {
    const opt = e.target.selectedOptions[0];
    const nome = opt ? opt.getAttribute('data-nome') : '';
    const f = e.target.form;
    if (f) f.nome.value = nome || ''; // o nome acompanha o evento escolhido (editável)
  };
  const criar = async (e) => {
    e.preventDefault(); const f = e.target;
    const wp = (f.wp && f.wp.value) || '';
    if (wpEventos && wpEventos.length > 0 && !wp) { toast('Escolha o evento do sistema de eventos.', true); return; }
    const payload = { nome: f.nome.value.trim(), wp_event_id: wp };
    if (ehAdmin) payload.produtor_id = produtorId;
    try { await API.criarEvento(payload); f.reset(); toast('Evento criado'); load(); }
    catch (err) { toast(err.message, true); }
  };
  const ativar = async (id) => { try { await API.ativarEvento(id); toast('Inscrições abertas'); load(); } catch (e) { toast(e.message, true); } };
  const fechar = async (id) => { if (!confirm('Fechar as inscrições? Não aceita novos cadastros, mas as empresas seguem editando/removendo quem já cadastraram.')) return; try { await API.fecharEvento(id); toast('Inscrições fechadas (edição segue liberada)'); load(); } catch (e) { toast(e.message, true); } };
  const travar = async (id) => { if (!confirm('Travar a edição? Congela editar e remover participantes neste evento.')) return; try { await API.travarEdicao(id); toast('Edição travada'); load(); } catch (e) { toast(e.message, true); } };
  const liberar = async (id) => { try { await API.liberarEdicao(id); toast('Edição liberada'); load(); } catch (e) { toast(e.message, true); } };
  return (
    <div className="card">
      <h2>Eventos</h2>
      <p className="page-sub" style={{ marginTop: -6 }}>Você pode manter <b>vários</b> eventos abertos ao mesmo tempo. Dois controles independentes por evento: <b>inscrições</b> (aceitar novos cadastros) e <b>edição</b> (mexer em quem já cadastrou). Fechar inscrições <i>não</i> trava a edição — pra congelar tudo, use <b>Travar edição</b>.</p>
      <form onSubmit={criar}>
        {wpEventos && wpEventos.length > 0 ? (
          <div>
            <label className="req">Evento do sistema de eventos</label>
            <select name="wp" defaultValue="" onChange={onPickWp}>
              <option value="" disabled>— escolha o evento —</option>
              {wpEventos.map(e => (
                <option key={e.produto_id} value={e.produto_id} data-nome={e.nome}>
                  {e.nome}{e.data ? ' · ' + e.data : ''}{e.tipo === 'variable' ? ' (variável)' : ''}
                </option>
              ))}
            </select>
            <div className="page-sub" style={{ margin: '4px 0 0' }}>Todo evento é vinculado ao sistema de eventos — é o que gera os ingressos. Escolher já puxa nome, criativo, data e local.</div>
          </div>
        ) : null}
        <div className="row" style={{ alignItems: 'flex-end', marginTop: 10 }}>
          <div style={{ flex: 2 }}><label className="req">Nome do evento</label><input name="nome" placeholder="Curso TIP Brasil 2026" /></div>
          <div className="grow0"><button className="btn btn-accent">Criar evento</button></div>
        </div>
      </form>
      <div style={{ marginTop: 12 }}>
        {eventos == null ? <div className="empty">carregando…</div>
          : eventos.length === 0 ? <div className="empty">Nenhum evento. Crie um e ative pra abrir inscrições.</div>
            : <div className="table-wrap"><table>
              <thead><tr><th>Evento</th><th>Inscrições</th><th>Edição</th><th></th></tr></thead>
              <tbody>{eventos.map(ev => (
                <tr key={ev.id}><td><b>{ev.nome}</b>{ev.wp_event_id ? <span className="pill ok" style={{ marginLeft: 8 }} title={'Vinculado ao sistema de eventos (#' + ev.wp_event_id + ')'}>🔗 vinculado</span> : <span className="pill muted" style={{ marginLeft: 8 }}>avulso</span>}</td>
                  <td>{ev.ativo ? <span className="pill ok">abertas</span> : <span className="pill muted">fechadas</span>}</td>
                  <td>{ev.edicao_travada ? <span className="pill full">travada</span> : <span className="pill ok">liberada</span>}</td>
                  <td style={{ textAlign: 'right' }}><div className="actions" style={{ justifyContent: 'flex-end' }}>
                    {ev.ativo ? <button className="btn btn-sm" onClick={() => fechar(ev.id)}>Fechar inscrições</button>
                      : <button className="btn btn-sm btn-accent" onClick={() => ativar(ev.id)}>Abrir inscrições</button>}
                    {ev.edicao_travada ? <button className="btn btn-sm" onClick={() => liberar(ev.id)}>Liberar edição</button>
                      : <button className="btn btn-sm btn-danger" onClick={() => travar(ev.id)}>Travar edição</button>}
                  </div></td></tr>
              ))}</tbody></table></div>}
      </div>
    </div>
  );
}

function Empresas({ produtorId, ehAdmin, onAbrir }) {
  const [empresas, setEmpresas] = useState(null);
  const [solics, setSolics] = useState([]);
  const load = useCallback(() => {
    API.listarEmpresas().then(es => setEmpresas(ehAdmin ? es.filter(e => e.produtor_id === produtorId) : es)).catch(e => toast(e.message, true));
    API.listarSolicitacoes().then(ss => setSolics(ehAdmin ? ss.filter(e => e.produtor_id === produtorId) : ss)).catch(() => {});
  }, [produtorId, ehAdmin]);
  useEffect(() => { load(); }, [load]);
  const criar = async (e) => {
    e.preventDefault(); const f = e.target;
    const payload = { nome: f.nome.value.trim(), cota: parseInt(f.cota.value || '0', 10), login: f.login.value.trim(), senha: f.senha.value };
    if (ehAdmin) payload.produtor_id = produtorId;
    try { await API.criarEmpresa(payload); f.reset(); f.cota.value = 0; toast('Empresa cadastrada'); load(); }
    catch (err) { toast(err.message, true); }
  };
  const novaCota = async (e) => {
    const v = window.prompt('Nova cota (0 = ilimitada):', e.cota);
    if (v === null) return;
    try { await API.atualizarEmpresa(e.id, { cota: parseInt(v, 10) }); toast('Cota atualizada'); load(); } catch (err) { toast(err.message, true); }
  };
  const aprovar = async (e) => {
    const v = window.prompt('Aprovar "' + e.nome + '" com qual cota? (0 = ilimitada)', '0');
    if (v === null) return;
    try { await API.aprovarEmpresa(e.id, parseInt(v || '0', 10)); toast('Empresa aprovada'); load(); } catch (err) { toast(err.message, true); }
  };
  const rejeitar = async (e) => {
    if (!confirm('Rejeitar e apagar a solicitação de "' + e.nome + '"?')) return;
    try { await API.rejeitarEmpresa(e.id); toast('Solicitação rejeitada'); load(); } catch (err) { toast(err.message, true); }
  };
  const desativar = async (e) => {
    if (!confirm('Desativar "' + e.nome + '"? Ela não vai mais conseguir entrar nem cadastrar. Dá pra reativar depois.')) return;
    try { await API.desativarEmpresa(e.id); toast('Empresa desativada'); load(); } catch (err) { toast(err.message, true); }
  };
  const reativar = async (e) => {
    try { await API.ativarEmpresa(e.id); toast('Empresa reativada'); load(); } catch (err) { toast(err.message, true); }
  };
  const excluir = async (e) => {
    if (!confirm('EXCLUIR "' + e.nome + '" e TODOS os participantes dela? Os ingressos no sistema de eventos serão cancelados. Esta ação não dá pra desfazer.\n\n(Pra só impedir o acesso sem apagar, use Desativar.)')) return;
    if (!confirm('Tem certeza? Digite OK no próximo aviso pra confirmar a exclusão de "' + e.nome + '".')) return;
    try { await API.excluirEmpresa(e.id); toast('Empresa excluída'); load(); } catch (err) { toast(err.message, true); }
  };
  const linkCadastro = window.location.origin + window.location.pathname + '?cadastro=' + produtorId;
  const copiarLink = () => { navigator.clipboard.writeText(linkCadastro).then(() => toast('Link copiado')).catch(() => window.prompt('Copie o link:', linkCadastro)); };
  const aprovadas = empresas ? empresas.filter(e => e.status !== 'pendente') : null;
  return (
    <div className="card">
      <h2>Empresas parceiras</h2>

      <div className="evento-banner" style={{ marginBottom: 14 }}>
        <span>🔗 <b>Link de cadastro:</b> envie pros parceiros se cadastrarem sozinhos (você aprova e define a cota).</span>
        <span className="spacer"></span>
        <button type="button" className="btn btn-sm" onClick={copiarLink}>Copiar link</button>
      </div>

      {solics.length > 0 ? (
        <div style={{ marginBottom: 16 }}>
          <h2 style={{ color: 'var(--laranja)' }}>Solicitações pendentes ({solics.length})</h2>
          <div className="table-wrap"><table>
            <thead><tr><th>Empresa</th><th className="hide-sm">Contato</th><th></th></tr></thead>
            <tbody>{solics.map(e => (
              <tr key={e.id}><td><b>{e.nome}</b></td><td className="hide-sm">{e.contato || '—'}</td>
                <td style={{ textAlign: 'right' }}><div className="actions" style={{ justifyContent: 'flex-end' }}>
                  <button className="btn btn-sm btn-accent" onClick={() => aprovar(e)}>Aprovar + cota</button>
                  <button className="btn btn-sm btn-danger" onClick={() => rejeitar(e)}>Rejeitar</button>
                </div></td></tr>
            ))}</tbody></table></div>
        </div>
      ) : null}

      <form onSubmit={criar}>
        <div className="row">
          <div style={{ flex: 2 }}><label className="req">Nome da empresa</label><input name="nome" placeholder="Apolo Agro" /></div>
          <div style={{ minWidth: 90 }}><label className="req">Cota</label><input name="cota" type="number" min="0" defaultValue="0" /></div>
        </div>
        <div className="row">
          <div><label className="req">Login</label><input name="login" placeholder="apolo" /></div>
          <div><label className="req">Senha</label><input name="senha" type="password" /></div>
        </div>
        <button className="btn btn-accent" style={{ marginTop: 14 }}>Cadastrar empresa</button>
        <div className="page-sub" style={{ margin: '8px 0 0' }}>Cota 0 = ilimitada. A cota vale por evento — a empresa pode usar a cota cheia em cada evento aberto.</div>
      </form>
      <div style={{ marginTop: 12 }}>
        {aprovadas == null ? <div className="empty">carregando…</div>
          : aprovadas.length === 0 ? <div className="empty">Nenhuma empresa ainda.</div>
            : <div className="table-wrap"><table>
              <thead><tr><th>Empresa</th><th>Cota · uso total</th><th></th></tr></thead>
              <tbody>{aprovadas.map(e => (
                <tr key={e.id} style={{ opacity: e.ativa === false ? 0.55 : 1 }}>
                  <td><b>{e.nome}</b>
                    {e.ativa === false ? <span className="pill muted" style={{ marginLeft: 8 }}>inativa</span> : null}
                    {e.wp_customer_id ? <span className="pill ok" style={{ marginLeft: 8 }} title={'Cliente no WordPress (#' + e.wp_customer_id + ')'}>WP</span> : null}</td>
                  <td><CotaPill e={e} /></td>
                  <td style={{ textAlign: 'right' }}><div className="actions" style={{ justifyContent: 'flex-end' }}>
                    <button className="btn btn-sm" onClick={() => onAbrir(e)}>Participantes</button>
                    <button className="btn btn-sm" onClick={() => novaCota(e)}>Cota</button>
                    {e.ativa === false
                      ? <button className="btn btn-sm btn-accent" onClick={() => reativar(e)}>Reativar</button>
                      : <button className="btn btn-sm" onClick={() => desativar(e)}>Desativar</button>}
                    <button className="btn btn-sm btn-danger" onClick={() => excluir(e)}>Excluir</button>
                  </div></td></tr>
              ))}</tbody></table></div>}
      </div>
    </div>
  );
}

// ---------- Modal + formulário de participante ----------
function Modal({ titulo, onClose, children }) {
  useEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', h);
    return () => document.removeEventListener('keydown', h);
  }, [onClose]);
  return (
    <div className="modal-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal">
        <div className="modal-head">
          <h2>{titulo}</h2>
          <button className="modal-close" onClick={onClose} aria-label="Fechar">×</button>
        </div>
        {children}
      </div>
    </div>
  );
}

function ParticipanteForm({ inicial, onSalvar, onCancelar, salvando }) {
  const submit = (e) => {
    e.preventDefault(); const f = e.target;
    onSalvar({
      nome: f.nome.value.trim(), sobrenome: f.sobrenome.value.trim(),
      email: f.email.value.trim(), telefone: f.telefone.value.trim(),
    });
  };
  return (
    <form onSubmit={submit}>
      <div className="grid2">
        <div><label className="req">Nome</label><input name="nome" defaultValue={inicial ? inicial.nome : ''} autoFocus /></div>
        <div><label>Sobrenome</label><input name="sobrenome" defaultValue={inicial ? inicial.sobrenome : ''} /></div>
        <div><label>E-mail</label><input name="email" type="email" defaultValue={inicial ? inicial.email : ''} /></div>
        <div><label>Telefone</label><input name="telefone" defaultValue={inicial ? inicial.telefone : ''} /></div>
      </div>
      <div className="actions" style={{ marginTop: 18, justifyContent: 'flex-end' }}>
        <button type="button" className="btn btn-ghost" onClick={onCancelar}>Cancelar</button>
        <button className="btn btn-accent" disabled={salvando}>{salvando ? 'Salvando…' : (inicial ? 'Salvar alterações' : 'Cadastrar')}</button>
      </div>
    </form>
  );
}

// ---------- Empresa: participantes ----------
function EmpresaHome({ eu, onSair }) {
  const [empresa, setEmpresa] = useState(null);
  useEffect(() => { API.obterEmpresa(eu.empresa_id).then(setEmpresa).catch(e => toast(e.message, true)); }, [eu.empresa_id]);
  if (!empresa) return <div><Topbar eu={eu} onSair={onSair} /><div className="empty" style={{ paddingTop: 60 }}>carregando…</div></div>;
  return <Participantes empresa={empresa} eu={eu} onSair={onSair} />;
}

function Participantes({ empresa, eu, onSair, onVoltar }) {
  const [eventos, setEventos] = useState(null); // null=loading · []=nenhum · [{evento,cota,usados,restante,pode_cadastrar,pode_editar}]
  const [selId, setSelId] = useState(null);     // id do evento escolhido
  const [lista, setLista] = useState(null);
  const [modal, setModal] = useState(null);     // null | { participante: <p>|null }
  const [salvando, setSalvando] = useState(false);
  const [info, setInfo] = useState(null);       // detalhes do evento (criativo/data/local)

  const carregarEventos = useCallback(async () => {
    try {
      const evs = await API.eventosDaEmpresa(empresa.id);
      setEventos(evs);
      setSelId(prev => {
        if (prev && evs.some(x => x.evento.id === prev)) return prev; // mantém escolha
        return evs.length === 1 ? evs[0].evento.id : null;            // 1 evento: auto-seleciona
      });
    } catch (e) { toast(e.message, true); setEventos([]); }
  }, [empresa.id]);
  useEffect(() => { carregarEventos(); }, [carregarEventos]);

  const carregarLista = useCallback(async () => {
    if (!selId) { setLista(null); return; }
    try { setLista(await API.listarParticipantes(empresa.id, selId)); }
    catch (e) { toast(e.message, true); }
  }, [empresa.id, selId]);
  useEffect(() => { carregarLista(); }, [carregarLista]);

  // detalhes de vitrine do evento (criativo, data, local) do sistema de eventos
  useEffect(() => {
    setInfo(null);
    if (!selId) return;
    API.eventoInfo(selId).then(r => setInfo(r && r.info ? r.info : null)).catch(() => {});
  }, [selId]);

  const item = eventos && selId ? eventos.find(x => x.evento.id === selId) : null;
  const evento = item ? item.evento : null;
  const cota = item && item.cota != null ? item.cota : empresa.cota;
  const usados = lista ? lista.length : (item && item.usados != null ? item.usados : 0);
  const cheia = cota > 0 && usados >= cota;
  const fechado = eventos != null && eventos.length === 0;
  const podeCadastrar = item ? item.pode_cadastrar : false;
  const podeEditar = item ? item.pode_editar : false;

  const salvar = async (d) => {
    setSalvando(true);
    try {
      if (modal && modal.participante) {
        await API.editarParticipante(modal.participante.id, d);
        toast('Participante atualizado');
      } else {
        await API.cadastrarParticipante(empresa.id, { ...d, evento_id: selId });
        toast('Participante cadastrado');
      }
      setModal(null);
      await Promise.all([carregarLista(), carregarEventos()]);
    } catch (err) { toast(err.message, true); }
    finally { setSalvando(false); }
  };
  const excluir = async (p) => {
    if (!confirm('Excluir este participante? O ingresso dele também será cancelado no sistema de eventos.')) return;
    try { await API.removerParticipante(p.id); toast('Excluído'); await Promise.all([carregarLista(), carregarEventos()]); }
    catch (e) { toast(e.message, true); }
  };
  const reemitir = async (p) => {
    try { const r = await API.reemitirParticipante(p.id); toast('Ingresso reenviado' + (r && r.email ? ' para ' + r.email : '')); }
    catch (e) { toast(e.message, true); }
  };

  const cotaDe = (it) => ({ cota: it.cota != null ? it.cota : empresa.cota, usados: it.usados != null ? it.usados : 0 });
  const statusEv = (ev) => ev.edicao_travada ? { cls: 'full', txt: 'travado' }
    : ev.ativo ? { cls: 'ok', txt: 'aberto' } : { cls: 'warn', txt: 'inscrições fechadas' };

  return (
    <div>
      <Topbar eu={eu} onSair={onSair} left={onVoltar && <button className="btn btn-ghost btn-sm" onClick={onVoltar}>← Voltar</button>} />
      <div className="container">
        <h1 className="page-title">{empresa.nome}</h1>

        {eventos == null ? <div className="empty">carregando…</div>
          : fechado ? (
            <div className="evento-banner fechado">
              <span>⚠️ <b>Nenhum evento disponível</b> — não há evento aberto, nem evento fechado com participantes seus. Quando o produtor abrir um evento, o cadastro libera por aqui.</span>
            </div>
          ) : !selId ? (
            <div className="card">
              <h2>Escolha o evento</h2>
              <p className="page-sub" style={{ marginTop: -6 }}>Você tem mais de um evento. Selecione em qual quer trabalhar (os abertos aceitam novos cadastros; os fechados seguem editáveis até o produtor travar).</p>
              <div className="event-grid">
                {eventos.map(it => {
                  const st = statusEv(it.evento);
                  return (
                    <button key={it.evento.id} className="event-card" onClick={() => setSelId(it.evento.id)}>
                      <div className="nome">{it.evento.nome}</div>
                      <div className="meta"><span className={'pill ' + st.cls}>{st.txt}</span><CotaPill e={cotaDe(it)} /></div>
                    </button>
                  );
                })}
              </div>
            </div>
          ) : (
            <>
              {(() => {
                const st = statusEv(evento);
                const aviso = (evento && evento.edicao_travada)
                  ? { txt: '🔒 Edição travada — esta lista está só para leitura.', cls: 'fechado' }
                  : podeCadastrar
                    ? { txt: cheia ? '🎟️ Cota cheia — não há vagas restantes neste evento.' : '🎟️ Inscrições abertas — cadastre os participantes da sua empresa.', cls: '' }
                    : { txt: '✏️ Inscrições fechadas — você ainda pode editar e remover quem já cadastrou.', cls: '' };
                return (
                  <div className="evento-hero">
                    {info && info.imagem ? <div className="capa" style={{ backgroundImage: 'url("' + info.imagem + '")' }} /> : null}
                    <div className="corpo">
                      <div className="topo">
                        <h2>{(evento && evento.nome) || (info && info.nome) || '…'}</h2>
                        <span className={'pill ' + st.cls}>{st.txt}</span>
                        <div className="acoes">
                          <CotaPill e={{ cota, usados }} />
                          {eventos.length > 1 && <button className="btn btn-ghost btn-sm" onClick={() => setSelId(null)}>trocar evento</button>}
                        </div>
                      </div>
                      {info && (info.data || info.local) ? (
                        <div className="infos">
                          {info.data ? <span>📅 {info.data}</span> : null}
                          {info.local ? <span>📍 {info.local}</span> : null}
                        </div>
                      ) : null}
                      <div className={'aviso' + (aviso.cls ? ' ' + aviso.cls : '')}>{aviso.txt}</div>
                    </div>
                  </div>
                );
              })()}

              <div className="card">
                <div className="actions">
                  <h2 style={{ margin: 0, flex: 1 }}>Participantes</h2>
                  {podeCadastrar && <button className="btn btn-accent btn-sm" disabled={cheia} onClick={() => setModal({ participante: null })}>+ Inserir participante</button>}
                  <a className="btn btn-sm" href={API.urlExportCSV(empresa.id, selId)}>Exportar CSV</a>
                  <button className="btn btn-sm" onClick={() => tokenIA('agente-ia-' + empresa.nome)}>Token p/ IA</button>
                </div>
                <div style={{ marginTop: 10 }}>
                  {lista == null ? <div className="empty">carregando…</div>
                    : lista.length === 0 ? <div className="empty">{podeCadastrar ? <>Nenhum participante neste evento ainda. Clique em <b>+ Inserir participante</b>.</> : 'Nenhum participante neste evento.'}</div>
                      : <div className="table-wrap"><table>
                        <thead><tr><th>Nome</th><th className="hide-sm">E-mail</th><th className="hide-sm">Telefone</th><th></th></tr></thead>
                        <tbody>{lista.map(p => (
                          <tr key={p.id}><td><b>{p.nome} {p.sobrenome}</b>{p.ticket_ref ? <span className="pill ok" style={{ marginLeft: 8 }} title="Ingresso emitido no sistema de eventos">🎟️ emitido</span> : null}</td>
                            <td className="hide-sm">{p.email}</td><td className="hide-sm">{p.telefone}</td>
                            <td style={{ textAlign: 'right' }}><div className="actions" style={{ justifyContent: 'flex-end' }}>
                              {p.ticket_ref ? <button className="btn btn-sm" title="Reenviar o ingresso por e-mail" onClick={() => reemitir(p)}>Reenviar</button> : null}
                              <button className="btn btn-sm" disabled={!podeEditar} onClick={() => setModal({ participante: p })}>Editar</button>
                              <button className="btn btn-sm btn-danger" disabled={!podeEditar} onClick={() => excluir(p)}>Excluir</button>
                            </div></td></tr>
                        ))}</tbody></table></div>}
                </div>
              </div>
            </>
          )}
      </div>

      {modal && (
        <Modal titulo={modal.participante ? 'Editar participante' : 'Inserir participante'} onClose={() => setModal(null)}>
          {!modal.participante && cheia
            ? <div className="empty">Cota cheia neste evento — não há vagas restantes.</div>
            : <ParticipanteForm inicial={modal.participante} salvando={salvando} onSalvar={salvar} onCancelar={() => setModal(null)} />}
        </Modal>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);