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 youTubeIntroSchema = z.object({
  channelName: z.string(),
  subtitle: z.string(),
  cta: z.string(),
  ...colorSchema,
});

type Props = z.infer<typeof youTubeIntroSchema>;

export const YouTubeIntro: React.FC<Props> = ({
  channelName,
  subtitle,
  cta,
  accentColor,
  secondaryColor,
  backgroundColor,
  textColor,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const L = useLayout();

  const playPop = spring({ frame, fps, config: { damping: 11, stiffness: 130, mass: 0.7 } });
  const playScale = interpolate(playPop, [0, 1], [0, 1]);
  const ripple = (frame % 45) / 45;

  const name = useReveal(28, { from: 40 });
  const sub = useReveal(44, { from: 26 });
  const bell = useReveal(60, { from: 22, damping: 11 });
  const bellWiggle = Math.sin(frame / 5) * (frame > 60 && frame < 90 ? 10 : 0);

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

      <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
        {/* Play button with ripple */}
        <div style={{ position: "relative", width: L.vmin(170), height: L.vmin(170), display: "flex", alignItems: "center", justifyContent: "center", transform: `scale(${playScale})` }}>
          <div style={{ position: "absolute", width: L.vmin(170) * (1 + ripple), height: L.vmin(170) * (1 + ripple), borderRadius: "50%", border: `${L.vmin(3)}px solid ${hexToRgba(accentColor, 1 - ripple)}` }} />
          <div style={{ width: L.vmin(150), height: L.vmin(150), borderRadius: "50%", background: `linear-gradient(135deg, ${accentColor}, ${secondaryColor})`, display: "flex", alignItems: "center", justifyContent: "center", boxShadow: `0 0 ${L.vmin(50)}px ${hexToRgba(accentColor, 0.6)}` }}>
            <div style={{ width: 0, height: 0, marginInlineStart: L.vmin(10), borderTop: `${L.vmin(34)}px solid transparent`, borderBottom: `${L.vmin(34)}px solid transparent`, borderInlineEnd: `${L.vmin(56)}px solid #fff` }} />
          </div>
        </div>

        <div style={{ marginTop: L.vmin(46), opacity: name.opacity, transform: `translateY(${name.y}px)`, fontWeight: 900, fontSize: L.vmin(86), color: textColor, textAlign: "center", textShadow: `0 ${L.vmin(6)}px ${L.vmin(36)}px ${hexToRgba(accentColor, 0.4)}` }}>
          {channelName}
        </div>
        <div style={{ marginTop: L.vmin(16), opacity: sub.opacity, transform: `translateY(${sub.y}px)`, fontWeight: 500, fontSize: L.vmin(30), color: hexToRgba(textColor, 0.78), textAlign: "center" }}>
          {subtitle}
        </div>

        {/* Subscribe pill */}
        <div style={{ marginTop: L.vmin(50), opacity: bell.opacity, transform: `scale(${bell.scale})`, display: "flex", alignItems: "center", gap: L.vmin(14), padding: `${L.vmin(18)}px ${L.vmin(46)}px`, borderRadius: 999, background: "#ff0033", boxShadow: `0 0 ${L.vmin(36)}px ${hexToRgba("#ff0033", 0.5)}`, fontWeight: 800, fontSize: L.vmin(32), color: "#fff" }}>
          <span style={{ display: "inline-block", transform: `rotate(${bellWiggle}deg)`, fontSize: L.vmin(34) }}>🔔</span>
          {cta}
        </div>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};