// Fundo: o estúdio escuro. Breu sem emenda, um FEIXE de luz que cai do teto (volume com poeira),
// um poço de luz no chão polido e vinheta. O feixe balança devagar: nada fica parado.
import React from 'react';
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {COR} from '../base';

export type FundoProps = {
  /** centro do feixe em % da largura */
  feixe?: number;
  /** centro do poço de luz no chão, em % da tela */
  poca?: [number, number];
  /** força do feixe e do poço (0–1) */
  forca?: number;
  /** linha do horizonte do chão polido em % da altura (o chão fica 4% mais claro abaixo dela) */
  horizonte?: number;
};

const rnd = (i: number) => {const x = Math.sin(i * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x);};

export const Fundo: React.FC<FundoProps> = ({feixe = 50, poca = [50, 66], forca = 1, horizonte = 64}) => {
  const f = useCurrentFrame();
  const bal = Math.sin(f / 46) * 2.2; // o feixe balança ±2,2%
  const x = feixe + bal;
  return <AbsoluteFill style={{background: COR.breu, overflow: 'hidden'}}>
    {/* chão polido: um tom acima do breu, que some no horizonte */}
    <AbsoluteFill style={{background: `linear-gradient(180deg, ${COR.breu} 0%, ${COR.breu} ${horizonte - 8}%, ${COR.chao} ${horizonte}%, #0B0C10 100%)`}} />
    {/* o feixe: trapézio do teto ao chão, borrado */}
    <AbsoluteFill style={{
      clipPath: `polygon(${x - 7}% -2%, ${x + 7}% -2%, ${x + 30}% ${poca[1] + 2}%, ${x - 30}% ${poca[1] + 2}%)`,
      background: `linear-gradient(180deg, rgba(154,163,181,${0.2 * forca}) 0%, rgba(154,163,181,${0.07 * forca}) 55%, rgba(154,163,181,0) 100%)`,
      filter: 'blur(28px)',
    }} />
    {/* poeira no feixe */}
    {Array.from({length: 26}, (_, i) => {
      const px = x + (rnd(i) - 0.5) * 30 * (0.3 + rnd(i + 9));
      const py = ((rnd(i + 3) * 70 + f * (0.05 + rnd(i + 5) * 0.08)) % 70) + 2;
      const a = (0.25 + 0.5 * rnd(i + 7)) * forca * (0.5 + 0.5 * Math.sin(f / 9 + i));
      return <div key={i} style={{position: 'absolute', left: `${px}%`, top: `${py}%`, width: 3, height: 3, borderRadius: 2, background: '#CFD6E4', opacity: a * 0.6}} />;
    })}
    {/* poço de luz no chão */}
    <AbsoluteFill style={{background: `radial-gradient(34% 5.5% at ${poca[0] + bal * 0.5}% ${poca[1]}%, rgba(170,180,200,${0.2 * forca}) 0%, rgba(170,180,200,${0.06 * forca}) 55%, rgba(0,0,0,0) 100%)`}} />
    {/* vinheta */}
    <AbsoluteFill style={{background: 'radial-gradient(120% 75% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.75) 100%)'}} />
  </AbsoluteFill>;
};