// TerminalComando: uma janela de terminal de borda branca de 3 px. O comando é digitado letra a letra, depois as linhas de resposta
// aparecem de uma vez (corte seco), cada uma com ✓, e a última linha fica invertida (bloco branco).
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE_T, c01, seg} from '../base';
import {inverso} from '../formas/Quadro';

export type TerminalComandoProps = {comando: string; saidas: string[]; cor?: string; inicio?: number; y?: number; /** letras por quadro */ ritmo?: number; /** quadros entre linhas de saída */ intervalo?: number};

export const TerminalComando: React.FC<TerminalComandoProps> = ({comando, saidas, cor = COR.branco, inicio = 0, y = 700, ritmo = 1.4, intervalo = 7}) => {
  const f = useCurrentFrame();
  const fundo = inverso(cor), LH = 96;
  const letras = Math.min(comando.length, Math.max(0, Math.floor((f - inicio - 4) * ritmo)));
  const t1 = inicio + 4 + comando.length / ritmo + 4;
  const H = 150 + (saidas.length + 1) * LH + 50;
  const visivel = f >= inicio;
  if (!visivel) return null;
  return <div style={{position: 'absolute', left: 96, width: 888, top: y - H / 2, height: H, border: `4px solid ${cor}`, background: fundo, boxSizing: 'border-box'}}>
    <div style={{height: 76, borderBottom: `4px solid ${cor}`, display: 'flex', alignItems: 'center', gap: 16, padding: '0 28px'}}>
      {[0, 1, 2].map((i) => <div key={i} style={{width: 22, height: 22, borderRadius: 11, border: `3px solid ${cor}`}} />)}
      <div style={{marginLeft: 20, fontFamily: FONTE_T, fontSize: 26, color: cor, letterSpacing: '0.08em'}}>~/projeto</div>
    </div>
    <div style={{padding: '34px 40px', fontFamily: FONTE_T, fontWeight: 500, fontSize: 42, color: cor, whiteSpace: 'pre'}}>
      <div style={{height: LH}}>$ {comando.slice(0, letras)}<span style={{display: 'inline-block', width: 26, height: 50, background: cor, verticalAlign: 'middle', marginLeft: 4, opacity: Math.floor(f / 6) % 2 && letras >= comando.length ? 0 : 1}} /></div>
      {saidas.map((s, i) => {
        const on = f >= t1 + i * intervalo, ultima = i === saidas.length - 1;
        return <div key={i} style={{height: LH, display: 'flex', alignItems: 'center', opacity: on ? 1 : 0}}>
          <span style={{background: ultima ? cor : 'transparent', color: ultima ? fundo : cor, padding: ultima ? '2px 18px' : 0, fontWeight: ultima ? 700 : 500}}>{ultima ? '▲ ' : '✓ '}{s}</span>
        </div>;
      })}
    </div>
  </div>;
};