{{define "title"}}Dashboard - XPFarm{{end}}
{{template "layout.html" .}}
{{define "content"}}
<h1>Dashboard</h1>

<!-- Top Stats Row -->
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-value">{{.Stats.Assets}}</div>
        <div class="stat-label">Total Assets</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{.Stats.Targets}}</div>
        <div class="stat-label">Total Targets</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{.Stats.Ports}}</div>
        <div class="stat-label">Open Ports</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{.Stats.Tech}}</div>
        <div class="stat-label">Tech Stacks</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{.Stats.Tools}}</div>
        <div class="stat-label">Tools</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" style="color: #ef4444;">{{.VulnStats.Total}}</div>
        <div class="stat-label">Vulnerabilities</div>
        <div style="display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;">
            {{if .VulnStats.Critical}}<span
                style="background:#7f1d1d;color:#fecaca;padding:1px 6px;border-radius:4px;font-size:0.7rem;">C:
                {{.VulnStats.Critical}}</span>{{end}}
            {{if .VulnStats.High}}<span
                style="background:#991b1b;color:#fecaca;padding:1px 6px;border-radius:4px;font-size:0.7rem;">H:
                {{.VulnStats.High}}</span>{{end}}
            {{if .VulnStats.Medium}}<span
                style="background:#9a3412;color:#fed7aa;padding:1px 6px;border-radius:4px;font-size:0.7rem;">M:
                {{.VulnStats.Medium}}</span>{{end}}
            {{if .VulnStats.Low}}<span
                style="background:#166534;color:#bbf7d0;padding:1px 6px;border-radius:4px;font-size:0.7rem;">L:
                {{.VulnStats.Low}}</span>{{end}}
        </div>
    </div>
</div>

<!-- Assets Overview (Full Width) -->
<div class="card">
    <h2>Assets Overview</h2>
    <div style="max-height: 400px; overflow-y: auto;">
        <table>
            <thead>
                <tr>
                    <th>Asset Name</th>
                    <th>Targets</th>
                </tr>
            </thead>
            <tbody>
                {{range .ChartData.Assets}}
                <tr>
                    <td><a href="/asset/{{.ID}}"
                            style="color: var(--color-text); font-weight: 500; text-decoration: none;">{{.Name}}</a>
                    </td>
                    <td style="text-align: left;">{{.Count}}</td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </div>
</div>

<!-- Charts Grid (2 columns) -->
<div class="charts-grid">
    <div class="card">
        <h2>Top Technologies</h2>
        <div class="chart-container">
            <canvas id="techChart"></canvas>
        </div>
    </div>
    <div class="card">
        <h2>Top Services</h2>
        <div class="chart-container">
            <canvas id="serviceChart"></canvas>
        </div>
    </div>
    <div class="card">
        <h2>Web Server Distribution</h2>
        <div class="chart-container">
            <canvas id="webServerChart"></canvas>
        </div>
    </div>
    <div class="card">
        <h2>Vulnerability Severity</h2>
        <div class="chart-container">
            <canvas id="vulnSeverityChart"></canvas>
        </div>
    </div>
    <div class="card">
        <h2>Top Open Ports</h2>
        <div class="chart-container">
            <canvas id="portChart"></canvas>
        </div>
    </div>
</div>

<!-- Active Scans Panel (Full Width - Moved Below Charts) -->
<div class="card" style="border-left: 4px solid var(--color-primary);">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
        <h3 style="margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.1rem;">
            <span class="pulse-dot"></span> Active Scans
        </h3>
        <span id="scan-count" class="badge" style="background: var(--bg-hover);">0 Running</span>
    </div>
    <div id="active-scans-list" style="display: flex; flex-direction: column; gap: 10px;">
        <p style="color: var(--color-muted); font-style: italic; font-size: 0.9rem;">No scans currently running.</p>
    </div>
</div>

<!-- Recent Results (Full Width) -->
<div class="card">
    <h2>Recent Results</h2>
    <div style="overflow-x: auto;">
        <table>
            <thead>
                <tr>
                    <th>Tool</th>
                    <th>Target</th>
                    <th>Time</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {{range .RecentResults}}
                <tr>
                    <td style="color: var(--color-primary); font-weight: 500;">{{.ToolName}}</td>
                    <td><a href="/target/{{.TargetID}}" style="color: var(--color-text); text-decoration: none;">Target
                            #{{.TargetID}}</a></td>
                    <td>{{.CreatedAt.Format "Jan 02 15:04"}}</td>
                    <td><a href="/target/{{.TargetID}}" style="color: var(--color-secondary);">View</a></td>
                </tr>
                {{else}}
                <tr>
                    <td colspan="4" style="text-align: center; color: var(--color-muted);">No recent scans found.</td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </div>
