{% extends "base.html" %}

{% block title %}Scan — TechHand Remote Support{% endblock %}

{% block content %}
<div class="app-page-header">
  <h1><i class="fas fa-search" aria-hidden="true"></i> Network scanning</h1>
  <div class="app-page-header-actions">
    <a href="{{ url_for('index') }}" class="btn btn-secondary btn-sm"><i class="fas fa-home"></i> Dashboard</a>
  </div>
</div>

<div class="scan-page">
    {% if server_offline %}
    <div class="filters-section" style="margin-bottom:1rem;border-left:3px solid var(--color-warning,#f39c12);padding:10px 14px;">
        <strong style="color:var(--color-warning,#f39c12);"><i class="fas fa-plug-circle-xmark" aria-hidden="true"></i> Server connection is down.</strong>
        <span class="muted">You can still run scans; results upload to the TNT server when the connection returns.</span>
    </div>
    {% endif %}
    <div class="stats-grid">
        <details class="widget" open>
            <summary><i class="fas fa-bolt" aria-hidden="true"></i> Scan this LAN now</summary>
            <p class="muted" style="margin:10px 0;">
              Run Tier-A <code>tier_a.discovery_v1</code> against this LAN and upload a
              unified envelope to TNT. The server <code>ingest_envelope</code> path
              (same as homepage Network scan) drops broadcast/multicast before
              DeviceAsset upsert. This page hides those rows in the results table.
            </p>
            <p class="muted" style="margin:0 0 10px;font-size:0.85rem;">
              <i class="fas fa-building" aria-hidden="true"></i>
              Organization:
              {% if organization_id %}
                <strong>{{ organization_name or ('#' ~ organization_id) }}</strong>
              {% else %}
                <strong style="color:var(--color-warning,#f39c12);">not bound</strong> — results need an organization; bind one on the <a href="{{ url_for('setup') }}">Setup page</a>.
              {% endif %}
            </p>
            <form id="thisLanForm">
                <div class="form-group">
                    <label for="this_lan_cidr">CIDR (optional)</label>
                    <input type="text" id="this_lan_cidr" name="cidr" placeholder="auto-detect">
                    <small class="muted">Leave empty to auto-detect from the active default route.</small>
                </div>
                <div class="form-group">
                    <label for="this_lan_iface">Interface (optional)</label>
                    <input type="text" id="this_lan_iface" name="interface" placeholder="auto-detect">
                </div>
                <button type="submit" class="btn btn-primary btn-sm" id="thisLanBtn">
                    <i class="fas fa-bolt"></i> Scan this LAN now
                </button>
            </form>
        </details>

        <details class="widget">
            <summary><i class="fas fa-network-wired" aria-hidden="true"></i> Network discovery (same recipe)</summary>
            <p class="muted" style="margin:10px 0;">
              Same recipe + <code>ingest_envelope</code> path as Scan this LAN and the
              TNT homepage Network scan. Optional CIDR override. Legacy
              LocalScanner <code>arp -a</code> upload is retired.
            </p>
            <form id="networkScanForm">
                <div class="form-group">
                    <label for="network_range">Network range (optional)</label>
                    <input type="text" id="network_range" name="network_range"
                           placeholder="192.168.1.0/24">
                    <small class="muted">Leave empty to auto-detect</small>
                </div>
                <button type="submit" class="btn btn-primary btn-sm" id="networkScanBtn">
                    Start network scan
                </button>
            </form>
        </details>
        <details class="widget" open>
            <summary><i class="fas fa-crosshairs" aria-hidden="true"></i> Device scan</summary>
            <p class="muted" style="margin:10px 0;">Detailed scan of a single IP (presets match TNT server).</p>
            <form id="deviceScanForm">
                <div class="form-group">
                    <label for="ip_address">IP address</label>
                    <input type="text" id="ip_address" name="ip_address"
                           placeholder="192.168.1.100" required>
                </div>
                <div class="form-group">
                    <label for="scan_preset">Preset</label>
                    <select id="scan_preset" name="scan_preset">
                        <option value="default">Default (comprehensive)</option>
                        <option value="fast">Fast</option>
                        <option value="router">Router</option>
                        <option value="windows">Windows</option>
                        <option value="printer">Printer</option>
                        <option value="iot">IoT</option>
                        <option value="web">Web server</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary btn-sm" id="deviceScanBtn">
                    Start device scan
                </button>
            </form>
        </details>
    </div>
    
    {% if server_url %}
    <div class="filters-section" style="margin-top: 1.25rem;">
        <a href="{{ server_url }}/network-scans" target="_blank" rel="noopener noreferrer" class="btn btn-secondary btn-sm">
            <i class="fas fa-external-link-alt"></i> Scan history on TNT server
        </a>
        <p class="muted" style="margin-top: 0.5rem; font-size: 0.9rem;">Opens the Scans page on the main TNT server.</p>
    </div>
    {% endif %}
    
    <div class="scan-status filters-section" id="scanStatus" style="display: none; margin-top:1rem;">
        <h3 style="margin:0 0 8px;color:var(--color-primary);font-size:1.1rem;">Scan status</h3>
        <div class="status-content">
            <div class="spinner"></div>
            <p id="statusMessage" class="muted">Initializing scan…</p>
        </div>
    </div>
    
    <div class="scan-results filters-section" id="scanResults" style="display: none; margin-top:1rem;">
        <h3 style="margin:0 0 8px;color:var(--color-primary);font-size:1.1rem;">Results</h3>
        <div id="resultsContent"></div>
    </div>
