// Cursor: o ponteiro GRANDE (seta de 34 × 50 na janela; com zoom 2 vira ~70 px), contorno branco e
// sombra. Anda entre chaves {em, x, y} em ARCO (desvio de 12% da distância) com rampa de velocidade.
// Em cada `cliques`: afunda pra 82% por 4 quadros e solta uma ONDA laranja (r 0 → 54, 14 quadros).
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, rampa, seg} from '../base';

export type CursorProps = {chaves: {em: number; x: number; y: number}[]; cliques?: number[]; aparece?: number; some?: number};

const pos = (f: number, ks: CursorProps['chaves']): [number, number] => {
  if (f <= ks[0].em) return [ks[0].x, ks[0].y];
  for (let i = 1; i < ks.length; i++) if (f <= ks[i].em) {
    const a = ks[i - 1], b = ks[i], t = rampa(seg(f, a.em, b.em));
    const dx = b.x - a.x, dy = b.y - a.y, arco = Math.sin(Math.PI * t) * 0.12;
    return [a.x + dx * t - dy * arco, a.y + dy * t + dx * arco];
  }
  const u = ks[ks.length - 1]; return [u.x, u.y];
};

export const Cursor: React.FC<CursorProps> = ({chaves, cliques = [], aparece = 0, some = 1e9}) => {
  const f = useCurrentFrame();
  if (f < aparece || f > some) return null;
  const [x, y] = pos(f, chaves);
  const ultimo = cliques.filter((c) => c <= f).pop();
  const aperta = ultimo !== undefined && f - ultimo < 4 ? 0.82 : 1;
  return <>
    {cliques.map((c, i) => {
      const t = seg(f, c, c + 14); if (t <= 0 || t >= 1) return null;
      const [cx, cy] = pos(c, chaves);
      return <div key={i} style={{position: 'absolute', left: cx - 54 * t, top: cy - 54 * t, width: 108 * t, height: 108 * t, borderRadius: '50%', border: `4px solid ${COR.acento}`, opacity: 1 - t, background: `rgba(255,91,20,${0.18 * (1 - t)})`}} />;
    })}
    <svg width={34} height={50} viewBox="0 0 17 25" style={{position: 'absolute', left: x - 3, top: y - 2, transform: `scale(${aperta})`, transformOrigin: '3px 2px', filter: 'drop-shadow(0 4px 6px rgba(0,0,0,.3))', overflow: 'visible'}}>
      <path d="M1.5 1.5 L1.5 20 L6 15.6 L9.2 22.6 L12.2 21.3 L9.1 14.5 L15.3 14.5 Z" fill={COR.tinta} stroke="#fff" strokeWidth={1.6} strokeLinejoin="round" />
    </svg>
  </>;
};