/* ============================================================
   CodeSection.jsx — "Como desenvolvemos"
   Editor com simulação de codificação AO VIVO: o código é
   digitado caractere a caractere (cursor + rolagem automática),
   ciclando pelas abas agente.ts · fluxo.n8n.json · supabase.sql.
   Clicar numa aba reinicia a digitação dela.
   ============================================================ */

/* cores de token */
const CS_COL = { kw: '#3D8BFF', fn: '#00D4FF', str: '#1FD17B', com: '#6B7591', punc: '#A7B0C5', txt: '#C9D3E8', num: '#FFB020' };

/* Cada programa: lista de linhas; cada linha: lista de tokens [texto, corKey?].
   Token sem corKey → cor padrão (txt). Linha vazia [] = quebra em branco. */
const CS_PROGRAMS = [
  {
    name: 'agente.ts',
    lines: [
      [['// Agente de atendimento da AR — multicanal', 'com']],
      [['import', 'kw'], [' { '], ['criarAgente', 'fn'], [' } '], ['from', 'kw'], [' '], ['"@ar/core"', 'str'], [';']],
      [['import', 'kw'], [' { '], ['whatsapp', 'fn'], [', '], ['crm', 'fn'], [' } '], ['from', 'kw'], [' '], ['"@ar/canais"', 'str'], [';']],
      [],
      [['export const', 'kw'], [' '], ['agente', 'fn'], [' = '], ['criarAgente', 'fn'], ['({']],
      [['  nome: '], ['"Atendimento AR"', 'str'], [',']],
      [['  modelo: '], ['"claude / gpt"', 'str'], [',']],
      [['  canais: ['], ['whatsapp', 'fn'], [', '], ['crm', 'fn'], ['],']],
      [['  '], ['aoReceber', 'fn'], ['('], ['msg', 'punc'], [') {']],
      [['    '], ['const', 'kw'], [' intent = '], ['await', 'kw'], [' '], ['classificar', 'fn'], ['(msg);']],
      [['    '], ['if', 'kw'], [' (intent.lead) '], ['enviarParaCRM', 'fn'], ['(msg);']],
      [['    '], ['return', 'kw'], [' '], ['responder', 'fn'], ['(msg, { contexto: '], ['true', 'num'], [' });']],
      [['  },']],
      [['});']],
      [],
      [['// → deploy automático via GitHub Actions', 'com']],
    ],
  },
  {
    name: 'fluxo.n8n.json',
    lines: [
      [['{', 'punc']],
      [['  '], ['"workflow"', 'str'], [': '], ['"qualificacao-de-leads"', 'str'], [',']],
      [['  '], ['"trigger"', 'str'], [': '], ['"webhook:whatsapp"', 'str'], [',']],
      [['  '], ['"nodes"', 'str'], [': [']],
      [['    { '], ['"type"', 'str'], [': '], ['"ai.classificar"', 'str'], [' },']],
      [['    { '], ['"type"', 'str'], [': '], ['"supabase.insert"', 'str'], [' },']],
      [['    { '], ['"type"', 'str'], [': '], ['"crm.criarOportunidade"', 'str'], [' },']],
      [['    { '], ['"type"', 'str'], [': '], ['"notificar.equipe"', 'str'], [' }']],
      [['  ],']],
      [['  '], ['"agendamento"', 'str'], [': '], ['"realtime"', 'str'], [',']],
      [['  '], ['"retry"', 'str'], [': '], ['3', 'num'], [',']],
      [['  '], ['"ativo"', 'str'], [': '], ['true', 'num']],
      [['}', 'punc']],
    ],
  },
  {
    name: 'supabase.sql',
    lines: [
      [['-- Base de leads qualificados (Supabase)', 'com']],
      [['create table', 'kw'], [' '], ['leads', 'fn'], [' (']],
      [['  id '], ['uuid', 'kw'], [' '], ['primary key', 'kw'], [' '], ['default', 'kw'], [' '], ['gen_random_uuid', 'fn'], ['(),']],
      [['  nome '], ['text', 'kw'], [',']],
      [['  canal '], ['text', 'kw'], [' '], ['check', 'kw'], [' (canal '], ['in', 'kw'], [' ('], ["'whatsapp'", 'str'], [','], ["'site'", 'str'], [')),']],
      [['  intent '], ['text', 'kw'], [',']],
      [['  score '], ['int', 'kw'], [' '], ['default', 'kw'], [' '], ['0', 'num'], [',']],
      [['  criado_em '], ['timestamptz', 'kw'], [' '], ['default', 'kw'], [' '], ['now', 'fn'], ['()']],
      [[');']],
      [],
      [['create index', 'kw'], [' '], ['on', 'kw'], [' '], ['leads', 'fn'], [' (score '], ['desc', 'kw'], [');']],
    ],
  },
];

