<!-- Share Modal -->
<div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px;">
            <div class="modal-header" style="border-bottom: 1px solid var(--border-color); padding: 20px 24px;">
                <h5 class="modal-title" id="shareModalLabel" style="font-weight: 600; color: var(--text-primary);">
                    <i class="bi bi-share me-2"></i>Share
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="padding: 24px;">
                <p style="color: var(--text-secondary); margin-bottom: 16px;">Share this link with your friends:</p>
                
                <div class="share-link-container" style="display: flex; gap: 8px; align-items: center;">
                    <input type="text" id="shareLinkInput" class="form-control" readonly 
                           style="background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 12px 16px; border-radius: 8px;">
                    <button type="button" id="copyLinkBtn" class="btn-copy action-btn action-btn-primary">
                        <i class="bi bi-clipboard"></i> <span>Copy</span>
                    </button>
                </div>
                
                <div id="copySuccess" class="copy-success" style="display: none; margin-top: 12px; color: #4caf50; font-size: 14px; text-align: center;">
                    <i class="bi bi-check-circle-fill me-1"></i> Link copied to clipboard!
                </div>
                
                <div style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
                    <p style="color: var(--text-secondary); font-size: 13px; margin-bottom: 12px;">Share on social media:</p>
                    <div style="display: flex; gap: 12px;">
                        <a href="#" id="shareFacebook" class="social-share-btn" target="_blank" 
                           style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #1877f2; color: white; text-decoration: none;">
                            <i class="bi bi-facebook"></i>
                        </a>
                        <a href="#" id="shareTwitter" class="social-share-btn" target="_blank"
                           style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #1da1f2; color: white; text-decoration: none;">
                            <i class="bi bi-twitter-x"></i>
                        </a>
                        <a href="#" id="shareWhatsApp" class="social-share-btn" target="_blank"
                           style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #25d366; color: white; text-decoration: none;">
                            <i class="bi bi-whatsapp"></i>
                        </a>
                        <a href="#" id="shareTelegram" class="social-share-btn" target="_blank"
                           style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0088cc; color: white; text-decoration: none;">
                            <i class="bi bi-telegram"></i>
                        </a>
                        <a href="#" id="shareEmailBtn" class="social-share-btn" role="button"
                           style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #6b7280; color: white; text-decoration: none;">
                            <i class="bi bi-envelope-fill"></i>
                        </a>
                        <a href="#" id="shareMembersBtn" class="social-share-btn" role="button" title="Share with members"
                           style="display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #e61e1e; color: white; text-decoration: none;">
                            <i class="bi bi-people-fill"></i>
                        </a>
                    </div>
                </div>

                {{-- Send by email --}}
                <div id="shareEmailSection" style="display:none; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color);">
                    <p style="color: var(--text-secondary); font-size: 13px; margin-bottom: 12px;">
                        <i class="bi bi-envelope me-1"></i> Send to a friend by email:
                    </p>
                    <input type="email" id="shareEmailTo" class="form-control" placeholder="friend@example.com" autocomplete="off"
                           style="background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 10px 14px; border-radius: 8px;">
                    <textarea id="shareEmailMsg" class="form-control" rows="2" maxlength="500" placeholder="Add a short message (optional)"
                           style="background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 10px 14px; border-radius: 8px; margin-top: 8px; resize: vertical;"></textarea>
                    <button type="button" id="shareEmailSend" class="action-btn action-btn-primary" style="width:100%; justify-content:center; margin-top:10px;">
                        <i class="bi bi-send"></i> <span>Send email</span>
                    </button>
                    <div id="shareEmailStatus" style="display:none; margin-top:10px; font-size:13px; text-align:center;"></div>
                </div>

                {{-- Share with members --}}
                <div id="shareMembersSection" style="display:none; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color);">
                    <p style="color: var(--text-secondary); font-size: 13px; margin-bottom: 12px;">
                        <i class="bi bi-people me-1"></i> Search members and share — they get a notification and an email:
                    </p>
                    <div style="position: relative;">
                        <input type="text" id="shareMemberSearch" class="form-control" placeholder="Search members by name…" autocomplete="off"
                               style="background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 10px 14px; border-radius: 8px;">
                        <div id="shareMemberResults" class="share-member-results" style="display:none;"></div>
                    </div>
                    <div id="shareMemberChips" class="share-member-chips"></div>
                    <textarea id="shareMemberMsg" class="form-control" rows="2" maxlength="500" placeholder="Add a short message (optional)"
                              style="background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 10px 14px; border-radius: 8px; margin-top: 10px; resize: vertical;"></textarea>
                    <button type="button" id="shareMemberSend" class="action-btn action-btn-primary" style="width:100%; justify-content:center; margin-top:10px;">
                        <i class="bi bi-send"></i> <span>Send to members</span>
                    </button>
                    <div id="shareMemberStatus" style="display:none; margin-top:10px; font-size:13px; text-align:center;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.social-share-btn {
    transition: transform 0.2s, opacity 0.2s;
}
.social-share-btn:hover {
    transform: scale(1.1);
    opacity: 0.9;
}
.btn-copy.copied {
    background: #4caf50 !important;
    border-color: #4caf50 !important;
}
/* Member share picker */
.share-member-results {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.5);
    max-height: 240px; overflow-y: auto; padding: 4px;
}
.share-member-opt {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 6px; cursor: pointer;
}
.share-member-opt:hover { background: rgba(255,255,255,.06); }
.share-member-opt img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.share-member-opt .smo-name { color: var(--text-primary); font-size: 14px; font-weight: 600; line-height: 1.2; }
.share-member-opt .smo-handle { color: var(--text-secondary); font-size: 12px; }
.share-member-empty { padding: 10px; color: var(--text-secondary); font-size: 13px; text-align: center; }
.share-member-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.share-member-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px;
    background: rgba(230,30,30,.12); border: 1px solid rgba(230,30,30,.3);
    border-radius: 20px; color: var(--text-primary); font-size: 13px;
}
.share-member-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.share-member-chip button { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 0 2px; line-height: 1; }
.share-member-chip button:hover { color: #e61e1e; }
</style>

<script>
function _getLatestCsrf() {
    var match = document.cookie.match(/(?:^|;\s*)XSRF-TOKEN=([^;]+)/);
    if (match) return decodeURIComponent(match[1]);
    return (typeof csrf !== 'undefined') ? csrf : '';
}

// Set per-open so the "Send by email" form knows the endpoint + which version to send.
var _shareEmailUrl   = '';
var _shareMembersUrl = '';
var _shareTrack      = '';

async function openShareModal(videoUrl, videoTitle, recordUrl, emailUrl, membersUrl) {
    var csrfToken = _getLatestCsrf();
    var shareUrl  = videoUrl;

    // Preserve the version selector (?track=) from the requested URL — the server's tracked
    // share link replaces shareUrl below, so we re-attach it afterwards.
    var trackParam = '';
    try { trackParam = (new URL(videoUrl, window.location.origin)).searchParams.get('track') || ''; } catch (e) {}
    _shareEmailUrl   = emailUrl || '';
    _shareMembersUrl = membersUrl || '';
    _shareTrack      = trackParam;

    // Obtain a unique tracked share link from the server
    if (recordUrl) {
        try {
            var res = await fetch(recordUrl, {
                method:  'POST',
                headers: {
                    'X-CSRF-TOKEN':     csrfToken,
                    'Accept':           'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
            });
            if (res.ok) {
                var data = await res.json();
                if (data.url) shareUrl = data.url;
            }
        } catch (e) { /* fallback to plain URL */ }
    }

    // Re-attach the version selector so the recipient opens the right language.
    if (trackParam) {
        shareUrl += (shareUrl.indexOf('?') === -1 ? '?' : '&') + 'track=' + encodeURIComponent(trackParam);
    }

    // Mobile: use native share sheet with the unique link
    if (window.innerWidth <= 768 && navigator.share) {
        navigator.share({ title: videoTitle, url: shareUrl }).catch(function() {});
        return;
    }

    // Desktop: show modal
    _populateShareModal(shareUrl, videoTitle);
    var modal = new bootstrap.Modal(document.getElementById('shareModal'), { backdrop: true, keyboard: true });
    modal.show();
}

function _populateShareModal(shareUrl, videoTitle) {
    document.getElementById('shareLinkInput').value = shareUrl;

    var encodedUrl   = encodeURIComponent(shareUrl);
    var encodedTitle = encodeURIComponent(videoTitle);
    var waText       = encodeURIComponent(videoTitle + '\n' + shareUrl);

    document.getElementById('shareFacebook').href = 'https://www.facebook.com/sharer/sharer.php?u=' + encodedUrl;
    document.getElementById('shareTwitter').href  = 'https://twitter.com/intent/tweet?url=' + encodedUrl + '&text=' + encodedTitle;
    document.getElementById('shareWhatsApp').href = 'https://wa.me/?text=' + waText;
    document.getElementById('shareTelegram').href = 'https://t.me/share/url?url=' + encodedUrl + '&text=' + encodedTitle;

    var copyBtn = document.getElementById('copyLinkBtn');
    copyBtn.innerHTML = '<i class="bi bi-clipboard"></i> <span>Copy</span>';
    copyBtn.classList.remove('copied');
    document.getElementById('copySuccess').style.display = 'none';

    // Reset the email form; the envelope button only works when an endpoint was provided.
    var emailBtn = document.getElementById('shareEmailBtn');
    var emailSec = document.getElementById('shareEmailSection');
    if (emailBtn) emailBtn.style.display = _shareEmailUrl ? 'flex' : 'none';
    if (emailSec) {
        emailSec.style.display = 'none';
        var to = document.getElementById('shareEmailTo');   if (to) to.value = '';
        var msg = document.getElementById('shareEmailMsg'); if (msg) msg.value = '';
        var st = document.getElementById('shareEmailStatus'); if (st) st.style.display = 'none';
    }

    // Reset the members picker; the people button only works when an endpoint was provided.
    var membersBtn = document.getElementById('shareMembersBtn');
    var membersSec = document.getElementById('shareMembersSection');
    if (membersBtn) membersBtn.style.display = _shareMembersUrl ? 'flex' : 'none';
    if (typeof _resetMembersPicker === 'function') _resetMembersPicker();
    if (membersSec) membersSec.style.display = 'none';
}

function _copyToClipboard(text) {
    // Prefer modern clipboard API (requires HTTPS)
    if (navigator.clipboard && window.isSecureContext) {
        return navigator.clipboard.writeText(text);
    }
    // Textarea fallback — works even inside Bootstrap modals
    return new Promise(function(resolve, reject) {
        var ta = document.createElement('textarea');
        ta.value = text;
        ta.setAttribute('readonly', '');
        ta.style.cssText = 'position:fixed;top:-9999px;left:-9999px;opacity:0;';
        document.body.appendChild(ta);
        ta.focus();
        ta.select();
        var ok = false;
        try { ok = document.execCommand('copy'); } catch(e) {}
        document.body.removeChild(ta);
        ok ? resolve() : reject();
    });
}

document.addEventListener('DOMContentLoaded', function() {
    var copyBtn     = document.getElementById('copyLinkBtn');
    var shareInput  = document.getElementById('shareLinkInput');
    var copySuccess = document.getElementById('copySuccess');

    if (!copyBtn || !shareInput) return;

    copyBtn.addEventListener('click', function() {
        _copyToClipboard(shareInput.value).then(function() {
            copyBtn.innerHTML = '<i class="bi bi-check-lg"></i> <span>Copied!</span>';
            copyBtn.classList.add('copied');
            copySuccess.style.display = 'block';
            setTimeout(function() {
                copyBtn.innerHTML = '<i class="bi bi-clipboard"></i> <span>Copy</span>';
                copyBtn.classList.remove('copied');
                copySuccess.style.display = 'none';
            }, 2500);
        }).catch(function() {
            showToast('Could not copy — please copy the link manually.', 'error');
        });
    });

    // ── Send by email ──────────────────────────────────────────────
    var emailBtn   = document.getElementById('shareEmailBtn');
    var emailSec   = document.getElementById('shareEmailSection');
    var emailTo    = document.getElementById('shareEmailTo');
    var emailMsg   = document.getElementById('shareEmailMsg');
    var emailSend  = document.getElementById('shareEmailSend');
    var emailStat  = document.getElementById('shareEmailStatus');

    if (emailBtn && emailSec) {
        emailBtn.addEventListener('click', function(e) {
            e.preventDefault();
            emailSec.style.display = (emailSec.style.display === 'none' || !emailSec.style.display) ? 'block' : 'none';
            if (emailSec.style.display === 'block' && emailTo) emailTo.focus();
        });
    }

    function _showEmailStatus(msg, color) {
        if (!emailStat) return;
        emailStat.textContent = msg;
        emailStat.style.color = color;
        emailStat.style.display = 'block';
    }

    if (emailSend) {
        emailSend.addEventListener('click', function() {
            var to = (emailTo && emailTo.value || '').trim();
            if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(to)) {
                _showEmailStatus('Please enter a valid email address.', '#ef4444');
                if (emailTo) emailTo.focus();
                return;
            }
            if (!_shareEmailUrl) { _showEmailStatus('Email sharing is unavailable here.', '#ef4444'); return; }

            emailSend.disabled = true;
            var _orig = emailSend.innerHTML;
            emailSend.innerHTML = '<i class="bi bi-hourglass-split"></i> <span>Sending…</span>';
            _showEmailStatus('Sending…', 'var(--text-secondary)');

            var body = new URLSearchParams({
                _token:  '{{ csrf_token() }}',
                email:   to,
                message: (emailMsg && emailMsg.value || ''),
                track:   _shareTrack || '0',
            });

            fetch(_shareEmailUrl, {
                method:  'POST',
                headers: {
                    'X-CSRF-TOKEN':     _getLatestCsrf(),
                    'Accept':           'application/json',
                    'Content-Type':     'application/x-www-form-urlencoded',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: body.toString(),
            })
            .then(function(r) { return r.json().then(function(d){ return { ok: r.ok, d: d }; }); })
            .then(function(res) {
                emailSend.disabled = false;
                emailSend.innerHTML = _orig;
                if (res.ok && res.d.success) {
                    _showEmailStatus('Sent! Your friend will get the email shortly.', '#4caf50');
                    if (emailTo) emailTo.value = '';
                    if (emailMsg) emailMsg.value = '';
                    setTimeout(function(){ if (emailSec) emailSec.style.display = 'none'; }, 1800);
                } else {
                    _showEmailStatus((res.d && res.d.error) || 'Could not send the email. Please try again.', '#ef4444');
                }
            })
            .catch(function() {
                emailSend.disabled = false;
                emailSend.innerHTML = _orig;
                _showEmailStatus('Network error — please try again.', '#ef4444');
            });
        });
    }

    // ── Share with members ─────────────────────────────────────────
    var membersBtn    = document.getElementById('shareMembersBtn');
    var membersSec    = document.getElementById('shareMembersSection');
    var memberSearch  = document.getElementById('shareMemberSearch');
    var memberResults = document.getElementById('shareMemberResults');
    var memberChips   = document.getElementById('shareMemberChips');
    var memberMsg     = document.getElementById('shareMemberMsg');
    var memberSend    = document.getElementById('shareMemberSend');
    var memberStatus  = document.getElementById('shareMemberStatus');
    var _selectedMembers = [];
    var _searchTimer = null;

    function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, function(c){ return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]; }); }

    window._resetMembersPicker = function () {
        _selectedMembers = [];
        if (memberSearch) memberSearch.value = '';
        if (memberMsg) memberMsg.value = '';
        if (memberResults) { memberResults.style.display = 'none'; memberResults.innerHTML = ''; }
        if (memberStatus) memberStatus.style.display = 'none';
        _renderChips();
    };

    function _showMemberStatus(msg, color) {
        if (!memberStatus) return;
        memberStatus.textContent = msg; memberStatus.style.color = color; memberStatus.style.display = 'block';
    }

    function _renderChips() {
        if (!memberChips) return;
        memberChips.innerHTML = _selectedMembers.map(function (u) {
            return '<span class="share-member-chip">'
                 + '<img src="' + escAttr(u.avatar) + '" alt="">'
                 + escAttr(u.name)
                 + '<button type="button" data-id="' + u.id + '" aria-label="Remove"><i class="bi bi-x-lg"></i></button>'
                 + '</span>';
        }).join('');
        memberChips.querySelectorAll('button[data-id]').forEach(function (b) {
            b.addEventListener('click', function () {
                _selectedMembers = _selectedMembers.filter(function (u) { return String(u.id) !== b.getAttribute('data-id'); });
                _renderChips();
            });
        });
    }

    function _renderResults(users) {
        if (!memberResults) return;
        var available = users.filter(function (u) { return !_selectedMembers.some(function (s) { return s.id === u.id; }); });
        if (!available.length) {
            memberResults.innerHTML = '<div class="share-member-empty">No members found</div>';
        } else {
            memberResults.innerHTML = available.map(function (u) {
                return '<div class="share-member-opt" data-id="' + u.id + '">'
                     + '<img src="' + escAttr(u.avatar) + '" alt="">'
                     + '<div><div class="smo-name">' + escAttr(u.name) + '</div>'
                     + '<div class="smo-handle">@' + escAttr(u.channel) + '</div></div>'
                     + '</div>';
            }).join('');
            memberResults.querySelectorAll('.share-member-opt').forEach(function (el) {
                el.addEventListener('click', function () {
                    var id = parseInt(el.getAttribute('data-id'), 10);
                    var u = available.find(function (x) { return x.id === id; });
                    if (u && !_selectedMembers.some(function (s) { return s.id === u.id; })) {
                        _selectedMembers.push(u);
                        _renderChips();
                    }
                    memberSearch.value = '';
                    memberResults.style.display = 'none';
                    memberSearch.focus();
                });
            });
        }
        memberResults.style.display = 'block';
    }

    if (membersBtn && membersSec) {
        membersBtn.addEventListener('click', function (e) {
            e.preventDefault();
            membersSec.style.display = (membersSec.style.display === 'none' || !membersSec.style.display) ? 'block' : 'none';
            if (membersSec.style.display === 'block' && memberSearch) memberSearch.focus();
        });
    }

    if (memberSearch) {
        memberSearch.addEventListener('input', function () {
            var q = memberSearch.value.trim();
            clearTimeout(_searchTimer);
            if (!q) { memberResults.style.display = 'none'; return; }
            _searchTimer = setTimeout(function () {
                fetch('{{ route('users.search') }}?q=' + encodeURIComponent(q), {
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                })
                .then(function (r) { return r.json(); })
                .then(function (data) { _renderResults(data.users || []); })
                .catch(function () {});
            }, 250);
        });
        document.addEventListener('click', function (e) {
            if (memberResults && !memberResults.contains(e.target) && e.target !== memberSearch) {
                memberResults.style.display = 'none';
            }
        });
    }

    if (memberSend) {
        memberSend.addEventListener('click', function () {
            if (!_shareMembersUrl) { _showMemberStatus('Member sharing is unavailable here.', '#ef4444'); return; }
            if (!_selectedMembers.length) { _showMemberStatus('Select at least one member.', '#ef4444'); return; }

            memberSend.disabled = true;
            var _orig = memberSend.innerHTML;
            memberSend.innerHTML = '<i class="bi bi-hourglass-split"></i> <span>Sending…</span>';
            _showMemberStatus('Sending…', 'var(--text-secondary)');

            var body = new URLSearchParams();
            body.append('_token', '{{ csrf_token() }}');
            body.append('message', (memberMsg && memberMsg.value) || '');
            _selectedMembers.forEach(function (u) { body.append('user_ids[]', u.id); });

            fetch(_shareMembersUrl, {
                method:  'POST',
                headers: {
                    'X-CSRF-TOKEN':     _getLatestCsrf(),
                    'Accept':           'application/json',
                    'Content-Type':     'application/x-www-form-urlencoded',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: body.toString(),
            })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
            .then(function (res) {
                memberSend.disabled = false;
                memberSend.innerHTML = _orig;
                if (res.ok && res.d.success) {
                    _showMemberStatus('Shared with ' + (res.d.count || _selectedMembers.length) + ' member(s) — notification + email sent.', '#4caf50');
                    _selectedMembers = []; _renderChips();
                    if (memberMsg) memberMsg.value = '';
                    setTimeout(function () { if (membersSec) membersSec.style.display = 'none'; }, 2000);
                } else {
                    _showMemberStatus((res.d && res.d.error) || 'Could not share. Please try again.', '#ef4444');
                }
            })
            .catch(function () {
                memberSend.disabled = false;
                memberSend.innerHTML = _orig;
                _showMemberStatus('Network error — please try again.', '#ef4444');
            });
        });
    }
});
</script>

