/**
 * AppDemoScene Component
 *
 * App screenshot/recording with animated callouts.
 * The key transition scene for pitch videos.
 */

import React from 'react';
import { Img, Video, interpolate, useCurrentFrame, useVideoConfig, spring, staticFile } from 'remotion';
import { stemedbPalette } from '../lib/colors';
import type { AppDemoContent, Callout } from '../types/pitch-script';

type AppDemoSceneProps = {
  content: AppDemoContent;
};

type CalloutProps = {
  callout: Callout;
};

const AnimatedCallout: React.FC<CalloutProps> = ({ callout }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const startFrame = Math.round((callout.startMs / 1000) * fps);
  const durationFrames = Math.round((callout.durationMs / 1000) * fps);
  const relativeFrame = frame - startFrame;

  // Only show during callout window
  if (relativeFrame < 0 || relativeFrame > durationFrames) {
    return null;
  }

  // Spring in
  const springValue = spring({
    frame: relativeFrame,
    fps,
    config: {
      damping: 15,
      stiffness: 150,
    },
  });

  // Fade out near end
  const opacity = interpolate(
    relativeFrame,
    [0, 10, durationFrames - 10, durationFrames],
    [0, 1, 1, 0],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  // Pulse effect for pulse style
  const pulseScale = callout.style === 'pulse'
    ? 1 + Math.sin(relativeFrame * 0.3) * 0.05
    : 1;

  return (
    <div
      style={{
        position: 'absolute',
        left: `${callout.x}%`,
        top: `${callout.y}%`,
        transform: `translate(-50%, -50%) scale(${springValue * pulseScale})`,
        opacity,
        pointerEvents: 'none',
      }}
    >
      {/* Callout circle */}
      <div
        style={{
          width: 24,
          height: 24,
          borderRadius: '50%',
          backgroundColor: stemedbPalette.accent,
          boxShadow: `0 0 20px ${stemedbPalette.accent}`,
        }}
      />

      {/* Label */}
      <div
        style={{
          position: 'absolute',
          left: 40,
          top: '50%',
          transform: 'translateY(-50%)',
          backgroundColor: stemedbPalette.surface,
          border: `1px solid ${stemedbPalette.accent}`,
          borderRadius: 8,
          padding: '8px 16px',
          whiteSpace: 'nowrap',
        }}
      >
        <span
          style={{
            color: stemedbPalette.text,
            fontSize: 18,
            fontWeight: 600,
          }}
        >
          {callout.label}
        </span>
      </div>

      {/* Arrow for arrow style */}
      {callout.style === 'arrow' && (
        <svg
          width="30"
          height="20"
          viewBox="0 0 30 20"
          style={{
            position: 'absolute',
            left: 24,
            top: '50%',
            transform: 'translateY(-50%)',
          }}
        >
          <path
            d="M0 10 L20 10 L15 5 M20 10 L15 15"
            stroke={stemedbPalette.accent}
            strokeWidth="2"
            fill="none"
          />
        </svg>
      )}
    </div>
  );
};

export const AppDemoScene: React.FC<AppDemoSceneProps> = ({ content }) => {
  const frame = useCurrentFrame();
  useVideoConfig(); // For fps access in callouts

  // Screenshot/video fade in
  const mediaOpacity = interpolate(frame, [0, 15], [0, 1], {
    extrapolateRight: 'clamp',
  });
  const mediaScale = interpolate(frame, [0, 15], [0.95, 1], {
    extrapolateRight: 'clamp',
  });

  // Page label animation
  const labelOpacity = interpolate(frame, [10, 25], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // Caption animation
  const captionOpacity = interpolate(frame, [20, 35], [0, 1], {
    extrapolateRight: 'clamp',
  });
  const captionY = interpolate(frame, [20, 35], [20, 0], {
    extrapolateRight: 'clamp',
  });

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: stemedbPalette.background,
        display: 'flex',
        flexDirection: 'column',
        padding: 48,
      }}
    >
      {/* Page label */}
      {content.page && (
        <div
          style={{
            opacity: labelOpacity,
            marginBottom: 24,
          }}
        >
          <span
            style={{
              color: stemedbPalette.accent,
              fontSize: 20,
              fontWeight: 600,
              textTransform: 'uppercase',
              letterSpacing: '0.1em',
            }}
          >
            {content.page}
          </span>
        </div>
      )}

      {/* App screenshot/video container */}
      <div
        style={{
          flex: 1,
          position: 'relative',
          opacity: mediaOpacity,
          transform: `scale(${mediaScale})`,
          borderRadius: 16,
          overflow: 'hidden',
          boxShadow: `0 25px 50px -12px rgba(0, 0, 0, 0.5)`,
          border: `1px solid ${stemedbPalette.border}`,
        }}
      >
        {/* Screenshot */}
        {content.screenshot && (
          <Img
            src={staticFile(content.screenshot)}
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'cover',
            }}
          />
        )}

        {/* Video */}
        {content.video && (
          <Video
            src={staticFile(content.video)}
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'cover',
            }}
          />
        )}

        {/* Callouts */}
        {content.callouts?.map((callout, i) => (
          <AnimatedCallout
            key={i}
            callout={callout}
          />
        ))}
      </div>

      {/* Caption overlay */}
      {content.caption && (
        <div
          style={{
            opacity: captionOpacity,
            transform: `translateY(${captionY}px)`,
            marginTop: 32,
            textAlign: 'center',
          }}
        >
          <div
            style={{
              color: stemedbPalette.text,
              fontSize: 32,
              fontWeight: 600,
              lineHeight: 1.4,
            }}
          >
            {content.caption}
          </div>
        </div>
      )}
    </div>
  );
};
