{% extends "base.html" %}

{% block title %}Dashboard - ASF TestArena{% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="panel sidebar-panel">
        <div class="panel-header">
            <h3>Test Jobs</h3>
            <div style="display: flex; gap: 5px;">
                <button class="btn btn-secondary btn-sm" onclick="toggleSearch()" title="Search Jobs">🔍</button>
                <a href="{{ url_for('jobs.submit') }}" class="btn btn-primary btn-sm">+ New</a>
            </div>
        </div>

        <div id="search-panel" class="search-box"
            style="display: {{ 'block' if username_query or job_id_query else 'none' }}; padding: 15px; border-bottom: 1px solid var(--border); background: var(--light);">
            <form action="{{ url_for('dashboard.index') }}" method="GET"
                style="display: flex; flex-direction: column; gap: 10px;">
                <div class="form-group">
                    <label
                        style="font-size: 11px; font-weight: 600; color: var(--gray); margin-bottom: 4px; display: block;">JOB
                        ID (GLOBAL)</label>
                    <input type="text" name="job_id" placeholder="e.g. 345" value="{{ job_id_query or '' }}"
                        class="form-control">
                </div>
                <div class="form-group">
                    <label
                        style="font-size: 11px; font-weight: 600; color: var(--gray); margin-bottom: 4px; display: block;">USERNAME
                        (GLOBAL)</label>
                    <input type="text" name="username" placeholder="e.g. admin" value="{{ username_query or '' }}"
                        class="form-control">
                </div>
                <div style="display: flex; gap: 5px; margin-top: 5px;">
                    <button type="submit" class="btn btn-primary btn-sm" style="flex: 1;">Search</button>
                    <a href="{{ url_for('dashboard.index') }}" class="btn btn-secondary btn-sm">Clear</a>
                </div>
            </form>
        </div>

        <div class="job-list">
            {% if jobs %}
            {% for job in jobs %}
            <div class="job-item" data-job-id="{{ job.id }}" onclick="loadJobDetails({{ job.id }})"
                oncontextmenu="showContextMenu(event, {{ job.id }}, '{{ job.status }}')">
                <div class="job-status-icon">{{ job.get_status_icon() }}</div>
                <div class="job-info">
                    <h4>Job #{{ job.id }} - {{ job.branch_name }}</h4>
                    <p>{{ job.submitted_at.strftime('%Y-%m-%d %H:%M') }} by {{ job.submitter.username }}</p>
                </div>
            </div>
            {% endfor %}
            {% else %}
            <div class="empty-state">
                <h3>No jobs found</h3>
                <p>Try a different search or submit a new job</p>
            </div>
            {% endif %}
        </div>
    </div>

    <div class="panel details-panel">
        <div class="panel-header">
            <h3>Job Details</h3>
            <div id="job-actions" style="display: none; gap: 5px;">
                <button class="btn btn-danger btn-sm" id="btn-abort" onclick="abortJob(activeJobId)">Abort</button>
                <button class="btn btn-danger btn-sm" id="btn-delete" onclick="deleteJob(activeJobId)">Delete</button>
            </div>
        </div>

        <div id="job-details-container">
            <div class="empty-state">
                <h3>Select a job</h3>
                <p>Click on a job from the list to view details</p>
            </div>
        </div>
    </div>
</div>

<!-- Context Menu -->
<div id="contextMenu" class="context-menu">
    <div class="context-menu-item" id="ctx-abort" onclick="abortJobFromContext()">
        <span class="context-menu-icon">⚫</span>
        Abort Job
    </div>
    <div class="context-menu-item" onclick="deleteJobFromContext()">
        <span class="context-menu-icon">🗑️</span>
        Delete Job
    </div>
</div>

<style>
    .tabs {
        display: flex;
        border-bottom: 1px solid var(--border);
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .tab {
        padding: 10px 20px;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        font-weight: 600;
        color: var(--gray);
    }

    .tab.active {
        border-bottom-color: var(--primary);
        color: var(--primary);
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }
</style>

<script>
    let contextJobId = null;
    let activeJobId = null;
    let pollingInterval = null;
    let currentActiveTab = 'scenarios';

    function toggleSearch() {
        const panel = document.getElementById('search-panel');
        panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
    }

    function showContextMenu(event, jobId, status) {
        event.preventDefault();
        contextJobId = jobId;
        const contextMenu = document.getElementById('contextMenu');

        const abortItem = document.getElementById('ctx-abort');
        if (status === 'in_progress' || status === 'waiting') {
            abortItem.style.display = 'flex';
        } else {
            abortItem.style.display = 'none';
        }

        contextMenu.style.display = 'block';
        contextMenu.style.left = event.pageX + 'px';
        contextMenu.style.top = event.pageY + 'px';

        document.addEventListener('click', hideContextMenu);
    }

    function hideContextMenu() {
        document.getElementById('contextMenu').style.display = 'none';
        document.removeEventListener('click', hideContextMenu);
        contextJobId = null;
    }

    function abortJobFromContext() {
        if (contextJobId) abortJob(contextJobId);
        hideContextMenu();
    }

    function deleteJobFromContext() {
        if (contextJobId) deleteJob(contextJobId);
        hideContextMenu();
    }

    function loadJobDetails(jobId) {
        activeJobId = jobId;
        if (pollingInterval) clearInterval(pollingInterval);

        document.querySelectorAll('.job-item').forEach(item => item.classList.remove('active'));
        const jobItem = document.querySelector(`[data-job-id="${jobId}"]`);
        if (jobItem) jobItem.classList.add('active');

        fetchJobDetails(jobId);
        pollingInterval = setInterval(() => fetchJobDetails(jobId, true), 5000);
    }

    function fetchJobDetails(jobId, isPolling = false) {
        fetch(`/jobs/${jobId}`)
            .then(response => response.json())
            .then(job => {
                const container = document.getElementById('job-details-container');
                const actions = document.getElementById('job-actions');
                actions.style.display = 'flex';

                const btnAbort = document.getElementById('btn-abort');
                if (['passed', 'failed', 'aborted', 'error'].includes(job.status)) {
                    btnAbort.style.display = 'none';
                    if (isPolling) clearInterval(pollingInterval);
                } else {
                    btnAbort.style.display = 'block';
                }

                const scenarios = JSON.parse(job.scenarios || '[]');
                const taskIds = JSON.parse(job.remote_task_ids || '{}');
                const results = JSON.parse(job.remote_results || '{}');

                let html = `
                <div class="detail-row">
                    <div class="detail-label">Job ID:</div>
                    <div class="detail-value">#${job.id} (Remote: ${job.remote_queue_id || 'N/A'})</div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">Submitter:</div>
                    <div class="detail-value">${job.submitter}</div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">Branch:</div>
                    <div class="detail-value">${job.branch_name}</div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">Status:</div>
                    <div class="detail-value">
                        <span class="status-badge status-${job.status}">${job.status.replace('_', ' ').toUpperCase()}</span>
                    </div>
                </div>
                
                <div class="tabs">
                    <div class="tab ${currentActiveTab === 'scenarios' ? 'active' : ''}" onclick="switchTab('scenarios')">Scenario Summary</div>
                    <div class="tab ${currentActiveTab === 'logs' ? 'active' : ''}" onclick="switchTab('logs')">Queue Logging</div>
                </div>

                <div id="scenarios-tab" class="tab-content ${currentActiveTab === 'scenarios' ? 'active' : ''}">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                        <h4 style="color: var(--dark);">Scenarios</h4>
                        <input type="text" id="scenarioSearch" placeholder="Filter scenarios..." onkeyup="filterScenarios()" class="form-control" style="width: 200px; padding: 6px 12px;">
                    </div>
                    <table class="user-table" id="scenarioTable">
                        <thead>
                            <tr>
                                <th>Scenario Name</th>
                                <th>Task ID</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                `;

                scenarios.forEach(s => {
                    const taskId = taskIds[s] || 'N/A';
                    const result = results[s];
                    let statusHtml = '⌛ Waiting';

                    if (result) {
                        const icon = result[0] === 'PASS' ? '✅' : (result[0] === 'FAIL' ? '❌' : (result[0] === 'ERROR' ? '⚠️' : '⚫'));
                        const color = result[0] === 'PASS' ? 'var(--success)' : (result[0] === 'FAIL' ? 'var(--danger)' : (result[0] === 'ERROR' ? 'var(--warning)' : 'var(--gray)'));
                        statusHtml = `<a href="${result[1]}" target="_blank" style="text-decoration: none; color: ${color}; font-weight: 600;">${icon} ${result[0]}</a>`;
                    } else if (job.status === 'in_progress') {
                        statusHtml = '🔄 Running';
                    }

                    html += `
                        <tr>
                            <td>${s}</td>
                            <td><small>${taskId}</small></td>
                            <td>${statusHtml}</td>
                        </tr>
                    `;
                });

                html += `
                        </tbody>
                    </table>
                </div>

                <div id="logs-tab" class="tab-content ${currentActiveTab === 'logs' ? 'active' : ''}">
                    <div id="queue-log" style="background: #1e1e1e; color: #d4d4d4; padding: 15px; border-radius: 8px; font-family: 'Consolas', monospace; font-size: 12px; max-height: 500px; overflow-y: auto; white-space: pre-wrap;">${job.queue_log || 'Waiting for logs...'}</div>
                </div>
                `;

                container.innerHTML = html;

                if (currentActiveTab === 'logs') {
                    const logElement = document.getElementById('queue-log');
                    if (logElement) logElement.scrollTop = logElement.scrollHeight;
                }

                if (!['passed', 'failed', 'aborted', 'error'].includes(job.status)) {
                    fetch(`/jobs/${jobId}/status`)
                        .then(r => r.json())
                        .then(data => {
                            const iconEl = document.querySelector(`[data-job-id="${jobId}"] .job-status-icon`);
                            if (iconEl) iconEl.textContent = data.status_icon;
                        });
                }
            });
    }

    function switchTab(tabName) {
        currentActiveTab = tabName;
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

        if (tabName === 'scenarios') {
            document.querySelector('.tab:nth-child(1)').classList.add('active');
            document.getElementById('scenarios-tab').classList.add('active');
        } else {
            document.querySelector('.tab:nth-child(2)').classList.add('active');
            document.getElementById('logs-tab').classList.add('active');
            const logElement = document.getElementById('queue-log');
            if (logElement) logElement.scrollTop = logElement.scrollHeight;
        }
    }

    function filterScenarios() {
        const filter = document.getElementById('scenarioSearch').value.toUpperCase();
        const tr = document.getElementById('scenarioTable').getElementsByTagName('tr');
        for (let i = 1; i < tr.length; i++) {
            const td = tr[i].getElementsByTagName('td')[0];
            if (td) {
                tr[i].style.display = (td.textContent || td.innerText).toUpperCase().indexOf(filter) > -1 ? "" : "none";
            }
        }
    }

    function abortJob(jobId) {
        if (confirm('Are you sure you want to abort this job?')) {
            fetch(`/jobs/${jobId}/abort`, { method: 'POST' })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert(data.error);
                    }
                });
        }
    }

    function deleteJob(jobId) {
        if (confirm('Are you sure you want to delete this job? This will also remove it from the remote server.')) {
            fetch(`/jobs/${jobId}/delete`, { method: 'POST' })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert(data.error);
                    }
                });
        }
    }
</script>
{% endblock %}