import React from 'react';
import { useCurrentFrame, useVideoConfig, interpolate, Easing, AbsoluteFill } from 'remotion';

// =============================================================================
// COMPOSITION CONFIG (Required for auto-discovery)
// =============================================================================
export const compositionConfig = {
  id: 'SineWaveVisualization',
  durationInSeconds: 5,
  fps: 60,
  width: 1080,
  height: 1920,
};

// =============================================================================
// PRE-GENERATED DATA
// =============================================================================
const seededRandom = (seed: number): number => {
  const x = Math.sin(seed * 9999) * 10000;
  return x - Math.floor(x);
};

// Generate grid lines
const horizontalGridLines = Array.from({ length: 20 }, (_, i) => ({
  y: (i + 1) * 96,
  opacity: 0.3 + seededRandom(i) * 0.2,
}));

const verticalGridLines = Array.from({ length: 12 }, (_, i) => ({
  x: (i + 1) * 90,
  opacity: 0.3 + seededRandom(i + 100) * 0.2,
}));

// =============================================================================
// MAIN COMPONENT
// =============================================================================
const SineWaveVisualization: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Easing functions
  const easeOut = Easing.bezier(0.33, 1, 0.68, 1);
  const easeInOut = Easing.bezier(0.37, 0, 0.63, 1);

  // Layout constants
  const circleCenter = { x: 1080 * 0.28, y: 1920 * 0.42 };
  const circleRadius = 140;
  const waveStartX = circleCenter.x + circleRadius + 60;
  const waveEndX = 1080 - 60;
  const waveWidth = waveEndX - waveStartX;
  const waveAmplitude = circleRadius;

  // Animation phases
  const headingOpacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: easeOut,
  });

  const gridOpacity = interpolate(frame, [0, 30], [0, 0.6], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: easeOut,
  });

  // Circle draw animation (stroke-dashoffset technique)
  const circleCircumference = 2 * Math.PI * circleRadius;
  const circleDrawProgress = interpolate(frame, [30, 50], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: easeOut,
  });
  const circleStrokeDashoffset = circleCircumference * (1 - circleDrawProgress);

  // Rotation animation (frames 50-300)
  const rotationAngle = interpolate(frame, [50, 295], [0, Math.PI * 2], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.linear,
  });

  // Point position on circle
  const pointX = circleCenter.x + circleRadius * Math.cos(rotationAngle - Math.PI / 2);
  const pointY = circleCenter.y + circleRadius * Math.sin(rotationAngle - Math.PI / 2);

  // Wave progress (how much of the wave to show)
  const waveProgress = interpolate(frame, [50, 295], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.linear,
  });

  // Generate sine wave path
  const generateWavePath = (progress: number): string => {
    if (progress <= 0) return '';
    
    const points: string[] = [];
    const numPoints = Math.floor(progress * 200);
    
    for (let i = 0; i <= numPoints; i++) {
      const t = i / 200;
      const x = waveStartX + t * waveWidth;
      const angle = t * Math.PI * 2 - Math.PI / 2;
      const y = circleCenter.y + waveAmplitude * Math.sin(angle);
      
      if (i === 0) {
        points.push(`M ${x} ${y}`);
      } else {
        points.push(`L ${x} ${y}`);
      }
    }
    
    return points.join(' ');
  };

  const wavePath = generateWavePath(waveProgress);

  // Current wave endpoint for tracer line
  const currentWaveX = waveStartX + waveProgress * waveWidth;

  // Formula fade in
  const formulaOpacity = interpolate(frame, [250, 280], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: easeOut,
  });

  const formulaY = interpolate(frame, [250, 280], [30, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: easeOut,
  });

  // Watermark fade in
  const watermarkOpacity = interpolate(frame, [280, 300], [0, 0.5], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: easeOut,
  });

  // Point visibility (starts after circle is drawn)
  const pointOpacity = interpolate(frame, [48, 55], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  // Tracer line visibility
  const tracerOpacity = interpolate(frame, [50, 60], [0, 0.5], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill style={{ backgroundColor: '#121212' }}>
      {/* Background Grid */}
      <svg
        width="1080"
        height="1920"
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          opacity: gridOpacity,
        }}
      >
        {horizontalGridLines.map((line, i) => (
          <line
            key={`h-${i}`}
            x1="0"
            y1={line.y}
            x2="1080"
            y2={line.y}
            stroke="#222222"
            strokeWidth="1"
            opacity={line.opacity}
          />
        ))}
        {verticalGridLines.map((line, i) => (
          <line
            key={`v-${i}`}
            x1={line.x}
            y1="0"
            x2={line.x}
            y2="1920"
            stroke="#222222"
            strokeWidth="1"
            opacity={line.opacity}
          />
        ))}
      </svg>

      {/* Heading */}
      <div
        style={{
          position: 'absolute',
          top: '12%',
          left: '50%',
          transform: 'translateX(-50%)',
          opacity: headingOpacity,
        }}
      >
        <h1
          style={{
            fontFamily: 'Montserrat, sans-serif',
            fontSize: 64,
            fontWeight: 600,
            color: '#ffffff',
            margin: 0,
            textAlign: 'center',
            textShadow: '0 0 30px rgba(255, 255, 255, 0.3)',
          }}
        >
          The Beauty of Sine
        </h1>
      </div>

      {/* Main SVG for circle and wave */}
      <svg
        width="1080"
        height="1920"
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
        }}
      >
        {/* Unit Circle */}
        <circle
          cx={circleCenter.x}
          cy={circleCenter.y}
          r={circleRadius}
          fill="none"
          stroke="#ffffff"
          strokeWidth="2"
          strokeDasharray={circleCircumference}
          strokeDashoffset={circleStrokeDashoffset}
          style={{
            filter: 'drop-shadow(0 0 8px rgba(255, 255, 255, 0.4))',
          }}
        />

        {/* Center dot */}
        <circle
          cx={circleCenter.x}
          cy={circleCenter.y}
          r="4"
          fill="#ffffff"
          opacity={circleDrawProgress}
        />

        {/* Rotating radius line */}
        {frame >= 50 && (
          <line
            x1={circleCenter.x}
            y1={circleCenter.y}
            x2={pointX}
            y2={pointY}
            stroke="#ff00ff"
            strokeWidth="3"
            style={{
              filter: 'drop-shadow(0 0 10px rgba(255, 0, 255, 0.8))',
            }}
          />
        )}

        {/* Point on circumference */}
        <circle
          cx={pointX}
          cy={pointY}
          r="10"
          fill="#ff00ff"
          opacity={pointOpacity}
          style={{
            filter: 'drop-shadow(0 0 15px rgba(255, 0, 255, 1))',
          }}
        />

        {/* Horizontal tracer line (dashed) */}
        {frame >= 50 && waveProgress > 0 && (
          <line
            x1={pointX}
            y1={pointY}
            x2={currentWaveX}
            y2={pointY}
            stroke="#ffffff"
            strokeWidth="2"
            strokeDasharray="8 6"
            opacity={tracerOpacity}
          />
        )}

        {/* Y-axis reference line */}
        <line
          x1={waveStartX - 30}
          y1={circleCenter.y - waveAmplitude - 20}
          x2={waveStartX - 30}
          y2={circleCenter.y + waveAmplitude + 20}
          stroke="#ffffff"
          strokeWidth="1"
          opacity={circleDrawProgress * 0.3}
        />

        {/* Sine Wave */}
        {wavePath && (
          <>
            {/* Glow layer */}
            <path
              d={wavePath}
              fill="none"
              stroke="#00ffff"
              strokeWidth="6"
              strokeLinecap="round"
              strokeLinejoin="round"
              opacity={0.4}
              style={{
                filter: 'blur(8px)',
              }}
            />
            {/* Main wave */}
            <defs>
              <linearGradient id="waveGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#00ffff" />
                <stop offset="100%" stopColor="#00bfff" />
              </linearGradient>
            </defs>
            <path
              d={wavePath}
              fill="none"
              stroke="url(#waveGradient)"
              strokeWidth="4"
              strokeLinecap="round"
              strokeLinejoin="round"
              style={{
                filter: 'drop-shadow(0 0 10px rgba(0, 255, 255, 0.6))',
              }}
            />
          </>
        )}

        {/* Current point on wave */}
        {frame >= 50 && waveProgress > 0 && (
          <circle
            cx={currentWaveX}
            cy={pointY}
            r="8"
            fill="#00ffff"
            style={{
              filter: 'drop-shadow(0 0 12px rgba(0, 255, 255, 1))',
            }}
          />
        )}
      </svg>

      {/* Axis labels */}
      <div
        style={{
          position: 'absolute',
          left: circleCenter.x - 8,
          top: circleCenter.y - circleRadius - 45,
          opacity: circleDrawProgress * 0.6,
        }}
      >
        <span
          style={{
            fontFamily: 'Montserrat, sans-serif',
            fontSize: 24,
            color: '#ffffff',
          }}
        >
          1
        </span>
      </div>
      <div
        style={{
          position: 'absolute',
          left: circleCenter.x - 12,
          top: circleCenter.y + circleRadius + 20,
          opacity: circleDrawProgress * 0.6,
        }}
      >
        <span
          style={{
            fontFamily: 'Montserrat, sans-serif',
            fontSize: 24,
            color: '#ffffff',
          }}
        >
          -1
        </span>
      </div>

      {/* Formula */}
      <div
        style={{
          position: 'absolute',
          top: '68%',
          left: '50%',
          transform: `translateX(-50%) translateY(${formulaY}px)`,
          opacity: formulaOpacity,
        }}
      >
        <p
          style={{
            fontFamily: 'Montserrat, sans-serif',
            fontSize: 72,
            fontWeight: 500,
            color: '#00ffff',
            margin: 0,
            textAlign: 'center',
            textShadow: '0 0 30px rgba(0, 255, 255, 0.6), 0 0 60px rgba(0, 255, 255, 0.3)',
            letterSpacing: 4,
          }}
        >
          y = sin(θ)
        </p>
      </div>

      {/* Angle indicator */}
      {frame >= 50 && (
        <div
          style={{
            position: 'absolute',
            left: circleCenter.x + 50,
            top: circleCenter.y + 20,
            opacity: 0.7,
          }}
        >
          <span
            style={{
              fontFamily: 'Montserrat, sans-serif',
              fontSize: 28,
              color: '#ff00ff',
              textShadow: '0 0 10px rgba(255, 0, 255, 0.5)',
            }}
          >
            θ = {Math.round((rotationAngle * 180) / Math.PI)}°
          </span>
        </div>
      )}

      {/* Watermark */}
      <div
        style={{
          position: 'absolute',
          bottom: '5%',
          left: '50%',
          transform: 'translateX(-50%)',
          opacity: watermarkOpacity,
        }}
      >
        <p
          style={{
            fontFamily: 'Montserrat, sans-serif',
            fontSize: 24,
            fontWeight: 300,
            color: '#ffffff',
            margin: 0,
            textAlign: 'center',
            letterSpacing: 2,
          }}
        >
          Built with VidTSX
        </p>
      </div>
    </AbsoluteFill>
  );
};

export default SineWaveVisualization;