// CameraTela: a câmera da gravação. Chaves {em, x, y, zoom} (x, y = ponto da JANELA que vai pro CENTRO
// da tela; zoom 0,7 = janela inteira, 2–2,4 = um controle enche a tela). Entre chaves: rampa de
// velocidade (easeInOutQuint) e DESFOQUE DE MOVIMENTO na direção do deslocamento (até 7 px).
// `entra`/`sai`: a janela sobe inclinada (rotateX 22° → 0) e sai caindo pra trás.
import React from 'react';
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {CENTRO, JANELA, chave, e5, seg} from '../base';

export type ChaveTela = {em: number; x?: number; y?: number; zoom?: number};
export type CameraTelaProps = {chaves: ChaveTela[]; entra?: number; sai?: number; children: React.ReactNode};

const estado = (f: number, ks: ChaveTela[]) => ({x: chave(f, ks, 'x', JANELA.l / 2), y: chave(f, ks, 'y', JANELA.a / 2), z: chave(f, ks, 'zoom', 0.7)});

export const CameraTela: React.FC<CameraTelaProps> = ({chaves, entra = 0, sai = 1e9, children}) => {
  const f = useCurrentFrame();
  const a = estado(f, chaves), b = estado(f - 1, chaves);
  const vx = (a.x * a.z - b.x * b.z), vy = (a.y * a.z - b.y * b.z), vz = Math.abs(a.z - b.z) * 600;
  const bx = Math.min(7, Math.abs(vx) * 0.05 + vz * 0.02), by = Math.min(7, Math.abs(vy) * 0.05 + vz * 0.02);
  const te = e5(seg(f, entra, entra + 18)), ts = seg(f, sai, sai + 14) ** 2;
  const tx = CENTRO[0] - a.x * a.z, ty = CENTRO[1] - a.y * a.z;
  return <AbsoluteFill style={{perspective: 2200}}>
    <svg width={0} height={0} style={{position: 'absolute'}}><filter id="tt-borrao" x="-10%" y="-10%" width="120%" height="120%"><feGaussianBlur stdDeviation={`${bx.toFixed(2)} ${by.toFixed(2)}`} /></filter></svg>
    <AbsoluteFill style={{transform: `translateY(${(1 - te) * 900 + ts * 300}px) rotateX(${(1 - te) * 22 + ts * 30}deg) scale(${1 - ts * 0.2})`, transformOrigin: '50% 60%', opacity: 1 - ts}}>
      <div style={{position: 'absolute', left: 0, top: 0, width: JANELA.l, height: JANELA.a, transformOrigin: '0 0', transform: `translate(${tx}px, ${ty}px) scale(${a.z})`, filter: bx + by > 0.6 ? 'url(#tt-borrao)' : undefined}}>
        {children}
      </div>
    </AbsoluteFill>
  </AbsoluteFill>;
};