// BootBios: a partida da máquina. Cabeçalho do BIOS, o CONTADOR DE MEMÓRIA gigante (140 px, herói)
// que sobe em saltos irregulares, e as checagens que imprimem uma a uma com pontos de guia e [OK]
// em vídeo inverso. Tudo dentro do vidro (coordenadas do vidro: 840 × 1110).
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {BLOOM, COR, FONTE, GRADE, ruido, seg} from '../base';

export type BootBiosProps = {
  cabecalho: string[];
  memoria: {rotulo: string; ate: number; unidade: string};
  checagens: string[];
  inicio?: number;
  /** quadros entre linhas impressas */
  intervalo?: number;
};

export const BootBios: React.FC<BootBiosProps> = ({cabecalho, memoria, checagens, inicio = 0, intervalo = 5}) => {
  const f = useCurrentFrame() - inicio;
  const M = GRADE.margem, T = 44;
  const tMem = seg(f, 6, 26);
  // saltos irregulares (como o teste de RAM de verdade)
  const passos = Math.floor(tMem * 12), v = tMem >= 1 ? memoria.ate : Math.round(memoria.ate * Math.min(1, (passos + ruido(passos) * 0.8) / 12));
  const linha = (t: string, i: number, y: number, cor = COR.fosforo) => f >= i ? <div key={t + y} style={{position: 'absolute', left: M, top: y, fontFamily: FONTE, fontSize: T, color: cor, textShadow: BLOOM(cor, 0.8), whiteSpace: 'pre'}}>{t}</div> : null;
  return <>
    {cabecalho.map((c, i) => linha(c, i * 2, 70 + i * 52, i === 0 ? COR.quente : COR.fosforo))}
    {f >= 5 && <div style={{position: 'absolute', left: M, top: 250, fontFamily: FONTE, fontSize: T, color: COR.apagado, textShadow: BLOOM(COR.apagado, 0.5)}}>{memoria.rotulo}</div>}
    {f >= 6 && <div style={{position: 'absolute', left: M - 6, top: 290, fontFamily: FONTE, fontSize: 210, lineHeight: 1, color: COR.quente, textShadow: BLOOM(COR.fosforo, 1.6), whiteSpace: 'pre'}}>
      {String(v).padStart(6, '0')}<span style={{fontSize: 96, color: COR.fosforo}}>{memoria.unidade}</span>
      {tMem >= 1 && <span style={{fontSize: 70, background: COR.fosforo, color: COR.vidro, padding: '0 10px', marginLeft: 20, verticalAlign: 'middle', textShadow: 'none', boxShadow: BLOOM(COR.fosforo, 0.6)}}>OK</span>}
    </div>}
    {checagens.map((c, i) => {
      const em = 30 + i * intervalo;
      if (f < em) return null;
      const pontos = Math.min(14, Math.floor((f - em) * 4));
      const ok = f >= em + 4;
      return <div key={i} style={{position: 'absolute', left: M, top: 560 + i * GRADE.linha, fontFamily: FONTE, fontSize: T, color: COR.fosforo, textShadow: BLOOM(COR.fosforo, 0.8), whiteSpace: 'pre'}}>
        {c} {'.'.repeat(pontos)}{ok && <span style={{color: COR.quente}}> OK</span>}
      </div>;
    })}
  </>;
};