{% extends "dashboard/layout.html" %}
{% block title %}{{ _('My Files – OnlineConvert') }}{% endblock %}
{% set active_page = 'files' %}

{% block dashboard_content %}
<div class="mb-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h1 class="text-xl font-bold text-gray-900 dark:text-white"><i class="fa fa-folder-open mr-2 text-blue-500"></i>{{ _('My Files') }}</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{{ _('All your conversions — download originals, view converted files, or delete them.') }}</p>
    </div>
    <div class="flex flex-wrap gap-2">
        <form method="POST" action="/dashboard/files/delete-selected" id="batch-form">
            <button type="button" id="btn-delete-selected"
                class="px-3 py-2 rounded-lg border border-orange-300 dark:border-orange-700 text-orange-700 dark:text-orange-400 text-sm font-medium hover:bg-orange-50 dark:hover:bg-orange-900/20 transition-all hidden"
                onclick="submitSelected()" data-testid="btn-delete-selected">
                <i class="fa fa-trash mr-1"></i>{{ _('Delete Selected') }}
            </button>
            <div id="selected-ids-container"></div>
        </form>
        <form method="POST" action="/dashboard/files/delete-all" data-confirm="{{ _('Delete ALL your files permanently?') }}&#10;&#10;• {{ _('All converted output files removed from storage') }}&#10;• {{ _('All original uploads deleted') }}&#10;• {{ _('All shared links will stop working immediately') }}"  >
            <button type="submit" class="px-3 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-semibold transition-all" data-testid="btn-delete-all">
                <i class="fa fa-trash mr-1"></i>{{ _('Delete All') }}
            </button>
        </form>
    </div>
</div>

