/* SEL.IA v2 — additional sections: stats strip, integration map,
   processes timeline, activity ticker, reveal-on-scroll hook. */

const useReveal = () => {
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      document.querySelectorAll('.reveal').forEach(el => el.classList.add('in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -10% 0px' });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
};

/* ---------- Animated counter ---------- */
const AnimatedNumber = ({ to, duration = 1400, format = (n) => n.toLocaleString('pt-BR') }) => {
  const ref = React.useRef(null);
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      setVal(to); return;
    }
    let raf, started = false, t0;
    const step = (t) => {
      if (!t0) t0 = t;
      const p = Math.min(1, (t - t0) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(to * eased));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !started) {
          started = true;
          raf = requestAnimationFrame(step);
          io.disconnect();
        }
      });
    }, { threshold: 0.4 });
    if (ref.current) io.observe(ref.current);
    return () => { cancelAnimationFrame(raf); io.disconnect(); };
  }, [to, duration]);
  return <span ref={ref}>{format(val)}</span>;
};

/* ---------- Stats Strip (sits inside dark band) ---------- */
const StatsStrip = () => (
  <div className="stats-strip">
    <div className="stat-cell">
      <div className="stat-num"><span className="grad"><AnimatedNumber to={60000} format={(n)=>`+${(n/1000).toFixed(0)} mil`}/></span></div>
      <div className="stat-label">Processos SEI indexados</div>
    </div>
    <div className="stat-cell">
      <div className="stat-num"><AnimatedNumber to={7}/><span style={{color:'rgba(255,255,255,0.40)',fontWeight:500}}> / 9</span></div>
      <div className="stat-label">Fontes integradas (2 no roadmap)</div>
    </div>
    <div className="stat-cell">
      <div className="stat-num"><AnimatedNumber to={42} format={(n)=>`${n}s`}/></div>
      <div className="stat-label">Tempo médio de resposta cruzando 7 fontes</div>
    </div>
    <div className="stat-cell">
      <div className="stat-num">24<span style={{color:'rgba(255,255,255,0.40)'}}>/</span>7</div>
      <div className="stat-label">Monitoramento contínuo, sem janelas cegas</div>
    </div>
  </div>
);

