@extends('layouts.app')

@section('content')
<div class="space-y-4">

    <!-- Top Action Bar -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-3 pb-3 border-b border-slate-800">
        <div class="flex items-center gap-3">
            <input type="text" id="studio-project-title"
                value="{{ $project->title ?? 'New Text Video Animation' }}"
                class="bg-transparent text-xl font-black text-white hover:bg-slate-900 focus:bg-slate-900 border border-transparent focus:border-amber-500 rounded px-2.5 py-1 focus:outline-none transition max-w-md w-full"
                placeholder="Enter Project Title...">

            <span class="text-[11px] font-mono px-2 py-0.5 rounded bg-slate-800 text-amber-400 border border-slate-700">
                <span id="studio-est-duration">5.0s</span>
            </span>
        </div>

        <div class="flex items-center gap-2.5">
            <!-- Template Quick Load -->
            <select id="studio-template-select" onchange="loadSelectedTemplate(this.value)"
                class="bg-slate-900 border border-slate-700 text-xs rounded-lg px-2.5 py-1.5 text-slate-300 focus:border-amber-500 focus:outline-none">
                <option value="">Load Template Preset...</option>
                @foreach($templates as $tmpl)
                    <option value="{{ $tmpl->id }}">{{ $tmpl->name }}</option>
                @endforeach
            </select>

            <!-- Save Project -->
            <button type="button" id="studio-save-btn" class="btn-secondary text-xs">
                <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg>
                <span>Save Project</span>
            </button>

            <!-- Export Genuine MP4 -->
            <button type="button" id="studio-export-btn" class="btn-primary text-xs">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                <span>Render & Export MP4</span>
            </button>
        </div>
    </div>

    <!-- Main Workspace Grid: Preview on Left, Panels on Right -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">

        <!-- Column 1-7: Live Canvas Stage & Playback Controls -->
        <div class="lg:col-span-7 flex flex-col items-center">
            <!-- Aspect Ratio Box Container -->
            <div class="w-full bg-[#07090E] border border-slate-800 rounded-xl p-4 flex flex-col items-center justify-center min-h-[580px] shadow-2xl relative overflow-hidden">
                <div class="absolute top-3 left-3 flex items-center gap-2">
                    <span id="studio-capability-badge" class="text-[10px] font-mono px-2 py-0.5 rounded bg-emerald-950/80 text-emerald-400 border border-emerald-500/30">
                        WebCodecs MP4 Ready
                    </span>
                </div>

                <div class="absolute top-3 right-3 flex items-center gap-2">
                    <label class="flex items-center gap-1.5 cursor-pointer text-xs text-slate-400 bg-slate-900/90 px-2 py-1 rounded border border-slate-800">
                        <input type="checkbox" id="studio-safe-margins" class="rounded bg-slate-800 border-slate-700 text-amber-500 focus:ring-0">
                        <span class="text-[11px]">Safe Guides</span>
                    </label>
                </div>

                <!-- Canvas Preview -->
                <div class="relative flex items-center justify-center max-h-[560px] max-w-full my-auto">
                    <canvas id="studio-canvas" class="rounded-lg shadow-2xl border border-slate-800/80 max-h-[520px] max-w-full object-contain"></canvas>
                </div>
            </div>

            <!-- Playback Scrubber & Toolbar -->
            <div class="w-full studio-card p-3.5 mt-3 space-y-3">
                <!-- Timeline slider -->
                <div class="flex items-center gap-3">
                    <input type="range" id="studio-scrubber" min="0" max="5" step="0.05" value="0"
                        class="w-full h-1.5 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-amber-500">
                    <span id="studio-time-display" class="font-mono text-xs text-amber-400 min-w-[75px] text-right">0.0s / 5.0s</span>
                </div>

                <!-- Control Buttons -->
                <div class="flex items-center justify-between pt-1">
                    <div class="flex items-center gap-2">
                        <button type="button" id="studio-play-btn" class="btn-primary text-xs py-1.5 px-3">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                            <span>Play Preview</span>
                        </button>

                        <button type="button" id="studio-restart-btn" class="btn-secondary text-xs py-1.5 px-2.5" title="Restart Preview">
                            <svg class="w-4 h-4 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                        </button>
                    </div>

                    <!-- Audio quick controls -->
                    <div class="flex items-center gap-3">
                        <button type="button" id="studio-test-audio-btn" class="text-xs text-slate-400 hover:text-amber-400 underline" title="Hear Keystroke Sound">
                            Sound Check
                        </button>

                        <div class="flex items-center gap-1.5">
                            <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="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"/></svg>
                            <input type="range" id="studio-audio-volume" min="0" max="1" step="0.05" value="0.75"
                                class="w-16 h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-amber-500">
                        </div>

                        <label class="flex items-center gap-1.5 text-xs text-slate-300 cursor-pointer">
                            <input type="checkbox" id="studio-audio-toggle" checked class="rounded bg-slate-800 border-slate-700 text-amber-500 focus:ring-0">
                            <span class="text-[11px]">Audio</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Column 8-12: Editor Controls Tabs / Panels -->
        <div class="lg:col-span-5 space-y-4">

            <!-- Panel 1: Text Input & Content -->
            <div class="studio-card p-4 space-y-3">
                <div class="flex items-center justify-between border-b border-slate-800 pb-2">
                    <h3 class="font-bold text-xs uppercase tracking-wider text-amber-400 flex items-center gap-1.5">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        Text & Script
                    </h3>
                    <div class="flex items-center gap-2 text-[11px] text-slate-400 font-mono">
                        <span id="studio-word-count">0 words</span>
                        <span>&bull;</span>
                        <span id="studio-char-count">0 chars</span>
                    </div>
                </div>

                <textarea id="studio-text-content" rows="4"
                    class="w-full p-3 bg-[#07090E] border border-slate-700 rounded-lg text-sm text-slate-100 placeholder-slate-500 focus:border-amber-500 focus:outline-none transition leading-relaxed font-sans"
                    placeholder="Enter or paste your quote, motivational thought, or script here...">{{ $project->text_content ?? "“The future belongs to those who believe in the beauty of their dreams.”\n\n— Eleanor Roosevelt" }}</textarea>

                <!-- Format / Ratio Selection -->
                <div class="grid grid-cols-2 gap-3 pt-1">
                    <div>
                        <label class="block text-[11px] text-slate-400 mb-1">Aspect Ratio</label>
                        <select id="studio-aspect-ratio" class="w-full bg-[#07090E] border border-slate-700 text-xs rounded-lg px-2.5 py-1.5 text-slate-200 focus:border-amber-500 focus:outline-none">
                            <option value="9:16" {{ ($project->aspect_ratio ?? '9:16') === '9:16' ? 'selected' : '' }}>9:16 Vertical (Reels/TikTok)</option>
                            <option value="1:1" {{ ($project->aspect_ratio ?? '') === '1:1' ? 'selected' : '' }}>1:1 Square (Instagram/FB)</option>
                            <option value="16:9" {{ ($project->aspect_ratio ?? '') === '16:9' ? 'selected' : '' }}>16:9 Landscape (YouTube)</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-[11px] text-slate-400 mb-1">Export Resolution</label>
                        <select id="studio-resolution" class="w-full bg-[#07090E] border border-slate-700 text-xs rounded-lg px-2.5 py-1.5 text-slate-200 focus:border-amber-500 focus:outline-none">
                            <option value="1080p">1080p Full HD</option>
                            <option value="720p">720p HD</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Panel 2: Typing Animation & Timing -->
            <div class="studio-card p-4 space-y-3">
                <div class="border-b border-slate-800 pb-2">
                    <h3 class="font-bold text-xs uppercase tracking-wider text-amber-400 flex items-center gap-1.5">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Typing Animation & Cadence
                    </h3>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-[11px] text-slate-400 mb-1">Appearance Mode</label>
                        <select id="studio-anim-mode" class="w-full bg-[#07090E] border border-slate-700 text-xs rounded-lg px-2.5 py-1.5 text-slate-200 focus:border-amber-500 focus:outline-none">
                            <option value="char">Character by Character</option>
                            <option value="word">Word by Word</option>
                            <option value="line">Line by Line</option>
                            <option value="sentence">Sentence by Sentence</option>
                        </select>
                    </div>

                    <div>
                        <div class="flex items-center justify-between text-[11px] text-slate-400 mb-1">
                            <span>Typing Speed</span>
                            <span id="studio-anim-speed-val" class="font-mono text-amber-400">45ms</span>
                        </div>
                        <input type="range" id="studio-anim-speed" min="15" max="150" step="5" value="45"
                            class="w-full h-1.5 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-amber-500">
                    </div>
                </div>

                <div class="grid grid-cols-3 gap-2 pt-1 text-xs">
                    <div>
                        <label class="block text-[10px] text-slate-400 mb-1">Word Pause (ms)</label>
                        <input type="number" id="studio-word-pause" value="80" step="20" min="0" max="1000"
                            class="w-full bg-[#07090E] border border-slate-700 rounded px-2 py-1 text-slate-200 text-xs font-mono">
                    </div>
                    <div>
                        <label class="block text-[10px] text-slate-400 mb-1">Sentence Pause</label>
                        <input type="number" id="studio-sentence-pause" value="400" step="50" min="0" max="2000"
                            class="w-full bg-[#07090E] border border-slate-700 rounded px-2 py-1 text-slate-200 text-xs font-mono">
                    </div>
                    <div>
                        <label class="block text-[10px] text-slate-400 mb-1">End Delay (ms)</label>
                        <input type="number" id="studio-end-delay" value="2200" step="200" min="500" max="6000"
                            class="w-full bg-[#07090E] border border-slate-700 rounded px-2 py-1 text-slate-200 text-xs font-mono">
                    </div>
                </div>

                <!-- Cursor settings -->
                <div class="grid grid-cols-3 gap-2 pt-1 text-xs">
                    <div>
                        <label class="block text-[10px] text-slate-400 mb-1">Cursor Style</label>
                        <select id="studio-cursor-style" class="w-full bg-[#07090E] border border-slate-700 rounded px-1.5 py-1 text-slate-200 text-xs">
                            <option value="line">Vertical Line</option>
                            <option value="block">Solid Block</option>
                            <option value="underscore">Underscore</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-[10px] text-slate-400 mb-1">Cursor Color</label>
                        <input type="color" id="studio-cursor-color" value="#FBBF24"
                            class="w-full h-7 bg-[#07090E] border border-slate-700 rounded cursor-pointer p-0.5">
                    </div>
                    <div class="flex items-end pb-1.5">
                        <label class="flex items-center gap-1.5 cursor-pointer text-slate-300">
                            <input type="checkbox" id="studio-cursor-toggle" checked class="rounded bg-slate-800 border-slate-700 text-amber-500 focus:ring-0">
                            <span class="text-[11px]">Blink Cursor</span>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Panel 3: Typography & Positioning -->
            <div class="studio-card p-4 space-y-3">
                <div class="border-b border-slate-800 pb-2">
                    <h3 class="font-bold text-xs uppercase tracking-wider text-amber-400 flex items-center gap-1.5">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                        Typography & Styling
                    </h3>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-[11px] text-slate-400 mb-1">Font Family</label>
                        <select id="studio-font-family" class="w-full bg-[#07090E] border border-slate-700 text-xs rounded-lg px-2.5 py-1.5 text-slate-200 focus:border-amber-500 focus:outline-none">
                            <option value="Inter, sans-serif">Inter (Modern Clean)</option>
                            <option value="Merriweather, serif">Merriweather (Classic Serif)</option>
                            <option value="Georgia, serif">Georgia (Warm Story)</option>
                            <option value="'JetBrains Mono', monospace">JetBrains Mono (Tech/Code)</option>
                        </select>
                    </div>

                    <div>
                        <div class="flex items-center justify-between text-[11px] text-slate-400 mb-1">
                            <span>Font Size</span>
                            <span id="studio-font-size-val" class="font-mono text-amber-400">48px</span>
                        </div>
                        <input type="range" id="studio-font-size" min="24" max="96" step="2" value="48"
                            class="w-full h-1.5 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-amber-500">
                    </div>
                </div>

                <div class="grid grid-cols-3 gap-2 pt-1 text-xs">
                    <div>
                        <label class="block text-[10px] text-slate-400 mb-1">Font Weight</label>
                        <select id="studio-font-weight" class="w-full bg-[#07090E] border border-slate-700 rounded px-1.5 py-1 text-slate-200 text-xs">
                            <option value="400">Regular (400)</option>
                            <option value="600" selected>SemiBold (600)</option>
                            <option value="800">ExtraBold (800)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-[10px] text-slate-400 mb-1">Text Color</label>
                        <input type="color" id="studio-text-color" value="#FFFFFF"
                            class="w-full h-7 bg-[#07090E] border border-slate-700 rounded cursor-pointer p-0.5">
                    </div>
                    <div>
                        <label class="block text-[10px] text-slate-400 mb-1">Alignment</label>
                        <select id="studio-text-align" class="w-full bg-[#07090E] border border-slate-700 rounded px-1.5 py-1 text-slate-200 text-xs">
                            <option value="center" selected>Center</option>
                            <option value="left">Left</option>
                            <option value="right">Right</option>
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3 pt-1 text-xs">
                    <div>
                        <label class="block text-[10px] text-slate-400 mb-1">Line Height</label>
                        <input type="number" id="studio-line-height" value="1.5" step="0.1" min="1.0" max="2.5"
                            class="w-full bg-[#07090E] border border-slate-700 rounded px-2 py-1 text-slate-200 text-xs font-mono">
                    </div>
                    <div>
                        <label class="block text-[10px] text-slate-400 mb-1">Vertical Position</label>
                        <select id="studio-position-y" class="w-full bg-[#07090E] border border-slate-700 rounded px-2 py-1 text-slate-200 text-xs">
                            <option value="center" selected>Center (Balanced)</option>
                            <option value="top">Top (Headliner)</option>
                            <option value="bottom">Bottom (Subtitled)</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Panel 4: Typing Sound Engine -->
            <div class="studio-card p-4 space-y-3">
                <div class="border-b border-slate-800 pb-2">
                    <h3 class="font-bold text-xs uppercase tracking-wider text-amber-400 flex items-center gap-1.5">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 100-6 3 3 0 000 6z"/></svg>
                        Typing Sound Engine
                    </h3>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-[11px] text-slate-400 mb-1">Keyboard Profile</label>
                        <select id="studio-audio-profile" class="w-full bg-[#07090E] border border-slate-700 text-xs rounded-lg px-2.5 py-1.5 text-slate-200 focus:border-amber-500 focus:outline-none">
                            <option value="mechanical" selected>Mechanical (Tactile Click)</option>
                            <option value="typewriter">Vintage Typewriter</option>
                            <option value="soft">Soft Laptop Chiclet</option>
                        </select>
                    </div>

                    <div>
                        <div class="flex items-center justify-between text-[11px] text-slate-400 mb-1">
                            <span>Audio Level</span>
                            <span id="studio-audio-volume-val" class="font-mono text-amber-400">75%</span>
                        </div>
                        <input type="range" id="studio-audio-volume" min="0" max="1" step="0.05" value="0.75"
                            class="w-full h-1.5 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-amber-500">
                    </div>
                </div>
            </div>

            <!-- Panel 5: Background & Visual Effects -->
            <div class="studio-card p-4 space-y-3">
                <div class="border-b border-slate-800 pb-2">
                    <h3 class="font-bold text-xs uppercase tracking-wider text-amber-400 flex items-center gap-1.5">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="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"/></svg>
                        Background & Media
                    </h3>
                </div>

                <div>
                    <label class="block text-[11px] text-slate-400 mb-1">Background Source</label>
                    <select id="studio-bg-type" class="w-full bg-[#07090E] border border-slate-700 text-xs rounded-lg px-2.5 py-1.5 text-slate-200 focus:border-amber-500 focus:outline-none">
                        <option value="gradient" selected>Two-Tone Linear Gradient</option>
                        <option value="color">Solid Flat Color</option>
                        <option value="image">Custom Upload (Image)</option>
                        <option value="video">Custom Upload (Video MP4)</option>
                    </select>
                </div>

                <!-- Gradient Controls -->
                <div id="studio-bg-gradient-panel" class="grid grid-cols-2 gap-2 text-xs">
                    <div>
                        <label class="block text-[10px] text-slate-400 mb-1">Gradient Start</label>
                        <input type="color" id="studio-grad-start" value="#0F172A"
                            class="w-full h-7 bg-[#07090E] border border-slate-700 rounded cursor-pointer p-0.5">
                    </div>
                    <div>
                        <label class="block text-[10px] text-slate-400 mb-1">Gradient End</label>
                        <input type="color" id="studio-grad-end" value="#020617"
                            class="w-full h-7 bg-[#07090E] border border-slate-700 rounded cursor-pointer p-0.5">
                    </div>
                </div>

                <!-- Solid Color Controls -->
                <div id="studio-bg-solid-panel" style="display:none;" class="text-xs">
                    <label class="block text-[10px] text-slate-400 mb-1">Background Color</label>
                    <input type="color" id="studio-bg-color" value="#0B0F17"
                        class="w-full h-7 bg-[#07090E] border border-slate-700 rounded cursor-pointer p-0.5">
                </div>

                <!-- Upload Media Controls -->
                <div id="studio-bg-upload-panel" style="display:none;" class="text-xs space-y-2">
                    <label class="block text-[10px] text-slate-400">Select Image (JPG/PNG) or Video (MP4)</label>
                    <input type="file" id="studio-bg-file-input" accept="image/*,video/mp4"
                        class="w-full text-xs text-slate-400 file:mr-2 file:py-1 file:px-2 file:rounded file:border-0 file:text-xs file:font-semibold file:bg-slate-800 file:text-amber-400 hover:file:bg-slate-700">
                </div>

                <!-- Overlay Opacity & Motion -->
                <div class="grid grid-cols-2 gap-3 pt-1">
                    <div>
                        <div class="flex items-center justify-between text-[11px] text-slate-400 mb-1">
                            <span>Dark Overlay</span>
                            <span id="studio-overlay-opacity-val" class="font-mono text-amber-400">45%</span>
                        </div>
                        <input type="range" id="studio-overlay-opacity" min="0" max="0.9" step="0.05" value="0.45"
                            class="w-full h-1.5 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-amber-500">
                    </div>

                    <div class="flex items-end pb-1.5">
                        <label class="flex items-center gap-1.5 cursor-pointer text-slate-300">
                            <input type="checkbox" id="studio-bg-motion" checked class="rounded bg-slate-800 border-slate-700 text-amber-500 focus:ring-0">
                            <span class="text-[11px]">Subtle Motion (Ken Burns)</span>
                        </label>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>

