{% extends "admin/layout.html" %}
{% block title %}Share Manager – 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-share-manager">
            <i class="fa fa-share-nodes mr-2 text-indigo-500"></i>{% trans %}Share Manager{% endtrans %}
        </h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            {% trans %}View and revoke all users' share links and email-based access grants.{% endtrans %}
        </p>
    </div>
</div>

<!-- Tabs -->
<div class="mb-4 flex gap-1 border-b border-gray-200 dark:border-gray-700">
    <a href="?tab=links{% if search %}&q={{ search|urlencode }}{% endif %}"
       class="px-4 py-2.5 text-sm font-medium transition-all rounded-t-lg
              {% if tab == 'links' %}bg-white dark:bg-gray-900 border border-b-0 border-gray-200 dark:border-gray-700 text-indigo-600 dark:text-indigo-400{% else %}text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white{% endif %}"
       data-testid="tab-links">
        <i class="fa fa-link mr-1.5"></i>{% trans %}Share Links{% endtrans %}
        {% if tab == 'links' %}<span class="ml-1.5 text-xs bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 px-1.5 py-0.5 rounded-full">{{ total }}</span>{% endif %}
    </a>
    <a href="?tab=grants{% if search %}&q={{ search|urlencode }}{% endif %}"
       class="px-4 py-2.5 text-sm font-medium transition-all rounded-t-lg
              {% if tab == 'grants' %}bg-white dark:bg-gray-900 border border-b-0 border-gray-200 dark:border-gray-700 text-indigo-600 dark:text-indigo-400{% else %}text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white{% endif %}"
       data-testid="tab-grants">
        <i class="fa fa-user-check mr-1.5"></i>{% trans %}Email Grants{% endtrans %}
        {% if tab == 'grants' %}<span class="ml-1.5 text-xs bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 px-1.5 py-0.5 rounded-full">{{ total }}</span>{% endif %}
    </a>
</div>

<!-- Search bar -->
<form method="GET" action="" class="mb-4 flex gap-2">
    <input type="hidden" name="tab" value="{{ tab }}">
    <input type="text" name="q" value="{{ search }}" placeholder="{% if tab == 'links' %}{% trans %}Search by owner email…{% endtrans %}{% else %}{% trans %}Search by owner or recipient email…{% endtrans %}{% endif %}"
           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-indigo-400/40 transition-all"
           data-testid="input-search-shares">
    <button type="submit" class="px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-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="?tab={{ tab }}" 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>