<div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
    {% if files %}
    <div class="px-5 py-3 border-b border-gray-100 dark:border-gray-800 flex items-center gap-3 bg-gray-50 dark:bg-gray-800/50">
        <input type="checkbox" id="check-all" class="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" data-testid="check-all">
        <label for="check-all" class="text-sm text-gray-600 dark:text-gray-400 cursor-pointer">{{ _('Select all') }} <span id="selected-count" class="text-indigo-500 font-semibold"></span></label>
        <span class="ml-auto text-xs text-gray-400">{{ total }} {{ _('file') if total == 1 else _('files') }}</span>
    </div>
    <div class="divide-y divide-gray-100 dark:divide-gray-800">
        {% for f in files %}
        <div class="px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors" data-testid="row-file-{{ f.id }}">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <div class="flex items-center gap-3">
                    <input type="checkbox" class="file-check rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" value="{{ f.id }}" data-testid="check-file-{{ f.id }}">
                    <div class="w-9 h-9 rounded-lg bg-blue-50 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0">
                        <i class="fa fa-file-zipper text-blue-500 text-sm"></i>
                    </div>
                    <div>
                        <div class="text-sm font-medium text-gray-800 dark:text-gray-200 max-w-[220px] truncate" title="{{ f.file_name }}" data-testid="text-file-name-{{ f.id }}">
                            {{ f.file_name or f.orig_file_name or _('Unnamed') }}
                        </div>
                        <div class="flex items-center gap-2 mt-0.5 flex-wrap">
                            <span class="text-xs font-medium px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 uppercase">{{ f.input_format or '?' }}</span>
                            <i class="fa fa-arrow-right text-gray-400 text-xs"></i>
                            <span class="text-xs font-medium px-1.5 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 uppercase">{{ f.output_format or '?' }}</span>
                            {% if f.orig_file_size %}<span class="text-xs text-gray-400">{{ (f.orig_file_size / 1048576)|round(1) }} MB</span>{% endif %}
                            <span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold
                                {% if f.status == 'finished' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                                {% elif f.status in ['pending','queued'] %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400
                                {% elif f.status == 'expired' %}bg-gray-100 dark:bg-gray-700 text-gray-500
                                {% elif f.status == 'cancelled' %}bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400
                                {% elif f.status == 'deleted' %}bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400
                                {% else %}bg-red-100 dark:bg-red-900/30 text-red-600{% endif %}">{{ f.status }}</span>
                            {% if f.status != 'deleted' and not f.upload_id %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400">{{ _('Upload deleted') }}</span>{% endif %}
                            {% if f.status not in ['deleted','expired','cancelled'] and f.upload_id and not f.output_path %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400">{{ _('Output deleted') }}</span>{% endif %}
                            {% if f.share_count and f.share_count > 0 %}<span class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400"><i class="fa fa-share-nodes"></i> {{ _('Shared') }} ({{ f.share_count }})</span>{% endif %}
                        </div>
                    </div>
                </div>
                <div class="flex items-center gap-2 flex-shrink-0 pl-10 sm:pl-0">
                    <span class="text-xs text-gray-400 mr-1">{{ f.created_at[:10] if f.created_at else '' }}</span>
                    {% if f.orig_file_path and f.status != 'deleted' %}
                    <a href="{{ full_url('/dashboard/download-original/' ~ f.id) }}"
                       class="px-3 py-1.5 rounded-lg bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 text-xs font-medium hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-all"
                       title="{{ _('Download original uploaded file') }}" data-testid="btn-download-original-{{ f.id }}">
                        <i class="fa fa-file-arrow-down mr-1"></i>{{ _('Original') }}
                    </a>
                    {% endif %}
                    {% if f.job_id and f.status not in ['deleted', 'expired'] %}
                    <a href="/output/{{ f.job_id }}"
                       class="px-3 py-1.5 rounded-lg bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 text-xs font-medium hover:bg-green-100 dark:hover:bg-green-900/30 transition-all"
                       title="{{ _('View converted file') }}" data-testid="btn-view-converted-{{ f.id }}">
                        <i class="fa fa-eye mr-1"></i>{{ _('Converted') }}
                    </a>
                    {% endif %}
                    {% if f.job_id and f.status not in ['deleted'] %}
                    <button type="button"
                        onclick="openFileSharePanel('{{ f.job_id }}', this)"
                        class="px-2.5 py-1.5 rounded-lg {% if f.share_count and f.share_count > 0 %}bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-100 dark:hover:bg-indigo-900/30{% else %}bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700{% endif %} text-xs font-medium transition-all"
                        title="{{ _('Manage shares') }}">
                        <i class="fa fa-share-nodes"></i>
                    </button>
                    {% endif %}
                    {% if f.status != 'deleted' %}
                    <form method="POST" action="/dashboard/files/delete/{{ f.id }}" data-confirm="{{ _('Delete this file permanently?') }}&#10;&#10;• {{ _('Converted output file removed from storage') }}&#10;• {{ _('Original upload deleted') }}&#10;• {{ _('Any shared link will stop working immediately') }}"  >
                        <button type="submit" class="px-2.5 py-1.5 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs font-medium hover:bg-red-100 dark:hover:bg-red-900/30 transition-all" data-testid="btn-delete-file-{{ f.id }}">
                            <i class="fa fa-trash"></i>
                        </button>
                    </form>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    {% if total_pages > 1 %}
    <div class="px-5 py-4 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between">
        <span class="text-sm text-gray-500">{{ _('Page %(page)s of %(total)s', page=page, total=total_pages) }}</span>
        <div class="flex gap-2">
            {% if page > 1 %}<a href="?page={{ page-1 }}" class="px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-all" data-testid="btn-prev">← {{ _('Prev') }}</a>{% endif %}
            {% if page < total_pages %}<a href="?page={{ page+1 }}" class="px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-all" data-testid="btn-next">{{ _('Next') }} →</a>{% endif %}
        </div>
    </div>
    {% endif %}

    {% else %}
    <div class="py-16 text-center" data-testid="text-no-files">
        <i class="fa fa-folder-open text-3xl text-gray-300 dark:text-gray-600 mb-3"></i>
        <p class="text-gray-500 dark:text-gray-400 text-sm">{{ _('No files yet.') }}</p>
        <a href="{{ full_url('/') }}" class="mt-3 inline-block text-sm text-indigo-500 hover:underline">{{ _('Convert a file') }} →</a>
    </div>
    {% endif %}
</div>

{% if shared_with_me %}
<div class="mt-6 rounded-2xl border border-indigo-200 dark:border-indigo-800 bg-white dark:bg-gray-900 overflow-hidden">
    <div class="px-5 py-3 border-b border-indigo-100 dark:border-indigo-800 bg-indigo-50 dark:bg-indigo-900/30 flex items-center gap-2">
        <i class="fa fa-share-nodes text-indigo-500 dark:text-indigo-400 text-sm"></i>
        <span class="text-sm font-semibold text-indigo-700 dark:text-indigo-300">{{ _('Shared with me') }}</span>
        <span class="ml-auto text-xs text-indigo-400">{{ shared_with_me|length }} {{ _('file') if shared_with_me|length == 1 else _('files') }}</span>
    </div>
    <div class="divide-y divide-gray-100 dark:divide-gray-800">
        {% for sw in shared_with_me %}
        <div class="px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-lg bg-indigo-50 dark:bg-indigo-900/30 flex items-center justify-center flex-shrink-0">
                        <i class="fa fa-file-zipper text-indigo-500 text-sm"></i>
                    </div>
                    <div>
                        <div class="text-sm font-medium text-gray-800 dark:text-gray-200 max-w-[220px] truncate">
                            {{ sw.file_name or _('Unnamed file') }}
                        </div>
                        <div class="flex items-center gap-2 mt-0.5 flex-wrap">
                            <span class="text-xs font-medium px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 uppercase">{{ sw.input_format or '?' }}</span>
                            <i class="fa fa-arrow-right text-gray-400 text-xs"></i>
                            <span class="text-xs font-medium px-1.5 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 uppercase">{{ sw.output_format or '?' }}</span>
                            <span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400">
                                <i class="fa fa-user text-[9px]"></i>
                                {{ _('Shared by') }} {{ sw.shared_by_name or sw.shared_by_email }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="flex items-center gap-2 flex-shrink-0 pl-12 sm:pl-0">
                    <span class="text-xs text-gray-400">{{ sw.granted_at[:10] if sw.granted_at else '' }}</span>
                    <a href="/output/{{ sw.job_id }}"
                       class="px-3 py-1.5 rounded-lg bg-indigo-50 dark:bg-indigo-900/20 text-indigo-700 dark:text-indigo-400 text-xs font-medium hover:bg-indigo-100 dark:hover:bg-indigo-900/30 transition-all">
                        <i class="fa fa-eye mr-1"></i>{{ _('View') }}
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<script>
(function(){
    var checkAll = document.getElementById('check-all');
    var deleteSelectedBtn = document.getElementById('btn-delete-selected');
    var countEl = document.getElementById('selected-count');
    if (!checkAll) return;
    function updateUI() {
        var checked = document.querySelectorAll('.file-check:checked');
        if (checked.length > 0) {
            deleteSelectedBtn.classList.remove('hidden');
            countEl.textContent = '(' + checked.length + ' selected)';
        } else {
            deleteSelectedBtn.classList.add('hidden');
            countEl.textContent = '';
        }
    }
    checkAll.addEventListener('change', function() {
        document.querySelectorAll('.file-check').forEach(function(cb) { cb.checked = checkAll.checked; });
        updateUI();
    });
    document.querySelectorAll('.file-check').forEach(function(cb) {
        cb.addEventListener('change', updateUI);
    });
    window.submitSelected = function() {
        var container = document.getElementById('selected-ids-container');
        container.innerHTML = '';
        var checked = document.querySelectorAll('.file-check:checked');
        if (!checked.length) { alert('No files selected.'); return; }
        window.ocConfirm('Delete ' + checked.length + ' file(s) permanently?\n\n\u2022 All original uploads and converted outputs will be removed from storage\n\u2022 Shared links for these files will stop working immediately\n\u2022 This cannot be undone', function() {
        checked.forEach(function(cb) {
            var inp = document.createElement('input');
            inp.type = 'hidden'; inp.name = 'ids'; inp.value = cb.value;
            container.appendChild(inp);
        });
        document.getElementById('batch-form').submit();
        }); /* end ocConfirm */
    };
})();

/* ---- Share management panel ---- */
window._sharePanelJobId = null;
window._spCurrentToken = null;

window.openFileSharePanel = function(jobId, triggerBtn) {
    window._sharePanelJobId = jobId;
    window._spCurrentToken = null;
    var panel = document.getElementById('share-panel-modal');
    var body = document.getElementById('share-panel-body');
    if (!panel || !body) return;
    body.innerHTML = '<p class="text-sm text-gray-400 py-4 text-center"><i class="fa fa-spinner fa-spin mr-1"></i>Loading…</p>';
    panel.classList.remove('hidden');

    Promise.all([
        fetch('/share/grants/' + jobId, { credentials: 'include' }).then(function(r){ return r.json(); }).catch(function(){ return { ok: false }; }),
        fetch('/share/list/' + jobId, { credentials: 'include' }).then(function(r){ return r.json(); }).catch(function(){ return { ok: false }; })
    ]).then(function(results) {
        var gd = results[0], ld = results[1];
        var html = '';

        // --- People with access ---
        var grants = (gd.ok && gd.grants) ? gd.grants : [];
        html += '<div class="mb-4">';
        html += '<p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">People with access</p>';
        if (grants.length === 0) {
            html += '<p class="text-xs text-gray-400 dark:text-gray-600 italic">No email invites sent yet.</p>';
        } else {
            grants.forEach(function(g) {
                var init = (g.granted_to_email || '?')[0].toUpperCase();
                html += '<div class="flex items-center gap-2 py-2 border-b border-gray-100 dark:border-gray-800" id="sp-grant-' + g.id + '">'
                    + '<div class="w-7 h-7 rounded-full bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center text-indigo-700 dark:text-indigo-300 text-xs font-bold flex-shrink-0">' + init + '</div>'
                    + '<span class="flex-1 text-sm text-gray-700 dark:text-gray-300 truncate">' + _spEsc(g.granted_to_email) + '</span>'
                    + '<button onclick="_spRevokeGrant(' + g.id + ')" class="text-xs text-red-500 hover:underline flex items-center gap-0.5"><i class="fa fa-ban text-xs"></i> Revoke</button>'
                    + '</div>';
            });
        }
        html += '</div>';

        // --- Share links ---
        var links = (ld.ok && ld.links) ? ld.links : [];
        html += '<div class="mb-4">';
        html += '<p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">Shared links</p>';
        if (links.length === 0) {
            html += '<p class="text-xs text-gray-400 dark:text-gray-600 italic">No share links created yet.</p>';
        } else {
            links.forEach(function(l) {
                var badge = l.expires_at ? ('<span class="text-[10px] text-orange-600 ml-1">exp ' + l.expires_at.slice(0,10) + '</span>') : '';
                var ot = l.is_one_time ? '<span class="text-[10px] text-indigo-500 ml-1">1-time</span>' : '';
                var pw = l.has_password ? '<i class="fa fa-lock text-[10px] text-gray-400 ml-1"></i>' : '';
                html += '<div class="flex items-start gap-2 py-2 border-b border-gray-100 dark:border-gray-800" id="sp-link-' + _spEsc(l.token) + '">'
                    + '<div class="flex-1 min-w-0">'
                    + '<div class="flex items-center gap-1 mb-0.5">'
                    + '<a href="' + _spEsc(l.url) + '" target="_blank" class="text-xs text-blue-600 dark:text-blue-400 hover:underline font-mono truncate block max-w-[200px]">' + _spEsc(l.url) + '</a>'
                    + '<button onclick="_spCopyLink(\'' + _spEsc(l.url) + '\')" class="flex-shrink-0 text-[10px] text-gray-400 hover:text-gray-600 px-1 py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700"><i class="fa fa-copy"></i></button>'
                    + '</div>'
                    + '<span class="text-[10px] text-gray-400">' + (l.created_at || '').slice(0,10) + badge + ot + pw + '</span>'
                    + '</div>'
                    + '<button onclick="_spRevokeLink(\'' + _spEsc(l.token) + '\')" class="text-xs text-red-500 hover:underline flex items-center gap-0.5 flex-shrink-0"><i class="fa fa-ban text-xs"></i> Revoke</button>'
                    + '</div>';
            });
        }
        html += '</div>';

        // --- Create share link ---
        html += '<div class="mb-4 pt-3 border-t border-gray-100 dark:border-gray-800">';
        html += '<p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">Create share link</p>';
        html += '<div class="space-y-2">';
        html += '<div><label class="block text-xs text-gray-500 dark:text-gray-400 mb-1"><i class="fa fa-lock text-gray-400 mr-1 text-xs"></i>Password (optional)</label>'
             + '<input type="password" id="sp-link-password" class="w-full px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm outline-none focus:ring-2 focus:ring-indigo-400/40" placeholder="Leave blank for no password"></div>';
        html += '<label class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 cursor-pointer">'
             + '<input type="checkbox" id="sp-link-onetime" class="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"> One-time link <span class="text-gray-400">(expires after first access)</span></label>';
        html += '<div><label class="block text-xs text-gray-500 dark:text-gray-400 mb-1"><i class="fa fa-clock text-gray-400 mr-1 text-xs"></i>Expires in</label>'
             + '<select id="sp-link-expiry" class="w-full px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm outline-none focus:ring-2 focus:ring-indigo-400/40">'
             + '<option value="">Never</option>'
             + '<option value="1">1 hour</option>'
             + '<option value="6">6 hours</option>'
             + '<option value="24">24 hours</option>'
             + '<option value="72">3 days</option>'
             + '<option value="168">7 days</option>'
             + '<option value="720">30 days</option>'
             + '</select></div>';
        html += '</div>';
        html += '<button type="button" id="sp-create-link-btn" onclick="_spCreateLink()" class="mt-3 w-full px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold transition-all flex items-center justify-center gap-1.5"><i class="fa fa-link text-xs"></i> Create Share Link</button>';
        html += '<div id="sp-link-result" class="hidden mt-2">'
             + '<div class="flex items-center gap-2 p-2 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 mb-2"><i class="fa fa-check-circle text-green-500 text-xs"></i><span class="text-xs text-green-700 dark:text-green-300 font-medium">Share link created!</span></div>'
             + '<div class="flex items-center gap-2">'
             + '<input type="text" id="sp-link-url-display" readonly class="flex-1 px-2 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs font-mono outline-none min-w-0">'
             + '<button onclick="_spCopyCreatedLink()" class="flex-shrink-0 px-2 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs transition-all"><i class="fa fa-copy"></i></button>'
             + '</div>'
             + '<div class="flex items-center gap-3 mt-1">'
             + '<button onclick="_spRevokeCreatedLink()" class="text-xs text-red-500 hover:underline flex items-center gap-1"><i class="fa fa-ban text-xs"></i> Revoke</button>'
             + '<span class="text-gray-300 dark:text-gray-700">|</span>'
             + '<button onclick="_spResetLinkForm()" class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline"><i class="fa fa-plus text-xs mr-0.5"></i> Create another</button>'
             + '</div>'
             + '</div>';
        html += '<p id="sp-link-error" class="hidden mt-2 text-xs px-2 py-1 rounded bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-300"></p>';
        html += '</div>';

        // --- Email invite ---
        html += '<div class="pt-3 border-t border-gray-100 dark:border-gray-800">';
        html += '<p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">Invite by email</p>';
        html += '<div class="flex gap-2">';
        html += '<input type="email" id="sp-invite-email" placeholder="Email address" class="flex-1 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm outline-none focus:ring-2 focus:ring-indigo-400/40">';
        html += '<button type="button" onclick="_spSendInvite()" class="flex-shrink-0 px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold transition-all"><i class="fa fa-paper-plane text-xs mr-1"></i>Send</button>';
        html += '</div>';
        html += '<p id="sp-invite-status" class="hidden mt-2 text-xs px-2 py-1 rounded"></p>';
        html += '</div>';

        body.innerHTML = html;
    });
};

window._spEsc = function(s) {
    return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
};

window._spCopyLink = function(url) {
    navigator.clipboard.writeText(url).catch(function(){});
};

window._spCopyCreatedLink = function() {
    var el = document.getElementById('sp-link-url-display');
    if (el) navigator.clipboard.writeText(el.value).catch(function(){});
};

window._spCreateLink = function() {
    var jobId = window._sharePanelJobId;
    var password = (document.getElementById('sp-link-password') || {}).value || '';
    var oneTime = !!(document.getElementById('sp-link-onetime') || {}).checked;
    var expiresIn = (document.getElementById('sp-link-expiry') || {}).value || '';
    var errEl = document.getElementById('sp-link-error');
    var btn = document.getElementById('sp-create-link-btn');
    if (errEl) errEl.classList.add('hidden');
    if (btn) { btn.disabled = true; btn.innerHTML = '<i class="fa fa-spinner fa-spin text-xs mr-1"></i>Creating…'; }

    fetch('/share/create', {
        method: 'POST', credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ job_id: jobId, password: password, is_one_time: oneTime, expires_in_hours: expiresIn ? parseInt(expiresIn) : null })
    }).then(function(r){ return r.json(); }).then(function(data) {
        if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fa fa-link text-xs"></i> Create Share Link'; }
        if (data.ok) {
            window._spCurrentToken = data.token || null;
            var urlEl = document.getElementById('sp-link-url-display');
            if (urlEl) urlEl.value = data.url || '';
            var formArea = document.getElementById('sp-create-link-btn');
            var resultEl = document.getElementById('sp-link-result');
            if (resultEl) resultEl.classList.remove('hidden');
            // hide the create button and inputs, show result
            var inputs = document.querySelectorAll('#sp-link-password,#sp-link-onetime,#sp-link-expiry');
            inputs.forEach(function(el){ if(el.parentElement) el.parentElement.style.display='none'; });
            var labels = document.querySelectorAll('label[for="sp-link-onetime"]');
            labels.forEach(function(el){ el.style.display='none'; });
            if (btn) btn.style.display = 'none';
        } else {
            if (errEl) { errEl.textContent = data.error || 'Failed to create link.'; errEl.classList.remove('hidden'); }
        }
    }).catch(function() {
        if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fa fa-link text-xs"></i> Create Share Link'; }
        if (errEl) { errEl.textContent = 'Network error. Please try again.'; errEl.classList.remove('hidden'); }
    });
};

window._spRevokeCreatedLink = function() {
    var token = window._spCurrentToken;
    if (!token) return;
    window.ocConfirm('Revoke this share link?\n\n\u2022 Anyone with the link will immediately lose access\n\u2022 This cannot be undone', function() {
    fetch('/share/' + token + '/revoke', { method: 'POST', credentials: 'include' })
        .then(function(r){ return r.json(); }).then(function(data) {
            if (data.ok) {
                window._spCurrentToken = null;
                var jobId = window._sharePanelJobId;
                window.openFileSharePanel(jobId);
            } else { alert(data.error || 'Failed.'); }
        }).catch(function(){ alert('Network error.'); });
    }); /* end ocConfirm */
};

window._spResetLinkForm = function() {
    var jobId = window._sharePanelJobId;
    window.openFileSharePanel(jobId);
};

window._spRevokeGrant = function(grantId) {
    window.ocConfirm('Revoke this person\'s access?\n\n\u2022 They will immediately lose access to this file\n\u2022 This cannot be undone', function() {
    var jobId = window._sharePanelJobId;
    fetch('/share/grants/revoke', {
        method: 'POST', credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ grant_id: grantId, job_id: jobId })
    }).then(function(r) { return r.json(); }).then(function(d) {
        if (d.ok) { var el = document.getElementById('sp-grant-' + grantId); if (el) el.remove(); }
        else alert(d.error || 'Failed.');
    }).catch(function() { alert('Network error.'); });
    }); /* end ocConfirm */
};

window._spRevokeLink = function(token) {
    window.ocConfirm('Revoke this share link?\n\n\u2022 Anyone with the link will immediately lose access\n\u2022 This cannot be undone', function() {
    fetch('/share/' + token + '/revoke', {
        method: 'POST', credentials: 'include',
        headers: { 'Content-Type': 'application/json' }
    }).then(function(r) { return r.json(); }).then(function(d) {
        if (d.ok) { var el = document.getElementById('sp-link-' + token); if (el) el.remove(); }
        else alert(d.error || 'Failed.');
    }).catch(function() { alert('Network error.'); });
    }); /* end ocConfirm */
};

window._spSendInvite = function() {
    var emailEl = document.getElementById('sp-invite-email');
    var statusEl = document.getElementById('sp-invite-status');
    var jobId = window._sharePanelJobId;
    var email = emailEl ? emailEl.value.trim() : '';

    function showStatus(msg, isError) {
        if (!statusEl) return;
        statusEl.textContent = msg;
        statusEl.className = 'mt-2 text-xs px-2 py-1 rounded ' + (isError
            ? 'bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-300'
            : 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300');
        statusEl.classList.remove('hidden');
    }

    if (!email || email.indexOf('@') === -1) { showStatus('Please enter a valid email address.', true); return; }
    if (!jobId) { showStatus('File ID missing. Please close and reopen this panel.', true); return; }

    fetch('/share/grant', {
        method: 'POST', credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ job_id: jobId, email: email })
    }).then(function(r) { return r.json(); }).then(function(d) {
        if (d.ok) {
            var msg = d.email_warning
                ? 'Access granted to ' + email + '. (Note: ' + d.email_warning + ')'
                : 'Invitation sent to ' + email + '!';
            showStatus(msg, false);
            if (emailEl) emailEl.value = '';
            setTimeout(function() { window.openFileSharePanel(jobId); }, 800);
        } else {
            showStatus(d.error || 'Failed to send invitation.', true);
        }
    }).catch(function() { showStatus('Network error. Please try again.', true); });
};
</script>

{# Share management panel modal #}
<div id="share-panel-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 hidden" onclick="if(event.target===this)document.getElementById('share-panel-modal').classList.add('hidden')">
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">
        <div class="flex items-center gap-3 px-5 py-4 border-b border-gray-100 dark:border-gray-800">
            <div class="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center flex-shrink-0">
                <i class="fa fa-share-nodes text-indigo-600 dark:text-indigo-400 text-sm"></i>
            </div>
            <h3 class="text-sm font-bold text-gray-900 dark:text-white flex-1">Manage Shares</h3>
            <button onclick="document.getElementById('share-panel-modal').classList.add('hidden')" class="w-7 h-7 flex items-center justify-center rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                <i class="fa fa-xmark text-sm"></i>
            </button>
        </div>
        <div class="p-5 max-h-[75vh] overflow-y-auto" id="share-panel-body">
            <p class="text-sm text-gray-400 py-4 text-center"><i class="fa fa-spinner fa-spin mr-1"></i>Loading…</p>
        </div>
        <div class="px-5 py-3 border-t border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50 flex justify-end">
            <button onclick="document.getElementById('share-panel-modal').classList.add('hidden')" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">Close</button>
        </div>
    </div>
</div>
{% endblock %}