<!-- Modal: MP4 Browser Export Progress -->
<div id="studio-export-modal" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 hidden">
    <div class="bg-[#121824] border border-slate-800 rounded-2xl max-w-md w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-slate-800 pb-3">
            <h3 class="font-bold text-base text-white flex items-center gap-2">
                <span class="w-2.5 h-2.5 rounded-full bg-amber-400 animate-pulse"></span>
                Exporting MP4 (H.264 & AAC)
            </h3>
            <span id="studio-export-progress-percent" class="font-mono text-sm font-bold text-amber-400">0%</span>
        </div>

        <p class="text-xs text-slate-400">
            Rendering canvas frames with synchronized Web Audio typing sound directly on your computer. Zero server rendering cost.
        </p>

        <!-- Progress bar -->
        <div class="w-full bg-slate-800 rounded-full h-3 overflow-hidden p-0.5 border border-slate-700">
            <div id="studio-export-progress-bar" class="bg-gradient-to-r from-amber-500 to-amber-400 h-full rounded-full transition-all duration-150" style="width: 0%"></div>
        </div>

        <div class="flex items-center justify-between text-xs text-slate-400 font-mono">
            <span id="studio-export-status-text">Preparing render engine...</span>
            <span id="studio-export-eta-text">Calculating ETA...</span>
        </div>

        <!-- Action buttons after completion -->
        <div id="studio-completed-actions" class="pt-3 border-t border-slate-800 flex flex-col sm:flex-row gap-2.5 hidden">
            <button type="button" id="studio-download-mp4-btn" class="btn-primary text-xs flex-1">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                <span>Download MP4</span>
            </button>

            <button type="button" id="studio-upload-library-btn" class="btn-secondary text-xs flex-1 text-amber-400 border-amber-500/40">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
                <span>Save & Schedule</span>
            </button>
        </div>

        <div class="pt-2 flex justify-end">
            <button type="button" id="studio-cancel-export-btn" class="text-xs text-slate-400 hover:text-rose-400 transition">
                Cancel
            </button>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const canvas = document.getElementById('studio-canvas');
        window.studio = new StudioController();

        const initialProject = @json($project ?? null);
        window.studio.init(canvas, initialProject);

        // Check browser capabilities truthfully
        if (window.checkVideoCapabilities) {
            const caps = window.checkVideoCapabilities();
            const badge = document.getElementById('studio-capability-badge');
            if (badge) {
                badge.textContent = caps.description;
                if (!caps.mp4Direct) {
                    badge.classList.remove('text-emerald-400', 'bg-emerald-950/80', 'border-emerald-500/30');
                    badge.classList.add('text-amber-400', 'bg-amber-950/80', 'border-amber-500/30');
                }
            }
        }
    });

    const preloadedTemplates = @json($templates ?? []);
    function loadSelectedTemplate(templateId) {
        if (!templateId) return;
        const found = preloadedTemplates.find(t => t.id == templateId);
        if (found && found.config) {
            const config = typeof found.config === 'string' ? JSON.parse(found.config) : found.config;
            window.studio.loadState(config);
        }
    }
</script>
@endpush
@endsection