/**
 * ElevenLabs-Style Complete Video Example
 * 
 * A premium SaaS promo video with:
 * - Dark background with gradient glows
 * - Word-by-word text reveals
 * - Floating particles
 * - Glass morphism cards
 * - Audio waveform visualization
 * - 3D phone mockup
 * 
 * Duration: 20 seconds (600 frames at 30fps)
 * Resolution: 1920x1080 (landscape)
 */

import React from "react";
import {
  AbsoluteFill,
  Sequence,
  useCurrentFrame,
  useVideoConfig,
  interpolate,
} from "remotion";
import {
  AnimatedText,
  StaggeredMotion,
  Particles,
  Spawner,
  Behavior,
  Scene3D,
  Step,
  useViewportRect,
} from "remotion-bits";

// =============================================================================
// STYLE TOKENS
// =============================================================================

const colors = {
  bg: "#0a0a0a",
  text: "#ffffff",
  textMuted: "rgba(255,255,255,0.6)",
  purple: "#7c3aed",
  cyan: "#06b6d4",
  glowPurple: "rgba(124,58,237,0.3)",
  glowCyan: "rgba(6,182,212,0.3)",
  cardBg: "rgba(255,255,255,0.05)",
  cardBorder: "rgba(255,255,255,0.1)",
};

// =============================================================================
// REUSABLE COMPONENTS
// =============================================================================

// Glowing orb background effect
const GlowOrb: React.FC<{
  color?: string;
  size?: number;
  x?: string;
  y?: string;
}> = ({ color = colors.glowPurple, size = 600, x = "50%", y = "50%" }) => {
  const frame = useCurrentFrame();
  const scale = interpolate(Math.sin(frame * 0.02), [-1, 1], [0.9, 1.1]);
  const opacity = interpolate(Math.sin(frame * 0.02 + 0.5), [-1, 1], [0.7, 1]);

  return (
    <div
      style={{
        position: "absolute",
        width: size,
        height: size,
        left: x,
        top: y,
        transform: `translate(-50%, -50%) scale(${scale})`,
        background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
        filter: "blur(80px)",
        opacity,
        pointerEvents: "none",
      }}
    />
  );
};

// Gradient text effect
const GradientText: React.FC<{
  children: React.ReactNode;
  delay?: number;
  fontSize?: number;
}> = ({ children, delay = 0, fontSize = 32 }) => (
  <AnimatedText
    transition={{
      y: [30, 0],
      opacity: [0, 1],
      duration: 20,
      delay,
      easing: "easeOutCubic",
    }}
    style={{
      fontSize,
      fontWeight: 600,
      background: `linear-gradient(90deg, ${colors.purple}, ${colors.cyan})`,
      WebkitBackgroundClip: "text",
      WebkitTextFillColor: "transparent",
    }}
  >
    {children}
  </AnimatedText>
);

// Audio waveform visualization
const Waveform: React.FC<{ bars?: number }> = ({ bars = 50 }) => {
  const frame = useCurrentFrame();

  return (
    <div
      style={{
        display: "flex",
        gap: 4,
        alignItems: "center",
        height: 120,
      }}
    >
      {Array.from({ length: bars }).map((_, i) => {
        const phase = frame * 0.1 + i * 0.3;
        const height = interpolate(
          Math.sin(phase) * Math.cos(phase * 0.5),
          [-1, 1],
          [20, 100]
        );
        const opacity = interpolate(i, [0, bars / 2, bars], [0.3, 1, 0.3]);

        return (
          <div
            key={i}
            style={{
              width: 6,
              height,
              borderRadius: 3,
              background: `linear-gradient(to top, ${colors.purple}, ${colors.cyan})`,
              opacity,
            }}
          />
        );
      })}
    </div>
  );
};

