{% extends "base.html" %}

{% block title %}Dashboard - SneakyScanner{% endblock %}

{% block content %}
<div class="row mt-4">
    <div class="col-12">
        <h1 class="mb-4">Dashboard</h1>
    </div>
</div>

<!-- Summary Stats -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-value" id="total-scans">-</div>
            <div class="stat-label">Total Scans</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-value" id="running-scans">-</div>
            <div class="stat-label">Running</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-value" id="completed-scans">-</div>
            <div class="stat-label">Completed</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-value" id="failed-scans">-</div>
            <div class="stat-label">Failed</div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Quick Actions</h5>
            </div>
            <div class="card-body">
                <button class="btn btn-primary btn-lg" onclick="showTriggerScanModal()">
                    <span id="trigger-btn-text">Run Scan Now</span>
                    <span id="trigger-btn-spinner" class="spinner-border spinner-border-sm ms-2" style="display: none;"></span>
                </button>
                <a href="{{ url_for('main.scans') }}" class="btn btn-secondary btn-lg ms-2">View All Scans</a>
                <a href="{{ url_for('main.schedules') }}" class="btn btn-secondary btn-lg ms-2">
                    <i class="bi bi-calendar-plus"></i> Manage Schedules
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Scan Activity Chart -->
<div class="row mb-4">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Scan Activity (Last 30 Days)</h5>
            </div>
            <div class="card-body">
                <div id="chart-loading" class="text-center py-4">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <canvas id="scanTrendChart" height="100" style="display: none;"></canvas>
            </div>
        </div>
    </div>

    <!-- Schedules Widget -->
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Upcoming Schedules</h5>
                <a href="{{ url_for('main.schedules') }}" class="btn btn-sm btn-secondary">Manage</a>
            </div>
            <div class="card-body">
                <div id="schedules-loading" class="text-center py-4">
                    <div class="spinner-border spinner-border-sm" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <div id="schedules-content" style="display: none;"></div>
                <div id="schedules-empty" class="text-muted text-center py-4" style="display: none;">
                    No schedules configured yet.
                    <br><br>
                    <a href="{{ url_for('main.create_schedule') }}" class="btn btn-sm btn-primary">Create Schedule</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Recent Scans -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Recent Scans</h5>
                <button class="btn btn-sm btn-secondary" 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 class="card-body">
                <div id="scans-loading" class="text-center py-4">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <div id="scans-error" class="alert alert-danger" style="display: none;"></div>
                <div id="scans-empty" class="text-center py-4 text-muted" style="display: none;">
                    No scans found. Click "Run Scan Now" to trigger your first scan.
                </div>
                <div id="scans-table-container" style="display: none;">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Title</th>
                                <th>Timestamp</th>
                                <th>Duration</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="scans-tbody">
                        </tbody>
                    </table>
                </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 refreshInterval = null;

    // Load initial data when page loads
    document.addEventListener('DOMContentLoaded', function() {
        refreshScans();
        loadStats();
        loadScanTrend();
        loadSchedules();

        // Auto-refresh every 10 seconds if there are running scans
        refreshInterval = setInterval(function() {
            const runningCount = parseInt(document.getElementById('running-scans').textContent);
            if (runningCount > 0) {
                refreshScans();
                loadStats();
            }
        }, 10000);

        // Refresh schedules every 30 seconds
        setInterval(loadSchedules, 30000);
    });

    // Load dashboard stats
    async function loadStats() {
        try {
            const response = await fetch('/api/scans?per_page=1000');
            if (!response.ok) {
                throw new Error('Failed to load stats');
            }

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

            document.getElementById('total-scans').textContent = scans.length;
            document.getElementById('running-scans').textContent = scans.filter(s => s.status === 'running').length;
            document.getElementById('completed-scans').textContent = scans.filter(s => s.status === 'completed').length;
            document.getElementById('failed-scans').textContent = scans.filter(s => s.status === 'failed').length;
        } catch (error) {
            console.error('Error loading stats:', error);
        }
    }

    // Refresh scans list
    async function refreshScans() {
        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');
        const refreshBtn = document.getElementById('refresh-text');
        const refreshSpinner = document.getElementById('refresh-spinner');

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

        try {
            const response = await fetch('/api/scans?per_page=10&page=1');
            if (!response.ok) {
                throw new Error('Failed to load scans');
            }

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

            loadingEl.style.display = 'none';
            refreshBtn.style.display = 'inline';
            refreshSpinner.style.display = 'none';

            if (scans.length === 0) {
                emptyEl.style.display = 'block';
            } else {
                tableEl.style.display = 'block';
                renderScansTable(scans);
            }
        } catch (error) {
            console.error('Error loading scans:', error);
            loadingEl.style.display = 'none';
            refreshBtn.style.display = 'inline';
            refreshSpinner.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);
        });
    }

    // 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
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-success alert-dismissible fade show mt-3';
            alertDiv.innerHTML = `
                Scan triggered successfully! (ID: ${data.scan_id})
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            // Insert at the beginning of container-fluid
            const container = document.querySelector('.container-fluid');
            container.insertBefore(alertDiv, container.firstChild);

            // Refresh scans and stats
            refreshScans();
            loadStats();
        } 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';
        }
    }

    // Load scan trend chart
    async function loadScanTrend() {
        const chartLoading = document.getElementById('chart-loading');
        const canvas = document.getElementById('scanTrendChart');

        try {
            const response = await fetch('/api/stats/scan-trend?days=30');
            if (!response.ok) {
                throw new Error('Failed to load trend data');
            }

            const data = await response.json();

            // Hide loading, show chart
            chartLoading.style.display = 'none';
            canvas.style.display = 'block';

            // Create chart
            const ctx = canvas.getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: data.labels,
                    datasets: [{
                        label: 'Scans per Day',
                        data: data.values,
                        borderColor: '#60a5fa',
                        backgroundColor: 'rgba(96, 165, 250, 0.1)',
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                            callbacks: {
                                title: function(context) {
                                    return new Date(context[0].label).toLocaleDateString();
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1,
                                color: '#94a3b8'
                            },
                            grid: {
                                color: '#334155'
                            }
                        },
                        x: {
                            ticks: {
                                color: '#94a3b8',
                                maxRotation: 0,
                                autoSkip: true,
                                maxTicksLimit: 10
                            },
                            grid: {
                                color: '#334155'
                            }
                        }
                    }
                }
            });
        } catch (error) {
            console.error('Error loading chart:', error);
            chartLoading.innerHTML = '<p class="text-muted">Failed to load chart data</p>';
        }
    }

    // Load upcoming schedules
    async function loadSchedules() {
        const loadingEl = document.getElementById('schedules-loading');
        const contentEl = document.getElementById('schedules-content');
        const emptyEl = document.getElementById('schedules-empty');

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

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

            loadingEl.style.display = 'none';

            if (schedules.length === 0) {
                emptyEl.style.display = 'block';
            } else {
                contentEl.style.display = 'block';

                // Filter enabled schedules and sort by next_run
                const enabledSchedules = schedules
                    .filter(s => s.enabled && s.next_run)
                    .sort((a, b) => new Date(a.next_run) - new Date(b.next_run))
                    .slice(0, 3);

                if (enabledSchedules.length === 0) {
                    contentEl.innerHTML = '<p class="text-muted">No enabled schedules</p>';
                } else {
                    contentEl.innerHTML = enabledSchedules.map(schedule => {
                        const nextRun = new Date(schedule.next_run);
                        const now = new Date();
                        const diffMs = nextRun - now;
                        const diffMins = Math.floor(diffMs / 60000);
                        const diffHours = Math.floor(diffMins / 60);
                        const diffDays = Math.floor(diffHours / 24);

                        let timeStr;
                        if (diffMins < 1) {
                            timeStr = 'In less than 1 minute';
                        } else if (diffMins < 60) {
                            timeStr = `In ${diffMins} minute${diffMins === 1 ? '' : 's'}`;
                        } else if (diffHours < 24) {
                            timeStr = `In ${diffHours} hour${diffHours === 1 ? '' : 's'}`;
                        } else if (diffDays < 7) {
                            timeStr = `In ${diffDays} day${diffDays === 1 ? '' : 's'}`;
                        } else {
                            timeStr = nextRun.toLocaleDateString();
                        }

                        return `
                            <div class="mb-3 pb-3 border-bottom">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <strong>${schedule.name}</strong>
                                        <br>
                                        <small class="text-muted">${timeStr}</small>
                                        <br>
                                        <small class="text-muted mono">${schedule.cron_expression}</small>
                                    </div>
                                </div>
                            </div>
                        `;
                    }).join('');
                }
            }
        } catch (error) {
            console.error('Error loading schedules:', error);
            loadingEl.style.display = 'none';
            contentEl.style.display = 'block';
            contentEl.innerHTML = '<p class="text-muted">Failed to load schedules</p>';
        }
    }

    // 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) {
                throw new Error('Failed to delete scan');
            }

            // Refresh scans and stats
            refreshScans();
            loadStats();
        } catch (error) {
            console.error('Error deleting scan:', error);
            alert('Failed to delete scan. Please try again.');
        }
    }
</script>
{% endblock %}