import React from "react";
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
import { z } from "zod";
import { colorSchema } from "../lib/branding";
import { FONT } from "../lib/fonts";
import { useLayout } from "../lib/aspect";
import { BrandBackground, useReveal } from "../lib/kit";
import { hexToRgba } from "../lib/anim";

export const countdownSchema = z.object({
  title: z.string(),
  // coerce so a string binding ("5") from the studio still validates as a number
  startNumber: z.coerce.number().int().min(1).max(9),
  goText: z.string(),
  subtitle: z.string(),
  ...colorSchema,
});

type Props = z.infer<typeof countdownSchema>;

export const Countdown: React.FC<Props> = ({
  title,
  startNumber,
  goText,
  subtitle,
  accentColor,
  secondaryColor,
  backgroundColor,
  textColor,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const L = useLayout();

  const titleR = useReveal(6, { from: 24 });

  // Count down one number per second after a short intro.
  const introF = Math.round(fps * 1.2);
  const elapsed = Math.max(0, frame - introF);
  const sec = Math.floor(elapsed / fps);
  const current = startNumber - sec; // >0 → number, <=0 → GO
  const localInSec = (elapsed % fps) / fps;

  // Each tick pops in and fades/scales out.
  const pop = spring({ frame: (elapsed % fps), fps, config: { damping: 12, stiffness: 130, mass: 0.7 } });
  const scaleIn = interpolate(pop, [0, 1], [0.4, 1]);
  const scaleOut = interpolate(localInSec, [0.7, 1], [1, 1.4], { extrapolateLeft: "clamp" });
  const fadeOut = interpolate(localInSec, [0.75, 1], [1, 0], { extrapolateLeft: "clamp" });

  const isGo = current <= 0;
  const ringProgress = 1 - localInSec;
  const ringR = L.vmin(220);
  const circ = 2 * Math.PI * ringR;

  const sub = useReveal(introF + 4, { from: 24 });

  return (
    <AbsoluteFill style={{ fontFamily: FONT, direction: "rtl" }}>
      <BrandBackground bg={backgroundColor} accent={accentColor} secondary={secondaryColor} particles={18} />

      <div style={{ position: "absolute", top: L.vmin(120), left: 0, right: 0, textAlign: "center", opacity: titleR.opacity, transform: `translateY(${titleR.y}px)`, fontWeight: 800, fontSize: L.vmin(44), color: hexToRgba(textColor, 0.9) }}>
        {title}
      </div>

      <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
        {/* Progress ring */}
        {!isGo && (
          <svg width={ringR * 2.4} height={ringR * 2.4} viewBox={`${-ringR * 1.2} ${-ringR * 1.2} ${ringR * 2.4} ${ringR * 2.4}`} style={{ position: "absolute" }}>
            <circle cx={0} cy={0} r={ringR} fill="none" stroke={hexToRgba(textColor, 0.12)} strokeWidth={L.vmin(6)} />
            <circle cx={0} cy={0} r={ringR} fill="none" stroke={accentColor} strokeWidth={L.vmin(6)} strokeLinecap="round" strokeDasharray={`${circ * ringProgress} ${circ}`} transform="rotate(-90)" style={{ filter: `drop-shadow(0 0 ${L.vmin(8)}px ${accentColor})` }} />
          </svg>
        )}

        <div style={{ transform: `scale(${isGo ? scaleIn : scaleIn * scaleOut})`, opacity: isGo ? 1 : fadeOut, fontWeight: 900, fontSize: isGo ? L.vmin(150) : L.vmin(260), lineHeight: 1, backgroundImage: `linear-gradient(135deg, ${accentColor}, ${secondaryColor})`, WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent", filter: `drop-shadow(0 0 ${L.vmin(30)}px ${hexToRgba(accentColor, 0.6)})` }}>
          {isGo ? goText : current}
        </div>
      </AbsoluteFill>

      <div style={{ position: "absolute", bottom: L.vmin(140), left: 0, right: 0, textAlign: "center", opacity: sub.opacity, transform: `translateY(${sub.y}px)`, fontWeight: 500, fontSize: L.vmin(30), color: hexToRgba(textColor, 0.78) }}>
        {subtitle}
      </div>
    </AbsoluteFill>
  );
};