// Glass morphism card
const GlassCard: React.FC<{
  icon: string;
  title: string;
  description: string;
}> = ({ icon, title, description }) => (
  <div
    style={{
      width: 320,
      padding: 40,
      background: colors.cardBg,
      borderRadius: 24,
      border: `1px solid ${colors.cardBorder}`,
      backdropFilter: "blur(20px)",
    }}
  >
    <div style={{ fontSize: 48, marginBottom: 16 }}>{icon}</div>
    <div
      style={{
        fontSize: 24,
        fontWeight: 700,
        color: colors.text,
        marginBottom: 8,
      }}
    >
      {title}
    </div>
    <div style={{ fontSize: 16, color: colors.textMuted }}>{description}</div>
  </div>
);

// =============================================================================
// SCENES
// =============================================================================

// Scene 1: Logo Reveal (0-2s, frames 0-60)
const LogoScene: React.FC = () => (
  <AbsoluteFill
    style={{
      background: colors.bg,
      justifyContent: "center",
      alignItems: "center",
    }}
  >
    <GlowOrb color={colors.glowPurple} size={800} />

    <AnimatedText
      transition={{
        scale: [0.8, 1],
        opacity: [0, 1],
        blur: [20, 0],
        duration: 30,
        easing: "easeOutCubic",
      }}
      style={{
        fontSize: 72,
        fontWeight: 700,
        color: colors.text,
        letterSpacing: -2,
      }}
    >
      VoiceAI
    </AnimatedText>
  </AbsoluteFill>
);

// Scene 2: Hero Statement (2-5s, frames 60-150)
const HeroScene: React.FC = () => (
  <AbsoluteFill
    style={{
      background: colors.bg,
      justifyContent: "center",
      alignItems: "center",
      flexDirection: "column",
      gap: 24,
    }}
  >
    <GlowOrb color={colors.glowCyan} x="30%" y="40%" size={500} />
    <GlowOrb color={colors.glowPurple} x="70%" y="60%" size={500} />

    <AnimatedText
      transition={{
        y: [60, 0],
        opacity: [0, 1],
        blur: [15, 0],
        split: "word",
        splitStagger: 4,
        duration: 25,
        easing: "easeOutCubic",
      }}
      style={{
        fontSize: 96,
        fontWeight: 800,
        color: colors.text,
        textAlign: "center",
        lineHeight: 1.1,
      }}
    >
      The Future of Voice
    </AnimatedText>

    <Sequence from={30}>
      <GradientText fontSize={40}>Powered by AI</GradientText>
    </Sequence>
  </AbsoluteFill>
);

// Scene 3: Waveform Demo (5-8s, frames 150-240)
const WaveformScene: React.FC = () => (
  <AbsoluteFill
    style={{
      background: colors.bg,
      justifyContent: "center",
      alignItems: "center",
      flexDirection: "column",
      gap: 40,
    }}
  >
    <Waveform bars={60} />

    <AnimatedText
      transition={{
        opacity: [0, 1],
        y: [20, 0],
        duration: 20,
        easing: "easeOutCubic",
      }}
      style={{
        fontSize: 24,
        color: colors.textMuted,
        fontWeight: 500,
      }}
    >
      Speaking naturally in real-time...
    </AnimatedText>
  </AbsoluteFill>
);