</div>

<style>
    /* 
       Single column stack layout for main sections.
       Charts Grid keeps 2-column layout. 
    */

    .charts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }

    .chart-container {
        position: relative;
        height: 250px;
        width: 100%;
    }

    /* Pulse Dot for Active Scans */
    .pulse-dot {
        width: 10px;
        height: 10px;
        background-color: #6b7280;
        /* Gray by default */
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.3s ease;
    }

    .pulse-dot.active {
        background-color: #10b981;
        /* Green when running */
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
        animation: pulse-green 2s infinite;
    }

    @keyframes pulse-green {
        0% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
        }

        70% {
            transform: scale(1);
            box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
        }

        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
        }
    }

    .scan-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background: var(--bg-secondary);
        border-radius: 6px;
        border: 1px solid var(--border-color);
    }
</style>

<script>
    // Real-time scan progress via SSE
    const activeScans = {};

    function rowId(target) {
        return 'scan-row-' + target.replace(/[^a-zA-Z0-9]/g, '_');
    }

    function updatePanel() {
        const list = document.getElementById('active-scans-list');
        const countBadge = document.getElementById('scan-count');
        const dot = document.querySelector('.pulse-dot');
        const keys = Object.keys(activeScans);

        if (countBadge) countBadge.textContent = keys.length + ' Running';
        if (dot) dot.classList.toggle('active', keys.length > 0);

        if (!list) return;
        if (keys.length === 0) {
            list.innerHTML = '<p style="color: var(--color-muted); font-style: italic; font-size: 0.9rem;">No scans currently running.</p>';
            return;
        }

        const stageLabels = {
            'subfinder': 'Stage 1 — Subdomain Discovery',
            'filter':    'Stage 2 — Filtering Subdomains',
            'port-scan': 'Stage 3 — Port Scanning',
            'service-detection': 'Stage 4 — Service Detection',
            'web-probe': 'Stage 5 — Web Probing',
            'web-assets':'Stage 6 — Screenshots & Crawling',
            'cve-lookup':'Stage 7 — CVE Lookup',
            'vuln-scan': 'Stage 8 — Vulnerability Scan',
        };

        list.innerHTML = keys.map(target => {
            const scan = activeScans[target];
            const id = rowId(target);
            const label = stageLabels[scan.stage] || (scan.stage ? scan.stage : 'Starting…');
            const pct = scan.stageNum > 0 ? Math.round((scan.stageNum / 8) * 100) : 5;
            return `
            <div class="scan-item" id="${id}">
                <div style="flex:1; min-width:0;">
                    <div style="font-weight:500; margin-bottom:4px;">
                        <span style="color:var(--color-primary);">Scanning:</span> ${target}
                        <span style="font-size:0.8em; color:var(--color-muted); margin-left:5px;">(${scan.asset})</span>
                    </div>
                    <div style="font-size:0.78em; color:var(--color-secondary); margin-bottom:5px;">${label}</div>
                    <div style="background:var(--bg-hover);border-radius:4px;height:4px;overflow:hidden;">
                        <div style="height:100%;width:${pct}%;background:var(--color-primary);transition:width 0.4s ease;"></div>
                    </div>
                </div>
                <button onclick="stopScan('${target}')" class="btn exception-btn" style="margin-left:12px;padding:4px 10px;font-size:0.8rem;background:rgba(239,68,68,0.1);color:#ef4444;border:1px solid #ef4444;flex-shrink:0;">
                    Stop
                </button>
            </div>`;
        }).join('');
    }

    function stopScan(target) {
        if (!confirm('Stop scanning ' + target + '?')) return;
        fetch('/api/scan/stop', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ target: target })
        }).catch(err => console.error('Stop error:', err));
    }

    // Seed with currently active scans (handles page load mid-scan)
    fetch('/api/scans')
        .then(r => r.json())
        .then(data => {
            (data.active_scans || []).forEach(s => {
                activeScans[s.target] = { asset: s.asset, stage: '', stageNum: 0 };
            });
            updatePanel();
        })
        .catch(() => {});

    // Subscribe to SSE for live updates
    const evtSource = new EventSource('/api/scan/events');
    evtSource.onmessage = function(e) {
        const evt = JSON.parse(e.data);
        if (evt.type === 'start') {
            activeScans[evt.target] = { asset: evt.asset, stage: '', stageNum: 0 };
        } else if (evt.type === 'stage') {
            if (activeScans[evt.target]) {
                activeScans[evt.target].stage = evt.stage;
                activeScans[evt.target].stageNum = evt.stage_num;
            }
        } else if (evt.type === 'done') {
            delete activeScans[evt.target];
        }
        updatePanel();
    };
    evtSource.onerror = function() {
        // SSE connection lost — fall back to polling once
        fetch('/api/scans').then(r => r.json()).then(data => {
            Object.keys(activeScans).forEach(k => delete activeScans[k]);
            (data.active_scans || []).forEach(s => {
                activeScans[s.target] = { asset: s.asset, stage: '', stageNum: 0 };
            });
            updatePanel();
        }).catch(() => {});
    };
