.hide-scrollbar::-webkit-scrollbar { display: none; }
    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>
<!-- PLACEHOLDER: HEAD ADDITIONAL -->




<!-- MAIN WRAPPER (Mobile First) -->
<div class="w-full max-w-[620px] mx-auto h-[100dvh] bg-white flex flex-col overflow-hidden relative shadow-2xl">
    
    <!-- HEADER APP -->
    <header class="flex-none z-50 bg-white border-b border-gray-100 px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-amber-500 via-rose-500 to-purple-600 flex items-center justify-center text-white shadow-md shadow-rose-200">
                <i class="fa-solid fa-wand-magic-sparkles text-lg"></i>
            </div>
            <div>
                <h1 class="font-extrabold text-lg tracking-tight bg-gradient-to-r from-rose-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">Auto Caption</h1>
                <p class="text-[11px] text-gray-400 font-medium">AI Reels & Content Studio</p>
            </div>
        </div>
        <div class="flex items-center space-x-2">
            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-600 border border-emerald-200/60">
                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> V1 Ready
            </span>
        </div>
    </header>

    <!-- KONTEN UTAMA (SCROLLABLE AREA) -->
    <main class="flex-1 overflow-y-auto relative pb-20 bg-slate-50/50" id="main-content">
        
        <!-- VIEW 1: FEED BERANDA (INSTAGRAM STYLE) -->
        <section id="view-feed" class="p-4 space-y-5">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-base font-bold text-gray-800">Beranda Feed</h2>
                    <p class="text-xs text-gray-500">Koleksi konten dan Reels buatanmu</p>
                </div>
                <button onclick="switchTab('studio')" class="px-3 py-1.5 bg-gradient-to-r from-rose-500 to-purple-600 text-white text-xs font-semibold rounded-xl shadow-md shadow-rose-200 active:scale-95 transition">
                    + Buat Baru
                </button>
            </div>

            <!-- FEED CONTAINER -->
            <div id="feed-container" class="space-y-4">
                <!-- Feed Items Rendered by JS -->
            </div>
        </section>

        <!-- VIEW 2: STUDIO GENERATOR -->
        <section id="view-studio" class="p-4 space-y-5 hidden">
            <div>
                <h2 class="text-base font-bold text-gray-800">AI Creator Studio</h2>
                <p class="text-xs text-gray-500">Unggah foto & kustomisasi opsi AI</p>
            </div>

            <!-- UPLOAD / CAMERA DROPZONE -->
            <div class="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm space-y-3">
                <div id="upload-box" class="border-2 border-dashed border-gray-200 rounded-xl p-6 text-center cursor-pointer hover:border-purple-400 transition bg-slate-50/50 relative overflow-hidden group">
                    <input type="file" id="image-input" accept="image/*" class="hidden" onchange="handleImageUpload(event)">
                    <div id="preview-placeholder" class="space-y-2">
                        <div class="w-12 h-12 rounded-full bg-purple-50 text-purple-600 flex items-center justify-center mx-auto group-hover:scale-110 transition">
                            <i class="fa-solid fa-cloud-arrow-up text-xl"></i>
                        </div>
                        <p class="text-xs font-semibold text-gray-700">Ketuk untuk Ambil Foto / Upload</p>
                        <p class="text-[11px] text-gray-400">JPG, PNG (Maks 5MB)</p>
                    </div>
                    <!-- Preview Image Container -->
                    <div id="image-preview-container" class="hidden relative">
                        <img id="image-preview" class="w-full h-64 object-cover rounded-lg shadow-sm transition-all duration-300">
                        <button onclick="clearImage(event)" class="absolute top-2 right-2 w-8 h-8 rounded-full bg-black/60 text-white flex items-center justify-center backdrop-blur-md">
                            <i class="fa-solid fa-xmark text-sm"></i>
                        </button>
                    </div>
                </div>

                <!-- AUTO SCAN BUTTON (IMAGE TO TEXT) -->
                <button id="btn-auto-scan" onclick="triggerAutoScan()" class="w-full py-2.5 px-4 bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-semibold text-xs rounded-xl shadow-md hover:opacity-95 active:scale-98 transition flex items-center justify-center gap-2 disabled:opacity-50" disabled>
                    <i class="fa-solid fa-robot"></i>
                    <span>Scan Foto Otomatis (Image-to-Text AI)</span>
                </button>
            </div>

            <!-- AI SENTUHAN VISUAL (FILTERS) -->
            <div class="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm space-y-2">
                <label class="text-xs font-bold text-gray-700 flex items-center gap-1.5">
                    <i class="fa-solid fa-wand-magic text-purple-500"></i> Sentuhan AI (Filter Visual)
                </label>
                <div class="flex gap-2 overflow-x-auto pb-1 hide-scrollbar" id="filter-presets">
                    <!-- Presets generated via JS -->
                </div>
            </div>

            <!-- OPSI PARAMETER CAPTION -->
            <div class="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm space-y-3">
                <h3 class="text-xs font-bold text-gray-700 border-b pb-2 flex items-center gap-1.5">
                    <i class="fa-solid fa-sliders text-rose-500"></i> Racik Parameter Opsi
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="text-[11px] font-semibold text-gray-500">Nama / Subjek</label>
                        <input type="text" id="opt-nama" placeholder="misal: Alex & Kucing" class="w-full text-xs p-2.5 rounded-xl border border-gray-200 focus:outline-none focus:border-purple-500 mt-1">
                    </div>
                    <div>
                        <label class="text-[11px] font-semibold text-gray-500">Lokasi / Tempat</label>
                        <input type="text" id="opt-tempat" placeholder="misal: Cafe Senja, Bali" class="w-full text-xs p-2.5 rounded-xl border border-gray-200 focus:outline-none focus:border-purple-500 mt-1">
                    </div>
                    <div>
                        <label class="text-[11px] font-semibold text-gray-500">Jenis Acara</label>
                        <select id="opt-acara" class="w-full text-xs p-2.5 rounded-xl border border-gray-200 focus:outline-none focus:border-purple-500 mt-1 bg-white">
                            <option value="Nongkrong Santai">Nongkrong Santai</option>
                            <option value="Work & Productivity">Work & Productivity</option>
                            <option value="OOTD / Fashion">OOTD / Fashion</option>
                            <option value="Wisata & Liburan">Wisata & Liburan</option>
                            <option value="Kulineran">Kulineran</option>
                            <option value="Olahraga / Fitness">Olahraga / Fitness</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-[11px] font-semibold text-gray-500">Cuaca / Suasana Hari</label>
                        <select id="opt-cuaca" class="w-full text-xs p-2.5 rounded-xl border border-gray-200 focus:outline-none focus:border-purple-500 mt-1 bg-white">
                            <option value="Cerah Berawan">Cerah Berawan</option>
                            <option value="Hujan Syahdu">Hujan Syahdu</option>
                            <option value="Golden Hour Senja">Golden Hour Senja</option>
                            <option value="Malam Syahdu">Malam Syahdu</option>
                        </select>
                    </div>
                    <div class="col-span-2">
                        <label class="text-[11px] font-semibold text-gray-500">Mood / Gaya Bahasa</label>
                        <select id="opt-mood" class="w-full text-xs p-2.5 rounded-xl border border-gray-200 focus:outline-none focus:border-purple-500 mt-1 bg-white">
                            <option value="Estetik & Aesthetic">Estetik & Minimalis</option>
                            <option value="Lucu & Humoristis">Lucu & Humoristis</option>
                            <option value="Motivasi & Puitis">Motivasi & Puitis</option>
                            <option value="Chill & Relaxed">Chill & Relaxed</option>
                            <option value="Formal & Professional">Formal & Professional</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- GENERATE BUTTON -->
            <button onclick="generateContent()" class="w-full py-3 bg-gradient-to-r from-rose-500 via-purple-600 to-indigo-600 text-white font-bold text-sm rounded-2xl shadow-lg shadow-purple-200 active:scale-98 transition flex items-center justify-center gap-2">
                <i class="fa-solid fa-sparkles"></i> Generate Caption & Voiceover AI
            </button>

            <!-- OUTPUT RESULT BOX -->
            <div id="output-box" class="hidden bg-white p-4 rounded-2xl border border-purple-100 shadow-md space-y-4">
                <div class="flex items-center justify-between border-b pb-2">
                    <span class="text-xs font-bold text-purple-700 flex items-center gap-1">
                        <i class="fa-solid fa-circle-check"></i> Hasil AI Ready!
                    </span>
                    <span class="text-[10px] bg-purple-50 text-purple-600 font-semibold px-2 py-0.5 rounded-md">V1 Studio</span>
                </div>

                <!-- Generated Caption Textarea -->
                <div>
                    <label class="text-[11px] font-semibold text-gray-500">Caption Dihasilkan:</label>
                    <textarea id="result-caption" rows="4" class="w-full text-xs p-3 rounded-xl border border-gray-200 focus:outline-none focus:border-purple-500 mt-1 font-sans leading-relaxed"></textarea>
                </div>

                <!-- AI Voiceover Player -->
                <div class="p-3 bg-slate-50 rounded-xl border border-gray-200/80 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <button onclick="playVoiceover()" id="btn-play-sound" class="w-9 h-9 rounded-full bg-purple-600 text-white flex items-center justify-center shadow-md active:scale-95 transition">
                            <i class="fa-solid fa-play text-xs" id="icon-sound"></i>
                        </button>
                        <div>
                            <p class="text-xs font-bold text-gray-800">AI Voiceover Narrator</p>
                            <p class="text-[10px] text-gray-500" id="voiceover-status">Siap diputar</p>
                        </div>
                    </div>
                    <i class="fa-solid fa-volume-high text-gray-400 text-sm"></i>
                </div>

                <!-- Video Reels Export Modal Preview Trigger -->
                <div class="pt-1">
                    <button onclick="openReelsExportModal()" class="w-full py-2.5 bg-slate-900 text-white text-xs font-bold rounded-xl flex items-center justify-center gap-2 shadow-md hover:bg-slate-800 transition">
                        <i class="fa-solid fa-film text-rose-400"></i> Ekspor / Preview Video Reels (9:16)
                    </button>
                </div>

                <!-- Action Buttons -->
                <div class="grid grid-cols-2 gap-2 pt-1">
                    <button onclick="copyCaption()" class="py-2.5 border border-gray-300 text-gray-700 text-xs font-semibold rounded-xl hover:bg-gray-50 transition flex items-center justify-center gap-1.5">
                        <i class="fa-regular fa-copy"></i> Salin Caption
                    </button>
                    <button onclick="saveToFeed()" class="py-2.5 bg-rose-600 text-white text-xs font-bold rounded-xl shadow-md hover:bg-rose-700 transition flex items-center justify-center gap-1.5">
                        <i class="fa-solid fa-bookmark"></i> Simpan ke Feed
                    </button>
                </div>
            </div>
        </section>

        <!-- VIEW 3: RIWAYAT & MANAGEMENT (CRUD) -->
        <section id="view-history" class="p-4 space-y-4 hidden">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-base font-bold text-gray-800">Riwayat & Database</h2>
                    <p class="text-xs text-gray-500">Kelola postingan & filter konten</p>
                </div>
                <span id="total-count" class="text-xs bg-purple-100 text-purple-700 font-bold px-2.5 py-1 rounded-full">0 Item</span>
            </div>

            <!-- SEARCH & FILTER BAR -->
            <div class="flex gap-2">
                <div class="relative flex-1">
                    <i class="fa-solid fa-magnifying-glass absolute left-3 top-3 text-gray-400 text-xs"></i>
                    <input type="text" id="search-input" onkeyup="filterHistory()" placeholder="Cari caption, tempat, acara..." class="w-full text-xs pl-8 pr-3 py-2.5 rounded-xl border border-gray-200 focus:outline-none focus:border-purple-500">
                </div>
            </div>

            <!-- TABLE / CARDS CONTAINER -->
            <div id="history-list" class="space-y-3">
                <!-- History list items rendered by JS -->
            </div>
        </section>

        <!-- PLACEHOLDER: CONTAINER UTAMA -->
    </main>

    <!-- REELS VIDEO EXPORT MODAL -->
    <div id="reels-modal" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-md hidden flex items-center justify-center p-4">
        <div class="bg-slate-900 w-full max-w-xs rounded-3xl overflow-hidden border border-slate-700 text-white shadow-2xl flex flex-col relative">
            <button onclick="closeReelsModal()" class="absolute top-3 right-3 z-10 w-8 h-8 rounded-full bg-black/50 text-white flex items-center justify-center border border-white/20">
                <i class="fa-solid fa-xmark"></i>
            </button>
            
            <!-- 9:16 Canvas Reel Container -->
            <div class="relative w-full aspect-[9/16] bg-black overflow-hidden flex items-center justify-center" id="reel-preview-box">
                <img id="reel-img-preview" class="w-full h-full object-cover">
                <!-- Text Overlay Overlay -->
                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-black/30 flex flex-col justify-between p-5 text-left">
                    <div class="flex items-center gap-2">
                        <span class="w-3 h-3 rounded-full bg-rose-500 animate-ping"></span>
                        <span class="text-[10px] font-bold tracking-widest uppercase bg-black/40 px-2 py-0.5 rounded-md border border-white/20 backdrop-blur-sm">Auto Reels Preview</span>
                    </div>
                    <div class="space-y-2">
                        <p id="reel-text-preview" class="text-sm font-bold leading-snug drop-shadow-md text-white border-l-2 border-rose-500 pl-3">
                            "Caption reels beranimasi..."
                        </p>
                        <div class="flex items-center gap-2 text-[10px] text-gray-300">
                            <i class="fa-solid fa-music text-rose-400 animate-bounce"></i>
                            <span>Original Audio - Auto Voiceover AI</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Reel Actions -->
            <div class="p-4 bg-slate-900 space-y-2">
                <button onclick="downloadReelSimulation()" class="w-full py-2.5 bg-gradient-to-r from-rose-500 to-purple-600 font-bold text-xs rounded-xl flex items-center justify-center gap-2 shadow-lg">
                    <i class="fa-solid fa-download"></i> Unduh Video Reels (MP4)
                </button>
                <p class="text-[10px] text-gray-400 text-center">Video siap diunggah ke IG Reels / TikTok!</p>
            </div>
        </div>
    </div>

    <!-- BOTTOM NAVIGATION -->
    <nav class="flex-none z-50 bg-white border-t border-gray-100 flex items-center justify-around py-2 px-3">
        <button onclick="switchTab('feed')" id="nav-feed" class="flex flex-col items-center gap-1 text-purple-600 font-bold text-[11px] transition">
            <i class="fa-solid fa-house-chimney text-lg"></i>
            <span>Beranda</span>
        </button>
        <button onclick="switchTab('studio')" id="nav-studio" class="flex flex-col items-center gap-1 text-gray-400 font-medium text-[11px] transition">
            <div class="w-10 h-10 -mt-5 rounded-full bg-gradient-to-tr from-rose-500 to-purple-600 text-white flex items-center justify-center shadow-md shadow-purple-200">
                <i class="fa-solid fa-plus text-lg"></i>
            </div>
            <span>Studio</span>
        </button>
        <button onclick="switchTab('history')" id="nav-history" class="flex flex-col items-center gap-1 text-gray-400 font-medium text-[11px] transition">
            <i class="fa-solid fa-clock-rotate-left text-lg"></i>
            <span>Riwayat</span>
        </button>
    </nav>

    <!-- TOAST NOTIFICATION -->
    <div id="toast" class="fixed top-16 left-1/2 -translate-x-1/2 z-50 px-4 py-2 rounded-2xl bg-slate-900 text-white text-xs font-semibold shadow-xl transition-all duration-300 opacity-0 pointer-events-none flex items-center gap-2">
        <i class="fa-solid fa-circle-info text-rose-400" id="toast-icon"></i>
        <span id="toast-msg">Notifikasi</span>
    </div>

