{% extends "base.html" %}

{% block title %}Words to Readlang - Manage Uploads{% endblock %}

{% block content %}
<div class="pool-container">
    <div class="preview-header">
        <h2>Manage Uploads</h2>
        <p>All uploads in your session</p>
    </div>

    {% if uploads %}
    <form id="manage-uploads-form" action="{{ url_for('upload.bulk_delete_uploads') }}" method="POST" onsubmit="return confirmBulkDelete()">
        <div class="pool-actions" style="background: white; padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div style="display: flex; gap: 0.5rem;">
                    <button type="button" id="select-all-btn" class="btn btn-sm btn-secondary">
                        Select All
                    </button>
                    <button type="button" id="deselect-all-btn" class="btn btn-sm btn-secondary">
                        Deselect All
                    </button>
                </div>
                <div style="display: flex; gap: 0.5rem; align-items: center;">
                    <span id="selection-count" style="color: #6b7280; font-size: 0.875rem;">0 selected</span>
                    <button type="submit" class="btn btn-danger">
                        Delete Selected
                    </button>
                </div>
            </div>
        </div>

        <div class="entries-table-container">
            <table class="entries-table" data-sortable>
                <thead>
                    <tr>
                        <th style="width: 50px;" data-nosort data-nofilter>
                            <input type="checkbox" id="header-checkbox" style="cursor: pointer;">
                        </th>
                        <th data-col="1">Filename</th>
                        <th data-col="2">Format</th>
                        <th data-col="3">Languages</th>
                        <th data-col="4">Entries</th>
                        <th data-col="5">Valid</th>
                        <th data-col="6">Uploaded</th>
                        <th data-nosort data-nofilter>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for upload in uploads %}
                    <tr>
                        <td style="text-align: center;">
                            <input type="checkbox" name="upload_ids" value="{{ upload.id }}" class="upload-checkbox" style="cursor: pointer;">
                        </td>
                        <td><strong>{{ upload.filename }}</strong></td>
                        <td><span class="badge">{{ upload.file_format }}</span></td>
                        <td><span class="badge" style="background: white; color: #111827; border: 1px solid #d1d5db;">{{ upload|language_pair }}</span></td>
                        <td>{{ upload.entry_count }}</td>
                        <td>{{ upload.valid_entry_count }}</td>
                        <td>{{ upload.uploaded_at.strftime('%Y-%m-%d %H:%M') }}</td>
                        <td style="white-space: nowrap;">
                            <a href="{{ url_for('preview.preview_upload', upload_id=upload.id) }}" class="btn btn-sm" style="margin-right: 0.25rem;">
                                View
                            </a>
                            {% if upload.valid_entry_count > 0 %}
                            <a href="{{ url_for('export.export_download', upload_id=upload.id) }}" class="btn btn-sm btn-primary" style="margin-right: 0.25rem;">
                                Export
                            </a>
                            {% else %}
                            <span title="No valid entries to export — fix validation errors first"
                                  class="btn btn-sm btn-primary"
                                  style="margin-right: 0.25rem; opacity: 0.45; cursor: not-allowed;">
                                Export
                            </span>
                            {% endif %}
                            <button type="button"
                                    hx-delete="{{ url_for('upload.delete_upload', upload_id=upload.id) }}"
                                    hx-confirm="Delete '{{ upload.filename }}' and its {{ upload.entry_count }} entries?"
                                    hx-target="closest tr"
                                    hx-swap="outerHTML"
                                    class="btn btn-sm btn-danger">
                                Delete
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </form>
    {% else %}
    <div class="empty-state">
        <p>No uploads found. Upload some vocabulary files to get started!</p>
        <a href="{{ url_for('upload.upload_form') }}" class="btn btn-primary" style="margin-top: 1rem;">
            Upload Vocabulary File
        </a>
    </div>
    {% endif %}

    <div class="preview-actions" style="margin-top: 2rem;">
        <a href="{{ url_for('main.index') }}" class="btn btn-secondary">
            Back to Home
        </a>
    </div>
</div>

<script>
    // Selection management
    const form = document.getElementById('manage-uploads-form');
    const selectionCount = document.getElementById('selection-count');
    const headerCheckbox = document.getElementById('header-checkbox');

    function updateSelectionCount() {
        const checked = document.querySelectorAll('.upload-checkbox:checked').length;
        selectionCount.textContent = checked + ' selected';
    }

    function selectAll(select) {
        document.querySelectorAll('.upload-checkbox').forEach(cb => {
            cb.checked = select;
        });
        updateSelectionCount();
    }

    // Button event listeners
    if (document.getElementById('select-all-btn')) {
        document.getElementById('select-all-btn').addEventListener('click', () => selectAll(true));
        document.getElementById('deselect-all-btn').addEventListener('click', () => selectAll(false));
    }

    // Header checkbox
    if (headerCheckbox) {
        headerCheckbox.addEventListener('change', function() {
            selectAll(this.checked);
        });
    }

    // Individual checkbox change
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('upload-checkbox')) {
            updateSelectionCount();
        }
    });

    // Confirm bulk delete
    function confirmBulkDelete() {
        const checked = document.querySelectorAll('.upload-checkbox:checked');

        if (checked.length === 0) {
            alert('Please select at least one upload to delete.');
            return false;
        }

        // Count total entries
        let totalEntries = 0;
        checked.forEach(cb => {
            const row = cb.closest('tr');
            const entriesCell = row.cells[4]; // Entries column (0-indexed: checkbox, filename, format, languages, entries)
            totalEntries += parseInt(entriesCell.textContent);
        });

        const message =
            `Are you sure you want to delete ${checked.length} upload(s) with ${totalEntries} total entries?\n\n` +
            `This will permanently remove all entries in these uploads.\n\n` +
            `Click OK to proceed with deletion.`;

        return confirm(message);
    }

    // Initialize count
    updateSelectionCount();
</script>
{% endblock %}