</script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Prepare Data
    const techData = {{.ChartData.Tech }};
    const webServerData = {{.ChartData.WebServers }};
    const portData = {{.ChartData.Ports }};
    const serviceData = {{.ChartData.Services }};

    const commonOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, grid: { color: '#1e1e1e' } },
            x: { grid: { display: false } }
        }
    };

    // 1. Tech Chart (Bar)
    if (document.getElementById('techChart')) {
        new Chart(document.getElementById('techChart'), {
            type: 'bar',
            data: {
                labels: techData ? techData.map(d => d.Label) : [],
                datasets: [{
                    label: 'Count',
                    data: techData ? techData.map(d => d.Count) : [],
                    backgroundColor: '#8b5cf6',
                    borderRadius: 4
                }]
            },
            options: {
                ...commonOptions,
                indexAxis: 'y',
                scales: {
                    x: { grid: { display: false } },
                    y: {
                        beginAtZero: true,
                        grid: { color: '#1e1e1e' },
                        ticks: { autoSkip: false }
                    }
                }
            }
        });
    }

    // 2. Web Server Chart (Doughnut)
    if (document.getElementById('webServerChart')) {
        new Chart(document.getElementById('webServerChart'), {
            type: 'doughnut',
            data: {
                labels: webServerData ? webServerData.map(d => d.Label) : [],
                datasets: [{
                    data: webServerData ? webServerData.map(d => d.Count) : [],
                    backgroundColor: ['#10b981', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6', '#6366f1'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { position: 'right' }
            }
        });
    }

    // 3. Ports Chart (Bar)
    if (document.getElementById('portChart')) {
        new Chart(document.getElementById('portChart'), {
            type: 'bar',
            data: {
                labels: portData ? portData.map(d => d.Label.toString()) : [],
                datasets: [{
                    label: 'Frequency',
                    data: portData ? portData.map(d => d.Count) : [],
                    backgroundColor: '#f59e0b',
                    borderRadius: 4
                }]
            },
            options: commonOptions
        });
    }

    // 4. Services Chart (Bar - replaces Status)
    if (document.getElementById('serviceChart')) {
        new Chart(document.getElementById('serviceChart'), {
            type: 'bar',
            data: {
                labels: serviceData ? serviceData.map(d => d.Label) : [],
                datasets: [{
                    label: 'Count',
                    data: serviceData ? serviceData.map(d => d.Count) : [],
                    backgroundColor: '#10b981',
                    borderRadius: 4
                }]
            },
            options: {
                ...commonOptions,
                indexAxis: 'y',
                scales: {
                    x: { grid: { display: false } },
                    y: {
                        beginAtZero: true,
                        grid: { color: '#1e1e1e' },
                        ticks: { autoSkip: false }
                    }
                }
            }
        });
    }

    /// 5. Vulnerability Severity Chart (Doughnut)
    if (document.getElementById('vulnSeverityChart')) {
        const vulnCritical = {{.VulnStats.Critical }};
        const vulnHigh = {{.VulnStats.High }};
        const vulnMedium = {{.VulnStats.Medium }};
        const vulnLow = {{.VulnStats.Low }};
        const vulnInfo = {{.VulnStats.Info }};
        const vulnLabels = [];
        const vulnData = [];
        const vulnColors = [];

        if (vulnCritical > 0) { vulnLabels.push('Critical'); vulnData.push(vulnCritical); vulnColors.push('#dc2626'); }
        if (vulnHigh > 0) { vulnLabels.push('High'); vulnData.push(vulnHigh); vulnColors.push('#f97316'); }
        if (vulnMedium > 0) { vulnLabels.push('Medium'); vulnData.push(vulnMedium); vulnColors.push('#eab308'); }
        if (vulnLow > 0) { vulnLabels.push('Low'); vulnData.push(vulnLow); vulnColors.push('#10b981'); }
        if (vulnInfo > 0) { vulnLabels.push('Info'); vulnData.push(vulnInfo); vulnColors.push('#3b82f6'); }

        new Chart(document.getElementById('vulnSeverityChart'), {
            type: 'doughnut',
            data: {
                labels: vulnLabels,
                datasets: [{
                    data: vulnData,
                    backgroundColor: vulnColors,
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'right', labels: { color: '#9ca3af', padding: 15, font: { size: 13 } } }
                }
            }
        });
      }
</script>
{{end}}