{{template "layout" .}}

{{define "title"}}Workers & Jobs — XPFarm{{end}}

{{define "content"}}
<style>
.workers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 16px;
    height: calc(100vh - 120px);
}
.panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.panel-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.panel-header h3 { margin: 0; font-size: 0.92rem; font-weight: 600; }
.panel-body { overflow-y: auto; flex: 1; }

/* New Job form */
.job-form {
    grid-column: span 2;
    padding: 16px 20px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.form-control {
    background: var(--bg-body); border: 1px solid var(--border-color);
    border-radius: 8px; color: var(--color-text-primary); padding: 7px 11px;
    font-size: 0.875rem; transition: border-color 0.2s;
}
.form-control:focus { outline: none; border-color: var(--color-primary); }
.btn-create {
    padding: 7px 18px; background: var(--color-primary); color: #fff;
    border: none; border-radius: 8px; font-size: 0.875rem; font-weight: 600;
    cursor: pointer; transition: opacity 0.2s; white-space: nowrap;
}
.btn-create:hover { opacity: 0.85; }
.btn-sm {
    padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border-color);
    background: transparent; color: var(--color-text-muted); font-size: 0.75rem;
    cursor: pointer; transition: all 0.15s;
}
.btn-sm:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-sm.danger:hover { border-color: #ef4444; color: #ef4444; }
.btn-refresh {
    padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border-color);
    background: transparent; color: var(--color-text-muted); font-size: 0.75rem;
    cursor: pointer;
}

/* Worker list */
.worker-table, .job-table {
    width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.worker-table th, .job-table th {
    text-align: left; padding: 9px 14px; font-size: 0.72rem; font-weight: 600;
    color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border-color); position: sticky; top: 0;
    background: var(--bg-card);
}
.worker-table td, .job-table td {
    padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
}
.worker-table tr:hover td, .job-table tr:hover td { background: rgba(255,255,255,0.02); }

