{% extends "base.html" %}

{% block title %}Words to Readlang - Preview {{ upload.filename }}{% endblock %}

{% block content %}
<div class="preview-container">
    {% if new_session %}
    <div class="alert alert-info">
        <strong>New session created!</strong> Your magic phrase is: <strong>{{ user_session.magic_phrase }}</strong>
        <br>
        <small>This phrase will let you access your uploads for the next year. Make sure to copy it and save it somewhere!</small>
    </div>
    {% endif %}

    <div class="preview-header">
        <h2>{{ upload.filename }}</h2>
        <div class="preview-meta">
            <span class="badge">{{ upload.file_format }}</span>
            <span class="badge" style="background: white; color: #111827; border: 1px solid #d1d5db;">{{ upload|language_pair }}</span>
            <span id="entry-count-display">{{ upload.entry_count }} entries</span>
            <span>Uploaded {{ upload.uploaded_at.strftime('%Y-%m-%d %H:%M') }}</span>
        </div>
    </div>

    <div class="validation-stats">
        <h3>Validation Status</h3>
        <div class="stats-grid">
            <div class="stat-card stat-valid">
                <div class="stat-value">{{ stats.valid }}</div>
                <div class="stat-label">Valid</div>
            </div>
            <div class="stat-card stat-warning">
                <div class="stat-value">{{ stats.invalid_no_example }}</div>
                <div class="stat-label">No Example</div>
            </div>
            <div class="stat-card stat-error">
                <div class="stat-value">{{ stats.invalid_word_missing }}</div>
                <div class="stat-label">Word Missing</div>
            </div>
        </div>
        <button hx-post="{{ url_for('validate.validate_upload', upload_id=upload.id) }}"
                hx-target="#oob-sink"
                hx-swap="innerHTML"
                class="btn btn-sm">
            Re-validate All
        </button>
    </div>

    {% if stats.invalid_no_example + stats.invalid_word_missing > 0 %}
    <div class="batch-fetch-container" style="background: white; padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
        <h3>Fetch Missing Examples</h3>
        <p style="color: #6b7280; margin-bottom: 1rem;">Automatically fetch example sentences for all {{ stats.invalid_no_example + stats.invalid_word_missing }} invalid entries from Tatoeba and Leipzig Corpora Collection.</p>

        <div style="margin-bottom: 1rem;">
            <button id="fetch-all-btn" class="btn btn-warning">
                Fetch All Missing Examples
            </button>
        </div>

        <div id="fetch-progress" style="display: none; margin-top: 1rem;">
            <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
                <span id="progress-text">Processing...</span>
                <span id="progress-count">0 / {{ stats.invalid_no_example + stats.invalid_word_missing }}</span>
            </div>
            <div style="background-color: #e5e7eb; border-radius: 0.5rem; height: 1.5rem; overflow: hidden;">
                <div id="progress-bar" style="background-color: #3b82f6; height: 100%; width: 0%; transition: width 0.3s;"></div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('fetch-all-btn').addEventListener('click', function() {
            const btn = this;
            const progress = document.getElementById('fetch-progress');
            const progressBar = document.getElementById('progress-bar');
            const progressText = document.getElementById('progress-text');
            const progressCount = document.getElementById('progress-count');
            btn.disabled = true;
            btn.textContent = 'Fetching...';
            progress.style.display = 'block';
            progressBar.style.backgroundColor = '#3b82f6';

            const url = '{{ url_for("examples.fetch_all_missing", upload_id=upload.id) }}';
            const source = new EventSource(url);

            const sourceLabels = { tatoeba: 'Tatoeba', leipzig: 'Leipzig' };

            source.onmessage = function(e) {
                const data = JSON.parse(e.data);

                if (data.done) {
                    source.close();
                    btn.disabled = false;
                    btn.textContent = 'Fetch All Missing Examples';
                    progressText.textContent = data.message || 'Complete!';
                    progressBar.style.width = '100%';
                    progressBar.style.backgroundColor = '#10b981';

                    setTimeout(() => location.reload(), 2000);
                } else {
                    const percent = (data.current / data.total) * 100;
                    progressBar.style.width = percent + '%';
                    progressCount.textContent = data.current + ' / ' + data.total;

                    if (data.success) {
                        const src = data.source ? ' [' + sourceLabels[data.source] + ']' : '';
                        progressText.textContent = 'Found example for: ' + data.word + src;
                    } else {
                        progressText.textContent = 'No example for: ' + data.word;
                    }
                }
            };

            source.onerror = function() {
                source.close();
                btn.disabled = false;
                btn.textContent = 'Fetch All Missing Examples';
                progressText.textContent = 'Error occurred. Please try again.';
                progressBar.style.backgroundColor = '#ef4444';
            };
        });
    </script>
    {% endif %}

    <div class="table-width-toggle">
        <button type="button" id="table-width-btn" onclick="toggleTableWidth()" title="Toggle full-width table">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 8h14M1 8l3-3M1 8l3 3M15 8l-3-3M15 8l-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span id="table-width-label">Expand table</span>
        </button>
    </div>

    <div class="pool-actions" id="entry-batch-bar" style="background: white; padding: 0.75rem 1.5rem; border-radius: 0.5rem; margin-bottom: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center;">
        <div style="display: flex; gap: 0.5rem; align-items: center;">
            <button type="button" id="entry-select-all-btn" class="btn btn-sm btn-secondary">Select All</button>
            <button type="button" id="entry-deselect-all-btn" class="btn btn-sm btn-secondary">Deselect All</button>
            <span id="entry-selection-count" style="color: #6b7280; font-size: 0.875rem;">0 selected</span>
        </div>
        <div style="display: flex; gap: 0.5rem; align-items: center;">
            <button type="button" id="entry-delete-selected-btn" class="btn btn-sm btn-danger">
                Delete Selected
            </button>
            <button type="button" id="entry-delete-duplicates-btn" class="btn btn-sm btn-secondary"
                    title="Delete words already present in another upload in your session">
                Delete Duplicates
            </button>
        </div>
    </div>

    <div class="entries-table-container">
        <table class="entries-table" data-sortable>
            <thead>
                <tr>
                    <th style="width: 40px;" data-nosort data-nofilter>
                        <input type="checkbox" id="entry-header-checkbox" style="cursor: pointer;">
                    </th>
                    <th data-col="1">Status</th>
                    <th data-col="2">Word</th>
                    <th data-col="3">Translation</th>
                    <th data-col="4">Example</th>
                    <th data-nosort data-nofilter>Actions</th>
                </tr>
            </thead>
            <tbody id="entries-tbody">
                {% for entry in entries %}
                {% include 'components/entry_row.html' %}
                {% endfor %}

                {% if has_more %}
                <tr id="load-more-{{ upload.id }}-{{ page + 1 }}"
                    hx-get="{{ url_for('preview.get_entries', upload_id=upload.id, page=page+1) }}"
                    hx-trigger="revealed"
                    hx-target="this"
                    hx-swap="outerHTML">
                    <td colspan="6" class="loading-row">Loading more...</td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>

    <div id="oob-sink" style="display:none;"></div>

    <div id="export-actions">
        {% if stats.valid == 0 %}
        <div class="alert alert-error" style="margin-top: 1rem;">
            <strong>Cannot export:</strong> None of the {{ stats.total }} entries are valid. Fix validation errors first — use <em>Fetch Missing Examples</em> above or edit entries inline.
        </div>
        {% elif stats.invalid_no_example + stats.invalid_word_missing > 0 %}
        <div class="alert alert-warning" style="margin-top: 1rem;">
            <strong>Export Notice:</strong> {{ stats.invalid_no_example + stats.invalid_word_missing }} entries with invalid examples will be excluded from export. Only valid entries ({{ stats.valid }}) will be included.
        </div>
        {% endif %}
    </div>

    <div class="preview-actions">
        {% if stats.valid > 0 %}
        <a href="{{ url_for('export.export_download', upload_id=upload.id) }}" class="btn btn-primary" id="export-btn">
            Export to Readlang
        </a>
        {% else %}
        <span title="No valid entries to export — fix validation errors first"
              class="btn btn-primary"
              id="export-btn"
              style="opacity: 0.45; cursor: not-allowed;">
            Export to Readlang
        </span>
        {% endif %}
        <a href="{{ url_for('main.index') }}" class="btn btn-secondary">
            Back to Home
        </a>
        <button hx-delete="{{ url_for('upload.delete_upload', upload_id=upload.id) }}"
                hx-confirm="Are you sure you want to delete '{{ upload.filename }}'? This will delete all {{ upload.entry_count }} entries and cannot be undone."
                class="btn btn-danger">
            Delete Upload
        </button>
    </div>
