// FormaGeometrica: o herói de formas. Um corpo de 500 px que vira círculo → flor → quadrado sem parar, girando,
// cercado por um anel de 14 marcadores que trocam de forma junto. Tudo em um SVG, sem imagem.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, c01, e3, eb, seg} from '../base';

const raio = (fase: number, ang: number, R: number) => {
  // fase 0 círculo, 1 flor de 5 pétalas, 2 quadrado arredondado, 3 volta ao círculo
  const circ = R, flor = R * (0.7 + 0.3 * Math.cos(5 * ang)), q = R * 0.86 / Math.max(Math.abs(Math.cos(ang)), Math.abs(Math.sin(ang)));
  const i = Math.floor(fase) % 3, t = e3(fase - Math.floor(fase));
  const A = [circ, flor, q][i], B = [flor, q, circ][i];
  return A + (B - A) * t;
};
const caminho = (fase: number, R: number, rot: number) => {
  const pts = Array.from({length: 96}, (_, k) => {const a = (k / 96) * Math.PI * 2, r = raio(fase, a, R); return `${(Math.cos(a + rot) * r).toFixed(1)},${(Math.sin(a + rot) * r).toFixed(1)}`;});
  return `M${pts.join('L')}Z`;
};

export type FormaGeometricaProps = {cor?: string; corAnel?: string; inicio?: number; y?: number; /** quadros por troca de forma */ periodo?: number;
  /** v2: um motivo por vez. O anel de marcadores e o contorno extra só entram com `anel: true` (e aí sem legenda junto). */ anel?: boolean; raio?: number};

export const FormaGeometrica: React.FC<FormaGeometricaProps> = ({cor = COR.creme, corAnel = COR.vermelho, inicio = 0, y = 740, periodo = 24, anel = false, raio: R0 = 250}) => {
  const f = useCurrentFrame();
  const en = eb(seg(f, inicio, inicio + 16)), fase = Math.max(0, f - inicio) / periodo;
  const rot = (f - inicio) * 0.035;
  return <svg width={1080} height={1000} viewBox="-540 -500 1080 1000" style={{position: 'absolute', left: 0, top: y - 500, overflow: 'visible'}}>
    <g transform={`scale(${en})`} opacity={c01(en * 2)}>
      {anel && <circle r={470} fill="none" stroke={corAnel} strokeWidth="3" strokeDasharray="6 14" transform={`rotate(${-rot * 30})`} />}
      <path d={caminho(fase, R0, rot)} fill={cor} stroke={corAnel} strokeWidth="6" transform={`scale(${1 + 0.04 * Math.sin(f / 4)})`} />
      {anel && <path d={caminho(fase + 0.15, R0 * 1.16, -rot)} fill="none" stroke={corAnel} strokeWidth="3" opacity="0.8" />}
      {anel && Array.from({length: 14}, (_, k) => {
        const a = (k / 14) * Math.PI * 2 + rot * 1.3, x = Math.cos(a) * 400, yy = Math.sin(a) * 400;
        return <path key={k} d={caminho(fase + k * 0.07, 24, a)} fill={cor} transform={`translate(${x},${yy})`} />;
      })}
    </g>
  </svg>;
};