/* ---------- Integration Map ---------- */
const IntegrationMap = () => {
  const [pulse, setPulse] = React.useState(0);
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const id = setInterval(() => setPulse(p => (p + 1) % 6), 1100);
    return () => clearInterval(id);
  }, []);

  // Node coords for SVG (matches CSS positions, rough relative %).
  const nodes = [
    { x: 12,  y: 10 },  // p1 ANEEL
    { x: 88,  y: 10 },  // p2 DOU
    { x: 7,   y: 50 },  // p3 SEI
    { x: 93,  y: 50 },  // p4 BDGD
    { x: 12,  y: 92 },  // p5 Participação
    { x: 88,  y: 92 },  // p6 CCEE
  ];

  // Build an S-curve path from node (nx,ny) to center (50,50) using a cubic bezier.
  // Control points are offset along the perpendicular of the connecting vector,
  // alternating sides per-node so we get the classic S shape.
  const sPath = (nx, ny, i) => {
    const cx = 50, cy = 50;
    const dx = cx - nx, dy = cy - ny;
    const len = Math.hypot(dx, dy) || 1;
    // Perpendicular unit vector
    const px = -dy / len, py = dx / len;
    // Alternate the curl direction so adjacent lines don't overlap
    const sign = i % 2 === 0 ? 1 : -1;
    const curl = len * 0.35 * sign;
    // First control point near the node, pushed perpendicular one way
    const c1x = nx + dx * 0.33 + px * curl;
    const c1y = ny + dy * 0.33 + py * curl;
    // Second control point near the center, pushed perpendicular the other way
    const c2x = nx + dx * 0.66 - px * curl;
    const c2y = ny + dy * 0.66 - py * curl;
    return `M ${nx} ${ny} C ${c1x} ${c1y}, ${c2x} ${c2y}, ${cx} ${cy}`;
  };

  return (
    <div className="intmap reveal">
      <svg className="intmap-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <linearGradient id="intgrad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#ff5b8a"/>
            <stop offset="100%" stopColor="#ef405b"/>
          </linearGradient>
        </defs>
        {nodes.map((n, i) => (
          <path
            key={i}
            d={sPath(n.x, n.y, i)}
            className={`intmap-line ${pulse === i ? 'active' : ''}`}
            vectorEffect="non-scaling-stroke"
          />
        ))}
      </svg>

      <div className="intmap-center">
        <svg className="intmap-logo" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Stokhos">
          <path d="M32 8C18.7 8 8 17.4 8 29c0 6.6 3.5 12.5 9 16.4V56l9.6-6.2c1.7.3 3.5.5 5.4.5 13.3 0 24-9.4 24-21S45.3 8 32 8z" fill="#fff"/>
          <circle cx="22" cy="29" r="3" fill="#d91965"/>
          <circle cx="32" cy="29" r="3" fill="#d91965"/>
          <circle cx="42" cy="29" r="3" fill="#d91965"/>
        </svg>
      </div>

      <div className={`intmap-node p1 ${pulse === 0 ? 'live' : ''}`}>
        <div className="n-name">ANEEL</div>
        <div className="n-meta"><span className="n-pulse"/>142 normas/mês</div>
      </div>
      <div className={`intmap-node p2 ${pulse === 1 ? 'live' : ''}`}>
        <div className="n-name">DOU</div>
        <div className="n-meta"><span className="n-pulse"/>publicações diárias</div>
      </div>
      <div className={`intmap-node p3 ${pulse === 2 ? 'live' : ''}`}>
        <div className="n-name">SEI</div>
        <div className="n-meta"><span className="n-pulse"/>processos vivos</div>
      </div>
      <div className={`intmap-node p4 ${pulse === 3 ? 'live' : ''}`}>
        <div className="n-name">BDGD</div>
        <div className="n-meta"><span className="n-pulse"/>geo-distribuição</div>
      </div>
      <div className={`intmap-node p5 ${pulse === 4 ? 'live' : ''}`}>
        <div className="n-name">Participação Pública</div>
        <div className="n-meta"><span className="n-pulse"/>audiências abertas</div>
      </div>
      <div className="intmap-node p6">
        <div className="n-name">CCEE</div>
        <div className="n-meta n-soon">no roadmap</div>
      </div>
    </div>
  );
};

/* ---------- Activity Ticker (under integration map) ---------- */
const TICKER_ITEMS = [
  { tag: 'ANEEL',  text: 'REH 3.421/2026 publicada — revisão tarifária Enel SP', live: true },
  { tag: 'SEI',    text: 'Processo 48500.001234/2026-77 atualizado — voto da Diretoria', live: true },
  { tag: 'DOU',    text: 'Edição Extra Seção 1 — Despacho ANEEL 2.118', live: true },
  { tag: 'Alerta', text: 'Prazo crítico: contribuição CP 089/2026 fecha em 3 dias', alert: true },
  { tag: 'BDGD',   text: 'Cargas residenciais SE/CO atualizadas — base 2026Q1' },
  { tag: 'ANEEL',  text: 'Sessão pública 12/04 — pauta de 14 itens divulgada' },
  { tag: 'SEI',    text: '11 processos com movimentação nas últimas 24h' },
  { tag: 'Alerta', text: 'Voto-vista solicitado em PRORET módulo 2.7', alert: true },
];

