'use client';

import { motion, useReducedMotion } from 'framer-motion';
import { useState, useEffect } from 'react';

export default function LeagueDiscoveryMockup() {
  const shouldReduceMotion = useReducedMotion();
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    setIsMobile(window.innerWidth < 768);
  }, []);

  const leagues = [
    {
      name: 'Championship Series',
      carClass: 'GT3',
      region: 'EU',
      skill: '2.5k iRating',
      drivers: 48,
      schedule: 'Wed 20:00 CET',
      rating: 4.8,
      icon: '🏁'
    },
    {
      name: 'Touring Car Challenge',
      carClass: 'TCR',
      region: 'NA',
      skill: 'Open skill',
      drivers: 32,
      schedule: 'Sat 18:00 EST',
      rating: 4.6,
      icon: '🏎️'
    }
  ];

  if (isMobile) {
    return (
      <div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-3 overflow-hidden">
        <div className="mb-3">
          <div className="h-4 w-40 bg-white/10 rounded mb-3"></div>
          <div className="flex gap-2 flex-wrap">
            {['Game', 'Region'].map((filter) => (
              <div
                key={filter}
                className="h-6 px-3 bg-charcoal-outline border border-primary-blue/30 rounded-full flex items-center"
              >
                <div className="h-1.5 w-10 bg-white/10 rounded"></div>
              </div>
            ))}
          </div>
        </div>

        <div className="space-y-3">
          {leagues.map((league) => (
            <div
              key={league.name}
              className="bg-iron-gray/80 border border-charcoal-outline rounded-lg p-3"
            >
              <div className="flex items-start justify-between mb-2">
                <div className="flex items-center gap-2">
                  <div className="h-10 w-10 rounded-lg border-2 border-primary-blue/30 bg-charcoal-outline flex items-center justify-center text-xl">
                    {league.icon}
                  </div>
                  <div>
                    <div className="h-3 w-32 bg-white/10 rounded mb-1"></div>
                    <div className="flex gap-1 text-xs">
                      <span className="px-1.5 py-0.5 bg-primary-blue/20 text-primary-blue rounded">
                        {league.carClass}
                      </span>
                      <span className="px-1.5 py-0.5 bg-neon-aqua/20 text-neon-aqua rounded">
                        {league.region}
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              <div className="flex items-center justify-between text-xs text-gray-400 mb-2">
                <div className="flex items-center gap-2">
                  <span>{league.drivers} drivers</span>
                  <span>•</span>
                  <span>{league.schedule}</span>
                </div>
              </div>

              <div className="flex items-center justify-between">
                <div className="flex items-center gap-1">
                  {[...Array(5)].map((_, i) => (
                    <svg
                      key={i}
                      className={`w-3 h-3 ${i < Math.floor(league.rating) ? 'text-warning-amber' : 'text-charcoal-outline'}`}
                      fill="currentColor"
                      viewBox="0 0 20 20"
                    >
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                  ))}
                </div>
                
                <button className="px-2 py-1 bg-primary-blue text-white text-xs rounded">
                  Join
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: shouldReduceMotion ? 0 : 0.15 }
    }
  };

  const cardVariants = {
    hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { type: 'spring' as const, stiffness: 200, damping: 20 }
    }
  };

  return (
    <div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-1.5 sm:p-3 md:p-5 lg:p-8 overflow-hidden">
      <motion.div
        initial={{ opacity: 0, y: shouldReduceMotion ? 0 : -10 }}
        animate={{ opacity: 1, y: 0 }}
        className="mb-1.5 sm:mb-3 md:mb-4 lg:mb-6"
      >
        <div className="h-3 sm:h-4 md:h-5 lg:h-6 w-32 sm:w-40 md:w-52 bg-white/10 rounded mb-1.5 sm:mb-2 md:mb-3 lg:mb-4"></div>
        
        <div className="flex gap-1 sm:gap-1.5 md:gap-2 flex-wrap">
          {['Game', 'Region', 'Skill'].map((filter, i) => (
            <motion.div
              key={filter}
              initial={{ opacity: 0, scale: shouldReduceMotion ? 1 : 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: shouldReduceMotion ? 0 : i * 0.1 }}
              className="h-5 sm:h-6 md:h-7 lg:h-8 px-2 sm:px-3 md:px-4 bg-charcoal-outline border border-primary-blue/30 rounded-full flex items-center"
            >
              <div className="h-1 sm:h-1.5 md:h-2 w-8 sm:w-10 md:w-12 bg-white/10 rounded"></div>
            </motion.div>
          ))}
        </div>
      </motion.div>

      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="space-y-1.5 sm:space-y-2 md:space-y-3 lg:space-y-4"
      >
        {leagues.map((league, index) => (
          <motion.div
            key={league.name}
            variants={cardVariants}
            onHoverStart={() => !shouldReduceMotion && setHoveredIndex(index)}
            onHoverEnd={() => setHoveredIndex(null)}
            whileHover={shouldReduceMotion ? {} : {
              scale: 1.02,
              y: -4,
              transition: { duration: 0.2 }
            }}
            className="bg-iron-gray/80 border border-charcoal-outline rounded-lg p-1.5 sm:p-2 md:p-3 lg:p-4 backdrop-blur-sm"
          >
            <div className="flex items-start justify-between mb-1.5 sm:mb-2 md:mb-3">
              <div className="flex items-center gap-1.5 sm:gap-2 md:gap-3">
                <div className="h-7 w-7 sm:h-8 sm:w-8 md:h-10 md:w-10 lg:h-12 lg:w-12 rounded-lg border-2 border-primary-blue/30 bg-charcoal-outline flex items-center justify-center text-base sm:text-lg md:text-xl lg:text-2xl shadow-[0_0_12px_rgba(25,140,255,0.2)]">
                  {league.icon}
                </div>
                <div>
                  <div className="h-2.5 sm:h-3 md:h-4 w-28 sm:w-32 md:w-40 bg-white/10 rounded mb-1 sm:mb-1.5 md:mb-2"></div>
                  <div className="flex gap-1 sm:gap-1.5 md:gap-2 text-[8px] sm:text-[10px] md:text-xs">
                    <span className="px-1 sm:px-1.5 md:px-2 py-0.5 bg-primary-blue/20 text-primary-blue rounded">
                      {league.carClass}
                    </span>
                    <span className="px-1 sm:px-1.5 md:px-2 py-0.5 bg-neon-aqua/20 text-neon-aqua rounded">
                      {league.region}
                    </span>
                    <span className="px-1 sm:px-1.5 md:px-2 py-0.5 bg-charcoal-outline text-gray-400 rounded">
                      {league.skill}
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div className="flex items-center justify-between text-[8px] sm:text-[10px] md:text-xs text-gray-400 mb-1.5 sm:mb-2 md:mb-3">
              <div className="flex items-center gap-1.5 sm:gap-2 md:gap-3 lg:gap-4">
                <div className="flex items-center gap-1">
                  <svg className="w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-4 md:h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                  </svg>
                  <span>{league.drivers} drivers</span>
                </div>
                <div className="flex items-center gap-1">
                  <svg className="w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-4 md:h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  <span>{league.schedule}</span>
                </div>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <div className="flex items-center gap-1">
                {[...Array(5)].map((_, i) => (
                  <motion.svg
                    key={i}
                    className={`w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-4 md:h-4 ${i < Math.floor(league.rating) ? 'text-warning-amber' : 'text-charcoal-outline'}`}
                    fill="currentColor"
                    viewBox="0 0 20 20"
                    animate={hoveredIndex === index && !shouldReduceMotion ? {
                      scale: [1, 1.2, 1],
                      transition: { delay: i * 0.05, duration: 0.3 }
                    } : {}}
                  >
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                  </motion.svg>
                ))}
                <span className="text-[8px] sm:text-[10px] md:text-xs text-gray-400 ml-1">{league.rating}</span>
              </div>
              
              <div className="flex gap-1 sm:gap-1.5 md:gap-2">
                <motion.button
                  whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
                  whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
                  className="px-1.5 sm:px-2 md:px-3 py-0.5 bg-primary-blue text-white text-[8px] sm:text-[10px] md:text-xs rounded hover:bg-primary-blue/80 transition-colors"
                >
                  Join
                </motion.button>
                <motion.button
                  whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
                  whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
                  className="px-1.5 sm:px-2 md:px-3 py-0.5 bg-charcoal-outline text-gray-300 text-[8px] sm:text-[10px] md:text-xs rounded hover:bg-charcoal-outline/80 transition-colors"
                >
                  View
                </motion.button>
              </div>
            </div>
          </motion.div>
        ))}
      </motion.div>
    </div>
  );
}