import React, { useState, useRef, useEffect } from 'react';
import { 
  Mic, Play, Download, Volume2, Loader2, Settings2, Info, 
  FileAudio, Wand2, Activity, FastForward, Save,
  Music, MonitorPlay, Video, SlidersHorizontal, Layers, Type, Maximize2, X
} from 'lucide-react';

// Konfigurasi API
const apiKey = "";

// Daftar Suara (Nama telah dilokalisasi agar mudah diingat)
const VOICES = [
  { id: 'Enceladus', name: 'Garda', desc: 'Pria - Suara trailer bioskop, sangat berat & epik' },
  { id: 'Aoede', name: 'Ayu', desc: 'Wanita - Hangat, lembut, dan menenangkan' },
  { id: 'Charon', name: 'Bima', desc: 'Pria - Suara berat, tegas, dan berwibawa' },
  { id: 'Fenrir', name: 'Arya', desc: 'Pria - Kuat, sedikit serak, narasi epik' },
  { id: 'Kore', name: 'Sinta', desc: 'Wanita - Jelas, tenang, dan profesional' },
  { id: 'Puck', name: 'Dika', desc: 'Pria - Ceria, muda, dan energetik' },
  { id: 'Zephyr', name: 'Rian', desc: 'Pria - Santai, kasual, dan bersahabat' },
  { id: 'Leda', name: 'Tari', desc: 'Wanita - Cerah, antusias, dan dinamis' },
  { id: 'Orus', name: 'Surya', desc: 'Pria - Formal, gaya penyiar berita' },
  { id: 'Algieba', name: 'Maya', desc: 'Wanita - Keibuan, ramah, dan peduli' },
  { id: 'Algenib', name: 'Rio', desc: 'Pria - Lugas, to-the-point, praktis' },
  { id: 'Schedar', name: 'Citra', desc: 'Wanita - Tajam, cerdas, percaya diri' },
  { id: 'Gacrux', name: 'Wisnu', desc: 'Pria - Natural, gaya dokumenter alam' },
  { id: 'Zubenelgenubi', name: 'Kevin', desc: 'Pria - Energetik untuk narasi iklan' },
  { id: 'Sulafat', name: 'Nisa', desc: 'Wanita - Rileks, gaya percakapan santai' }
];

const EMOTIONS = [
  { label: 'Normal', value: '' },
  { label: 'Ceria (Cheerfully)', value: 'Say cheerfully: ' },
  { label: 'Semangat (Excitedly)', value: 'Say excitedly: ' },
  { label: 'Sedih (Sadly)', value: 'Say sadly: ' },
  { label: 'Berbisik (Whisper)', value: 'Say in a whisper: ' },
  { label: 'Marah (Angrily)', value: 'Say angrily: ' }
];

// --- FUNGSI UTILITAS AUDIO ---

function pcmToWav(pcmBytes, sampleRate = 24000, numChannels = 1) {
  const buffer = new ArrayBuffer(44 + pcmBytes.length);
  const view = new DataView(buffer);
  const writeString = (view, offset, string) => {
    for (let i = 0; i < string.length; i++) view.setUint8(offset + i, string.charCodeAt(i));
  };
  
  writeString(view, 0, 'RIFF');
  view.setUint32(4, 36 + pcmBytes.length, true);
  writeString(view, 8, 'WAVE');
  writeString(view, 12, 'fmt ');
  view.setUint32(16, 16, true);
  view.setUint16(20, 1, true); 
  view.setUint16(22, numChannels, true);
  view.setUint32(24, sampleRate, true);
  view.setUint32(28, sampleRate * numChannels * 2, true); 
  view.setUint16(32, numChannels * 2, true); 
  view.setUint16(34, 16, true); 
  writeString(view, 36, 'data');
  view.setUint32(40, pcmBytes.length, true);
  
  const dataArray = new Uint8Array(buffer, 44);
  dataArray.set(pcmBytes);
  return new Blob([buffer], { type: 'audio/wav' });
}

function base64ToUint8Array(base64) {
  const binaryString = atob(base64);
  const bytes = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) bytes[i] = binaryString.charCodeAt(i);
  return bytes;
}

function audioBufferToWav(buffer) {
  const numChannels = buffer.numberOfChannels;
  const sampleRate = buffer.sampleRate;
  let result;
  
  if (numChannels === 2) {
    const channel1 = buffer.getChannelData(0);
    const channel2 = buffer.getChannelData(1);
    result = new Int16Array(channel1.length * 2);
    for (let i = 0; i < channel1.length; i++) {
      result[i * 2] = Math.max(-1, Math.min(1, channel1[i])) * 0x7FFF;
      result[i * 2 + 1] = Math.max(-1, Math.min(1, channel2[i])) * 0x7FFF;
    }
  } else {
    const channel1 = buffer.getChannelData(0);
    result = new Int16Array(channel1.length);
    for (let i = 0; i < channel1.length; i++) {
      result[i] = Math.max(-1, Math.min(1, channel1[i])) * 0x7FFF;
    }
  }
  return pcmToWav(new Uint8Array(result.buffer), sampleRate, numChannels);
}

