'use client';

import { motion } from 'framer-motion';

export default function LoadingScreen({ message = 'Preparing your interview...' }: { message?: string }) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        className="flex flex-col items-center gap-6"
      >
        {/* Animated brain icon */}
        <div className="relative">
          <motion.div
            className="w-20 h-20 rounded-2xl flex items-center justify-center"
            style={{ background: 'var(--gradient-primary)' }}
            animate={{
              scale: [1, 1.1, 1],
              rotate: [0, 5, -5, 0],
            }}
            transition={{
              duration: 2,
              repeat: Infinity,
              ease: 'easeInOut',
            }}
          >
            <span className="text-3xl">🧠</span>
          </motion.div>
          {/* Orbiting dots */}
          {[0, 1, 2].map((i) => (
            <motion.div
              key={i}
              className="absolute w-3 h-3 rounded-full"
              style={{
                background: i === 0 ? 'var(--primary)' : i === 1 ? 'var(--secondary)' : 'var(--accent)',
                top: '50%',
                left: '50%',
              }}
              animate={{
                x: [0, Math.cos((i * 120 * Math.PI) / 180) * 50, 0],
                y: [0, Math.sin((i * 120 * Math.PI) / 180) * 50, 0],
                opacity: [0.3, 1, 0.3],
              }}
              transition={{
                duration: 2,
                repeat: Infinity,
                delay: i * 0.3,
                ease: 'easeInOut',
              }}
            />
          ))}
        </div>

        {/* Loading text */}
        <div className="flex flex-col items-center gap-2">
          <p className="text-lg font-medium" style={{ color: 'var(--foreground)' }}>
            {message}
          </p>
          <div className="typing-dots flex gap-1">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>

        {/* Progress shimmer */}
        <div className="w-64 h-1.5 rounded-full overflow-hidden" style={{ background: 'var(--border)' }}>
          <motion.div
            className="h-full rounded-full"
            style={{ background: 'var(--gradient-primary)' }}
            animate={{ x: ['-100%', '100%'] }}
            transition={{ duration: 1.5, repeat: Infinity, ease: 'easeInOut' }}
          />
        </div>
      </motion.div>
    </div>
  );
}