// FormasMemphis: o repertório de formas do estilo (zigue-zague, rabisco ondulado, triângulo, círculo, meia-lua, mais, grade de pontos)
// que estouram, giram e flutuam. `formas` posiciona cada uma; `preset: 'cantos'` espalha 8 formas em volta do conteúdo.
import React from 'react';
import {COR, mola, seg, useF} from '../base';

export type TipoForma = 'zigue' | 'onda' | 'triangulo' | 'circulo' | 'meia' | 'mais' | 'pontos' | 'anel';
export type Forma = {tipo: TipoForma; x: number; y: number; tam?: number; cor?: string; rot?: number; atraso?: number};
export type FormasMemphisProps = {formas?: Forma[]; preset?: 'cantos' | 'chuva'; inicio?: number};

const PRESETS: Record<string, Forma[]> = {
  cantos: [
    {tipo: 'zigue', x: 200, y: 250, tam: 260, cor: COR.azul, rot: -12}, {tipo: 'circulo', x: 930, y: 270, tam: 200, cor: COR.rosa}, {tipo: 'triangulo', x: 880, y: 1090, tam: 260, cor: COR.turquesa, rot: 18},
    {tipo: 'onda', x: 190, y: 1130, tam: 280, cor: COR.roxo, rot: 8}, {tipo: 'mais', x: 90, y: 700, tam: 120, cor: COR.preto, rot: 12}, {tipo: 'pontos', x: 960, y: 700, tam: 200, cor: COR.preto},
    {tipo: 'meia', x: 560, y: 190, tam: 160, cor: COR.laranja, rot: 20}, {tipo: 'anel', x: 520, y: 1230, tam: 170, cor: COR.rosa},
  ],
  chuva: Array.from({length: 14}, (_, i) => ({tipo: (['zigue', 'circulo', 'triangulo', 'onda', 'mais', 'anel', 'meia'] as TipoForma[])[i % 7], x: 80 + ((i * 337) % 920), y: 230 + ((i * 211) % 1050), tam: 130 + (i % 3) * 50, cor: [COR.rosa, COR.azul, COR.turquesa, COR.roxo, COR.laranja][i % 5], rot: (i * 37) % 60 - 30, atraso: i})),
};

const Desenho: React.FC<{tipo: TipoForma; tam: number; cor: string}> = ({tipo, tam, cor}) => {
  const s = {stroke: COR.preto, strokeWidth: 8, strokeLinejoin: 'round' as const, strokeLinecap: 'round' as const};
  const sombra = `drop-shadow(10px 10px 0 ${COR.preto})`;
  const base = {width: tam, height: tam, overflow: 'visible' as const, filter: sombra};
  switch (tipo) {
    case 'zigue': return <svg viewBox="0 0 100 100" style={base}><polyline points="2,70 18,30 34,70 50,30 66,70 82,30 98,70" fill="none" stroke={COR.preto} strokeWidth={22} strokeLinejoin="miter" /><polyline points="2,70 18,30 34,70 50,30 66,70 82,30 98,70" fill="none" stroke={cor} strokeWidth={11} strokeLinejoin="miter" /></svg>;
    case 'onda': return <svg viewBox="0 0 100 100" style={base}><path d="M2 50 Q14 20 26 50 T50 50 T74 50 T98 50" fill="none" stroke={COR.preto} strokeWidth={22} strokeLinecap="round" /><path d="M2 50 Q14 20 26 50 T50 50 T74 50 T98 50" fill="none" stroke={cor} strokeWidth={11} strokeLinecap="round" /></svg>;
    case 'triangulo': return <svg viewBox="0 0 100 100" style={base}><polygon points="50,8 94,88 6,88" fill={cor} {...s} /></svg>;
    case 'circulo': return <svg viewBox="0 0 100 100" style={base}><circle cx="50" cy="50" r="44" fill={cor} {...s} /></svg>;
    case 'anel': return <svg viewBox="0 0 100 100" style={base}><circle cx="50" cy="50" r="38" fill="none" stroke={COR.preto} strokeWidth={30} /><circle cx="50" cy="50" r="38" fill="none" stroke={cor} strokeWidth={16} /></svg>;
    case 'meia': return <svg viewBox="0 0 100 100" style={base}><path d="M6 70 A44 44 0 0 1 94 70 Z" fill={cor} {...s} /></svg>;
    case 'mais': return <svg viewBox="0 0 100 100" style={{...base, filter: undefined}}><path d="M50 6 V94 M6 50 H94" stroke={cor} strokeWidth={22} strokeLinecap="round" /></svg>;
    default: return <svg viewBox="0 0 100 100" style={{...base, filter: undefined}}>{Array.from({length: 25}).map((_, i) => <circle key={i} cx={10 + (i % 5) * 20} cy={10 + Math.floor(i / 5) * 20} r="6" fill={cor} />)}</svg>;
  }
};

export const FormasMemphis: React.FC<FormasMemphisProps> = ({formas, preset = 'cantos', inicio = 0}) => {
  const f = useF() - inicio;
  const lista = formas ?? PRESETS[preset];
  return <>{lista.map((s, i) => {
    const t0 = (s.atraso ?? i) * 2.5;
    const p = mola(seg(f, t0, t0 + 12), 3);
    const tam = s.tam ?? 160;
    const flut = Math.sin(f / 10 + i * 1.7) * 14;
    const gira = (s.rot ?? 0) + (1 - p) * 120 + (s.tipo === 'circulo' || s.tipo === 'anel' || s.tipo === 'pontos' ? 0 : Math.sin(f / 18 + i) * 8) + (s.tipo === 'mais' ? f * 3 : 0);
    return <div key={i} style={{position: 'absolute', left: s.x - tam / 2, top: s.y - tam / 2 + flut, width: tam, height: tam, transform: `rotate(${gira}deg) scale(${Math.max(0.001, p)})`}}><Desenho tipo={s.tipo} tam={tam} cor={s.cor ?? COR.rosa} /></div>;
  })}</>;
};