'use client';

import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import Image from 'next/image';

// =========================================
// 1. CONFIGURATION & DATA TYPES
// =========================================
export interface ShowcaseImage {
  src: string;
  alt: string;
  title?: string;
  subtitle?: string;
}

export interface SpatialShowcaseProps {
  images: ShowcaseImage[];
  autoPlayInterval?: number;
  primaryColor?: string;
  secondaryColor?: string;
  glowColor?: string;
  size?: 'sm' | 'md' | 'lg';
}

// =========================================
// 2. ANIMATION VARIANTS
// =========================================
const imageVariants = {
  initial: {
    opacity: 0,
    scale: 1.2,
    filter: 'blur(10px)',
  },
  animate: {
    opacity: 1,
    scale: 1,
    filter: 'blur(0px)',
    transition: { type: 'spring' as const, stiffness: 200, damping: 25 },
  },
  exit: {
    opacity: 0,
    scale: 0.8,
    filter: 'blur(10px)',
    transition: { duration: 0.3 },
  },
};

// =========================================
// 3. SUB-COMPONENTS
// =========================================
const OrbitalRings = ({ primaryColor, secondaryColor }: { primaryColor: string; secondaryColor: string }) => (
  <>
    {/* Dış dönen halka */}
    <motion.div
      animate={{ rotate: 360 }}
      transition={{ duration: 25, repeat: Infinity, ease: 'linear' }}
      className="absolute inset-[-15%] rounded-full border border-dashed"
      style={{ borderColor: `${primaryColor}30` }}
    />
    {/* Orta dönen halka - ters yön */}
    <motion.div
      animate={{ rotate: -360 }}
      transition={{ duration: 20, repeat: Infinity, ease: 'linear' }}
      className="absolute inset-[-8%] rounded-full border"
      style={{ borderColor: `${secondaryColor}20` }}
    />
    {/* İç statik halka */}
    <div 
      className="absolute inset-[-2%] rounded-full border-2"
      style={{ borderColor: `${primaryColor}15` }}
    />
  </>
);

const GlowEffect = ({ glowColor }: { glowColor: string }) => (
  <motion.div
    animate={{ scale: [1, 1.05, 1], opacity: [0.3, 0.5, 0.3] }}
    transition={{ duration: 4, repeat: Infinity, ease: 'easeInOut' }}
    className="absolute inset-0 rounded-full blur-3xl"
    style={{ backgroundColor: glowColor }}
  />
);

const FloatingDots = ({ primaryColor }: { primaryColor: string }) => (
  <>
    {[...Array(6)].map((_, i) => (
      <motion.div
        key={i}
        animate={{
          rotate: 360,
        }}
        transition={{
          duration: 15 + i * 3,
          repeat: Infinity,
          ease: 'linear',
        }}
        className="absolute inset-0"
        style={{ transform: `rotate(${i * 60}deg)` }}
      >
        <motion.div
          animate={{ scale: [1, 1.5, 1], opacity: [0.5, 1, 0.5] }}
          transition={{ duration: 2, repeat: Infinity, delay: i * 0.3 }}
          className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full"
          style={{ backgroundColor: primaryColor }}
        />
      </motion.div>
    ))}
  </>
);

const ProgressIndicator = ({ 
  total, 
  current, 
  primaryColor,
  onSelect 
}: { 
  total: number; 
  current: number; 
  primaryColor: string;
  onSelect: (index: number) => void;
}) => (
  <div className="absolute -bottom-12 left-1/2 -translate-x-1/2 flex gap-2">
    {[...Array(total)].map((_, index) => (
      <button
        key={index}
        onClick={() => onSelect(index)}
        className="relative h-2 rounded-full transition-all duration-300 overflow-hidden"
        style={{ 
          width: index === current ? '2rem' : '0.5rem',
          backgroundColor: index === current ? primaryColor : `${primaryColor}30`
        }}
      >
        {index === current && (
          <motion.div
            initial={{ scaleX: 0 }}
            animate={{ scaleX: 1 }}
            transition={{ duration: 5, ease: 'linear' }}
            className="absolute inset-0 origin-left"
            style={{ backgroundColor: primaryColor }}
          />
        )}
      </button>
    ))}
  </div>
);

