@extends('admin.layout')
@section('title', 'Publish Video: ' . $video->title)

@section('content')
<div class="toolbar">
    <h2 style="font-size:18px; color:#fff;">Publish Video: {{ $video->title }}</h2>
    <div style="display:flex; gap:8px;">
        <a href="{{ route('admin.videos.show', $video) }}" class="btn btn-secondary">← Back</a>
    </div>
</div>

<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 24px; padding: 0;">
    <!-- Left Column: Original Info -->
    <div style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:6px; padding:20px;">
        <h3 style="font-size:16px; color:#fff; margin-bottom:16px;">Original Video</h3>

        <!-- Original Title -->
        <div style="margin-bottom:16px;">
            <label style="display:block; font-size:12px; color:#888; margin-bottom:8px; text-transform:uppercase; font-weight:bold;">Title (Read-Only)</label>
            <input type="text" value="{{ $video->title }}" disabled style="width:100%; padding:8px 12px; background:#0f0f0f; border:1px solid #2a2a2a; border-radius:4px; color:#666; font-size:13px;">
        </div>

        <!-- Original Thumbnail -->
        <div style="margin-bottom:16px;">
            <label style="display:block; font-size:12px; color:#888; margin-bottom:8px; text-transform:uppercase; font-weight:bold;">Thumbnail (Read-Only)</label>
            @if($thumbnailUrl)
                <img src="{{ $thumbnailUrl }}" alt="{{ $video->title }}" style="width:100%; border-radius:4px; border:1px solid #2a2a2a;">
            @else
                <div style="width:100%; aspect-ratio:16/9; background:#0f0f0f; border:1px dashed #2a2a2a; border-radius:4px; display:flex; align-items:center; justify-content:center; color:#666; font-size:13px;">
                    No Thumbnail
                </div>
            @endif
        </div>

        <!-- Original Embed URL -->
        <div style="margin-bottom:16px;">
            <label style="display:block; font-size:12px; color:#888; margin-bottom:8px; text-transform:uppercase; font-weight:bold;">Embed URL (Read-Only)</label>
            <textarea disabled style="width:100%; padding:8px 12px; background:#0f0f0f; border:1px solid #2a2a2a; border-radius:4px; color:#666; font-size:11px; font-family:monospace; min-height:60px; resize:vertical;">{{ $video->embed_url ?? 'N/A' }}</textarea>
        </div>

        <!-- Publish Stats -->
        <div style="border-top:1px solid #2a2a2a; padding-top:16px; margin-top:16px;">
            <h4 style="font-size:13px; color:#fff; margin-bottom:12px; font-weight:bold;">Publish Stats</h4>
            <div style="font-size:12px; line-height:1.8;">
                <div style="display:flex; justify-content:space-between; color:#888;">
                    <span>Telegram:</span>
                    <span style="color:#6fbf6f;">{{ $stats['telegram']['published'] }}/{{ $stats['telegram']['total'] }}
                        @if($stats['telegram']['failed'] > 0)
                            <span style="color:#bf6f6f;"> ({{ $stats['telegram']['failed'] }} failed)</span>
                        @endif
                    </span>
                </div>
                <div style="display:flex; justify-content:space-between; color:#888; margin-top:6px;">
                    <span>X (Twitter):</span>
                    <span style="color:#6fbf6f;">{{ $stats['x']['published'] }}/{{ $stats['x']['total'] }}
                        @if($stats['x']['failed'] > 0)
                            <span style="color:#bf6f6f;"> ({{ $stats['x']['failed'] }} failed)</span>
                        @endif
                    </span>
                </div>
                <div style="margin-top:12px;">
                    <a href="{{ route('admin.videos.publish-history', $video) }}" style="color:#5ba3ff; font-size:11px; text-decoration:none;">View History →</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Right Column: Publish Options -->
    <div>
        <script>
        function showThumbnailOption(option) {
            const fileSection = document.getElementById('fileUploadSection');
            const urlSection = document.getElementById('urlInputSection');
            
            if (option === 'file') {
                fileSection.style.display = 'block';
                urlSection.style.display = 'none';
            } else if (option === 'url') {
                fileSection.style.display = 'none';
                urlSection.style.display = 'block';
            } else {
                fileSection.style.display = 'none';
                urlSection.style.display = 'none';
            }
        }

        function previewFileImage() {
            const input = document.getElementById('publish_thumbnail');
            const file = input.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const previewContainer = document.querySelector('[style*="aspect-ratio:16/9"]');
                    previewContainer.innerHTML = '<img src="' + e.target.result + '" style="width:100%; height:100%; object-fit:cover; border-radius:4px;">';
                };
                reader.readAsDataURL(file);
            }
        }

        function previewUrlImage() {
            const urlInput = document.getElementById('publish_thumbnail_url');
            const url = urlInput.value.trim();
            const previewContainer = document.querySelector('[style*="aspect-ratio:16/9"]');
            
            if (url) {
                const img = new Image();
                img.onload = function() {
                    previewContainer.innerHTML = '<img src="' + url + '" style="width:100%; height:100%; object-fit:cover; border-radius:4px;">';
                };
                img.onerror = function() {
                    previewContainer.innerHTML = '<span style="color:#bf6f6f; font-size:13px; font-weight:bold;">⚠️ Failed to load image</span>';
                };
                img.src = url;
            }
        }
        </script>

        <form id="publishForm" method="POST" action="{{ route('admin.videos.publish.store', $video) }}" enctype="multipart/form-data">
            @csrf

            <!-- Platform Selection (Multiple) -->
            <div style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:6px; padding:20px; margin-bottom:16px;">
                <label style="display:block; font-size:12px; color:#888; margin-bottom:12px; text-transform:uppercase; font-weight:bold;">📤 Select Platforms (Multiple Allowed)</label>
                <div style="display:flex; flex-direction:column; gap:12px;">
                    <label style="display:flex; align-items:center; cursor:pointer; font-size:13px; color:#e0e0e0; padding:10px; background:#0f0f0f; border-radius:4px; border:1px solid #2a2a2a; transition:all 0.2s;">
                        <input type="checkbox" name="platforms" value="telegram" style="margin-right:8px; cursor:pointer;">
                        📱 Telegram
                    </label>
                    <label style="display:flex; align-items:center; cursor:pointer; font-size:13px; color:#e0e0e0; padding:10px; background:#0f0f0f; border-radius:4px; border:1px solid #2a2a2a; transition:all 0.2s;">
                        <input type="checkbox" name="platforms" value="x" style="margin-right:8px; cursor:pointer;">
                        𝕏 X (Twitter)
                    </label>
                </div>
                <div style="font-size:11px; color:#666; margin-top:8px;">✓ Select satu atau kedua platform untuk publish sekaligus</div>
            </div>

            <!-- Telegram Chat ID (Auto-Configured) -->
            <div id="telegramOptions" style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:6px; padding:20px; margin-bottom:16px; display:none;">
                <div style="display:flex; align-items:center; gap:10px; padding:12px; background:#0a3d0a; border:1px solid #2d5a2d; border-radius:4px;">
                    <span style="font-size:18px;">✅</span>
                    <div>
                        <div style="font-size:12px; color:#6fbf6f; font-weight:bold;">Telegram Chat ID Sudah Ter-konfigurasi</div>
                        <div style="font-size:11px; color:#4a8f4a; margin-top:4px;">Pesan akan dikirim otomatis ke channel Telegram yang telah dikonfigurasi</div>
                    </div>
                </div>
            </div>

            <!-- Publish Title -->
            <div style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:6px; padding:20px; margin-bottom:16px;">
                <label style="display:block; font-size:12px; color:#888; margin-bottom:8px; text-transform:uppercase; font-weight:bold;">Publish Title</label>
                <input 
                    type="text" 
                    id="publish_title" 
                    name="publish_title" 
                    value="{{ $video->title }}" 
                    maxlength="500"
                    style="width:100%; padding:8px 12px; background:#0f0f0f; border:1px solid #2a2a2a; border-radius:4px; color:#e0e0e0; font-size:13px; margin-bottom:6px;"
                    required
                >
                <div style="font-size:11px; color:#666;">Max 500 characters (X will truncate to 280)</div>
            </div>

            <!-- Embed Domain Selection -->
            @if($domains && $domains->count() > 0)
            <div style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:6px; padding:20px; margin-bottom:16px;">
                <label style="display:block; font-size:12px; color:#888; margin-bottom:8px; text-transform:uppercase; font-weight:bold;">🌐 Embed Domain (Player URL)</label>
                <select 
                    id="embed_domain_id" 
                    name="embed_domain_id"
                    style="width:100%; padding:8px 12px; background:#0f0f0f; border:1px solid #2a2a2a; border-radius:4px; color:#e0e0e0; font-size:13px; cursor:pointer;"
                >
                    <option value="">-- Auto Select Best Domain --</option>
                    @foreach($domains as $domain)
                        <option value="{{ $domain->id }}" style="background:#1a1a1a;">
                            {{ $domain->display_name ?? $domain->domain_name }}
                        </option>
                    @endforeach
                </select>
                <div style="font-size:11px; color:#666; margin-top:6px;">Choose which domain to use in the video player embed URL</div>
            </div>
            @endif

            <!-- Publish Thumbnail -->
            <div style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:6px; padding:20px; margin-bottom:16px;">
                <label style="display:block; font-size:12px; color:#888; margin-bottom:12px; text-transform:uppercase; font-weight:bold;">Publish Thumbnail</label>

                <!-- Radio Options -->
                <div style="display:flex; flex-direction:column; gap:16px;">
                    <!-- Option 1: Original -->
                    <label style="display:flex; align-items:center; cursor:pointer; font-size:13px; color:#e0e0e0; padding:12px; background:#0f0f0f; border-radius:4px; border:1px solid #2a2a2a; transition: all 0.3s;">
                        <input type="radio" name="thumbnail_option" value="original" onchange="showThumbnailOption('original')" style="margin-right:8px; cursor:pointer;" checked>
                        Use Original Thumbnail
                    </label>

                    <!-- Option 2: Upload File -->
                    <div>
                        <label style="display:flex; align-items:center; cursor:pointer; font-size:13px; color:#e0e0e0; padding:12px; background:#0f0f0f; border-radius:4px; border:1px solid #2a2a2a; transition: all 0.3s;">
                            <input type="radio" name="thumbnail_option" value="file" onchange="showThumbnailOption('file')" style="margin-right:8px; cursor:pointer;">
                            📤 Upload New Image
                        </label>
                        <div id="fileUploadSection" style="margin-top:12px; display:none; background:#0f0f0f; padding:16px; border-radius:4px; border:2px solid #3a5a6a;">
                            <input 
                                type="file" 
                                id="publish_thumbnail" 
                                name="publish_thumbnail" 
                                accept="image/*"
                                onchange="previewFileImage()"
                                style="width:100%; padding:12px; background:#1a1a1a; border:2px solid #2a2a2a; border-radius:4px; color:#e0e0e0; font-size:13px; cursor:pointer; font-weight:bold;"
                            >
                            <div style="font-size:12px; color:#888; margin-top:8px;">ℹ️ Max 5MB. JPG, PNG, WebP, GIF</div>
                        </div>
                    </div>

                    <!-- Option 3: Paste URL -->
                    <div>
                        <label style="display:flex; align-items:center; cursor:pointer; font-size:13px; color:#e0e0e0; padding:12px; background:#0f0f0f; border-radius:4px; border:1px solid #2a2a2a; transition: all 0.3s;">
                            <input type="radio" name="thumbnail_option" value="url" onchange="showThumbnailOption('url')" style="margin-right:8px; cursor:pointer;">
                            🔗 Paste Image URL
                        </label>
                        <div id="urlInputSection" style="margin-top:12px; display:none; background:#0f0f0f; padding:16px; border-radius:4px; border:2px solid #3a5a6a;">
                            <input 
                                type="url" 
                                id="publish_thumbnail_url" 
                                name="publish_thumbnail_url" 
                                placeholder="https://example.com/image.jpg"
                                oninput="previewUrlImage()"
                                style="width:100%; padding:12px; background:#1a1a1a; border:2px solid #2a2a2a; border-radius:4px; color:#e0e0e0; font-size:13px; font-weight:bold;"
                            >
                            <div style="font-size:12px; color:#888; margin-top:8px;">ℹ️ Direct URL to image (JPEG, PNG, WebP, GIF)</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Preview -->
            <div style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:6px; padding:20px; margin-bottom:16px;">
                <label style="display:block; font-size:12px; color:#888; margin-bottom:12px; text-transform:uppercase; font-weight:bold;">Preview</label>
                <div style="background:#0f0f0f; border:2px dashed #2a2a2a; border-radius:4px; padding:12px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; overflow:hidden;">
                    @if($thumbnailUrl)
                        <img id="previewImage" src="{{ $thumbnailUrl }}" alt="Preview" style="width:100%; height:100%; object-fit:cover; border-radius:4px;">
                    @else
                        <span id="previewText" style="color:#666; font-size:12px;">Preview will appear here</span>
                    @endif
                </div>
            </div>

            <!-- Submit -->
            <div style="display:flex; gap:12px;">
                <button type="submit" class="btn btn-primary" style="flex:1;">Publish</button>
                <a href="{{ route('admin.videos.show', $video) }}" class="btn btn-secondary" style="flex:1; text-align:center;">Cancel</a>
            </div>
        </form>

