{% extends "base.html" %}

{% block extra_head %}
<style>
    /* Scanners Page */
    .scanners-container {
        max-width: 1440px;
        margin: 0 auto;
        padding: 1.5rem;
    }

    /* Remove hero — replaced by section-header in content */
    .scanners-hero {
        background-color: var(--gb-bg);
        border: 1px solid var(--gb-bg1);
        border-left: 3px solid var(--gb-blue);
        margin-bottom: 1.5rem;
        padding: 1.25rem 1.5rem;
        text-align: left;
    }

    .hero-title {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--gb-blue-b);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        background: none;
        -webkit-text-fill-color: unset;
        -webkit-background-clip: unset;
        background-clip: unset;
    }

    .hero-subtitle {
        color: var(--text-muted);
        font-size: 0.78rem;
    }

    .scanner-category {
        margin-bottom: 2rem;
    }

    .category-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        padding: 1rem 1.25rem;
        background-color: var(--gb-bg1);
        border: 1px solid var(--gb-bg2);
        border-bottom: 2px solid var(--gb-blue);
    }

    .category-icon {
        display: none;
    }

    .category-info h2 {
        color: var(--gb-blue-b);
        font-size: 0.82rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 0.15rem;
    }

    .category-info p {
        color: var(--text-dim);
        font-size: 0.72rem;
        margin: 0;
    }

    .scanner-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: 0.75rem;
    }

    .scanner-card {
        background-color: var(--gb-bg);
        overflow: hidden;
        transition: background-color 0.1s;
    }

    .scanner-card:hover {
        background-color: var(--gb-bg-s);
    }

    .scanner-card .card-header {
        padding: 1rem 1.25rem;
        display: flex;
        align-items: flex-start;
        gap: 0.875rem;
        border-bottom: 1px solid var(--gb-bg1);
        background-color: var(--gb-bg1);
    }

    .tool-icon {
        display: none;
    }

    .tool-info h3 {
        color: var(--text-primary);
        font-size: 0.9rem;
        font-weight: 700;
        margin-bottom: 0.2rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .tool-info p {
        color: var(--text-muted);
        font-size: 0.78rem;
        line-height: 1.4;
        margin: 0;
    }

    .scanner-card .card-content {
        padding: 1.25rem;
    }

    .scanner-form {
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
    }

    .input-group {
        position: relative;
        display: flex;
        align-items: center;
    }

    .input-icon {
        display: none;
    }

    .input-group input {
        width: 100%;
        padding: 0.5rem 0.75rem;
        background: var(--gb-bg-h);
        border: 1px solid var(--gb-bg2);
        border-radius: 0;
        color: var(--text-primary);
        font-size: 0.85rem;
        font-family: 'JetBrains Mono', monospace;
        transition: border-color 0.1s;
    }

    .input-group input:focus {
        outline: none;
        border-color: var(--gb-blue);
        box-shadow: 0 0 0 1px var(--gb-blue);
    }

    /* Tag picker for the bulk Nuclei filter */
    .tag-filter-section {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
    }

    .tag-filter-selected-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem;
    }

    .tag-filter-selected-row .selected-tags {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem;
    }

    .tag-filter-selected-label {
        color: var(--text-muted);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-right: 0.25rem;
    }

    .tag-filter-empty {
        color: var(--text-muted);
        font-size: 0.78rem;
    }

    .tag-filter-pill {
        padding: 0.2rem 0.5rem;
        font-size: 0.75rem;
        font-weight: 700;
        font-family: 'JetBrains Mono', monospace;
        display: flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 0;
    }

    .tag-filter-pill.include { background-color: var(--gb-green); color: var(--gb-bg-h); }
    .tag-filter-pill.exclude { background-color: var(--gb-red); color: var(--gb-fg); }

    .tag-filter-pill button {
        background: none;
        border: none;
        color: inherit;
        cursor: pointer;
        font-weight: 700;
        line-height: 1;
        padding: 0;
        opacity: 0.75;
    }

    .tag-filter-pill button:hover { opacity: 1; }

    .tag-filter-available {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        max-height: 160px;
        overflow-y: auto;
        padding: 0.625rem;
        background-color: var(--gb-bg-h);
        border: 1px solid var(--gb-bg2);
    }

    .tag-filter-chip {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.2rem 0.4rem 0.2rem 0.6rem;
        background-color: var(--gb-bg);
        border: 1px solid var(--gb-bg2);
        font-size: 0.78rem;
    }

    .tag-filter-chip-actions { display: flex; gap: 0.2rem; }

    .tag-filter-chip-btn {
        padding: 0.1rem 0.4rem;
        font-size: 0.7rem;
        font-weight: 700;
        font-family: 'JetBrains Mono', monospace;
        border: 1px solid var(--gb-bg2);
        background-color: var(--gb-bg-h);
        color: var(--text-secondary);
        cursor: pointer;
        border-radius: 0;
    }

    .tag-filter-chip-btn.include-btn:hover,
    .tag-filter-chip-btn.include-btn.active {
        background-color: var(--gb-green);
        color: var(--gb-bg-h);
        border-color: var(--gb-green);
    }

    .tag-filter-chip-btn.exclude-btn:hover,
    .tag-filter-chip-btn.exclude-btn.active {
        background-color: var(--gb-red);
        color: var(--gb-fg);
        border-color: var(--gb-red);
    }

    .tag-filter-no-tags {
        color: var(--text-muted);
        font-size: 0.82rem;
    }

    /* Nuclei modal */
    .nuclei-modal { width: 90%; max-width: 720px; }

    .nuclei-modal-section {
        margin-bottom: 1.25rem;
    }

    .nuclei-modal-section h4 {
        color: var(--text-muted);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 0.625rem;
    }

    .nuclei-modal-section .input-group {
        margin-bottom: 0.625rem;
    }

    .nuclei-preview-panel {
        background-color: var(--gb-bg-h);
        border: 1px solid var(--gb-bg2);
        padding: 0.75rem;
        font-size: 0.82rem;
        color: var(--text-secondary);
    }

    .nuclei-preview-panel .preview-counts {
        font-weight: 700;
        color: var(--gb-fg);
        margin-bottom: 0.4rem;
    }

    .nuclei-preview-panel .preview-line {
        margin-bottom: 0.2rem;
    }

    .nuclei-preview-panel .preview-error {
        color: var(--gb-red);
        font-weight: 700;
    }

    .nuclei-modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 0.625rem;
        padding: 0.875rem 1.25rem;
        border-top: 1px solid var(--border-color);
        background-color: var(--gb-bg1);
    }

    .nuclei-modal-footer .btn-scanner:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-scanner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem 1.25rem;
        border: 1px solid transparent;
        border-radius: 0;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
        transition: background-color 0.1s, color 0.1s;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-family: 'JetBrains Mono', monospace;
    }

    .btn-scanner:hover {
        opacity: 0.85;
    }

    .btn-scanner .btn-icon {
        font-size: 0.9rem;
    }

    /* Security notice */
    .security-notice {
        background-color: var(--gb-bg);
        border: 1px solid var(--gb-bg1);
        border-left: 3px solid var(--gb-orange);
        padding: 1.25rem;
        margin-top: 1.5rem;
    }

    .security-info {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }

    .security-icon {
        display: none;
    }

    .security-info h3 {
        color: var(--gb-orange-b);
        margin-bottom: 0.4rem;
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .security-info p {
        color: var(--text-secondary);
        margin: 0;
        font-size: 0.82rem;
        line-height: 1.5;
    }

    /* File Upload Styles */
    .upload-tabs {
        display: flex;
        gap: 0;
        margin-bottom: 0;
        border-bottom: 2px solid var(--gb-blue);
    }

    .upload-tab {
        padding: 0.5rem 1rem;
        background: var(--gb-bg1);
        border: 1px solid var(--gb-bg2);
        border-bottom: none;
        color: var(--text-muted);
        cursor: pointer;
        font-weight: 600;
        transition: background-color 0.1s, color 0.1s;
        border-radius: 0;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-family: 'JetBrains Mono', monospace;
    }

    .upload-tab.active {
        background-color: var(--gb-blue);
        color: var(--gb-fg);
        border-color: var(--gb-blue);
    }

    .upload-tab:hover:not(.active) {
        background-color: var(--gb-bg2);
        color: var(--text-secondary);
    }

    .upload-tab-content {
        display: none;
    }

    .upload-tab-content.active {
        display: block;
    }

    .file-upload-area {
        border: 1px solid var(--gb-bg2);
        padding: 1.5rem 1rem;
        text-align: center;
        transition: border-color 0.1s, background-color 0.1s;
        background: var(--gb-bg-h);
        cursor: pointer;
        position: relative;
        margin-top: 0.75rem;
    }

    .file-upload-area:hover,
    .file-upload-area.drag-over {
        border-color: var(--gb-blue);
        background-color: rgba(69, 133, 136, 0.05);
    }

    .file-upload-area input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }

    .file-upload-icon {
        font-size: 1.5rem;
        display: block;
        margin-bottom: 0.4rem;
        opacity: 0.5;
    }

    .file-text {
        color: var(--text-secondary);
        font-weight: 600;
        display: block;
        margin-bottom: 0.2rem;
        font-size: 0.82rem;
    }

    .file-hint {
        color: var(--text-muted);
        font-size: 0.72rem;
    }

    .file-selected {
        color: var(--gb-blue-b);
        font-weight: 700;
        font-size: 0.82rem;
    }

    .text-primary-color {
        color: var(--text-primary);
    }

    .text-muted-color {
        color: var(--text-muted);
    }

    @media (max-width: 1024px) {
        .scanner-grid {
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        }
    }

    @media (max-width: 768px) {
        .scanners-container {
            padding: 0.75rem;
        }

        .scanner-grid {
            grid-template-columns: 1fr;
        }

        .category-header {
            flex-direction: column;
            text-align: left;
            gap: 0.5rem;
        }
    }

    @media (max-width: 480px) {
        .scanner-card .card-header {
            padding: 0.875rem;
        }

        .scanner-card .card-content {
            padding: 0.875rem;
        }
    }
