import React, { useState, useImperativeHandle, forwardRef } from 'react';
import { Music, Tv, Trophy, Boxes, Sparkles } from 'lucide-react';
import { Decade, Category } from '../types';
import { sound } from '../utils/audio';

export interface VinylSpinnerRef {
  spin: () => void;
}

interface VinylSpinnerProps {
  onSpinResult: (decade: Decade, category: Category) => void;
  isSpinning: boolean;
  setIsSpinning: (spinning: boolean) => void;
  selectedDecade?: Decade | null;
  selectedCategory?: Category | null;
}

export const VinylSpinner = forwardRef<VinylSpinnerRef, VinylSpinnerProps>(({
  onSpinResult,
  isSpinning,
  setIsSpinning,
  selectedDecade,
  selectedCategory,
}, ref) => {
  const [rotation, setRotation] = useState<number>(0);

  const categories: { name: Category; icon: React.ReactNode; color: string; bg: string }[] = [
    { name: 'Música', icon: <Music className="w-5 h-5" />, color: 'text-amber-400', bg: 'bg-amber-950/80 border-amber-500/50' },
    { name: 'Cine & TV', icon: <Tv className="w-5 h-5" />, color: 'text-red-400', bg: 'bg-red-950/80 border-red-500/50' },
    { name: 'Deportes', icon: <Trophy className="w-5 h-5" />, color: 'text-cyan-400', bg: 'bg-cyan-950/80 border-cyan-500/50' },
    { name: 'Eventos', icon: <Boxes className="w-5 h-5" />, color: 'text-emerald-400', bg: 'bg-emerald-950/80 border-emerald-500/50' },
  ];

  const decades: { name: Decade; label: string; color: string; border: string }[] = [
    { name: '70', label: "70", color: 'from-amber-600/40 to-yellow-600/20 text-amber-300', border: 'border-amber-500/50' },
    { name: '80', label: "80", color: 'from-red-600/40 to-pink-600/20 text-red-300', border: 'border-red-500/50' },
    { name: '90', label: "90", color: 'from-cyan-600/40 to-teal-600/20 text-cyan-300', border: 'border-cyan-500/50' },
  ];

  const handleSpin = () => {
    if (isSpinning) return;
    setIsSpinning(true);
    sound.playVinylScratch();

    // 1. Pick decade & category first
    const chosenDecade = decades[Math.floor(Math.random() * decades.length)].name;
    const chosenCategory = categories[Math.floor(Math.random() * categories.length)].name;

    // 2. Calculate exact pointer angle for the chosen decade sector:
    // Sector 70 (Top): Center = 0 deg. Target range: -30 to +30
    // Sector 80 (Bottom-Right): Center = 120 deg. Target range: 90 to 150
    // Sector 90 (Bottom-Left): Center = 240 deg. Target range: 210 to 270
    let targetSectorAngle = 0;
    if (chosenDecade === '70') {
      targetSectorAngle = (Math.random() * 60 - 30 + 360) % 360;
    } else if (chosenDecade === '80') {
      targetSectorAngle = 120 + (Math.random() * 60 - 30);
    } else {
      targetSectorAngle = 240 + (Math.random() * 60 - 30);
    }

    // 3. Compute rotation animation angle
    const extraTurns = (5 + Math.floor(Math.random() * 3)) * 360;
    const currentNormalized = rotation % 360;
    let angleDelta = targetSectorAngle - currentNormalized;
    if (angleDelta <= 0) angleDelta += 360;

    const newRotation = rotation + extraTurns + angleDelta;
    setRotation(newRotation);

    // Audio tick loop during rotation
    let tickCount = 0;
    const interval = setInterval(() => {
      sound.playSpinTick();
      tickCount++;
      if (tickCount > 25) clearInterval(interval);
    }, 120);

    setTimeout(() => {
      clearInterval(interval);
      setIsSpinning(false);
      sound.playCorrect();
      onSpinResult(chosenDecade, chosenCategory);
    }, 3200);
  };

  useImperativeHandle(ref, () => ({
    spin: handleSpin,
  }));

  return (
    <div className="flex flex-col items-center justify-center py-4">
      {/* Vinyl Record & Turntable Gauge */}
      <div className="relative w-72 h-72 sm:w-80 sm:h-80 md:w-96 md:h-96 rounded-full p-2 bg-[#1c1924] border-4 border-amber-600/40 shadow-2xl shadow-black">
        {/* Vinyl Disc Body with grooves */}
        <div className="relative w-full h-full rounded-full vinyl-grooves border-2 border-amber-500/20 flex items-center justify-center overflow-hidden shadow-inner">
          {/* Decade Sectors Background Overlay (3 equal 120-degree sectors: 300deg to 60deg = Top 70, 60deg to 180deg = Right 80, 180deg to 300deg = Left 90) */}
          <div 
            className="absolute inset-0 opacity-50 pointer-events-none z-0 rounded-full"
            style={{
              background: 'conic-gradient(from 300deg, rgba(217, 119, 6, 0.5) 0deg 120deg, rgba(225, 29, 72, 0.5) 120deg 240deg, rgba(6, 182, 212, 0.5) 240deg 360deg)'
            }}
          />

          {/* Sector Divider Lines */}
          <div className="absolute inset-0 pointer-events-none z-10 opacity-30">
            <div className="absolute top-1/2 left-1/2 w-1/2 h-[1.5px] bg-amber-200 origin-left -rotate-30"></div>
            <div className="absolute top-1/2 left-1/2 w-1/2 h-[1.5px] bg-amber-200 origin-left rotate-90"></div>
            <div className="absolute top-1/2 left-1/2 w-1/2 h-[1.5px] bg-amber-200 origin-left rotate-[210deg]"></div>
          </div>

          {/* Decade Labels Centered inside each 120-degree Sector */}
          <div className="absolute top-[8%] left-1/2 -translate-x-1/2 font-righteous text-3xl sm:text-4xl text-amber-300 font-black tracking-wider drop-shadow-[0_2px_10px_rgba(0,0,0,1)] z-20 select-none">
            70
          </div>
          <div className="absolute top-[71%] left-[76%] -translate-x-1/2 -translate-y-1/2 font-righteous text-3xl sm:text-4xl text-red-300 font-black tracking-wider drop-shadow-[0_2px_10px_rgba(0,0,0,1)] z-20 select-none">
            80
          </div>
          <div className="absolute top-[71%] left-[24%] -translate-x-1/2 -translate-y-1/2 font-righteous text-3xl sm:text-4xl text-cyan-300 font-black tracking-wider drop-shadow-[0_2px_10px_rgba(0,0,0,1)] z-20 select-none">
            90
          </div>

          {/* Central Brass Gauge & Spinner Dial */}
          <div className="relative w-44 h-44 sm:w-52 sm:h-52 rounded-full brass-gradient p-1.5 shadow-xl shadow-black/80 flex items-center justify-center">
            {/* Center Record Label */}
            <div className="w-full h-full rounded-full bg-[#121016] border-2 border-amber-400/60 p-3 flex flex-col items-center justify-center text-center relative">
              <div className="text-[9px] uppercase font-bold tracking-widest text-amber-300/80 mb-0.5">
                RETRO•RE
              </div>
              <div className="text-[8px] uppercase tracking-tighter text-amber-100/60 leading-none">
                Coordenada Temporal
              </div>

              {/* Rotatable Needle Gauge */}
              <div
                className="absolute inset-0 flex items-center justify-center transition-transform duration-[3200ms] ease-out pointer-events-none"
                style={{ transform: `rotate(${rotation}deg)` }}
              >
                {/* Needle Arm */}
                <div className="w-1.5 h-20 sm:h-24 bg-gradient-to-t from-red-600 via-amber-400 to-yellow-200 rounded-full shadow-lg relative -top-6">
                  {/* Needle Pointer Tip */}
                  <div className="w-3 h-3 bg-red-500 rounded-full absolute -top-1 -left-0.75 shadow-md border border-amber-200"></div>
                </div>
              </div>

              {/* Center Spindle Center Cap */}
              <div className="w-8 h-8 rounded-full bg-gradient-to-br from-zinc-200 via-zinc-400 to-zinc-700 border-2 border-amber-400 shadow-md flex items-center justify-center z-10">
                <div className="w-2.5 h-2.5 rounded-full bg-black"></div>
              </div>

              <div className="text-[8px] font-bold text-amber-400/90 tracking-widest uppercase mt-2">
                Spinner
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Selected Outcome Badge (+2px / +1pt enlarged typography) */}
      <div className="mt-4 flex flex-col items-center">
        {(selectedDecade || selectedCategory) ? (
          <div className="flex items-center gap-2.5 bg-amber-500/15 border border-amber-500/40 px-5 py-2 rounded-full animate-fade-in shadow-lg shadow-amber-500/10">
            <Sparkles className="w-5 h-5 text-amber-400 shrink-0" />
            <span className="text-sm sm:text-base font-bold text-amber-200">
              Coordenada: <span className="text-amber-400 font-black text-base sm:text-lg">{selectedDecade || '?'}</span> • <span className="text-orange-400 font-black text-base sm:text-lg">{selectedCategory || '?'}</span>
            </span>
          </div>
        ) : (
          <div className="flex items-center gap-2.5 bg-zinc-900/80 border border-amber-500/20 px-5 py-2 rounded-full shadow-md">
            <Sparkles className="w-4 sm:w-5 h-4 sm:h-5 text-amber-400/60 shrink-0" />
            <span className="text-sm sm:text-base font-medium text-amber-200/60">
              Coordenada: <span className="text-amber-300/80 font-bold">Esperando giro...</span>
            </span>
          </div>
        )}
      </div>
    </div>
  );
});

VinylSpinner.displayName = 'VinylSpinner';