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

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

// =============================================================================
// PRE-GENERATED DATA
// =============================================================================
const SPOKE_COUNT = 12;
const spokes = Array.from({ length: SPOKE_COUNT }, (_, i) => ({
  id: i,
  angle: (360 / SPOKE_COUNT) * i,
}));

const TICK_MARKS = Array.from({ length: 60 }, (_, i) => ({
  id: i,
  angle: (360 / 60) * i,
  isMajor: i % 5 === 0,
}));

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

  // Wheel rotation - 2 full rotations over the duration
  const rotation = interpolate(
    frame,
    [0, durationInFrames],
    [0, 720],
    {
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp',
    }
  );

  // FPS badge pulse
  const badgePulse = interpolate(
    frame % 60,
    [0, 30, 60],
    [1, 1.05, 1],
    {
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp',
    }
  );

  // Intro animation
  const introScale = interpolate(
    frame,
    [0, 40],
    [0.8, 1],
    {
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp',
      easing: Easing.out(Easing.back(1.5)),
    }
  );

  const introOpacity = interpolate(
    frame,
    [0, 30],
    [0, 1],
    {
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp',
    }
  );

  return (
    <AbsoluteFill
      style={{
        backgroundColor: '#0a0a0f',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontFamily: 'Montserrat, sans-serif',
      }}
    >
      {/* Background grid */}
      <div
        style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
          backgroundImage: `
            linear-gradient(rgba(0, 191, 255, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 191, 255, 0.03) 1px, transparent 1px)
          `,
          backgroundSize: '50px 50px',
        }}
      />

      {/* Radial glow behind wheel */}
      <div
        style={{
          position: 'absolute',
          width: 700,
          height: 700,
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(0, 191, 255, 0.15) 0%, transparent 70%)',
          opacity: introOpacity,
        }}
      />

      {/* Main wheel container */}
      <div
        style={{
          position: 'relative',
          width: 500,
          height: 500,
          transform: `scale(${introScale})`,
          opacity: introOpacity,
        }}
      >
        {/* Outer ring with tick marks */}
        <div
          style={{
            position: 'absolute',
            width: '100%',
            height: '100%',
            borderRadius: '50%',
            border: '4px solid rgba(0, 191, 255, 0.3)',
            boxShadow: `
              0 0 30px rgba(0, 191, 255, 0.2),
              inset 0 0 30px rgba(0, 191, 255, 0.1)
            `,
          }}
        >
          {/* Tick marks */}
          {TICK_MARKS.map((tick) => (
            <div
              key={tick.id}
              style={{
                position: 'absolute',
                width: tick.isMajor ? 4 : 2,
                height: tick.isMajor ? 20 : 10,
                backgroundColor: tick.isMajor ? '#00bfff' : 'rgba(0, 191, 255, 0.4)',
                left: '50%',
                top: 0,
                transform: `translateX(-50%) rotate(${tick.angle}deg)`,
                transformOrigin: '50% 250px',
                borderRadius: 2,
              }}
            />
          ))}
        </div>

        {/* Spinning wheel */}
        <div
          style={{
            position: 'absolute',
            width: 400,
            height: 400,
            left: 50,
            top: 50,
            transform: `rotate(${rotation}deg)`,
          }}
        >
          {/* Spokes */}
          {spokes.map((spoke, index) => (
            <div
              key={spoke.id}
              style={{
                position: 'absolute',
                width: 8,
                height: 180,
                left: '50%',
                top: '50%',
                transform: `translateX(-50%) rotate(${spoke.angle}deg)`,
                transformOrigin: '50% 0%',
                background: index % 2 === 0 
                  ? 'linear-gradient(180deg, #00bfff 0%, rgba(0, 191, 255, 0.2) 100%)'
                  : 'linear-gradient(180deg, #00ff88 0%, rgba(0, 255, 136, 0.2) 100%)',
                borderRadius: 4,
                boxShadow: index % 2 === 0
                  ? '0 0 15px rgba(0, 191, 255, 0.6)'
                  : '0 0 15px rgba(0, 255, 136, 0.6)',
              }}
            />
          ))}

          {/* Center hub */}
          <div
            style={{
              position: 'absolute',
              width: 80,
              height: 80,
              left: '50%',
              top: '50%',
              transform: 'translate(-50%, -50%)',
              borderRadius: '50%',
              background: 'linear-gradient(135deg, #1a1a2e 0%, #0a0a0f 100%)',
              border: '4px solid #00bfff',
              boxShadow: `
                0 0 20px rgba(0, 191, 255, 0.5),
                inset 0 0 20px rgba(0, 191, 255, 0.2)
              `,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            {/* Inner dot */}
            <div
              style={{
                width: 20,
                height: 20,
                borderRadius: '50%',
                backgroundColor: '#00bfff',
                boxShadow: '0 0 15px #00bfff',
              }}
            />
          </div>
        </div>

        {/* Direction indicator (stationary) */}
        <div
          style={{
            position: 'absolute',
            top: -30,
            left: '50%',
            transform: 'translateX(-50%)',
            width: 0,
            height: 0,
            borderLeft: '20px solid transparent',
            borderRight: '20px solid transparent',
            borderTop: '35px solid #ff9f43',
            filter: 'drop-shadow(0 0 10px rgba(255, 159, 67, 0.8))',
          }}
        />
      </div>

      {/* FPS Badge */}
      <div
        style={{
          position: 'absolute',
          top: 80,
          left: '50%',
          transform: `translateX(-50%) scale(${badgePulse})`,
          opacity: introOpacity,
        }}
      >
        <div
          style={{
            background: 'linear-gradient(135deg, rgba(255, 159, 67, 0.2) 0%, rgba(255, 159, 67, 0.1) 100%)',
            border: '3px solid #ff9f43',
            borderRadius: 20,
            padding: '20px 50px',
            boxShadow: '0 0 30px rgba(255, 159, 67, 0.3)',
          }}
        >
          <div
            style={{
              fontSize: 72,
              fontWeight: 800,
              color: '#ffffff',
              textShadow: '0 0 20px rgba(255, 159, 67, 0.8)',
              letterSpacing: 4,
              margin: 0,
            }}
          >
            60 FPS
          </div>
        </div>
      </div>

      {/* Frame counter */}
      <div
        style={{
          position: 'absolute',
          bottom: 100,
          left: '50%',
          transform: 'translateX(-50%)',
          opacity: introOpacity,
          textAlign: 'center',
        }}
      >
        <div
          style={{
            fontSize: 24,
            color: 'rgba(255, 255, 255, 0.5)',
            marginBottom: 10,
            letterSpacing: 3,
            textTransform: 'uppercase',
          }}
        >
          Frame
        </div>
        <div
          style={{
            fontSize: 64,
            fontWeight: 700,
            color: '#00bfff',
            fontFamily: 'monospace',
            textShadow: '0 0 20px rgba(0, 191, 255, 0.5)',
          }}
        >
          {String(frame).padStart(3, '0')}
        </div>
      </div>

      {/* Rotation indicator */}
      <div
        style={{
          position: 'absolute',
          bottom: 100,
          right: 100,
          opacity: introOpacity,
          textAlign: 'right',
        }}
      >
        <div
          style={{
            fontSize: 24,
            color: 'rgba(255, 255, 255, 0.5)',
            marginBottom: 10,
            letterSpacing: 3,
            textTransform: 'uppercase',
          }}
        >
          Rotation
        </div>
        <div
          style={{
            fontSize: 48,
            fontWeight: 700,
            color: '#00ff88',
            fontFamily: 'monospace',
            textShadow: '0 0 20px rgba(0, 255, 136, 0.5)',
          }}
        >
          {rotation.toFixed(1)}°
        </div>
      </div>

      {/* Time indicator */}
      <div
        style={{
          position: 'absolute',
          bottom: 100,
          left: 100,
          opacity: introOpacity,
          textAlign: 'left',
        }}
      >
        <div
          style={{
            fontSize: 24,
            color: 'rgba(255, 255, 255, 0.5)',
            marginBottom: 10,
            letterSpacing: 3,
            textTransform: 'uppercase',
          }}
        >
          Time
        </div>
        <div
          style={{
            fontSize: 48,
            fontWeight: 700,
            color: '#ffffff',
            fontFamily: 'monospace',
            textShadow: '0 0 20px rgba(255, 255, 255, 0.3)',
          }}
        >
          {(frame / fps).toFixed(2)}s
        </div>
      </div>
    </AbsoluteFill>
  );
};

export default SpinningWheel60FPS;