const ActivityTicker = () => {
  // duplicate items for seamless loop
  const items = [...TICKER_ITEMS, ...TICKER_ITEMS];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {items.map((it, i) => (
          <div className="ticker-item" key={i}>
            <span className={`tk-tag ${it.alert ? 'alert' : it.live ? 'live' : ''}`}>{it.tag}</span>
            <span>{it.text}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ---------- Processes Timeline ---------- */
const ProcessesTimeline = () => (
  <div className="proc-grid">
    <div className="timeline-wrap reveal">
      <div className="timeline-head">
        <div>
          <div className="timeline-id">Processo SEI 48500.001234/2026-77</div>
          <div className="timeline-title">Revisão Tarifária Periódica — Enel SP · 4º Ciclo</div>
        </div>
        <span className="tl-status live">Em andamento</span>
      </div>

      <div className="tl-track">
        <div className="tl-rail"/>

        <div className="tl-event">
          <div className="tl-dot"/>
          <div className="tl-text">
            <div className="tl-when">14/03/2026 · 09:42</div>
            <div className="tl-what">Abertura do processo administrativo</div>
            <div className="tl-detail">SRT/ANEEL inicia a revisão com base na Nota Técnica nº 78/2026.</div>
          </div>
          <span className="tl-tag aneel">ANEEL</span>
        </div>

        <div className="tl-event">
          <div className="tl-dot"/>
          <div className="tl-text">
            <div className="tl-when">22/03/2026 · 18:11</div>
            <div className="tl-what">Publicação da CP 089/2026 no DOU</div>
            <div className="tl-detail">Consulta pública aberta por 45 dias para contribuições da sociedade.</div>
          </div>
          <span className="tl-tag dou">DOU</span>
        </div>

        <div className="tl-event">
          <div className="tl-dot"/>
          <div className="tl-text">
            <div className="tl-when">02/04/2026 · 14:33</div>
            <div className="tl-what">Voto-vista da Diretora Agnes</div>
            <div className="tl-detail">Pedido de vista por 30 dias — mudança no parâmetro Xe.</div>
          </div>
          <span className="tl-tag aneel">SEI</span>
        </div>

        <div className="tl-ai-card">
          <div className="tl-ai-icon"><LandIcon name="sparkles" size={14}/></div>
          <div>
            <div className="tl-ai-title">Predição SEL.IA</div>
            <div className="tl-ai-body">
              Padrão de votos da Diretora Agnes em revisões similares (n=12) sugere <b>aprovação com ressalva no Xe</b>.
              Probabilidade de aderência ao voto do relator: <b>34%</b>.
            </div>
          </div>
        </div>

        <div className="tl-event future">
          <div className="tl-dot"/>
          <div className="tl-text">
            <div className="tl-when">05/05/2026 · prevista</div>
            <div className="tl-what">Encerramento da consulta pública</div>
            <div className="tl-detail">Prazo crítico para contribuição da distribuidora.</div>
          </div>
          <span className="tl-tag alert">Prazo</span>
        </div>

        <div className="tl-event future">
          <div className="tl-dot"/>
          <div className="tl-text">
            <div className="tl-when">19/05/2026 · prevista</div>
            <div className="tl-what">Sessão pública de julgamento</div>
            <div className="tl-detail">Decisão final do colegiado sobre a revisão tarifária.</div>
          </div>
          <span className="tl-tag aneel">ANEEL</span>
        </div>
      </div>
    </div>

    <div className="proc-side">
      <div className="proc-stat featured reveal">
        <div className="ps-label">Processos monitorados</div>
        <div className="ps-value"><AnimatedNumber to={12847}/></div>
        <div className="ps-trend up" style={{color:'#4ade80'}}>↑ 184 nos últimos 7 dias</div>
      </div>
      <div className="proc-stat reveal">
        <div className="ps-label">Em prazo crítico</div>
        <div className="ps-value"><AnimatedNumber to={23}/></div>
        <div className="ps-trend warn">3 vencem esta semana</div>
      </div>
      <div className="proc-stat reveal">
        <div className="ps-label">Movimentação · 24h</div>
        <div className="ps-value"><AnimatedNumber to={47}/></div>
        <div className="ps-trend up">↑ acima da média</div>
      </div>
      <div className="proc-stat reveal">
        <div className="ps-label">Alertas ativos</div>
        <div className="ps-value"><AnimatedNumber to={8}/></div>
        <div className="ps-trend warn">2 críticos</div>
      </div>
    </div>
  </div>
);

Object.assign(window, { useReveal, AnimatedNumber, StatsStrip, IntegrationMap, ActivityTicker, ProcessesTimeline });