{% extends "base.html" %}

{% block title %}All Scans - SneakyScanner{% endblock %}

{% block content %}
<div class="row mt-4">
    <div class="col-12 d-flex justify-content-between align-items-center mb-4">
        <h1>All Scans</h1>
        <button class="btn btn-primary" onclick="showTriggerScanModal()">
            <span id="trigger-btn-text">Trigger New Scan</span>
            <span id="trigger-btn-spinner" class="spinner-border spinner-border-sm ms-2" style="display: none;"></span>
        </button>
    </div>
</div>

<!-- Filters -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="status-filter" class="form-label">Filter by Status</label>
                        <select class="form-select" id="status-filter" onchange="filterScans()">
                            <option value="">All Statuses</option>
                            <option value="running">Running</option>
                            <option value="completed">Completed</option>
                            <option value="failed">Failed</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="per-page" class="form-label">Results per Page</label>
                        <select class="form-select" id="per-page" onchange="changePerPage()">
                            <option value="10">10</option>
                            <option value="20" selected>20</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                    </div>
                    <div class="col-md-4 d-flex align-items-end">
                        <button class="btn btn-secondary w-100" onclick="refreshScans()">
                            <span id="refresh-text">Refresh</span>
                            <span id="refresh-spinner" class="spinner-border spinner-border-sm ms-1" style="display: none;"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Scans Table -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Scan History</h5>
            </div>
            <div class="card-body">
                <div id="scans-loading" class="text-center py-5">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-3 text-muted">Loading scans...</p>
                </div>
                <div id="scans-error" class="alert alert-danger" style="display: none;"></div>
                <div id="scans-empty" class="text-center py-5 text-muted" style="display: none;">
                    <h5>No scans found</h5>
                    <p>Click "Trigger New Scan" to create your first scan.</p>
                </div>
                <div id="scans-table-container" style="display: none;">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th style="width: 80px;">ID</th>
                                    <th>Title</th>
                                    <th style="width: 200px;">Timestamp</th>
                                    <th style="width: 100px;">Duration</th>
                                    <th style="width: 120px;">Status</th>
                                    <th style="width: 200px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="scans-tbody">
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <div class="text-muted">
                            Showing <span id="showing-start">0</span> to <span id="showing-end">0</span> of <span id="total-count">0</span> scans
                        </div>
                        <nav>
                            <ul class="pagination mb-0" id="pagination">
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Trigger Scan Modal -->
<div class="modal fade" id="triggerScanModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Trigger New Scan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="trigger-scan-form">
                    <div class="mb-3">
                        <label for="config-select" class="form-label">Scan Configuration</label>
                        <select class="form-select" id="config-select" name="config_id" required>
                            <option value="">Loading configurations...</option>
                        </select>
                        <div class="form-text text-muted" id="config-help-text">
                            Select a scan configuration
                        </div>
                        <div id="no-configs-warning" class="alert alert-warning mt-2 mb-0" role="alert" style="display: none;">
                            <i class="bi bi-exclamation-triangle"></i>
                            <strong>No configurations available</strong>
                            <p class="mb-2 mt-2">You need to create a configuration before you can trigger a scan.</p>
                            <a href="{{ url_for('main.configs') }}" class="btn btn-sm btn-primary">
                                <i class="bi bi-plus-circle"></i> Create Configuration
                            </a>
                        </div>
                    </div>
                    <div id="trigger-error" class="alert alert-danger" style="display: none;"></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="trigger-scan-btn" onclick="triggerScan()">
                    <span id="modal-trigger-text">Trigger Scan</span>
                    <span id="modal-trigger-spinner" class="spinner-border spinner-border-sm ms-2" style="display: none;"></span>
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    let currentPage = 1;
    let perPage = 20;
    let statusFilter = '';
    let totalCount = 0;

    // Show alert notification
    function showAlert(type, message) {
        const container = document.getElementById('notification-container');
        const notification = document.createElement('div');
        notification.className = `alert alert-${type} alert-dismissible fade show mb-2`;

        notification.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;

        container.appendChild(notification);

        // Auto-dismiss after 5 seconds
        setTimeout(() => {
            notification.remove();
        }, 5000);
    }

    // Load initial data when page loads
    document.addEventListener('DOMContentLoaded', function() {
        loadScans();

        // Auto-refresh every 15 seconds
        setInterval(function() {
            loadScans();
        }, 15000);
    });

    // Load scans from API
    async function loadScans() {
        const loadingEl = document.getElementById('scans-loading');
        const errorEl = document.getElementById('scans-error');
        const emptyEl = document.getElementById('scans-empty');
        const tableEl = document.getElementById('scans-table-container');

        // Show loading state
        loadingEl.style.display = 'block';
        errorEl.style.display = 'none';
        emptyEl.style.display = 'none';
        tableEl.style.display = 'none';

        try {
            let url = `/api/scans?page=${currentPage}&per_page=${perPage}`;
            if (statusFilter) {
                url += `&status=${statusFilter}`;
            }

            const response = await fetch(url);
            if (!response.ok) {
                throw new Error('Failed to load scans');
            }

            const data = await response.json();
            const scans = data.scans || [];
            totalCount = data.total || 0;

            loadingEl.style.display = 'none';

            if (scans.length === 0) {
                emptyEl.style.display = 'block';
            } else {
                tableEl.style.display = 'block';
                renderScansTable(scans);
                renderPagination(data.page, data.per_page, data.total, data.pages);
            }
        } catch (error) {
            console.error('Error loading scans:', error);
            loadingEl.style.display = 'none';
            errorEl.textContent = 'Failed to load scans. Please try again.';
            errorEl.style.display = 'block';
        }
    }

    // Render scans table
    function renderScansTable(scans) {
        const tbody = document.getElementById('scans-tbody');
        tbody.innerHTML = '';

        scans.forEach(scan => {
            const row = document.createElement('tr');
            row.classList.add('scan-row');  // Fix white row bug

            // Format timestamp
            const timestamp = new Date(scan.timestamp).toLocaleString();

            // Format duration
            const duration = scan.duration ? `${scan.duration.toFixed(1)}s` : '-';

            // Status badge
            let statusBadge = '';
            if (scan.status === 'completed') {
                statusBadge = '<span class="badge badge-success">Completed</span>';
            } else if (scan.status === 'running') {
                statusBadge = '<span class="badge badge-info">Running</span>';
            } else if (scan.status === 'failed') {
                statusBadge = '<span class="badge badge-danger">Failed</span>';
            } else {
                statusBadge = `<span class="badge badge-info">${scan.status}</span>`;
            }

            row.innerHTML = `
                <td class="mono">${scan.id}</td>
                <td>${scan.title || 'Untitled Scan'}</td>
                <td class="text-muted">${timestamp}</td>
                <td class="mono">${duration}</td>
                <td>${statusBadge}</td>
                <td>
                    <a href="/scans/${scan.id}" class="btn btn-sm btn-secondary">View</a>
                    ${scan.status !== 'running' ? `<button class="btn btn-sm btn-danger ms-1" onclick="deleteScan(${scan.id})">Delete</button>` : ''}
                </td>
            `;

            tbody.appendChild(row);
        });
    }

    // Render pagination
    function renderPagination(page, per_page, total, pages) {
        const paginationEl = document.getElementById('pagination');
        paginationEl.innerHTML = '';

        // Update showing text
        const start = (page - 1) * per_page + 1;
        const end = Math.min(page * per_page, total);
        document.getElementById('showing-start').textContent = start;
        document.getElementById('showing-end').textContent = end;
        document.getElementById('total-count').textContent = total;

        if (pages <= 1) {
            return;
        }

        // Previous button
        const prevLi = document.createElement('li');
        prevLi.className = `page-item ${page === 1 ? 'disabled' : ''}`;
        prevLi.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${page - 1}); return false;">Previous</a>`;
        paginationEl.appendChild(prevLi);

        // Page numbers
        const maxPagesToShow = 5;
        let startPage = Math.max(1, page - Math.floor(maxPagesToShow / 2));
        let endPage = Math.min(pages, startPage + maxPagesToShow - 1);

        if (endPage - startPage < maxPagesToShow - 1) {
            startPage = Math.max(1, endPage - maxPagesToShow + 1);
        }

        if (startPage > 1) {
            const firstLi = document.createElement('li');
            firstLi.className = 'page-item';
            firstLi.innerHTML = `<a class="page-link" href="#" onclick="goToPage(1); return false;">1</a>`;
            paginationEl.appendChild(firstLi);

            if (startPage > 2) {
                const ellipsisLi = document.createElement('li');
                ellipsisLi.className = 'page-item disabled';
                ellipsisLi.innerHTML = '<a class="page-link" href="#">...</a>';
                paginationEl.appendChild(ellipsisLi);
            }
        }

        for (let i = startPage; i <= endPage; i++) {
            const pageLi = document.createElement('li');
            pageLi.className = `page-item ${i === page ? 'active' : ''}`;
            pageLi.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${i}); return false;">${i}</a>`;
            paginationEl.appendChild(pageLi);
        }

        if (endPage < pages) {
            if (endPage < pages - 1) {
                const ellipsisLi = document.createElement('li');
                ellipsisLi.className = 'page-item disabled';
                ellipsisLi.innerHTML = '<a class="page-link" href="#">...</a>';
                paginationEl.appendChild(ellipsisLi);
            }

            const lastLi = document.createElement('li');
            lastLi.className = 'page-item';
            lastLi.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${pages}); return false;">${pages}</a>`;
            paginationEl.appendChild(lastLi);
        }

        // Next button
        const nextLi = document.createElement('li');
        nextLi.className = `page-item ${page === pages ? 'disabled' : ''}`;
        nextLi.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${page + 1}); return false;">Next</a>`;
        paginationEl.appendChild(nextLi);
    }

    // Navigation functions
    function goToPage(page) {
        currentPage = page;
        loadScans();
    }

    function filterScans() {
        statusFilter = document.getElementById('status-filter').value;
        currentPage = 1;
        loadScans();
    }

    function changePerPage() {
        perPage = parseInt(document.getElementById('per-page').value);
        currentPage = 1;
        loadScans();
    }

    function refreshScans() {
        const refreshBtn = document.getElementById('refresh-text');
        const refreshSpinner = document.getElementById('refresh-spinner');

        refreshBtn.style.display = 'none';
        refreshSpinner.style.display = 'inline-block';

        loadScans().finally(() => {
            refreshBtn.style.display = 'inline';
            refreshSpinner.style.display = 'none';
        });
    }

    // Load available configs
    async function loadConfigs() {
        const selectEl = document.getElementById('config-select');
        const helpTextEl = document.getElementById('config-help-text');
        const noConfigsWarning = document.getElementById('no-configs-warning');
        const triggerBtn = document.getElementById('trigger-scan-btn');

        try {
            const response = await fetch('/api/configs');
            if (!response.ok) {
                throw new Error('Failed to load configurations');
            }

            const data = await response.json();
            const configs = data.configs || [];

            // Clear existing options
            selectEl.innerHTML = '';

            if (configs.length === 0) {
                selectEl.innerHTML = '<option value="">No configurations available</option>';
                selectEl.disabled = true;
                triggerBtn.disabled = true;
                helpTextEl.style.display = 'none';
                noConfigsWarning.style.display = 'block';
            } else {
                selectEl.innerHTML = '<option value="">Select a configuration...</option>';
                configs.forEach(config => {
                    const option = document.createElement('option');
                    option.value = config.id;
                    const siteText = config.site_count === 1 ? 'site' : 'sites';
                    option.textContent = `${config.title} (${config.site_count} ${siteText})`;
                    selectEl.appendChild(option);
                });
                selectEl.disabled = false;
                triggerBtn.disabled = false;
                helpTextEl.style.display = 'block';
                noConfigsWarning.style.display = 'none';
            }
        } catch (error) {
            console.error('Error loading configs:', error);
            selectEl.innerHTML = '<option value="">Error loading configurations</option>';
            selectEl.disabled = true;
            triggerBtn.disabled = true;
            helpTextEl.style.display = 'none';
        }
    }

    // Show trigger scan modal
    function showTriggerScanModal() {
        const modal = new bootstrap.Modal(document.getElementById('triggerScanModal'));
        document.getElementById('trigger-error').style.display = 'none';
        document.getElementById('trigger-scan-form').reset();

        // Load configs when modal is shown
        loadConfigs();

        modal.show();
    }

    // Trigger scan
    async function triggerScan() {
        const configId = document.getElementById('config-select').value;
        const errorEl = document.getElementById('trigger-error');
        const btnText = document.getElementById('modal-trigger-text');
        const btnSpinner = document.getElementById('modal-trigger-spinner');

        if (!configId) {
            errorEl.textContent = 'Please select a configuration.';
            errorEl.style.display = 'block';
            return;
        }

        // Show loading state
        btnText.style.display = 'none';
        btnSpinner.style.display = 'inline-block';
        errorEl.style.display = 'none';

        try {
            const response = await fetch('/api/scans', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    config_id: parseInt(configId)
                })
            });

            if (!response.ok) {
                const data = await response.json();
                throw new Error(data.message || data.error || 'Failed to trigger scan');
            }

            const data = await response.json();

            // Hide error before closing modal to prevent flash
            errorEl.style.display = 'none';

            // Close modal
            bootstrap.Modal.getInstance(document.getElementById('triggerScanModal')).hide();

            // Show success message
            showAlert('success', `Scan triggered successfully! (ID: ${data.scan_id})`);

            // Refresh scans
            loadScans();
        } catch (error) {
            console.error('Error triggering scan:', error);
            errorEl.textContent = error.message;
            errorEl.style.display = 'block';
        } finally {
            btnText.style.display = 'inline';
            btnSpinner.style.display = 'none';
        }
    }

    // Delete scan
    async function deleteScan(scanId) {
        if (!confirm(`Are you sure you want to delete scan ${scanId}?`)) {
            return;
        }

        try {
            const response = await fetch(`/api/scans/${scanId}`, {
                method: 'DELETE'
            });

            if (!response.ok) {
                const data = await response.json();
                throw new Error(data.message || 'Failed to delete scan');
            }

            // Show success message
            showAlert('success', `Scan ${scanId} deleted successfully.`);

            // Refresh scans
            loadScans();
        } catch (error) {
            console.error('Error deleting scan:', error);
            showAlert('danger', `Failed to delete scan: ${error.message}`);
        }
    }

</script>
{% endblock %}