</style>
{% endblock %}
{% block title %}Scanners{% endblock %}

{% block content %}
<div class="scanners-container">
    <div class="scanners-hero">
        <div class="hero-content">
            <h1 class="hero-title">Network Discovery Arsenal</h1>
            <p class="hero-subtitle">Launch comprehensive network reconnaissance and enumeration tools</p>
        </div>
    </div>

    <div class="scanner-category">
        <div class="category-header">
            <div class="category-info">
                <h2>Target Discovery</h2>
                <p>Add specific targets for focused reconnaissance operations</p>
            </div>
        </div>

        <div class="scanner-grid">
            <div class="scanner-card target-card">
                <div class="card-header">
                    <div class="tool-info">
                        <h3>Individual Target</h3>
                        <p>Add specific IP addresses or hostnames for targeted scanning</p>
                    </div>
                </div>
                <div class="card-content">
                    <div class="tab-nav">
                        <button class="tab-btn active" data-tab="manual-target">Manual Entry</button>
                        <button class="tab-btn" data-tab="file-target">File Upload</button>
                    </div>

                    <div class="tab-content active" id="manual-target">
                        <form id="addTargetForm" class="scanner-form">
                            <div class="input-group">
                                <input type="text" id="target" name="target" placeholder="192.168.1.100 or example.com"
                                    required>
                            </div>
                            <button type="submit" class="btn-scanner btn-primary">
                                <span class="btn-text">Add Target</span>
                            </button>
                        </form>
                    </div>

                    <div class="tab-content" id="file-target">
                        <form id="uploadTargetFileForm" class="scanner-form">
                            <div class="file-upload-area">
                                <input type="file" id="targetFile" accept=".txt">
                                <label for="targetFile" class="file-upload-label">
                                    <span class="file-upload-icon">↑</span>
                                    <span class="file-text">Choose .txt file with IP addresses or hostnames</span>
                                </label>
                                <div class="file-info">
                                    <small class="file-hint">Separators: comma, semicolon, space, newline | Max 1000
                                        entries</small>
                                </div>
                            </div>
                            <button type="submit" class="btn-scanner btn-primary" disabled id="uploadTargetBtn">
                                <span class="btn-text">Parse &amp; Review</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="scanner-card subnet-card">
                <div class="card-header">
                    <div class="tool-info">
                        <h3>Subnet Scanning</h3>
                        <p>Launch high-speed Masscan discovery across network ranges</p>
                    </div>
                </div>
                <div class="card-content">
                    <div class="tab-nav">
                        <button class="tab-btn active" data-tab="manual-subnet">Manual Entry</button>
                        <button class="tab-btn" data-tab="file-subnet">File Upload</button>
                    </div>

                    <div class="tab-content active" id="manual-subnet">
                        <form id="addSubnetForm" class="scanner-form">
                            <div class="input-group">
                                <input type="text" id="subnet" name="subnet" placeholder="192.168.1.0/24" required>
                            </div>
                            <div class="ip-range-hint"
                                style="margin: 0.5rem 0; padding: 0.5rem; background-color: var(--gb-bg1); border: 1px solid var(--gb-bg2);">
                                <small class="text-muted">
                                    <strong>Private Ranges:</strong>
                                    <code onclick="document.getElementById('subnet').value='10.0.0.0/8'"
                                        style="cursor:pointer;" title="Click to use">10.0.0.0/8</code>
                                    <code onclick="document.getElementById('subnet').value='172.16.0.0/12'"
                                        style="cursor:pointer;" title="Click to use">172.16.0.0/12</code>
                                    <code onclick="document.getElementById('subnet').value='192.168.0.0/16'"
                                        style="cursor:pointer;" title="Click to use">192.168.0.0/16</code>
                                </small>
                            </div>
                            <div class="security-info">
                                <small class="text-muted">Scans automatically exclude localhost, host interfaces, and
                                    blacklisted ranges</small>
                            </div>
                            <button type="submit" class="btn-scanner btn-warning">
                                <span class="btn-text">Launch Masscan</span>
                            </button>
                        </form>
                    </div>

                    <div class="tab-content" id="file-subnet">
                        <form id="uploadSubnetFileForm" class="scanner-form">
                            <div class="file-upload-area">
                                <input type="file" id="subnetFile" accept=".txt">
                                <label for="subnetFile" class="file-upload-label">
                                    <span class="file-upload-icon">↑</span>
                                    <span class="file-text">Choose .txt file with subnet CIDR ranges</span>
                                </label>
                                <div class="file-info">
                                    <small class="file-hint">Separators: comma, semicolon, space, newline | Max 1000
                                        entries</small>
                                </div>
                            </div>
                            <button type="submit" class="btn-scanner btn-warning" disabled id="uploadSubnetBtn">
                                <span class="btn-text">Parse &amp; Review</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="scanner-category">
        <div class="category-header">
            <div class="category-info">
                <h2>Local Network Intelligence</h2>
                <p>Deploy passive and active reconnaissance tools for local network discovery</p>
            </div>
        </div>

        <div class="scanner-grid">
            <div class="scanner-card arp-card">
                <div class="card-header">
                    <div class="tool-info">
                        <h3>ARP Discovery</h3>
                        <p>Actively discover hosts on the local network segment using ARP requests</p>
                    </div>
                </div>
                <div class="card-content">
                    <button id="launchArpScan" class="btn-scanner btn-success">
                        <span class="btn-text">Launch ARP Scan</span>
                    </button>
                </div>
            </div>

            <div class="scanner-card dns-card">
                <div class="card-header">
                    <div class="tool-info">
                        <h3>DNS Intelligence</h3>
                        <p>Extract DNS server information and discover network infrastructure</p>
                    </div>
                </div>
                <div class="card-content">
                    <button id="launchDnsSearch" class="btn-scanner btn-info">
                        <span class="btn-text">Launch DNS Search</span>
                    </button>
                </div>
            </div>

            <div class="scanner-card interface-card">
                <div class="card-header">
                    <div class="tool-info">
                        <h3>Interface Explorer</h3>
                        <p>Analyze network interfaces, routes, and topology for reconnaissance planning</p>
                    </div>
                </div>
                <div class="card-content">
                    <button id="launchInterfaceExplorer" class="btn-scanner btn-info">
                        <span class="btn-text">Explore Network</span>
                    </button>
                </div>
            </div>

            <div class="scanner-card listener-card">
                <div class="card-header">
                    <div class="tool-info">
                        <h3>Passive Listener</h3>
                        <p>Monitor network traffic for mDNS, LLMNR, NetBIOS, and broadcast discovery</p>
                    </div>
                </div>
                <div class="card-content">
                    <button id="launchPassiveListener" class="btn-scanner btn-purple">
                        <span class="btn-text">Start Listener</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="scanner-category">
        <div class="category-header">
            <div class="category-info">
                <h2>Vulnerability Assessment</h2>
                <p>Run vulnerability scans across discovered HTTP services</p>
            </div>
        </div>

        <div class="scanner-grid">
            <div class="scanner-card nuclei-card">
                <div class="card-header">
                    <div class="tool-info">
                        <h3>Nuclei — All HTTP Services</h3>
                        <p>Run nuclei against every discovered HTTP service. Optionally filter hosts by tag.</p>
                    </div>
                </div>
                <div class="card-content">
                    <button type="button" id="openNucleiModalBtn" class="btn-scanner btn-warning">
                        <span class="btn-text">Run Nuclei on All HTTP Services</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="nucleiModalOverlay" class="discovery-modal-overlay" style="display: none;">
    <div class="discovery-modal nuclei-modal">
        <div class="discovery-modal-header">
            <h3 class="discovery-modal-title">Run Nuclei on All HTTP Services</h3>
            <button type="button" class="discovery-modal-close" id="closeNucleiModalBtn">Close</button>
        </div>
        <div class="discovery-modal-body">
            <form id="nucleiBulkForm">
                <input type="hidden" id="nucleiIncludeTags" name="include_tags" value="">
                <input type="hidden" id="nucleiExcludeTags" name="exclude_tags" value="">

                <div class="nuclei-modal-section">
                    <h4>Tag Filter</h4>
                    <div class="tag-filter-section">
                        <div class="tag-filter-selected-row">
                            <span class="tag-filter-selected-label">Include:</span>
                            <div class="selected-tags" id="nucleiIncludeSelected">
                                <span class="tag-filter-empty">any host</span>
                            </div>
                        </div>
                        <div class="tag-filter-selected-row">
                            <span class="tag-filter-selected-label">Exclude:</span>
                            <div class="selected-tags" id="nucleiExcludeSelected">
                                <span class="tag-filter-empty">none</span>
                            </div>
                        </div>

                        {% if available_tags.is_empty() %}
                        <div class="tag-filter-no-tags">No tags available yet.</div>
                        {% else %}
                        <div class="tag-filter-available">
                            {% for tag in available_tags %}
                            <div class="tag-filter-chip" data-tag="{{ tag.name|trim }}">
                                <span class="tag-name">{{ tag.name|trim }}</span>
                                <span class="tag-count">{{ tag.count }}</span>
                                <div class="tag-filter-chip-actions">
                                    <button type="button" class="tag-filter-chip-btn include-btn" title="Include this tag">+</button>
                                    <button type="button" class="tag-filter-chip-btn exclude-btn" title="Exclude this tag">-</button>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                </div>

                <div class="nuclei-modal-section">
                    <h4>IP / Range Filter</h4>
                    <div class="input-group">
                        <input type="text" id="nucleiIncludeIps"
                            placeholder="Include IPs/CIDRs (comma-separated, e.g. 10.0.0.5, 10.0.1.0/24)">
                    </div>
                    <div class="input-group">
                        <input type="text" id="nucleiExcludeIps"
                            placeholder="Exclude IPs/CIDRs (comma-separated)">
                    </div>
                </div>

                <div class="nuclei-modal-section">
                    <div id="nucleiPreviewPanel" class="nuclei-preview-panel">
                        <span class="tag-filter-empty">Loading preview...</span>
                    </div>
                </div>
            </form>
        </div>
        <div class="nuclei-modal-footer">
            <button type="button" class="btn-scanner btn-secondary" id="cancelNucleiModalBtn">Cancel</button>
            <button type="submit" form="nucleiBulkForm" class="btn-scanner btn-warning" id="runNucleiBtn" disabled>
                <span class="btn-text">Run Nuclei</span>
            </button>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        setupTabSwitching();
        setupFormHandlers();
        setupFileUploadHandlers();
        setupDiscoveryTools();
        setupNucleiModal();
    });

    function setupTabSwitching() {
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.addEventListener('click', function () {
                const tab = this.dataset.tab;
                const parent = this.closest('.card-content');

                // Switch active tab button
                parent.querySelectorAll('.tab-btn').forEach(b => {
                    b.classList.remove('active');
                    b.style.color = '#999';
                    b.style.borderBottom = '2px solid transparent';
                });
                this.classList.add('active');
                this.style.color = '#8ab4f8';
                this.style.borderBottom = '2px solid #8ab4f8';

                // Switch active content
                parent.querySelectorAll('.tab-content').forEach(c => {
                    c.classList.remove('active');
                    c.style.display = 'none';
                });
                const targetContent = parent.querySelector(`#${tab}`);
                targetContent.classList.add('active');
                targetContent.style.display = 'block';
            });
        });
    }

    function setupFileUploadHandlers() {
        // Target file upload
        const targetFileInput = document.getElementById('targetFile');
        const targetBtn = document.getElementById('uploadTargetBtn');

        targetFileInput.addEventListener('change', function (e) {
            if (this.files.length) {
                targetBtn.disabled = false;
                targetBtn.querySelector('.btn-text').textContent = `Parse ${this.files[0].name}`;
            } else {
                targetBtn.disabled = true;
                targetBtn.querySelector('.btn-text').textContent = 'Parse & Review';
            }
        });

        document.getElementById('uploadTargetFileForm').addEventListener('submit', async function (e) {
            e.preventDefault();
            await handleFileUpload('targetFile', 'targets', targetBtn);
        });

        // Subnet file upload
        const subnetFileInput = document.getElementById('subnetFile');
        const subnetBtn = document.getElementById('uploadSubnetBtn');

        subnetFileInput.addEventListener('change', function (e) {
            if (this.files.length) {
                subnetBtn.disabled = false;
                subnetBtn.querySelector('.btn-text').textContent = `Parse ${this.files[0].name}`;
            } else {
                subnetBtn.disabled = true;
                subnetBtn.querySelector('.btn-text').textContent = 'Parse & Review';
            }
        });

        document.getElementById('uploadSubnetFileForm').addEventListener('submit', async function (e) {
            e.preventDefault();
            await handleFileUpload('subnetFile', 'subnets', subnetBtn);
        });
    }

    async function handleFileUpload(fileInputId, fileType, button) {
        const fileInput = document.getElementById(fileInputId);
        const file = fileInput.files[0];

        if (!file) {
            showNotification('Please select a file', 'error');
            return;
        }

        // Security: Client-side validation
        if (file.size > 1048576) {
            showNotification('File too large (max 1MB)', 'error');
            return;
        }

        if (!file.name.endsWith('.txt')) {
            showNotification('Only .txt files are allowed', 'error');
            return;
        }

        const originalText = button.innerHTML;
        button.disabled = true;
        button.innerHTML = '<span class="btn-text">Parsing...</span>';

        const formData = new FormData();
        formData.append('file', file);
        formData.append('file_type', fileType);

        try {
            const response = await fetch('/parse-targets-file', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();

            if (data.success) {
                // Show modal using EXISTING discovery modal (REUSE!)
                window.discoveryModal.showDiscoveryResults(data.discovery_results, `file-upload-${fileType}`);

                // Show warning if invalid entries
                if (data.invalid_entries && data.invalid_entries.length > 0) {
                    const validCount = data.discovery_results.ips?.length || data.discovery_results.subnets?.length || 0;
                    showNotification(`Parsed ${validCount} valid entries. ${data.invalid_entries.length} invalid entries skipped.`, 'warning');
                } else {
                    showNotification(data.message, 'success');
                }

                // Clear file input
                fileInput.value = '';
                button.disabled = true;
                button.querySelector('.btn-text').textContent = 'Parse & Review';
            } else {
                showNotification('Error: ' + (data.message || 'Unknown error'), 'error');
            }
        } catch (error) {
            showNotification('Error: ' + error.message, 'error');
        } finally {
            button.disabled = false;
            button.innerHTML = originalText;
        }
    }

    function setupFormHandlers() {
        document.getElementById('addTargetForm').addEventListener('submit', async function (e) {
            e.preventDefault();

            const button = this.querySelector('button[type="submit"]');
            const originalText = button.innerHTML;

            button.disabled = true;
            button.classList.add('loading');
            button.innerHTML = '<span class="btn-text">Adding...</span>';

            const formData = new FormData(this);
            const target = formData.get('target');

            if (!target.trim()) {
                restoreButton(button, originalText);
                showNotification('Please enter a target', 'error');
                return;
            }

            try {
                const response = await fetch('/add-target', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: `target=${encodeURIComponent(target)}`
                });

                const data = await response.json();

                if (data.success) {
                    showNotification(data.message, 'success');
                    document.getElementById('target').value = '';
                } else {
                    showNotification('Error: ' + (data.message || 'Unknown error'), 'error');
                }
            } catch (error) {
                showNotification('Error: ' + error.message, 'error');
            } finally {
                restoreButton(button, originalText);
            }
        });

        document.getElementById('addSubnetForm').addEventListener('submit', async function (e) {
            e.preventDefault();

            const button = this.querySelector('button[type="submit"]');
            const originalText = button.innerHTML;

            const formData = new FormData(this);
            const subnet = formData.get('subnet');

            if (!subnet.trim()) {
                showNotification('Please enter a subnet', 'error');
                return;
            }

            if (!confirm('This will temporarily pause all tasks to scan the new subnet. Continue?')) {
                return;
            }

            button.disabled = true;
            button.classList.add('loading');
            button.innerHTML = '<span class="btn-text">Launching...</span>';

            try {
                const response = await fetch('/add-subnet', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: `subnet=${encodeURIComponent(subnet)}`
                });

                const data = await response.json();

                if (data.success) {
                    showNotification(data.message, 'success');
                    document.getElementById('subnet').value = '';

                    if (data.masscan_task_id) {
                        window.open(`/task/${data.masscan_task_id}`, '_blank');
                    } else {
                        showNotification('Masscan task started - check queue for details', 'info');
                    }
                } else {
                    showNotification('Error: ' + (data.message || 'Unknown error'), 'error');
                }
            } catch (error) {
                showNotification('Error: ' + error.message, 'error');
            } finally {
                restoreButton(button, originalText);
            }
        });

    }

    function setupNucleiModal() {
        const overlay = document.getElementById('nucleiModalOverlay');
        const form = document.getElementById('nucleiBulkForm');
        if (!overlay || !form) return;

        const openBtn = document.getElementById('openNucleiModalBtn');
        const closeBtn = document.getElementById('closeNucleiModalBtn');
        const cancelBtn = document.getElementById('cancelNucleiModalBtn');
        const runBtn = document.getElementById('runNucleiBtn');
        const previewPanel = document.getElementById('nucleiPreviewPanel');

        const includeTagsInput = document.getElementById('nucleiIncludeTags');
        const excludeTagsInput = document.getElementById('nucleiExcludeTags');
        const includeSelected = document.getElementById('nucleiIncludeSelected');
        const excludeSelected = document.getElementById('nucleiExcludeSelected');
        const includeIpsInput = document.getElementById('nucleiIncludeIps');
        const excludeIpsInput = document.getElementById('nucleiExcludeIps');

        const includeTags = new Set();
        const excludeTags = new Set();

        let previewToken = 0;
        let debounceTimer = null;

        function openModal() {
            overlay.style.display = 'flex';
            refreshPreview();
        }

        function closeModal() {
            overlay.style.display = 'none';
        }

        openBtn.addEventListener('click', openModal);
        closeBtn.addEventListener('click', closeModal);
        cancelBtn.addEventListener('click', closeModal);
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) closeModal();
        });

        function renderSelected(container, tags, listClass) {
            container.innerHTML = '';
            if (tags.size === 0) {
                const placeholder = document.createElement('span');
                placeholder.className = 'tag-filter-empty';
                placeholder.textContent = listClass === 'include' ? 'any host' : 'none';
                container.appendChild(placeholder);
                return;
            }

            [...tags].sort().forEach(tag => {
                const pill = document.createElement('span');
                pill.className = `tag-filter-pill ${listClass}`;
                pill.dataset.tag = tag;

                const label = document.createElement('span');
                label.textContent = tag;
                pill.appendChild(label);

                const removeBtn = document.createElement('button');
                removeBtn.type = 'button';
                removeBtn.className = 'remove-tag-btn';
                removeBtn.title = 'Remove';
                removeBtn.textContent = '×';
                removeBtn.addEventListener('click', () => {
                    tags.delete(tag);
                    syncAndRender();
                });
                pill.appendChild(removeBtn);

                container.appendChild(pill);
            });
        }

        function updateChipStates() {
            form.querySelectorAll('.tag-filter-chip').forEach(chip => {
                const tag = chip.dataset.tag;
                chip.querySelector('.include-btn').classList.toggle('active', includeTags.has(tag));
                chip.querySelector('.exclude-btn').classList.toggle('active', excludeTags.has(tag));
            });
        }

        function syncAndRender() {
            includeTagsInput.value = [...includeTags].join(',');
            excludeTagsInput.value = [...excludeTags].join(',');
            renderSelected(includeSelected, includeTags, 'include');
            renderSelected(excludeSelected, excludeTags, 'exclude');
            updateChipStates();
            scheduleRefreshPreview();
        }

        form.querySelectorAll('.tag-filter-chip').forEach(chip => {
            const tag = chip.dataset.tag;

            chip.querySelector('.include-btn').addEventListener('click', () => {
                if (includeTags.has(tag)) {
                    includeTags.delete(tag);
                } else {
                    includeTags.add(tag);
                    excludeTags.delete(tag);
                }
                syncAndRender();
            });

            chip.querySelector('.exclude-btn').addEventListener('click', () => {
                if (excludeTags.has(tag)) {
                    excludeTags.delete(tag);
                } else {
                    excludeTags.add(tag);
                    includeTags.delete(tag);
                }
                syncAndRender();
            });
        });

        [includeIpsInput, excludeIpsInput].forEach(input => {
            input.addEventListener('input', scheduleRefreshPreview);
        });

        function scheduleRefreshPreview() {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(refreshPreview, 350);
        }

        async function refreshPreview() {
            const token = ++previewToken;
            runBtn.disabled = true;

            const params = new URLSearchParams({
                include_tags: includeTagsInput.value,
                exclude_tags: excludeTagsInput.value,
                include_ips: includeIpsInput.value,
                exclude_ips: excludeIpsInput.value,
            });

            let preview;
            try {
                const response = await fetch(`/api/nuclei-bulk-preview?${params.toString()}`);
                preview = await response.json();
            } catch (error) {
                if (token !== previewToken) return;
                previewPanel.innerHTML = `<div class="preview-error">Error: ${error.message}</div>`;
                return;
            }

            if (token !== previewToken) return;

            if (!preview.success) {
                previewPanel.innerHTML = `<div class="preview-error">${preview.message || 'Invalid filter'}</div>`;
                return;
            }

            const includeTagSummary = preview.include_tags.length > 0 ? preview.include_tags.join(', ') : 'any';
            const excludeTagSummary = preview.exclude_tags.length > 0 ? preview.exclude_tags.join(', ') : 'none';
            const includeIpSummary = preview.include_ips.length > 0 ? preview.include_ips.join(', ') : 'any';
            const excludeIpSummary = preview.exclude_ips.length > 0 ? preview.exclude_ips.join(', ') : 'none';

            previewPanel.innerHTML = `
                <div class="preview-counts">${preview.service_count} HTTP service(s) across ${preview.host_count} host(s)</div>
                <div class="preview-line">Include tags: ${includeTagSummary}</div>
                <div class="preview-line">Exclude tags: ${excludeTagSummary}</div>
                <div class="preview-line">Include IPs: ${includeIpSummary}</div>
                <div class="preview-line">Exclude IPs: ${excludeIpSummary}</div>
            `;

            runBtn.disabled = preview.host_count === 0;
        }

        form.addEventListener('submit', async function (e) {
            e.preventDefault();

            const originalText = runBtn.innerHTML;
            runBtn.disabled = true;
            runBtn.classList.add('loading');
            runBtn.innerHTML = '<span class="btn-text">Launching...</span>';

            try {
                const params = new URLSearchParams({
                    include_tags: includeTagsInput.value,
                    exclude_tags: excludeTagsInput.value,
                    include_ips: includeIpsInput.value,
                    exclude_ips: excludeIpsInput.value,
                });

                const response = await fetch('/run-nuclei-bulk', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: params.toString()
                });

                const data = await response.json();

                if (data.success) {
                    showNotification(data.message, 'success');
                    closeModal();
                } else {
                    showNotification('Error: ' + (data.message || 'Unknown error'), 'error');
                }
            } catch (error) {
                showNotification('Error: ' + error.message, 'error');
            } finally {
                restoreButton(runBtn, originalText);
            }
        });

        syncAndRender();
    }

    function setupDiscoveryTools() {
        document.getElementById('launchArpScan').addEventListener('click', async function () {
            await launchDiscoveryTool('arp-scan', 'ARP Scan', this);
        });

        document.getElementById('launchDnsSearch').addEventListener('click', async function () {
            const originalText = this.innerHTML;

            this.disabled = true;
            this.innerHTML = '<span class="btn-text">Searching...</span>';

            try {
                const response = await fetch('/launch-discovery-tool', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: 'tool=dns-search'
                });

                const data = await response.json();

                if (data.success) {
                    if (data.discovery_results) {
                        // Show discovery results modal
                        window.discoveryModal.showDiscoveryResults(data.discovery_results, 'dns-search');
                        showNotification('DNS Search completed successfully', 'success');
                    } else {
                        showNotification('DNS Search completed but no results found', 'info');
                    }
                } else {
                    showNotification('Error: ' + (data.message || 'Unknown error'), 'error');
                }
            } catch (error) {
                showNotification('Error: ' + error.message, 'error');
            } finally {
                this.disabled = false;
                this.innerHTML = originalText;
            }
        });

        document.getElementById('launchInterfaceExplorer').addEventListener('click', async function () {
            const originalText = this.innerHTML;

            this.disabled = true;
            this.innerHTML = '<span class="btn-text">Exploring...</span>';

            try {
                const response = await fetch('/launch-discovery-tool', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: 'tool=interface-explorer'
                });

                const data = await response.json();

                if (data.success) {
                    if (data.discovery_results) {
                        // Show discovery results modal
                        window.discoveryModal.showDiscoveryResults(data.discovery_results, 'interface-explorer');
                        showNotification('Interface exploration completed successfully', 'success');
                    } else {
                        showNotification('Interface exploration completed but no results found', 'info');
                    }
                } else {
                    showNotification('Error: ' + (data.message || 'Unknown error'), 'error');
                }
            } catch (error) {
                showNotification('Error: ' + error.message, 'error');
            } finally {
                this.disabled = false;
                this.innerHTML = originalText;
            }
        });

        document.getElementById('launchPassiveListener').addEventListener('click', async function () {
            if (!confirm('Passive listener will run indefinitely until manually stopped. Continue?')) {
                return;
            }
            await launchDiscoveryTool('passive-listener', 'Passive Listener', this);
        });
    }

    async function launchDiscoveryTool(toolType, toolName, button) {
        const originalText = button.innerHTML;

        button.disabled = true;
        button.classList.add('loading');
        button.innerHTML = `<span class="btn-text">Launching...</span>`;

        try {
            const response = await fetch('/launch-discovery-tool', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: `tool=${encodeURIComponent(toolType)}`
            });

            const data = await response.json();

            if (data.success) {
                showNotification(`${toolName} launched successfully`, 'success');

                if (data.task_id) {
                    window.open(`/task/${data.task_id}`, '_blank');
                }

                button.innerHTML = `<span class="btn-text">Launched!</span>`;
                setTimeout(() => {
                    restoreButton(button, originalText);
                }, 2000);
            } else {
                showNotification('Error: ' + (data.message || 'Unknown error'), 'error');
                restoreButton(button, originalText);
            }
        } catch (error) {
            showNotification('Error: ' + error.message, 'error');
            restoreButton(button, originalText);
        }
    }

    function restoreButton(button, originalText) {
        button.disabled = false;
        button.classList.remove('loading');
        button.innerHTML = originalText;
    }

    function showNotification(message, type) {
        if (window.ROFMAD && window.ROFMAD.showNotification) {
            window.ROFMAD.showNotification(message, type);
        } else {
            alert(message);
        }
    }
</script>
{% endblock %}