import React from "react";
import {
  AbsoluteFill,
  Img,
  interpolate,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";

type WordType = {
  text: string;
  delay: number;
};

export const PolaroidTemplate: React.FC<{
  title: string;
  backgroundImage: string;
  words: WordType[];
  duration: number;
  animationStyle?: "drop" | "fade" | "slide" | "zoom" | null;
  backgroundColor?: string;
}> = ({
  title,
  backgroundImage,
  words = [],
  duration,
  animationStyle = null,
  backgroundColor = "#f3f3f3",
}) => {
  const frame = useCurrentFrame();
  const { fps, width, height } = useVideoConfig();

  // Animation for the polaroid appearance
  const polaroidAnimation = spring({
    frame,
    fps,
    config: {
      damping: 12,
      mass: 0.5,
    },
  });

  // Set animation styles based on the selected animation type
  const polaroidStyle: React.CSSProperties = {
    backgroundColor: "white",
    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.2)",
    borderRadius: "8px",
    padding: "0px",
    width: "80%", // Reduced from 90% to create more margin on left and right
    height: "85%", // Reduced from 90% to create more margin on top and bottom
    position: "relative",
    display: "flex",
    flexDirection: "column",
  };

  if (animationStyle === "drop") {
    const scale = interpolate(polaroidAnimation, [0, 1], [0.7, 1]);
    const rotation = interpolate(polaroidAnimation, [0, 1], [10, 0]);
    polaroidStyle.transform = `scale(${scale}) rotate(${rotation}deg)`;
  } else if (animationStyle === "fade") {
    const opacity = interpolate(frame, [0, 20], [0, 1], {
      extrapolateRight: "clamp",
    });
    polaroidStyle.opacity = opacity;
  } else if (animationStyle === "slide") {
    const translateY = interpolate(frame, [0, 30], [100, 0], {
      extrapolateRight: "clamp",
    });
    polaroidStyle.transform = `translateY(${translateY}px)`;
  } else if (animationStyle === "zoom") {
    const scale = interpolate(frame, [0, 20], [0.5, 1], {
      extrapolateRight: "clamp",
    });
    polaroidStyle.transform = `scale(${scale})`;
  }

  return (
    <AbsoluteFill
      style={{
        backgroundColor,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      {/* Polaroid frame */}
      <div style={polaroidStyle}>
        {/* Top white section with title */}
        <div
          style={{
            padding: "35px 30px 25px", // Increased top padding
            textAlign: "left",
            flexShrink: 0,
          }}
        >
          <div
            style={{
              fontSize: "50px",
              fontFamily: "Courier, monospace",
              fontWeight: "bold",
              opacity: 1, // Changed from animated opacity to static 1
            }}
          >
            {title}
          </div>
        </div>

        {/* Square image section */}
        <div
          style={{
            width: "90%", // Reduced width to create more margin on left and right
            paddingBottom: "90%", // Maintains square aspect ratio
            position: "relative",
            overflow: "hidden",
            backgroundColor: "#f0f0f0",
            flexShrink: 0,
            margin: "0 auto", // Center the image horizontally
          }}
        >
          <Img
            src={backgroundImage}
            style={{
              position: "absolute",
              top: 0,
              left: 0,
              width: "100%",
              height: "100%",
              objectFit: "cover",
              display: "block",
            }}
          />
        </div>

        {/* Bottom white section with words/lyrics */}
        <div
          style={{
            padding: "15px 25px 30px",
            flexGrow: 1,
            overflow: "auto",
            backgroundColor: "white",
            position: "relative", // Added to allow absolute positioning of the watermark
          }}
        >
          {words.map((word, index) => {
            const wordDelayFrames = word.delay * fps;
            const appearStart = wordDelayFrames;
            const appearEnd = wordDelayFrames + 10;

            const opacity = interpolate(
              frame,
              [appearStart, appearEnd],
              [0, 1],
              {
                extrapolateLeft: "clamp",
                extrapolateRight: "clamp",
              },
            );

            if (opacity === 0) return null;

            return (
              <div
                key={index}
                style={{
                  marginBottom: "10px",
                  opacity,
                  fontFamily: "Arial, sans-serif",
                  fontSize: "40px",
                  color: "#333333",
                  lineHeight: "1.4",
                  textAlign: "center",
                }}
              >
                {word.text}
              </div>
            );
          })}

          {/* Suno watermark */}
          <div
            style={{
              position: "absolute",
              bottom: "10px",
              right: "15px",
              fontSize: "40px",
              fontFamily: "Arial, sans-serif",
              color: "#999999",
              opacity: 1,
            }}
          >
            Made on suno
          </div>
        </div>
      </div>
    </AbsoluteFill>
  );
};