import React from "react";
import { AbsoluteFill, Series, useCurrentFrame, interpolate } from "remotion";
import { SlideFrame } from "../components/SlideFrame";

export interface DemoSlide {
  title: string;
  content: string;
  narration: string;
}

export interface DemoVideoProps {
  slides: DemoSlide[];
  title: string;
}

const FRAMES_PER_SLIDE = 90;

const DemoSlideContent: React.FC<{ slide: DemoSlide; slideIndex: number; total: number }> = ({
  slide,
  slideIndex,
  total,
}) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });

  return (
    <AbsoluteFill
      style={{
        background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
        opacity,
        display: "flex",
        flexDirection: "column",
        padding: "60px 80px",
      }}
    >
      <div
        style={{
          color: "white",
          fontSize: 52,
          fontWeight: 700,
          marginBottom: 32,
          lineHeight: 1.2,
        }}
      >
        {slide.title}
      </div>
      <div
        style={{
          color: "#c0c0e0",
          fontSize: 32,
          lineHeight: 1.6,
          flex: 1,
        }}
      >
        {slide.content}
      </div>
      <div
        style={{
          color: "#8080b0",
          fontSize: 22,
          fontStyle: "italic",
          marginTop: 24,
          paddingTop: 16,
          borderTop: "1px solid rgba(255,255,255,0.15)",
        }}
      >
        {slide.narration}
      </div>
      <div
        style={{
          position: "absolute",
          bottom: 32,
          right: 64,
          color: "rgba(255,255,255,0.4)",
          fontSize: 18,
        }}
      >
        {slideIndex + 1} / {total}
      </div>
    </AbsoluteFill>
  );
};

export const DemoVideo: React.FC<DemoVideoProps> & {
  calculateMetadata: (opts: { props: DemoVideoProps }) => { durationInFrames: number };
} = ({ slides, title: _title }) => {
  return (
    <AbsoluteFill style={{ background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)" }}>
      <Series>
        {slides.map((slide, i) => (
          <Series.Sequence key={i} durationInFrames={FRAMES_PER_SLIDE}>
            <DemoSlideContent slide={slide} slideIndex={i} total={slides.length} />
          </Series.Sequence>
        ))}
      </Series>
    </AbsoluteFill>
  );
};

DemoVideo.calculateMetadata = ({ props }) => ({
  durationInFrames: Math.max(props.slides.length * FRAMES_PER_SLIDE, FRAMES_PER_SLIDE),
});
