'use client';

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

interface MockupStackProps {
  children: ReactNode;
  index?: number;
}

export default function MockupStack({ children, index = 0 }: MockupStackProps) {
  const shouldReduceMotion = useReducedMotion();
  const [isMounted, setIsMounted] = useState(false);
  const [isMobile, setIsMobile] = useState(true); // Default to mobile (no animations)

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

  const seed = index * 1337;
  const rotation1 = ((seed * 17) % 80 - 40) / 20;
  const rotation2 = ((seed * 23) % 80 - 40) / 20;

  // On mobile or before mount, render without animations
  if (!isMounted || isMobile) {
    return (
      <div className="relative w-full h-full scale-60 sm:scale-70 md:scale-85 lg:scale-95 max-w-[85vw] mx-auto my-4 sm:my-0" style={{ perspective: '1200px' }}>
        <div
          className="absolute rounded-lg bg-iron-gray/80 border border-charcoal-outline"
          style={{
            rotate: `${rotation1}deg`,
            zIndex: 1,
            top: '-8px',
            left: '-8px',
            right: '-8px',
            bottom: '-8px',
            boxShadow: '0 12px 40px rgba(0,0,0,0.3)',
            opacity: 0.5,
          }}
        />
        
        <div
          className="absolute rounded-lg bg-iron-gray/90 border border-charcoal-outline"
          style={{
            rotate: `${rotation2}deg`,
            zIndex: 2,
            top: '-4px',
            left: '-4px',
            right: '-4px',
            bottom: '-4px',
            boxShadow: '0 16px 48px rgba(0,0,0,0.35)',
            opacity: 0.7,
          }}
        />

        <div
          className="relative z-10 w-full h-full rounded-lg overflow-hidden"
          style={{
            boxShadow: '0 20px 60px rgba(0,0,0,0.45)',
          }}
        >
          {children}
        </div>
      </div>
    );
  }

  // Desktop: render with animations
  return (
    <div className="relative w-full h-full scale-60 sm:scale-70 md:scale-85 lg:scale-95 max-w-[85vw] mx-auto my-4 sm:my-0" style={{ perspective: '1200px' }}>
      <motion.div
        className="absolute rounded-lg bg-iron-gray/80 border border-charcoal-outline"
        style={{
          rotate: `${rotation1}deg`,
          zIndex: 1,
          top: '-8px',
          left: '-8px',
          right: '-8px',
          bottom: '-8px',
          boxShadow: '0 12px 40px rgba(0,0,0,0.3)',
        }}
        initial={{ opacity: 0, scale: 0.92 }}
        animate={{ opacity: 0.5, scale: 1 }}
        transition={{ duration: 0.3, delay: 0.1 }}
      />
      
      <motion.div
        className="absolute rounded-lg bg-iron-gray/90 border border-charcoal-outline"
        style={{
          rotate: `${rotation2}deg`,
          zIndex: 2,
          top: '-4px',
          left: '-4px',
          right: '-4px',
          bottom: '-4px',
          boxShadow: '0 16px 48px rgba(0,0,0,0.35)',
        }}
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 0.7, scale: 1 }}
        transition={{ duration: 0.3, delay: 0.15 }}
      />

      <motion.div
        className="relative z-10 w-full h-full rounded-lg overflow-hidden"
        style={{
          boxShadow: '0 20px 60px rgba(0,0,0,0.45)',
        }}
        whileHover={
          shouldReduceMotion
            ? {}
            : {
                scale: 1.02,
                rotateY: 3,
                rotateX: -2,
                y: -12,
                transition: {
                  type: 'spring',
                  stiffness: 200,
                  damping: 20,
                },
              }
        }
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, delay: 0.2 }}
      >
        <motion.div
          className="absolute inset-0 pointer-events-none rounded-lg"
          whileHover={
            shouldReduceMotion
              ? {}
              : {
                  boxShadow: '0 0 40px rgba(25, 140, 255, 0.4)',
                  transition: { duration: 0.2 },
                }
          }
        />
        {children}
      </motion.div>
    </div>
  );
}