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

@section('title', 'Otomatik İçerik')

@section('sma_content')
    <h1>Otomatik İçerik</h1>
    <p class="muted">Bir tarif + platform seçimini bir kere kur, sistem her tetiklendiğinde kendiliğinden yeni bir hikaye+görsel/video üretip <strong>otomatik olarak paylaşır</strong> — onay beklemez. Ürettiklerini plan detay sayfasından her zaman geriye dönük kontrol edebilirsin.</p>

    <form method="POST" action="{{ route('admin.social-automation.recurring.store') }}" enctype="multipart/form-data" id="recurring-form">
        @csrf

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

                <label for="name">Plan adı</label>
                <input type="text" id="name" name="name" placeholder="örn. Günlük İlham Sözü" value="{{ old('name') }}" required>
                @error('name') <p class="muted" style="color:#dc2626">{{ $message }}</p> @enderror

                <label>Ne üretilsin?</label>
                <div class="toggle-group" id="mode-group">
                    <label class="toggle-option">
                        <input type="radio" name="mode" value="image" {{ old('mode') === 'image' ? 'checked' : '' }}>
                        🖼️ Görsel
                    </label>
                    <label class="toggle-option">
                        <input type="radio" name="mode" value="video" {{ old('mode', 'video') === 'video' ? 'checked' : '' }}>
                        🎬 Video
                    </label>
                </div>
                @error('mode') <p class="muted" style="color:#dc2626">{{ $message }}</p> @enderror

                <label>Nasıl üretilsin?</label>
                <div class="toggle-group" id="source-group">
                    <label class="toggle-option">
                        <input type="radio" name="source" value="ai" {{ old('source', 'ai') === 'ai' ? 'checked' : '' }}>
                        🤖 AI ile Üret
                    </label>
                    <label class="toggle-option">
                        <input type="radio" name="source" value="stock" {{ old('source') === 'stock' ? 'checked' : '' }}>
                        <span id="stock-toggle-label">📷 Stok Fotoğraf</span>
                    </label>
                    <label class="toggle-option" id="upload-toggle-option">
                        <input type="radio" name="source" value="upload" {{ old('source') === 'upload' ? 'checked' : '' }}>
                        📤 <span id="upload-toggle-label">Kendi Görselini Yükle</span>
                    </label>
                </div>
                @error('source') <p class="muted" style="color:#dc2626">{{ $message }}</p> @enderror

                <div id="upload-section">
                    <label for="image" id="upload-label">Görsel yükle</label>
                    <div id="dropzone" class="dropzone">
                        <input type="file" id="image" name="image" accept="image/*" style="display:none;">
                        <div id="dropzone-empty">
                            <p id="dropzone-hint" class="muted" style="margin:0;">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;">
                            <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;">
                            <video id="dropzone-preview-video" controls playsinline style="max-width:220px; max-height:220px; border-radius:8px; display:none; margin:0 auto 10px; border:1px solid #e2e8e4;"></video>
                            <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" id="upload-hint" style="margin-top:-10px;">Bu görsel plan HER ÇALIŞTIĞINDA aynen kullanılır (AI görsel üretimi atlanır) — video isteniyorsa bu görselden üretilir.</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="plan_keywords" id="keywords-label">Tarif et!</label>
                <div class="prompt-box" id="prompt-box">
                    <textarea id="plan_keywords" name="keywords" rows="3" maxlength="1000" placeholder="örn. Sabah motivasyonu veren kısa bir söz">{{ old('keywords') }}</textarea>
                    <div class="prompt-toolbar" id="reference-toolbar">
                        <input type="file" id="reference_image" name="reference_image" accept="image/*" style="display:none;">
                        <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;">Bu tarif her tetiklenmede aynen kullanılır — farklı konular için ayrı planlar oluşturabilirsin.</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 id="media-settings-heading" style="font-size:1rem; margin-top:0;">Video Ayarları</h2>

                <div id="story-provider-section">
                    <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">Otomatik</option>
                        @foreach ($storyProviders as $key => $label)
                            <option value="{{ $key }}" {{ old('story_provider') === $key ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <div id="image-provider-normal">
                    <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">Otomatik</option>
                        @foreach ($imageProviders as $key => $label)
                            @continue($key === 'pexels')
                            <option value="{{ $key }}" {{ old('image_provider') === $key ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>

                    <div id="video-provider-section" style="margin-top:12px; display:none;">
                        <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%;" disabled>
                            <option value="auto" {{ old('video_provider', 'auto') === 'auto' ? 'selected' : '' }}>Otomatik (görsele yaklaştırma/kaydırma efekti)</option>
                            @foreach ($videoProviders as $key => $label)
                                <option value="{{ $key }}" {{ old('video_provider') === $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>
                </div>
                <div id="image-provider-stock">
                    <input type="hidden" name="image_provider" id="image_provider_stock" value="pexels" disabled>
                    <label id="stock-source-label" style="font-size:.8rem;">Görsel kaynağı</label>
                    <p class="muted" id="stock-source-hint" style="margin:0 0 8px;">📷 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" id="stock-query-hint" style="margin:4px 0 0;">Boş bırakılırsa arama terimi hikayeden otomatik çıkarılır. Anime/oyun/karakter gibi özel bir konu arıyorsan, buraya doğrudan İngilizce bir arama terimi yazmak daha isabetli sonuç verir.</p>

                    <div id="max-scene-seconds-section">
                        <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 (sadece Video modunda) — bir klip ekranda bu süreden uzun kalması gerekirse, aynı cümle için farklı bir klip ile devam edilir. Boş bırakılırsa 5 saniye kullanılır.</p>
                        @error('max_scene_seconds') <p class="muted" style="color:#dc2626">{{ $message }}</p> @enderror
                    </div>
                </div>
            </div>

            <div class="card" id="voice-section">
                <h2 style="font-size:1rem; margin-top:0;">Ses Ayarları</h2>

                <label style="display:flex; align-items:center; gap:8px; font-weight:600; margin-bottom:8px; cursor:pointer;">
                    <input type="checkbox" name="voice_enabled" id="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" {{ old('voice_provider', 'auto') === 'auto' ? 'selected' : '' }}>Otomatik</option>
                        @foreach ($voiceProviders as $key => $label)
                            <option value="{{ $key }}" {{ old('voice_provider') === $key ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div id="voice-id-row" style="display:flex; gap:8px; align-items:center; margin-bottom:8px;">
                    <select name="voice_id" id="voice_id" class="accent-select" style="flex:1;">
                        @foreach ($voices as $key => $label)
                            <option value="{{ $key }}" {{ old('voice_id') === $key ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <p id="elevenlabs-voice-note" class="muted" style="margin:-4px 0 8px; 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>

            <div class="card">
                <h2 style="font-size:1rem; margin-top:0;">Zamanlama</h2>

                <label for="frequency" style="font-size:.8rem;">Sıklık</label>
                <select name="frequency" id="frequency" class="accent-select" style="width:100%;">
                    <option value="daily" {{ old('frequency') === 'daily' ? 'selected' : '' }}>Her gün</option>
                    <option value="weekly" {{ old('frequency') === 'weekly' ? 'selected' : '' }}>Her hafta</option>
                </select>

                <div id="day-of-week-field" style="display:none;">
                    <label for="run_at_day_of_week" style="font-size:.8rem;">Hangi gün</label>
                    <select name="run_at_day_of_week" id="run_at_day_of_week" class="accent-select" style="width:100%;">
                        <option value="1">Pazartesi</option>
                        <option value="2">Salı</option>
                        <option value="3">Çarşamba</option>
                        <option value="4">Perşembe</option>
                        <option value="5">Cuma</option>
                        <option value="6">Cumartesi</option>
                        <option value="0">Pazar</option>
                    </select>
                </div>

                <label for="run_at_time" style="font-size:.8rem;">Saat</label>
                <input type="time" id="run_at_time" name="run_at_time" value="{{ old('run_at_time', '09:00') }}" required>
                @error('run_at_day_of_week') <p class="muted" style="color:#dc2626">{{ $message }}</p> @enderror
                @error('run_at_time') <p class="muted" style="color:#dc2626">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="card">
            <h2 style="font-size:1rem; margin-top:0;">Platformlar</h2>
            <div class="platform-grid">
                @foreach ($platforms as $key => $meta)
                    @php
                        $platformModeKeys = collect($modePlatforms)->filter(fn ($keys) => in_array($key, $keys, true))->keys()->implode(',');
                    @endphp
                    <div class="platform-option {{ $meta['tier'] === 'unsupported' ? 'disabled' : '' }}" data-modes="{{ $platformModeKeys }}" style="flex-direction:column; align-items:stretch; gap:8px;">
                        <div style="display:flex; align-items:center; justify-content:space-between; gap:8px;">
                            <label style="display:flex; align-items:center; gap:8px; margin:0;">
                                <input type="checkbox" name="platforms[]" value="{{ $key }}"
                                    {{ $meta['tier'] === 'unsupported' ? 'disabled data-tier-disabled=1' : '' }}
                                    {{ in_array($key, old('platforms', [])) ? 'checked' : '' }}>
                                @include('admin.social-automation.partials.platform-icon', ['platform' => $key])
                                {{ $meta['label'] }}
                                <span class="badge badge-{{ $meta['tier'] }}">
                                    {{ ['mvp' => 'aktif', 'pending_review' => 'kod hazır, onay bekliyor', 'stub' => 'onay bekliyor', 'unsupported' => 'desteklenmiyor'][$meta['tier']] }}
                                </span>
                            </label>
                        </div>

                        @if (isset($meta['content_types']))
                            <select name="content_type[{{ $key }}]" style="width:100%; font-size:.85rem;">
                                @foreach ($meta['content_types'] as $typeKey => $type)
                                    <option value="{{ $typeKey }}">{{ $type['label'] }}</option>
                                @endforeach
                            </select>
                        @endif
                    </div>
                @endforeach
            </div>
            @error('platforms') <p class="muted" style="color:#dc2626">{{ $message }}</p> @enderror

            <label>Üretilecek Boyut Önizlemesi</label>
            <div id="size-preview" style="display:flex; gap:20px; align-items:flex-end; margin-bottom:0; padding:12px; background:#f8faf9; border:1px solid #e5e7eb; border-radius:8px; min-height:60px;">
                <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>
                    <span class="muted" style="font-size:.75rem; text-align:center;">Dikey 9:16<br>(Story/Reels/Shorts)</span>
                </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>
                    <span class="muted" style="font-size:.75rem; text-align:center;">Kare 1:1<br>(Post)</span>
                </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>
                    <span class="muted" style="font-size:.75rem; text-align:center;">Yatay 16:9<br>(Normal Video)</span>
                </div>
                <p id="preview-empty" class="muted" style="margin:0;">Platform seçince burada hangi boyutta görsel/video üretileceğini göreceksin.</p>
            </div>
        </div>

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

    <h2 style="font-size:1.1rem;">Mevcut Planlar</h2>
    <div class="card">
        @if ($plans->isEmpty())
            <p class="muted">Henüz bir plan yok.</p>
        @else
            <table>
                <thead>
                    <tr><th>Plan</th><th>Sıklık</th><th>Platformlar</th><th>Sonraki Çalışma</th><th>Durum</th><th></th></tr>
                </thead>
                <tbody>
                    @foreach ($plans as $plan)
                        <tr>
                            <td>
                                <a class="link" href="{{ route('admin.social-automation.recurring.show', $plan) }}"><strong>{{ $plan->name }}</strong></a>
                                <div style="margin:4px 0;">
                                    @if ($plan->mode)
                                        <span class="badge badge-mvp">{{ $plan->mode === 'video' ? '🎬 Video' : '🖼️ Görsel' }}</span>
                                    @endif
                                    @if ($plan->source === 'stock')
                                        <span class="badge badge-mvp">📷 Stok</span>
                                    @elseif ($plan->source === 'ai')
                                        <span class="badge badge-mvp">🤖 AI</span>
                                    @elseif ($plan->source === 'upload')
                                        <span class="badge badge-mvp">📤 Yüklenen görsel</span>
                                    @endif
                                </div>
                                <div class="muted" style="font-size:.8rem;">{{ \Illuminate\Support\Str::limit($plan->keywords, 50) }}</div>
                            </td>
                            <td class="muted">
                                @if ($plan->frequency === 'weekly')
                                    Her hafta {{ ['Pazar','Pazartesi','Salı','Çarşamba','Perşembe','Cuma','Cumartesi'][$plan->run_at_day_of_week] }}, {{ $plan->run_at_time }}
                                @else
                                    Her gün {{ $plan->run_at_time }}
                                @endif
                            </td>
                            <td>
                                <span style="display:flex; gap:6px; flex-wrap:wrap;">
                                    @foreach ($plan->target_platforms as $platformKey)
                                        @include('admin.social-automation.partials.platform-icon', ['platform' => $platformKey, 'size' => 18])
                                    @endforeach
                                </span>
                            </td>
                            <td class="muted">
                                {{ $plan->is_active ? $plan->next_run_at->translatedFormat('d F, H:i') : '—' }}
                            </td>
                            <td>
                                <span class="status-pill {{ $plan->is_active ? 'status-done' : 'status-pending_api_approval' }}">
                                    {{ $plan->is_active ? 'aktif' : 'duraklatıldı' }}
                                </span>
                            </td>
                            <td style="white-space:nowrap;">
                                <form method="POST" action="{{ route('admin.social-automation.recurring.toggle', $plan) }}" style="display:inline;">
                                    @csrf
                                    <button type="submit" style="padding:5px 12px; font-size:.8rem;">{{ $plan->is_active ? 'Duraklat' : 'Aktifleştir' }}</button>
                                </form>
                                <form method="POST" action="{{ route('admin.social-automation.recurring.destroy', $plan) }}" style="display:inline;">
                                    @csrf @method('DELETE')
                                    <button type="submit" style="background:#dc2626; color:#fff; padding:5px 12px; font-size:.8rem;">Sil</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>

    <script>
    (function () {
        var modePlatforms = @json($modePlatforms);

        var platformConfig = @json(array_map(fn ($meta) => [
            'content_types' => $meta['content_types'] ?? null,
        ], $platforms));

        function ratioForPlatform(key) {
            var meta = platformConfig[key];
            if (!meta || !meta.content_types) return 'vertical';

            var select = document.querySelector('select[name="content_type[' + key + ']"]');
            var type = select ? select.value : Object.keys(meta.content_types)[0];

            return (meta.content_types[type] && meta.content_types[type].ratio) || 'vertical';
        }

        function updatePreview() {
            var checked = Array.from(document.querySelectorAll('input[name="platforms[]"]:checked')).map(function (el) { return el.value; });
            var ratios = {};
            checked.forEach(function (key) { ratios[ratioForPlatform(key)] = true; });

            document.getElementById('preview-vertical').style.display = ratios.vertical ? 'flex' : 'none';
            document.getElementById('preview-square').style.display = ratios.square ? 'flex' : 'none';
            document.getElementById('preview-horizontal').style.display = ratios.horizontal ? 'flex' : 'none';
            document.getElementById('preview-empty').style.display = checked.length === 0 ? 'block' : 'none';
        }

        var dropzone = document.getElementById('dropzone');
        var fileInput = document.getElementById('image');
        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;
        // Mod (Görsel/Video) JS ile değişiyor (sayfa yeniden yüklenmiyor), bu
        // yüzden dosya inputunun `name`/`accept`i ve önizleme elemanı da mod
        // değişince dinamik olarak güncelleniyor — bkz. applyMode().
        var isVideoMode = false;

        function currentRatios() {
            var checked = Array.from(document.querySelectorAll('input[name="platforms[]"]:checked')).map(function (el) { return el.value; });
            var ratios = {};
            checked.forEach(function (key) { ratios[ratioForPlatform(key)] = true; });
            return ratios;
        }

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

            var ratio = imageEl.naturalWidth / imageEl.naturalHeight;
            var needed = currentRatios();
            var mismatches = [];

            if (needed.vertical && Math.abs(ratio - (9 / 16)) > 0.15) {
                mismatches.push('dikey (9:16 — Story/Reels/Shorts)');
            }
            if (needed.square && Math.abs(ratio - 1) > 0.15) {
                mismatches.push('kare (1:1 — Post)');
            }
            if (needed.horizontal && Math.abs(ratio - (16 / 9)) > 0.15) {
                mismatches.push('yatay (16:9 — Normal Video)');
            }

            if (mismatches.length > 0) {
                ratioWarning.textContent = 'Uyarı: bu görsel seçtiğin platformların beklediği ' + mismatches.join(' ve ') + ' formatına 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;
                dropzonePreviewVideo.style.display = 'block';
                dropzonePreviewImg.style.display = 'none';
            } else {
                dropzonePreviewImg.onload = function () { checkImageRatio(dropzonePreviewImg); };
                dropzonePreviewImg.src = currentObjectUrl;
                dropzonePreviewImg.style.display = 'block';
                dropzonePreviewVideo.style.display = 'none';
            }
            dropzoneFilename.textContent = file.name;
            dropzoneEmpty.style.display = 'none';
            dropzonePreview.style.display = 'block';
        }

        function clearSelection() {
            fileInput.value = '';
            if (currentObjectUrl) { URL.revokeObjectURL(currentObjectUrl); currentObjectUrl = null; }
            dropzonePreviewImg.src = '';
            dropzonePreviewVideo.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();
            }
        });

        document.querySelectorAll('input[name="platforms[]"], select[name^="content_type"]').forEach(function (el) {
            el.addEventListener('change', function () {
                updatePreview();
                if (!isVideoMode && fileInput.files[0] && dropzonePreviewImg.naturalWidth) checkImageRatio(dropzonePreviewImg);
            });
        });

        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() {
            if (!imageProviderSelect || imageProviderSelect.disabled) {
                refProviderWarning.style.display = 'none';
                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);
        }

        // --- Mod (Görsel/Video) ve kaynak (AI/Stok/Kendi görselin) seçimine göre
        // ilgili bölümleri gösterip/gizleyen ve DIŞARIDA BIRAKILAN alanları
        // `disabled` yaparak forma hiç dahil olmamasını sağlayan mantık. Tek
        // sayfalık bir plan formunda "Yeni Paylaşım" formundaki ayrı sayfa
        // yönlendirmesi (mode->source->form) yerine bunu tercih ettik ki
        // kullanıcı Sıklık/Saat gibi zaten doldurduğu alanları kaybetmesin.
        var mediaSettingsHeading = document.getElementById('media-settings-heading');
        var storyProviderSection = document.getElementById('story-provider-section');
        var storyProviderSelect = document.getElementById('story_provider');
        var voiceSection = document.getElementById('voice-section');
        var voiceEnabledInput = document.getElementById('voice_enabled');
        var voiceIdSelect = document.getElementById('voice_id');
        var voiceProviderSelect = document.getElementById('voice_provider');
        var voiceIdRow = document.getElementById('voice-id-row');
        var elevenLabsNote = document.getElementById('elevenlabs-voice-note');

        // Ses ID dropdown'ı (Emel/Ahmet) hem moda (Görsel modunda seslendirme
        // hiç yok) hem sağlayıcıya (ElevenLabs'te seçilebilir birden fazla ses
        // yok) bağlı — ikisini birden hesaba katan tek bir yer.
        function applyVoiceProvider(isImageMode) {
            var isElevenLabs = voiceProviderSelect.value === 'elevenlabs';
            var hideVoiceId = isImageMode || isElevenLabs;

            voiceIdRow.style.display = hideVoiceId ? 'none' : 'flex';
            voiceIdSelect.disabled = hideVoiceId;
            elevenLabsNote.style.display = (!isImageMode && isElevenLabs) ? 'block' : 'none';
            voiceProviderSelect.disabled = isImageMode;
        }

        voiceProviderSelect.addEventListener('change', function () {
            applyVoiceProvider(document.querySelector('#mode-group input:checked').value === 'image');
        });

        function applyMode(mode) {
            var isImage = mode === 'image';

            isVideoMode = !isImage;

            // Otomatik İçerik planları bir kez kurulup sonsuza kadar tekrar
            // çalışıyor — Video modunda "Kendi Videonu Yükle" seçilirse plan
            // HER ÇALIŞTIĞINDA aynı videoyu tekrar tekrar paylaşırdı, bu istenen
            // bir davranış değil. Bu yüzden video modunda bu seçenek hiç
            // sunulmuyor (tek seferlik "Yeni Paylaşım" formunda hâlâ var, orada
            // sorun değil — bir kereliğine kullanılıyor).
            uploadToggleOption.style.display = isVideoMode ? 'none' : '';
            if (isVideoMode && document.querySelector('#source-group input[value=upload]').checked) {
                document.querySelector('#source-group input[value=ai]').checked = true;
            }
            clearSelection();
            stockToggleLabel.textContent = isVideoMode ? '🎬 Stok Video ile Üret' : '📷 Stok Fotoğraf';
            stockSourceLabel.textContent = isVideoMode ? 'Video kaynağı' : 'Görsel kaynağı';
            stockSourceHint.textContent = isVideoMode ? '🎬 Stok video (Pexels)' : '📷 Stok fotoğraf (Pexels)';
            stockQueryHint.textContent = 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, buraya doğrudan İngilizce bir arama terimi yazarsan TÜM sahnelerde sabit bu terim kullanılır.'
                : 'Boş bırakılırsa arama terimi hikayeden otomatik çıkarılır. Anime/oyun/karakter gibi özel bir konu arıyorsan, buraya doğrudan İngilizce bir arama terimi yazmak daha isabetli sonuç verir.';
            mediaSettingsHeading.textContent = isVideoMode ? 'Video Ayarları' : 'Görsel Ayarları';

            storyProviderSection.style.display = isImage ? 'none' : '';
            storyProviderSelect.disabled = isImage;

            voiceSection.style.display = isImage ? 'none' : '';
            voiceEnabledInput.disabled = isImage;
            applyVoiceProvider(isImage);

            document.querySelectorAll('.platform-option[data-modes]').forEach(function (el) {
                var modes = (el.dataset.modes || '').split(',');
                var visible = modes.indexOf(mode) !== -1;
                el.style.display = visible ? '' : 'none';

                var checkbox = el.querySelector('input[type=checkbox]');
                if (!visible) {
                    checkbox.checked = false;
                    checkbox.disabled = true;
                } else {
                    checkbox.disabled = checkbox.dataset.tierDisabled === '1';
                }
            });

            updatePreview();

            // Sahne süresi alanı hem moda (sadece Video) hem kaynağa (sadece
            // Stok Fotoğraf) bağlı — mod değiştiğinde de yeniden hesaplansın
            // diye kaynak mantığını burada tekrar tetikliyoruz.
            applySource(document.querySelector('#source-group input:checked').value);
        }

        var uploadSection = document.getElementById('upload-section');
        var uploadToggleOption = document.getElementById('upload-toggle-option');
        var stockToggleLabel = document.getElementById('stock-toggle-label');
        var stockSourceLabel = document.getElementById('stock-source-label');
        var stockSourceHint = document.getElementById('stock-source-hint');
        var stockQueryHint = document.getElementById('stock-query-hint');
        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 videoProviderSection = document.getElementById('video-provider-section');
        var videoGenProviderSelect = document.getElementById('video_provider');
        var keywordsLabel = document.getElementById('keywords-label');
        var keywordsHint = document.getElementById('keywords-hint');
        var keywordsTextarea = document.getElementById('plan_keywords');
        var maxSceneSecondsSection = document.getElementById('max-scene-seconds-section');
        var maxSceneSecondsInput = document.getElementById('max_scene_seconds');

        function applySource(source) {
            var isUpload = source === 'upload';
            var isStock = source === 'stock';
            var isAi = source === 'ai';
            var isVideo = document.querySelector('#mode-group input:checked').value === 'video';

            uploadSection.style.display = isUpload ? '' : 'none';
            fileInput.disabled = !isUpload;
            if (!isUpload) clearSelection();

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

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

            var showVideoProvider = isAi && isVideo;
            videoProviderSection.style.display = showVideoProvider ? '' : 'none';
            videoGenProviderSelect.disabled = !showVideoProvider;

            var showMaxSceneSeconds = isStock && isVideo;
            maxSceneSecondsSection.style.display = showMaxSceneSeconds ? '' : 'none';
            maxSceneSecondsInput.disabled = !showMaxSceneSeconds;

            if (isUpload) {
                keywordsLabel.textContent = 'Konuyu anlat (opsiyonel)';
                keywordsHint.textContent = "Yapay zekanın her paylaşımda başlık/paylaşım metni ve hashtag yazmasını istiyorsan konuyu kısaca anlat. Boş bırakırsan bunları her paylaşımın kendi sayfasından elle düzenlersin.";
                keywordsTextarea.placeholder = 'örn. Haftalık ürün tanıtımı';
            } else {
                keywordsLabel.textContent = 'Tarif et!';
                keywordsHint.textContent = 'Bu tarif her tetiklenmede aynen kullanılır — farklı konular için ayrı planlar oluşturabilirsin.';
                keywordsTextarea.placeholder = 'örn. Sabah motivasyonu veren kısa bir söz';
            }
        }

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

        applyMode(document.querySelector('#mode-group input:checked').value);
        applySource(document.querySelector('#source-group input:checked').value);
        updatePreview();

        var frequencySelect = document.getElementById('frequency');
        var dayField = document.getElementById('day-of-week-field');

        function updateDayField() {
            dayField.style.display = frequencySelect.value === 'weekly' ? 'block' : 'none';
        }

        frequencySelect.addEventListener('change', updateDayField);
        updateDayField();
    })();

    (function () {
        var btn = document.getElementById('voice-preview-btn');
        if (!btn) return;

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

        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) {
                    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.
            var isElevenLabs = providerSelectForPreview && providerSelectForPreview.value === 'elevenlabs';
            var previewBody = 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(previewBody),
            })
                .then(function (response) { return response.json(); })
                .then(function (data) {
                    if (data.ready) return data.url;
                    return pollStatus(data.id, 20);
                })
                .then(function (url) {
                    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