const csLineLen = (line) => line.reduce((a, t) => a + t[0].length, 0);
const csTotal = (lines) => lines.reduce((a, l) => a + csLineLen(l) + 1, 0); // +1 = quebra de linha

/* devolve as linhas reveladas até `revealed` caracteres + posição do cursor */
function csTypeLines(lines, revealed) {
  const out = [];
  let rem = revealed, caretAt = -1;
  for (let i = 0; i < lines.length; i++) {
    const line = lines[i], len = csLineLen(line);
    if (rem >= len) {
      out.push(line);
      rem -= len + 1; // consome a linha + sua quebra
      if (rem < 0) { caretAt = i; break; }
    } else {
      const partial = []; let r = rem;
      for (const t of line) {
        if (r <= 0) break;
        if (t[0].length <= r) { partial.push(t); r -= t[0].length; }
        else { partial.push([t[0].slice(0, r), t[1]]); r = 0; }
      }
      out.push(partial); caretAt = i; break;
    }
  }
  if (caretAt === -1 && out.length) caretAt = out.length - 1;
  return { out, caretAt };
}

const CodeSection = () => {
  const [tab, setTab] = React.useState(0);
  const [revealed, setRevealed] = React.useState(0);
  const codeRef = React.useRef(null);

  const badges = ['Claude Code', 'Codex', 'GPT', 'Git / GitHub', 'n8n', 'Supabase', 'APIs', 'Integrações'];

  const program = CS_PROGRAMS[tab];
  const total = React.useMemo(() => csTotal(program.lines), [tab]);

  /* motor de digitação: revela caracteres; ao terminar, segura e troca de aba.
     Exceção consciente à regra #7 (prefers-reduced-motion): esta animação é o
     coração da seção "Como desenvolvemos", então roda sempre — decisão do cliente. */
  React.useEffect(() => {
    setRevealed(0);
    let cur = 0, hold = 0;
    const id = setInterval(() => {
      if (document.hidden) return; // aba em segundo plano: não gasta CPU nem dispara re-render
      if (cur >= total) {
        if (++hold > 55) { clearInterval(id); setTab(t => (t + 1) % CS_PROGRAMS.length); }
        return;
      }
      cur = Math.min(total, cur + 2 + Math.floor(Math.random() * 3));
      setRevealed(cur);
    }, 26);
    return () => clearInterval(id);
  }, [tab, total]);

  /* rolagem automática (código "subindo") */
  React.useEffect(() => {
    if (codeRef.current) codeRef.current.scrollTop = codeRef.current.scrollHeight;
  }, [revealed]);

  /* ícones estáticos (barra de título / rodapé) */
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, [tab]);

  const { out, caretAt } = csTypeLines(program.lines, revealed);
  const typing = revealed < total;

  return (
    <section style={{ background: 'var(--ar-bg-section)', padding: '116px 0', overflow: 'hidden' }}>
      <Container>
        <div className="grid-split" style={{ display: 'grid', gridTemplateColumns: '1.45fr 1fr', gap: 56, alignItems: 'center' }}>
          {/* Editor */}
          <Reveal style={{ minWidth: 0 }}>
            <div style={{ position: 'relative' }}>
              <div style={{ position: 'absolute', inset: -30, background: 'radial-gradient(circle at 30% 30%, rgba(0,94,255,0.28), transparent 60%)', filter: 'blur(20px)', pointerEvents: 'none' }} />
              <div style={{
                position: 'relative', borderRadius: 16, overflow: 'hidden',
                background: '#080B14', border: '1px solid rgba(255,255,255,0.10)',
                boxShadow: '0 50px 110px -40px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,212,255,0.10)',
                fontFamily: 'var(--ar-font-mono)',
              }}>
                {/* title bar */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '11px 14px', background: '#0B0F1A', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
                  <span style={{ width: 11, height: 11, borderRadius: 999, background: '#FF5F57' }} />
                  <span style={{ width: 11, height: 11, borderRadius: 999, background: '#FEBC2E' }} />
                  <span style={{ width: 11, height: 11, borderRadius: 999, background: '#28C840' }} />
                  <span style={{ marginLeft: 12, fontFamily: 'var(--ar-font-body)', fontSize: 12, color: 'var(--ar-text-dim)' }}>AR · workspace — agente-atendimento</span>
                  <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, fontFamily: 'var(--ar-font-body)', color: typing ? '#00D4FF' : '#1FD17B' }}>
                    <span className="cs-livedot" style={{ background: typing ? '#00D4FF' : '#1FD17B' }} />
                    {typing ? 'IA escrevendo…' : 'código gerado'}
                  </span>
                </div>
                {/* tabs */}
                <div style={{ display: 'flex', background: '#0A0E18', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
                  {CS_PROGRAMS.map((p, i) => (
                    <button key={p.name} onClick={() => setTab(i)} style={{
                      padding: '9px 16px', fontFamily: 'var(--ar-font-mono)', fontSize: 12, cursor: 'pointer',
                      background: i === tab ? '#080B14' : 'transparent', border: 'none',
                      borderRight: '1px solid rgba(255,255,255,0.06)',
                      borderTop: i === tab ? '2px solid #00D4FF' : '2px solid transparent',
                      color: i === tab ? 'var(--ar-text-main)' : 'var(--ar-text-dim)',
                    }}>{p.name}</button>
                  ))}
                </div>
                {/* progress bar */}
                <div style={{ height: 2, background: 'rgba(255,255,255,0.05)' }}>
                  <div style={{ height: '100%', width: (total ? Math.min(100, (revealed / total) * 100) : 0) + '%', background: 'linear-gradient(90deg,#005EFF,#00D4FF)', transition: 'width 60ms linear' }} />
                </div>
                {/* code body (rola automaticamente) */}
                <div ref={codeRef} className="cs-code" style={{ height: 320, overflow: 'hidden', background: '#080B14' }}>
                  <div style={{ display: 'flex', minHeight: '100%' }}>
                    <div className="cs-gutter">{out.map((_, i) => <div key={i}>{i + 1}</div>)}</div>
                    <div className="cs-pre">
                      {out.map((line, i) => (
                        <div key={i} className="cs-line">
                          {line.map((t, j) => <span key={j} style={{ color: CS_COL[t[1] || 'txt'] }}>{t[0]}</span>)}
                          {i === caretAt && <span className="cs-caret" />}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
                {/* terminal footer */}
                <div style={{ padding: '10px 16px', background: '#0B0F1A', borderTop: '1px solid rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'var(--ar-font-mono)', fontSize: 11.5, color: 'var(--ar-text-dim)', flexWrap: 'wrap' }}>
                  <span style={{ color: '#1FD17B', display: 'inline-flex', alignItems: 'center', gap: 5 }}><i data-lucide="activity" style={{ width: 13, height: 13 }}></i> agente ativo</span>
                  <span style={{ color: '#00D4FF' }}>847 atendimentos hoje</span>
                  <span style={{ color: '#FFB020', display: 'inline-flex', alignItems: 'center', gap: 5 }}><i data-lucide="trending-up" style={{ width: 13, height: 13 }}></i> 94% resolvidos</span>
                </div>
              </div>
            </div>
          </Reveal>

          {/* Copy + badges */}
          <div>
            <SectionHead
              eyebrow="COMO DESENVOLVEMOS"
              title={<>Da ideia ao ar em semanas — com <GradText>IA, automação e engenharia moderna</GradText></>}
              sub="Usamos ferramentas de IA de última geração para entregar mais rápido, com menos custo e mais qualidade — sem que sua empresa precise montar uma equipe de tecnologia."
              subMobile="IA e engenharia moderna para entregar mais rápido, com menos custo."
              maxWidth={520}
            />
            <Reveal delay={140}>
              <div className="cs-badges" style={{ display: 'flex', flexWrap: 'wrap', gap: 9, marginTop: 28 }}>
                {badges.map(b => (
                  <span key={b} style={{
                    display: 'inline-flex', alignItems: 'center', gap: 7, padding: '8px 14px', borderRadius: 10,
                    background: 'var(--ar-bg-card)', border: '1px solid rgba(255,255,255,0.10)',
                    fontFamily: 'var(--ar-font-mono)', fontSize: 13, color: 'var(--ar-text-main)',
                  }}>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: 'linear-gradient(135deg,#005EFF,#00D4FF)' }} />{b}
                  </span>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </Container>
      <style>{`
        .cs-gutter { padding: 14px 12px 18px; text-align: right; color: rgba(52,64,96,0.55); user-select: none; background: #080B14; font-size: 13px; line-height: 22px; flex-shrink: 0; }
        .cs-pre { padding: 14px 18px 18px; flex: 1; min-width: 0; white-space: pre; font-size: 13px; line-height: 22px; color: #C9D3E8; overflow: hidden; }
        .cs-line { min-height: 22px; }
        .cs-caret { display: inline-block; width: 7px; height: 14px; background: #00D4FF; margin-left: 2px; vertical-align: text-bottom; box-shadow: 0 0 8px rgba(0,212,255,0.85); animation: csBlink 1s steps(1) infinite; }
        @keyframes csBlink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
        .cs-livedot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; box-shadow: 0 0 8px currentColor; animation: csPulse 1.4s ease-in-out infinite; }
        @keyframes csPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
        @media (max-width: 600px) {
          .cs-code { height: 232px !important; }
          .cs-gutter, .cs-pre { font-size: 11.5px !important; line-height: 19px !important; }
          .cs-gutter { padding: 12px 9px 14px !important; }
          .cs-pre { padding: 12px 13px 14px !important; }
          .cs-line { min-height: 19px !important; }
          .cs-badges span { padding: 6px 11px !important; font-size: 11.5px !important; }
        }
      `}</style>
    </section>
  );
};

window.CodeSection = CodeSection;