<script>
// Toast notification function - DEFINE FIRST
function showToast(type, message, duration = 3000) {
    const toast = document.createElement('div');
    const bgColor = type === 'success' ? '#1a3a1a' : '#3a1a1a';
    const borderColor = type === 'success' ? '#2a6a2a' : '#6a2a2a';
    const textColor = type === 'success' ? '#6fbf6f' : '#bf6f6f';
    
    toast.style.cssText = `
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: ${bgColor};
        border: 1px solid ${borderColor};
        color: ${textColor};
        padding: 14px 18px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: bold;
        z-index: 9999;
        animation: slideIn 0.3s ease-in-out;
    `;
    toast.textContent = message;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.style.animation = 'slideOut 0.3s ease-in-out';
        setTimeout(() => toast.remove(), 300);
    }, duration);
}

// Add slide animations
const style = document.createElement('style');
style.textContent = `
    @keyframes slideIn {
        from { transform: translateX(400px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideOut {
        from { transform: translateX(0); opacity: 1; }
        to { transform: translateX(400px); opacity: 0; }
    }
`;
document.head.appendChild(style);

// Global function to update platform options visibility
function updatePlatformOptions() {
    const platformCheckboxes = document.querySelectorAll('input[name="platforms"]');
    const telegramOptions = document.getElementById('telegramOptions');
    
    const isTelegramChecked = Array.from(platformCheckboxes).some(cb => cb.value === 'telegram' && cb.checked);
    
    if (isTelegramChecked) {
        telegramOptions.style.display = 'block';
    } else {
        telegramOptions.style.display = 'none';
    }
}

