import React from 'react';
import { useCurrentFrame, interpolate } from 'remotion';
import { COLORS } from '../styles/theme';

export const MeshBackground: React.FC<{
  color1?: string;
  color2?: string;
  color3?: string;
  speed?: number;
  intensity?: number;
}> = ({
  color1 = COLORS.primary,
  color2 = COLORS.secondary,
  color3 = COLORS.accent,
  speed = 1,
  intensity = 0.25,
}) => {
  const frame = useCurrentFrame();
  const t = frame * 0.008 * speed;

  // Three orbiting gradient blobs
  const x1 = 40 + Math.sin(t) * 25;
  const y1 = 35 + Math.cos(t * 0.7) * 20;
  const x2 = 60 + Math.sin(t * 1.3 + 2) * 20;
  const y2 = 65 + Math.cos(t * 0.9 + 1) * 25;
  const x3 = 50 + Math.sin(t * 0.8 + 4) * 30;
  const y3 = 50 + Math.cos(t * 1.1 + 3) * 20;

  return (
    <div
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: 1920,
        height: 1080,
        background: COLORS.bg,
        overflow: 'hidden',
      }}
    >
      {/* Gradient blob 1 */}
      <div
        style={{
          position: 'absolute',
          left: `${x1}%`,
          top: `${y1}%`,
          width: 800,
          height: 800,
          borderRadius: '50%',
          background: `radial-gradient(circle, ${color1}${Math.round(intensity * 255).toString(16).padStart(2, '0')} 0%, transparent 70%)`,
          transform: 'translate(-50%, -50%)',
          filter: 'blur(80px)',
        }}
      />
      {/* Gradient blob 2 */}
      <div
        style={{
          position: 'absolute',
          left: `${x2}%`,
          top: `${y2}%`,
          width: 700,
          height: 700,
          borderRadius: '50%',
          background: `radial-gradient(circle, ${color2}${Math.round(intensity * 255).toString(16).padStart(2, '0')} 0%, transparent 70%)`,
          transform: 'translate(-50%, -50%)',
          filter: 'blur(80px)',
        }}
      />
      {/* Gradient blob 3 */}
      <div
        style={{
          position: 'absolute',
          left: `${x3}%`,
          top: `${y3}%`,
          width: 600,
          height: 600,
          borderRadius: '50%',
          background: `radial-gradient(circle, ${color3}${Math.round(intensity * 200).toString(16).padStart(2, '0')} 0%, transparent 70%)`,
          transform: 'translate(-50%, -50%)',
          filter: 'blur(80px)',
        }}
      />
      {/* Subtle grid pattern */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          backgroundImage: `
            linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px)
          `,
          backgroundSize: '60px 60px',
        }}
      />
    </div>
  );
};
