import { useMemo } from 'react';
import { useTheme } from '../lib/theme-context';

function buildEmberParticles(theme) {
  return Array.from({ length: 12 }, (_, i) => {
    const warmChannel = 100 + Math.random() * 100;
    const lightWarmChannel = 100 + Math.random() * 46;
    return {
      key: i,
      left: `${Math.random() * 100}%`,
      top: `${Math.random() * 100}%`,
      animationDelay: `${Math.random() * 8}s`,
      animationDuration: `${8 + Math.random() * 4}s`,
      backgroundColor:
        theme === 'dark'
          ? `rgba(255, ${warmChannel}, 0, 0.6)`
          : `rgba(251, ${lightWarmChannel}, 60, 0.4)`,
      boxShadow:
        theme === 'dark'
          ? `0 0 8px rgba(255, ${warmChannel}, 0, 0.4)`
          : `0 0 6px rgba(251, ${lightWarmChannel}, 60, 0.3)`,
    };
  });
}

export default function AuthLayout({ children }) {
  const { theme } = useTheme();
  const embers = useMemo(() => buildEmberParticles(theme), [theme]);

  return (
    <div className="min-h-screen relative overflow-hidden">
      {/* Animated Fire Glow Background */}
      <div 
        className="absolute inset-0 fire-glow-bg"
        style={{
          background: theme === 'dark' 
            ? `
              radial-gradient(circle at 20% 80%, rgba(255, 107, 0, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(255, 69, 0, 0.12) 0%, transparent 50%),
              radial-gradient(circle at 40% 40%, rgba(220, 38, 127, 0.08) 0%, transparent 50%),
              linear-gradient(135deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.98) 100%)
            `
            : `
              radial-gradient(circle at 20% 80%, rgba(255, 171, 64, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(251, 146, 60, 0.06) 0%, transparent 50%),
              radial-gradient(circle at 40% 40%, rgba(249, 115, 22, 0.04) 0%, transparent 50%),
              linear-gradient(135deg, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 0.95) 100%)
            `
        }}
      />
      
      {/* Floating Embers */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        {embers.map((ember) => (
          <div
            key={ember.key}
            className="absolute animate-ember-float opacity-30"
            style={{
              left: ember.left,
              top: ember.top,
              animationDelay: ember.animationDelay,
              animationDuration: ember.animationDuration,
            }}
          >
            <div
              className="w-1 h-1 rounded-full"
              style={{
                backgroundColor: ember.backgroundColor,
                boxShadow: ember.boxShadow,
              }}
            />
          </div>
        ))}
      </div>

      {/* Content */}
      <div className="relative z-10">
        {children}
      </div>
    </div>
  );
}