</div>

<!-- JAVASCRIPT APP LOGIC -->
<script>
    /* GANTI */
    const APP_URL = "https://script.google.com/macros/s/AKfycbyENU_gdA_DuUjPSNx6zptQgb-p9tFTw7BSy1HUrp3zuSlIK2veyOKaQK76GDkagek9YQ/exec"; 
    const PREVIEW_MODE = false;

    // Global State
    let currentTab = 'feed';
    let currentFilter = 'filter-original';
    let uploadedImageBase64 = null;
    let generatedData = null;
    let isPlayingAudio = false;

    // Mock Dummy Data
    let postsData = [
        {
            id: '1',
            image: 'https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=600&auto=format&fit=crop',
            caption: 'Nongkrong santai di Cafe Senja. Suasana cerah berawan bikin pikiran makin adem dan fokus! ✨☕ #ChillVibes #CafeSenja #AutoCaption',
            filter: 'filter-warm',
            nama: 'Alex',
            tempat: 'Cafe Senja, Jakarta',
            acara: 'Nongkrong Santai',
            cuaca: 'Cerah Berawan',
            mood: 'Estetik & Aesthetic',
            date: '2026-03-08'
        },
        {
            id: '2',
            image: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&auto=format&fit=crop',
            caption: 'Wisata liburan pantai di Bali. Hembusan angin dan sunset selalu punya cara menyembuhkan lelah. 🌅🌊 #TravelGram #BaliVibes #Sunset',
            filter: 'filter-pastel',
            nama: 'Siti & Dika',
            tempat: 'Pantai Kuta, Bali',
            acara: 'Wisata & Liburan',
            cuaca: 'Golden Hour Senja',
            mood: 'Motivasi & Puitis',
            date: '2026-03-09'
        }
    ];

    // Filter Presets Data
    const filterPresets = [
        { id: 'filter-original', label: 'Original' },
        { id: 'filter-warm', label: 'Warm Glow' },
        { id: 'filter-vintage', label: 'Vintage' },
        { id: 'filter-cyber', label: 'Cyberpunk' },
        { id: 'filter-noir', label: 'Noir Black' },
        { id: 'filter-pastel', label: 'Soft Pastel' }
    ];

    // App Initialization
    document.addEventListener('DOMContentLoaded', () => {
        renderFilterPresets();
        renderFeed();
        renderHistory();
    });

    // Tab Navigation Switcher
    function switchTab(tab) {
        currentTab = tab;
        ['feed', 'studio', 'history'].forEach(t => {
            const sec = document.getElementById(`view-${t}`);
            const nav = document.getElementById(`nav-${t}`);
            if (t === tab) {
                sec.classList.remove('hidden');
                if (t !== 'studio') {
                    nav.className = "flex flex-col items-center gap-1 text-purple-600 font-bold text-[11px] transition";
                }
            } else {
                sec.classList.add('hidden');
                if (t !== 'studio') {
                    nav.className = "flex flex-col items-center gap-1 text-gray-400 font-medium text-[11px] transition";
                }
            }
        });
    }

    // Render Filter Presets
    function renderFilterPresets() {
        const container = document.getElementById('filter-presets');
        container.innerHTML = filterPresets.map(f => `
            <button onclick="selectFilter('${f.id}')" id="btn-${f.id}" class="flex-none px-3 py-1.5 rounded-xl border text-xs font-semibold transition ${f.id === currentFilter ? 'bg-purple-600 text-white border-purple-600 shadow-sm' : 'bg-gray-50 text-gray-600 border-gray-200'}">
                ${f.label}
            </button>
        `).join('');
    }

    function selectFilter(filterId) {
        currentFilter = filterId;
        renderFilterPresets();
        const previewImg = document.getElementById('image-preview');
        previewImg.className = `w-full h-64 object-cover rounded-lg shadow-sm transition-all duration-300 ${filterId}`;
    }

    // Handle Image Upload
    function handleImageUpload(e) {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function(evt) {
            uploadedImageBase64 = evt.target.result;
            document.getElementById('image-preview').src = uploadedImageBase64;
            document.getElementById('preview-placeholder').classList.add('hidden');
            document.getElementById('image-preview-container').classList.remove('hidden');
            document.getElementById('btn-auto-scan').removeAttribute('disabled');
            showToast('Foto berhasil dimuat!');
        };
        reader.readAsDataURL(file);
    }

    function clearImage(e) {
        e.stopPropagation();
        uploadedImageBase64 = null;
        document.getElementById('image-input').value = '';
        document.getElementById('preview-placeholder').classList.remove('hidden');
        document.getElementById('image-preview-container').classList.add('hidden');
        document.getElementById('btn-auto-scan').setAttribute('disabled', 'true');
        document.getElementById('output-box').classList.add('hidden');
    }

    // Trigger Image-to-Text Recognition AI
    function triggerAutoScan() {
        if (!uploadedImageBase64) return;
        showToast('🤖 AI sedang menganalisis objek foto...');
        
        setTimeout(() => {
            // Auto Detect Context Simulation
            document.getElementById('opt-nama').value = 'Saya';
            document.getElementById('opt-tempat').value = 'Spot Estetik';
            document.getElementById('opt-acara').value = 'OOTD / Fashion';
            document.getElementById('opt-cuaca').value = 'Golden Hour Senja';
            document.getElementById('opt-mood').value = 'Estetik & Aesthetic';
            selectFilter('filter-warm');
            showToast('✨ Analisa AI selesai! Opsi otomatis terisi.');
        }, 1200);
    }

    // Generate AI Caption & Sound
    function generateContent() {
        const nama = document.getElementById('opt-nama').value || 'Saya';
        const tempat = document.getElementById('opt-tempat').value || 'Tempat Favorit';
        const acara = document.getElementById('opt-acara').value;
        const cuaca = document.getElementById('opt-cuaca').value;
        const mood = document.getElementById('opt-mood').value;

        showToast('✨ AI meracik caption & audio...');

        // Contextual Caption Builder Engine
        let captionText = "";
        if (mood.includes('Estetik')) {
            captionText = `Momen manis bersama ${nama} di ${tempat}. Menikmati suasana ${cuaca.toLowerCase()} pas acara ${acara.toLowerCase()}. Kadang sederhana itu yang paling berkesan ✨🍃 #AutoCaption #${acara.replace(/\s+/g,'')} #VibesEstetik`;
        } else if (mood.includes('Lucu')) {
            captionText = `Niatnya mau foto gaya di ${tempat}, tapi bentrok sama ${cuaca.toLowerCase()}! 😂 Tetep paksain pas ${acara.toLowerCase()} bareng ${nama}. Jangan lupa senyum! #HumorHariIni #AutoCaption`;
        } else if (mood.includes('Motivasi')) {
            captionText = `Setiap langkah punya ceritanya sendiri. Seperti ${nama} di ${tempat} saat ${cuaca.toLowerCase()}. Nikmati proses ${acara.toLowerCase()} ini. 🌟 #MotivationQuotes #AutoCaption`;
        } else {
            captionText = `Santai sejenak bersama ${nama} di ${tempat}. Momen ${acara.toLowerCase()} dengan cuaca ${cuaca.toLowerCase()} memang paling cocok buat recharging energi. ☕ Horizon indah! #ChillTime #AutoCaption`;
        }

        generatedData = {
            id: Date.now().toString(),
            image: uploadedImageBase64 || 'https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=600&auto=format&fit=crop',
            caption: captionText,
            filter: currentFilter,
            nama, tempat, acara, cuaca, mood,
            date: new Date().toISOString().split('T')[0]
        };

        document.getElementById('result-caption').value = captionText;
        document.getElementById('output-box').classList.remove('hidden');
        document.getElementById('output-box').scrollIntoView({ behavior: 'smooth' });
    }

    // AI Text-To-Speech Voiceover Engine
    function playVoiceover() {
        const text = document.getElementById('result-caption').value;
        if (!text) return;

        if ('speechSynthesis' in window) {
            if (isPlayingAudio) {
                window.speechSynthesis.cancel();
                isPlayingAudio = false;
                updateAudioUI(false);
                return;
            }

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

            utterance.onstart = () => {
                isPlayingAudio = true;
                updateAudioUI(true);
            };

            utterance.onend = () => {
                isPlayingAudio = false;
                updateAudioUI(false);
            };

            window.speechSynthesis.speak(utterance);
        } else {
            showToast('Browser kamu tidak mendukung suara AI TTS');
        }
    }

    function updateAudioUI(playing) {
        const icon = document.getElementById('icon-sound');
        const status = document.getElementById('voiceover-status');
        if (playing) {
            icon.className = 'fa-solid fa-square text-xs';
            status.innerText = 'Memutar suara AI...';
        } else {
            icon.className = 'fa-solid fa-play text-xs';
            status.innerText = 'Siap diputar';
        }
    }

    // Reels Modal Handler
    function openReelsExportModal() {
        const cap = document.getElementById('result-caption').value;
        const img = uploadedImageBase64 || 'https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=600&auto=format&fit=crop';

        document.getElementById('reel-img-preview').src = img;
        document.getElementById('reel-img-preview').className = `w-full h-full object-cover ${currentFilter}`;
        document.getElementById('reel-text-preview').innerText = `"${cap.slice(0, 90)}..."`;
        document.getElementById('reels-modal').classList.remove('hidden');
    }

    function closeReelsModal() {
        document.getElementById('reels-modal').classList.add('hidden');
    }

    function downloadReelSimulation() {
        showToast('🎬 Memproses konversi Video Reels MP4...');
        setTimeout(() => {
            showToast('✅ Reels MP4 berhasil disimpan ke Galeri!');
            closeReelsModal();
        }, 1500);
    }

    // Copy Caption
    function copyCaption() {
        const cap = document.getElementById('result-caption').value;
        navigator.clipboard.writeText(cap);
        showToast('📋 Caption disalin ke clipboard!');
    }

    // Save to Feed & Database (Optimistic UI)
    function saveToFeed() {
        if (!generatedData) return;
        generatedData.caption = document.getElementById('result-caption').value;

        // Update UI Instantly
        postsData.unshift(generatedData);
        renderFeed();
        renderHistory();
        showToast('💾 Konten disimpan ke Feed!');

        // Call Backend in Background if active
        if (!PREVIEW_MODE && APP_URL !== "URL_GAS_KAMU_DISINI") {
            fetch(APP_URL, {
                method: 'POST',
                body: JSON.stringify({ action: 'create', data: generatedData })
            }).catch(err => console.error(err));
        }

        switchTab('feed');
    }

    // Delete Item (CRUD)
    function deletePost(id) {
        postsData = postsData.filter(p => p.id !== id);
        renderFeed();
        renderHistory();
        showToast('🗑️ Postingan dihapus');

        if (!PREVIEW_MODE && APP_URL !== "URL_GAS_KAMU_DISINI") {
            fetch(APP_URL, {
                method: 'POST',
                body: JSON.stringify({ action: 'delete', id: id })
            }).catch(err => console.error(err));
        }
    }

    // Render Feed View
    function renderFeed() {
        const container = document.getElementById('feed-container');
        if (postsData.length === 0) {
            container.innerHTML = `
                <div class="text-center py-12 bg-white rounded-2xl border p-6">
                    <i class="fa-solid fa-photo-film text-3xl text-gray-300 mb-2"></i>
                    <p class="text-xs font-semibold text-gray-500">Belum ada konten tersimpan</p>
                    <button onclick="switchTab('studio')" class="mt-3 text-xs text-purple-600 font-bold">Buat Konten Pertama →</button>
                </div>`;
            return;
        }

        container.innerHTML = postsData.map(item => `
            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
                <div class="p-3 flex items-center justify-between border-b border-gray-50">
                    <div class="flex items-center space-x-2">
                        <div class="w-8 h-8 rounded-full bg-gradient-to-tr from-amber-400 to-rose-500 flex items-center justify-center text-white text-xs font-bold">
                            ${item.nama ? item.nama.charAt(0).toUpperCase() : 'A'}
                        </div>
                        <div>
                            <h4 class="text-xs font-bold text-gray-800">${item.nama || 'Pengguna'}</h4>
                            <p class="text-[10px] text-gray-400">${item.tempat || 'Studio Auto Caption'}</p>
                        </div>
                    </div>
                    <button onclick="deletePost('${item.id}')" class="text-gray-300 hover:text-rose-500 text-xs p-1">
                        <i class="fa-solid fa-trash"></i>
                    </button>
                </div>
                <div class="relative group">
                    <img src="${item.image}" class="w-full h-72 object-cover ${item.filter}">
                    <div class="absolute bottom-2 right-2 bg-black/60 text-white text-[10px] px-2 py-0.5 rounded-full backdrop-blur-sm">
                        ${item.acara || 'General'}
                    </div>
                </div>
                <div class="p-3 space-y-2">
                    <p class="text-xs text-gray-700 leading-relaxed font-sans">${item.caption}</p>
                    <div class="flex items-center justify-between pt-1 border-t border-gray-50 text-[11px] text-gray-400">
                        <span>${item.date}</span>
                        <div class="flex gap-2">
                            <button onclick="navigator.clipboard.writeText('${item.caption.replace(/'/g, "\\'")}'); showToast('Caption disalin!');" class="hover:text-purple-600 font-medium">
                                <i class="fa-regular fa-copy"></i> Salin
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `).join('');
    }

    // Render History View
    function renderHistory() {
        const container = document.getElementById('history-list');
        document.getElementById('total-count').innerText = `${postsData.length} Item`;

        if (postsData.length === 0) {
            container.innerHTML = `<p class="text-xs text-gray-400 text-center py-6">Riwayat kosong</p>`;
            return;
        }

        container.innerHTML = postsData.map(item => `
            <div class="bg-white p-3 rounded-xl border border-gray-100 shadow-sm flex items-center space-x-3">
                <img src="${item.image}" class="w-14 h-14 object-cover rounded-lg flex-none ${item.filter}">
                <div class="flex-1 min-w-0">
                    <h5 class="text-xs font-bold text-gray-800 truncate">${item.tempat || 'Auto Caption'}</h5>
                    <p class="text-[11px] text-gray-500 truncate">${item.caption}</p>
                    <span class="text-[9px] text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded font-semibold">${item.mood || 'Estetik'}</span>
                </div>
                <button onclick="deletePost('${item.id}')" class="text-gray-300 hover:text-rose-500 text-xs p-2">
                    <i class="fa-solid fa-trash"></i>
                </button>
            </div>
        `).join('');
    }

    // Filter History Search
    function filterHistory() {
        const q = document.getElementById('search-input').value.toLowerCase();
        const items = document.querySelectorAll('#history-list > div');
        items.forEach(el => {
            const txt = el.innerText.toLowerCase();
            el.style.display = txt.includes(q) ? 'flex' : 'none';
        });
    }

    // Toast Helper
    function showToast(msg) {
        const toast = document.getElementById('toast');
        document.getElementById('toast-msg').innerText = msg;
        toast.classList.remove('opacity-0', 'pointer-events-none');
        setTimeout(() => {
            toast.classList.add('opacity-0', 'pointer-events-none');
        }, 2500);
    }

    /* PLACEHOLDER: JS BARU */
</script>