import React, { useState, useRef } from 'react';

export default function UGCStoryboardStudio() {
  const [currentStep, setCurrentStep] = useState(1);

  // Step 1: Product & Character State
  const [productImage, setProductImage] = useState(null);
  const [productImageBase64, setProductImageBase64] = useState('');
  const [productName, setProductName] = useState('');
  const [productUsp, setProductUsp] = useState('');
  const [isAnalyzingProduct, setIsAnalyzingProduct] = useState(false);

  const [characterImage, setCharacterImage] = useState(null);
  const [characterImageBase64, setCharacterImageBase64] = useState('');
  const [characterDescription, setCharacterDescription] = useState('');
  const [isAnalyzingCharacter, setIsAnalyzingCharacter] = useState(false);

  // Step 2: Audience, Hook & Setting State
  const [targetAudience, setTargetAudience] = useState('Wanita Muda & Gen-Z Enthusiast (18-28 thn)');
  const [customAudience, setCustomAudience] = useState('');
  const [hooksList, setHooksList] = useState([]);
  const [selectedHook, setSelectedHook] = useState('');
  const [customHook, setCustomHook] = useState('');
  const [isGeneratingHooks, setIsGeneratingHooks] = useState(false);
  const [backgroundSetting, setBackgroundSetting] = useState('Kamar Tidur Estetik Modern / Desk Setup Minimalis');

  // Step 3: Storyboard Configuration State
  const [sceneCount, setSceneCount] = useState(6);
  const [sceneDuration, setSceneDuration] = useState(5);
  const [promptEngine, setPromptEngine] = useState('Nano Banana 2 Lite (Rekomendasi Utama)');
  const [videoEngine, setVideoEngine] = useState('Veo 3.1 Quality');

  // Step 4: Output & Preview State
  const [isGeneratingStoryboard, setIsGeneratingStoryboard] = useState(false);
  const [storyboardData, setStoryboardData] = useState(null);
  const [toastMessage, setToastMessage] = useState('');

  const [previewImages, setPreviewImages] = useState({});
  const [generatingImageIndex, setGeneratingImageIndex] = useState(null);
  const [playingAudioIndex, setPlayingAudioIndex] = useState(null);

  const showToast = (msg) => {
    setToastMessage(msg);
    setTimeout(() => setToastMessage(''), 3000);
  };

  const handleProductImageUpload = async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onloadend = async () => {
      const base64String = reader.result.split(',')[1];
      setProductImage(reader.result);
      setProductImageBase64(base64String);

      setIsAnalyzingProduct(true);
      try {
        const apiKey = "";
        const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key=${apiKey}`;
        const payload = {
          contents: [
            {
              role: "user",
              parts: [
                { text: "Identifikasi produk dalam foto ini. Berikan: 1. Nama/Kategori Produk ringkas, 2. Unik Selling Point (USP) utama & manfaatnya untuk konten affiliate UGC TikTok. Balas dalam format ringkas Bahasa Indonesia." },
                { inlineData: { mimeType: file.type || "image/jpeg", data: base64String } }
              ]
            }
          ]
        };

        const response = await fetch(apiUrl, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });
        const data = await response.json();
        const text = data.candidates?.[0]?.content?.parts?.[0]?.text || '';
        
        if (text) {
          const lines = text.split('\n').filter(l => l.trim());
          setProductName(lines[0]?.replace(/^[0-9.#*-\s]+/, '') || 'Produk Estetik Premium');
          setProductUsp(text);
          showToast('✨ Produk berhasil terdeteksi otomatis oleh AI!');
        }
      } catch (err) {
        console.error("Gagal mendeteksi gambar:", err);
      } finally {
        setIsAnalyzingProduct(false);
      }
    };
    reader.readAsDataURL(file);
  };

  const handleCharacterImageUpload = async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onloadend = async () => {
      const base64String = reader.result.split(',')[1];
      setCharacterImage(reader.result);
      setCharacterImageBase64(base64String);

      setIsAnalyzingCharacter(true);
      try {
        const apiKey = "";
        const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key=${apiKey}`;
        const payload = {
          contents: [
            {
              role: "user",
              parts: [
                { text: "Analisis karakter dalam foto ini untuk konsistensi gambar AI. Deskripsikan: Umur perkiraan, etnis/gaya wajah, rambut, pakaian, ekspresi, dan style khas UGC. Buat ringkas dalam bahasa Inggris untuk keperluan prompt AI." },
                { inlineData: { mimeType: file.type || "image/jpeg", data: base64String } }
              ]
            }
          ]
        };

        const response = await fetch(apiUrl, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });
        const data = await response.json();
        const text = data.candidates?.[0]?.content?.parts?.[0]?.text || '';
        if (text) {
          setCharacterDescription(text);
          showToast('👤 Profil & Karakter berhasil diekstrak!');
        }
      } catch (err) {
        console.error("Gagal mendeteksi karakter:", err);
      } finally {
        setIsAnalyzingCharacter(false);
      }
    };
    reader.readAsDataURL(file);
  };

  const handleGenerateHooks = async () => {
    if (!productName) {
      showToast('⚠️ Isi nama produk terlebih dahulu!');
      return;
    }
    setIsGeneratingHooks(true);
    try {
      const apiKey = "";
      const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key=${apiKey}`;
      const prompt = `Buatkan 4 opsi HOOK video UGC TikTok/Reels yang sangat tinggi konversinya dalam Bahasa Indonesia kasual/gaul untuk produk berikut:
Nama Produk: ${productName}
USP/Deskripsi: ${productUsp}
Target Market: ${targetAudience}

Buat 4 tipe hook berbeda:
1. Problem-Agitate Hook (Menyentuh pain point)
2. Curiosity / Stop Scrolling Hook (Bikin penasaran)
3. Direct Visual & Benefit Hook (Langsung kasih liat keunggulan)
4. Shocking Secret / Before-After Hook (Rahasia rahasia-an)

Format output JSON array string murni saja, contoh: ["Hook 1", "Hook 2", "Hook 3", "Hook 4"]`;

      const payload = {
        contents: [{ role: 'user', parts: [{ text: prompt }] }],
        generationConfig: { responseMimeType: "application/json" }
      };

      const response = await fetch(apiUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await response.json();
      const text = data.candidates?.[0]?.content?.parts?.[0]?.text;
      const parsedHooks = JSON.parse(text);
      if (Array.isArray(parsedHooks)) {
        setHooksList(parsedHooks);
        if (parsedHooks.length > 0) setSelectedHook(parsedHooks[0]);
        showToast('🎯 4 Opsi Hook berhasil dibuat!');
      }
    } catch (err) {
      console.error("Gagal membuat hooks:", err);
      const fallbacks = [
        `"Sumpah baru tau produk ${productName} ini ternyata bikin..."`,
        `"Jangan beli ${productName} ini sebelum kamu tahu fakta ini!"`,
        `"Awalnya ga percaya tapi pas nyobain ${productName} langsung kaget banget!"`,
        `"Rahasia ${targetAudience} tetap awet & tampil estetik tiap hari!"`
      ];
      setHooksList(fallbacks);
      setSelectedHook(fallbacks[0]);
    } finally {
      setIsGeneratingHooks(false);
    }
  };

  const handleGenerateStoryboard = async () => {
    if (!productName) {
      showToast('⚠️ Harap lengkapi nama produk terlebih dahulu.');
      return;
    }
    setIsGeneratingStoryboard(true);
    setCurrentStep(4);

    try {
      const apiKey = "";
      const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key=${apiKey}`;
      const chosenHookFinal = customHook || selectedHook || `Review jujur pemakaian ${productName}`;
      const chosenAudienceFinal = customAudience || targetAudience;

      const isYoutubeCreateEngine = videoEngine.toLowerCase().includes('youtube create');
      const videoPromptRule = isYoutubeCreateEngine
        ? '⚠️ KHUSUS ENGINE "Youtube Create": Prompt video WAJIB KETAT MAKSIMAL 900 KARAKTER (strict limit under 900 chars), namun harus sangat kaya informasi gerakan, sudut kamera, dan subjek.'
        : 'TIDAK ADA BATASAN KARAKTER untuk prompt video. Buat prompt video sespesifik, sedetail, dan seoptimal mungkin menggambarkan pergerakan kamera, subjek, pencahayaan, dan dinamika aksinya.';

      const systemPrompt = `Kamu adalah Pakar Prompt UGC (User-Generated Content) Hyper-Realistis, Sutradara Konten TikTok/Reels Affiliate, dan Master Prompt Engineer untuk AI Photo Engine (${promptEngine}) serta AI Video Engine (${videoEngine}).
Tugas utama: Menghasilkan storyboard lengkap sebanyak ${sceneCount} scene bergaya UGC yang SANGAT NATURAL, HYPER-REALISTIS, dan HIGH CONVERTING.

ATURAN PROMPT FOTO (${promptEngine}):
1. TIDAK ADA BATASAN KARAKTER. Buat photoPrompt sangat komprehensif, ultra-detail, kaya deskripsi visual, dan dioptimalkan penuh untuk ${promptEngine}.
2. GAYA FOTO MENTAH HANDHELD: "Raw handheld smartphone photo, shot on iPhone 15 Pro Max 24mm f/1.8 optical lens feel, authentic UGC style, natural skin texture with subtle imperfections, realistic pore structure, soft ambient window lighting, authentic shadows, zero artificial 3D/CGI render look".
3. KONSISTENSI KARAKTER RINCI: Masukkan rincian fisik karakter secara presisi (${characterDescription || 'Indonesian young adult UGC creator, natural casual home outfit, minimal makeup, natural facial traits'}).
4. DETAIL INTERAKSI PRODUK: Jelaskan visual produk secara mendalam, cara tangan memegang produk, angle kemasan, dan penggunaan produk (${productName} - ${productUsp}).
5. Latar belakang & Komposisi: Masukkan detail environment (${backgroundSetting}), depth of field, framing, serta parameter aspect ratio 9:16 vertical video (--ar 9:16).

ATURAN PROMPT VIDEO (${videoEngine}):
1. Format Bahasa Inggris khusus yang disesuaikan penuh untuk AI Video Generator (${videoEngine}).
2. Jelaskan detail gerakan kamera (misal: natural micro-handheld shake, slow drift, smooth camera tracking, dynamic push-in, subtle tilt).
3. Rincikan perubahan aksi karakter, ekspresi wajah, interaksi produk, serta perubahan pencahayaan alami secara rinci.
4. ${videoPromptRule}

ATURAN VOICE OVER (NASKAH):
- Gunakan Bahasa Indonesia percakapan kasual UGC affiliate (seperti bicarakan rekomendasi ke teman sendiri, tanpa bahasa formal yang kaku).`;

      const userQuery = `Buatkan ${sceneCount} scene storyboard UGC untuk:
- Produk: ${productName}
- Deskripsi/USP Lengkap: ${productUsp}
- Karakter Spesifikasi: ${characterDescription || 'Kreator UGC lokal kasual'}
- Hook Pilihan: ${chosenHookFinal}
- Target Audience: ${chosenAudienceFinal}
- Background Setting: ${backgroundSetting}
- Durasi per scene: ${sceneDuration} detik.
- Target Engine Foto: ${promptEngine} (Bebas batasan karakter, buat ultra-detail)
- Target Engine Video: ${videoEngine} ${isYoutubeCreateEngine ? '(MAKSIMAL 900 KARAKTER)' : '(Bebas batasan karakter, buat detail dan optimal)'}

Kembalikan respon DALAM FORMAT JSON murni sesuai skema ini:
{
  "storyboardTitle": "Judul Konsep Konten",
  "angleStrategy": "Penjelasan singkat strategi UGC",
  "caption": {
    "headline": "Teks Caption Hook untuk TikTok/Reels/Shopee",
    "body": "Isi caption lengkap dengan panggilan aksi (CTA)",
    "hashtags": ["#racuntiktok", "#reviewproduk", "#affiliate"]
  },
  "scenes": [
    {
      "sceneNumber": 1,
      "shotType": "Talking Head / POV Handheld / Product Close-up",
      "duration": "${sceneDuration}s",
      "voiceover": "Naskah voiceover Bahasa Indonesia kasual",
      "actionDescription": "Deskripsi aksi fisik dalam scene",
      "photoPrompt": "Ultra-detailed hyper-realistic UGC photo prompt in English optimized for ${promptEngine} with --ar 9:16 (No character length limit)",
      "videoPrompt": "Detailed UGC video prompt in English optimized for ${videoEngine} with exact camera movements ${isYoutubeCreateEngine ? '(strictly max 900 characters)' : '(no character length limit)'}"
    }
  ]
}`;

      const payload = {
        contents: [{ role: 'user', parts: [{ text: userQuery }] }],
        systemInstruction: { parts: [{ text: systemPrompt }] },
        generationConfig: {
          responseMimeType: "application/json",
          responseSchema: {
            type: "OBJECT",
            properties: {
              storyboardTitle: { type: "STRING" },
              angleStrategy: { type: "STRING" },
              caption: {
                type: "OBJECT",
                properties: {
                  headline: { type: "STRING" },
                  body: { type: "STRING" },
                  hashtags: { type: "ARRAY", items: { type: "STRING" } }
                },
                required: ["headline", "body", "hashtags"]
              },
              scenes: {
                type: "ARRAY",
                items: {
                  type: "OBJECT",
                  properties: {
                    sceneNumber: { type: "INTEGER" },
                    shotType: { type: "STRING" },
                    duration: { type: "STRING" },
                    voiceover: { type: "STRING" },
                    actionDescription: { type: "STRING" },
                    photoPrompt: { type: "STRING" },
                    videoPrompt: { type: "STRING" }
                  },
                  required: ["sceneNumber", "shotType", "duration", "voiceover", "actionDescription", "photoPrompt", "videoPrompt"]
                }
              }
            },
            required: ["storyboardTitle", "angleStrategy", "caption", "scenes"]
          }
        }
      };

      const response = await fetch(apiUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await response.json();
      const text = data.candidates?.[0]?.content?.parts?.[0]?.text;
      const parsedResult = JSON.parse(text);
      setStoryboardData(parsedResult);
      showToast('🎉 Storyboard Hyper-Realistis berhasil dibuat!');
    } catch (err) {
      console.error("Gagal membuat storyboard:", err);
      showToast('❌ Terjadi kesalahan saat memproses storyboard.');
    } finally {
      setIsGeneratingStoryboard(false);
    }
  };

  const handleGenerateSceneImagePreview = async (sceneIndex, promptText) => {
    setGeneratingImageIndex(sceneIndex);
    try {
      const apiKey = "";
      const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3.1-flash-image:generateContent?key=${apiKey}`;
      const payload = {
        contents: [{ parts: [{ text: promptText }] }],
        generationConfig: {
          responseModalities: ["IMAGE"],
          imageConfig: { aspectRatio: "9:16" }
        }
      };
      const response = await fetch(apiUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const result = await response.json();
      const part = result?.candidates?.[0]?.content?.parts?.find(p => p.inlineData);
      if (part) {
        const imageUrl = `data:${part.inlineData.mimeType};base64,${part.inlineData.data}`;
        setPreviewImages(prev => ({ ...prev, [sceneIndex]: imageUrl }));
        showToast(`📷 Preview Scene ${sceneIndex + 1} selesai!`);
      } else {
        showToast('❌ Gagal menghasilkan gambar preview.');
      }
    } catch (err) {
      console.error("Gagal generate image preview:", err);
      showToast('❌ Error saat menghubungi server Gemini Image.');
    } finally {
      setGeneratingImageIndex(null);
    }
  };

  const handlePlayVoiceover = (index, text) => {
    if ('speechSynthesis' in window) {
      window.speechSynthesis.cancel();
      if (playingAudioIndex === index) {
        setPlayingAudioIndex(null);
        return;
      }

      const utterance = new SpeechSynthesisUtterance(text);
      utterance.lang = 'id-ID';
      utterance.rate = 1.05;
      utterance.pitch = 1.0;

      utterance.onend = () => setPlayingAudioIndex(null);
      utterance.onerror = () => setPlayingAudioIndex(null);

      setPlayingAudioIndex(index);
      window.speechSynthesis.speak(utterance);
    } else {
      showToast('Browser Anda tidak mendukung pratinjau suara.');
    }
  };

  const copyToClipboard = async (text, label) => {
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(text);
        showToast(`📋 ${label} disalin ke clipboard!`);
        return;
      }
    } catch (err) {
      console.warn("Clipboard API blocked by permissions policy, using fallback method:", err);
    }

    try {
      const textArea = document.createElement("textarea");
      textArea.value = text;
      textArea.style.position = "fixed";
      textArea.style.top = "0";
      textArea.style.left = "0";
      textArea.style.opacity = "0";
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      const successful = document.execCommand('copy');
      document.body.removeChild(textArea);
      if (successful) {
        showToast(`📋 ${label} disalin ke clipboard!`);
      } else {
        showToast(`❌ Gagal menyalin. Silakan salin secara manual.`);
      }
    } catch (fallbackErr) {
      console.error("Fallback copy failed: ", fallbackErr);
      showToast(`❌ Gagal menyalin ke clipboard.`);
    }
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 font-sans flex flex-col">
      {/* Toast Alert */}
      {toastMessage && (
        <div className="fixed top-5 right-5 z-50 bg-indigo-600 text-white px-5 py-3 rounded-xl shadow-2xl flex items-center gap-3 animate-bounce border border-indigo-400">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 101-18 0 9 9 0 0118 0z"></path></svg>
          <span className="text-sm font-medium">{toastMessage}</span>
        </div>
      )}

      {/* Top Header */}
      <header className="border-b border-slate-800 bg-slate-900/80 backdrop-blur-md sticky top-0 z-40">
        <div className="max-w-7xl mx-auto px-4 py-4 flex flex-wrap items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 flex items-center justify-center shadow-lg shadow-indigo-500/30">
              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
            </div>
            <div>
              <h1 className="text-xl font-bold bg-gradient-to-r from-white via-indigo-200 to-indigo-400 bg-clip-text text-transparent">
                UGC Storyboard & Prompt Studio AI
              </h1>
              <p className="text-xs text-slate-400">Pakar Prompt Foto & Video Hyper-Realistis untuk Seller & Affiliator</p>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <span className="text-xs bg-indigo-500/10 text-indigo-400 border border-indigo-500/30 px-3 py-1.5 rounded-full font-medium flex items-center gap-1.5">
              <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
              Gemini AI UGC Engine Active
            </span>
          </div>
        </div>
      </header>

      {/* Main Workflow Area */}
      <main className="max-w-7xl mx-auto px-4 py-8 flex-1 w-full space-y-8">
        {/* Workflow Steps Navigator */}
        <div className="bg-slate-900/60 border border-slate-800 rounded-2xl p-4 shadow-xl">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-center">
            {[
              { num: 1, title: 'Foto & Karakter', desc: 'Identifikasi Produk & Sheet' },
              { num: 2, title: 'Target & Hook', desc: 'Audience, Hook & Setting' },
              { num: 3, title: 'Opsi Storyboard', desc: 'Durasi, Scene & Engine' },
              { num: 4, title: 'Hasil Storyboard', desc: 'Prompt Foto & Video UGC' },
            ].map((step) => {
              const isActive = currentStep === step.num;
              const isDone = currentStep > step.num;
              return (
                <button
                  key={step.num}
                  onClick={() => setCurrentStep(step.num)}
                  className={`p-3 rounded-xl border text-left transition-all relative overflow-hidden ${
                    isActive
                      ? 'bg-indigo-600/20 border-indigo-500 text-white shadow-lg shadow-indigo-500/10'
                      : isDone
                      ? 'bg-slate-800/40 border-slate-700/60 text-slate-300'
                      : 'bg-slate-900/40 border-slate-800/80 text-slate-500 hover:border-slate-700'
                  }`}
                >
                  <div className="flex items-center gap-2.5">
                    <div className={`w-7 h-7 rounded-lg flex items-center justify-center font-bold text-xs ${
                      isActive ? 'bg-indigo-500 text-white' : isDone ? 'bg-emerald-500 text-white' : 'bg-slate-800 text-slate-400'
                    }`}>
                      {isDone ? '✓' : step.num}
                    </div>
                    <div>
                      <div className="text-sm font-semibold">{step.title}</div>
                      <div className="text-[11px] text-slate-400 hidden sm:block">{step.desc}</div>
                    </div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* STEP 1: Upload Foto Produk & Character Sheet */}
        {currentStep === 1 && (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Box 1: Product Upload & Details */}
            <div className="bg-slate-900 border border-slate-800 rounded-2xl p-6 space-y-5 flex flex-col shadow-xl">
              <div className="flex items-center justify-between border-b border-slate-800 pb-3">
                <div className="flex items-center gap-2">
                  <span className="w-3 h-3 rounded-full bg-indigo-500"></span>
                  <h2 className="font-bold text-slate-200">1. Identifikasi Produk</h2>
                </div>
                <span className="text-xs text-indigo-400 bg-indigo-500/10 px-2 py-1 rounded">Vision AI Enabled</span>
              </div>

              {/* Upload Dropzone */}
              <div className="relative border-2 border-dashed border-slate-700 hover:border-indigo-500/70 rounded-xl p-4 transition-all text-center bg-slate-950/50">
                <input
                  type="file"
                  accept="image/*"
                  onChange={handleProductImageUpload}
                  className="absolute inset-0 opacity-0 cursor-pointer w-full h-full z-10"
                />
                {productImage ? (
                  <div className="relative h-48 w-full rounded-lg overflow-hidden flex items-center justify-center bg-black/40">
                    <img src={productImage} alt="Product" className="max-h-full max-w-full object-contain" />
                    <div className="absolute bottom-2 right-2 bg-slate-900/90 text-xs text-slate-300 px-3 py-1 rounded-full border border-slate-700">
                      Klik / Drop untuk Ganti Foto
                    </div>
                  </div>
                ) : (
                  <div className="py-8 space-y-2">
                    <div className="w-12 h-12 rounded-full bg-indigo-500/10 text-indigo-400 flex items-center justify-center mx-auto">
                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                    </div>
                    <p className="text-sm font-medium text-slate-300">Upload Foto Produk</p>
                    <p className="text-xs text-slate-500">AI akan otomatis membaca visual & keunggulan produk</p>
                  </div>
                )}
              </div>

              {isAnalyzingProduct && (
                <div className="flex items-center justify-center gap-2 text-xs text-indigo-400 animate-pulse bg-indigo-500/10 p-2.5 rounded-xl border border-indigo-500/20">
                  <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                  AI sedang mengidentifikasi foto produk...
                </div>
              )}

              {/* Product Info Inputs */}
              <div className="space-y-4">
                <div>
                  <label className="text-xs font-semibold text-slate-400 block mb-1.5">Nama Produk / Merek</label>
                  <input
                    type="text"
                    placeholder="Contoh: Serum Glow & Bright Skintific"
                    value={productName}
                    onChange={(e) => setProductName(e.target.value)}
                    className="w-full bg-slate-950 border border-slate-700/80 rounded-xl p-3 text-sm focus:outline-none focus:border-indigo-500 transition-colors"
                  />
                </div>

                <div>
                  <label className="text-xs font-semibold text-slate-400 block mb-1.5">Deskripsi & Unique Selling Point (USP) Produk</label>
                  <textarea
                    rows={4}
                    placeholder="Tuliskan keunggulan produk (misal: mencerahkan kusam 7 hari, ada kandungan Niacinamide 10%, tekstur ringan tidak lengket)"
                    value={productUsp}
                    onChange={(e) => setProductUsp(e.target.value)}
                    className="w-full bg-slate-950 border border-slate-700/80 rounded-xl p-3 text-sm focus:outline-none focus:border-indigo-500 transition-colors"
                  ></textarea>
                </div>
              </div>
            </div>

            {/* Box 2: Character Sheet Upload & Consistency */}
            <div className="bg-slate-900 border border-slate-800 rounded-2xl p-6 space-y-5 flex flex-col shadow-xl">
              <div className="flex items-center justify-between border-b border-slate-800 pb-3">
                <div className="flex items-center gap-2">
                  <span className="w-3 h-3 rounded-full bg-pink-500"></span>
                  <h2 className="font-bold text-slate-200">2. Konsistensi Karakter Sheet</h2>
                </div>
                <span className="text-xs text-pink-400 bg-pink-500/10 px-2 py-1 rounded">Consistent UGC Profile</span>
              </div>

              {/* Upload Dropzone */}
              <div className="relative border-2 border-dashed border-slate-700 hover:border-pink-500/70 rounded-xl p-4 transition-all text-center bg-slate-950/50">
                <input
                  type="file"
                  accept="image/*"
                  onChange={handleCharacterImageUpload}
                  className="absolute inset-0 opacity-0 cursor-pointer w-full h-full z-10"
                />
                {characterImage ? (
                  <div className="relative h-48 w-full rounded-lg overflow-hidden flex items-center justify-center bg-black/40">
                    <img src={characterImage} alt="Character" className="max-h-full max-w-full object-contain" />
                    <div className="absolute bottom-2 right-2 bg-slate-900/90 text-xs text-slate-300 px-3 py-1 rounded-full border border-slate-700">
                      Klik / Drop untuk Ganti Karakter
                    </div>
                  </div>
                ) : (
                  <div className="py-8 space-y-2">
                    <div className="w-12 h-12 rounded-full bg-pink-500/10 text-pink-400 flex items-center justify-center mx-auto">
                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                    </div>
                    <p className="text-sm font-medium text-slate-300">Upload Character Sheet / Model Foto</p>
                    <p className="text-xs text-slate-500">AI akan mengekstrak detail fisik agar prompt antar scene konsisten</p>
                  </div>
                )}
              </div>

              {isAnalyzingCharacter && (
                <div className="flex items-center justify-center gap-2 text-xs text-pink-400 animate-pulse bg-pink-500/10 p-2.5 rounded-xl border border-pink-500/20">
                  <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                  Mengekstrak profil dan konsistensi fisik model...
                </div>
              )}

              {/* Character Details Box */}
              <div>
                <label className="text-xs font-semibold text-slate-400 block mb-1.5">Spesifikasi Karakter AI (Bahasa Inggris untuk Prompt)</label>
                <textarea
                  rows={5}
                  placeholder="Contoh: 22-year-old Indonesian female UGC creator, shoulder-length dark brown wavy hair, casual white aesthetic oversized tee, natural clear glowing skin, warm friendly expression, subtle realistic face texture..."
                  value={characterDescription}
                  onChange={(e) => setCharacterDescription(e.target.value)}
                  className="w-full bg-slate-950 border border-slate-700/80 rounded-xl p-3 text-sm focus:outline-none focus:border-pink-500 transition-colors"
                ></textarea>
              </div>

              <div className="pt-2 flex justify-end">
                <button
                  onClick={() => {
                    handleGenerateHooks();
                    setCurrentStep(2);
                  }}
                  className="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold text-sm px-6 py-3 rounded-xl shadow-lg shadow-indigo-500/25 flex items-center gap-2 transition-all"
                >
                  Lanjut ke Target & Hook
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </button>
              </div>
            </div>
          </div>
        )}

        {/* STEP 2: Target Market, Hook & Background Setting */}
        {currentStep === 2 && (
          <div className="bg-slate-900 border border-slate-800 rounded-2xl p-6 space-y-8 shadow-xl max-w-4xl mx-auto">
            <div className="flex items-center justify-between border-b border-slate-800 pb-4">
              <div>
                <h2 className="text-lg font-bold text-slate-100">Target Market, Hook & Background Setting</h2>
                <p className="text-xs text-slate-400">Pilih angle pemasaran yang sesuai dengan produk dan target pembeli</p>
              </div>
              <span className="text-xs bg-indigo-500/10 text-indigo-400 px-3 py-1 rounded-full border border-indigo-500/20 font-medium">Step 2 of 4</span>
            </div>

            {/* Target Market Option */}
            <div className="space-y-3">
              <label className="text-xs font-semibold text-slate-300 block">1. Target Audience / Target Market</label>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                {[
                  'Wanita Muda & Gen-Z Enthusiast (18-28 thn)',
                  'Ibu Muda & Rumah Tangga (25-38 thn)',
                  'Pria Kasual / Tech & Grooming (20-35 thn)',
                  'Pekerja Kantoran & Profesional Sibuk',
                  'Mahasiswa & Pelajar On-Budget'
                ].map((aud) => (
                  <button
                    key={aud}
                    onClick={() => {
                      setTargetAudience(aud);
                      setCustomAudience('');
                    }}
                    className={`p-3 rounded-xl border text-xs text-left transition-all ${
                      targetAudience === aud && !customAudience
                        ? 'bg-indigo-600/20 border-indigo-500 text-indigo-200 font-semibold'
                        : 'bg-slate-950 border-slate-800 text-slate-400 hover:border-slate-700'
                    }`}
                  >
                    {aud}
                  </button>
                ))}
              </div>
              <input
                type="text"
                placeholder="Atau tuliskan target market kustom (misal: Pecinta Kucing, Gym Goers...)"
                value={customAudience}
                onChange={(e) => setCustomAudience(e.target.value)}
                className="w-full bg-slate-950 border border-slate-700/80 rounded-xl p-3 text-xs focus:outline-none focus:border-indigo-500"
              />
            </div>

            {/* 4 Hook Options */}
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <label className="text-xs font-semibold text-slate-300">2. Pilih 1 dari 4 Opsi Hook Terbaik AI</label>
                <button
                  onClick={handleGenerateHooks}
                  disabled={isGeneratingHooks}
                  className="text-xs text-indigo-400 hover:text-indigo-300 flex items-center gap-1 bg-indigo-500/10 px-2.5 py-1 rounded border border-indigo-500/20"
                >
                  {isGeneratingHooks ? 'Mengenang AI...' : '🔄 Buat Ulang Hook'}
                </button>
              </div>

              {isGeneratingHooks ? (
                <div className="p-6 text-center text-xs text-indigo-400 bg-slate-950/50 rounded-xl border border-slate-800 animate-pulse">
                  AI sedang memformulasikan 4 hook bernilai konversi tinggi...
                </div>
              ) : (
                <div className="space-y-2.5">
                  {hooksList.map((hookText, idx) => (
                    <div
                      key={idx}
                      onClick={() => {
                        setSelectedHook(hookText);
                        setCustomHook('');
                      }}
                      className={`p-3.5 rounded-xl border text-xs cursor-pointer transition-all flex items-start gap-3 ${
                        selectedHook === hookText && !customHook
                          ? 'bg-gradient-to-r from-indigo-950 to-slate-900 border-indigo-500 text-white shadow-md'
                          : 'bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700'
                      }`}
                    >
                      <span className={`w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold mt-0.5 ${
                        selectedHook === hookText && !customHook ? 'bg-indigo-500 text-white' : 'bg-slate-800 text-slate-400'
                      }`}>
                        {idx + 1}
                      </span>
                      <div className="flex-1 font-medium leading-relaxed">{hookText}</div>
                    </div>
                  ))}
                </div>
              )}

              <input
                type="text"
                placeholder="Atau buat kalimat Hook Anda sendiri..."
                value={customHook}
                onChange={(e) => setCustomHook(e.target.value)}
                className="w-full bg-slate-950 border border-slate-700/80 rounded-xl p-3 text-xs focus:outline-none focus:border-indigo-500"
              />
            </div>

            {/* Background Setting */}
            <div className="space-y-3">
              <label className="text-xs font-semibold text-slate-300 block">3. Opsi Latar Belakang / Setting Tempat (Background)</label>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                {[
                  'Kamar Tidur Estetik Modern / Desk Setup Minimalis',
                  'Dapur Bersih / Minimalist Kitchen Table',
                  'Kamar Mandi Estetik Skincare Area (Aesthetic Bathroom)',
                  'Interior Mobil Vlogger Style (Car Vlog Setting)',
                  'Kafe Kekinian / Modern Outdoor Workspace',
                  'Gym / Tempat Fitnes / Outdoor Park Activity'
                ].map((bg) => (
                  <button
                    key={bg}
                    onClick={() => setBackgroundSetting(bg)}
                    className={`p-3 rounded-xl border text-xs text-left transition-all ${
                      backgroundSetting === bg
                        ? 'bg-indigo-600/20 border-indigo-500 text-indigo-200 font-semibold'
                        : 'bg-slate-950 border-slate-800 text-slate-400 hover:border-slate-700'
                    }`}
                  >
                    {bg}
                  </button>
                ))}
              </div>
            </div>

            <div className="flex items-center justify-between pt-4 border-t border-slate-800">
              <button
                onClick={() => setCurrentStep(1)}
                className="text-xs text-slate-400 hover:text-slate-200 flex items-center gap-1 px-4 py-2"
              >
                ← Kembali
              </button>
              <button
                onClick={() => setCurrentStep(3)}
                className="bg-indigo-600 hover:bg-indigo-500 text-white font-semibold text-sm px-6 py-3 rounded-xl shadow-lg shadow-indigo-500/25 flex items-center gap-2"
              >
                Lanjut Konfigurasi Storyboard
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
              </button>
            </div>
          </div>
        )}

        {/* STEP 3: Scene Options & Storyboard Configuration */}
        {currentStep === 3 && (
          <div className="bg-slate-900 border border-slate-800 rounded-2xl p-6 space-y-8 shadow-xl max-w-4xl mx-auto">
            <div className="flex items-center justify-between border-b border-slate-800 pb-4">
              <div>
                <h2 className="text-lg font-bold text-slate-100">Konfigurasi Scene & Prompt Engine</h2>
                <p className="text-xs text-slate-400">Atur jumlah scene, durasi per detik, serta AI Generator pilihan Anda</p>
              </div>
              <span className="text-xs bg-indigo-500/10 text-indigo-400 px-3 py-1 rounded-full border border-indigo-500/20 font-medium">Step 3 of 4</span>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
              {/* Scene Count */}
              <div className="space-y-3">
                <label className="text-xs font-semibold text-slate-300 block">1. Jumlah Scene Konten</label>
                <div className="grid grid-cols-4 gap-2">
                  {[4, 6, 8, 10].map((count) => (
                    <button
                      key={count}
                      onClick={() => setSceneCount(count)}
                      className={`py-3 rounded-xl border text-xs font-bold transition-all ${
                        sceneCount === count
                          ? 'bg-indigo-600 border-indigo-500 text-white shadow-lg'
                          : 'bg-slate-950 border-slate-800 text-slate-400 hover:border-slate-700'
                      }`}
                    >
                      {count} Scene
                    </button>
                  ))}
                </div>
                <p className="text-[11px] text-slate-500">Rekomendasi affiliate: 6 scene (durasi total ~30 detik)</p>
              </div>

              {/* Duration per Scene */}
              <div className="space-y-3">
                <label className="text-xs font-semibold text-slate-300 block">2. Durasi per Scene (Maks 10 Detik)</label>
                <div className="grid grid-cols-4 gap-2">
                  {[3, 5, 8, 10].map((dur) => (
                    <button
                      key={dur}
                      onClick={() => setSceneDuration(dur)}
                      className={`py-3 rounded-xl border text-xs font-bold transition-all ${
                        sceneDuration === dur
                          ? 'bg-indigo-600 border-indigo-500 text-white shadow-lg'
                          : 'bg-slate-950 border-slate-800 text-slate-400 hover:border-slate-700'
                      }`}
                    >
                      {dur} Detik
                    </button>
                  ))}
                </div>
                <p className="text-[11px] text-slate-500">Cocok untuk TikTok/Reels fast-paced engagement</p>
              </div>
            </div>

            {/* AI Generator Preference */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 pt-2">
              <div className="space-y-3">
                <label className="text-xs font-semibold text-slate-300 block">3. Opsi AI Engine Prompt Foto</label>
                <select
                  value={promptEngine}
                  onChange={(e) => setPromptEngine(e.target.value)}
                  className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-xs text-slate-200 focus:outline-none focus:border-indigo-500"
                >
                  <option value="Nano Banana 2 Lite (Rekomendasi Utama)">🌟 Nano Banana 2 Lite (Rekomendasi Utama)</option>
                  <option value="Nano Banana Pro">Nano Banana Pro</option>
                  <option value="Nano Banana 2">Nano Banana 2</option>
                  <option value="Flux.1 / Midjourney v6 (Hyper-Realistic UGC)">Flux.1 / Midjourney v6 (Handheld Raw UGC Style)</option>
                  <option value="Stable Diffusion XL (Photorealistic Portrait)">Stable Diffusion XL (Realistic UGC)</option>
                  <option value="General Standard UGC Prompt">General Standard Photorealistic Prompt</option>
                </select>
                <p className="text-[11px] text-emerald-400 font-medium">✨ Prompt foto dibuat ultra-detail tanpa batasan karakter.</p>
              </div>

              <div className="space-y-3">
                <label className="text-xs font-semibold text-slate-300 block">4. Opsi AI Engine Prompt Video</label>
                <select
                  value={videoEngine}
                  onChange={(e) => setVideoEngine(e.target.value)}
                  className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-xs text-slate-200 focus:outline-none focus:border-indigo-500"
                >
                  <option value="Omni Flash">Omni Flash</option>
                  <option value="Veo 3.1 lite">Veo 3.1 lite</option>
                  <option value="Veo 3.1 - Fast">Veo 3.1 - Fast</option>
                  <option value="Veo 3.1 Quality">Veo 3.1 Quality</option>
                  <option value="Youtube Create">Youtube Create (Maks 900 Karakter)</option>
                  <option value="Runway Gen-3 / Kling AI / Luma">Runway Gen-3 / Kling AI / Luma</option>
                </select>
                <p className="text-[11px] text-amber-400 font-medium">
                  {videoEngine.toLowerCase().includes('youtube create') 
                    ? '⚠️ Youtube Create aktif: Prompt video dibatasi ketat maks 900 karakter.' 
                    : '✨ Prompt video dibuat optimal & detail tanpa batasan karakter.'}
                </p>
              </div>
            </div>

            {/* Summary Box */}
            <div className="bg-slate-950 border border-slate-800 rounded-xl p-4 text-xs space-y-2 text-slate-300">
              <div className="font-semibold text-indigo-400 flex items-center gap-2">
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 101-18 0 9 9 0 0118 0z"></path></svg>
                Ringkasan Konsep Konten UGC:
              </div>
              <div className="grid grid-cols-2 gap-2 text-slate-400 pt-1">
                <div>• Produk: <span className="text-white font-medium">{productName || 'Belum diisi'}</span></div>
                <div>• Target: <span className="text-white font-medium">{customAudience || targetAudience}</span></div>
                <div>• Scene: <span className="text-white font-medium">{sceneCount} Scene ({sceneCount * sceneDuration}s Total)</span></div>
                <div>• Setting: <span className="text-white font-medium">{backgroundSetting}</span></div>
                <div>• Photo AI: <span className="text-emerald-400 font-medium">{promptEngine}</span></div>
                <div>• Video AI: <span className="text-purple-400 font-medium">{videoEngine}</span></div>
              </div>
            </div>

            <div className="flex items-center justify-between pt-4 border-t border-slate-800">
              <button
                onClick={() => setCurrentStep(2)}
                className="text-xs text-slate-400 hover:text-slate-200 flex items-center gap-1 px-4 py-2"
              >
                ← Kembali
              </button>
              <button
                onClick={handleGenerateStoryboard}
                disabled={isGeneratingStoryboard}
                className="bg-gradient-to-r from-emerald-500 via-teal-500 to-indigo-600 hover:from-emerald-600 hover:to-indigo-700 text-white font-bold text-sm px-8 py-3.5 rounded-xl shadow-xl shadow-emerald-500/20 flex items-center gap-2 transition-all transform hover:scale-[1.02]"
              >
                {isGeneratingStoryboard ? (
                  <>
                    <svg className="w-5 h-5 animate-spin" viewBox="0 0 24 24" fill="none"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                    Meracik Storyboard UGC Hyper-Realistis...
                  </>
                ) : (
                  <>
                    🚀 Proses Storyboard & Prompt Foto/Video
                  </>
                )}
              </button>
            </div>
          </div>
        )}

        {/* STEP 4: Storyboard Output & Prompts Display */}
        {currentStep === 4 && (
          <div className="space-y-8">
            {isGeneratingStoryboard ? (
              <div className="bg-slate-900 border border-slate-800 rounded-2xl p-12 text-center space-y-4 max-w-xl mx-auto shadow-2xl">
                <div className="w-16 h-16 rounded-2xl bg-gradient-to-tr from-indigo-500 to-emerald-500 flex items-center justify-center mx-auto animate-bounce shadow-xl">
                  <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
                </div>
                <h3 className="text-lg font-bold text-slate-100">AI Sedang Menyusun Storyboard UGC</h3>
                <p className="text-xs text-slate-400 leading-relaxed">
                  Menyeimbangkan konsistensi karakter, sudut pengambilan foto mentah ({promptEngine}), prompt video ({videoEngine}), dan naskah Voiceover kasual khas TikTok affiliate...
                </p>
              </div>
            ) : storyboardData ? (
              <>
                {/* Header Info & Strategy */}
                <div className="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl space-y-4">
                  <div className="flex flex-wrap items-center justify-between gap-4 border-b border-slate-800 pb-4">
                    <div>
                      <span className="text-xs text-emerald-400 bg-emerald-500/10 px-2.5 py-1 rounded-full border border-emerald-500/20 font-medium">
                        ✓ UGC Storyboard Ready
                      </span>
                      <h2 className="text-xl font-bold text-slate-100 mt-2">{storyboardData.storyboardTitle || 'Konsep UGC Viral'}</h2>
                      <p className="text-xs text-slate-400 mt-1">{storyboardData.angleStrategy}</p>
                    </div>

                    <div className="flex items-center gap-2">
                      <button
                        onClick={() => {
                          const fullScript = storyboardData.scenes.map(s => `[Scene ${s.sceneNumber} - ${s.duration}]\nVoiceover: ${s.voiceover}\nAction: ${s.actionDescription}\nPhoto Prompt (${promptEngine}): ${s.photoPrompt}\nVideo Prompt (${videoEngine}): ${s.videoPrompt}`).join('\n\n');
                          copyToClipboard(fullScript, 'Semua Storyboard & Prompt');
                        }}
                        className="bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs px-4 py-2 rounded-xl border border-slate-700 font-medium flex items-center gap-2"
                      >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg>
                        Salin Semua Storyboard
                      </button>
                    </div>
                  </div>

                  {/* Scene-by-Scene Storyboard Cards */}
                  <div className="grid grid-cols-1 gap-6 pt-2">
                    {storyboardData.scenes?.map((scene, idx) => (
                      <div key={idx} className="bg-slate-950 border border-slate-800/90 rounded-2xl p-5 hover:border-slate-700 transition-all shadow-lg space-y-4">
                        {/* Scene Header */}
                        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-800/80 pb-3">
                          <div className="flex items-center gap-2.5">
                            <span className="w-8 h-8 rounded-xl bg-indigo-600 text-white font-bold text-xs flex items-center justify-center shadow-md">
                              #{scene.sceneNumber}
                            </span>
                            <div>
                              <span className="text-xs font-bold text-slate-200">{scene.shotType}</span>
                              <span className="text-[11px] text-slate-400 ml-2">({scene.duration})</span>
                            </div>
                          </div>

                          <div className="flex items-center gap-2">
                            {/* Voiceover TTS Trigger */}
                            <button
                              onClick={() => handlePlayVoiceover(idx, scene.voiceover)}
                              className={`text-xs px-3 py-1.5 rounded-lg border flex items-center gap-1.5 transition-all ${
                                playingAudioIndex === idx
                                  ? 'bg-emerald-500 text-white border-emerald-400 animate-pulse'
                                  : 'bg-slate-900 border-slate-700 text-slate-300 hover:text-white'
                              }`}
                            >
                              <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"></path></svg>
                              {playingAudioIndex === idx ? 'Mencoba Suara VO...' : 'Dengar VO'}
                            </button>

                            {/* Generate Image Preview Trigger */}
                            <button
                              onClick={() => handleGenerateSceneImagePreview(idx, scene.photoPrompt)}
                              disabled={generatingImageIndex === idx}
                              className="text-xs bg-indigo-600/20 hover:bg-indigo-600/30 text-indigo-300 border border-indigo-500/30 px-3 py-1.5 rounded-lg flex items-center gap-1.5 transition-all"
                            >
                              {generatingImageIndex === idx ? (
                                <>
                                  <svg className="w-3.5 h-3.5 animate-spin" viewBox="0 0 24 24" fill="none"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                                  Membuat Preview...
                                </>
                              ) : (
                                <>
                                  ✨ Generate Preview Gambar
                                </>
                              )}
                            </button>
                          </div>
                        </div>

                        {/* Content Grid: VO, Action & Prompts */}
                        <div className="grid grid-cols-1 lg:grid-cols-12 gap-5">
                          {/* Script & Voiceover Info */}
                          <div className="lg:col-span-5 space-y-3 bg-slate-900/60 p-4 rounded-xl border border-slate-800">
                            <div>
                              <span className="text-[11px] font-bold text-indigo-400 uppercase tracking-wider block mb-1">
                                🎙️ Voiceover Script (Bahasa Indonesia Kasual):
                              </span>
                              <p className="text-sm font-medium text-slate-100 bg-slate-950 p-3 rounded-lg border border-slate-800/80 leading-relaxed italic">
                                "{scene.voiceover}"
                              </p>
                            </div>

                            <div>
                              <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider block mb-1">
                                🎬 Aksi Visual Scene:
                              </span>
                              <p className="text-xs text-slate-300">
                                {scene.actionDescription}
                              </p>
                            </div>

                            {/* Generated Preview Image Display if available */}
                            {previewImages[idx] && (
                              <div className="mt-3 pt-3 border-t border-slate-800">
                                <span className="text-[11px] font-bold text-emerald-400 block mb-2">
                                  📸 Sample Image Preview (Generated by Gemini Flash):
                                </span>
                                <div className="relative rounded-xl overflow-hidden border border-slate-700 aspect-[9/16] max-w-[180px] mx-auto shadow-xl">
                                  <img src={previewImages[idx]} alt={`Preview Scene ${idx + 1}`} className="w-full h-full object-cover" />
                                </div>
                              </div>
                            )}
                          </div>

                          {/* Prompts Section */}
                          <div className="lg:col-span-7 space-y-3">
                            {/* Photo Prompt Box */}
                            <div className="bg-slate-900/80 p-3.5 rounded-xl border border-slate-800 space-y-1.5">
                              <div className="flex items-center justify-between">
                                <span className="text-[11px] font-bold text-emerald-400 flex items-center gap-1">
                                  📸 PROMPT FOTO ({promptEngine}):
                                  <span className="text-[9px] bg-emerald-500/10 text-emerald-300 px-1.5 py-0.5 rounded border border-emerald-500/20 font-mono">
                                    {scene.photoPrompt?.length || 0} Karakter
                                  </span>
                                </span>
                                <button
                                  onClick={() => copyToClipboard(scene.photoPrompt, `Prompt Foto Scene ${scene.sceneNumber}`)}
                                  className="text-[10px] text-slate-400 hover:text-white bg-slate-800 px-2 py-0.5 rounded border border-slate-700"
                                >
                                  Salin Prompt
                                </button>
                              </div>
                              <p className="text-xs font-mono text-slate-300 bg-slate-950 p-2.5 rounded-lg border border-slate-800 leading-relaxed select-all">
                                {scene.photoPrompt}
                              </p>
                            </div>

                            {/* Video Prompt Box */}
                            <div className="bg-slate-900/80 p-3.5 rounded-xl border border-slate-800 space-y-1.5">
                              <div className="flex items-center justify-between">
                                <span className="text-[11px] font-bold text-purple-400 flex items-center gap-1">
                                  🎥 PROMPT VIDEO ({videoEngine}):
                                  <span className={`text-[9px] px-1.5 py-0.5 rounded border font-mono ${
                                    videoEngine.toLowerCase().includes('youtube create') && scene.videoPrompt?.length > 900
                                      ? 'bg-rose-500/10 text-rose-300 border-rose-500/30'
                                      : 'bg-purple-500/10 text-purple-300 border-purple-500/20'
                                  }`}>
                                    {scene.videoPrompt?.length || 0} Karakter {videoEngine.toLowerCase().includes('youtube create') ? '/ Maks 900' : ''}
                                  </span>
                                </span>
                                <button
                                  onClick={() => copyToClipboard(scene.videoPrompt, `Prompt Video Scene ${scene.sceneNumber}`)}
                                  className="text-[10px] text-slate-400 hover:text-white bg-slate-800 px-2 py-0.5 rounded border border-slate-700"
                                >
                                  Salin Prompt
                                </button>
                              </div>
                              <p className="text-xs font-mono text-slate-300 bg-slate-950 p-2.5 rounded-lg border border-slate-800 leading-relaxed select-all">
                                {scene.videoPrompt}
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Caption & Hashtags Recommendations */}
                {storyboardData.caption && (
                  <div className="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl space-y-4">
                    <div className="flex items-center justify-between border-b border-slate-800 pb-3">
                      <h3 className="font-bold text-slate-100 flex items-center gap-2 text-sm">
                        <span>📝</span> Rekomendasi Caption & Hashtag TikTok / Reels / Shopee
                      </h3>
                      <button
                        onClick={() => {
                          const capText = `${storyboardData.caption.headline}\n\n${storyboardData.caption.body}\n\n${storyboardData.caption.hashtags?.join(' ')}`;
                          copyToClipboard(capText, 'Caption & Hashtag');
                        }}
                        className="text-xs text-indigo-400 hover:text-indigo-300 bg-indigo-500/10 px-3 py-1.5 rounded-lg border border-indigo-500/20"
                      >
                        Salin Caption
                      </button>
                    </div>

                    <div className="bg-slate-950 p-4 rounded-xl border border-slate-800 space-y-3">
                      <p className="text-sm font-bold text-white">{storyboardData.caption.headline}</p>
                      <p className="text-xs text-slate-300 whitespace-pre-line leading-relaxed">{storyboardData.caption.body}</p>
                      <div className="flex flex-wrap gap-1.5 pt-2">
                        {storyboardData.caption.hashtags?.map((tag, tIdx) => (
                          <span key={tIdx} className="text-[11px] text-indigo-400 bg-indigo-500/10 px-2 py-0.5 rounded border border-indigo-500/20">
                            {tag}
                          </span>
                        ))}
                      </div>
                    </div>
                  </div>
                )}
              </>
            ) : null}
          </div>
        )}
      </main>

      {/* Footer */}
      <footer className="border-t border-slate-800 bg-slate-900/40 py-6 text-center text-xs text-slate-500">
        <p>UGC Storyboard & Hyper-Realistic Prompt Studio AI • Ditenagai oleh Gemini 3 Flash Vision & Gemini Flash Image</p>
      </footer>
    </div>
  );
}