/* Clarity App — React standalone */
const { useState, useEffect, useCallback } = React;

const API = '/api';

function useClarityData() {
  const [data, setData]       = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState(null);

  const load = useCallback(async () => {
    setLoading(true); setError(null);
    try {
      const r = await fetch(`${API}/clarity`);
      if (!r.ok) throw new Error(await r.text());
      setData(await r.json());
    } catch (e) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => { load(); }, [load]);
  return { data, loading, error, reload: load };
}

/* ── helpers ── */
function fmtUrl(url) {
  try { return new URL(url).pathname || url; } catch { return url; }
}

function fmtTime(seconds) {
  if (!seconds) return '0s';
  const m = Math.floor(seconds / 60);
  const s = seconds % 60;
  return m > 0 ? `${m}m ${s}s` : `${s}s`;
}

function signalColor(name, pct) {
  if (name === 'scriptErrors' || name === 'rageClicks') return pct > 2 ? 'neg'  : 'ok';
  if (name === 'deadClicks')                            return pct > 10 ? 'warn' : 'ok';
  if (name === 'quickback')                             return pct > 8  ? 'warn' : 'ok';
  return 'neutral';
}

/* ── Subcomponents ── */
function KpiCard({ label, value, sub }) {
  return (
    <div className="cl-kpi">
      <div className="cl-kpi-label">{label}</div>
      <div className="cl-kpi-value">{value}</div>
      {sub && <div className="cl-kpi-sub">{sub}</div>}
    </div>
  );
}

function SignalCard({ name, label, icon, pct, count }) {
  const color = signalColor(name, pct);
  const barColor = { neg: '#f87171', warn: '#fb923c', ok: '#4ade80', neutral: '#B8FF3D' }[color];
  return (
    <div className="cl-signal">
      <div className="cl-signal-top">
        <div className="cl-signal-name">{label}</div>
        <span className="cl-signal-icon">{icon}</span>
      </div>
      <div className={`cl-signal-pct ${color}`}>{pct}%</div>
      <div className="cl-signal-bar-bg">
        <div className="cl-signal-bar" style={{ width: `${Math.min(pct * 5, 100)}%`, background: barColor }}/>
      </div>
      <div className="cl-signal-count">{count} ocorrências</div>
    </div>
  );
}

function BarList({ items, nameKey = 'name', valKey = 'sessionsCount', label = 'sessões', max }) {
  const peak = max || Math.max(...items.map(i => parseInt(i[valKey] || i.visitsCount || 0, 10)));
  return (
    <div className="cl-bar-list">
      {items.map((item, i) => {
        const val = parseInt(item[valKey] || item.visitsCount || 0, 10);
        return (
          <div className="cl-bar-row" key={i}>
            <div className="cl-bar-meta">
              <span className="cl-bar-name" title={item[nameKey]}>{item[nameKey]}</span>
              <span className="cl-bar-val">{val} {label}</span>
            </div>
            <div className="cl-bar-track">
              <div className="cl-bar-fill" style={{ width: `${(val / peak) * 100}%` }}/>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function PageTable({ pages }) {
  return (
    <table className="cl-table">
      <thead>
        <tr>
          <th>Página</th>
          <th style={{ textAlign: 'right' }}>Visitas</th>
        </tr>
      </thead>
      <tbody>
        {pages.map((p, i) => (
          <tr key={i}>
            <td><span className="url" title={p.url}>{fmtUrl(p.url)}</span></td>
            <td><span className="num">{p.visitsCount}</span></td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

/* ── Screens ── */
function OverviewScreen({ data }) {
  const { traffic, scrollDepth, engagementTime, behavior, device, browser, os, country, popularPages, pageTitle, referrer, period, collectedAt } = data;
  const sessions = traffic.sessions - traffic.bots;

  const signals = [
    { name: 'deadClicks',      label: 'Dead Clicks',      icon: '☠',  ...behavior.deadClicks      },
    { name: 'rageClicks',      label: 'Rage Clicks',      icon: '😤', ...behavior.rageClicks      },
    { name: 'quickback',       label: 'Quickback',        icon: '↩',  ...behavior.quickback        },
    { name: 'excessiveScroll', label: 'Scroll Excessivo', icon: '↕',  ...behavior.excessiveScroll },
    { name: 'scriptErrors',    label: 'Erros de Script',  icon: '⚠',  ...behavior.scriptErrors    },
  ];

  return (
    <>
      <div className="cl-header">
        <div className="cl-header-left">
          <h1>Visão Geral</h1>
          <p>Comportamento dos visitantes e sinais de fricção</p>
        </div>
        <div className="cl-period-badge">
          {period.start} → {period.end}
          {collectedAt && <> · coletado {collectedAt.slice(0, 16).replace('T', ' ')}</>}
        </div>
      </div>

      {/* KPIs */}
      <div className="cl-kpi-row">
        <KpiCard label="Sessões reais"   value={sessions.toLocaleString('pt-BR')} sub={`${traffic.bots} bots filtrados`}/>
        <KpiCard label="Usuários únicos" value={traffic.users.toLocaleString('pt-BR')}/>
        <KpiCard label="Páginas/sessão"  value={traffic.pagesPerSession.toFixed(1)}/>
        <KpiCard label="Scroll médio"    value={`${scrollDepth}%`} sub="profundidade média"/>
        <KpiCard label="Tempo ativo"     value={fmtTime(engagementTime.active)} sub={`total: ${fmtTime(engagementTime.total)}`}/>
      </div>

      {/* Signals */}
      <div className="cl-signals">
        {signals.map(s => <SignalCard key={s.name} {...s}/>)}
      </div>

      {/* Popular pages + Page titles */}
      <div className="cl-grid-2">
        <div className="cl-card">
          <div className="cl-card-title">
            URLs mais visitadas
            <span className="count">top {popularPages.length}</span>
          </div>
          <PageTable pages={popularPages}/>
        </div>
        <div className="cl-card">
          <div className="cl-card-title">
            Páginas por sessões
            <span className="count">top {pageTitle.length}</span>
          </div>
          <BarList items={pageTitle} nameKey="name" valKey="sessionsCount" label="sessões"/>
        </div>
      </div>

      {/* Breakdowns */}
      <div className="cl-grid-3">
        <div className="cl-card">
          <div className="cl-card-title">Dispositivos</div>
          <BarList items={device} nameKey="name" valKey="sessionsCount" label="sessões"/>
        </div>
        <div className="cl-card">
          <div className="cl-card-title">Sistemas operacionais</div>
          <BarList items={os} nameKey="name" valKey="sessionsCount" label="sessões"/>
        </div>
        <div className="cl-card">
          <div className="cl-card-title">Países</div>
          <BarList items={country} nameKey="name" valKey="sessionsCount" label="sessões"/>
        </div>
      </div>

      {/* Browser + Referrer */}
      <div className="cl-grid-2">
        <div className="cl-card">
          <div className="cl-card-title">Navegadores</div>
          <BarList items={browser} nameKey="name" valKey="sessionsCount" label="sessões"/>
        </div>
        <div className="cl-card">
          <div className="cl-card-title">
            Origens de tráfego
            <span className="count">{referrer.length} fontes</span>
          </div>
          <BarList items={referrer} nameKey="name" valKey="sessionsCount" label="sessões"/>
        </div>
      </div>
    </>
  );
}

/* ── Sidebar ── */
function Sidebar({ screen, onNav }) {
  const nav = [
    { id: 'overview',  label: 'Visão Geral',  icon: '◉' },
  ];
  return (
    <aside className="cl-sidebar">
      <div className="cl-brand">
        <div className="cl-brand-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
            <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/>
            <circle cx="12" cy="12" r="3"/>
          </svg>
        </div>
        <div>
          <div className="cl-brand-name">Clarity</div>
          <div className="cl-brand-sub">Microsoft · refatorando.com.br</div>
        </div>
      </div>

      <div className="cl-nav-label">Análise</div>
      {nav.map(n => (
        <button key={n.id} className={`cl-nav-item ${screen === n.id ? 'active' : ''}`} onClick={() => onNav(n.id)}>
          <span className="cl-nav-icon">{n.icon}</span>
          {n.label}
        </button>
      ))}

      <div className="cl-collect-note">
        Dados via Microsoft Clarity API.<br/>
        Coleta agendada 1× por dia.<br/>
        Janela: últimos 3 dias.
      </div>
    </aside>
  );
}

/* ── Root ── */
function App() {
  const [screen, setScreen] = useState('overview');
  const { data, loading, error, reload } = useClarityData();

  return (
    <div className="cl-shell">
      <Sidebar screen={screen} onNav={setScreen}/>
      <main className="cl-main">
        {loading && (
          <div className="cl-loading">
            <div className="cl-spinner"/>
            Carregando dados do Clarity…
          </div>
        )}
        {error && (
          <div className="cl-error">
            Erro ao carregar: {error}<br/>
            <br/>
            Execute: <strong>node scripts/collect-clarity.js</strong>
          </div>
        )}
        {!loading && !error && data && (
          screen === 'overview' ? <OverviewScreen data={data}/> : null
        )}
      </main>
    </div>
  );
}

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