{industries.map(ind => { const ovr = overrides[ind.id] || {}; const customPrompt = ovr.systemPrompt && ovr.systemPrompt !== ind.systemPrompt; const isOpen = openId === ind.id; const value = ovr.systemPrompt ?? ind.systemPrompt; return (

{isOpen && (

Prompt do sistema · {ind.label}

onChange(ind.id, { systemPrompt: e.target.value })}
                />
                <p className="field-hint">
                  Inclua: identidade, produtos/serviços com preços, regras (frete, prazo, pagamento, agenda),
                  horário, restrições. Quanto mais específico, melhor.
                </p>
                <div className="field-row" style={{ marginTop: 12 }}>
                  <div className="field" style={{ marginBottom: 0 }}>
                    <label className="field-label">Mensagem de fallback (deste setor)</label>
                    <input
                      className="field-input"
                      placeholder="Vazio = usa o padrão global"
                      value={ovr.fallbackMessage || ''}
                      onChange={e => onChange(ind.id, { fallbackMessage: e.target.value })}
                    />
                  </div>
                  <div className="field" style={{ marginBottom: 0, alignSelf: 'end' }}>
                    {customPrompt && (
                      <button type="button" className="ghost-btn" onClick={() => onReset(ind.id)}>
                        ↺ Restaurar padrão
                      </button>
                    )}
                  </div>
                </div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function Toggle({ label, hint, checked, onChange }) {  return (
    <label className="toggle-row">
      <div>
        <div className="toggle-label">{label}</div>
        <div className="toggle-hint">{hint}</div>
      </div>
      <button
        type="button"
        role="switch"
        aria-checked={checked}
        className={`toggle-switch ${checked ? 'is-on' : ''}`}
        onClick={() => onChange(!checked)}
      >
        <span className="toggle-knob"></span>
      </button>
    </label>
  );
}

// ---------------- Metrics tab ----------------

const TYPE_LABELS = {
  page_view: 'Visualização',
  click: 'Clique',
  demo_setor: 'Setor testado',
  demo_user_msg: 'Mensagem do visitante',
  demo_ai_reply: 'Resposta IA',
  scroll_depth: 'Scroll',
};

const SECTOR_LABELS = {
  restaurante: 'Restaurante / Delivery',
  clinica: 'Clínica / Saúde',
  imobiliaria: 'Imobiliária',
  ecommerce: 'E-commerce / Moda',
  beleza: 'Beleza / Estética',
  academia: 'Academia / Fitness',
  pousada: 'Pousada / Turismo',
  oficina: 'Oficina / Auto',
};

const PLAN_LABELS = {
  plano_start: 'Plano Start',
  plano_pro: 'Plano Pro',
  plano_scale: 'Plano Scale',
  hero_ver_planos: 'CTA · Ver planos',
  hero_testar_ia: 'CTA · Testar a IA',
};

function MetricsPanel() {
  const [tick, setTick] = useState(0);
  const [range, setRange] = useState('all'); // all | today | 7d
  useEffect(() => {
    const t = setInterval(() => setTick(x => x + 1), 5000);
    return () => clearInterval(t);
  }, []);

const allEvents = useMemo(() => window.CBTrack.readEvents(), [tick]);

const events = useMemo(() => {
    if (range === 'all') return allEvents;
    const now = Date.now();
    const cutoff = range === 'today'
      ? new Date().setHours(0, 0, 0, 0)
      : now - 7 * 24 * 60 * 60 * 1000;
    return allEvents.filter(e => e.ts >= cutoff);
  }, [allEvents, range]);

const sessions = useMemo(() => new Set(events.map(e => e.session)).size, [events]);

// Conversion funnel
  const funnel = useMemo(() => {
    const sessionStages = {};
    events.forEach(e => {
      const s = e.session;
      if (!sessionStages[s]) sessionStages[s] = { view: false, demo: false, msg: false, plan: false };
      if (e.type === 'page_view') sessionStages[s].view = true;
      if (e.type === 'demo_setor') sessionStages[s].demo = true;
      if (e.type === 'demo_user_msg') sessionStages[s].msg = true;
      if (e.type === 'click' && e.payload.label && e.payload.label.startsWith('plano_')) sessionStages[s].plan = true;
    });
    const all = Object.values(sessionStages);
    const total = all.length || 1;
    return {
      view: all.filter(s => s.view).length,
      demo: all.filter(s => s.demo).length,
      msg: all.filter(s => s.msg).length,
      plan: all.filter(s => s.plan).length,
      total,
    };
  }, [events]);

// Sector ranking
  const sectorCounts = useMemo(() => {
    const c = {};
    events.filter(e => e.type === 'demo_setor').forEach(e => {
      const id = e.payload.id;
      c[id] = (c[id] || 0) + 1;
    });
    return c;
  }, [events]);
  const sectorMax = Math.max(1, ...Object.values(sectorCounts));

// Plan ranking — only plan_* events
  const planCounts = useMemo(() => {
    const c = {};
    events.filter(e => e.type === 'click' && e.payload.label && e.payload.label.startsWith('plano_')).forEach(e => {
      c[e.payload.label] = (c[e.payload.label] || 0) + 1;
    });
    return c;
  }, [events]);
  const planMax = Math.max(1, ...Object.values(planCounts));
  const planEntries = Object.entries(planCounts).sort((a, b) => b[1] - a[1]);

// CTA ranking (everything else)
  const ctaCounts = useMemo(() => {
    const c = {};
    events.filter(e => e.type === 'click').forEach(e => {
      const lbl = e.payload.label || '—';
      if (lbl.startsWith('plano_')) return;
      c[lbl] = (c[lbl] || 0) + 1;
    });
    return c;
  }, [events]);
  const ctaMax = Math.max(1, ...Object.values(ctaCounts));
  const ctaEntries = Object.entries(ctaCounts).sort((a, b) => b[1] - a[1]).slice(0, 6);

// Hour histogram
  const hourCounts = useMemo(() => {
    const h = Array(24).fill(0);
    events.forEach(e => { h[new Date(e.ts).getHours()]++; });
    return h;
  }, [events]);
  const hourMax = Math.max(1, ...hourCounts);

// AI conversation stats
  const aiStats = useMemo(() => {
    const userMsgs = events.filter(e => e.type === 'demo_user_msg');
    const replies = events.filter(e => e.type === 'demo_ai_reply');
    const avgLen = userMsgs.length
      ? Math.round(userMsgs.reduce((sum, e) => sum + (e.payload.len || 0), 0) / userMsgs.length)
      : 0;
    const sessionsWithChat = new Set(userMsgs.map(e => e.session)).size;
    const replyRate = userMsgs.length ? Math.round((replies.length / userMsgs.length) * 100) : 0;
    return { userMsgs: userMsgs.length, replies: replies.length, avgLen, sessionsWithChat, replyRate };
  }, [events]);

const recent = events.slice(-50).reverse();

const handleClear = () => {
    if (confirm('Apagar todos os eventos?')) {
      window.CBTrack.clearEvents();
      setTick(t => t + 1);
    }
  };

if (allEvents.length === 0) {
    return (
      <div className="empty-state">
        Nenhum evento registrado ainda.<br/>
        Abra a <a href="index.html" style={{color:'var(--green)'}}>página principal</a> e interaja para gerar dados.
      </div>
    );
  }

return (
    <div className="admin-section">
      <div className="metrics-toolbar">
        <div className="range-tabs">
          <button className={`range-tab ${range === 'all' ? 'is-active' : ''}`} onClick={() => setRange('all')}>Tudo</button>
          <button className={`range-tab ${range === '7d' ? 'is-active' : ''}`} onClick={() => setRange('7d')}>7 dias</button>
          <button className={`range-tab ${range === 'today' ? 'is-active' : ''}`} onClick={() => setRange('today')}>Hoje</button>
        </div>
        <div className="toolbar-actions">
          <button className="ghost-btn" onClick={exportJSON}>Exportar JSON</button>
          <button className="danger-btn" onClick={handleClear}>Limpar dados</button>
        </div>
      </div>

<div className="kpi-grid">
        <div className="kpi">
          <div className="kpi-label">Sessões</div>
          <div className="kpi-value">{sessions}</div>
          <div className="kpi-delta">visitantes únicos</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Visualizações</div>
          <div className="kpi-value">{totals.page_view}</div>
          <div className="kpi-delta">page views totais</div>
        </div>
        <div className="kpi kpi-accent">
          <div className="kpi-label">Conversão pra demo</div>
          <div className="kpi-value">{funnel.total ? Math.round((funnel.demo / funnel.total) * 100) : 0}<span className="kpi-unit">%</span></div>
          <div className="kpi-delta">{funnel.demo} de {funnel.total} sessões testaram a IA</div>
        </div>
        <div className="kpi kpi-accent">
          <div className="kpi-label">Conversão pra plano</div>
          <div className="kpi-value">{funnel.total ? Math.round((funnel.plan / funnel.total) * 100) : 0}<span className="kpi-unit">%</span></div>
          <div className="kpi-delta">{funnel.plan} cliques em planos</div>
        </div>
      </div>

{/* Funnel */}
      <div className="panel">
        <h3 className="panel-title">Funil de conversão</h3>
        <p className="panel-sub">Jornada da sessão · cada barra mostra % das sessões que chegaram a cada passo.</p>
        <FunnelBars funnel={funnel} />
      </div>

<div className="dash-grid">
        <div className="panel">
          <h3 className="panel-title">Indústrias mais testadas</h3>
          <p className="panel-sub">Onde os visitantes querem ver a IA trabalhando.</p>
          {Object.keys(sectorCounts).length === 0 ? (
            <div className="empty-state">Nenhum setor testado ainda.</div>
          ) : (
            Object.entries(sectorCounts)
              .sort((a, b) => b[1] - a[1])
              .map(([id, n]) => (
                <div key={id} className="bar-row">
                  <div className="bar-label">{SECTOR_LABELS[id] || id}</div>
                  <div className="bar-track">
                    <div className="bar-fill" style={{ width: `${(n / sectorMax) * 100}%` }}></div>
                  </div>
                  <div className="bar-value">{n}</div>
                </div>
              ))
          )}
        </div>

<div className="panel">
          <h3 className="panel-title">Plano mais clicado</h3>
          <p className="panel-sub">Sinal de intenção de compra.</p>
          {planEntries.length === 0 ? (
            <div className="empty-state">Nenhum clique em plano ainda.</div>
          ) : (
            planEntries.map(([lbl, n]) => (
              <div key={lbl} className="bar-row">
                <div className="bar-label">{PLAN_LABELS[lbl] || lbl}</div>
                <div className="bar-track">
                  <div className="bar-fill bar-fill-warm" style={{ width: `${(n / planMax) * 100}%` }}></div>
                </div>
                <div className="bar-value">{n}</div>
              </div>
            ))
          )}
        </div>
      </div>

<div className="dash-grid">
        <div className="panel">
          <h3 className="panel-title">Conversa com IA — uso real</h3>
          <p className="panel-sub">Quando o visitante continua a conversa após o script, vai por aqui.</p>
          <div className="mini-grid">
            <Mini label="Sessões que conversaram" value={aiStats.sessionsWithChat} />
            <Mini label="Mensagens enviadas" value={aiStats.userMsgs} />
            <Mini label="Respostas geradas" value={aiStats.replies} />
            <Mini label="Tamanho médio (chars)" value={aiStats.avgLen} />
          </div>
          <div className="reply-rate">
            <div className="reply-rate-bar">
              <div className="reply-rate-fill" style={{ width: `${aiStats.replyRate}%` }}></div>
            </div>
            <div className="reply-rate-label">
              <b>{aiStats.replyRate}%</b> taxa de resposta da IA
            </div>
          </div>
        </div>

<div className="panel">
          <h3 className="panel-title">CTAs (fora dos planos)</h3>
          <p className="panel-sub">Outros cliques rastreados.</p>
          {ctaEntries.length === 0 ? (
            <div className="empty-state">Sem cliques ainda.</div>
          ) : (
            ctaEntries.map(([lbl, n]) => (
              <div key={lbl} className="bar-row">
                <div className="bar-label" title={lbl}>{PLAN_LABELS[lbl] || lbl}</div>
                <div className="bar-track">
                  <div className="bar-fill bar-fill-cool" style={{ width: `${(n / ctaMax) * 100}%` }}></div>
                </div>
                <div className="bar-value">{n}</div>
              </div>
            ))
          )}
        </div>
      </div>

<div className="panel">
        <h3 className="panel-title">Atividade por hora</h3>
        <p className="panel-sub">Distribuição de eventos ao longo do dia (hora local).</p>
        <div className="hours">
          {hourCounts.map((n, i) => (
            <div
              key={i}
              className={`hours-bar ${n === 0 ? 'hours-bar-empty' : ''}`}
              style={{ height: n === 0 ? '4px' : `${(n / hourMax) * 100}%` }}
              title={`${i}h — ${n} eventos`}
            ></div>
          ))}
        </div>
        <div className="hours-axis">
          {Array.from({length: 24}, (_, i) => <span key={i}>{i.toString().padStart(2,'0')}h</span>)}
        </div>
      </div>

<div className="panel">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:'16px'}}>
          <div>
            <h3 className="panel-title">Log recente</h3>
            <p className="panel-sub">Últimos {recent.length} eventos.</p>
          </div>
        </div>
        <div className="event-log">
          {recent.map((e, i) => (
            <div key={i} className="event-row">
              <span className="event-time">{new Date(e.ts).toLocaleTimeString('pt-BR')}</span>
              <span className={`event-type t-${e.type}`}>{TYPE_LABELS[e.type] || e.type}</span>
              <span className="event-payload">
                {e.type === 'click' && (PLAN_LABELS[e.payload.label] || e.payload.label)}
                {e.type === 'demo_setor' && (SECTOR_LABELS[e.payload.id] || e.payload.id)}
                {e.type === 'demo_user_msg' && `“${e.payload.label}” · turn ${e.payload.turn}`}
                {e.type === 'demo_ai_reply' && (SECTOR_LABELS[e.payload.id] || e.payload.id)}
                {e.type === 'scroll_depth' && `${e.payload.depth}%`}
                {e.type === 'page_view' && (e.payload.ref || 'direct')}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Mini({ label, value }) {
  return (
    <div className="mini">
      <div className="mini-value">{value}</div>
      <div className="mini-label">{label}</div>
    </div>
  );
}

// ---------------- Shell ----------------

function AdminShell() {
  const [tab, setTab] = useState('metrics');
  const cfg = loadConfig();
  const activeProvider = PROVIDERS[cfg.activeProvider];

return (
    <div className="admin-shell">
      <div className="admin-top">
        <div className="admin-brand">
          <div className="admin-brand-mark">CB</div>
          <div>code<b>braz</b> · admin</div>
        </div>
        <div className="admin-top-right">
          <span className="admin-pill admin-pill-provider" title="Provedor ativo">
            <span className="admin-pill-dot" style={{ background: activeProvider.color }}></span>
            {activeProvider.label.split(' · ')[1] || activeProvider.label}
          </span>
          <span className="admin-pill">{new Date().toLocaleDateString('pt-BR')}</span>
          <a href="index.html" className="admin-pill admin-pill-link">← site</a>
          <button
            className="admin-pill admin-pill-link"
            style={{cursor:'pointer', background:'transparent', font:'inherit', border:'1px solid var(--line)'}}
            onClick={() => fetch('/api/admin/logout', { method: 'POST', credentials: 'include' }).finally(() => location.reload())}
          >
            sair
          </button>
        </div>
      </div>

<div className="admin-tabs">
        <button className={`admin-tab ${tab === 'metrics' ? 'is-active' : ''}`} onClick={() => setTab('metrics')}>
          Métricas
        </button>
        <button className={`admin-tab ${tab === 'config' ? 'is-active' : ''}`} onClick={() => setTab('config')}>
          Configuração da IA
        </button>
      </div>

{tab === 'metrics' && <MetricsPanel />}
      {tab === 'config' && <ConfigPanel />}
    </div>
  );
}

function App() {
  const [authed, setAuthed] = useState(false);
  const [checking, setChecking] = useState(true);

useEffect(() => {
    fetch('/api/admin/verify', { credentials: 'include' })
      .then(r => r.ok ? r.json() : Promise.reject())
      .then(d => { if (d.ok) setAuthed(true); })
      .catch(() => {})
      .finally(() => setChecking(false));
  }, []);

if (checking) return null;
  if (!authed) return <Login onAuth={() => setAuthed(true)} />;
  return <AdminShell />;
}

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