import React from "react";
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
import { usePalette } from "../theme";
import type { DesignDecor } from "../job/script";

/**
 * Decorative scene flourishes chosen by the AI in the scene's `design`.
 * Everything is deterministic (index math, no Math.random) so Remotion
 * renders are reproducible frame-for-frame. Colors come from the derived
 * palette — never raw hex from the model.
 */

const Rings: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const palette = usePalette();
  const t = frame / fps;
  return (
    <>
      {[
        { size: 560, x: 0.88, y: 0.1, speed: 14, op: 0.3 },
        { size: 780, x: 0.92, y: 0.16, speed: -9, op: 0.2 },
        { size: 380, x: 0.08, y: 0.86, speed: 11, op: 0.24 },
      ].map((r, i) => (
        <div
          key={i}
          style={{
            position: "absolute",
            width: r.size,
            height: r.size,
            borderRadius: "50%",
            border: `2px dashed ${i === 1 ? palette.line : palette.accent}`,
            left: `${r.x * 100}%`,
            top: `${r.y * 100}%`,
            marginLeft: -r.size / 2,
            marginTop: -r.size / 2,
            opacity: r.op,
            transform: `rotate(${t * r.speed}deg)`,
          }}
        />
      ))}
    </>
  );
};

const CONFETTI = Array.from({ length: 22 }, (_, i) => {
  const seed = (i * 6151) % 9973;
  return {
    x: (seed * 0.618) % 1,
    size: 8 + (seed % 5) * 4,
    round: seed % 3 === 0,
    speed: 0.05 + ((seed * 0.011) % 0.07),
    phase: (seed * 0.037) % 1,
    sway: 20 + ((seed * 0.013) % 26),
    alt: seed % 2 === 0,
  };
});

const Confetti: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();
  const palette = usePalette();
  const t = frame / fps;
  const end = durationInFrames / fps;
  // Gentle fall that eases out near the scene end.
  const out = Math.min(1, Math.max(0, (end - t) / 0.8));
  return (
    <>
      {CONFETTI.map((c, i) => {
        const y = ((c.phase + t * c.speed) % 1.15) - 0.08;
        const x = c.x + Math.sin(t * 1.4 + i * 2.1) * (c.sway / 1920);
        return (
          <div
            key={i}
            style={{
              position: "absolute",
              left: `${x * 100}%`,
              top: `${y * 100}%`,
              width: c.size,
              height: c.round ? c.size : c.size * 0.45,
              borderRadius: c.round ? "50%" : 3,
              background: c.alt ? palette.accent : palette.accentSoft,
              opacity: 0.5 * out,
              transform: `rotate(${t * 90 + i * 31}deg)`,
            }}
          />
        );
      })}
    </>
  );
};

const Rays: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const palette = usePalette();
  const t = frame / fps;
  return (
    <>
      <div
        style={{
          position: "absolute",
          inset: "-40%",
          background: `repeating-conic-gradient(from 0deg at 12% 8%, rgba(${palette.glow},0.14) 0deg 7deg, transparent 7deg 20deg)`,
          transform: `rotate(${t * 5}deg)`,
          maskImage:
            "radial-gradient(circle at 12% 8%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.55) 34%, transparent 62%)",
          WebkitMaskImage:
            "radial-gradient(circle at 12% 8%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.55) 34%, transparent 62%)",
        }}
      />
      <div
        style={{
          position: "absolute",
          left: "4%",
          top: "0%",
          width: 320,
          height: 320,
          borderRadius: "50%",
          background: `radial-gradient(circle, rgba(${palette.glow},0.4) 0%, transparent 64%)`,
        }}
      />
    </>
  );
};

export const Decor: React.FC<{ variant?: DesignDecor }> = ({
  variant = "none",
}) => {
  if (variant === "none") return null;
  return (
    <AbsoluteFill style={{ pointerEvents: "none", overflow: "hidden" }}>
      {variant === "rings" && <Rings />}
      {variant === "confetti" && <Confetti />}
      {variant === "rays" && <Rays />}
    </AbsoluteFill>
  );
};