// Monitor: a MOLDURA que se repete em todo vídeo do kit. Um monitor CRT de plástico grafite em pé
// (retrato), com cantos de 46 px, chanfro de luz em cima e sombra embaixo, o vidro abaulado, e o queixo
// com a placa do modelo e o LED âmbar que pisca quando a tela escreve. O vidro recebe as camadas do CRT
// (ver Tela.tsx). Liga no quadro `liga` e desliga no `desliga` (a linha e o ponto do tubo).
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE_PLACA, MONITOR, VIDRO, e5, seg} from '../base';

export type MonitorProps = {
  /** texto da placa no queixo (modelo fictício) */
  placa?: string;
  /** quadro (absoluto) em que o tubo liga / desliga; −1 = nunca */
  liga?: number; desliga?: number;
  children?: React.ReactNode;
};

export const Monitor: React.FC<MonitorProps> = ({placa = 'VG-9 · FÓSFORO P3', liga = 0, desliga = -1, children}) => {
  const f = useCurrentFrame();
  // ligar: linha horizontal que abre (0–8) · desligar: fecha numa linha (0–4) e num ponto (4–8)
  const on = liga < 0 ? 1 : e5(seg(f, liga + 2, liga + 9));
  const offA = desliga < 0 ? 0 : seg(f, desliga, desliga + 4), offB = desliga < 0 ? 0 : seg(f, desliga + 4, desliga + 8);
  const sy = Math.max(0.004, on * (1 - offA * 0.996));
  const sx = 1 - offB * 0.99;
  const linha = (on > 0 && on < 1) || offA > 0;
  const led = f % 22 < 18 ? 1 : 0.35;
  return <div style={{position: 'absolute', left: MONITOR.x, top: MONITOR.y, width: MONITOR.l, height: MONITOR.a}}>
    {/* plástico */}
    <div style={{position: 'absolute', inset: 0, borderRadius: 46, background: `linear-gradient(180deg, ${COR.plasticoLuz} 0%, ${COR.plastico} 12%, ${COR.plastico} 80%, ${COR.plasticoSombra} 100%)`,
      boxShadow: '0 40px 80px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.6)'}} />
    {/* rebaixo do vidro */}
    <div style={{position: 'absolute', left: VIDRO.x - MONITOR.x - 14, top: VIDRO.y - MONITOR.y - 14, width: VIDRO.l + 28, height: VIDRO.a + 28, borderRadius: 70, background: '#0B0908', boxShadow: 'inset 0 6px 14px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06)'}} />
    {/* o vidro */}
    <div style={{position: 'absolute', left: VIDRO.x - MONITOR.x, top: VIDRO.y - MONITOR.y, width: VIDRO.l, height: VIDRO.a, borderRadius: '64px / 56px', overflow: 'hidden', background: '#050302'}}>
      <div style={{position: 'absolute', inset: 0, transform: `scale(${sx}, ${sy})`, filter: linha ? 'brightness(2.2)' : undefined}}>{children}</div>
      {linha && <div style={{position: 'absolute', left: '50%', top: '50%', width: VIDRO.l * sx, height: 4, transform: 'translate(-50%,-50%)', background: COR.quente, boxShadow: `0 0 24px ${COR.fosforo}`}} />}
    </div>
    {/* queixo: placa + LED */}
    <div style={{position: 'absolute', left: 70, bottom: 54, fontFamily: FONTE_PLACA, fontWeight: 700, fontSize: 22, letterSpacing: '0.24em', color: '#5E564D', textTransform: 'uppercase'}}>{placa}</div>
    <div style={{position: 'absolute', right: 74, bottom: 60, width: 14, height: 14, borderRadius: 7, background: COR.led, opacity: on > 0.5 && offB < 1 ? led : 0.15, boxShadow: `0 0 12px ${COR.led}`}} />
    <div style={{position: 'absolute', right: 104, bottom: 56, width: 54, height: 22, borderRadius: 4, background: '#141210', boxShadow: 'inset 0 2px 3px rgba(0,0,0,.8)'}} />
  </div>;
};