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

/* ─── Circuit Lines: animated SVG connection traces behind text ─── */
const CircuitLines: React.FC = () => {
  const frame = useCurrentFrame();

  const paths = [
    'M 200,400 L 500,400 L 500,540 L 960,540',
    'M 1720,400 L 1420,400 L 1420,540 L 960,540',
    'M 960,200 L 960,540',
    'M 400,700 L 600,700 L 600,540 L 960,540',
    'M 1520,700 L 1320,700 L 1320,540 L 960,540',
    'M 200,540 L 500,540',
    'M 1420,540 L 1720,540',
  ];

  return (
    <svg
      style={{ position: 'absolute', top: 0, left: 0, width: 1920, height: 1080 }}
    >
      {paths.map((d, i) => {
        const delay = i * 12;
        const dashTotal = 1200;
        const drawProgress = interpolate(frame - delay, [0, 50], [dashTotal, 0], {
          extrapolateLeft: 'clamp',
          extrapolateRight: 'clamp',
        });

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

        return (
          <path
            key={i}
            d={d}
            fill="none"
            stroke={COLORS.primary}
            strokeWidth={1.2}
            opacity={fadeIn * 0.18}
            strokeDasharray={dashTotal}
            strokeDashoffset={drawProgress}
          />
        );
      })}

      {/* Node dots at intersections */}
      {[
        [500, 400],
        [500, 540],
        [1420, 400],
        [1420, 540],
        [960, 540],
        [600, 700],
        [600, 540],
        [1320, 700],
        [1320, 540],
      ].map(([cx, cy], i) => {
        const dotDelay = 30 + i * 8;
        const dotOpacity = interpolate(frame - dotDelay, [0, 15], [0, 0.35], {
          extrapolateLeft: 'clamp',
          extrapolateRight: 'clamp',
        });
        const pulse = 0.7 + Math.sin(frame * 0.06 + i) * 0.3;

        return (
          <circle
            key={i}
            cx={cx}
            cy={cy}
            r={3}
            fill={COLORS.primary}
            opacity={dotOpacity * pulse}
          />
        );
      })}
    </svg>
  );
};

/* ─── Pulse ring that expands outward at the end ─── */
const PulseRing: React.FC = () => {
  const frame = useCurrentFrame();
  const startFrame = 115;

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

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

  if (frame < startFrame) return null;

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

/* ─── Highlight sweep: glowing bar that slides across highlighted words ─── */
const HighlightSweep: React.FC = () => {
  const frame = useCurrentFrame();
  // Sweep starts after words are revealed (~frame 70), sweeps across
  const sweepStart = 72;
  const sweepX = interpolate(frame - sweepStart, [0, 30], [-200, 600], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  const sweepOpacity = interpolate(frame - sweepStart, [0, 5, 25, 30], [0, 0.6, 0.6, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  if (frame < sweepStart) return null;

  return (
    <div
      style={{
        position: 'absolute',
        left: `calc(50% - 200px + ${sweepX}px)`,
        top: '50%',
        transform: 'translateY(-50%)',
        width: 80,
        height: 80,
        background: `radial-gradient(ellipse, ${COLORS.primary}50 0%, transparent 70%)`,
        opacity: sweepOpacity,
        pointerEvents: 'none',
        filter: 'blur(20px)',
      }}
    />
  );
};

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

  // Global fade in
  const fadeIn = interpolate(frame, [0, 20], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  // Subtle zoom to add energy
  const zoom = interpolate(frame, [0, 150], [1, 1.03], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  // Center glow grows as text appears
  const glowProgress = spring({
    frame: frame - 10,
    fps,
    config: SPRING.heavy,
  });

  return (
    <div
      style={{
        width: 1920,
        height: 1080,
        fontFamily: FONT,
        position: 'relative',
        overflow: 'hidden',
        opacity: fadeIn,
        transform: `scale(${zoom})`,
      }}
    >
      {/* Layer 1: Mesh gradient background */}
      <MeshBackground
        color1={COLORS.primary}
        color2={COLORS.secondary}
        intensity={0.15}
        speed={0.6}
      />

      {/* Layer 2: Particles drifting upward */}
      <ParticleField count={60} color={COLORS.white} drift="up" seed={11} />

      {/* Layer 3: Circuit trace lines */}
      <CircuitLines />

      {/* Layer 4: Center ambient glow */}
      <div
        style={{
          position: 'absolute',
          left: '50%',
          top: '50%',
          width: 500,
          height: 500,
          transform: `translate(-50%, -50%) scale(${glowProgress * 1.5})`,
          borderRadius: '50%',
          background: `radial-gradient(circle, ${COLORS.primary}18 0%, transparent 70%)`,
          pointerEvents: 'none',
        }}
      />

      {/* Layer 5: KineticText — word-by-word reveal */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: 1920,
          height: 1080,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <KineticText
          text="What if your AI could run your entire business?"
          fontSize={66}
          fontWeight={700}
          color={COLORS.white}
          highlightWords={['entire', 'business?']}
          highlightColor={COLORS.primary}
          startDelay={15}
          staggerFrames={5}
          animationType="slideUp"
          style={{ maxWidth: 1300, textAlign: 'center' }}
        />
      </div>

      {/* Highlight sweep over highlighted words */}
      <HighlightSweep />

      {/* Pulse ring at the end */}
      <PulseRing />
    </div>
  );
};
