'use client';

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

export default function RaceHistoryMockup() {
  const shouldReduceMotion = useReducedMotion();
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth < 768);
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  const itemVariants = {
    hidden: { opacity: 0, scale: shouldReduceMotion ? 1 : 0.95 },
    visible: { opacity: 1, scale: 1 }
  };

  // Simple, elegant mobile version - just the core story
  if (isMobile) {
    return (
      <div className="relative w-full h-full bg-gradient-to-br from-deep-graphite to-iron-gray rounded-lg p-4 overflow-hidden flex items-center justify-center">
        <motion.div
          initial="hidden"
          animate="visible"
          variants={{
            visible: { transition: { staggerChildren: 0.12 } }
          }}
          className="space-y-4 w-full max-w-xs"
        >
          {/* Race result - clean and simple */}
          <motion.div variants={itemVariants}>
            <div className="bg-iron-gray/60 rounded-xl p-4 border-2 border-primary-blue/40">
              <div className="flex items-center gap-3">
                <div className="h-14 w-14 bg-primary-blue/20 rounded-lg flex items-center justify-center flex-shrink-0">
                  <span className="text-2xl font-bold text-primary-blue">P3</span>
                </div>
                <div>
                  <div className="text-base font-semibold text-white">Watkins Glen</div>
                  <div className="text-xs text-white/60">GT3 Sprint</div>
                </div>
              </div>
            </div>
          </motion.div>

          {/* Simple arrow */}
          <motion.div variants={itemVariants} className="flex justify-center">
            <div className="text-primary-blue text-2xl">↓</div>
          </motion.div>

          {/* Updates - minimal */}
          <motion.div variants={itemVariants}>
            <div className="bg-iron-gray/40 rounded-xl p-3 border border-charcoal-outline space-y-2">
              <div className="text-xs text-white/70 text-center mb-2">Profile Updated</div>
              <div className="flex gap-2">
                <div className="flex-1 bg-deep-graphite/50 rounded py-2 text-center border border-primary-blue/30">
                  <div className="text-xs text-primary-blue font-semibold">Stats ↑</div>
                </div>
                <div className="flex-1 bg-deep-graphite/50 rounded py-2 text-center border border-performance-green/30">
                  <div className="text-xs text-performance-green font-semibold">+12</div>
                </div>
              </div>
            </div>
          </motion.div>
        </motion.div>
      </div>
    );
  }

  // Desktop version - richer with more updates
  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="hidden"
        animate="visible"
        variants={{
          visible: { transition: { staggerChildren: shouldReduceMotion ? 0 : 0.12 } }
        }}
        className="space-y-2 sm:space-y-3 md:space-y-4 lg:space-y-5"
      >
        {/* Race Result Card - Enhanced */}
        <motion.div variants={itemVariants}>
          <div className="bg-iron-gray rounded-lg p-2 sm:p-3 md:p-4 lg:p-5 border-2 border-primary-blue/40">
            <div className="flex items-center gap-2 sm:gap-3 md:gap-4">
              <div className="relative h-12 w-12 sm:h-14 sm:w-14 md:h-16 md:w-16 lg:h-20 lg:w-20 bg-charcoal-outline rounded-lg border-2 border-primary-blue/30 overflow-hidden flex-shrink-0">
                <div className="absolute inset-0 bg-gradient-to-br from-primary-blue/20 to-performance-green/20"></div>
                <div className="absolute inset-0 flex items-center justify-center text-white text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold">P3</div>
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-1 sm:gap-1.5 md:gap-2 mb-1">
                  <div className="text-sm sm:text-base md:text-lg">🏁</div>
                  <div className="text-sm sm:text-base md:text-lg lg:text-xl font-semibold text-white truncate">Watkins Glen</div>
                </div>
                <div className="text-xs sm:text-sm md:text-base text-white/60 mb-1">GT3 Sprint Race</div>
                <div className="flex items-center gap-2 sm:gap-3 md:gap-4 text-[10px] sm:text-xs md:text-sm text-white/50">
                  <span>24 drivers</span>
                  <span>•</span>
                  <span>45 min</span>
                  <span>•</span>
                  <span>Just finished</span>
                </div>
              </div>
            </div>
          </div>
        </motion.div>

        {/* Connection Flow with Animation */}
        <motion.div variants={itemVariants} className="flex justify-center">
          <motion.div
            className="flex flex-col items-center gap-1"
            animate={shouldReduceMotion ? {} : {
              y: [0, 5, 0]
            }}
            transition={{ duration: 2, repeat: Infinity }}
          >
            <div className="text-primary-blue text-2xl sm:text-3xl md:text-4xl">↓</div>
            <div className="text-[10px] sm:text-xs text-primary-blue/70">Auto-sync</div>
          </motion.div>
        </motion.div>

        {/* Profile Updates Grid - More detailed */}
        <motion.div variants={itemVariants}>
          <div className="bg-iron-gray/80 rounded-lg p-2 sm:p-3 md:p-4 lg:p-5 border border-charcoal-outline">
            <div className="text-xs sm:text-sm md:text-base font-semibold text-white/80 text-center mb-2 sm:mb-3 md:mb-4">
              Profile Updates
            </div>
            
            <div className="grid grid-cols-2 gap-2 sm:gap-3 md:gap-4">
              {/* Career Stats Update */}
              <div className="bg-deep-graphite/50 rounded-lg p-2 sm:p-3 md:p-4 border border-primary-blue/30">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-[10px] sm:text-xs md:text-sm text-white/70">Career Stats</span>
                  <motion.span
                    className="text-[10px] sm:text-xs md:text-sm text-performance-green font-semibold"
                    animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
                    transition={{ duration: 0.5, delay: 0.5 }}
                  >
                    ↑
                  </motion.span>
                </div>
                <div className="text-[9px] sm:text-[10px] md:text-xs text-white/50">
                  Wins: 24 → 25
                </div>
              </div>

              {/* Rating Update */}
              <div className="bg-deep-graphite/50 rounded-lg p-2 sm:p-3 md:p-4 border border-performance-green/30">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-[10px] sm:text-xs md:text-sm text-white/70">Rating</span>
                  <motion.span
                    className="text-[10px] sm:text-xs md:text-sm text-performance-green font-semibold font-mono"
                    animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
                    transition={{ duration: 0.5, delay: 0.6 }}
                  >
                    +12
                  </motion.span>
                </div>
                <div className="text-[9px] sm:text-[10px] md:text-xs text-white/50">
                  1342 → 1354
                </div>
              </div>

              {/* Season Points Update */}
              <div className="bg-deep-graphite/50 rounded-lg p-2 sm:p-3 md:p-4 border border-warning-amber/30">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-[10px] sm:text-xs md:text-sm text-white/70">Season</span>
                  <motion.span
                    className="text-[10px] sm:text-xs md:text-sm text-warning-amber font-semibold font-mono"
                    animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
                    transition={{ duration: 0.5, delay: 0.7 }}
                  >
                    +18
                  </motion.span>
                </div>
                <div className="text-[9px] sm:text-[10px] md:text-xs text-white/50">
                  248 → 266 pts
                </div>
              </div>

              {/* Team Points Update */}
              <div className="bg-deep-graphite/50 rounded-lg p-2 sm:p-3 md:p-4 border border-neon-aqua/30">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-[10px] sm:text-xs md:text-sm text-white/70">Team</span>
                  <motion.span
                    className="text-[10px] sm:text-xs md:text-sm text-neon-aqua font-semibold font-mono"
                    animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
                    transition={{ duration: 0.5, delay: 0.8 }}
                  >
                    +18
                  </motion.span>
                </div>
                <div className="text-[9px] sm:text-[10px] md:text-xs text-white/50">
                  Contributing
                </div>
              </div>
            </div>
          </div>
        </motion.div>
      </motion.div>
    </div>
  );
}