{{-- ═══════════════════════════════════════════════════════ --}}
{{-- SHARE MODAL — reusable partial --}}
{{-- Usage: @include('admin.videos._share-modal') --}}
{{-- Requires: openShare(slug) called from parent page --}}
{{-- ═══════════════════════════════════════════════════════ --}}
<div id="shareModal" class="share-modal-overlay" onclick="if(event.target===this)closeShare()">
    <div class="share-modal">
        <div class="share-modal-header">
            <div style="display:flex; align-items:center; gap:8px;">
                <h3 id="shareTitle">📤 Share</h3>
                <button onclick="copyTitle()" class="btn-copy" title="Copy title">📋</button>
            </div>
            <button onclick="closeShare()" class="share-close">&times;</button>
        </div>
        <div class="share-modal-body">
            {{-- Loading --}}
            <div id="shareLoading" style="text-align:center; padding:24px;">
                <div class="spinner-sm"></div>
                <p style="color:#888; margin-top:8px; font-size:13px;">Loading...</p>
            </div>

            {{-- Content (hidden until loaded) --}}
            <div id="shareContent" style="display:none;">
                {{-- Domain Selector --}}
                <div class="share-field" id="domainSelectorField">
                    <label>🌐 Domain</label>
                    <select id="domainSelector" class="share-domain-select" onchange="updateShareUrls()">
                        <option value="">Loading domains...</option>
                    </select>
                    <small style="color:#666; margin-top:4px; display:block;">Choose a domain for the embed URL</small>
                </div>

                {{-- Embed Code --}}
                <div class="share-field">
                    <label>📋 Embed Code</label>
                    <div class="share-input-row">
                        <textarea id="shareEmbed" class="share-input" rows="3" readonly></textarea>
                        <button onclick="copyField('shareEmbed')" class="btn-copy" title="Copy">📋</button>
                    </div>
                </div>

                {{-- Embed URL --}}
                <div class="share-field">
                    <label>🔗 Embed URL</label>
                    <div class="share-input-row">
                        <input id="shareUrl" type="text" class="share-input" readonly>
                        <button onclick="copyField('shareUrl')" class="btn-copy" title="Copy">📋</button>
                    </div>
                </div>

                {{-- Thumbnail URL --}}
                <div class="share-field">
                    <label>🖼️ Image URL</label>
                    <div class="share-input-row">
                        <input id="shareImage" type="text" class="share-input" readonly>
                        <button onclick="copyField('shareImage')" class="btn-copy" title="Copy">📋</button>
                    </div>
                    <div id="shareThumbnailPreview" style="margin-top:6px;"></div>
                </div>

                {{-- Duration --}}
                <div class="share-field">
                    <label>⏱️ Duration</label>
                    <div class="share-input-row">
                        <input id="shareDuration" type="text" class="share-input" readonly>
                        <button onclick="copyField('shareDuration')" class="btn-copy" title="Copy">📋</button>
                    </div>
                </div>

                {{-- Quick Copy All --}}
                <div style="margin-top:16px; padding-top:12px; border-top:1px solid #2a2a2a;">
                    <button onclick="copyAll()" class="btn btn-primary" style="width:100%;">📋 Copy All Info</button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .btn-share { background: #1a3a5a; color: #6fafdf; }
    .btn-share:hover { background: #2a4a6a; }

    .share-modal-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.7);
        z-index: 1000;
        align-items: center;
        justify-content: center;
    }
    .share-modal-overlay.active { display: flex; }

    .share-modal {
        background: #1a1a1a;
        border: 1px solid #333;
        border-radius: 10px;
        width: 580px;
        max-width: 95vw;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    }

    .share-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid #2a2a2a;
    }
    .share-modal-header h3 {
        font-size: 15px;
        color: #fff;
        margin: 0;
    }
    .share-close {
        background: none;
        border: none;
        color: #666;
        font-size: 24px;
        cursor: pointer;
        padding: 0 4px;
        line-height: 1;
    }
    .share-close:hover { color: #fff; }

    .share-modal-body { padding: 20px; }

    .share-field { margin-bottom: 14px; }
    .share-field label {
        display: block;
        font-size: 12px;
        color: #888;
        margin-bottom: 5px;
        font-weight: 600;
    }

    .share-input-row {
        display: flex;
        gap: 6px;
        align-items: stretch;
    }

    .share-input {
        flex: 1;
        background: #111;
        border: 1px solid #333;
        border-radius: 4px;
        color: #ddd;
        font-size: 12px;
        padding: 8px 10px;
        font-family: 'SF Mono', Monaco, Consolas, monospace;
        resize: none;
        outline: none;
    }
    .share-input:focus { border-color: #e50914; }

    .btn-copy {
        background: #333;
        border: 1px solid #444;
        border-radius: 4px;
        color: #ccc;
        cursor: pointer;
        padding: 0 12px;
        font-size: 14px;
        transition: all 0.15s;
        min-width: 40px;
    }
    .btn-copy:hover { background: #444; color: #fff; }
    .btn-copy.copied {
        background: #1a3a1a;
        border-color: #2d5a2d;
        color: #6fbf6f;
    }

    .share-domain-select {
        width: 100%;
        background: #111;
        border: 1px solid #333;
        border-radius: 4px;
        color: #ddd;
        font-size: 13px;
        padding: 8px 10px;
        outline: none;
        cursor: pointer;
    }
    .share-domain-select:focus { border-color: #e50914; }
    .share-domain-select:hover { border-color: #555; }

    .spinner-sm {
        width: 28px; height: 28px;
        border: 3px solid rgba(255,255,255,0.1);
        border-top-color: #e50914;
        border-radius: 50%;
        animation: spinsm 0.6s linear infinite;
        margin: 0 auto;
    }
    @keyframes spinsm { to { transform: rotate(360deg); } }

    .share-toast {
        position: fixed;
        bottom: 24px;
        right: 24px;
        background: #1a3a1a;
        border: 1px solid #2d5a2d;
        color: #6fbf6f;
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 13px;
        z-index: 2000;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s ease;
        pointer-events: none;
    }
    .share-toast.show {
        opacity: 1;
        transform: translateY(0);
    }
</style>

<div id="shareToast" class="share-toast">✅ Copied!</div>

<script>
    var shareData = {};
    var selectedDomain = null;

    function openShare(slug) {
        var modal = document.getElementById('shareModal');
        var loading = document.getElementById('shareLoading');
        var content = document.getElementById('shareContent');

        modal.classList.add('active');
        loading.style.display = 'block';
        loading.innerHTML = '<div class="spinner-sm"></div><p style="color:#888; margin-top:8px; font-size:13px;">Loading...</p>';
        content.style.display = 'none';

        fetch('/admin/videos/' + slug + '/share', {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            shareData = data;

            document.getElementById('shareTitle').textContent = '📤 ' + data.title;
            document.getElementById('shareImage').value = data.thumbnail_url || '— no thumbnail —';
            document.getElementById('shareDuration').value = data.duration_human
                ? data.duration_human + ' (' + data.duration + ' detik)'
                : '— unknown —';

            // Populate domain selector
            var domainSelector = document.getElementById('domainSelector');
            domainSelector.innerHTML = '';
            
            if (data.domains && data.domains.length > 0) {
                data.domains.forEach(function(domain, idx) {
                    var option = document.createElement('option');
                    option.value = domain.domain_name;
                    option.textContent = domain.display_name + ' (' + domain.domain_name + ')';
                    domainSelector.appendChild(option);
                });
                // Select first domain
                if (domainSelector.options.length > 0) {
                    domainSelector.options[0].selected = true;
                    selectedDomain = domainSelector.options[0].value;
                }
            } else {
                var option = document.createElement('option');
                option.value = 'default';
                option.textContent = '🌍 Default Domain';
                domainSelector.appendChild(option);
                selectedDomain = 'default';
            }

            // Thumbnail preview
            var preview = document.getElementById('shareThumbnailPreview');
            if (data.thumbnail_url) {
                preview.innerHTML = '<img src="' + data.thumbnail_url + '" style="max-width:160px; max-height:90px; border-radius:4px; border:1px solid #333;" onerror="this.style.display=\'none\'">';
            } else {
                preview.innerHTML = '';
            }

            updateShareUrls();
            loading.style.display = 'none';
            content.style.display = 'block';
        })
        .catch(function(e) {
            loading.innerHTML = '<p style="color:#bf6f6f;">Error loading share data.</p>';
        });
    }

    function updateShareUrls() {
        var domainSelector = document.getElementById('domainSelector');
        selectedDomain = domainSelector.value;

        // Generate embed URL with selected domain
        var embedUrl = generateEmbedUrl(selectedDomain);
        var embedCode = '<iframe src="' + embedUrl + '" width="640" height="360" frameborder="0" allowfullscreen scrolling="no"></iframe>';

        document.getElementById('shareUrl').value = embedUrl;
        document.getElementById('shareEmbed').value = embedCode;
    }

    function generateEmbedUrl(domain) {
        if (!shareData.slug) return '';
        
        if (domain === 'default' || !domain) {
            return shareData.embed_url;
        }
        
        // Construct domain-specific embed URL
        return window.location.protocol + '//' + domain + '/e/' + shareData.slug;
    }

    function closeShare() {
        document.getElementById('shareModal').classList.remove('active');
    }

    function copyField(fieldId) {
        var el = document.getElementById(fieldId);
        var text = el.value;

        if (!text || text.startsWith('—')) return;

        navigator.clipboard.writeText(text).then(function() {
            var btn = el.closest('.share-input-row').querySelector('.btn-copy');
            btn.classList.add('copied');
            btn.textContent = '✅';
            setTimeout(function() {
                btn.classList.remove('copied');
                btn.textContent = '📋';
            }, 1500);
            showToast('✅ Copied!');
        });
    }

    function copyAll() {
        var lines = [
            'Title: ' + (shareData.title || ''),
            'Embed URL: ' + (document.getElementById('shareUrl').value || ''),
            'Embed Code: ' + (document.getElementById('shareEmbed').value || ''),
            'Image: ' + (shareData.thumbnail_url || '—'),
            'Duration: ' + (shareData.duration_human || '—'),
        ];
        navigator.clipboard.writeText(lines.join('\n')).then(function() {
            showToast('✅ All info copied!');
        });
    }

    function copyTitle() {
        var title = shareData.title || document.getElementById('shareTitle').textContent || '';
        // strip leading emoji/text like '📤 '
        title = title.replace(/^\s*[^\w\d]+\s*/, '');
        if (!title) return;
        navigator.clipboard.writeText(title).then(function() {
            var btn = document.querySelector('#shareModal .share-modal-header .btn-copy');
            if (btn) {
                btn.classList.add('copied');
                btn.textContent = '✅';
                setTimeout(function() { btn.classList.remove('copied'); btn.textContent = '📋'; }, 1500);
            }
            showToast('✅ Title copied!');
        });
    }

    function showToast(msg) {
        var toast = document.getElementById('shareToast');
        toast.textContent = msg;
        toast.classList.add('show');
        setTimeout(function() { toast.classList.remove('show'); }, 2000);
    }

    // Close on ESC
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeShare();
    });
</script>