// ===== ATTACH HANDLERS IMMEDIATELY (NOT WAITING FOR DOMCONTENTLOADED) =====
console.log('🔴 publish-form.blade.php script is EXECUTING NOW');

const platformCheckboxes = document.querySelectorAll('input[name="platforms"]');
const telegramOptions = document.getElementById('telegramOptions');

console.log('✓ Found checkboxes:', platformCheckboxes.length);
console.log('✓ Telegram options element:', telegramOptions ? 'Found' : '❌ NOT FOUND');

// Initial state
updatePlatformOptions();

// Attach to checkboxes
platformCheckboxes.forEach((checkbox, index) => {
    checkbox.addEventListener('change', function() {
        console.log(`✓ Checkbox ${index} changed:`, this.value, '=', this.checked);
        updatePlatformOptions();
    });
});
console.log('✓ Event listeners attached to checkboxes');

// MAIN: Form submission handler
const publishForm = document.getElementById('publishForm');
console.log('✓ publishForm element:', publishForm ? 'FOUND ✓✓✓' : '❌ NOT FOUND ❌❌❌');

if (publishForm) {
    publishForm.addEventListener('submit', function(e) {
        console.log('🟢🟢🟢 FORM SUBMIT TRIGGERED 🟢🟢🟢');
        e.preventDefault();
        console.log('✓ preventDefault() executed');
        
        const selectedPlatforms = Array.from(platformCheckboxes)
            .filter(cb => cb.checked)
            .map(cb => cb.value);
        
        console.log('Selected platforms:', selectedPlatforms);
        
        if (selectedPlatforms.length === 0) {
            showToast('error', '⚠️ Pilih minimal 1 platform', 3000);
            return;
        }

        
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.textContent;
        submitBtn.textContent = '⏳ Publishing...';
        submitBtn.disabled = true;
        
        // Build JSON payload (NOT FormData - to properly send array)
        const jsonData = {
            platforms: selectedPlatforms,
            publish_title: document.getElementById('publish_title').value,
            publish_thumbnail_url: document.getElementById('publish_thumbnail_url')?.value || null,
            embed_domain_id: document.getElementById('embed_domain_id').value || null,
        };
        
        // Handle file upload if present
        const fileInput = document.getElementById('publish_thumbnail');
        if (fileInput && fileInput.files.length > 0) {
            console.log('✓ File upload detected - using FormData');
            const formData = new FormData();
            
            // Add form fields
            Object.keys(jsonData).forEach(key => {
                if (key === 'platforms') {
                    // Add platforms as array
                    jsonData[key].forEach(platform => {
                        formData.append('platforms[]', platform);
                    });
                } else if (jsonData[key] !== null) {
                    formData.append(key, jsonData[key]);
                }
            });
            
            // Add file
            formData.append('publish_thumbnail', fileInput.files[0]);
            
            // Add CSRF token
            const csrfToken = document.querySelector('input[name="_token"]').value;
            formData.append('_token', csrfToken);
            
            sendRequest(formData, 'form-data');
        } else {
            // No file - use JSON
            console.log('✓ No file - using JSON');
            const csrfToken = document.querySelector('input[name="_token"]').value;
            jsonData._token = csrfToken;
            sendRequest(jsonData, 'json');
        }
        
        function sendRequest(data, contentType) {
            const url = publishForm.action;
            const headers = {
                'X-Requested-With': 'XMLHttpRequest',
            };
            
            let body;
            if (contentType === 'json') {
                headers['Content-Type'] = 'application/json';
                body = JSON.stringify(data);
            } else {
                body = data; // FormData
            }
            
            console.log('📡 Fetching POST to:', url);
            
            fetch(url, {
                method: 'POST',
                body: body,
                headers: headers,
            })
            .then(response => {
                console.log('✅ Response status:', response.status);
                const contentType = response.headers.get('content-type');
                
                if (contentType && contentType.includes('application/json')) {
                    return response.json().then(data => {
                        if (!response.ok) {
                            data._httpStatus = response.status;
                        }
                        return data;
                    });
                } else {
                    return response.text().then(text => {
                        console.error('❌ Non-JSON response:', text.substring(0, 300));
                        throw new Error('Server returned non-JSON response');
                    });
                }
            })
            .then(data => {
                console.log('✓ Response data:', data);
                
                if (data && data.success) {
                    const platformNames = data.platforms.map(p => p === 'x' ? 'X' : 'Telegram').join(' & ');
                    console.log('✓ Publish queued to:', platformNames);
                    
                    showToast('success', '✓ Publish to ' + platformNames + ' queued!', 2000);
                    
                    setTimeout(() => {
                        window.location.href = '{{ route('admin.videos.publish-history', $video) }}';
                    }, 300);
                } else {
                    console.error('❌ Error response:', data);
                    const errorMsg = data.message || data.errors ? Object.values(data.errors)[0][0] : 'Unknown error';
                    showToast('error', '❌ ' + errorMsg, 5000);
                    submitBtn.textContent = originalText;
                    submitBtn.disabled = false;
                }
            })
            .catch(error => {
                console.error('❌ Fetch error:', error.message);
                showToast('error', '❌ ' + error.message, 5000);
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
            });
        }
    });
    console.log('✓ Form submit handler attached');
} else {
    console.error('❌❌❌ CRITICAL: publishForm NOT FOUND! ❌❌❌');
}
</script>
    </div>
</div>
@endsection