// QuadroHUD: painel de dados (888 × altura por linha) com cantoneiras ciano de 6 px que abrem do centro em 10 quadros. Cada linha
// (rótulo Rajdhani ciano + valor Orbitron branco com brilho ciano) revela por varredura da esquerda para a direita em 10 quadros,
// 8 quadros depois da anterior; fio magenta entre linhas. Cursor em bloco pisca na última.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, e5, eb, seg} from '../base';

export type LinhaHUD = {rotulo: string; valor: string};
export type QuadroHUDProps = {linhas: LinhaHUD[]; titulo?: string; inicio?: number; intervalo?: number; y?: number; fim?: number};

export const QuadroHUD: React.FC<QuadroHUDProps> = ({linhas, titulo, inicio = 0, intervalo = 8, y = 700, fim}) => {
  const f = useCurrentFrame();
  const t = f - inicio;
  if (t < 0 || (fim !== undefined && f >= fim)) return null;
  const h = 190;
  const altura = (titulo ? 90 : 0) + linhas.length * h + 40;
  const a = e5(seg(f, inicio, inicio + 10));
  const canto = (pos: React.CSSProperties) => <div style={{position: 'absolute', width: 70, height: 70, borderColor: COR.ciano, borderStyle: 'solid', borderWidth: 0, boxShadow: `0 0 14px ${COR.ciano}`, ...pos}} />;
  return <div style={{position: 'absolute', left: SEGURA.lado, top: y - altura / 2, width: LARGURA_UTIL, height: altura, transform: `scaleX(${Math.max(0.001, a)}) scaleY(${Math.max(0.001, eb(t / 12, 1.4))})`, background: 'rgba(13,2,33,0.62)', border: `2px solid ${COR.magenta}88`, boxSizing: 'border-box'}}>
    {canto({left: -6, top: -6, borderTopWidth: 6, borderLeftWidth: 6})}{canto({right: -6, top: -6, borderTopWidth: 6, borderRightWidth: 6})}
    {canto({left: -6, bottom: -6, borderBottomWidth: 6, borderLeftWidth: 6})}{canto({right: -6, bottom: -6, borderBottomWidth: 6, borderRightWidth: 6})}
    {titulo && <div style={{position: 'absolute', left: 40, top: 22, fontFamily: FONTE.apoio, fontWeight: 600, fontSize: 40, letterSpacing: '0.3em', color: COR.magenta, textTransform: 'uppercase'}}>{titulo}</div>}
    {linhas.map((l, i) => {
      const r = e5(seg(f, inicio + 10 + i * intervalo, inicio + 20 + i * intervalo));
      const tam = caber(l.valor.toUpperCase(), 96, LARGURA_UTIL - 120, 900, 0.02);
      const ultima = i === linhas.length - 1;
      return <div key={i} style={{position: 'absolute', left: 40, right: 40, top: (titulo ? 90 : 20) + i * h, height: h, borderTop: i > 0 ? `2px solid ${COR.magenta}88` : undefined, clipPath: `inset(0 ${(1 - r) * 100}% 0 0)`}}>
        <div style={{position: 'absolute', left: 0, top: 18, fontFamily: FONTE.apoio, fontWeight: 600, fontSize: 40, letterSpacing: '0.3em', color: COR.ciano, textTransform: 'uppercase'}}>{l.rotulo}</div>
        <div style={{position: 'absolute', left: 0, top: 66, fontFamily: FONTE.titulo, fontWeight: 900, fontSize: tam, letterSpacing: '0.02em', color: COR.branco, textShadow: `0 0 16px ${COR.ciano}`, whiteSpace: 'nowrap'}}>{l.valor.toUpperCase()}{ultima && Math.floor(f / 8) % 2 === 0 ? <span style={{background: COR.ciano, color: 'transparent'}}>_</span> : null}</div>
      </div>;
    })}
  </div>;
};