</div>

<script>
const socket = io();

// Scan-this-LAN form (Phase 5b: client-side trigger using server-supplied recipes)
document.getElementById('thisLanForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const btn = document.getElementById('thisLanBtn');
    const statusDiv = document.getElementById('scanStatus');
    const resultsDiv = document.getElementById('scanResults');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Scanning…';
    statusDiv.style.display = 'block';
    resultsDiv.style.display = 'none';
    document.getElementById('statusMessage').textContent = 'Running Tier-A discovery on this LAN…';

    const body = {
        cidr: document.getElementById('this_lan_cidr').value || null,
        interface: document.getElementById('this_lan_iface').value || null,
    };
    try {
        const res = await fetch('/api/scan/this-lan', {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(body),
        });
        const data = await res.json();
        if (!data.success) {
            alert('Scan failed: ' + (data.error || 'unknown'));
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-bolt"></i> Scan this LAN now';
            statusDiv.style.display = 'none';
        }
    } catch (err) {
        alert('Scan failed: ' + err.message);
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-bolt"></i> Scan this LAN now';
        statusDiv.style.display = 'none';
    }
});

// Network scan form
document.getElementById('networkScanForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const btn = document.getElementById('networkScanBtn');
    const statusDiv = document.getElementById('scanStatus');
    const resultsDiv = document.getElementById('scanResults');
    
    btn.disabled = true;
    btn.textContent = 'Scanning...';
    statusDiv.style.display = 'block';
    resultsDiv.style.display = 'none';
    
    const formData = {
        network_range: document.getElementById('network_range').value
    };
    
    try {
        const response = await fetch('/api/scan/network', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        });
        
        const data = await response.json();
        
        if (!data.success) {
            alert('Scan failed: ' + data.error);
            btn.disabled = false;
            btn.textContent = 'Start Network Scan';
            statusDiv.style.display = 'none';
        }
    } catch (error) {
        alert('Scan failed: ' + error.message);
        btn.disabled = false;
        btn.textContent = 'Start Network Scan';
        statusDiv.style.display = 'none';
    }
});

// Device scan form
document.getElementById('deviceScanForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const btn = document.getElementById('deviceScanBtn');
    const statusDiv = document.getElementById('scanStatus');
    const resultsDiv = document.getElementById('scanResults');
    
    btn.disabled = true;
    btn.textContent = 'Scanning...';
    statusDiv.style.display = 'block';
    resultsDiv.style.display = 'none';
    
    const formData = {
        ip_address: document.getElementById('ip_address').value,
        preset: (document.getElementById('scan_preset') && document.getElementById('scan_preset').value) || 'default'
    };
    
    try {
        const response = await fetch('/api/scan/device', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        });
        
        const data = await response.json();
        
        if (!data.success) {
            alert('Scan failed: ' + data.error);
            btn.disabled = false;
            btn.textContent = 'Start Device Scan';
            statusDiv.style.display = 'none';
        }
    } catch (error) {
        alert('Scan failed: ' + error.message);
        btn.disabled = false;
        btn.textContent = 'Start Device Scan';
        statusDiv.style.display = 'none';
    }
});

function resetThisLanBtn() {
    const btn = document.getElementById('thisLanBtn');
    btn.disabled = false;
    btn.innerHTML = '<i class="fas fa-bolt"></i> Scan this LAN now';
}

function displayThisLanResults(result, container) {
    const serverUrl = {{ (server_url or '') | tojson }};
    if (!result || !result.success) {
        container.innerHTML = `
            <div class="results-summary">
                <h4>✗ Scan failed</h4>
                <p>${(result && result.error) || 'Unknown error'}</p>
            </div>
        `;
        return;
    }
    const devices = result.devices || [];
    const ignored = result.ignored_count || 0;
    let html = `
        <div class="results-summary">
            <h4>✓ Scan complete</h4>
            <p>Interface <strong>${result.interface || '?'}</strong>, CIDR <strong>${result.cidr || '?'}</strong></p>
            <p>Found <strong>${devices.length || result.host_count || 0}</strong> hosts` +
            (result.asset_count != null ? `, <strong>${result.asset_count}</strong> assets upserted` : '') +
            (ignored ? ` <span class="muted">(${ignored} ARP noise hidden)</span>` : '') + `</p>
    `;
    if (result.network_scan_id && serverUrl) {
        html += `<p><a href="${serverUrl}/network-scans/${result.network_scan_id}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary btn-sm"><i class="fas fa-external-link-alt"></i> View scan #${result.network_scan_id} on TNT server</a></p>`;
    }
    if (result.errors && result.errors.length) {
        html += `<p class="muted">Warnings: ${result.errors.join('; ')}</p>`;
    }
    html += '</div>';
    if (devices.length) {
        html += `<table class="results-table"><thead><tr>
            <th>IP Address</th><th>MAC Address</th><th>Hostname</th>
        </tr></thead><tbody>`;
        devices.forEach((device) => {
            html += `<tr>
                <td>${device.ip || ''}</td>
                <td>${device.mac || 'Unknown'}</td>
                <td>${device.name || 'Unknown'}</td>
            </tr>`;
        });
        html += '</tbody></table>';
    }
    container.innerHTML = html;
}