// =========================================
// 4. MAIN COMPONENT
// =========================================
export default function SpatialProductShowcase({
  images,
  autoPlayInterval = 5000,
  primaryColor = '#C8102E',
  secondaryColor = '#0F2A44',
  glowColor = 'rgba(200, 16, 46, 0.2)',
  size = 'lg',
}: SpatialShowcaseProps) {
  const [currentIndex, setCurrentIndex] = useState(0);

  // Size mapping
  const sizeClasses = {
    sm: 'h-64 w-64 md:h-80 md:w-80',
    md: 'h-80 w-80 md:h-[400px] md:w-[400px]',
    lg: 'h-80 w-80 md:h-[450px] md:w-[450px] lg:h-[500px] lg:w-[500px]',
  };

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % images.length);
    }, autoPlayInterval);
    return () => clearInterval(interval);
  }, [images.length, autoPlayInterval]);

  const currentImage = images[currentIndex];

  return (
    <div className="relative flex items-center justify-center">
      {/* Main Container */}
      <div className={`relative ${sizeClasses[size]}`}>
        {/* Orbital Rings */}
        <OrbitalRings primaryColor={primaryColor} secondaryColor={secondaryColor} />
        
        {/* Glow Effect */}
        <GlowEffect glowColor={glowColor} />
        
        {/* Floating Dots */}
        <FloatingDots primaryColor={primaryColor} />

        {/* Image Container */}
        <div className="relative h-full w-full rounded-full border border-white/10 shadow-2xl flex items-center justify-center overflow-hidden bg-gradient-to-br from-white/5 to-white/0 backdrop-blur-sm">
          {/* Inner glow */}
          <div 
            className="absolute inset-4 rounded-full opacity-20 blur-2xl"
            style={{ backgroundColor: primaryColor }}
          />
          
          {/* Floating animation wrapper */}
          <motion.div
            animate={{ y: [-8, 8, -8] }}
            transition={{ repeat: Infinity, duration: 6, ease: 'easeInOut' }}
            className="relative z-10 w-full h-full flex items-center justify-center p-8"
          >
            <AnimatePresence mode="wait">
              <motion.div
                key={currentIndex}
                variants={imageVariants}
                initial="initial"
                animate="animate"
                exit="exit"
                className="relative w-full h-full"
              >
                <Image
                  src={currentImage.src}
                  alt={currentImage.alt}
                  fill
                  className="object-cover rounded-full"
                  priority
                  draggable={false}
                />
                {/* Overlay gradient */}
                <div 
                  className="absolute inset-0 rounded-full"
                  style={{ 
                    background: `linear-gradient(to top, ${secondaryColor}40, transparent 50%)` 
                  }}
                />
              </motion.div>
            </AnimatePresence>
          </motion.div>
        </div>

        {/* Status Label */}
        {currentImage.title && (
          <motion.div
            key={`label-${currentIndex}`}
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            className="absolute -bottom-4 left-1/2 -translate-x-1/2 whitespace-nowrap"
          >
            <div 
              className="flex items-center gap-2 text-xs uppercase tracking-widest px-4 py-2 rounded-full border backdrop-blur-sm"
              style={{ 
                backgroundColor: `${secondaryColor}90`,
                borderColor: `${primaryColor}30`,
                color: 'white'
              }}
            >
              <span 
                className="h-1.5 w-1.5 rounded-full animate-pulse"
                style={{ backgroundColor: primaryColor }}
              />
              {currentImage.title}
            </div>
          </motion.div>
        )}

        {/* Progress Indicator */}
        {images.length > 1 && (
          <ProgressIndicator 
            total={images.length} 
            current={currentIndex} 
            primaryColor={primaryColor}
            onSelect={setCurrentIndex}
          />
        )}
      </div>
    </div>
  );
}