import { AbsoluteFill, Sequence, useVideoConfig } from "remotion";
import { WhatsAppBackground } from "./scenes/whatsapp/WhatsAppBackground";
import { WhatsAppTemplateScreen } from "./scenes/whatsapp/WhatsAppTemplateScreen";
import { FONT, SPRING_CFG } from "./styles";
import { spring, useCurrentFrame } from "remotion";

const WA_GREEN = "#25D366";

const Intro = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const logoIn = spring({ fps, frame, config: SPRING_CFG });
  const textIn = spring({ fps, frame: Math.max(0, frame - 18), config: SPRING_CFG });
  const subIn = spring({ fps, frame: Math.max(0, frame - 36), config: SPRING_CFG });

  return (
    <AbsoluteFill style={{ alignItems: "center", justifyContent: "center", display: "flex", flexDirection: "column", gap: 28 }}>
      <div style={{ opacity: logoIn, transform: `scale(${0.7 + logoIn * 0.3})`, fontSize: 80 }}>📋</div>
      <div style={{ fontFamily: FONT, color: "#ffffff", fontSize: 60, fontWeight: 800, textAlign: "center", lineHeight: 1.1, opacity: textIn, transform: `translateY(${(1 - textIn) * 36}px)` }}>
        WhatsApp Template Management
      </div>
      <div style={{ fontFamily: FONT, color: WA_GREEN, fontSize: 30, fontWeight: 600, opacity: subIn, transform: `translateY(${(1 - subIn) * 20}px)` }}>
        Creating message templates via the Business API
      </div>
    </AbsoluteFill>
  );
};

// Total: 3s intro + 13s template screen = 16s @ 30fps = 480 frames
export const SquareMCPWhatsAppTemplate = () => {
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill>
      <WhatsAppBackground />
      <Sequence durationInFrames={3 * fps}>
        <Intro />
      </Sequence>
      <Sequence from={3 * fps}>
        <WhatsAppTemplateScreen />
      </Sequence>
    </AbsoluteFill>
  );
};
