{% extends "admin/layout.html" %}
{% block title %}User Files – Admin{% endblock %}
{% block body %}
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-user-files">
            <i class="fa fa-folder-user mr-2 text-violet-500"></i>{% trans %}User Files{% endtrans %}
        </h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            {% trans %}View all users' conversion files and manage their share links and access grants.{% endtrans %}
            <strong data-testid="text-total-count">{{ total }}</strong> {% trans %}total{% endtrans %}.
        </p>
    </div>
</div>

<!-- Search bar -->
<form method="GET" action="" class="mb-4 flex gap-2">
    <input type="text" name="q" value="{{ search }}" placeholder="{% trans %}Search by username or email…{% endtrans %}"
           class="flex-1 px-4 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white text-sm outline-none focus:ring-2 focus:ring-violet-400/40 transition-all"
           data-testid="input-search-user-files">
    <button type="submit" class="px-4 py-2.5 rounded-xl bg-violet-600 hover:bg-violet-700 text-white text-sm font-medium transition-all">
        <i class="fa fa-search mr-1"></i>{% trans %}Search{% endtrans %}
    </button>
    {% if search %}
    <a href="?" class="px-4 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">
        <i class="fa fa-times mr-1"></i>{% trans %}Clear{% endtrans %}
    </a>
    {% endif %}
</form>