// Scene 4: Features (8-14s, frames 240-420)
const FeaturesScene: React.FC = () => {
  const features = [
    { icon: "⚡", title: "Ultra-Fast", description: "Sub-300ms latency" },
    { icon: "🌍", title: "32 Languages", description: "Native-quality voices" },
    { icon: "🎛️", title: "Full Control", description: "Complete API access" },
  ];

  return (
    <AbsoluteFill
      style={{
        background: colors.bg,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <GlowOrb color={colors.glowCyan} x="20%" y="30%" size={400} />
      <GlowOrb color={colors.glowPurple} x="80%" y="70%" size={400} />

      <StaggeredMotion
        transition={{
          y: [80, 0],
          opacity: [0, 1],
          scale: [0.9, 1],
          stagger: 10,
          staggerDirection: "forward",
          duration: 30,
          easing: "easeOutCubic",
        }}
        style={{ display: "flex", gap: 40 }}
      >
        {features.map((f, i) => (
          <GlassCard key={i} {...f} />
        ))}
      </StaggeredMotion>
    </AbsoluteFill>
  );
};

// Scene 5: CTA (14-20s, frames 420-600)
const CTAScene: React.FC = () => (
  <AbsoluteFill
    style={{
      background: colors.bg,
      justifyContent: "center",
      alignItems: "center",
      flexDirection: "column",
      gap: 32,
    }}
  >
    <GlowOrb color={colors.glowPurple} size={700} />

    <AnimatedText
      transition={{
        y: [40, 0],
        opacity: [0, 1],
        blur: [10, 0],
        split: "word",
        splitStagger: 3,
        duration: 20,
        easing: "easeOutCubic",
      }}
      style={{
        fontSize: 72,
        fontWeight: 800,
        color: colors.text,
        textAlign: "center",
      }}
    >
      Start Building Today
    </AnimatedText>

    <Sequence from={25}>
      <AnimatedText
        transition={{
          scale: [0.9, 1],
          opacity: [0, 1],
          duration: 20,
          easing: "easeOutBack",
        }}
        style={{
          fontSize: 28,
          fontWeight: 600,
          color: colors.bg,
          background: `linear-gradient(135deg, ${colors.purple}, ${colors.cyan})`,
          padding: "20px 48px",
          borderRadius: 50,
        }}
      >
        Get Started Free →
      </AnimatedText>
    </Sequence>
  </AbsoluteFill>
);

// =============================================================================
// PARTICLE BACKGROUND WRAPPER
// =============================================================================

const ParticleBackground: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const rect = useViewportRect();

  return (
    <AbsoluteFill style={{ background: colors.bg }}>
      <Particles startFrame={0}>
        <Spawner
          rate={0.2}
          position={{ x: rect.width / 2, y: rect.height + 50 }}
          area={{ width: rect.width, height: 0 }}
          velocity={{ x: 0, y: -1, varianceX: 0.3, varianceY: 0.2 }}
          lifespan={400}
          max={40}
        >
          <div
            style={{
              width: 6,
              height: 6,
              borderRadius: "50%",
              background: colors.glowPurple,
            }}
          />
          <div
            style={{
              width: 4,
              height: 4,
              borderRadius: "50%",
              background: colors.glowCyan,
            }}
          />
        </Spawner>

        <Behavior drag={0.998} />
        <Behavior
          handler={(p) => {
            p.velocity.x += Math.sin(p.age * 0.015) * 0.01;
          }}
        />
        <Behavior opacity={[0, 0.5, 0.5, 0]} />
      </Particles>

      {children}
    </AbsoluteFill>
  );
};

// =============================================================================
// MAIN COMPOSITION
// =============================================================================

export default function ElevenLabsStyleVideo() {
  return (
    <ParticleBackground>
      {/* Scene 1: Logo (0-2s) */}
      <Sequence from={0} durationInFrames={60}>
        <LogoScene />
      </Sequence>

      {/* Scene 2: Hero (2-5s) */}
      <Sequence from={60} durationInFrames={90}>
        <HeroScene />
      </Sequence>

      {/* Scene 3: Waveform (5-8s) */}
      <Sequence from={150} durationInFrames={90}>
        <WaveformScene />
      </Sequence>

      {/* Scene 4: Features (8-14s) */}
      <Sequence from={240} durationInFrames={180}>
        <FeaturesScene />
      </Sequence>

      {/* Scene 5: CTA (14-20s) */}
      <Sequence from={420} durationInFrames={180}>
        <CTAScene />
      </Sequence>
    </ParticleBackground>
  );
}

// <!-- CONFIG: {"durationInFrames": 600, "fps": 30, "width": 1920, "height": 1080} -->
