// Terminal com o prompt sendo digitado: a janela entra com mola, cada linha é digitada letra a letra e o cursor pisca.
// el.dados (ou el): linhas [texto] (ou titulo/fala), rotulo (barra da janela), velocidade (letras/s), cores {fundo, texto, acento}, fontes {mono}, largura, altura, atraso (s).
import React from 'react';
import { useVideoConfig } from 'remotion';

function mola(s) {
  if (s <= 0) return 0;
  const w = 2 * Math.PI * 1.7, z = 0.6, wd = w * Math.sqrt(1 - z * z);
  return 1 - Math.exp(-z * w * s) * (Math.cos(wd * s) + (z * w / wd) * Math.sin(wd * s));
}

export default function TerminalDigitando({ el, t }) {
  const d = el.dados || el;
  const v = useVideoConfig();
  const W = d.largura || v.width, H = d.altura || v.height;
  const c = d.cores || {};
  const f = d.fontes || {};
  const u = t - (d.atraso || 0);
  // O prompt "›" é da janela: a linha que já vem com "> " ou "$ " saía com ele dobrado ("› > faz um site", 15/10).
  const linhas = (Array.isArray(d.linhas) && d.linhas.length ? d.linhas : [d.titulo || d.fala || 'faz o vídeo pra mim']).map((x) => String(x).replace(/^\s*[>›$#]\s+/, '')).slice(0, 6);
  const vel = d.velocidade || 26;
  const k = mola(u);
  const largura = Math.min(W * 0.96, H * 1.5);
  const tam = Math.max(14, Math.min(largura * 0.058, (H * 0.6) / (linhas.length * 1.8 + 2)));
  // Cada linha começa quando a anterior terminou de ser digitada (com um respiro).
  let relogio = 0.35;
  const tempos = linhas.map((l) => { const ini = relogio; relogio += l.length / vel + 0.25; return ini; });
  const ac = c.acento || '#8B7CF6';
  return (
    <div style={{ position: 'absolute', inset: 0, width: W, height: H, background: c.fundo || 'transparent', display: 'grid', placeItems: 'center' }}>
      <div style={{
        width: largura, borderRadius: tam * 0.8, overflow: 'hidden', background: 'rgba(13,12,22,.92)',
        border: '1px solid rgba(255,255,255,.12)', boxShadow: `0 30px 80px rgba(0,0,0,.55), 0 0 60px ${ac}22`,
        transform: `translateY(${(1 - k) * 40}px) scale(${0.92 + 0.08 * k})`, opacity: Math.min(1, Math.max(0, u / 0.2)),
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: tam * 0.4, padding: `${tam * 0.55}px ${tam * 0.8}px`, borderBottom: '1px solid rgba(255,255,255,.08)' }}>
          {['#ff5f57', '#febc2e', '#28c840'].map((cor) => <div key={cor} style={{ width: tam * 0.55, height: tam * 0.55, borderRadius: '50%', background: cor }} />)}
          <div style={{ marginLeft: tam * 0.5, color: '#ffffff88', fontFamily: `"${f.mono || 'JetBrains Mono'}", monospace`, fontSize: tam * 0.62 }}>{d.rotulo || 'claude code'}</div>
        </div>
        <div style={{ padding: `${tam * 0.8}px ${tam}px ${tam * 1.1}px`, fontFamily: `"${f.mono || 'JetBrains Mono'}", monospace`, fontSize: tam, lineHeight: 1.6, color: c.texto || '#fff' }}>
          {linhas.map((l, i) => {
            const n = Math.max(0, Math.min(l.length, Math.floor((u - tempos[i]) * vel)));
            if (u < tempos[i]) return null;
            const digitando = n < l.length || i === linhas.length - 1;
            const pisca = Math.floor(u * 2.2) % 2 === 0;
            return (
              <div key={i} style={{ whiteSpace: 'pre-wrap' }}>
                <span style={{ color: ac, marginRight: tam * 0.5 }}>›</span>
                {l.slice(0, n)}
                {digitando ? <span style={{ display: 'inline-block', width: tam * 0.55, height: tam * 1.1, verticalAlign: 'text-bottom', marginLeft: 2, background: ac, opacity: n < l.length || pisca ? 1 : 0 }} /> : null}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}