// WebSocket event handlers
socket.on('scan_started', (data) => {
    document.getElementById('statusMessage').textContent = `Scanning ${data.type}...`;
});

socket.on('scan_completed', (data) => {
    const statusDiv = document.getElementById('scanStatus');
    const resultsDiv = document.getElementById('scanResults');
    const resultsContent = document.getElementById('resultsContent');
    
    statusDiv.style.display = 'none';
    resultsDiv.style.display = 'block';
    
    // Re-enable buttons
    document.getElementById('networkScanBtn').disabled = false;
    document.getElementById('networkScanBtn').textContent = 'Start Network Scan';
    document.getElementById('deviceScanBtn').disabled = false;
    document.getElementById('deviceScanBtn').textContent = 'Start Device Scan';
    resetThisLanBtn();
    
    // Display results
    if (data.type === 'network') {
        displayNetworkResults(data, resultsContent);
    } else if (data.type === 'device') {
        displayDeviceResults(data, resultsContent);
    } else if (data.type === 'this-lan') {
        displayThisLanResults(data.result, resultsContent);
    }
});

socket.on('scan_error', (data) => {
    const statusDiv = document.getElementById('scanStatus');
    
    statusDiv.style.display = 'none';
    alert('Scan error: ' + data.error);
    
    // Re-enable buttons
    document.getElementById('networkScanBtn').disabled = false;
    document.getElementById('networkScanBtn').textContent = 'Start Network Scan';
    document.getElementById('deviceScanBtn').disabled = false;
    document.getElementById('deviceScanBtn').textContent = 'Start Device Scan';
    resetThisLanBtn();
});

function displayNetworkResults(data, container) {
    const devices = data.scan_data.devices || [];
    const ignored = (data.scan_data && data.scan_data.ignored_count) || 0;
    
    let html = `
        <div class="results-summary">
            <h4>✓ Scan Complete</h4>
            <p>Found <strong>${devices.length}</strong> devices on the network` +
            (ignored ? ` <span class="muted">(${ignored} ARP noise hidden)</span>` : '') + `</p>
            <p><small>Uploaded via tier_a.discovery_v1 / ingest_envelope</small></p>
        </div>
        <table class="results-table">
            <thead>
                <tr>
                    <th>IP Address</th>
                    <th>MAC Address</th>
                    <th>Hostname</th>
                    <th>Type</th>
                </tr>
            </thead>
            <tbody>
    `;
    
    devices.forEach(device => {
        html += `
            <tr>
                <td>${device.ip}</td>
                <td>${device.mac || 'Unknown'}</td>
                <td>${device.name || 'Unknown'}</td>
                <td>${device.type || 'Unknown'}</td>
            </tr>
        `;
    });
    
    html += `
            </tbody>
        </table>
    `;
    
    container.innerHTML = html;
}

function displayDeviceResults(data, container) {
    const device = data.device_data;
    
    let html = `
        <div class="results-summary">
            <h4>✓ Device Scan Complete</h4>
            <p>Scanned device: <strong>${device.ip}</strong></p>
            <p><small>Results have been uploaded to the main server</small></p>
        </div>
        <div class="device-details">
            <h5>Device Information</h5>
            <table class="info-table">
                <tr>
                    <td><strong>IP Address:</strong></td>
                    <td>${device.ip}</td>
                </tr>
                <tr>
                    <td><strong>MAC Address:</strong></td>
                    <td>${device.mac || 'Unknown'}</td>
                </tr>
                <tr>
                    <td><strong>Hostname:</strong></td>
                    <td>${device.name || 'Unknown'}</td>
                </tr>
                <tr>
                    <td><strong>Scan Time:</strong></td>
                    <td>${device.scan_time || 'Unknown'}</td>
                </tr>
            </table>
        </div>
    `;
    
    if (device.ports && device.ports.length > 0) {
        html += `
            <div class="ports-section">
                <h5>Open Ports</h5>
                <table class="results-table">
                    <thead>
                        <tr>
                            <th>Port</th>
                            <th>Protocol</th>
                            <th>State</th>
                            <th>Service</th>
                        </tr>
                    </thead>
                    <tbody>
        `;
        
        device.ports.forEach(port => {
            html += `
                <tr>
                    <td>${port.port}</td>
                    <td>${port.protocol}</td>
                    <td>${port.state}</td>
                    <td>${port.service}</td>
                </tr>
            `;
        });
        
        html += `
                    </tbody>
                </table>
            </div>
        `;
    }
    
    container.innerHTML = html;
}
</script>
{% endblock %}