@extends('admin.social-automation.layout')

@section('title', 'Yeni Paylaşım')

@section('sma_content')
    @if ($mode)
        <span class="badge badge-mvp" style="margin-left:0; margin-bottom:10px;">
            {{ ['image' => '🖼️ Görsel modu', 'video' => '🎬 Video modu'][$mode] }}
        </span>
    @endif
    <h1>Yeni Paylaşım Oluştur</h1>
    <p class="muted">
        @if ($mode === 'image')
            Sahneyi tarif et, bir görsel üretilsin. Platformu sonraki (onay) ekranından seçersin.
        @elseif ($mode === 'video')
            Sahneyi tarif et, bir hikaye + video üretilsin. Platformu sonraki (onay) ekranından seçersin.
        @else
            Sahneyi tarif et, sistem kısa bir hikaye + görsel/video üretsin. Platformu sonraki (onay) ekranından seçersin — otomatik paylaşılmaz.
        @endif
    </p>

    <form method="POST" action="{{ route('admin.social-automation.jobs.store') }}" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="mode" value="{{ $mode }}">

        @php
            $showSourceToggle = in_array($mode, ['image', 'video'], true);
            $initialSource = $showSourceToggle ? old('source', 'ai') : null;
            $isUploadSource = $initialSource === 'upload';
            $isStockSource = $initialSource === 'stock';
            $hideUpload = in_array($initialSource, ['ai', 'stock'], true);
            $isVideoMode = $mode === 'video';
            $uploadFieldName = $isVideoMode ? 'video' : 'image';
            $uploadAccept = $isVideoMode ? 'video/*' : 'image/*';
        @endphp

        <div class="panel-grid">
            <div class="card">
                <h2 style="font-size:1rem; margin-top:0;">İçerik</h2>

                <label for="name">İsim <span class="muted" style="font-weight:400;">(opsiyonel)</span></label>
                <input type="text" id="name" name="name" maxlength="255" placeholder="örn. Pazartesi kahve paylaşımı" value="{{ old('name') }}">

                @if ($showSourceToggle)
                    <label>Nasıl üretilsin?</label>
                    <div class="toggle-group" id="source-group">
                        <label class="toggle-option">
                            <input type="radio" name="source" value="ai" {{ $initialSource === 'ai' ? 'checked' : '' }}>
                            🤖 AI ile {{ $mode === 'video' ? 'Video' : 'Görsel' }} Üret
                        </label>
                        <label class="toggle-option">
                            <input type="radio" name="source" value="stock" {{ $isStockSource ? 'checked' : '' }}>
                            {{ $isVideoMode ? '🎬 Stok Video ile Üret' : '📷 Stok Fotoğraf Kullan' }}
                        </label>
                        <label class="toggle-option">
                            <input type="radio" name="source" value="upload" {{ $isUploadSource ? 'checked' : '' }}>
                            📤 {{ $isVideoMode ? 'Kendi Videonu Yükle' : 'Kendi Görselini Yükle' }}
                        </label>
                    </div>
                @endif

                <div id="upload-section" @if ($hideUpload) style="display:none;" @endif>
                    <label for="media-file" id="upload-label">{{ $isVideoMode ? 'Video yükle' : 'Görsel yükle' }}{{ $isUploadSource ? '' : ' (opsiyonel)' }}</label>
                    <div id="dropzone" class="dropzone">
                        <input type="file" id="media-file" name="{{ $uploadFieldName }}" accept="{{ $uploadAccept }}" style="display:none;" {{ $hideUpload ? 'disabled' : '' }}>
                        <div id="dropzone-empty">
                            <p id="dropzone-hint" class="muted" style="margin:0;">{{ $isVideoMode ? 'Videoyu' : 'Görseli' }} buraya sürükle bırak, ya da <span style="color:var(--green-600); font-weight:600; text-decoration:underline;">tıklayıp seç</span></p>
                        </div>
                        <div id="dropzone-preview" style="display:none;">
                            @if ($isVideoMode)
                                <video id="dropzone-preview-video" controls playsinline style="max-width:220px; max-height:220px; border-radius:8px; display:block; margin:0 auto 10px; border:1px solid #e2e8e4;"></video>
                            @else
                                <img id="dropzone-preview-img" alt="Yüklenen görsel önizlemesi" style="max-width:160px; max-height:160px; border-radius:8px; display:block; margin:0 auto 10px; border:1px solid #e2e8e4; object-fit:cover;">
                            @endif
                            <p id="dropzone-filename" class="muted" style="margin:0 0 10px; font-weight:600; color:#1a2e22;"></p>
                            <button type="button" id="dropzone-clear" class="btn-clear">✕ Kaldır</button>
                        </div>
                    </div>
                    <p id="ratio-warning" class="muted" style="color:#dc2626; display:none; margin:-6px 0 12px;"></p>
                    <p class="muted" style="margin-top:-10px;">
                        @if ($isVideoMode)
                            Bir video yüklersen AI/video üretimi tamamen atlanır, yüklediğin video kullanılır (üzerine altyazı/seslendirme eklenir). Boş bırakırsan video otomatik üretilir.
                        @else
                            Bir görsel yüklersen AI görsel üretimi atlanır, video bu görselden üretilir. Boş bırakırsan görsel otomatik üretilir.
                        @endif
                    </p>
                    @error('image') <p class="muted" style="color:#dc2626">{{ $message }}</p> @enderror
                    @error('video') <p class="muted" style="color:#dc2626">{{ $message }}</p> @enderror
                </div>

                <label for="keywords" id="keywords-label">{{ $isUploadSource ? 'Konuyu anlat' : 'Tarif et!' }}</label>
                <div class="prompt-box" id="prompt-box">
                    <textarea id="keywords" name="keywords" rows="3" maxlength="1000" placeholder="{{ $isUploadSource ? 'örn. Pazartesi sabahı içilen bir kahve' : 'örn. Bir bahçede kahve içen ve birisiyle konuşan bir adam' }}">{{ old('keywords') }}</textarea>
                    <div class="prompt-toolbar" id="reference-toolbar" @if ($isUploadSource) style="display:none;" @endif>
                        <input type="file" id="reference_image" name="reference_image" accept="image/*" style="display:none;" {{ $isUploadSource ? 'disabled' : '' }}>
                        <button type="button" id="attach-image-btn" class="attach-btn">📎 Görsel ekle</button>
                        <div id="reference-chip" class="reference-chip" style="display:none;">
                            <img id="reference-chip-img" alt="">
                            <span id="reference-chip-filename"></span>
                            <button type="button" id="reference-chip-remove" aria-label="Kaldır">✕</button>
                        </div>
                    </div>
                </div>
                <p id="reference-provider-warning" class="alert alert-error" style="display:none; margin-bottom:12px;">⚠️ Hugging Face referans görsel (image-to-image) desteklemiyor — bu görsel eklenince otomatik olarak başka bir sağlayıcıya geçilecek.</p>
                <p class="muted" id="keywords-hint" style="margin-top:-10px;">
                    @if ($isUploadSource)
                        Yapay zekanın bu görsel için başlık, paylaşım metni ve hashtag yazmasını istiyorsan konuyu kısaca anlat. Boş bırakırsan bunları bir sonraki (onay) ekranından kendin yazarsın.
                    @else
                        Ne kadar detaylı tarif edersen (kim, ne yapıyor, nerede, hangi atmosfer) görsel o kadar isabetli olur. İstersen bir görsel ekleyip AI'ın ondan ilham almasını sağlayabilirsin. Kendi görselini yüklediysen burayı boş bırakabilirsin — başlık/paylaşım metnini bir sonraki (onay) ekranından kendin yazarsın, AI hiç devreye girmez.
                    @endif
                </p>
                @error('keywords') <p class="muted" style="color:#dc2626">{{ $message }}</p> @enderror
                @error('reference_image') <p class="muted" style="color:#dc2626">{{ $message }}</p> @enderror
            </div>

            <div class="card">
                <h2 style="font-size:1rem; margin-top:0;">{{ $isVideoMode ? 'Video Ayarları' : 'Görsel Ayarları' }}</h2>

                <div style="{{ $mode === 'image' ? 'display:none;' : '' }}">
                    <label for="story_provider" style="font-size:.8rem;">Video metni aracı</label>
                    <select name="story_provider" id="story_provider" class="accent-select" style="width:100%;">
                        <option value="auto" {{ $selectedStoryProvider === 'auto' ? 'selected' : '' }}>Otomatik</option>
                        @foreach ($storyProviders as $key => $label)
                            <option value="{{ $key }}" {{ $selectedStoryProvider === $key ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <label for="target_ratio" style="font-size:.8rem;">Boyut</label>
                <select name="target_ratio" id="target_ratio" class="accent-select" style="width:100%;">
                    @foreach ($ratios as $key => $size)
                        <option value="{{ $key }}" {{ $selectedRatio === $key ? 'selected' : '' }}>{{ ['vertical' => 'Dikey (9:16 — Story/Reels/Shorts)', 'square' => 'Kare (1:1 — Post)', 'horizontal' => 'Yatay (16:9 — Normal Video)'][$key] ?? $key }}</option>
                    @endforeach
                </select>
                <div id="ratio-preview" style="display:flex; margin:4px 0 16px; padding:12px; background:#f8faf9; border:1px solid #e5e7eb; border-radius:8px;">
                    <div id="preview-vertical" style="display:none; flex-direction:column; align-items:center; gap:6px;">
                        <div style="width:54px; height:96px; background:#dcfce7; border:2px dashed var(--green-600); border-radius:6px;"></div>
                    </div>
                    <div id="preview-square" style="display:none; flex-direction:column; align-items:center; gap:6px;">
                        <div style="width:70px; height:70px; background:#dcfce7; border:2px dashed var(--green-600); border-radius:6px;"></div>
                    </div>
                    <div id="preview-horizontal" style="display:none; flex-direction:column; align-items:center; gap:6px;">
                        <div style="width:124px; height:70px; background:#dcfce7; border:2px dashed var(--green-600); border-radius:6px;"></div>
                    </div>
                </div>
                <p class="muted" style="margin:-10px 0 16px;">Bu, üretimde kullanılacak boyut. Onay ekranında seçtiğin platformlar başka bir boyut gerektirirse, o boyut o an otomatik tamamlanır.</p>

                <div id="image-provider-section">
                    @if ($showSourceToggle)
                        <div id="image-provider-normal" @if ($isStockSource) style="display:none;" @endif>
                            <label for="image_provider" style="font-size:.8rem;">Görsel oluşturma aracı</label>
                            <select name="image_provider" id="image_provider" class="accent-select" style="width:100%;" {{ $isStockSource ? 'disabled' : '' }}>
                                <option value="auto" {{ $selectedImageProvider === 'auto' ? 'selected' : '' }}>Otomatik</option>
                                @foreach ($imageProviders as $key => $label)
                                    @continue($key === 'pexels')
                                    <option value="{{ $key }}" {{ $selectedImageProvider === $key ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>

                            @if ($isVideoMode)
                                <div style="margin-top:12px;">
                                    <label for="video_provider" style="font-size:.8rem;">Video oluşturma aracı</label>
                                    <select name="video_provider" id="video_provider" class="accent-select" style="width:100%;" {{ $isStockSource ? 'disabled' : '' }}>
                                        <option value="auto" {{ $selectedVideoProvider === 'auto' ? 'selected' : '' }}>Otomatik (görsele yaklaştırma/kaydırma efekti)</option>
                                        @foreach ($videoProviders as $key => $label)
                                            <option value="{{ $key }}" {{ $selectedVideoProvider === $key ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                    <p class="muted" style="margin:4px 0 0;">"Otomatik" gerçek bir video üretmez, üretilen görsele yaklaştırma/kaydırma (zoom/pan) efekti uygular. Gerçek hareketli video için Stability/Runway/Luma seçip Ayarlar'dan ilgili API anahtarını girmen gerekir.</p>
                                </div>
                            @endif
                        </div>
                        <div id="image-provider-stock" @if (! $isStockSource) style="display:none;" @endif>
                            <input type="hidden" name="image_provider" id="image_provider_stock" value="pexels" {{ $isStockSource ? '' : 'disabled' }}>
                            <label style="font-size:.8rem;">{{ $isVideoMode ? 'Video kaynağı' : 'Görsel kaynağı' }}</label>
                            <p class="muted" style="margin:0 0 8px;">{{ $isVideoMode ? '🎬 Stok video (Pexels)' : '📷 Stok fotoğraf (Pexels)' }}</p>
                            <label for="stock_search_query" style="font-size:.8rem;">Stok arama kelimeleri (İngilizce, opsiyonel)</label>
                            <input type="text" name="stock_search_query" id="stock_search_query" placeholder="örn. anime battle scene, retro arcade game" value="{{ old('stock_search_query') }}" style="width:100%;">
                            <p class="muted" style="margin:4px 0 0;">
                                @if ($isVideoMode)
                                    Boş bırakılırsa her sahne için hikayeden otomatik, o sahneye özel bir arama terimi çıkarılır. Anime/oyun/karakter gibi özel bir konu arıyorsan (otomatik terim alakasız sonuç verebiliyor), buraya doğrudan İngilizce bir arama terimi yazarsan TÜM sahnelerde sabit bu terim kullanılır.
                                @else
                                    Boş bırakılırsa arama terimi hikayeden otomatik çıkarılır. Anime/oyun/karakter gibi özel bir konu arıyorsan (otomatik çeviri alakasız sonuç verebiliyor), buraya doğrudan İngilizce bir arama terimi yazmak daha isabetli sonuç verir.
                                @endif
                            </p>

                            @if ($mode === 'video')
                                <label for="max_scene_seconds" style="font-size:.8rem;">Sahne başı maksimum klip süresi (saniye)</label>
                                <input type="number" name="max_scene_seconds" id="max_scene_seconds" min="1" max="15" step="0.5" placeholder="5" value="{{ old('max_scene_seconds') }}" style="width:100%;">
                                <p class="muted" style="margin:4px 0 0;">Hikaye stok video kliplerinden bir slayt gösterisine dönüştürülür — bir klip ekranda bu süreden uzun kalması gerekirse, aynı cümle için farklı bir klip ile devam edilir (video daha dinamik olur). Boş bırakılırsa 5 saniye kullanılır.</p>
                                @error('max_scene_seconds') <p class="muted" style="color:#dc2626">{{ $message }}</p> @enderror
                            @endif
                        </div>
                    @else
                        {{-- Modsuz genel form (doğrudan /create) — kaynak toggle'ı yok,
                             tüm sağlayıcılar (Pexels dahil) tek dropdown'da. --}}
                        <label for="image_provider" style="font-size:.8rem;">Görsel oluşturma aracı</label>
                        <select name="image_provider" id="image_provider" class="accent-select" style="width:100%;">
                            <option value="auto" {{ $selectedImageProvider === 'auto' ? 'selected' : '' }}>Otomatik</option>
                            @foreach ($imageProviders as $key => $label)
                                <option value="{{ $key }}" {{ $selectedImageProvider === $key ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    @endif
                </div>
            </div>

            @if ($mode !== 'image')
                <div class="card">
                    <h2 style="font-size:1rem; margin-top:0;">Ses Ayarları</h2>

                    {{-- Görsel modunda üretilen hiçbir şey video değil, bu yüzden
                         seslendirme kontrolleri sadece video modunda ve genel (modsuz)
                         formda anlamlı. Gizli işaretçi input yine de her zaman
                         gönderiliyor ki ContentJobController bunu "seslendirme bilerek
                         kapatıldı" olarak okusun, API'den hiç gelmemiş gibi varsayılan
                         "açık"a düşmesin. --}}
                    <input type="hidden" name="voice_controls_present" value="1">
                    @php $isElevenLabsVoice = $selectedVoiceProvider === 'elevenlabs'; @endphp
                    <label style="display:flex; align-items:center; gap:8px; font-weight:600; margin-bottom:8px; cursor:pointer;">
                        <input type="checkbox" name="voice_enabled" value="1" {{ old('voice_enabled', true) ? 'checked' : '' }} style="width:auto; margin:0;">
                        🔊 Seslendirme ekle
                        <span class="muted" style="font-weight:400;">(hikaye sesli okunur)</span>
                    </label>
                    <div style="margin-bottom:8px;">
                        <label for="voice_provider" style="font-size:.8rem;">Seslendirme sağlayıcısı</label>
                        <select name="voice_provider" id="voice_provider" class="accent-select" style="width:100%;">
                            <option value="auto" {{ $selectedVoiceProvider === 'auto' ? 'selected' : '' }}>Otomatik</option>
                            @foreach ($voiceProviders as $key => $label)
                                <option value="{{ $key }}" {{ $selectedVoiceProvider === $key ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div id="voice-id-row" style="display:flex; gap:8px; align-items:center; margin-bottom:8px; {{ $isElevenLabsVoice ? 'display:none;' : '' }}">
                        <select name="voice_id" id="voice_id" class="accent-select" style="flex:1;" {{ $isElevenLabsVoice ? 'disabled' : '' }}>
                            @foreach ($voices as $key => $label)
                                <option value="{{ $key }}" {{ $selectedVoice === $key ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <p id="elevenlabs-voice-note" class="muted" style="margin:-4px 0 8px; {{ ! $isElevenLabsVoice ? 'display:none;' : '' }}">ElevenLabs seçildiğinde Ayarlar sayfasından yapılandırılmış tek ses kullanılır — burada seçilecek birden fazla ses yok.</p>
                    <div style="margin-bottom:16px;">
                        <button type="button" id="voice-preview-btn" style="white-space:nowrap; padding:8px 12px;">🔊 Örneği dinle</button>
                    </div>
                    <audio id="voice-preview-audio" controls style="display:none; width:100%; margin-bottom:16px;"></audio>
                </div>
            @endif
        </div>

        <button type="submit">Oluştur</button>
    </form>

    <script>
    (function () {
        var ratioSelect = document.getElementById('target_ratio');

        function updateRatioPreview() {
            var ratio = ratioSelect.value;
            document.getElementById('preview-vertical').style.display = ratio === 'vertical' ? 'flex' : 'none';
            document.getElementById('preview-square').style.display = ratio === 'square' ? 'flex' : 'none';
            document.getElementById('preview-horizontal').style.display = ratio === 'horizontal' ? 'flex' : 'none';
        }

        var isVideoMode = @json($isVideoMode ?? false);
        var dropzone = document.getElementById('dropzone');
        var fileInput = document.getElementById('media-file');
        var dropzoneEmpty = document.getElementById('dropzone-empty');
        var dropzonePreview = document.getElementById('dropzone-preview');
        var dropzonePreviewImg = document.getElementById('dropzone-preview-img');
        var dropzonePreviewVideo = document.getElementById('dropzone-preview-video');
        var dropzoneFilename = document.getElementById('dropzone-filename');
        var dropzoneClear = document.getElementById('dropzone-clear');
        var ratioWarning = document.getElementById('ratio-warning');
        var currentObjectUrl = null;

        function checkImageRatio(imageEl) {
            ratioWarning.style.display = 'none';

            var ratio = imageEl.naturalWidth / imageEl.naturalHeight;
            var target = ratioSelect.value;
            var mismatch = false;
            var targetLabel = '';

            if (target === 'vertical' && Math.abs(ratio - (9 / 16)) > 0.15) {
                mismatch = true; targetLabel = 'dikey (9:16)';
            } else if (target === 'square' && Math.abs(ratio - 1) > 0.15) {
                mismatch = true; targetLabel = 'kare (1:1)';
            } else if (target === 'horizontal' && Math.abs(ratio - (16 / 9)) > 0.15) {
                mismatch = true; targetLabel = 'yatay (16:9)';
            }

            if (mismatch) {
                ratioWarning.textContent = 'Uyarı: bu görsel seçtiğin ' + targetLabel + ' boyutuna uymuyor gibi görünüyor — video oluşturulurken görsel gerilebilir/kırpılabilir. Yine de devam edebilirsin.';
                ratioWarning.style.display = 'block';
            }
        }

        function showPreview(file) {
            if (currentObjectUrl) URL.revokeObjectURL(currentObjectUrl);
            currentObjectUrl = URL.createObjectURL(file);

            if (isVideoMode) {
                dropzonePreviewVideo.src = currentObjectUrl;
            } else {
                dropzonePreviewImg.onload = function () { checkImageRatio(dropzonePreviewImg); };
                dropzonePreviewImg.src = currentObjectUrl;
            }
            dropzoneFilename.textContent = file.name;
            dropzoneEmpty.style.display = 'none';
            dropzonePreview.style.display = 'block';
        }

        function clearSelection() {
            fileInput.value = '';
            if (currentObjectUrl) { URL.revokeObjectURL(currentObjectUrl); currentObjectUrl = null; }
            if (isVideoMode) {
                dropzonePreviewVideo.src = '';
            } else {
                dropzonePreviewImg.src = '';
            }
            dropzoneEmpty.style.display = 'block';
            dropzonePreview.style.display = 'none';
            ratioWarning.style.display = 'none';
        }

        dropzone.addEventListener('click', function (e) {
            if (e.target.closest('#dropzone-clear')) return;
            fileInput.click();
        });

        dropzoneClear.addEventListener('click', function (e) {
            e.stopPropagation();
            clearSelection();
        });

        ['dragenter', 'dragover'].forEach(function (evt) {
            dropzone.addEventListener(evt, function (e) {
                e.preventDefault();
                dropzone.classList.add('dragover');
            });
        });

        ['dragleave', 'drop'].forEach(function (evt) {
            dropzone.addEventListener(evt, function (e) {
                e.preventDefault();
                dropzone.classList.remove('dragover');
            });
        });

        dropzone.addEventListener('drop', function (e) {
            var files = e.dataTransfer.files;
            if (files && files.length > 0) {
                fileInput.files = files;
                fileInput.dispatchEvent(new Event('change'));
            }
        });

        fileInput.addEventListener('change', function () {
            var file = fileInput.files[0];
            if (file) {
                showPreview(file);
            } else {
                clearSelection();
            }
        });

        ratioSelect.addEventListener('change', function () {
            updateRatioPreview();
            if (!isVideoMode && fileInput.files[0] && dropzonePreviewImg.naturalWidth) checkImageRatio(dropzonePreviewImg);
        });

        // Referans görsel artık "Tarif et" kutusunun kendi araç çubuğuna gömülü —
        // "Görsel yükle" (AI'ı tamamen atla) alanından ayrı: burada AI hâlâ yeni bir
        // görsel üretiyor, sadece bu görseli baz alıyor.
        var promptBox = document.getElementById('prompt-box');
        var refFileInput = document.getElementById('reference_image');
        var attachBtn = document.getElementById('attach-image-btn');
        var refChip = document.getElementById('reference-chip');
        var refChipImg = document.getElementById('reference-chip-img');
        var refChipFilename = document.getElementById('reference-chip-filename');
        var refChipRemove = document.getElementById('reference-chip-remove');
        var refProviderWarning = document.getElementById('reference-provider-warning');
        var imageProviderSelect = document.getElementById('image_provider');
        var refObjectUrl = null;

        function updateProviderWarning() {
            // "Stok fotoğraf kullan" seçildiyse bu dropdown hiç render edilmiyor
            // (sabit bir gösterge var onun yerine) — o durumda uyarı zaten anlamsız.
            if (!imageProviderSelect) return;
            var hasReference = !!refFileInput.files[0];
            var usingHuggingFace = imageProviderSelect.value === 'huggingface';
            refProviderWarning.style.display = (hasReference && usingHuggingFace) ? 'block' : 'none';
        }

        function showRefPreview(file) {
            if (refObjectUrl) URL.revokeObjectURL(refObjectUrl);
            refObjectUrl = URL.createObjectURL(file);
            refChipImg.src = refObjectUrl;
            refChipFilename.textContent = file.name;
            attachBtn.style.display = 'none';
            refChip.style.display = 'flex';
            updateProviderWarning();
        }

        function clearRefSelection() {
            refFileInput.value = '';
            if (refObjectUrl) { URL.revokeObjectURL(refObjectUrl); refObjectUrl = null; }
            refChipImg.src = '';
            attachBtn.style.display = 'inline-flex';
            refChip.style.display = 'none';
            updateProviderWarning();
        }

        attachBtn.addEventListener('click', function () { refFileInput.click(); });

        refChipRemove.addEventListener('click', function (e) {
            e.stopPropagation();
            clearRefSelection();
        });

        ['dragenter', 'dragover'].forEach(function (evt) {
            promptBox.addEventListener(evt, function (e) { e.preventDefault(); promptBox.classList.add('dragover'); });
        });
        ['dragleave', 'drop'].forEach(function (evt) {
            promptBox.addEventListener(evt, function (e) { e.preventDefault(); promptBox.classList.remove('dragover'); });
        });
        promptBox.addEventListener('drop', function (e) {
            var files = e.dataTransfer.files;
            if (files && files.length > 0) {
                refFileInput.files = files;
                refFileInput.dispatchEvent(new Event('change'));
            }
        });

        refFileInput.addEventListener('change', function () {
            var file = refFileInput.files[0];
            if (file) showRefPreview(file); else clearRefSelection();
        });

        if (imageProviderSelect) {
            imageProviderSelect.addEventListener('change', updateProviderWarning);
        }

        @if ($showSourceToggle)
            // "Nasıl üretilsin?" (AI/Stok/Kendi görselin) artık ayrı bir sayfa değil,
            // aynı formda bir toggle-buton grubu — bkz. recurring/index.blade.php'deki
            // aynı desen. Gizlenen alanlar `disabled` da yapılıyor ki forma hiç dahil
            // olmasınlar (görünmeyen ama gönderilmiş bir alan gibi sorunları class
            // olarak önlüyor).
            var uploadSection = document.getElementById('upload-section');
            var uploadLabel = document.getElementById('upload-label');
            var referenceToolbar = document.getElementById('reference-toolbar');
            var imageProviderNormal = document.getElementById('image-provider-normal');
            var imageProviderStockSection = document.getElementById('image-provider-stock');
            var imageProviderStockInput = document.getElementById('image_provider_stock');
            var videoProviderSelect = document.getElementById('video_provider');
            var keywordsLabel = document.getElementById('keywords-label');
            var keywordsHint = document.getElementById('keywords-hint');
            var keywordsTextarea = document.getElementById('keywords');

            function applySource(source) {
                var isUpload = source === 'upload';
                var isStock = source === 'stock';
                var isAi = source === 'ai';

                uploadSection.style.display = isUpload ? '' : 'none';
                fileInput.disabled = !isUpload;
                uploadLabel.textContent = (isVideoMode ? 'Video yükle' : 'Görsel yükle') + (isUpload ? '' : ' (opsiyonel)');
                if (!isUpload) clearSelection();

                referenceToolbar.style.display = isUpload ? 'none' : '';
                refFileInput.disabled = isUpload;
                if (isUpload) clearRefSelection();

                imageProviderNormal.style.display = isAi ? '' : 'none';
                imageProviderSelect.disabled = !isAi;
                if (videoProviderSelect) videoProviderSelect.disabled = !isAi;
                imageProviderStockSection.style.display = isStock ? '' : 'none';
                imageProviderStockInput.disabled = !isStock;
                updateProviderWarning();

                if (isUpload) {
                    keywordsLabel.textContent = 'Konuyu anlat';
                    keywordsHint.textContent = "Yapay zekanın bu görsel için başlık, paylaşım metni ve hashtag yazmasını istiyorsan konuyu kısaca anlat. Boş bırakırsan bunları bir sonraki (onay) ekranından kendin yazarsın.";
                    keywordsTextarea.placeholder = 'örn. Pazartesi sabahı içilen bir kahve';
                } else {
                    keywordsLabel.textContent = 'Tarif et!';
                    keywordsHint.textContent = 'Ne kadar detaylı tarif edersen (kim, ne yapıyor, nerede, hangi atmosfer) görsel o kadar isabetli olur. İstersen bir görsel ekleyip AI\'ın ondan ilham almasını sağlayabilirsin. Kendi görselini yüklediysen burayı boş bırakabilirsin — başlık/paylaşım metnini bir sonraki (onay) ekranından kendin yazarsın, AI hiç devreye girmez.';
                    keywordsTextarea.placeholder = 'örn. Bir bahçede kahve içen ve birisiyle konuşan bir adam';
                }
            }

            document.querySelectorAll('#source-group input[name=source]').forEach(function (radio) {
                radio.addEventListener('change', function () { applySource(this.value); });
            });

            applySource(document.querySelector('#source-group input:checked').value);
        @endif

        updateRatioPreview();
    })();

    (function () {
        var btn = document.getElementById('voice-preview-btn');
        // Görsel modunda seslendirme kontrolleri hiç render edilmiyor (video
        // üretilmiyor, seslendirilecek bir şey yok) — o zaman bu betiğin geri
        // kalanını hiç çalıştırmadan çıkıyoruz, aksi halde null elemente
        // erişmeye çalışıp sayfanın geri kalan script'ini sessizce kırardı.
        if (!btn) return;

        var select = document.getElementById('voice_id');
        var audio = document.getElementById('voice-preview-audio');
        var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        var defaultLabel = btn.textContent;

        var providerSelect = document.getElementById('voice_provider');
        var voiceIdRow = document.getElementById('voice-id-row');
        var elevenLabsNote = document.getElementById('elevenlabs-voice-note');

        function applyVoiceProvider() {
            var isElevenLabs = providerSelect.value === 'elevenlabs';
            voiceIdRow.style.display = isElevenLabs ? 'none' : 'flex';
            select.disabled = isElevenLabs;
            elevenLabsNote.style.display = isElevenLabs ? 'block' : 'none';
        }

        if (providerSelect) {
            providerSelect.addEventListener('change', applyVoiceProvider);
        }

        // Üretim kuyruk üzerinden (arka planda) yapılıyor, bu yüzden burada
        // sonucu doğrudan almak yerine hazır olana kadar birkaç kez yokluyoruz.
        function pollStatus(previewId, attemptsLeft) {
            if (attemptsLeft <= 0) {
                throw new Error('Ses örneği zaman aşımına uğradı.');
            }

            return fetch('{{ route("admin.social-automation.voice.preview-status", ["previewId" => "__PID__"]) }}'.replace('__PID__', previewId), { headers: { 'Accept': 'application/json' } })
                .then(function (response) { return response.json(); })
                .then(function (data) {
                    // Üretim gerçekten başarısız olduysa (edge-tts hatası vb.) bunu
                    // hemen fark edip 20 saniye boyunca boşuna beklemek yerine
                    // gerçek sebebi göstermek için ayrı bir "error" alanı var.
                    if (data.error) throw new Error(data.error);
                    if (data.ready) return data.url;
                    return new Promise(function (resolve) { setTimeout(resolve, 1000); })
                        .then(function () { return pollStatus(previewId, attemptsLeft - 1); });
                });
        }

        btn.addEventListener('click', function () {
            btn.disabled = true;
            btn.textContent = '⏳ Üretiliyor...';

            // "Otomatik" seçiliyken önizleme için edge-tts varsayılıyor —
            // gerçek üretimde de "Otomatik" ilk olarak edge-tts'i dener,
            // ElevenLabs sadece o başarısız olursa devreye girer, o yüzden
            // "Otomatik"i tek başına önizlemenin bir anlamı yok.
            var isElevenLabs = providerSelect && providerSelect.value === 'elevenlabs';
            var body = isElevenLabs ? { provider: 'elevenlabs' } : { provider: 'edge_tts', voice: select.value };

            fetch('{{ route('admin.social-automation.voice.preview') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json',
                },
                body: JSON.stringify(body),
            })
                .then(function (response) { return response.json(); })
                .then(function (data) {
                    // Bu ses daha önce üretilip diske kaydedildiyse controller
                    // kuyruğa hiç atmadan doğrudan hazır cevap döndürüyor —
                    // o durumda boşuna 1 saniyelik yoklama döngüsüne girmiyoruz.
                    if (data.ready) return data.url;
                    return pollStatus(data.id, 20);
                })
                .then(function (url) {
                    // Otomatik çalmayı BİLEREK denemiyoruz: hem tarayıcıların otomatik
                    // oynatma engeli hem de src değiştirip hemen ardından play()
                    // çağırmanın (özellikle ikinci/üçüncü kez farklı bir ses seçince)
                    // yüklemeyi kesintiye uğratıp sessizce hiç çalmama sorununa yol
                    // açtığı gerçek bir hesapla doğrulandı. Sadece src'i ayarlayıp
                    // görünür native kontrolleri gösteriyoruz — kullanıcı play tuşuna
                    // bastığında tarayıcı temiz bir şekilde yüklemeye başlıyor.
                    audio.pause();
                    audio.src = url;
                    audio.style.display = 'block';
                })
                .catch(function (err) {
                    alert(err.message || 'Ses örneği üretilemedi.');
                })
                .finally(function () {
                    btn.disabled = false;
                    btn.textContent = defaultLabel;
                });
        });
    })();
    </script>
@endsection