// RelogioFlip: relógio de cartões que viram. Cada cartão preto (270 × 380) mostra dois dígitos brancos em Big Shoulders 900,
// com a linha do meio; quando o valor muda, a metade de cima cai e a nova sobe, como relógio de aeroporto. Herói.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE, MONO, e5, ov, seg} from '../base';

export type RelogioFlipProps = {
  cartoes: {rotulo: string; /** valor inicial */ de: number; /** quadros entre trocas; 0 = não troca */ intervalo?: number}[];
  inicio?: number;
  /** quadro (na cena) da 1ª troca */
  tick?: number;
  /** centro vertical, px */
  y: number;
  fim?: number;
};

const dois = (n: number) => String(Math.max(0, n)).padStart(2, '0');
const W = 270, H = 380, GAP = 35;

const Metade: React.FC<{texto: string; topo: boolean; rot: number}> = ({texto, topo, rot}) =>
  <div style={{position: 'absolute', left: 0, top: topo ? 0 : H / 2, width: W, height: H / 2, overflow: 'hidden', background: COR.tinta, borderRadius: topo ? '34px 34px 6px 6px' : '6px 6px 34px 34px', transformOrigin: topo ? '50% 100%' : '50% 0%', transform: `perspective(900px) rotateX(${rot}deg)`, backfaceVisibility: 'hidden'}}>
    <div style={{position: 'absolute', left: 0, width: W, top: topo ? 0 : -H / 2, height: H, lineHeight: `${H}px`, textAlign: 'center', fontFamily: FONTE, fontWeight: 900, fontSize: 270, color: COR.osso, letterSpacing: '-0.01em'}}>{texto}</div>
  </div>;

export const RelogioFlip: React.FC<RelogioFlipProps> = ({cartoes, inicio = 0, tick = 14, y, fim = 1e9}) => {
  const f = useCurrentFrame();
  if (f < inicio - 1 || f > fim + 12) return null;
  const sai = e5(seg(f, fim, fim + 10)), total = cartoes.length * W + (cartoes.length - 1) * GAP;
  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 160}px)`}}>
    {cartoes.map((c, i) => {
      const t = ov(seg(f, inicio + i * 4, inicio + i * 4 + 16));
      const iv = c.intervalo ?? 0;
      const n = iv && f >= tick ? Math.floor((f - tick) / iv) + 1 : 0;
      const dentro = iv && f >= tick ? (f - tick) % iv : 99;
      const p = dentro < 8 ? dentro / 8 : 1; // progresso da virada atual
      const atual = c.de - n, antes = c.de - Math.max(0, n - 1);
      const velho = n > 0 && p < 1 ? antes : atual;
      return <div key={i} style={{position: 'absolute', left: 540 - total / 2 + i * (W + GAP), top: y - H / 2, width: W, height: H, transform: `translateY(${(1 - t) * 1000}px) rotate(${(1 - t) * (i % 2 ? 10 : -10)}deg)`}}>
        <div style={{position: 'absolute', inset: 0, boxShadow: '0 40px 60px rgba(14,14,12,.3)', borderRadius: 34}} />
        <Metade texto={dois(atual)} topo rot={0} />
        <Metade texto={dois(velho)} topo={false} rot={0} />
        {n > 0 && p < 1 && <>
          <Metade texto={dois(antes)} topo rot={-e5(p) * 90} />
          <Metade texto={dois(atual)} topo={false} rot={(1 - e5(p)) * 90} />
        </>}
        <div style={{position: 'absolute', left: 0, top: H / 2 - 3, width: W, height: 6, background: COR.osso, opacity: 0.9}} />
        <div style={{position: 'absolute', left: 0, width: W, top: H + 28, textAlign: 'center', fontFamily: MONO, fontWeight: 700, fontSize: 40, letterSpacing: '0.3em', color: COR.tinta}}>{c.rotulo}</div>
      </div>;
    })}
  </div>;
};