{% if tab == 'links' %}
<!-- Share Links Table -->
<div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
    {% if items %}
    <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 %}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 %}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 %}Link{% 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 %}Flags{% 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 %}Created{% 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 %}Expires{% 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 %}Action{% endtrans %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for item in items %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors" id="link-row-{{ item.token }}" data-testid="row-link-{{ loop.index }}">
                    <td class="px-4 py-3">
                        <div class="font-medium text-gray-800 dark:text-gray-200 truncate max-w-[140px]" title="{{ item.owner_email }}">{{ item.owner_username or item.owner_email or '—' }}</div>
                        <div class="text-xs text-gray-400 truncate max-w-[140px]" title="{{ item.owner_email }}">{{ item.owner_email or '—' }}</div>
                    </td>
                    <td class="px-4 py-3">
                        {% if item.file_name %}
                        <div class="truncate max-w-[160px] text-gray-700 dark:text-gray-300" title="{{ item.file_name }}">{{ item.file_name }}</div>
                        {% endif %}
                        <div class="flex gap-1 mt-0.5">
                            {% if item.input_format %}<span class="text-[10px] font-semibold px-1 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 uppercase">{{ item.input_format }}</span>{% endif %}
                            {% if item.output_format %}<span class="text-[10px] font-semibold px-1 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 uppercase">{{ item.output_format }}</span>{% endif %}
                        </div>
                    </td>
                    <td class="px-4 py-3">
                        <a href="{{ site_url }}/s/{{ item.token }}" target="_blank"
                           class="font-mono text-xs text-blue-600 dark:text-blue-400 hover:underline truncate block max-w-[180px]"
                           title="{{ site_url }}/s/{{ item.token }}">
                            /s/{{ item.token[:16] }}…
                        </a>
                        <button onclick="_copyText('{{ site_url }}/s/{{ item.token }}')"
                                class="mt-0.5 text-[10px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                            <i class="fa fa-copy mr-0.5"></i>{% trans %}Copy{% endtrans %}
                        </button>
                    </td>
                    <td class="px-4 py-3">
                        <div class="flex flex-wrap gap-1">
                            {% if item.has_password %}<span class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300"><i class="fa fa-lock text-[9px]"></i> {% trans %}Password{% endtrans %}</span>{% endif %}
                            {% if item.is_one_time %}<span class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300">1-time</span>{% endif %}
                            {% if item.is_accessed %}<span class="inline-flex items-center gap-0.5 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"><i class="fa fa-eye text-[9px]"></i> {% trans %}Accessed{% endtrans %}</span>{% endif %}
                        </div>
                    </td>
                    <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
                        {{ item.created_at[:10] if item.created_at else '—' }}
                    </td>
                    <td class="px-4 py-3 text-xs whitespace-nowrap">
                        {% if item.expires_at %}
                        <span class="text-orange-600 dark:text-orange-400">{{ item.expires_at[:10] }}</span>
                        {% else %}
                        <span class="text-gray-400">{% trans %}Never{% endtrans %}</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-right">
                        <button onclick="_adminRevokeLink('{{ item.token }}')"
                                class="px-2.5 py-1 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-revoke-link-{{ loop.index }}">
                            <i class="fa fa-ban mr-0.5"></i>{% trans %}Revoke{% endtrans %}
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="py-16 text-center" data-testid="text-no-links">
        <i class="fa fa-share-nodes 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 share links match your search.{% endtrans %}{% else %}{% trans %}No share links exist yet.{% endtrans %}{% endif %}
        </p>
    </div>
    {% endif %}
</div>

{% else %}
<!-- Email Grants Table -->
<div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
    {% if items %}
    <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 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 %}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 %}Granted To{% 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 %}Granted At{% 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 %}Action{% endtrans %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for item in items %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors" id="grant-row-{{ item.id }}" data-testid="row-grant-{{ loop.index }}">
                    <td class="px-4 py-3">
                        <div class="font-medium text-gray-800 dark:text-gray-200 truncate max-w-[140px]" title="{{ item.owner_email }}">{{ item.owner_username or item.owner_email or '—' }}</div>
                        <div class="text-xs text-gray-400 truncate max-w-[140px]" title="{{ item.owner_email }}">{{ item.owner_email or '—' }}</div>
                    </td>
                    <td class="px-4 py-3">
                        {% if item.file_name %}
                        <div class="truncate max-w-[160px] text-gray-700 dark:text-gray-300" title="{{ item.file_name }}">{{ item.file_name }}</div>
                        {% endif %}
                        <div class="flex gap-1 mt-0.5">
                            {% if item.input_format %}<span class="text-[10px] font-semibold px-1 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 uppercase">{{ item.input_format }}</span>{% endif %}
                            {% if item.output_format %}<span class="text-[10px] font-semibold px-1 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 uppercase">{{ item.output_format }}</span>{% endif %}
                        </div>
                        <div class="text-[10px] text-gray-400 font-mono mt-0.5">{{ item.job_id[:12] if item.job_id else '' }}…</div>
                    </td>
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-2">
                            <div class="w-6 h-6 rounded-full bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center text-indigo-700 dark:text-indigo-300 text-[10px] font-bold flex-shrink-0">
                                {{ (item.granted_to_email or '?')[0].upper() }}
                            </div>
                            <span class="text-sm text-gray-700 dark:text-gray-300 truncate max-w-[160px]" title="{{ item.granted_to_email }}">{{ item.granted_to_email or '—' }}</span>
                        </div>
                    </td>
                    <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
                        {{ item.granted_at[:10] if item.granted_at else '—' }}
                    </td>
                    <td class="px-4 py-3 text-right">
                        <button onclick="_adminRevokeGrant({{ item.id }})"
                                class="px-2.5 py-1 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-revoke-grant-{{ loop.index }}">
                            <i class="fa fa-ban mr-0.5"></i>{% trans %}Revoke{% endtrans %}
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="py-16 text-center" data-testid="text-no-grants">
        <i class="fa fa-user-check 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 grants match your search.{% endtrans %}{% else %}{% trans %}No email grants exist yet.{% endtrans %}{% endif %}
        </p>
    </div>
    {% endif %}
</div>
{% endif %}

<!-- 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="?tab={{ tab }}&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="?tab={{ tab }}&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="admin-share-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>
function _copyText(text) {
    navigator.clipboard.writeText(text).then(function() {
        _showToast('Link copied!', 'success');
    }).catch(function() {
        _showToast('Could not copy', 'error');
    });
}

function _showToast(msg, type) {
    var t = document.getElementById('admin-share-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');
    setTimeout(function() { t.className = t.className + ' hidden'; }, 3000);
}

function _adminRevokeLink(token) {
    window.ocConfirm('Revoke this share link?\n\n\u2022 The link will immediately stop working\n\u2022 Anyone using this link will lose access to the file', function() {
    fetch('/admin/shares/revoke-link/' + encodeURIComponent(token), {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    }).then(function(r) { return r.json(); }).then(function(d) {
        if (d.ok) {
            var row = document.getElementById('link-row-' + token);
            if (row) {
                row.style.transition = 'opacity 0.3s';
                row.style.opacity = '0';
                setTimeout(function() { row.remove(); }, 300);
            }
            _showToast('Share link revoked.', 'success');
        } else {
            _showToast(d.error || 'Failed to revoke.', 'error');
        }
    }).catch(function() {
        _showToast('Network error.', 'error');
    });
    }); /* end ocConfirm */
}

function _adminRevokeGrant(grantId) {
    window.ocConfirm('Revoke this email access grant?\n\n\u2022 The user will immediately lose access to this file\n\u2022 They will not be notified', function() {
    fetch('/admin/shares/revoke-grant/' + grantId, {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    }).then(function(r) { return r.json(); }).then(function(d) {
        if (d.ok) {
            var row = document.getElementById('grant-row-' + grantId);
            if (row) {
                row.style.transition = 'opacity 0.3s';
                row.style.opacity = '0';
                setTimeout(function() { row.remove(); }, 300);
            }
            _showToast('Grant revoked.', 'success');
        } else {
            _showToast(d.error || 'Failed to revoke.', 'error');
        }
    }).catch(function() {
        _showToast('Network error.', 'error');
    });
    }); /* end ocConfirm */
}
</script>
{% endblock %}