<!-- Files Table -->
<div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
    {% if files %}
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{% trans %}File{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{% trans %}Owner{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{% trans %}Format{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{% trans %}Status{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{% trans %}Shares{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{% trans %}Date{% endtrans %}</th>
                    <th class="px-4 py-3 text-right text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{% trans %}Details{% endtrans %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for f in files %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors" data-testid="row-file-{{ loop.index }}">
                    <td class="px-4 py-3">
                        <div class="font-medium text-gray-800 dark:text-gray-200 truncate max-w-[180px]" title="{{ f.file_name or f.orig_file_name or '' }}">
                            {{ f.file_name or f.orig_file_name or _('Unnamed') }}
                        </div>
                        {% if f.orig_file_size %}
                        <div class="text-xs text-gray-400">{{ (f.orig_file_size / 1048576)|round(1) }} MB</div>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3">
                        {% if f.user_email %}
                        <div class="font-medium text-gray-700 dark:text-gray-300 truncate max-w-[140px]" title="{{ f.user_email }}">{{ f.user_username or f.user_email }}</div>
                        <div class="text-xs text-gray-400 truncate max-w-[140px]" title="{{ f.user_email }}">{{ f.user_email }}</div>
                        {% else %}
                        <span class="text-xs text-gray-400 italic">{% trans %}Anonymous{% endtrans %}</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-1.5">
                            {% if f.input_format %}<span class="text-[10px] font-semibold 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 }}</span>{% endif %}
                            {% if f.input_format and f.output_format %}<i class="fa fa-arrow-right text-gray-400 text-[9px]"></i>{% endif %}
                            {% if f.output_format %}<span class="text-[10px] font-semibold 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 }}</span>{% endif %}
                        </div>
                    </td>
                    <td class="px-4 py-3">
                        <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 in ['expired','deleted'] %}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
                            {% else %}bg-red-100 dark:bg-red-900/30 text-red-600{% endif %}">{{ f.status }}</span>
                    </td>
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-1.5 flex-wrap">
                            {% if f.share_link_count and f.share_link_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-link text-[8px]"></i>{{ f.share_link_count }}
                            </span>
                            {% endif %}
                            {% if f.grant_count and f.grant_count > 0 %}
                            <span class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-400">
                                <i class="fa fa-user-check text-[8px]"></i>{{ f.grant_count }}
                            </span>
                            {% endif %}
                            {% if (not f.share_link_count or f.share_link_count == 0) and (not f.grant_count or f.grant_count == 0) %}
                            <span class="text-xs text-gray-400 italic">{% trans %}None{% endtrans %}</span>
                            {% endif %}
                        </div>
                    </td>
                    <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
                        {{ f.created_at[:10] if f.created_at else '—' }}
                    </td>
                    <td class="px-4 py-3 text-right">
                        {% if f.job_id %}
                        <button type="button"
                                onclick="_ufTogglePanel('{{ f.job_id }}')"
                                class="px-2.5 py-1.5 rounded-lg text-xs font-medium transition-all
                                       {% if (f.share_link_count and f.share_link_count > 0) or (f.grant_count and f.grant_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 %}"
                                id="uf-btn-{{ f.job_id }}"
                                data-testid="btn-toggle-panel-{{ loop.index }}">
                            <i class="fa fa-chevron-down text-[10px] mr-0.5" id="uf-icon-{{ f.job_id }}"></i>{% trans %}Shares{% endtrans %}
                        </button>
                        {% endif %}
                    </td>
                </tr>
                <!-- Expandable share detail panel row -->
                {% if f.job_id %}
                <tr class="hidden" id="uf-panel-{{ f.job_id }}" data-testid="panel-{{ loop.index }}">
                    <td colspan="7" class="px-6 pb-5 pt-0 bg-gray-50 dark:bg-gray-800/30">
                        <div id="uf-content-{{ f.job_id }}" class="pt-3">
                            <p class="text-sm text-gray-400 py-2 text-center"><i class="fa fa-spinner fa-spin mr-1"></i>{% trans %}Loading…{% endtrans %}</p>
                        </div>
                    </td>
                </tr>
                {% endif %}
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% 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">
            {% if search %}{% trans %}No files match your search.{% endtrans %}{% else %}{% trans %}No files found.{% endtrans %}{% endif %}
        </p>
    </div>
    {% endif %}
</div>

<!-- Pagination -->
{% if total_pages > 1 %}
<div class="mt-4 flex items-center justify-between">
    <span class="text-sm text-gray-500 dark:text-gray-400">{% trans %}Page{% endtrans %} {{ page }} {% trans %}of{% endtrans %} {{ total_pages }}</span>
    <div class="flex gap-2">
        {% if page > 1 %}
        <a href="?page={{ page-1 }}{% if search %}&q={{ search|urlencode }}{% endif %}"
           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">← {% trans %}Prev{% endtrans %}</a>
        {% endif %}
        {% if page < total_pages %}
        <a href="?page={{ page+1 }}{% if search %}&q={{ search|urlencode }}{% endif %}"
           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">{% trans %}Next{% endtrans %} →</a>
        {% endif %}
    </div>
</div>
{% endif %}

<!-- Toast notification -->
<div id="uf-toast" class="hidden fixed bottom-6 right-6 z-50 px-4 py-3 rounded-xl shadow-lg text-sm font-medium border transition-all"></div>

{% endblock %}

{% block page_scripts %}
<script>
var _ufSiteUrl = {{ site_url | tojson }};
var _ufOpenPanels = {};

function _ufShowToast(msg, type) {
    var t = document.getElementById('uf-toast');
    if (!t) return;
    t.textContent = msg;
    t.className = 'fixed bottom-6 right-6 z-50 px-4 py-3 rounded-xl shadow-lg text-sm font-medium border transition-all '
        + (type === 'success'
            ? 'bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-700 text-green-700 dark:text-green-300'
            : 'bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-700 text-red-700 dark:text-red-300');
    clearTimeout(t._timer);
    t._timer = setTimeout(function() { t.className = t.className + ' hidden'; }, 3500);
}

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

function _ufTogglePanel(jobId) {
    var panelRow = document.getElementById('uf-panel-' + jobId);
    var icon = document.getElementById('uf-icon-' + jobId);
    if (!panelRow) return;

    if (!panelRow.classList.contains('hidden')) {
        panelRow.classList.add('hidden');
        if (icon) { icon.classList.remove('fa-chevron-up'); icon.classList.add('fa-chevron-down'); }
        return;
    }

    panelRow.classList.remove('hidden');
    if (icon) { icon.classList.remove('fa-chevron-down'); icon.classList.add('fa-chevron-up'); }

    if (_ufOpenPanels[jobId]) return;
    _ufOpenPanels[jobId] = true;
    _ufLoadPanel(jobId);
}

function _ufLoadPanel(jobId) {
    var content = document.getElementById('uf-content-' + jobId);
    if (!content) return;

    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 = '<div class="flex flex-col sm:flex-row gap-4">';

        // --- Share Links ---
        html += '<div class="flex-1 min-w-0">';
        html += '<p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2"><i class="fa fa-link mr-1 text-indigo-400"></i>Share Links</p>';
        var links = (ld.ok && ld.links) ? ld.links : [];
        if (links.length === 0) {
            html += '<p class="text-xs text-gray-400 italic">No share links.</p>';
        } else {
            links.forEach(function(l) {
                var url = _ufSiteUrl + '/s/' + l.token;
                var badges = '';
                if (l.has_password) badges += '<span class="text-[9px] px-1 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-500"><i class="fa fa-lock mr-0.5"></i>pw</span>';
                if (l.is_one_time) badges += ' <span class="text-[9px] px-1 py-0.5 rounded bg-purple-100 dark:bg-purple-900/30 text-purple-600">1-time</span>';
                if (l.is_accessed) badges += ' <span class="text-[9px] px-1 py-0.5 rounded bg-orange-100 dark:bg-orange-900/30 text-orange-600">accessed</span>';
                var exp = l.expires_at ? '<span class="text-orange-500">exp ' + l.expires_at.slice(0,10) + '</span>' : 'no expiry';
                html += '<div class="flex items-start gap-2 py-2 border-b border-gray-100 dark:border-gray-800 last:border-0" id="uf-link-' + _ufEsc(l.token) + '">'
                    + '<div class="flex-1 min-w-0">'
                    + '<a href="' + _ufEsc(url) + '" target="_blank" class="font-mono text-xs text-blue-600 dark:text-blue-400 hover:underline block truncate max-w-[220px]">' + _ufEsc(url) + '</a>'
                    + '<div class="flex items-center gap-1.5 mt-0.5 flex-wrap">'
                    + '<span class="text-[10px] text-gray-400">' + (l.created_at || '').slice(0,10) + '</span>'
                    + '<span class="text-[10px] text-gray-400">·</span>'
                    + '<span class="text-[10px]">' + exp + '</span>'
                    + badges
                    + '</div>'
                    + '</div>'
                    + '<button onclick="_ufRevokeLink(\'' + _ufEsc(jobId) + '\',\'' + _ufEsc(l.token) + '\')" '
                    + 'class="flex-shrink-0 text-xs text-red-500 hover:underline flex items-center gap-0.5 px-2 py-1 rounded hover:bg-red-50 dark:hover:bg-red-900/20 transition-all">'
                    + '<i class="fa fa-ban text-[10px]"></i> Revoke'
                    + '</button>'
                    + '</div>';
            });
        }
        html += '</div>';

        // --- Email Grants ---
        html += '<div class="flex-1 min-w-0">';
        html += '<p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2"><i class="fa fa-user-check mr-1 text-violet-400"></i>Email Grants</p>';
        var grants = (gd.ok && gd.grants) ? gd.grants : [];
        if (grants.length === 0) {
            html += '<p class="text-xs text-gray-400 italic">No email grants.</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 last:border-0" id="uf-grant-' + g.id + '">'
                    + '<div class="w-6 h-6 rounded-full bg-violet-100 dark:bg-violet-900/40 flex items-center justify-center text-violet-700 dark:text-violet-300 text-[10px] font-bold flex-shrink-0">' + _ufEsc(init) + '</div>'
                    + '<div class="flex-1 min-w-0">'
                    + '<span class="text-xs text-gray-700 dark:text-gray-300 truncate block max-w-[200px]">' + _ufEsc(g.granted_to_email) + '</span>'
                    + '<span class="text-[10px] text-gray-400">' + (g.granted_at || '').slice(0,10) + '</span>'
                    + '</div>'
                    + '<button onclick="_ufRevokeGrant(\'' + _ufEsc(jobId) + '\',' + g.id + ')" '
                    + 'class="flex-shrink-0 text-xs text-red-500 hover:underline flex items-center gap-0.5 px-2 py-1 rounded hover:bg-red-50 dark:hover:bg-red-900/20 transition-all">'
                    + '<i class="fa fa-ban text-[10px]"></i> Revoke'
                    + '</button>'
                    + '</div>';
            });
        }
        html += '</div>';
        html += '</div>';

        content.innerHTML = html;
    }).catch(function() {
        var content = document.getElementById('uf-content-' + jobId);
        if (content) content.innerHTML = '<p class="text-xs text-red-500 py-2">Failed to load share data.</p>';
    });
}

function _ufRevokeLink(jobId, 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/' + encodeURIComponent(token) + '/revoke', {
        method: 'POST',
        credentials: 'include',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    }).then(function(r){ return r.json(); }).then(function(d) {
        if (d.ok) {
            var el = document.getElementById('uf-link-' + token);
            if (el) { el.style.opacity = '0'; el.style.transition = 'opacity 0.3s'; setTimeout(function(){ el.remove(); }, 300); }
            _ufShowToast('Share link revoked.', 'success');
        } else {
            _ufShowToast(d.error || 'Failed to revoke.', 'error');
        }
    }).catch(function() { _ufShowToast('Network error.', 'error'); });
    }); /* end ocConfirm */
}

function _ufRevokeGrant(jobId, grantId) {
    window.ocConfirm('Revoke this email access grant?\n\n\u2022 This person will immediately lose access to the file\n\u2022 Their share link (if any) will also stop working', function() {
    fetch('/share/grants/revoke', {
        method: 'POST',
        credentials: 'include',
        headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
        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('uf-grant-' + grantId);
            if (el) { el.style.opacity = '0'; el.style.transition = 'opacity 0.3s'; setTimeout(function(){ el.remove(); }, 300); }
            _ufShowToast('Grant revoked.', 'success');
        } else {
            _ufShowToast(d.error || 'Failed to revoke.', 'error');
        }
    }).catch(function() { _ufShowToast('Network error.', 'error'); });
    }); /* end ocConfirm */
}
</script>
{% endblock %}