import React, { useState, useEffect, useRef } from 'react';
import { 
  ArrowLeft, 
  Grid, 
  ZoomIn, 
  ZoomOut, 
  Maximize, 
  ChevronLeft, 
  ChevronRight, 
  ChevronUp, 
  ChevronDown,
  Download,
  Archive,
  Copy,
  Check,
  Target,
  MousePointer2,
  Play,
  Pause,
  Undo2,
  Layers
} from 'lucide-react';
import { Frame, SpriteSheetSettings } from '../types';
import { motion, AnimatePresence } from 'motion/react';
import { generateSpriteSheet } from '../utils';

interface SpriteAnalyzerProps {
  frames: Frame[];
  settings: SpriteSheetSettings;
  focusedFrameId: string | null;
  onBack: () => void;
  onSettingsChange: (settings: SpriteSheetSettings) => void;
  onUpdateFrameOffset: (id: string, x: number, y: number) => void;
  onFocusFrame: (id: string) => void;
  onUndo: () => void;
  canUndo: boolean;
}

export function SpriteAnalyzer({
  frames,
  settings,
  focusedFrameId,
  onBack,
  onSettingsChange,
  onUpdateFrameOffset,
  onFocusFrame,
  onUndo,
  canUndo
}: SpriteAnalyzerProps) {
  const [copied, setCopied] = useState(false);
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isDraggingGuide, setIsDraggingGuide] = useState(false);
  const timerRef = useRef<number | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  const focusedFrame = frames.find(f => f.id === focusedFrameId) || frames[0];
  const focusedIndex = frames.findIndex(f => f.id === focusedFrameId);

  useEffect(() => {
    if (isPlaying && frames.length > 0) {
      const currentFrame = frames[currentIndex];
      const duration = (1000 / settings.fps) * (currentFrame?.durationMultiplier || 1);
      
      timerRef.current = window.setTimeout(() => {
        setCurrentIndex((prev) => (prev >= frames.length - 1 ? 0 : prev + 1));
      }, duration);
    } else {
      if (timerRef.current) clearTimeout(timerRef.current);
    }

    return () => {
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, [isPlaying, frames.length, settings.fps, currentIndex, frames]);

  const handleCopyCode = () => {
    const code = generateSpriteCode();
    navigator.clipboard.writeText(code);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const generateSpriteCode = () => {
    const sheetWidth = settings.columns * (settings.frameSize.width + settings.padding * 2);
    const sheetHeight = Math.ceil(frames.length / settings.columns) * (settings.frameSize.height + settings.padding * 2);
    
    return `// Spritesheet: spritesheet.png
// Size: ${sheetWidth}x${sheetHeight}
// Frames: ${frames.length}
// Frame Size: ${settings.frameSize.width}x${settings.frameSize.height}

this.load.spritesheet('sprite_key', 'spritesheet.png', {
  frameWidth: ${settings.frameSize.width},
  frameHeight: ${settings.frameSize.height},
  margin: ${settings.padding},
  spacing: ${settings.padding * 2}
});

// Individual Frame Offsets:
${frames.map((f, i) => f.offset.x !== 0 || f.offset.y !== 0 ? `// Frame ${i}: offset { x: ${f.offset.x}, y: ${f.offset.y} }` : '').filter(Boolean).join('\n')}`;
  };

  const navigateFrame = (delta: number) => {
    const nextIndex = (focusedIndex + delta + frames.length) % frames.length;
    onFocusFrame(frames[nextIndex].id);
  };

  const previousFrame = focusedIndex > 0 ? frames[focusedIndex - 1] : null;

  const handleDownloadSheet = async () => {
    const dataUrl = await generateSpriteSheet(frames, settings);
    const link = document.createElement('a');
    link.download = 'spritesheet.png';
    link.href = dataUrl;
    link.click();
  };

  const toggleGridMode = () => {
    const modes: ('none' | 'grid' | 'guide')[] = ['none', 'grid', 'guide'];
    const currentIdx = modes.indexOf(settings.guideMode);
    const nextMode = modes[(currentIdx + 1) % modes.length];
    onSettingsChange({ ...settings, guideMode: nextMode });
  };

  const handleGuideMouseDown = (e: React.MouseEvent) => {
    if (settings.guideMode === 'guide') {
      setIsDraggingGuide(true);
    }
  };

  const handleMouseMove = (e: React.MouseEvent) => {
    if (isDraggingGuide && containerRef.current) {
      const rect = containerRef.current.getBoundingClientRect();
      
      // Calculate percentage relative to the frame's actual bounding box on screen
      const relX = ((e.clientX - rect.left) / rect.width) * 100;
      const relY = ((e.clientY - rect.top) / rect.height) * 100;
      
      onSettingsChange({
        ...settings,
        guidePosition: { 
          // Allow guide to move outside the frame for better alignment reference
          x: Math.max(-50, Math.min(150, relX)), 
          y: Math.max(-50, Math.min(150, relY)) 
        }
      });
    }
  };

  const handleMouseUp = () => {
    setIsDraggingGuide(false);
  };

  const currentPreviewFrame = isPlaying ? frames[currentIndex] : focusedFrame;

  return (
    <div className="h-screen w-screen bg-[#0a0a0a] text-zinc-100 flex flex-col overflow-hidden">
      {/* Header */}
      <header className="h-14 border-b border-zinc-800 flex items-center justify-between px-4 bg-zinc-950/50 backdrop-blur-xl z-10">
        <div className="flex items-center gap-4">
          <button 
            onClick={onBack}
            className="p-2 hover:bg-zinc-800 rounded-lg transition-colors text-zinc-400 hover:text-white"
          >
            <ArrowLeft size={20} />
          </button>
          <div className="h-6 w-px bg-zinc-800" />
          <div className="flex items-center gap-2">
            <span className="text-sm font-bold tracking-tight">Sprite Analyzer</span>
            <span className="px-1.5 py-0.5 bg-purple-500/10 text-purple-500 text-[10px] font-black rounded uppercase">Pro</span>
          </div>
        </div>

        <div className="flex items-center gap-2">
          {/* Controls moved to floating panel */}
        </div>
      </header>

      <div className="flex-1 flex overflow-hidden relative">
        {/* Floating Controls Panel */}
        <div className="absolute top-6 right-86 z-20 flex items-center gap-2 bg-zinc-950/80 backdrop-blur-md p-1.5 rounded-2xl border border-zinc-800 shadow-2xl">
          <button 
            onClick={onUndo}
            disabled={!canUndo}
            className={`p-2 rounded-xl transition-all ${canUndo ? 'text-zinc-400 hover:bg-zinc-800 hover:text-white' : 'text-zinc-800 cursor-not-allowed'}`}
            title="Undo (Ctrl+Z)"
          >
            <Undo2 size={18} />
          </button>
          
          <div className="h-4 w-px bg-zinc-800 mx-1" />

          <div className="flex items-center bg-zinc-900/50 rounded-xl p-1 border border-zinc-800/50">
            <button 
              onClick={() => onSettingsChange({ ...settings, analyzerZoom: Math.max(50, settings.analyzerZoom - 25) })}
              className="p-1.5 hover:bg-zinc-800 rounded-lg text-zinc-400"
            >
              <ZoomOut size={16} />
            </button>
            <span className="text-[10px] font-mono font-bold w-12 text-center text-zinc-500">
              {settings.analyzerZoom}%
            </span>
            <button 
              onClick={() => onSettingsChange({ ...settings, analyzerZoom: Math.min(800, settings.analyzerZoom + 25) })}
              className="p-1.5 hover:bg-zinc-800 rounded-lg text-zinc-400"
            >
              <ZoomIn size={16} />
            </button>
          </div>

          <button 
            onClick={toggleGridMode}
            className={`p-2 rounded-xl border transition-all flex items-center gap-2 ${settings.guideMode !== 'none' ? 'bg-purple-600/10 border-purple-500/50 text-purple-400' : 'bg-zinc-900 border-zinc-800 text-zinc-500'}`}
            title={`Mode: ${settings.guideMode}`}
          >
            {settings.guideMode === 'grid' ? <Grid size={18} /> : settings.guideMode === 'guide' ? <Target size={18} /> : <Grid size={18} className="opacity-40" />}
            <span className="text-[10px] font-bold uppercase tracking-widest pr-1">
              {settings.guideMode === 'none' ? 'Off' : settings.guideMode}
            </span>
          </button>

          <div className="flex items-center gap-2">
            <button 
              onClick={() => onSettingsChange({ ...settings, showOnionSkin: !settings.showOnionSkin })}
              className={`p-2 rounded-xl border transition-all flex items-center gap-2 ${settings.showOnionSkin ? 'bg-blue-600/10 border-blue-500/50 text-blue-400' : 'bg-zinc-900 border-zinc-800 text-zinc-500'}`}
              title="Onion Skin"
            >
              <Layers size={18} />
              <span className="text-[10px] font-bold uppercase tracking-widest pr-1">
                Onion
              </span>
            </button>

            {settings.showOnionSkin && (
              <div className="flex items-center gap-2 bg-zinc-900/50 rounded-xl px-3 py-1.5 border border-zinc-800/50">
                <span className="text-[10px] font-bold text-zinc-500 uppercase">Opacity</span>
                <input 
                  type="range" 
                  min="0" 
                  max="100" 
                  value={settings.onionOpacity}
                  onChange={(e) => onSettingsChange({ ...settings, onionOpacity: parseInt(e.target.value) })}
                  className="w-24 h-1.5 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500"
                />
                <span className="text-[10px] font-mono text-zinc-400 w-8">{settings.onionOpacity}%</span>
              </div>
            )}
          </div>
        </div>

        {/* Main Preview View (Focused Frame / Animation) */}
        <div 
          className="flex-1 relative overflow-auto custom-scrollbar bg-[#050505] checkerboard-dark"
          onMouseMove={handleMouseMove}
          onMouseUp={handleMouseUp}
          onMouseLeave={handleMouseUp}
        >
          <div className="min-h-full min-w-full flex items-center justify-center p-40">
            <div 
              ref={containerRef}
              className="relative transition-transform duration-200"
              style={{ 
                transform: `scale(${settings.analyzerZoom / 100})`,
                width: settings.frameSize.width,
                height: settings.frameSize.height
              }}
            >
              {/* Extended Grid Overlay (Covers more area) */}
              {settings.guideMode === 'grid' && (
                <div className="absolute top-[-200%] left-[-200%] right-[-200%] bottom-[-200%] pointer-events-none z-40">
                  {/* Main Frame Border */}
                  <div className="absolute top-[40%] left-[40%] w-[20%] h-[20%] border-2 border-purple-500 shadow-[0_0_10px_rgba(168,85,247,0.5)]" 
                    style={{ width: settings.frameSize.width, height: settings.frameSize.height, top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}
                  />
                  
                  {/* Full Area Grid */}
                  <div 
                    className="absolute inset-0 opacity-20" 
                    style={{ 
                      backgroundImage: 'linear-gradient(to right, #a855f7 1px, transparent 1px), linear-gradient(to bottom, #a855f7 1px, transparent 1px)', 
                      backgroundSize: '32px 32px' 
                    }} 
                  />
                  
                  {/* Center Crosshair for the frame */}
                  <div className="absolute top-1/2 left-0 right-0 h-px bg-purple-500/30" />
                  <div className="absolute left-1/2 top-0 bottom-0 w-px bg-purple-500/30" />
                </div>
              )}

              {/* Guide Overlay (Extended Range) */}
              {settings.guideMode === 'guide' && (
                <div 
                  className="absolute top-[-50%] left-[-50%] right-[-50%] bottom-[-50%] pointer-events-none z-30"
                  onMouseDown={handleGuideMouseDown}
                  style={{ cursor: isDraggingGuide ? 'grabbing' : 'grab', pointerEvents: 'all' }}
                >
                  {/* Vertical Line */}
                  <div 
                    className="absolute top-0 bottom-0 w-px bg-purple-400 shadow-[0_0_8px_rgba(168,85,247,0.6)]"
                    style={{ left: `${25 + settings.guidePosition.x / 2}%` }}
                  />
                  {/* Horizontal Line (Bottom of T) */}
                  <div 
                    className="absolute left-0 right-0 h-px bg-purple-400 shadow-[0_0_8px_rgba(168,85,247,0.6)]"
                    style={{ top: `${25 + settings.guidePosition.y / 2}%` }}
                  />
                  {/* Center Handle */}
                  <div 
                    className="absolute w-6 h-6 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center group/handle"
                    style={{ left: `${25 + settings.guidePosition.x / 2}%`, top: `${25 + settings.guidePosition.y / 2}%` }}
                  >
                    <div className="w-4 h-4 bg-purple-500 rounded-full shadow-[0_0_15px_rgba(168,85,247,0.8)] border-2 border-white transition-transform group-active/handle:scale-125" />
                  </div>
                </div>
              )}

              {/* Frame Image */}
              <div className="relative w-full h-full flex items-center justify-center border border-zinc-700/50">
                {/* Onion Skin (Previous Frame) - Now 100% visible underneath */}
                {settings.showOnionSkin && previousFrame && !isPlaying && (
                  <img
                    src={previousFrame.url}
                    alt="Onion Skin"
                    className="absolute max-w-none object-contain pointer-events-none grayscale sepia"
                    style={{
                      transform: `translate(${previousFrame.offset.x}px, ${previousFrame.offset.y}px)`,
                      imageRendering: 'pixelated',
                      zIndex: 1,
                      opacity: 1
                    }}
                    referrerPolicy="no-referrer"
                  />
                )}

                {/* Current Frame - Now with variable opacity */}
                <img
                  src={currentPreviewFrame?.url}
                  alt="Preview"
                  className="max-w-none object-contain relative"
                  style={{
                    transform: `translate(${currentPreviewFrame?.offset.x}px, ${currentPreviewFrame?.offset.y}px)`,
                    imageRendering: 'pixelated',
                    zIndex: 2,
                    opacity: settings.showOnionSkin ? settings.onionOpacity / 100 : 1
                  }}
                  referrerPolicy="no-referrer"
                />
              </div>
            </div>
          </div>

          {/* Playback Controls Overlay */}
          <div className="absolute bottom-10 left-1/2 -translate-x-1/2 flex items-center gap-4 bg-zinc-950/80 backdrop-blur-md px-6 py-3 rounded-2xl border border-zinc-800 shadow-2xl z-20">
            <button 
              onClick={() => setIsPlaying(!isPlaying)}
              className="w-10 h-10 flex items-center justify-center bg-purple-600 text-white rounded-full hover:bg-purple-500 transition-all shadow-lg shadow-purple-600/20"
            >
              {isPlaying ? <Pause size={20} /> : <Play size={20} className="ml-0.5" />}
            </button>
            
            <div className="h-4 w-px bg-zinc-800 mx-2" />
            
            <div className="flex items-center gap-1 bg-zinc-900 rounded-lg p-1 border border-zinc-800">
              <button 
                onClick={() => { setIsPlaying(false); navigateFrame(-1); }} 
                className="p-1.5 hover:bg-zinc-800 rounded text-zinc-400"
              >
                <ChevronLeft size={18} />
              </button>
              <span className="text-[10px] font-mono font-bold w-16 text-center text-zinc-500">
                {focusedIndex + 1} / {frames.length}
              </span>
              <button 
                onClick={() => { setIsPlaying(false); navigateFrame(1); }} 
                className="p-1.5 hover:bg-zinc-800 rounded text-zinc-400"
              >
                <ChevronRight size={18} />
              </button>
            </div>
          </div>
        </div>

        {/* Sidebar */}
        <div className="w-80 bg-zinc-950 border-l border-zinc-800 flex flex-col overflow-hidden">
          {/* Thumbnails Grid (Sheet View moved here) */}
          <div className="flex-1 flex flex-col min-h-0">
            <div className="p-4 border-b border-zinc-800 flex items-center justify-between bg-zinc-900/20">
              <span className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Spritesheet Grid</span>
              <div className="flex items-center gap-2">
                <span className="text-[10px] font-mono text-zinc-600">{settings.columns} cols</span>
              </div>
            </div>
            
            <div className="flex-1 overflow-auto custom-scrollbar p-4">
              <div 
                className="grid gap-2"
                style={{ 
                  gridTemplateColumns: `repeat(2, 1fr)`
                }}
              >
                {frames.map((frame, i) => (
                  <div 
                    key={frame.id}
                    onClick={() => {
                      setIsPlaying(false);
                      onFocusFrame(frame.id);
                    }}
                    className={`
                      relative aspect-square rounded-lg border overflow-hidden cursor-pointer transition-all group
                      ${focusedFrameId === frame.id ? 'ring-2 ring-purple-500 border-transparent' : 'border-zinc-800 hover:border-zinc-700'}
                    `}
                  >
                    <img
                      src={frame.url}
                      alt={`Frame ${i}`}
                      className={`w-full h-full object-contain checkerboard ${focusedFrameId !== frame.id && 'opacity-60'}`}
                      referrerPolicy="no-referrer"
                    />
                    <div className="absolute bottom-1 left-1 px-1 py-0.5 bg-black/60 rounded text-[8px] font-mono text-white/50">
                      {i}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Sidebar Navigation Buttons */}
          <div className="p-4 border-t border-zinc-800 bg-zinc-900/10 flex gap-2">
            <button 
              onClick={() => { setIsPlaying(false); navigateFrame(-1); }}
              className="flex-1 py-2.5 bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-xl text-[10px] font-bold text-zinc-400 flex items-center justify-center gap-2 transition-all active:scale-95"
            >
              <ChevronLeft size={14} />
              Previous Frame
            </button>
            <button 
              onClick={() => { setIsPlaying(false); navigateFrame(1); }}
              className="flex-1 py-2.5 bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-xl text-[10px] font-bold text-zinc-400 flex items-center justify-center gap-2 transition-all active:scale-95"
            >
              Next Frame
              <ChevronRight size={14} />
            </button>
          </div>

          {/* Alignment Controls */}
          <div className="p-4 border-t border-zinc-800 space-y-4 bg-zinc-900/10">
            <div className="flex items-center justify-between text-[10px] font-bold text-zinc-500 uppercase tracking-widest">
              <div className="flex items-center gap-2">
                <Target size={12} />
                Alignment
              </div>
              <div className="flex items-center gap-2 font-mono">
                <span className="text-purple-500">{focusedFrame?.offset.x}</span>
                <span className="text-zinc-700">,</span>
                <span className="text-purple-500">{focusedFrame?.offset.y}</span>
              </div>
            </div>

            <div className="grid grid-cols-3 gap-2 max-w-[140px] mx-auto">
              <div />
              <button 
                onClick={() => onUpdateFrameOffset(focusedFrame.id, 0, -1)}
                className="aspect-square bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-lg flex items-center justify-center text-zinc-400 hover:text-white transition-all active:scale-90"
              >
                <ChevronUp size={20} />
              </button>
              <div />
              <button 
                onClick={() => onUpdateFrameOffset(focusedFrame.id, -1, 0)}
                className="aspect-square bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-lg flex items-center justify-center text-zinc-400 hover:text-white transition-all active:scale-90"
              >
                <ChevronLeft size={20} />
              </button>
              <div className="aspect-square bg-zinc-950 border border-zinc-800 rounded-lg flex items-center justify-center">
                <div className="w-1 h-1 bg-purple-500 rounded-full" />
              </div>
              <button 
                onClick={() => onUpdateFrameOffset(focusedFrame.id, 1, 0)}
                className="aspect-square bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-lg flex items-center justify-center text-zinc-400 hover:text-white transition-all active:scale-90"
              >
                <ChevronRight size={20} />
              </button>
              <div />
              <button 
                onClick={() => onUpdateFrameOffset(focusedFrame.id, 0, 1)}
                className="aspect-square bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-lg flex items-center justify-center text-zinc-400 hover:text-white transition-all active:scale-90"
              >
                <ChevronDown size={20} />
              </button>
              <div />
            </div>
          </div>

          {/* Export & Code */}
          <div className="p-4 border-t border-zinc-800 space-y-4">
            <div className="space-y-2">
              <button 
                onClick={handleDownloadSheet}
                className="w-full py-3 bg-purple-600 hover:bg-purple-500 text-white rounded-xl text-xs font-bold flex items-center justify-center gap-2 shadow-lg shadow-purple-600/20 transition-all"
              >
                <Download size={16} />
                Sheet ({frames.length} frames)
              </button>
            </div>

            <div className="flex items-center justify-between">
              <span className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Sprite Code</span>
              <button 
                onClick={handleCopyCode}
                className="p-1.5 hover:bg-zinc-800 rounded text-zinc-500 hover:text-zinc-300 transition-colors"
              >
                {copied ? <Check size={14} className="text-green-500" /> : <Copy size={14} />}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}