/* Status badges */
.dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px;
}
.dot.online { background: #22c55e; box-shadow: 0 0 5px #22c55e66; }
.dot.offline { background: #6b7280; }
.dot.busy { background: #f59e0b; box-shadow: 0 0 5px #f59e0b66; }
.badge {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px;
    font-size: 0.7rem; font-weight: 600; white-space: nowrap;
}
.badge.queued  { background: #1f2937; color: #9ca3af; }
.badge.running { background: #1e3a5f; color: #60a5fa; }
.badge.done    { background: #14532d; color: #86efac; }
.badge.error   { background: #450a0a; color: #f87171; }

.caps-list { display: flex; flex-wrap: wrap; gap: 4px; }
.cap-tag {
    background: var(--bg-body); border: 1px solid var(--border-color);
    border-radius: 4px; padding: 1px 6px; font-size: 0.68rem; color: var(--color-text-muted);
}

.result-pre {
    font-family: monospace; font-size: 0.72rem; white-space: pre-wrap;
    background: var(--bg-body); border: 1px solid var(--border-color);
    border-radius: 6px; padding: 10px; max-height: 260px; overflow-y: auto;
    color: var(--color-text-primary); margin: 0;
}

/* Detail drawer */
.drawer-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    z-index: 100; align-items: center; justify-content: center;
}
.drawer-overlay.open { display: flex; }
.drawer {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px;
    width: 580px; max-height: 80vh; overflow-y: auto; padding: 24px;
}
.drawer h4 { margin: 0 0 16px 0; font-size: 1rem; font-weight: 700; }
.drawer-close { float: right; cursor: pointer; color: var(--color-text-muted); font-size: 1.2rem; }
.kv-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.kv-table td { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.kv-table td:first-child { width: 130px; font-weight: 600; color: var(--color-text-muted); }
.empty-row td { text-align: center; color: var(--color-text-muted); padding: 28px; font-size: 0.82rem; }
</style>

<div class="page-header">
    <h2 class="page-title">Workers & Jobs</h2>
    <p class="page-subtitle">Distributed scan nodes and job queue management</p>
</div>

<!-- Local Worker Banner + New Job Form -->
<div class="panel" style="padding:16px 20px;margin-bottom:16px;overflow:visible;">
    <!-- Local worker launch bar -->
    <div id="local-worker-bar" style="width:100%;padding:10px 0 14px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
        <div style="flex:1;min-width:200px;">
            <span id="lw-status-dot" class="dot offline"></span>
            <span id="lw-status-text" style="font-size:0.82rem;color:var(--color-text-muted);">Local worker not running</span>
        </div>
        <button id="lw-btn" class="btn-create" style="padding:6px 16px;" onclick="toggleLocalWorker()">▶ Launch Local Worker</button>
        <span id="lw-msg" style="font-size:0.78rem;color:var(--color-text-muted);"></span>
    </div>
    <!-- New Job form row -->
    <div style="display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding-top:14px;">
        <div class="form-field" style="flex:0 0 160px;">
            <label>Tool</label>
            <input type="text" id="jobTool" class="form-control" placeholder="subfinder" list="toolSuggestions">
            <datalist id="toolSuggestions">
                <option value="subfinder"><option value="naabu"><option value="httpx">
                <option value="nmap"><option value="nuclei"><option value="katana">
                <option value="urlfinder"><option value="gowitness"><option value="wappalyzer">
                <option value="cvemap">
            </datalist>
        </div>
        <div class="form-field" style="flex:1;">
            <label>Target</label>
            <input type="text" id="jobTarget" class="form-control" placeholder="example.com or 192.168.1.0/24">
        </div>
        <div class="form-field" style="flex:0 0 auto;">
            <label>&nbsp;</label>
            <button class="btn-create" onclick="createJob()">+ Create Job</button>
        </div>
        <div id="jobMsg" style="align-self:center;font-size:0.8rem;color:var(--color-text-muted);"></div>
    </div>
</div>

<div class="workers-grid">
    <!-- Workers panel -->
    <div class="panel">
        <div class="panel-header">
            <h3>Worker Nodes <span id="workerCount" style="color:var(--color-text-muted);font-weight:400;font-size:0.8rem;"></span></h3>
            <button class="btn-refresh" onclick="loadWorkers()">↺ Refresh</button>
        </div>
        <div class="panel-body">
            <table class="worker-table">
                <thead><tr>
                    <th>Status</th><th>ID / Host</th><th>Capabilities</th><th>Jobs</th><th>Last Seen</th><th></th>
                </tr></thead>
                <tbody id="workerBody">
                    <tr class="empty-row"><td colspan="6">Loading…</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Jobs panel -->
    <div class="panel">
        <div class="panel-header">
            <h3>Job Queue <span id="jobCount" style="color:var(--color-text-muted);font-weight:400;font-size:0.8rem;"></span></h3>
            <div style="display:flex;gap:6px;align-items:center;">
                <select id="statusFilter" class="form-control" style="padding:4px 8px;font-size:0.75rem;" onchange="loadJobs()">
                    <option value="">All</option>
                    <option value="queued">Queued</option>
                    <option value="running">Running</option>
                    <option value="done">Done</option>
                    <option value="error">Error</option>
                </select>
                <button class="btn-refresh" onclick="loadJobs()">↺ Refresh</button>
            </div>
        </div>
        <div class="panel-body">
            <table class="job-table">
                <thead><tr>
                    <th>Status</th><th>ID</th><th>Tool</th><th>Target</th><th>Worker</th><th>Age</th><th></th>
                </tr></thead>
                <tbody id="jobBody">
                    <tr class="empty-row"><td colspan="7">Loading…</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Worker detail drawer -->
<div class="drawer-overlay" id="workerDrawer" onclick="closeDrawer('workerDrawer')">
    <div class="drawer" onclick="event.stopPropagation()">
        <span class="drawer-close" onclick="closeDrawer('workerDrawer')">✕</span>
        <h4 id="wdTitle">Worker Details</h4>
        <table class="kv-table" id="wdTable"></table>
    </div>
</div>

<!-- Job detail drawer -->
<div class="drawer-overlay" id="jobDrawer" onclick="closeDrawer('jobDrawer')">
    <div class="drawer" onclick="event.stopPropagation()">
        <span class="drawer-close" onclick="closeDrawer('jobDrawer')">✕</span>
        <h4 id="jdTitle">Job Details</h4>
        <table class="kv-table" id="jdTable"></table>
        <div id="jdResult" style="margin-top:14px;"></div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    loadWorkers();
    loadJobs();
    checkLocalWorker();
    // Auto-refresh every 15s
    setInterval(() => { loadWorkers(); loadJobs(); }, 15000);
    setInterval(checkLocalWorker, 10000);
});

// ---- Local Worker ----
let localWorkerRunning = false;

async function checkLocalWorker() {
    const res = await fetch('/api/workers/local/status');
    const data = await res.json();
    setLocalWorkerUI(data.running);
}

function setLocalWorkerUI(running) {
    localWorkerRunning = running;
    const dot = document.getElementById('lw-status-dot');
    const text = document.getElementById('lw-status-text');
    const btn = document.getElementById('lw-btn');
    dot.className = 'dot ' + (running ? 'online' : 'offline');
    text.textContent = running ? 'Local worker running — ready for jobs' : 'Local worker not running';
    btn.textContent = running ? '■ Stop Local Worker' : '▶ Launch Local Worker';
    btn.style.background = running ? '#374151' : '';
}

async function toggleLocalWorker() {
    const btn = document.getElementById('lw-btn');
    const msg = document.getElementById('lw-msg');
    btn.disabled = true;
    const endpoint = localWorkerRunning ? '/api/workers/local/stop' : '/api/workers/local/start';
    const res = await fetch(endpoint, { method: 'POST' });
    const data = await res.json();
    btn.disabled = false;
    if (!res.ok) {
        msg.textContent = '✗ ' + (data.error || 'failed');
        return;
    }
    msg.textContent = localWorkerRunning ? 'Stopped.' : 'Started — polling for jobs every 3s.';
    setLocalWorkerUI(!localWorkerRunning);
    setTimeout(() => { msg.textContent = ''; }, 4000);
    loadWorkers();
}

// ---- Workers ----
async function loadWorkers() {
    const res = await fetch('/api/workers');
    const data = await res.json();
    const workers = data.workers || [];
    document.getElementById('workerCount').textContent = `(${workers.length})`;
    const tbody = document.getElementById('workerBody');
    if (workers.length === 0) {
        tbody.innerHTML = '<tr class="empty-row"><td colspan="6">No workers registered. Click <strong>▶ Launch Local Worker</strong> above to start one, or connect a remote node.</td></tr>';
        return;
    }
    tbody.innerHTML = workers.map(w => `
        <tr>
            <td><span class="dot ${w.status}"></span>${w.status}</td>
            <td>
                <div style="font-weight:600;font-size:0.82rem;">${escH(w.id)}</div>
                <div style="font-size:0.72rem;color:var(--color-text-muted);">${escH(w.hostname || '')}</div>
            </td>
            <td>
                <div class="caps-list">${(w.capabilities||[]).slice(0,5).map(c=>`<span class="cap-tag">${escH(c)}</span>`).join('')}
                ${(w.capabilities||[]).length > 5 ? `<span class="cap-tag">+${(w.capabilities||[]).length-5}</span>` : ''}</div>
            </td>
            <td style="text-align:center;">${w.active_jobs}</td>
            <td style="font-size:0.75rem;color:var(--color-text-muted);">${relTime(w.last_seen)}</td>
            <td>
                <button class="btn-sm" data-json="${escH(JSON.stringify(w))}" onclick="showWorkerDetail(this)">View</button>
                <button class="btn-sm danger" onclick="deleteWorker('${escH(w.id)}')">✕</button>
            </td>
        </tr>
    `).join('');
}

async function deleteWorker(id) {
    if (!confirm('Remove worker ' + id + '?')) return;
    await fetch('/api/workers/' + encodeURIComponent(id), { method: 'DELETE' });
    loadWorkers();
}

function showWorkerDetail(btn) {
    const w = JSON.parse(btn.dataset.json);
    document.getElementById('wdTitle').textContent = 'Worker: ' + w.id;
    document.getElementById('wdTable').innerHTML = `
        <tr><td>ID</td><td><code>${escH(w.id)}</code></td></tr>
        <tr><td>Hostname</td><td>${escH(w.hostname||'—')}</td></tr>
        <tr><td>Address</td><td>${escH(w.address||'—')}</td></tr>
        <tr><td>Status</td><td><span class="dot ${w.status}"></span>${w.status}</td></tr>
        <tr><td>Active Jobs</td><td>${w.active_jobs}</td></tr>
        <tr><td>Last Seen</td><td>${new Date(w.last_seen).toLocaleString()}</td></tr>
        <tr><td>Labels</td><td>${(w.labels||[]).map(l=>`<span class="cap-tag">${escH(l)}</span>`).join(' ')||'—'}</td></tr>
        <tr><td>Capabilities</td><td><div class="caps-list">${(w.capabilities||[]).map(c=>`<span class="cap-tag">${escH(c)}</span>`).join('')}</div></td></tr>
    `;
    document.getElementById('workerDrawer').classList.add('open');
}

// ---- Jobs ----
async function loadJobs() {
    const status = document.getElementById('statusFilter').value;
    const res = await fetch('/api/jobs' + (status ? '?status=' + status : ''));
    const data = await res.json();
    const jobs = data.jobs || [];
    document.getElementById('jobCount').textContent = `(${jobs.length})`;
    const tbody = document.getElementById('jobBody');
    if (jobs.length === 0) {
        tbody.innerHTML = '<tr class="empty-row"><td colspan="7">No jobs. Create one above.</td></tr>';
        return;
    }
    tbody.innerHTML = jobs.map(j => `
        <tr>
            <td><span class="badge ${j.status}">${j.status}</span></td>
            <td style="font-family:monospace;font-size:0.75rem;">${escH(j.id)}</td>
            <td style="font-weight:600;">${escH(j.tool)}</td>
            <td style="font-size:0.78rem;color:var(--color-text-muted);">${escH((j.payload||{}).target||'—')}</td>
            <td style="font-size:0.75rem;color:var(--color-text-muted);">${escH(j.worker_id||'—')}</td>
            <td style="font-size:0.75rem;color:var(--color-text-muted);">${relTime(j.created_at)}</td>
            <td>
                <button class="btn-sm" data-id="${escH(j.id)}" onclick="showJobDetail(this)">View</button>
                <button class="btn-sm danger" onclick="deleteJob('${escH(j.id)}')">✕</button>
            </td>
        </tr>
    `).join('');
}

async function createJob() {
    const tool = document.getElementById('jobTool').value.trim();
    const target = document.getElementById('jobTarget').value.trim();
    const msg = document.getElementById('jobMsg');
    if (!tool || !target) { msg.textContent = 'Tool and target are required.'; return; }
    msg.textContent = 'Creating…';
    const res = await fetch('/api/jobs/create', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ tool, payload: { target } }),
    });
    const data = await res.json();
    if (!res.ok) { msg.textContent = 'Error: ' + (data.error||'failed'); return; }
    msg.textContent = '✓ Job ' + data.id + ' queued';
    document.getElementById('jobTool').value = '';
    document.getElementById('jobTarget').value = '';
    setTimeout(() => { msg.textContent = ''; }, 4000);
    loadJobs();
}

async function deleteJob(id) {
    if (!confirm('Delete job ' + id + '?')) return;
    await fetch('/api/jobs/' + encodeURIComponent(id), { method: 'DELETE' });
    loadJobs();
}

async function showJobDetail(btn) {
    const res = await fetch('/api/jobs/' + encodeURIComponent(btn.dataset.id));
    if (!res.ok) return;
    const j = await res.json();
    document.getElementById('jdTitle').textContent = 'Job: ' + j.id;
    const payload = j.payload || {};
    document.getElementById('jdTable').innerHTML = `
        <tr><td>ID</td><td><code>${escH(j.id)}</code></td></tr>
        <tr><td>Tool</td><td><strong>${escH(j.tool)}</strong></td></tr>
        <tr><td>Target</td><td><code>${escH(payload.target||'—')}</code></td></tr>
        <tr><td>Status</td><td><span class="badge ${j.status}">${j.status}</span></td></tr>
        <tr><td>Worker</td><td>${escH(j.worker_id||'unassigned')}</td></tr>
        <tr><td>Created</td><td>${new Date(j.created_at).toLocaleString()}</td></tr>
        <tr><td>Updated</td><td>${new Date(j.updated_at).toLocaleString()}</td></tr>
        ${j.error ? `<tr><td>Error</td><td style="color:#f87171;">${escH(j.error)}</td></tr>` : ''}
    `;
    const resultDiv = document.getElementById('jdResult');
    const result = j.result || {};
    if (result.output) {
        resultDiv.innerHTML = `<div style="font-size:0.75rem;font-weight:600;color:var(--color-text-muted);margin-bottom:6px;">OUTPUT</div><pre class="result-pre">${escH(result.output)}</pre>`;
    } else if (Object.keys(result).length > 0) {
        resultDiv.innerHTML = `<div style="font-size:0.75rem;font-weight:600;color:var(--color-text-muted);margin-bottom:6px;">RESULT</div><pre class="result-pre">${escH(JSON.stringify(result, null, 2))}</pre>`;
    } else {
        resultDiv.innerHTML = '';
    }
    document.getElementById('jobDrawer').classList.add('open');
}

function closeDrawer(id) {
    document.getElementById(id).classList.remove('open');
}

// ---- Helpers ----
function relTime(ts) {
    if (!ts) return '—';
    const diff = Date.now() - new Date(ts).getTime();
    const s = Math.floor(diff / 1000);
    if (s < 60) return s + 's ago';
    if (s < 3600) return Math.floor(s/60) + 'm ago';
    if (s < 86400) return Math.floor(s/3600) + 'h ago';
    return Math.floor(s/86400) + 'd ago';
}

function escH(s) {
    return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
</script>
{{end}}