import React from 'react';
import {
  useCurrentFrame,
  spring,
  useVideoConfig,
  interpolate,
  staticFile,
} from 'remotion';
import { COLORS, FONT, SPRING } from '../styles/theme';
import { MeshBackground } from '../components/MeshBackground';
import { ParticleField } from '../components/ParticleField';

/* ─── Converging particles: rush inward toward center ─── */
const ConvergingParticles: React.FC = () => {
  const frame = useCurrentFrame();

  const particles = React.useMemo(() => {
    const pts: { angle: number; startR: number; speed: number; size: number; phase: number }[] = [];
    for (let i = 0; i < 80; i++) {
      const h1 = Math.sin(i * 127.1 + 42) * 43758.5453;
      const h2 = Math.sin(i * 269.5 + 42) * 76321.123;
      const h3 = Math.sin(i * 419.2 + 42) * 29451.72;
      pts.push({
        angle: (h1 - Math.floor(h1)) * Math.PI * 2,
        startR: 600 + (h2 - Math.floor(h2)) * 400,
        speed: 8 + (h3 - Math.floor(h3)) * 12,
        size: 1.5 + (h1 - Math.floor(h1)) * 2.5,
        phase: (h2 - Math.floor(h2)) * Math.PI * 2,
      });
    }
    return pts;
  }, []);

  const cx = 960;
  const cy = 480;

  return (
    <div
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: 1920,
        height: 1080,
        pointerEvents: 'none',
      }}
    >
      {particles.map((p, i) => {
        const r = Math.max(0, p.startR - frame * p.speed);
        const wobble = Math.sin(frame * 0.08 + p.phase) * 12;
        const x = cx + Math.cos(p.angle) * (r + wobble);
        const y = cy + Math.sin(p.angle) * (r + wobble);

        const opacity = interpolate(r, [0, 50, 200, 600], [0, 0.8, 0.5, 0.15], {
          extrapolateLeft: 'clamp',
          extrapolateRight: 'clamp',
        });

        return (
          <div
            key={i}
            style={{
              position: 'absolute',
              left: x,
              top: y,
              width: p.size,
              height: p.size,
              borderRadius: '50%',
              background: COLORS.primary,
              opacity,
              boxShadow: p.size > 2.5 ? `0 0 ${p.size * 4}px ${COLORS.primary}` : undefined,
            }}
          />
        );
      })}
    </div>
  );
};

/* ─── Animated gradient underline sweep ─── */
const GradientUnderline: React.FC = () => {
  const frame = useCurrentFrame();

  const sweepStart = 35;
  const sweepProgress = interpolate(frame - sweepStart, [0, 30], [0, 100], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  const opacity = interpolate(frame - sweepStart, [0, 10], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  if (frame < sweepStart) return null;

  return (
    <div
      style={{
        position: 'absolute',
        left: '50%',
        top: 'calc(50% + 50px)',
        transform: 'translateX(-50%)',
        width: 460,
        height: 4,
        borderRadius: 2,
        overflow: 'hidden',
        opacity,
      }}
    >
      <div
        style={{
          width: `${sweepProgress}%`,
          height: '100%',
          background: `linear-gradient(90deg, ${COLORS.primary}, ${COLORS.secondary}, ${COLORS.accent})`,
          borderRadius: 2,
        }}
      />
    </div>
  );
};

/* ─── Expanding ring of light ─── */
const ExpandingRing: React.FC = () => {
  const frame = useCurrentFrame();
  const ringStart = 85;

  if (frame < ringStart) return null;

  const ringScale = interpolate(frame - ringStart, [0, 35], [0, 8], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  const ringOpacity = interpolate(frame - ringStart, [0, 8, 35], [0, 0.5, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <div
      style={{
        position: 'absolute',
        left: 960 - 50,
        top: 480 - 50,
        width: 100,
        height: 100,
        borderRadius: '50%',
        border: `2px solid ${COLORS.primary}`,
        transform: `scale(${ringScale})`,
        opacity: ringOpacity,
        pointerEvents: 'none',
      }}
    />
  );
};

/* ─── Main Scene ─── */
export const Scene3LogoReveal: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  /* Logo snap-in at frame ~30 with snappy spring */
  const logoProgress = spring({
    frame: frame - 28,
    fps,
    config: SPRING.snappy,
  });

  const logoScale = interpolate(logoProgress, [0, 1], [0.3, 1]);
  const logoOpacity = logoProgress;

  /* Glow shadow behind "Claw" intensifies */
  const glowIntensity = interpolate(frame, [30, 60], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  /* Subtitle: blur-to-sharp */
  const subtitleDelay = 55;
  const subtitleProgress = spring({
    frame: frame - subtitleDelay,
    fps,
    config: SPRING.smooth,
  });
  const subtitleBlur = interpolate(subtitleProgress, [0, 1], [12, 0]);
  const subtitleOpacity = subtitleProgress;
  const subtitleY = interpolate(subtitleProgress, [0, 1], [15, 0]);

  return (
    <div
      style={{
        width: 1920,
        height: 1080,
        fontFamily: FONT,
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      {/* Dark mesh background */}
      <MeshBackground
        color1={COLORS.primary}
        color2={COLORS.secondary}
        intensity={0.1}
        speed={0.4}
      />

      {/* Very faint hero banner */}
      <img
        src={staticFile('graphics/hero-banner.png')}
        style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
          objectFit: 'cover',
          opacity: 0.08,
        }}
      />

      {/* Converging particles */}
      <ConvergingParticles />

      {/* Ambient particle layer (slow) */}
      <ParticleField count={25} color={COLORS.white} drift="none" seed={33} fadeIn={30} />

      {/* Center content */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: 1920,
          height: 1080,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'column',
        }}
      >
        {/* Logo */}
        <div
          style={{
            fontSize: 128,
            fontWeight: 800,
            letterSpacing: -3,
            transform: `scale(${logoScale})`,
            opacity: logoOpacity,
            position: 'relative',
          }}
        >
          <span style={{ color: COLORS.white }}>Open</span>
          <span
            style={{
              color: COLORS.primary,
              textShadow: `0 0 ${30 * glowIntensity}px ${COLORS.primary}80, 0 0 ${60 * glowIntensity}px ${COLORS.primary}40`,
            }}
          >
            Claw
          </span>
        </div>

        {/* Gradient underline */}
        <GradientUnderline />

        {/* Subtitle */}
        <div
          style={{
            fontSize: 34,
            fontWeight: 400,
            color: COLORS.gray,
            marginTop: 32,
            opacity: subtitleOpacity,
            filter: `blur(${subtitleBlur}px)`,
            transform: `translateY(${subtitleY}px)`,
          }}
        >
          Managed AI Systems by MCP Engage
        </div>
      </div>

      {/* Expanding ring */}
      <ExpandingRing />
    </div>
  );
};
