import React, { useState, useRef, useEffect, useMemo } from 'react';
import { Play, Pause, Download, Music, Type, Check, Video, Mic2, RefreshCw, Save, SkipForward, Rewind, Sparkles, Image as ImageIcon, Settings, Sliders, MoveVertical, Type as TypeIcon, Circle, BarChart2, Clock } from 'lucide-react';

const KaraokeApp = () => {
  // --- State Management ---
  const [step, setStep] = useState(1); // 1: Setup, 2: Sync, 3: Preview/Export
  const [audioFile, setAudioFile] = useState(null);
  const [audioUrl, setAudioUrl] = useState(null);
  
  // Background State (Now supports multiple)
  const [bgFiles, setBgFiles] = useState([]);
  const [bgUrls, setBgUrls] = useState([]);
  
  const [lyricsText, setLyricsText] = useState("ช้าง ช้าง ช้าง\nน้องเคยเห็นช้างหรือเปล่า\nช้างมันตัวโตไม่เบา\nจมูกยาวๆ เรียกว่างวง\nมีเขี้ยวใต้งวง เรียกว่างา\nมีหู มีตา หางยาว");
  const [parsedLyrics, setParsedLyrics] = useState([]);
  const [syncData, setSyncData] = useState([]); 
  
  // Customization Settings
  const [styles, setStyles] = useState({
      fontSize: 80,
      fontFamily: 'Kanit',
      textColor: '#ffffff',
      highlightColor1: '#f472b6', // Pink
      highlightColor2: '#fbbf24', // Amber
      showVisualizer: true,
      visualizerType: 'bar', // 'bar' or 'circle'
      showParticles: true,
      overlayOpacity: 0.5,
      verticalOffset: 0,
      strokeWidth: 6,
      slideshowSpeed: 5 // Seconds per slide
  });

  const fontOptions = [
      { name: 'Kanit', label: 'Kanit (มาตรฐาน)' },
      { name: 'Mali', label: 'Mali (ลายมือน่ารัก)' },
      { name: 'Sarabun', label: 'Sarabun (ทางการ)' },
      { name: 'Charm', label: 'Charm (ไทยวิจิตร)' },
      { name: 'Chakra Petch', label: 'Chakra Petch (ล้ำยุค)' }
  ];

  // Syncing State
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentLineIndex, setCurrentLineIndex] = useState(-1);
  const audioRef = useRef(null);
  
  // Images Ref (Store loaded HTMLImageElements)
  const bgImagesRef = useRef([]); 
  
  // Audio Analysis
  const audioContextRef = useRef(null);
  const analyserRef = useRef(null);
  
  // Canvas / Export
  const canvasRef = useRef(null);
  const [isRecording, setIsRecording] = useState(false);
  const mediaRecorderRef = useRef(null);
  const chunksRef = useRef([]);
  const [countdown, setCountdown] = useState(0);

  // Load Fonts
  useEffect(() => {
      const link = document.createElement('link');
      link.href = 'https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&family=Charm:wght@400;700&family=Kanit:wght@400;900&family=Mali:wght@400;700&family=Sarabun:wght@400;800&display=swap';
      link.rel = 'stylesheet';
      document.head.appendChild(link);
      return () => document.head.removeChild(link);
  }, []);

  // Preload Images when URLs change
  useEffect(() => {
    if (bgUrls.length > 0) {
        bgImagesRef.current = bgUrls.map(url => {
            const img = new Image();
            img.src = url;
            return img;
        });
    } else {
        bgImagesRef.current = [];
    }
  }, [bgUrls]);

  // --- Audio Setup ---
  const setupAudioContext = () => {
    if (!audioContextRef.current && audioRef.current) {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        const ctx = new AudioContext();
        const analyser = ctx.createAnalyser();
        analyser.fftSize = 256; 
        
        try {
            const source = ctx.createMediaElementSource(audioRef.current);
            source.connect(analyser);
            analyser.connect(ctx.destination);
            audioContextRef.current = ctx;
            analyserRef.current = analyser;
        } catch (e) {
            console.error("Audio Context Error:", e);
        }
    }
    if (audioContextRef.current && audioContextRef.current.state === 'suspended') {
        audioContextRef.current.resume();
    }
  };

  // --- Step 1: Logic ---
  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      setAudioFile(file);
      setAudioUrl(URL.createObjectURL(file));
      if (audioContextRef.current) {
          audioContextRef.current.close();
          audioContextRef.current = null;
      }
    }
  };

  const handleBgUpload = (e) => {
    const files = Array.from(e.target.files);
    if (files.length > 0) {
        setBgFiles(files);
        const urls = files.map(file => URL.createObjectURL(file));
        setBgUrls(urls);
    }
  };

  const handleStartSync = () => {
    const lines = lyricsText.split('\n').filter(line => line.trim() !== '');
    setParsedLyrics(lines);
    setSyncData(lines.map(line => ({ text: line, startTime: null, endTime: null })));
    setCurrentLineIndex(-1);
    setStep(2);
    setTimeout(setupAudioContext, 100);
  };

  // --- Step 2: Logic (Syncing) ---
  const togglePlay = () => {
    if (!audioRef.current) return;
    setupAudioContext();
    if (isPlaying) audioRef.current.pause();
    else audioRef.current.play();
    setIsPlaying(!isPlaying);
  };

  const recordTiming = () => {
    if (!isPlaying || currentLineIndex >= parsedLyrics.length) return;
    const currentTime = audioRef.current.currentTime;
    
    // Set End Time for previous line
    if (currentLineIndex >= 0) {
        setSyncData(prev => {
            const newData = [...prev];
            if (newData[currentLineIndex] && newData[currentLineIndex].endTime === null) {
                 newData[currentLineIndex].endTime = currentTime;
            }
            return newData;
        });
    }

    // Set Start Time for next line
    const nextIndex = currentLineIndex + 1;
    if (nextIndex < parsedLyrics.length) {
       setSyncData(prev => {
         const newData = [...prev];
         newData[nextIndex].startTime = currentTime;
         return newData;
       });
       setCurrentLineIndex(nextIndex);
    } else {
       setCurrentLineIndex(nextIndex); 
    }
  };

  // Sync Shortcuts
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (step === 2 && (e.code === 'Space' || e.code === 'Enter')) {
        e.preventDefault(); 
        if (!isPlaying && currentLineIndex === -1) togglePlay();
        else recordTiming();
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [step, isPlaying, currentLineIndex, parsedLyrics]);


  const resetSync = () => {
    if (audioRef.current) {
        audioRef.current.pause();
        audioRef.current.currentTime = 0;
    }
    setIsPlaying(false);
    setCurrentLineIndex(-1);
    setSyncData(parsedLyrics.map(line => ({ text: line, startTime: null, endTime: null })));
  };

  const finishSync = () => {
    if (syncData.length > 0 && currentLineIndex > 0) {
         setSyncData(prev => {
             const newData = [...prev];
             const lastIdx = Math.min(currentLineIndex, newData.length - 1);
             if (!newData[lastIdx].endTime) {
                newData[lastIdx].endTime = audioRef.current ? audioRef.current.duration : newData[lastIdx].startTime + 5;
             }
             return newData;
         });
    }
    if (audioRef.current) {
        audioRef.current.pause();
        setIsPlaying(false);
    }
    setStep(3);
  };

  // --- Step 3: Rendering Logic ---
  
  // Particles
  const particles = useMemo(() => {
      return Array.from({ length: 60 }).map(() => ({
          x: Math.random() * 1920,
          y: Math.random() * 1080,
          size: Math.random() * 3 + 1,
          speed: Math.random() * 0.8 + 0.1,
          opacity: Math.random() * 0.5 + 0.1
      }));
  }, []);

  useEffect(() => {
    if (step !== 3 || !canvasRef.current) return;

    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    let animationFrameId;

    const bufferLength = analyserRef.current ? analyserRef.current.frequencyBinCount : 0;
    const dataArray = new Uint8Array(bufferLength);

    const render = () => {
      if (!audioRef.current) return;
      const currentTime = audioRef.current.currentTime;
      
      if (analyserRef.current) analyserRef.current.getByteFrequencyData(dataArray);

      // 1. Background (Slideshow Logic)
      if (bgImagesRef.current.length > 0) {
          // Calculate which image to show based on time
          const slideDuration = styles.slideshowSpeed;
          const imgIndex = Math.floor(currentTime / slideDuration) % bgImagesRef.current.length;
          const img = bgImagesRef.current[imgIndex];

          if (img && img.complete) {
              const scale = Math.max(canvas.width / img.width, canvas.height / img.height);
              const x = (canvas.width / 2) - (img.width / 2) * scale;
              const y = (canvas.height / 2) - (img.height / 2) * scale;
              ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
          }
          
          // Overlay
          ctx.fillStyle = `rgba(0, 0, 0, ${styles.overlayOpacity})`;
          ctx.fillRect(0, 0, canvas.width, canvas.height);
      } else {
          // Default Gradient
          const gradient = ctx.createRadialGradient(960, 540, 0, 960, 540, 1000);
          gradient.addColorStop(0, '#312e81');
          gradient.addColorStop(1, '#0f172a');
          ctx.fillStyle = gradient;
          ctx.fillRect(0, 0, canvas.width, canvas.height);
      }

      // 2. Particles
      if (styles.showParticles) {
          ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
          particles.forEach(p => {
              p.y -= p.speed;
              if (p.y < 0) p.y = canvas.height;
              ctx.beginPath();
              ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
              ctx.fill();
          });
      }

      // 3. Visualizer
      if (styles.showVisualizer && analyserRef.current) {
        if (styles.visualizerType === 'circle') {
            // CIRCULAR VISUALIZER
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2 + styles.verticalOffset;
            const radius = 350; 
            
            ctx.beginPath();
            for (let i = 0; i < bufferLength; i++) {
                const barHeight = (dataArray[i] / 255) * 150;
                const rad = (i / bufferLength) * Math.PI * 2;
                const x = centerX + Math.cos(rad) * (radius + barHeight);
                const y = centerY + Math.sin(rad) * (radius + barHeight);
                
                if (i === 0) ctx.moveTo(x, y);
                else ctx.lineTo(x, y);
            }
            ctx.closePath();
            ctx.lineWidth = 4;
            ctx.strokeStyle = `rgba(255, 255, 255, 0.2)`;
            ctx.stroke();
            
             ctx.beginPath();
            for (let i = 0; i < bufferLength; i+=2) {
                const barHeight = (dataArray[i] / 255) * 200;
                const rad = (i / bufferLength) * Math.PI * 2;
                const x = centerX + Math.cos(rad) * (radius + barHeight + 20);
                const y = centerY + Math.sin(rad) * (radius + barHeight + 20);
                if (i === 0) ctx.moveTo(x, y);
                else ctx.lineTo(x, y);
            }
            ctx.closePath();
            ctx.strokeStyle = styles.highlightColor1;
            ctx.lineWidth = 2;
            ctx.stroke();

        } else {
            // BAR VISUALIZER
            const barWidth = (canvas.width / bufferLength) * 2.5;
            let barX = 0;
            for (let i = 0; i < bufferLength; i++) {
                const barHeight = (dataArray[i] / 255) * 250;
                const barGrad = ctx.createLinearGradient(0, canvas.height - barHeight, 0, canvas.height);
                barGrad.addColorStop(0, styles.highlightColor1);
                barGrad.addColorStop(1, styles.highlightColor2);
                ctx.fillStyle = barGrad;
                ctx.fillRect(barX, canvas.height - barHeight, barWidth, barHeight);
                barX += barWidth + 1;
            }
        }
      }

      // 4. Lyrics
      const activeIdx = syncData.findIndex(line => 
        line.startTime <= currentTime && (line.endTime === null || line.endTime > currentTime)
      );

      let displayIdx = activeIdx;
      if (displayIdx === -1) {
          displayIdx = syncData.findIndex(line => line.startTime > currentTime);
          if (displayIdx === -1) displayIdx = syncData.length; 
          displayIdx = displayIdx - 1; 
      }
      
      const centerX = canvas.width / 2;
      const centerY = (canvas.height / 2) + styles.verticalOffset; 
      const lineHeight = styles.fontSize * 1.6;

      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.font = `bold ${styles.fontSize}px "${styles.fontFamily}", sans-serif`;
      ctx.lineWidth = styles.strokeWidth;
      ctx.lineJoin = 'round';

      const drawLine = (text, x, y, type, progress = 0) => {
        if (type === 'active') {
             // Outline
             ctx.strokeStyle = 'black';
             ctx.strokeText(text, x, y);

             // Base Text
            ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
            ctx.fillText(text, x, y);

            // Karaoke Wipe
            ctx.save();
            const textWidth = ctx.measureText(text).width;
            const startX = x - (textWidth / 2);
            
            ctx.beginPath();
            ctx.rect(startX - 10, y - styles.fontSize, (textWidth * progress) + 10, styles.fontSize * 2);
            ctx.clip();
            
            // Gradient Fill
            const textGrad = ctx.createLinearGradient(startX, y, startX + textWidth, y);
            textGrad.addColorStop(0, styles.highlightColor1);
            textGrad.addColorStop(1, styles.highlightColor2);
            ctx.fillStyle = textGrad;
            
            ctx.fillText(text, x, y);
            
            // Glow
            ctx.shadowColor = styles.highlightColor1;
            ctx.shadowBlur = 15;
            ctx.strokeText(text, x, y);
            ctx.fillText(text, x, y);
            ctx.restore();
            
            ctx.shadowBlur = 0;

        } else if (type === 'past') {
            ctx.font = `bold ${styles.fontSize * 0.8}px "${styles.fontFamily}", sans-serif`;
            ctx.fillStyle = styles.textColor;
            ctx.globalAlpha = 0.3;
            ctx.strokeStyle = 'black';
            ctx.lineWidth = styles.strokeWidth * 0.8;
            ctx.strokeText(text, x, y);
            ctx.fillText(text, x, y);
            ctx.globalAlpha = 1;
        } else {
            // Future
            ctx.font = `bold ${styles.fontSize * 0.8}px "${styles.fontFamily}", sans-serif`;
            ctx.fillStyle = styles.textColor;
            ctx.globalAlpha = 0.1;
            ctx.fillText(text, x, y);
            ctx.globalAlpha = 1;
        }
      };

      if (syncData[displayIdx - 1]) drawLine(syncData[displayIdx - 1].text, centerX, centerY - lineHeight, 'past');
      
      if (syncData[displayIdx]) {
          const line = syncData[displayIdx];
          let progress = 0;
          if (activeIdx === displayIdx) {
              const duration = (line.endTime || (line.startTime + 5)) - line.startTime;
              const elapsed = currentTime - line.startTime;
              progress = Math.min(1, Math.max(0, elapsed / duration));
          } else if (currentTime > (line.endTime || 0)) progress = 1;
          
          drawLine(line.text, centerX, centerY, activeIdx === displayIdx ? 'active' : (currentTime > line.startTime ? 'past' : 'future'), progress);
      } else if (displayIdx === -1 && syncData[0]) {
           drawLine(syncData[0].text, centerX, centerY, 'future');
      }

      if (syncData[displayIdx + 1]) drawLine(syncData[displayIdx + 1].text, centerX, centerY + lineHeight, 'future');

      animationFrameId = requestAnimationFrame(render);
    };

    render();
    return () => cancelAnimationFrame(animationFrameId);
  }, [step, isPlaying, syncData, particles, styles, bgUrls]);


  // Recording Logic (Same as before)
  const startRecordingProcess = () => {
    setCountdown(3);
    let count = 3;
    const timer = setInterval(() => {
        count--;
        setCountdown(count);
        if (count === 0) {
            clearInterval(timer);
            startActualRecording();
        }
    }, 1000);
  };

  const startActualRecording = () => {
    if (!canvasRef.current || !audioRef.current) return;
    setupAudioContext();

    const canvasStream = canvasRef.current.captureStream(30);
    let finalStream = canvasStream;
    try {
        const audioStream = audioRef.current.mozCaptureStream ? audioRef.current.mozCaptureStream() : audioRef.current.captureStream();
        if (audioStream) {
            const audioTracks = audioStream.getAudioTracks();
            if (audioTracks.length > 0) finalStream.addTrack(audioTracks[0]);
        }
    } catch (e) { console.warn("Audio capture limited"); }

    const recorder = new MediaRecorder(finalStream, { mimeType: 'video/webm; codecs=vp9' });
    mediaRecorderRef.current = recorder;
    chunksRef.current = [];

    recorder.ondataavailable = (e) => { if (e.data.size > 0) chunksRef.current.push(e.data); };
    recorder.onstop = () => {
      const blob = new Blob(chunksRef.current, { type: 'video/webm' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'karaoke-slideshow.webm';
      a.click();
      setIsRecording(false);
    };

    recorder.start();
    setIsRecording(true);
    audioRef.current.currentTime = 0;
    audioRef.current.play();
    setIsPlaying(true);
  };

  const stopRecording = () => {
    if (mediaRecorderRef.current && isRecording) {
      mediaRecorderRef.current.stop();
      audioRef.current.pause();
      setIsPlaying(false);
    }
  };


  // --- UI Components ---
  return (
    <div className="min-h-screen bg-gray-900 text-white font-sans selection:bg-pink-500 selection:text-white pb-20">
      <header className="border-b border-gray-800 bg-gray-900/50 backdrop-blur-md sticky top-0 z-10">
        <div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Mic2 className="w-6 h-6 text-pink-500" />
            <h1 className="text-xl font-bold bg-gradient-to-r from-pink-500 to-purple-500 bg-clip-text text-transparent">
              Karaoke Studio Pro
            </h1>
          </div>
          <div className="flex gap-2 text-sm text-gray-400">
             <span className={step >= 1 ? "text-pink-400" : ""}>1. ตั้งค่า</span> →
             <span className={step >= 2 ? "text-pink-400" : ""}> 2. จับจังหวะ</span> →
             <span className={step >= 3 ? "text-pink-400" : ""}> 3. ปรับแต่ง & สร้าง</span>
          </div>
        </div>
      </header>

      <main className="max-w-6xl mx-auto px-6 py-8">
        {/* Hidden Elements */}
        <audio ref={audioRef} src={audioUrl} crossOrigin="anonymous" onEnded={() => { setIsPlaying(false); if (isRecording) stopRecording(); }} />
        
        {/* STEP 1: SETUP */}
        {step === 1 && (
          <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500 max-w-4xl mx-auto">
            <div className="grid md:grid-cols-2 gap-6">
              {/* Audio Upload */}
              <div className="bg-gray-800 rounded-xl p-6 border border-gray-700">
                <div className="flex items-center gap-3 mb-4">
                  <Music className="w-5 h-5 text-pink-400" />
                  <h2 className="font-semibold text-lg">1. ไฟล์เพลง</h2>
                </div>
                <div className="relative border-2 border-dashed border-gray-600 rounded-lg p-8 text-center hover:bg-gray-700/50 cursor-pointer">
                  <input type="file" accept="audio/*" onChange={handleFileUpload} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
                  {audioFile ? <div className="text-green-400 font-medium">{audioFile.name}</div> : <span className="text-gray-400">คลิกเพื่ออัปโหลดเพลง (.mp3)</span>}
                </div>
              </div>

              {/* Background Upload (Multiple) */}
              <div className="bg-gray-800 rounded-xl p-6 border border-gray-700">
                <div className="flex items-center gap-3 mb-4">
                  <ImageIcon className="w-5 h-5 text-blue-400" />
                  <h2 className="font-semibold text-lg">2. ภาพพื้นหลัง (เลือกหลายภาพได้)</h2>
                </div>
                <div className="relative border-2 border-dashed border-gray-600 rounded-lg p-8 text-center hover:bg-gray-700/50 cursor-pointer overflow-hidden">
                  <input type="file" accept="image/*" multiple onChange={handleBgUpload} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" />
                  {bgFiles.length > 0 ? (
                      <div className="absolute inset-0 flex flex-col items-center justify-center bg-gray-800/80">
                          <div className="flex -space-x-3 mb-2">
                            {bgUrls.slice(0, 3).map((u, i) => (
                                <img key={i} src={u} className="w-10 h-10 rounded-full border-2 border-white object-cover" alt="" />
                            ))}
                            {bgUrls.length > 3 && <div className="w-10 h-10 rounded-full border-2 border-white bg-gray-700 flex items-center justify-center text-xs">+{bgUrls.length - 3}</div>}
                          </div>
                          <div className="text-green-400 font-medium z-20 drop-shadow-md">
                              เลือกแล้ว {bgFiles.length} ภาพ
                          </div>
                          <div className="text-xs text-gray-400">(จะเล่นวนแบบ Slideshow)</div>
                      </div>
                  ) : <span className="text-gray-400">คลิกเพื่ออัปโหลดภาพ (Ctrl+Click เพื่อเลือกหลายภาพ)</span>}
                </div>
              </div>
            </div>

            <div className="bg-gray-800 rounded-xl p-6 border border-gray-700">
                <div className="flex items-center gap-3 mb-4">
                  <Type className="w-5 h-5 text-purple-400" />
                  <h2 className="font-semibold text-lg">3. เนื้อเพลง</h2>
                </div>
                <textarea
                  value={lyricsText}
                  onChange={(e) => setLyricsText(e.target.value)}
                  placeholder="วางเนื้อเพลงที่นี่..."
                  className="w-full h-40 bg-gray-900 border border-gray-700 rounded-lg p-3 focus:ring-2 focus:ring-pink-500 outline-none text-sm leading-relaxed"
                />
            </div>

            <button 
                onClick={handleStartSync}
                disabled={!audioFile || !lyricsText}
                className="w-full py-4 bg-gradient-to-r from-pink-600 to-purple-600 rounded-xl font-bold text-lg hover:from-pink-500 hover:to-purple-500 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg"
            >
                ถัดไป: จับจังหวะ <SkipForward className="w-5 h-5 inline ml-2" />
            </button>
          </div>
        )}

        {/* STEP 2: SYNCING */}
        {step === 2 && (
          <div className="space-y-6 animate-in fade-in zoom-in-95 duration-500 max-w-4xl mx-auto">
            <div className="bg-gray-800 rounded-xl p-8 border border-gray-700 shadow-2xl text-center relative overflow-hidden min-h-[400px] flex flex-col justify-center">
                 <div className="absolute top-0 left-0 w-full h-1 bg-gray-700">
                    <div className="h-full bg-pink-500 transition-all duration-300" style={{ width: `${((currentLineIndex + 1) / parsedLyrics.length) * 100}%` }} />
                </div>
                
                <h3 className="text-gray-400 text-sm uppercase tracking-wider font-semibold mb-8">
                    {isPlaying ? "เคาะ Spacebar เมื่อถึงท่อนร้อง" : "กดปุ่ม Play เพื่อเริ่ม"}
                </h3>

                <div className="space-y-4">
                    <p className="text-xl text-gray-600 blur-[1px]">{parsedLyrics[currentLineIndex - 1] || "..."}</p>
                    <p className={`text-4xl md:text-5xl font-bold transition-all ${isPlaying && currentLineIndex >= 0 ? 'text-pink-400 scale-105' : 'text-white'}`}>
                        {currentLineIndex === -1 ? "เตรียมตัว..." : (parsedLyrics[currentLineIndex] || "จบเพลง")}
                    </p>
                    <p className="text-xl text-gray-500">{parsedLyrics[currentLineIndex + 1] || "..."}</p>
                </div>

                <div className="flex justify-center items-center gap-6 mt-12">
                    <button onClick={resetSync} className="p-3 rounded-full bg-gray-700 hover:bg-gray-600"><RefreshCw className="w-6 h-6" /></button>
                    <button onClick={togglePlay} className={`w-20 h-20 rounded-full flex items-center justify-center shadow-lg hover:scale-105 ${isPlaying ? 'bg-yellow-500 text-black' : 'bg-green-500 text-white'}`}>
                        {isPlaying ? <Pause className="w-8 h-8" /> : <Play className="w-8 h-8 ml-1" />}
                    </button>
                    <button onClick={recordTiming} disabled={!isPlaying} className="px-8 py-3 rounded-full bg-pink-600 hover:bg-pink-500 disabled:opacity-50 font-bold text-white shadow-lg active:scale-95">
                        Spacebar
                    </button>
                </div>
            </div>
            
            <div className="flex justify-between">
                <button onClick={() => { resetSync(); setStep(1); }} className="text-gray-400 hover:text-white">← ย้อนกลับ</button>
                <button onClick={finishSync} className="px-6 py-2 bg-blue-600 rounded-lg hover:bg-blue-500 flex items-center gap-2">เสร็จสิ้น <Check className="w-4 h-4" /></button>
            </div>
          </div>
        )}

        {/* STEP 3: PREVIEW, CUSTOMIZE & EXPORT */}
        {step === 3 && (
          <div className="grid lg:grid-cols-3 gap-6 animate-in fade-in zoom-in-95 duration-500">
             
             {/* Left: Preview Canvas */}
             <div className="lg:col-span-2 space-y-4">
                <div className="bg-black rounded-xl overflow-hidden shadow-2xl border border-gray-800 relative aspect-video group">
                    <canvas ref={canvasRef} width={1920} height={1080} className="w-full h-full object-contain" />
                    
                    {countdown > 0 && (
                        <div className="absolute inset-0 bg-black/80 flex items-center justify-center z-20">
                            <span className="text-9xl font-bold text-white animate-ping">{countdown}</span>
                        </div>
                    )}

                    {!isRecording && !isPlaying && countdown === 0 && (
                        <div className="absolute inset-0 bg-black/60 flex items-center justify-center backdrop-blur-sm group-hover:bg-black/40 transition-colors cursor-pointer" onClick={togglePlay}>
                            <Play className="w-20 h-20 text-white opacity-80 hover:opacity-100 transition-opacity" />
                        </div>
                    )}
                </div>
                
                {isRecording ? (
                    <button onClick={stopRecording} className="w-full py-4 bg-red-500 hover:bg-red-600 rounded-xl font-bold animate-pulse flex items-center justify-center gap-2 text-lg shadow-red-900/50 shadow-lg">
                        <span className="w-3 h-3 bg-white rounded-full animate-bounce"/> หยุดบันทึก (Recording...)
                    </button>
                ) : (
                    <button onClick={startRecordingProcess} className="w-full py-4 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-400 hover:to-emerald-500 rounded-xl font-bold flex items-center justify-center gap-2 text-lg shadow-lg">
                        <Download className="w-6 h-6" /> บันทึกวีดีโอ (Download Video)
                    </button>
                )}
             </div>

             {/* Right: Customization Panel */}
             <div className="bg-gray-800 rounded-xl border border-gray-700 p-6 flex flex-col h-full overflow-y-auto max-h-[800px]">
                <h3 className="font-bold text-lg mb-6 flex items-center gap-2 border-b border-gray-700 pb-2">
                    <Settings className="w-5 h-5 text-pink-400" /> ปรับแต่ง (Customize)
                </h3>

                <div className="space-y-6 flex-1 pr-2">
                    
                    {/* Font Family */}
                    <div>
                        <label className="text-sm text-gray-400 mb-2 block flex items-center gap-2">
                            <TypeIcon className="w-4 h-4" /> แบบอักษร (Font)
                        </label>
                        <select 
                            value={styles.fontFamily}
                            onChange={(e) => setStyles({...styles, fontFamily: e.target.value})}
                            className="w-full bg-gray-900 border border-gray-700 rounded-lg p-2 text-sm focus:ring-2 focus:ring-pink-500 outline-none"
                        >
                            {fontOptions.map(font => (
                                <option key={font.name} value={font.name}>{font.label}</option>
                            ))}
                        </select>
                    </div>

                    {/* Font Size & Stroke */}
                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="text-xs text-gray-400 mb-1 block">ขนาด ({styles.fontSize}px)</label>
                            <input 
                                type="range" min="40" max="150" 
                                value={styles.fontSize} 
                                onChange={(e) => setStyles({...styles, fontSize: Number(e.target.value)})}
                                className="w-full accent-pink-500 h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                            />
                        </div>
                        <div>
                            <label className="text-xs text-gray-400 mb-1 block">ขอบหนา ({styles.strokeWidth})</label>
                            <input 
                                type="range" min="0" max="15" 
                                value={styles.strokeWidth} 
                                onChange={(e) => setStyles({...styles, strokeWidth: Number(e.target.value)})}
                                className="w-full accent-purple-500 h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                            />
                        </div>
                    </div>

                    {/* Colors */}
                    <div className="grid grid-cols-2 gap-4 pt-2 border-t border-gray-700">
                        <div>
                            <label className="text-xs text-gray-400 mb-1 block">สีไฮไลท์ 1</label>
                            <div className="flex items-center gap-2 bg-gray-900 p-1.5 rounded-lg border border-gray-700">
                                <input 
                                    type="color" value={styles.highlightColor1} 
                                    onChange={(e) => setStyles({...styles, highlightColor1: e.target.value})}
                                    className="w-6 h-6 rounded cursor-pointer bg-transparent border-none"
                                />
                                <span className="text-xs font-mono truncate">{styles.highlightColor1}</span>
                            </div>
                        </div>
                        <div>
                            <label className="text-xs text-gray-400 mb-1 block">สีไฮไลท์ 2</label>
                            <div className="flex items-center gap-2 bg-gray-900 p-1.5 rounded-lg border border-gray-700">
                                <input 
                                    type="color" value={styles.highlightColor2} 
                                    onChange={(e) => setStyles({...styles, highlightColor2: e.target.value})}
                                    className="w-6 h-6 rounded cursor-pointer bg-transparent border-none"
                                />
                                <span className="text-xs font-mono truncate">{styles.highlightColor2}</span>
                            </div>
                        </div>
                    </div>

                    {/* Background Settings */}
                    {bgFiles.length > 0 && (
                        <div className="pt-4 border-t border-gray-700">
                            <label className="text-sm text-gray-400 block mb-2 flex items-center gap-2">
                                <Clock className="w-4 h-4" /> ความเร็ว Slideshow ({styles.slideshowSpeed} วิ)
                            </label>
                             <input 
                                type="range" min="1" max="30" step="1"
                                value={styles.slideshowSpeed} 
                                onChange={(e) => setStyles({...styles, slideshowSpeed: Number(e.target.value)})}
                                className="w-full accent-green-500 h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                            />
                             <div className="pt-2">
                                <label className="text-xs text-gray-400 mb-1 block">ความมืดพื้นหลัง ({Math.round(styles.overlayOpacity * 100)}%)</label>
                                <input 
                                    type="range" min="0" max="1" step="0.1"
                                    value={styles.overlayOpacity} 
                                    onChange={(e) => setStyles({...styles, overlayOpacity: Number(e.target.value)})}
                                    className="w-full accent-gray-500 h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                                />
                            </div>
                        </div>
                    )}

                    {/* Layout & Visuals */}
                     <div className="pt-4 border-t border-gray-700">
                        <label className="text-sm text-gray-400 mb-2 block flex items-center gap-2">
                            <MoveVertical className="w-4 h-4" /> ตำแหน่งเนื้อเพลง (Y-Offset)
                        </label>
                        <input 
                            type="range" min="-300" max="300" 
                            value={styles.verticalOffset} 
                            onChange={(e) => setStyles({...styles, verticalOffset: Number(e.target.value)})}
                            className="w-full accent-blue-500 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer mb-3"
                        />

                        <label className="text-sm text-gray-400 block mb-2">รูปแบบกราฟิก (Visualizer)</label>
                        <div className="flex bg-gray-900 p-1 rounded-lg mb-3">
                            <button 
                                onClick={() => setStyles({...styles, visualizerType: 'bar', showVisualizer: true})}
                                className={`flex-1 flex items-center justify-center gap-1 py-1.5 rounded-md text-xs transition-colors ${styles.visualizerType === 'bar' && styles.showVisualizer ? 'bg-gray-700 text-white' : 'text-gray-500'}`}
                            >
                                <BarChart2 className="w-3 h-3" /> แท่ง
                            </button>
                            <button 
                                onClick={() => setStyles({...styles, visualizerType: 'circle', showVisualizer: true})}
                                className={`flex-1 flex items-center justify-center gap-1 py-1.5 rounded-md text-xs transition-colors ${styles.visualizerType === 'circle' && styles.showVisualizer ? 'bg-gray-700 text-white' : 'text-gray-500'}`}
                            >
                                <Circle className="w-3 h-3" /> วงกลม
                            </button>
                             <button 
                                onClick={() => setStyles({...styles, showVisualizer: false})}
                                className={`flex-1 py-1.5 rounded-md text-xs transition-colors ${!styles.showVisualizer ? 'bg-red-900/50 text-red-200' : 'text-gray-500'}`}
                            >
                                ปิด
                            </button>
                        </div>
                        
                         <label className="flex items-center gap-2 cursor-pointer">
                            <input 
                                type="checkbox" 
                                checked={styles.showParticles}
                                onChange={(e) => setStyles({...styles, showParticles: e.target.checked})}
                                className="rounded bg-gray-700 border-gray-600 text-pink-500 focus:ring-pink-500"
                            />
                            <span className="text-sm text-gray-300">แสดงเอฟเฟคฝุ่น (Particles)</span>
                        </label>
                    </div>

                </div>
                
                <div className="mt-4 pt-4 border-t border-gray-700">
                    <button 
                        onClick={() => { if (audioRef.current) audioRef.current.pause(); setIsPlaying(false); setStep(2); }}
                        className="w-full py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm text-gray-300 hover:text-white transition-colors"
                    >
                        กลับไปแก้ไขจังหวะ
                    </button>
                </div>
             </div>
          </div>
        )}
      </main>
    </div>
  );
};

export default KaraokeApp;