{% extends "admin/layout.html" %}
{% block title %}Conversion 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-conversions">{% trans %}Conversion Files{% endtrans %}</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{% trans %}Files generated by user conversions. Total:{% endtrans %} <strong>{{ total }}</strong></p>
    </div>
    <div class="flex flex-wrap gap-3">
        <a href="{{ full_url('/admin/files') }}" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="btn-back-uploads">
            <i class="fa fa-arrow-left mr-1"></i>{% trans %}Uploaded Files{% endtrans %}
        </a>
        <form method="POST" action="{{ full_url('/admin/jobs/kill-stuck') }}" data-confirm="Kill all stuck jobs and converter processes?&#10;&#10;• All stuck jobs will be marked as failed&#10;• All heavy converter processes (FFmpeg, LibreOffice, etc.) will be terminated&#10;• RAM caches will be freed&#10;• Any in-progress conversions will be lost">
            <button type="submit" class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-semibold transition-all" data-testid="btn-kill-stuck">
                <i class="fa fa-skull-crossbones mr-1"></i>{% trans %}Kill Stuck Jobs{% endtrans %}
            </button>
        </form>
        <button id="btn-delete-selected" class="hidden px-4 py-2 rounded-lg bg-orange-600 hover:bg-orange-700 text-white text-sm font-semibold transition-all" data-testid="btn-delete-selected">
            <i class="fa fa-trash mr-1"></i>{% trans %}Delete Selected ({% endtrans %}<span id="selected-count">0</span>)
        </button>
    </div>
</div>

{% if storage %}
<div class="mb-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 flex items-center gap-3">
        <div class="w-10 h-10 rounded-xl bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0">
            <i class="fa fa-database text-purple-600 dark:text-purple-400"></i>
        </div>
        <div>
            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Upload Disk Usage{% endtrans %}</div>
            <div class="text-lg font-bold text-gray-900 dark:text-white">{{ fmt_bytes(storage.total_bytes) }}</div>
        </div>
    </div>
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 flex items-center gap-3">
        <div class="w-10 h-10 rounded-xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0">
            <i class="fa fa-arrows-rotate text-blue-600 dark:text-blue-400"></i>
        </div>
        <div>
            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Total Conversions{% endtrans %}</div>
            <div class="text-lg font-bold text-gray-900 dark:text-white">{{ total }}</div>
        </div>
    </div>
</div>
{% endif %}

{% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

<!-- Filter bar -->
<form method="GET" class="mb-4 flex flex-wrap gap-2 items-center">
    <input type="text" name="q" value="{{ q or '' }}" placeholder="{% trans %}Search…{% endtrans %}" class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm w-48">
    <select name="status" class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
        <option value="">{% trans %}All Statuses{% endtrans %}</option>
        <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Pending</option>
        <option value="started" {% if status_filter == 'started' %}selected{% endif %}>Started</option>
        <option value="finished" {% if status_filter == 'finished' %}selected{% endif %}>Finished</option>
        <option value="failed" {% if status_filter == 'failed' %}selected{% endif %}>Failed</option>
        <option value="deleted" {% if status_filter == 'deleted' %}selected{% endif %}>Deleted</option>
    </select>
    <button type="submit" class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-semibold transition-all">{% trans %}Filter{% endtrans %}</button>
    {% if q or status_filter %}<a href="{{ full_url('/admin/conversions') }}" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">{% trans %}Clear{% endtrans %}</a>{% endif %}
</form>

<form id="bulk-form" method="POST" action="{{ full_url('/admin/conversions/delete-selected') }}">
<div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm" data-testid="table-conversions">
            <thead>
                <tr class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                    <th class="px-4 py-3 w-8"><input type="checkbox" id="check-all" class="rounded" data-testid="checkbox-select-all"></th>
                    <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-400">#</th>
                    <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-400">{% trans %}Input{% endtrans %}</th>
                    <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-400">{% trans %}Output{% endtrans %}</th>
                    <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-400">{% trans %}User{% endtrans %}</th>
                    <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-400">{% trans %}Tool{% endtrans %}</th>
                    <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-400">{% trans %}Status{% endtrans %}</th>
                    <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-400">{% trans %}Duration{% endtrans %}</th>
                    <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-400">{% trans %}Created{% endtrans %}</th>
                    <th class="px-4 py-3 text-right font-semibold text-gray-600 dark:text-gray-400">{% trans %}Actions{% endtrans %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
            {% if files %}
                {% for f in files %}
                {% set is_active = f.status in ('pending', 'started') %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors" data-testid="row-conv-{{ f.id }}" data-job-status="{{ f.status }}" data-created="{{ f.created_at or '' }}">
                    <td class="px-4 py-3"><input type="checkbox" name="ids" value="{{ f.id }}" class="conv-checkbox rounded" data-testid="checkbox-conv-{{ f.id }}"></td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ f.id }}</td>
                    <td class="px-4 py-3 text-gray-700 dark:text-gray-300 max-w-[120px] truncate" title="{{ f.input_format or '' }}">
                        <span class="inline-block px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 uppercase">{{ f.input_format or '–' }}</span>
                    </td>
                    <td class="px-4 py-3 text-gray-700 dark:text-gray-300 max-w-[120px] truncate">
                        <span class="inline-block px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 uppercase">{{ f.output_format or '–' }}</span>
                    </td>
                    <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
                        {% if f.username %}<span class="font-medium text-primary dark:text-primary-light">{{ f.username }}</span>
                        {% else %}<span class="text-gray-400 dark:text-gray-500">{% trans %}Anonymous{% endtrans %}</span>{% endif %}
                    </td>
                    <td class="px-4 py-3">
                        {% set tool_colors = {'converter': 'blue', 'pdf': 'orange', 'hash': 'purple', 'screenshot': 'teal', 'bg_remove': 'pink'} %}
                        {% set tc = tool_colors.get(f.tool_type or 'converter', 'gray') %}
                        <span class="inline-block px-2 py-0.5 rounded text-xs font-medium bg-{{ tc }}-100 dark:bg-{{ tc }}-900/30 text-{{ tc }}-700 dark:text-{{ tc }}-400 capitalize">
                            {{ (f.tool_type or 'converter')|replace('_', ' ') }}
                        </span>
                    </td>
                    <td class="px-4 py-3">
                        <span class="inline-block px-2 py-0.5 rounded text-xs font-medium
                            {% if f.status == 'finished' or f.status == 'completed' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                            {% elif f.status == 'deleted' %}bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400
                            {% elif f.status == 'failed' %}bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400
                            {% elif f.status == 'started' %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400
                            {% else %}bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400{% endif %}">
                            {{ f.status or '–' }}
                        </span>
                        {% if f.status == 'failed' and f.get('error_message') %}
                        <div class="mt-1 text-xs text-red-500 dark:text-red-400 max-w-[160px] break-words leading-tight" title="{{ f.error_message }}">
                            {{ f.error_message[:80] }}{% if f.error_message|length > 80 %}…{% endif %}
                        </div>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs">
                        {% if is_active %}
                        <span class="live-counter text-yellow-600 dark:text-yellow-400 font-mono font-medium" data-started="{{ f.created_at or '' }}">…</span>
                        {% elif f.duration_seconds is defined and f.duration_seconds is not none %}
                            {% set ds = f.duration_seconds|int %}
                            {% if ds >= 3600 %}{{ (ds // 3600) }}h {{ ((ds % 3600) // 60) }}m
                            {% elif ds >= 60 %}{{ ds // 60 }}m {{ ds % 60 }}s
                            {% else %}{{ ds }}s{% endif %}
                        {% else %}–{% endif %}
                    </td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs">{{ f.created_at[:16] if f.created_at else '–' }}</td>
                    <td class="px-4 py-3 text-right">
                        <div class="flex items-center justify-end gap-2">
                            {% if f.output_path %}
                            <a href="{{ full_url('/admin/conversions/download/' ~ f.id) }}" class="px-3 py-1 rounded-lg bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 hover:bg-blue-200 text-xs font-medium transition-all" data-testid="btn-download-conv-{{ f.id }}" title="{% trans %}Download{% endtrans %}">
                                <i class="fa fa-download"></i>
                            </a>
                            {% endif %}
                            {% if f.status == 'failed' and f.get('upload_id') %}
                            <form method="POST" action="{{ full_url('/admin/conversions/retry/' ~ f.id) }}" data-confirm="Re-queue this conversion?&#10;&#10;• The job will be added back to the processing queue&#10;• A new conversion attempt will start shortly">
                                <button type="submit" class="px-3 py-1 rounded-lg bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400 hover:bg-teal-200 text-xs font-medium transition-all" data-testid="btn-retry-conv-{{ f.id }}" title="{% trans %}Retry{% endtrans %}">
                                    <i class="fa fa-rotate-right"></i>
                                </button>
                            </form>
                            {% endif %}
                            <form method="POST" action="{{ full_url('/admin/conversions/delete/' ~ f.id) }}" data-confirm="Delete this conversion permanently?&#10;&#10;• The converted output file(s) from storage&#10;• The original upload&#10;• All shared links for this job"  >
                                <button type="submit" class="px-3 py-1 rounded-lg bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 hover:bg-red-200 text-xs font-medium transition-all" data-testid="btn-delete-conv-{{ f.id }}">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            {% else %}
                <tr>
                    <td colspan="10" class="px-4 py-12 text-center text-gray-400 dark:text-gray-500">{% trans %}No conversions found.{% endtrans %}</td>
                </tr>
            {% endif %}
            </tbody>
        </table>
    </div>
    {% if total_pages > 1 %}
    <div class="px-4 py-3 border-t border-gray-100 dark:border-gray-800 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 q %}&q={{ q }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}" class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">{% trans %}Previous{% endtrans %}</a>{% endif %}
            {% if page < total_pages %}<a href="?page={{ page + 1 }}{% if q %}&q={{ q }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}" class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">{% trans %}Next{% endtrans %}</a>{% endif %}
        </div>
    </div>
    {% endif %}
</div>
</form>
{% endblock %}

{% block page_scripts %}
<script>
$(function() {
    function updateCount() {
        var n = $('.conv-checkbox:checked').length;
        $('#selected-count').text(n);
        n > 0 ? $('#btn-delete-selected').removeClass('hidden') : $('#btn-delete-selected').addClass('hidden');
    }
    $('#check-all').on('change', function() {
        $('.conv-checkbox').prop('checked', $(this).is(':checked'));
        updateCount();
    });
    $(document).on('change', '.conv-checkbox', function() {
        if (!$(this).is(':checked')) $('#check-all').prop('checked', false);
        updateCount();
    });
    $('#btn-delete-selected').on('click', function() {
        var n = $('.conv-checkbox:checked').length;
        if (!n) return;
        var msg = 'Delete ' + n + ' conversion(s) permanently?\n\n\u2022 All converted output files removed from storage\n\u2022 All original uploads deleted\n\u2022 All shared links for these jobs revoked';
        window.ocConfirm(msg, function() { $('#bulk-form').submit(); });
    });

    // Live elapsed-time counters for pending/started rows
    function fmtSecs(s) {
        s = Math.floor(s);
        if (s < 60) return s + 's';
        if (s < 3600) return Math.floor(s/60) + 'm ' + (s%60) + 's';
        return Math.floor(s/3600) + 'h ' + Math.floor((s%3600)/60) + 'm';
    }
    function tickCounters() {
        var now = Date.now();
        $('.live-counter').each(function() {
            var started = $(this).data('started');
            if (!started) return;
            var t = new Date(started.replace(' ', 'T') + 'Z').getTime();
            if (isNaN(t)) return;
            $(this).text(fmtSecs((now - t) / 1000));
        });
    }
    if ($('.live-counter').length) {
        tickCounters();
        setInterval(tickCounters, 1000);
    }
});
</script>
{% endblock %}