function createReverbBuffer(audioCtx, duration, decay) {
  const sampleRate = audioCtx.sampleRate;
  const length = sampleRate * duration;
  const impulse = audioCtx.createBuffer(2, length, sampleRate);
  const impulseL = impulse.getChannelData(0);
  const impulseR = impulse.getChannelData(1);
  for (let i = 0; i < length; i++) {
    impulseL[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, decay);
    impulseR[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, decay);
  }
  return impulse;
}

async function fetchWithRetry(url, options, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await fetch(url, options);
      if (!response.ok) throw new Error(`API Error: ${response.status}`);
      return await response.json();
    } catch (error) {
      if (i === maxRetries - 1) throw error;
      await new Promise(res => setTimeout(res, 1000 * Math.pow(2, i)));
    }
  }
}

// --- KOMPONEN UTAMA ---
export default function App() {
  const [text, setText] = useState('');
  const [selectedVoice, setSelectedVoice] = useState('Kore');
  const [selectedEmotion, setSelectedEmotion] = useState('');
  const [pitch, setPitch] = useState(1);
  const [playbackRate, setPlaybackRate] = useState(1);
  
  const [aiTempo, setAiTempo] = useState(0); // BARU: State untuk Tempo Bicara AI
  const [reverbIntensity, setReverbIntensity] = useState(0); // Slider Reverb (0 - 1)
  const [bgmFile, setBgmFile] = useState(null);
  const [bgmVolume, setBgmVolume] = useState(0.15); // Default BGM volume 15%
  const [showTeleprompter, setShowTeleprompter] = useState(false);
  const [isRecordingVideo, setIsRecordingVideo] = useState(false);
  
  const [isGenerating, setIsGenerating] = useState(false);
  const [isAssisting, setIsAssisting] = useState(false);
  
  const [audioUrl, setAudioUrl] = useState(null);
  const [errorMsg, setErrorMsg] = useState('');
  
  const audioRef = useRef(null);
  const canvasRef = useRef(null);
  const audioCtxRef = useRef(null);
  const analyserRef = useRef(null);
  const sourceRef = useRef(null);
  const animFrameRef = useRef(null);
  const mediaRecorderRef = useRef(null);
  const textAreaRef = useRef(null); // Tambahan ref untuk textarea

  // Auto-Save
  useEffect(() => {
    const savedDraft = localStorage.getItem('vo_draft');
    if (savedDraft) setText(savedDraft);
  }, []);

  useEffect(() => {
    const timeout = setTimeout(() => localStorage.setItem('vo_draft', text), 1000);
    return () => clearTimeout(timeout);
  }, [text]);

  useEffect(() => {
    if (audioRef.current) audioRef.current.playbackRate = playbackRate;
  }, [playbackRate, audioUrl]);

  // Visualizer Animation
  const setupVisualizer = () => {
    if (!audioRef.current || !canvasRef.current) return;

    if (!audioCtxRef.current) {
      const AudioContext = window.AudioContext || window.webkitAudioContext;
      audioCtxRef.current = new AudioContext();
      analyserRef.current = audioCtxRef.current.createAnalyser();
      analyserRef.current.fftSize = 256;
      
      sourceRef.current = audioCtxRef.current.createMediaElementSource(audioRef.current);
      sourceRef.current.connect(analyserRef.current);
      analyserRef.current.connect(audioCtxRef.current.destination);
    }

    const draw = () => {
      if (!canvasRef.current || !analyserRef.current) return;
      const canvas = canvasRef.current;
      const ctx = canvas.getContext('2d');
      const bufferLength = analyserRef.current.frequencyBinCount;
      const dataArray = new Uint8Array(bufferLength);
      
      analyserRef.current.getByteFrequencyData(dataArray);

      ctx.fillStyle = '#0f172a'; 
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      const barWidth = (canvas.width / bufferLength) * 2.5;
      let barHeight;
      let x = 0;

      for(let i = 0; i < bufferLength; i++) {
        barHeight = dataArray[i] / 2;
        const gradient = ctx.createLinearGradient(0, canvas.height, 0, canvas.height - barHeight);
        gradient.addColorStop(0, '#4f46e5'); 
        gradient.addColorStop(1, '#38bdf8'); 
        ctx.fillStyle = gradient;
        
        ctx.beginPath();
        ctx.roundRect(x, canvas.height - barHeight, barWidth - 1, barHeight, [4, 4, 0, 0]);
        ctx.fill();
        
        x += barWidth;
      }
      animFrameRef.current = requestAnimationFrame(draw);
    };

    draw();
  };

  useEffect(() => {
    return () => {
      if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
      if (audioCtxRef.current) audioCtxRef.current.close();
    };
  }, []);

  // AI Assistant
  const handleAIAssistant = async (mode) => {
    if (!text.trim()) return setErrorMsg('Ketik naskah terlebih dahulu untuk menggunakan AI Assistant.');
    setIsAssisting(true); setErrorMsg('');

    let prompt = '';
    if (mode === 'fix') prompt = `Perbaiki tata bahasa, ejaan, dan tanda baca dari naskah voice over ini. Buat agar nyaman dibaca. Naskah: "${text}"`;
    if (mode === 'persuasive') prompt = `Ubah naskah ini menjadi lebih persuasif, menarik, dan bersemangat untuk kebutuhan konten/iklan. Naskah: "${text}"`;
    if (mode === 'translate') prompt = `Terjemahkan naskah ini ke bahasa Inggris yang natural untuk Voice Over. Naskah: "${text}"`;

    try {
      const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
      const payload = { contents: [{ parts: [{ text: prompt }] }] };
      const result = await fetchWithRetry(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
      const newText = result.candidates?.[0]?.content?.parts?.[0]?.text;
      if (newText) setText(newText);
    } catch (err) {
      setErrorMsg('Gagal memproses naskah dengan AI.');
    } finally { setIsAssisting(false); }
  };

  // Fungsi utilitas untuk menyisipkan teks di posisi kursor
  const insertTextAtCursor = (textToInsert) => {
    if (!textAreaRef.current) return;
    
    const start = textAreaRef.current.selectionStart;
    const end = textAreaRef.current.selectionEnd;
    
    const newText = text.substring(0, start) + textToInsert + text.substring(end);
    setText(newText);
    
    setTimeout(() => {
      textAreaRef.current.focus();
      textAreaRef.current.setSelectionRange(start + textToInsert.length, start + textToInsert.length);
    }, 0);
  };

  // Fungsi untuk menyisipkan tag emosi dengan nama tampilan baru
  const insertEmotionTag = (emotionName) => {
    const currentVoiceName = VOICES.find(v => v.id === selectedVoice)?.name || 'Sinta';
    insertTextAtCursor(`[${currentVoiceName}:${emotionName}] `);
  };

  // Fungsi untuk menyisipkan tag jeda
  const insertJedaTag = (seconds) => {
    insertTextAtCursor(`[jeda:${seconds}] `);
  };

  const getEmotionInstruction = (keyword) => {
    if (!keyword) return '';
    const key = keyword.toLowerCase().trim();
    const map = { 'ceria': 'Say cheerfully: ', 'semangat': 'Say excitedly: ', 'sedih': 'Say sadly: ', 'berbisik': 'Say in a whisper: ', 'marah': 'Say angrily: ', 'normal': '' };
    return map[key] !== undefined ? map[key] : `Say ${key}: `;
  };

  // Parser Pintar (Menerjemahkan nama Sinta/Dika kembali ke bahasa mesin)
  const parseScript = (inputText) => {
    if (!inputText.includes('[')) {
      return [{ type: 'speech', voiceId: selectedVoice, emotion: getEmotionInstruction(selectedEmotion), text: inputText.trim() }];
    }

    const tokens = [];
    const regex = /\[(.*?)\]/g;
    let lastIndex = 0;
    let currentVoiceId = selectedVoice;
    let currentEmotion = getEmotionInstruction(selectedEmotion);
    let match;

    while ((match = regex.exec(inputText)) !== null) {
      // Ambil teks SEBELUM tag
      const textBefore = inputText.substring(lastIndex, match.index).trim();
      if (textBefore) {
        tokens.push({ type: 'speech', voiceId: currentVoiceId, emotion: currentEmotion, text: textBefore });
      }

      // Analisis Tag
      const tagContent = match[1].trim();
      if (tagContent.toLowerCase().startsWith('jeda')) {
        const parts = tagContent.split(':');
        const duration = parseFloat(parts[1]) || 1;
        tokens.push({ type: 'jeda', duration: duration });
      } else {
        const parts = tagContent.split(':');
        const typedName = parts[0].trim();
        
        // Cari karakter berdasarkan nama mudah (misal: "Sinta") atau nama asli mesin
        const matchedVoice = VOICES.find(v => v.name.toLowerCase() === typedName.toLowerCase() || v.id.toLowerCase() === typedName.toLowerCase());
        if (matchedVoice) currentVoiceId = matchedVoice.id;
        
        currentEmotion = parts[1] ? getEmotionInstruction(parts[1]) : '';
      }
      lastIndex = regex.lastIndex;
    }

    // Ambil sisa teks SETELAH tag terakhir
    const remainingText = inputText.substring(lastIndex).trim();
    if (remainingText) {
      tokens.push({ type: 'speech', voiceId: currentVoiceId, emotion: currentEmotion, text: remainingText });
    }

    return tokens;
  };

  // POST-PRODUCTION MIXER
  const applyStudioEffects = async (rawWavBlob, baseSampleRate) => {
    try {
      const AudioContext = window.AudioContext || window.webkitAudioContext;
      const tempCtx = new AudioContext();
      
      const ttsArrayBuffer = await rawWavBlob.arrayBuffer();
      const ttsBuffer = await tempCtx.decodeAudioData(ttsArrayBuffer);

      let bgmBuffer = null;
      if (bgmFile) {
        const bgmArrayBuffer = await bgmFile.arrayBuffer();
        bgmBuffer = await tempCtx.decodeAudioData(bgmArrayBuffer);
      }

      const totalLength = Math.max(ttsBuffer.length, bgmBuffer ? ttsBuffer.length + (tempCtx.sampleRate * 2) : 0);
      const offlineCtx = new OfflineAudioContext(2, totalLength, tempCtx.sampleRate);

      const ttsSource = offlineCtx.createBufferSource();
      ttsSource.buffer = ttsBuffer;
      
      let processedVoice = ttsSource; // Suara asli tanpa EQ
      
      // LOGIKA REVERB DINAMIS BERDASARKAN INTENSITAS
      if (reverbIntensity > 0) {
        const convolver = offlineCtx.createConvolver();
        
        // Kalkulasi durasi dan pantulan secara dinamis (makin tinggi intensitas, makin panjang gemanya)
        const duration = 0.2 + (reverbIntensity * 2.3); // 0.2 detik hingga 2.5 detik
        const decay = 3.0 - (reverbIntensity * 1.5);    // Pelepasan suara
        
        convolver.buffer = createReverbBuffer(offlineCtx, duration, decay);
        
        const fxGain = offlineCtx.createGain(); 
        fxGain.gain.value = reverbIntensity * 0.5; // Maksimal 50% volume pantulan (wet mix)
        
        // Cabang efek: Masukkan suara ke dalam ruang Reverb
        processedVoice.connect(convolver); 
        convolver.connect(fxGain); 
        fxGain.connect(offlineCtx.destination);
      }

      // Hubungkan suara utama ke output final
      processedVoice.connect(offlineCtx.destination);
      ttsSource.start(0);

      if (bgmBuffer) {
        const bgmSource = offlineCtx.createBufferSource();
        bgmSource.buffer = bgmBuffer;
        bgmSource.loop = true;
        
        const bgmGain = offlineCtx.createGain();
        bgmGain.gain.value = bgmVolume; 
        
        // Fade out BGM saat Voice Over selesai (Ducking Audio)
        bgmGain.gain.setValueAtTime(bgmVolume, Math.max(0, ttsBuffer.duration - 0.5));
        bgmGain.gain.setTargetAtTime(0, ttsBuffer.duration, 0.5); 
        
        bgmSource.connect(bgmGain);
        bgmGain.connect(offlineCtx.destination);
        bgmSource.start(0);
      }

      const renderedBuffer = await offlineCtx.startRendering();
      tempCtx.close();
      
      return audioBufferToWav(renderedBuffer);
    } catch (err) {
      console.error("Gagal mix audio, fallback ke raw:", err);
      return rawWavBlob; 
    }
  };

  // GENERATOR UTAMA
  const handleGenerate = async () => {
    if (!text.trim()) return setErrorMsg('Naskah tidak boleh kosong.');
    
    setIsGenerating(true); setErrorMsg(''); setAudioUrl(null);

    try {
      const segments = parseScript(text);
      let allPcmData = [];
      const baseSampleRate = 24000;

      for (let segment of segments) {
        if (segment.type === 'jeda') {
          // Generate silent PCM for specific duration
          const silentSamples = new Uint8Array(baseSampleRate * 2 * segment.duration);
          allPcmData.push(silentSamples);
          continue;
        }

        if (segment.type === 'speech') {
          if (!segment.text.trim()) continue;

          const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-tts:generateContent?key=${apiKey}`;
          
          let finalPrompt = segment.emotion ? `${segment.emotion}${segment.text}` : segment.text;
          
          // Tambahkan instruksi tempo AI
          if (aiTempo === -2) finalPrompt = `Speak very slowly. ${finalPrompt}`;
          else if (aiTempo === -1) finalPrompt = `Speak slowly. ${finalPrompt}`;
          else if (aiTempo === 1) finalPrompt = `Speak quickly. ${finalPrompt}`;
          else if (aiTempo === 2) finalPrompt = `Speak very quickly. ${finalPrompt}`;

          const payload = {
            contents: [{ parts: [{ text: finalPrompt }] }],
            generationConfig: { responseModalities: ["AUDIO"], speechConfig: { voiceConfig: { prebuiltVoiceConfig: { voiceName: segment.voiceId } } } },
            model: "gemini-2.5-flash-preview-tts"
          };

          const result = await fetchWithRetry(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
          const audioData = result.candidates?.[0]?.content?.parts?.[0]?.inlineData;
          if (audioData?.data) {
            allPcmData.push(base64ToUint8Array(audioData.data));
          } else {
            throw new Error('Gagal mendapatkan sebagian audio dari server.');
          }
        }
      }

      // Gabungkan PCM
      const totalLength = allPcmData.reduce((acc, arr) => acc + arr.length, 0);
      const combinedPcm = new Uint8Array(totalLength);
      let offset = 0;
      for (let arr of allPcmData) {
        combinedPcm.set(arr, offset);
        offset += arr.length;
      }

      const modifiedSampleRate = Math.round(baseSampleRate * pitch);
      const rawWavBlob = pcmToWav(combinedPcm, modifiedSampleRate);
      
      let finalWavBlob = rawWavBlob;
      if (bgmFile || reverbIntensity > 0) {
        finalWavBlob = await applyStudioEffects(rawWavBlob, modifiedSampleRate);
      }

      const urlObj = URL.createObjectURL(finalWavBlob);
      setAudioUrl(urlObj);
      
    } catch (err) {
      setErrorMsg(err.message || 'Terjadi kesalahan saat membuat voice over.');
    } finally {
      setIsGenerating(false);
    }
  };

  // Merekam Video Visualizer
  const handleRecordVideo = () => {
    if (!audioRef.current || !canvasRef.current) return;
    setIsRecordingVideo(true);

    const canvasStream = canvasRef.current.captureStream(30);
    if (!audioCtxRef.current) setupVisualizer();
    
    const dest = audioCtxRef.current.createMediaStreamDestination();
    sourceRef.current.connect(dest);
    
    const combinedStream = new MediaStream([...canvasStream.getVideoTracks(), ...dest.stream.getAudioTracks()]);
    
    mediaRecorderRef.current = new MediaRecorder(combinedStream, { mimeType: 'video/webm' });
    const chunks = [];
    
    mediaRecorderRef.current.ondataavailable = e => chunks.push(e.data);
    mediaRecorderRef.current.onstop = () => {
      const blob = new Blob(chunks, { type: 'video/webm' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a'); a.href = url; a.download = `VO_VideoExport_${Date.now()}.webm`; a.click();
      setIsRecordingVideo(false);
    };
    
    mediaRecorderRef.current.start();
    audioRef.current.currentTime = 0;
    audioRef.current.play();
    
    audioRef.current.onended = () => {
      if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') mediaRecorderRef.current.stop();
    };
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans selection:bg-blue-200 pb-12">
      
      {/* --- TELEPROMPTER OVERLAY --- */}
      {showTeleprompter && (
        <div className="fixed inset-0 bg-black z-50 flex flex-col animate-in fade-in duration-300">
          <div className="p-4 flex justify-between items-center bg-slate-900 border-b border-slate-800">
            <div className="flex items-center gap-3">
              <Type className="w-5 h-5 text-blue-500" />
              <h2 className="text-white font-bold">Studio Teleprompter</h2>
            </div>
            <div className="flex gap-4">
              {audioUrl && (
                <button onClick={() => { audioRef.current.currentTime = 0; audioRef.current.play(); }} className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-bold flex gap-2 items-center">
                  <Play className="w-4 h-4" /> Putar Audio
                </button>
              )}
              <button onClick={() => setShowTeleprompter(false)} className="p-2 bg-slate-800 hover:bg-slate-700 text-white rounded-lg">
                <X className="w-5 h-5" />
              </button>
            </div>
          </div>
          <div className="flex-1 overflow-y-auto p-8 sm:p-20 scroll-smooth">
            <div className="max-w-4xl mx-auto text-center">
              <p className="text-3xl sm:text-5xl leading-tight sm:leading-snug text-slate-200 font-medium whitespace-pre-wrap">
                {text.replace(/\[.*?\]/g, '') || "Naskah kosong. Ketik naskah Anda di editor terlebih dahulu."}
              </p>
            </div>
          </div>
        </div>
      )}

      {/* Header */}
      <header className="bg-white border-b border-slate-200 p-3 sm:p-4 sticky top-0 z-20 shadow-sm">
        <div className="max-w-6xl mx-auto flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="bg-gradient-to-br from-blue-600 to-indigo-600 p-2 sm:p-2.5 rounded-xl shadow-md shadow-blue-500/20 text-white">
              <Mic className="w-5 h-5 sm:w-6 sm:h-6" />
            </div>
            <div>
              <h1 className="text-lg sm:text-xl font-extrabold text-slate-900 tracking-tight">
                Studio Voice <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Pro Max</span>
              </h1>
            </div>
          </div>
          <button onClick={() => setShowTeleprompter(true)} className="flex items-center gap-2 text-xs sm:text-sm bg-slate-100 hover:bg-blue-50 text-slate-700 hover:text-blue-700 px-4 py-2 rounded-xl border border-slate-200 font-bold shadow-sm transition-colors">
            <Maximize2 className="w-4 h-4" /> <span className="hidden sm:inline">Teleprompter</span>
          </button>
        </div>
      </header>

      <main className="max-w-6xl mx-auto p-3 sm:p-6 grid grid-cols-1 lg:grid-cols-12 gap-5 sm:gap-6 mt-2">
        
        {/* Kiri: Editor */}
        <div className="lg:col-span-7 space-y-4">
          <div className="bg-white rounded-2xl border border-slate-200 shadow-sm flex flex-col h-full">
            <div className="p-3 sm:p-4 border-b border-slate-100 bg-slate-50/50 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
              <h2 className="text-sm font-bold text-slate-800 flex items-center gap-2">
                <FileAudio className="w-4 h-4 text-blue-500" /> Naskah Skenario
              </h2>
              <div className="flex gap-2 bg-white p-1 rounded-xl border border-slate-200 shadow-sm w-full sm:w-auto">
                <button onClick={() => handleAIAssistant('fix')} disabled={isAssisting} className="flex-1 sm:flex-none px-3 py-1.5 text-xs font-semibold hover:bg-blue-50 hover:text-blue-600 rounded-lg text-slate-600 transition-colors flex items-center justify-center gap-1.5 whitespace-nowrap"><Wand2 className="w-3.5 h-3.5" /> Rapihkan</button>
                <div className="w-px bg-slate-200 my-1 hidden sm:block"></div>
                <button onClick={() => handleAIAssistant('persuasive')} disabled={isAssisting} className="flex-1 sm:flex-none px-3 py-1.5 text-xs font-semibold hover:bg-blue-50 hover:text-blue-600 rounded-lg text-slate-600 transition-colors whitespace-nowrap">Persuasif</button>
              </div>
            </div>
            
            {/* Toolbar Shortcut Emosi (BARU) */}
            <div className="px-3 sm:px-4 py-2 sm:py-2.5 bg-slate-50 border-b border-slate-100 flex items-center gap-2 overflow-x-auto">
              <span className="text-[10px] sm:text-xs font-bold text-slate-500 whitespace-nowrap flex items-center gap-1">
                Sisipkan Emosi:
              </span>
              {EMOTIONS.filter(e => e.value !== '').map(e => {
                const simpleName = e.label.split(' ')[0]; // Ambil nama depan saja (Ceria, Sedih, dll)
                let emoji = '🙂';
                if (simpleName === 'Ceria') emoji = '😄';
                if (simpleName === 'Semangat') emoji = '🔥';
                if (simpleName === 'Sedih') emoji = '😢';
                if (simpleName === 'Berbisik') emoji = '🤫';
                if (simpleName === 'Marah') emoji = '😡';

                return (
                  <button
                    key={simpleName}
                    onClick={() => insertEmotionTag(simpleName)}
                    className="px-2.5 py-1 text-[10px] sm:text-xs font-bold bg-white border border-slate-200 hover:border-blue-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg text-slate-600 transition-all flex items-center gap-1.5 whitespace-nowrap shadow-sm active:scale-95"
                    title={`Sisipkan tag [${VOICES.find(v => v.id === selectedVoice)?.name || 'Sinta'}:${simpleName}]`}
                  >
                    <span className="text-[12px] sm:text-sm">{emoji}</span> {simpleName}
                  </button>
                )
              })}
              
              {/* Grup Tombol Jeda (BARU) */}
              <div className="flex items-center gap-1.5 ml-auto border-l border-slate-200 pl-3">
                <span className="text-[10px] sm:text-xs font-bold text-slate-400 whitespace-nowrap mr-1">
                  ⏸️ Jeda:
                </span>
                <button
                  onClick={() => insertJedaTag(1)}
                  className="px-2.5 py-1 text-[10px] sm:text-xs font-bold bg-white border border-slate-200 hover:border-emerald-400 hover:text-emerald-600 hover:bg-emerald-50 rounded-lg text-slate-600 transition-all whitespace-nowrap shadow-sm active:scale-95"
                  title="Sisipkan jeda 1 detik"
                >
                  1s
                </button>
                <button
                  onClick={() => insertJedaTag(2)}
                  className="px-2.5 py-1 text-[10px] sm:text-xs font-bold bg-white border border-slate-200 hover:border-emerald-400 hover:text-emerald-600 hover:bg-emerald-50 rounded-lg text-slate-600 transition-all whitespace-nowrap shadow-sm active:scale-95"
                  title="Sisipkan jeda 2 detik (Agak lama)"
                >
                  2s
                </button>
              </div>
            </div>
            
            <div className="relative flex-grow">
              {isAssisting && (
                <div className="absolute inset-0 bg-white/80 backdrop-blur-sm flex flex-col items-center justify-center z-10">
                  <Loader2 className="w-8 h-8 text-blue-600 animate-spin mb-3" />
                  <p className="text-sm font-medium text-blue-800 animate-pulse">AI merapihkan naskah...</p>
                </div>
              )}
              <textarea
                ref={textAreaRef}
                className="w-full h-80 sm:min-h-[460px] lg:h-full bg-transparent text-slate-800 p-4 sm:p-6 resize-none focus:outline-none focus:ring-inset focus:ring-2 focus:ring-blue-500/30 transition-all placeholder:text-slate-400 leading-relaxed text-sm sm:text-base font-medium"
                placeholder="Ketik naskah di sini...&#10;&#10;✨ FITUR BARU:&#10;1. Gunakan [Nama:Emosi] untuk multi-karakter.&#10;   Contoh: [Sinta:Sedih] Aku sendirian...&#10;&#10;2. Gunakan [jeda:X] untuk mengatur nafas/tempo.&#10;   Contoh: Tunggu sebentar. [jeda:1.5] Oke, ayo jalan!"
                value={text}
                onChange={(e) => setText(e.target.value)}
              />
            </div>
          </div>
        </div>

        {/* Kanan: Settings */}
        <div className="lg:col-span-5 space-y-5">
          
          <div className="bg-white rounded-2xl border border-slate-200 p-4 sm:p-5 shadow-sm">
            <h2 className="text-sm font-bold text-slate-800 flex items-center gap-2 mb-4">
              <SlidersHorizontal className="w-4 h-4 text-blue-500" /> Post-Production Studio
            </h2>

            <div className="space-y-4">
              {/* Voice & Emosi */}
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-bold text-slate-500 mb-1.5">Voice Default</label>
                  <select className="w-full bg-slate-50 border border-slate-200 text-slate-800 text-xs sm:text-sm rounded-xl p-3 outline-none focus:border-blue-500 font-semibold cursor-pointer" value={selectedVoice} onChange={(e) => setSelectedVoice(e.target.value)}>
                    {VOICES.map(v => <option key={v.id} value={v.id}>{v.name} • {v.desc}</option>)}
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-500 mb-1.5">Emosi Global</label>
                  <select className="w-full bg-slate-50 border border-slate-200 text-slate-800 text-xs sm:text-sm rounded-xl p-3 outline-none focus:border-blue-500 font-semibold cursor-pointer" value={selectedEmotion} onChange={(e) => setSelectedEmotion(e.target.value)}>
                    {EMOTIONS.map(e => <option key={e.label} value={e.value}>{e.label || 'Standar'}</option>)}
                  </select>
                </div>
              </div>

              {/* Pitch & Tempo AI (BARU) */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-bold text-blue-600 mb-1.5 flex justify-between items-center">
                    <span>Pitch Karakter (Tone)</span>
                    <span className="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded text-[10px]">{Math.round(pitch * 100)}%</span>
                  </label>
                  <div className="flex items-center gap-2 bg-slate-50 border border-slate-200 rounded-xl p-3 h-[42px]">
                    <span className="text-[10px] text-slate-400 font-bold">Berat</span>
                    <input type="range" min="0.75" max="1.25" step="0.01" value={pitch} onChange={(e) => setPitch(Number(e.target.value))} className="w-full h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600" />
                    <span className="text-[10px] text-slate-400 font-bold">Tinggi</span>
                  </div>
                </div>

                <div>
                  <label className="block text-xs font-bold text-emerald-600 mb-1.5 flex justify-between items-center">
                    <span>Tempo Bicara AI (Speed)</span>
                    <span className="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded text-[10px]">
                      {aiTempo === 0 ? 'Normal' : aiTempo > 0 ? `+${aiTempo}` : aiTempo}
                    </span>
                  </label>
                  <div className="flex items-center gap-2 bg-slate-50 border border-slate-200 rounded-xl p-3 h-[42px]">
                    <span className="text-[10px] text-slate-400 font-bold">Lambat</span>
                    <input type="range" min="-2" max="2" step="1" value={aiTempo} onChange={(e) => setAiTempo(Number(e.target.value))} className="w-full h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-emerald-600" title="Ubah kecepatan membaca teks oleh AI" />
                    <span className="text-[10px] text-slate-400 font-bold">Cepat</span>
                  </div>
                </div>
              </div>

              <div className="h-px bg-slate-100 my-2"></div>

              {/* FX & BGM */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-bold text-indigo-500 mb-1.5 flex justify-between items-center">
                    <span className="flex gap-1 items-center"><Layers className="w-3 h-3"/> Reverb / Gema</span>
                    <span className="bg-indigo-100 text-indigo-700 px-1.5 py-0.5 rounded text-[10px]">{Math.round(reverbIntensity * 100)}%</span>
                  </label>
                  <div className="flex items-center gap-2 bg-indigo-50/50 border border-indigo-100 rounded-xl p-3 h-[42px]">
                    <span className="text-[10px] text-indigo-400 font-bold">Kering</span>
                    <input 
                      type="range" 
                      min="0" 
                      max="1" 
                      step="0.01" 
                      value={reverbIntensity} 
                      onChange={(e) => setReverbIntensity(Number(e.target.value))} 
                      className="w-full h-1.5 bg-indigo-200 rounded-lg appearance-none cursor-pointer accent-indigo-600" 
                      title="Intensitas Gema Ruangan"
                    />
                    <span className="text-[10px] text-indigo-400 font-bold">Gua</span>
                  </div>
                </div>
                <div>
                  <label className="block text-xs font-bold text-indigo-500 mb-1.5 flex gap-1 items-center"><Music className="w-3 h-3"/> BGM Mixer (Musik)</label>
                  <input 
                    type="file" 
                    accept="audio/*"
                    onChange={(e) => setBgmFile(e.target.files[0])}
                    className="block w-full text-xs text-slate-500 file:mr-3 file:py-2 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-bold file:bg-indigo-100 file:text-indigo-700 hover:file:bg-indigo-200 border border-indigo-100 rounded-xl bg-indigo-50/50 cursor-pointer overflow-hidden mb-2"
                  />
                  {/* Slider Volume BGM Muncul Jika Ada File */}
                  {bgmFile && (
                    <div className="flex items-center gap-2 bg-indigo-50 rounded-lg p-2 border border-indigo-100">
                      <Volume2 className="w-3 h-3 text-indigo-400" />
                      <input type="range" min="0" max="1" step="0.01" value={bgmVolume} onChange={(e) => setBgmVolume(Number(e.target.value))} className="w-full h-1 bg-indigo-200 rounded-lg appearance-none cursor-pointer accent-indigo-600" title="Volume Musik Latar" />
                      <span className="text-[10px] text-indigo-600 font-bold">{Math.round(bgmVolume * 100)}%</span>
                    </div>
                  )}
                </div>
              </div>

              <button onClick={handleGenerate} disabled={isGenerating || !text.trim()} className={`w-full py-4 mt-2 rounded-xl font-bold text-sm sm:text-base flex items-center justify-center gap-2 transition-all ${isGenerating || !text.trim() ? 'bg-slate-100 text-slate-400 cursor-not-allowed border border-slate-200' : 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white shadow-lg shadow-blue-500/30'}`}>
                {isGenerating ? <><Loader2 className="w-5 h-5 animate-spin" /> Merender Studio (Memproses FX)...</> : <><Volume2 className="w-5 h-5" /> Generate Final Audio</>}
              </button>
              
              {errorMsg && <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl text-rose-600 text-sm font-medium">{errorMsg}</div>}
            </div>
          </div>

          {/* Panel Player & Export Video */}
          <div className={`bg-slate-900 rounded-2xl border border-slate-800 p-4 sm:p-5 shadow-xl transition-all duration-500 ${audioUrl ? 'opacity-100' : 'opacity-50 pointer-events-none'}`}>
             <div className="flex justify-between items-center mb-4">
               <h2 className="text-sm font-bold text-white flex items-center gap-2">
                <MonitorPlay className="w-4 h-4 text-emerald-400" /> Hasil Render
               </h2>
               
               {/* Speed Control Player Slider (BARU) */}
               <div className="flex items-center gap-2 bg-slate-800 rounded-lg p-1.5 px-3 border border-slate-700" title="Kecepatan Putar Preview">
                 <FastForward className="w-3.5 h-3.5 text-slate-400" />
                 <span className="text-xs font-bold text-slate-300 w-8">{playbackRate.toFixed(1)}x</span>
                 <input 
                   type="range" min="0.5" max="2" step="0.1" 
                   value={playbackRate} 
                   onChange={(e) => setPlaybackRate(Number(e.target.value))}
                   className="w-16 sm:w-24 h-1 bg-slate-600 rounded-lg appearance-none cursor-pointer accent-emerald-500"
                  />
               </div>
             </div>
            
            <div className="space-y-4">
              {/* Visualizer Video */}
              <div className="w-full h-24 sm:h-32 bg-slate-950 rounded-xl border border-slate-700 overflow-hidden relative shadow-inner">
                {!audioUrl && <div className="absolute inset-0 flex items-center justify-center text-xs font-medium text-slate-600">Layar Visualizer</div>}
                <canvas ref={canvasRef} className="w-full h-full" width={600} height={200}></canvas>
                {audioUrl && <div className="absolute bottom-2 left-3 text-[10px] text-white/50 font-bold tracking-wider uppercase">Voice Over Studio Pro</div>}
              </div>

              <audio ref={audioRef} controls src={audioUrl || ''} onPlay={setupVisualizer} className="w-full h-10 outline-none rounded-lg invert sepia-[20%] hue-rotate-[180deg]" />
              
              <div className="grid grid-cols-2 gap-3">
                <a href={audioUrl || '#'} download={audioUrl ? `VO_Master_${Date.now()}.wav` : ''} className="w-full py-3 rounded-xl text-xs sm:text-sm font-bold flex items-center justify-center gap-1.5 transition-all bg-white text-slate-800 hover:bg-blue-50 hover:text-blue-600">
                  <Download className="w-4 h-4" /> Unduh .WAV
                </a>
                
                <button onClick={handleRecordVideo} disabled={isRecordingVideo} className={`w-full py-3 rounded-xl text-xs sm:text-sm font-bold flex items-center justify-center gap-1.5 transition-all ${isRecordingVideo ? 'bg-rose-500 text-white animate-pulse' : 'bg-indigo-600 text-white hover:bg-indigo-500'}`}>
                  {isRecordingVideo ? <><Activity className="w-4 h-4" /> Merekam...</> : <><Video className="w-4 h-4" /> Export Video</>}
                </button>
              </div>
            </div>
          </div>

        </div>
      </main>
    </div>
  );
}