import { motion } from 'framer-motion';
import { Check } from 'lucide-react';
import { cn } from '@/lib/cn';
import { MAPS } from '@/lib/constants';
import { staggerContainer, staggerItem } from '@/lib/animations';

interface MapSelectorProps {
  selectedMaps: string[];
  onToggle: (mapId: string) => void;
}

export function MapSelector({ selectedMaps, onToggle }: MapSelectorProps) {
  return (
    <div>
      <h3 className="text-sm font-medium text-text-secondary uppercase tracking-wider mb-3">Map Pool</h3>
      <motion.div
        variants={staggerContainer}
        initial="initial"
        animate="animate"
        className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3"
      >
        {MAPS.map((map) => {
          const selected = selectedMaps.includes(map.id);
          return (
            <motion.button
              key={map.id}
              variants={staggerItem}
              onClick={() => onToggle(map.id)}
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              className={cn(
                'relative group rounded-xl overflow-hidden border-2 transition-all duration-200 aspect-[16/10]',
                selected
                  ? 'border-amber-500 shadow-[0_0_12px_rgba(245,158,11,0.2)]'
                  : 'border-white/10 hover:border-white/20'
              )}
            >
              <div className={cn(
                'absolute inset-0 bg-gradient-to-br transition-all duration-300',
                selected
                  ? 'from-amber-900/40 to-bg-elevated brightness-100'
                  : 'from-bg-overlay to-bg-elevated brightness-50 group-hover:brightness-75'
              )} />

              <div className="absolute inset-0 flex flex-col items-center justify-center p-2">
                <span className={cn(
                  'text-sm font-bold uppercase tracking-wider',
                  selected ? 'text-amber-400' : 'text-text-secondary'
                )}>
                  {map.name}
                </span>
                <span className="text-[10px] text-text-muted mt-0.5">{map.id}</span>
              </div>

              <div className="absolute bottom-2 right-2">
                <div className={cn(
                  'w-5 h-5 rounded flex items-center justify-center border transition-all',
                  selected
                    ? 'bg-amber-500 border-amber-500'
                    : 'bg-bg-elevated/80 border-white/20'
                )}>
                  {selected && (
                    <motion.div
                      initial={{ scale: 0 }}
                      animate={{ scale: 1 }}
                      transition={{ type: 'spring', stiffness: 500, damping: 25 }}
                    >
                      <Check className="w-3 h-3 text-white" />
                    </motion.div>
                  )}
                </div>
              </div>
            </motion.button>
          );
        })}
      </motion.div>
    </div>
  );
}