</div>

<script>
    // Full-width table toggle, persisted in localStorage
    const TABLE_WIDTH_KEY = 'tableFullWidth';

    function applyTableWidth(fullWidth) {
        const btn = document.getElementById('table-width-btn');
        const label = document.getElementById('table-width-label');
        if (!btn) return;
        if (fullWidth) {
            document.body.classList.add('table-full-width');
            btn.classList.add('active');
            label.textContent = 'Collapse table';
        } else {
            document.body.classList.remove('table-full-width');
            btn.classList.remove('active');
            label.textContent = 'Expand table';
        }
    }

    function toggleTableWidth() {
        const current = localStorage.getItem(TABLE_WIDTH_KEY) === 'true';
        const next = !current;
        localStorage.setItem(TABLE_WIDTH_KEY, next);
        applyTableWidth(next);
    }

    applyTableWidth(localStorage.getItem(TABLE_WIDTH_KEY) === 'true');

    // Re-validate stats after any entry-mutating HTMX request
    const VALIDATE_URL = '{{ url_for("validate.validate_upload", upload_id=upload.id) }}';
    const ENTRY_PATH_RE = /\/(edit|examples\/fetch)\//;
    let validating = false;
    document.addEventListener('htmx:afterRequest', function(e) {
        if (validating) return;
        const url = e.detail.xhr && e.detail.xhr.responseURL;
        const verb = e.detail.requestConfig && e.detail.requestConfig.verb;
        if (url && ENTRY_PATH_RE.test(url) && e.detail.successful && (verb === 'post' || verb === 'delete')) {
            validating = true;
            htmx.ajax('POST', VALIDATE_URL, {
                target: '#oob-sink',
                swap: 'innerHTML'
            }).then(function() { validating = false; })
              .catch(function() { validating = false; });
        }
    });

    // --- Batch entry selection ---
    const BULK_DELETE_URL = '{{ url_for("edit.bulk_delete_entries") }}';
    const DELETE_DUPES_URL = '{{ url_for("edit.delete_duplicate_entries", upload_id=upload.id) }}';
    const UPLOAD_ID = {{ upload.id }};

    function getCheckedEntries() {
        return Array.from(document.querySelectorAll('.entry-checkbox:checked'));
    }

    function updateEntrySelectionCount() {
        const count = getCheckedEntries().length;
        document.getElementById('entry-selection-count').textContent = count + ' selected';
    }

    function selectAllEntries(select) {
        document.querySelectorAll('.entry-checkbox').forEach(cb => { cb.checked = select; });
        updateEntrySelectionCount();
    }

    document.getElementById('entry-select-all-btn').addEventListener('click', () => selectAllEntries(true));
    document.getElementById('entry-deselect-all-btn').addEventListener('click', () => selectAllEntries(false));

    document.getElementById('entry-header-checkbox').addEventListener('change', function() {
        selectAllEntries(this.checked);
    });

    // Track individual checkbox changes (including dynamically loaded rows)
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('entry-checkbox')) {
            updateEntrySelectionCount();
        }
    });

    document.getElementById('entry-delete-selected-btn').addEventListener('click', function() {
        const checked = getCheckedEntries();
        if (checked.length === 0) {
            alert('Please select at least one entry to delete.');
            return;
        }
        if (!confirm('Delete ' + checked.length + ' selected entr' + (checked.length === 1 ? 'y' : 'ies') + '? This cannot be undone.')) {
            return;
        }

        const formData = new FormData();
        formData.append('upload_id', UPLOAD_ID);
        checked.forEach(cb => formData.append('entry_ids', cb.value));

        fetch(BULK_DELETE_URL, { method: 'POST', body: formData })
            .then(r => r.text())
            .then(() => {
                // Remove the rows from the DOM
                checked.forEach(cb => {
                    const row = cb.closest('tr');
                    if (row) row.remove();
                });
                updateEntrySelectionCount();
                // Re-validate stats
                htmx.ajax('POST', VALIDATE_URL, { target: '#oob-sink', swap: 'innerHTML' });
            });
    });

    document.getElementById('entry-delete-duplicates-btn').addEventListener('click', function() {
        if (!confirm('Delete all entries whose word already appears in another upload in your session? This cannot be undone.')) {
            return;
        }
        const btn = this;
        btn.disabled = true;
        fetch(DELETE_DUPES_URL, { method: 'POST' })
            .then(r => r.text())
            .then(html => {
                btn.disabled = false;
                // Reload the page so the table reflects deleted rows accurately
                location.reload();
            })
            .catch(() => { btn.disabled = false; });
    });
</script>
{% endblock %}