'use client';

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

export default function RatingFactorsMockup() {
  const shouldReduceMotion = useReducedMotion();
  const [isHovered, setIsHovered] = useState<number | null>(null);
  const [isMobile, setIsMobile] = useState(false);

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

  const factors = [
    { name: 'Position', value: 85, color: 'text-primary-blue', bgColor: 'bg-primary-blue' },
    { name: 'Field Strength', value: 72, color: 'text-neon-aqua', bgColor: 'bg-neon-aqua' },
    { name: 'Consistency', value: 68, color: 'text-performance-green', bgColor: 'bg-performance-green' },
    { name: 'Clean Driving', value: 91, color: 'text-warning-amber', bgColor: 'bg-warning-amber' },
    { name: 'Reliability', value: 88, color: 'text-primary-blue', bgColor: 'bg-primary-blue' },
    { name: 'Team Points', value: 79, color: 'text-performance-green', bgColor: 'bg-performance-green' },
  ];

  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="text-center mb-4">
          <div className="h-5 w-40 bg-white/10 rounded mx-auto mb-2"></div>
          <div className="h-3 w-32 bg-white/5 rounded mx-auto"></div>
        </div>

        <div className="grid grid-cols-2 gap-3 mb-4">
          {factors.slice(0, 4).map((factor) => (
            <div key={factor.name} className="w-full">
              <div className="flex items-center justify-between mb-2">
                <div className="text-xs text-gray-400">{factor.name}</div>
                <span className={`text-sm font-semibold font-mono ${factor.color}`}>
                  {factor.value}
                </span>
              </div>
              <div className="relative h-2.5 bg-charcoal-outline rounded-full overflow-hidden">
                <div
                  className={`absolute inset-y-0 left-0 ${factor.bgColor} rounded-full`}
                  style={{ width: `${factor.value}%` }}
                />
              </div>
            </div>
          ))}
        </div>

        <div className="flex items-center justify-center bg-iron-gray/50 rounded-lg p-3 border border-charcoal-outline">
          <div className="text-center">
            <div className="h-2.5 w-20 bg-white/10 rounded mb-2 mx-auto"></div>
            <div className="text-3xl font-bold text-primary-blue font-mono">1342</div>
          </div>
        </div>
      </div>
    );
  }

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

  const itemVariants = {
    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-3 md:p-4 lg:p-6 overflow-hidden">
      <motion.div
        initial={{ opacity: 0, y: shouldReduceMotion ? 0 : -10 }}
        animate={{ opacity: 1, y: 0 }}
        className="text-center mb-3 md:mb-4 lg:mb-6"
      >
        <div className="h-6 md:h-6 lg:h-7 w-44 md:w-56 bg-white/10 rounded mx-auto mb-2.5 md:mb-3"></div>
        <div className="h-4 md:h-4 w-32 md:w-40 bg-white/5 rounded mx-auto"></div>
      </motion.div>

      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4 mb-3 md:mb-4 lg:mb-6 max-w-4xl mx-auto"
      >
        {factors.map((factor, index) => (
          <motion.div
            key={factor.name}
            variants={itemVariants}
            className="flex flex-col items-center"
            onHoverStart={() => !shouldReduceMotion && setIsHovered(index)}
            onHoverEnd={() => setIsHovered(null)}
          >
            <RatingFactor
              value={factor.value}
              color={factor.color}
              bgColor={factor.bgColor}
              name={factor.name}
              shouldReduceMotion={shouldReduceMotion ?? false}
              isHovered={isHovered === index}
            />
          </motion.div>
        ))}
      </motion.div>

      <motion.div
        initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: shouldReduceMotion ? 0 : 0.6 }}
        className="flex items-center justify-center gap-3 md:gap-3 bg-iron-gray/50 rounded-lg p-4 md:p-4 lg:p-5 border border-charcoal-outline shadow-[0_4px_24px_rgba(0,0,0,0.4)] backdrop-blur-sm max-w-md mx-auto"
      >
        <div className="text-center">
          <div className="h-3 md:h-3 w-24 md:w-28 bg-white/10 rounded mb-2 md:mb-2 mx-auto"></div>
          <div className="h-12 md:h-12 w-24 md:w-24 bg-charcoal-outline rounded flex items-center justify-center border border-primary-blue/30">
            <AnimatedRating shouldReduceMotion={shouldReduceMotion ?? false} />
          </div>
        </div>
      </motion.div>
    </div>
  );
}

function RatingFactor({
  value,
  color,
  bgColor,
  name,
  shouldReduceMotion,
  isHovered
}: {
  value: number;
  color: string;
  bgColor: string;
  name: string;
  shouldReduceMotion: boolean;
  isHovered: boolean;
}) {
  const progress = useMotionValue(0);
  const smoothProgress = useSpring(progress, { stiffness: 60, damping: 25 });
  const width = useTransform(smoothProgress, (v: number) => `${v}%`);

  useEffect(() => {
    if (shouldReduceMotion) {
      progress.set(value);
    } else {
      const timeout = setTimeout(() => progress.set(value), 200);
      return () => clearTimeout(timeout);
    }
  }, [value, shouldReduceMotion, progress]);

  return (
    <motion.div
      className="w-full"
      whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
      transition={{ type: 'spring', stiffness: 300, damping: 20 }}
    >
      <div className="flex items-center justify-between mb-2.5 md:mb-3">
        <div className="text-sm md:text-base lg:text-lg font-light text-gray-400 tracking-wide">{name}</div>
        <motion.span
          className={`text-sm md:text-base font-semibold font-mono ${color}`}
          animate={isHovered && !shouldReduceMotion ? { scale: 1.1 } : { scale: 1 }}
        >
          {value}
        </motion.span>
      </div>
      <div className="relative h-3 md:h-3.5 lg:h-4 bg-charcoal-outline rounded-full overflow-hidden">
        <motion.div
          className={`absolute inset-y-0 left-0 ${bgColor} rounded-full`}
          style={{ width }}
          animate={isHovered && !shouldReduceMotion ? {
            boxShadow: `0 0 12px currentColor`
          } : {}}
        />
      </div>
    </motion.div>
  );
}

function AnimatedRating({ shouldReduceMotion }: { shouldReduceMotion: boolean }) {
  const count = useMotionValue(0);
  const rounded = useTransform(count, (v: number) => Math.round(v));
  const spring = useSpring(count, { stiffness: 50, damping: 25 });

  useEffect(() => {
    if (shouldReduceMotion) {
      count.set(1342);
    } else {
      const timeout = setTimeout(() => count.set(1342), 800);
      return () => clearTimeout(timeout);
    }
  }, [shouldReduceMotion, count]);

  return (
    <motion.span className="text-3xl md:text-4xl lg:text-5xl font-bold text-primary-blue font-mono">
      {shouldReduceMotion ? 1342 : <motion.span>{rounded}</motion.span>}
    </motion.span>
  );
}