{% extends "base.html" %}
{% block title %}New Scan{% endblock %}

{% block content %}
<div class="page-header">
  <div class="page-title-block">
    <h1 class="page-title glitch-text" data-text="New Scan">New Scan</h1>
    <p class="page-subtitle">Configure and start a scan</p>
  </div>
</div>

<form action="{{ url_for('scans.launch_scan') }}" method="POST" id="scan-form" class="scan-form">
  <div class="form-layout">

    <!-- Left column: main config -->
    <div class="form-main">

      <!-- Target input -->
      <div class="form-section">
        <div class="section-header">
          <span class="section-icon neon-green">◈</span>
          <span class="section-title">TARGET</span>
        </div>
        <div class="target-input-wrap">
          <div class="target-label">TARGET IDENTIFIER</div>
          <input type="text" name="target" id="target-input"
                 class="target-input"
                 placeholder="Enter a target — IP · domain · URL · email · username"
                 required autocomplete="off" spellcheck="false">
          <div id="target-type-badge" class="target-type-badge"></div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">SCAN NAME</label>
            <input type="text" name="name" class="input-field"
                   placeholder="Auto-generated if blank">
          </div>
          <div class="form-group">
            <label class="form-label">TAGS</label>
            <input type="text" name="tags" class="input-field"
                   placeholder="client, bug-bounty, research...">
          </div>
        </div>
      </div>

      <!-- Scan profile selector -->
      <div class="form-section">
        <div class="section-header">
          <span class="section-icon neon-cyan">◉</span>
          <span class="section-title">SCAN PROFILE</span>
        </div>
        <div class="profile-grid">
          <label class="profile-card">
            <input type="radio" name="profile" value="quick" class="profile-radio">
            <div class="profile-content">
              <div class="profile-icon">⚡</div>
              <div class="profile-name">QUICK</div>
              <div class="profile-desc">Fast surface scan. DNS, top ports, tech stack.</div>
              <div class="profile-time">~30s</div>
            </div>
          </label>
          <label class="profile-card selected">
            <input type="radio" name="profile" value="standard" checked class="profile-radio">
            <div class="profile-content">
              <div class="profile-icon">◈</div>
              <div class="profile-name">STANDARD</div>
              <div class="profile-desc">Balanced depth. All modules, moderate crawl.</div>
              <div class="profile-time">~2-5min</div>
            </div>
          </label>
          <label class="profile-card">
            <input type="radio" name="profile" value="deep" class="profile-radio">
            <div class="profile-content">
              <div class="profile-icon">⬡</div>
              <div class="profile-name">DEEP</div>
              <div class="profile-desc">Thorough crawl, full port scan, all intel APIs.</div>
              <div class="profile-time">~10-30min</div>
            </div>
          </label>
          <label class="profile-card ghost-card">
            <input type="radio" name="profile" value="covert" class="profile-radio">
            <div class="profile-content">
              <div class="profile-icon">🕶</div>
              <div class="profile-name">COVERT</div>
              <div class="profile-desc">Low and slow — request throttling, identity rotation, minimal footprint.</div>
              <div class="profile-time">Variable</div>
            </div>
          </label>
        </div>
      </div>

      <!-- Module selection -->
      <div class="form-section">
        <div class="section-header">
          <span class="section-icon neon-purple">◫</span>
          <span class="section-title">MODULES</span>
          <button type="button" class="section-toggle" onclick="toggleAll()">TOGGLE ALL</button>
        </div>
        <div class="module-grid">
          <label class="module-toggle active">
            <input type="checkbox" name="modules" value="dns_recon" checked class="module-check">
            <div class="module-card">
              <div class="module-icon">🌐</div>
              <div class="module-name">DNS RECON</div>
              <div class="module-desc">Records, subdomains, zone transfer, SPF/DMARC</div>
            </div>
          </label>
          <label class="module-toggle">
            <input type="checkbox" name="modules" value="subdomain_enum" class="module-check">
            <div class="module-card">
              <div class="module-icon">🛰</div>
              <div class="module-name">SUBDOMAIN ENUM</div>
              <div class="module-desc">Passive multi-source, permutations, wildcard filtering</div>
            </div>
          </label>
          <label class="module-toggle">
            <input type="checkbox" name="modules" value="takeover" class="module-check">
            <div class="module-card">
              <div class="module-icon">⌖</div>
              <div class="module-name">TAKEOVER DETECT</div>
              <div class="module-desc">Dangling CNAME → unclaimed-service fingerprinting</div>
            </div>
          </label>
          <label class="module-toggle active">
            <input type="checkbox" name="modules" value="port_scan" checked class="module-check">
            <div class="module-card">
              <div class="module-icon">🔌</div>
              <div class="module-name">PORT SCANNER</div>
              <div class="module-desc">Async TCP scan with banner grabbing</div>
            </div>
          </label>
          <label class="module-toggle active">
            <input type="checkbox" name="modules" value="tech_detect" checked class="module-check">
            <div class="module-card">
              <div class="module-icon">🔬</div>
              <div class="module-name">TECH DETECTOR</div>
              <div class="module-desc">Framework, CMS, CDN, WAF, security headers</div>
            </div>
          </label>
          <label class="module-toggle active">
            <input type="checkbox" name="modules" value="api_hunt" checked class="module-check">
            <div class="module-card">
              <div class="module-icon">🎯</div>
              <div class="module-name">API HUNTER</div>
              <div class="module-desc">Endpoints, GraphQL, swagger, admin panels</div>
            </div>
          </label>
          <label class="module-toggle">
            <input type="checkbox" name="modules" value="js_mine" class="module-check">
            <div class="module-card">
              <div class="module-icon">⟨/⟩</div>
              <div class="module-name">JS MINER</div>
              <div class="module-desc">Script secrets, cloud keys, hidden API endpoints</div>
            </div>
          </label>
          <label class="module-toggle">
            <input type="checkbox" name="modules" value="archive_mine" class="module-check">
            <div class="module-card">
              <div class="module-icon">⟲</div>
              <div class="module-name">ARCHIVE MINER</div>
              <div class="module-desc">Wayback/OTX/URLScan historical URLs & sensitive files</div>
            </div>
          </label>
          <label class="module-toggle">
            <input type="checkbox" name="modules" value="infra_pivot" class="module-check">
            <div class="module-card">
              <div class="module-icon">◎</div>
              <div class="module-name">INFRA PIVOT</div>
              <div class="module-desc">Favicon hash + TLS cert + JARM fingerprint → sibling infra</div>
            </div>
          </label>
          <label class="module-toggle">
            <input type="checkbox" name="modules" value="service_enum" class="module-check">
            <div class="module-card">
              <div class="module-icon">⌗</div>
              <div class="module-name">SERVICE ENUM</div>
              <div class="module-desc">SMTP user/relay + SNMP community enumeration (active)</div>
            </div>
          </label>
          <label class="module-toggle">
            <input type="checkbox" name="modules" value="doc_metadata" class="module-check">
            <div class="module-card">
              <div class="module-icon">◈</div>
              <div class="module-name">DOC METADATA</div>
              <div class="module-desc">Public docs → authors, software, internal paths, EXIF geo</div>
            </div>
          </label>
          <label class="module-toggle">
            <input type="checkbox" name="modules" value="username_enum" class="module-check">
            <div class="module-card">
              <div class="module-icon">◈</div>
              <div class="module-name">USERNAME ENUM</div>
              <div class="module-desc">Handle presence across ~700 sites (keyless, WhatsMyName)</div>
            </div>
          </label>
          <label class="module-toggle">
            <input type="checkbox" name="modules" value="profile_pivot" class="module-check">
            <div class="module-card">
              <div class="module-icon">◈</div>
              <div class="module-name">PROFILE PIVOT</div>
              <div class="module-desc">Parse a handle's profiles → linked handles, emails, domains</div>
            </div>
          </label>
          <label class="module-toggle">
            <input type="checkbox" name="modules" value="darkweb" class="module-check">
            <div class="module-card">
              <div class="module-icon">⌗</div>
              <div class="module-name">DARK WEB</div>
              <div class="module-desc">Ransomware leak-site exposure tracking (keyless)</div>
            </div>
          </label>
          <label class="module-toggle">
            <input type="checkbox" name="modules" value="email_oracle" class="module-check">
            <div class="module-card">
              <div class="module-icon">◈</div>
              <div class="module-name">EMAIL ORACLE</div>
              <div class="module-desc">Email → registered accounts + Gravatar profile (keyless)</div>
            </div>
          </label>
          <label class="module-toggle">
            <input type="checkbox" name="modules" value="web_crawl" class="module-check">
            <div class="module-card">
              <div class="module-icon">🕷</div>
              <div class="module-name">WEB CRAWLER</div>
              <div class="module-desc">Links, forms, emails, JS, comments</div>
            </div>
          </label>
          <label class="module-toggle active">
            <input type="checkbox" name="modules" value="intel" checked class="module-check">
            <div class="module-card">
              <div class="module-icon">📡</div>
              <div class="module-name">INTEL APIS</div>
              <div class="module-desc">Shodan, VirusTotal, AbuseIPDB & more</div>
            </div>
          </label>
        </div>
      </div>

      <!-- Scan type -->
      <div class="form-section">
        <div class="section-header">
          <span class="section-icon neon-orange">⚙</span>
          <span class="section-title">SCAN TYPE</span>
        </div>
        <div class="select-group">
          <select name="scan_type" class="input-field select-field">
            <option value="web_recon">Web — domain / URL</option>
            <option value="ip_recon">IP — single IP address</option>
            <option value="domain_recon">Domain — full domain analysis</option>
            <option value="people_intel">People — identity search</option>
            <option value="full_spectrum">Full — all modules</option>
          </select>
        </div>
      </div>

    </div>

    <!-- Right column: advanced options -->
    <div class="form-sidebar">

      <!-- Advanced options -->
      <div class="form-section">
        <div class="section-header">
          <span class="section-icon neon-green">⚙</span>
          <span class="section-title">ADVANCED OPTIONS</span>
        </div>
        <div class="advanced-options">
          <div class="form-group">
            <label class="form-label">CRAWL DEPTH</label>
            <div class="range-wrap">
              <input type="range" name="depth" min="1" max="5" value="2"
                     class="range-input" oninput="document.getElementById('depth-val').textContent=this.value">
              <span id="depth-val" class="range-val">2</span>
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">PORT PROFILE</label>
            <select name="port_profile" class="input-field select-field">
              <option value="common">Common (67 ports)</option>
              <option value="top1000">Top 1000</option>
              <option value="full">Full range (65535)</option>
            </select>
          </div>
          <div class="toggle-row">
            <label class="toggle-label">
              <input type="checkbox" name="respect_robots" class="toggle-check" checked>
              <span class="toggle-switch"></span>
              <span class="toggle-text">RESPECT ROBOTS.TXT</span>
            </label>
          </div>
          <div class="toggle-row">
            <label class="toggle-label">
              <input type="checkbox" name="evasive" class="toggle-check">
              <span class="toggle-switch"></span>
              <span class="toggle-text">EVASIVE (low & slow)</span>
            </label>
          </div>
        </div>
      </div>

      <!-- Attack-surface pipeline (Phase 1) -->
      <div class="form-section">
        <div class="section-header">
          <span class="section-icon neon-purple">🕸</span>
          <span class="section-title">ATTACK-SURFACE PIPELINE</span>
        </div>
        <div class="advanced-options">
          <div class="toggle-row">
            <label class="toggle-label">
              <input type="checkbox" name="recursive" id="recursive-check" class="toggle-check">
              <span class="toggle-switch"></span>
              <span class="toggle-text">RECURSIVE PIVOT</span>
            </label>
          </div>
          <p class="option-hint">Auto-expand: feed discovered IPs, subdomains &amp; emails back in as new targets.</p>

          <div id="pivot-suboptions" style="display:none;">
            <div class="form-group">
              <label class="form-label">PIVOT DEPTH</label>
              <div class="range-wrap">
                <input type="range" name="max_depth" min="1" max="4" value="2"
                       class="range-input" oninput="document.getElementById('pivot-depth-val').textContent=this.value">
                <span id="pivot-depth-val" class="range-val">2</span>
              </div>
            </div>
            <div class="toggle-row">
              <label class="toggle-label">
                <input type="checkbox" name="allow_cross_domain" class="toggle-check">
                <span class="toggle-switch"></span>
                <span class="toggle-text">FOLLOW CROSS-DOMAIN</span>
              </label>
            </div>
            <p class="option-hint">Off by default — expansion stays within the target's registered domain.</p>
          </div>

          <div class="toggle-row">
            <label class="toggle-label">
              <input type="checkbox" name="signatures" class="toggle-check">
              <span class="toggle-switch"></span>
              <span class="toggle-text">SIGNATURE ENGINE</span>
            </label>
          </div>
          <p class="option-hint">Run Nuclei-style exposure signatures + GHDB dork templates over the findings.</p>
        </div>
      </div>

      <!-- Active APIs for this scan -->
      <div class="form-section">
        <div class="section-header">
          <span class="section-icon neon-cyan">◉</span>
          <span class="section-title">DATA SOURCES</span>
        </div>
        <div class="api-list-compact">
          {% for api in api_status %}
          <div class="api-row {% if api.is_configured %}configured{% else %}unconfigured{% endif %}">
            <span class="api-status-dot"></span>
            <span class="api-row-name">{{ api.name }}</span>
            <span class="api-tier tier-{{ api.tier }}">{{ api.tier }}</span>
            {% if not api.is_configured %}
              <a href="{{ url_for('settings.settings_page') }}" class="api-setup-link">SETUP</a>
            {% endif %}
          </div>
          {% endfor %}
        </div>
      </div>

      <!-- Disclaimer -->
      <div class="disclaimer-box">
        <div class="disclaimer-icon">⚠</div>
        <p>Only scan targets you have <strong>explicit authorization</strong> to test. You assume all legal responsibility.</p>
      </div>

      <!-- Launch button -->
      <button type="submit" class="btn btn-launch btn-glow" id="launch-btn">
        <span class="launch-icon">◈</span>
        <span class="launch-text">Start Scan</span>
        <span class="launch-loading" style="display:none">Starting...</span>
      </button>

    </div>
  </div>
</form>
{% endblock %}

{% block scripts %}
<script>
const targetInput = document.getElementById('target-input');
const badge = document.getElementById('target-type-badge');

targetInput.addEventListener('input', function() {
  const val = this.value.trim();
  if (/^\d{1,3}(\.\d{1,3}){3}$/.test(val)) {
    badge.textContent = '● IP ADDRESS';
    badge.className = 'target-type-badge type-ip';
  } else if (/@/.test(val)) {
    badge.textContent = '● EMAIL ADDRESS';
    badge.className = 'target-type-badge type-email';
  } else if (/^https?:\/\//.test(val)) {
    badge.textContent = '● URL';
    badge.className = 'target-type-badge type-url';
  } else if (/^[\w\-]+\.[\w\-]+/.test(val)) {
    badge.textContent = '● DOMAIN';
    badge.className = 'target-type-badge type-domain';
  } else if (val.length > 2) {
    badge.textContent = '● USERNAME / KEYWORD';
    badge.className = 'target-type-badge type-user';
  } else {
    badge.textContent = '';
    badge.className = 'target-type-badge';
  }
});

// Profile card selection
document.querySelectorAll('.profile-radio').forEach(radio => {
  radio.addEventListener('change', function() {
    document.querySelectorAll('.profile-card').forEach(c => c.classList.remove('selected'));
    this.closest('.profile-card').classList.add('selected');
  });
});

// Module toggle styling
document.querySelectorAll('.module-check').forEach(cb => {
  cb.addEventListener('change', function() {
    const label = this.closest('.module-toggle');
    label.classList.toggle('active', this.checked);
  });
});

function toggleAll() {
  const checkboxes = document.querySelectorAll('.module-check');
  const allChecked = [...checkboxes].every(c => c.checked);
  checkboxes.forEach(c => {
    c.checked = !allChecked;
    c.closest('.module-toggle').classList.toggle('active', !allChecked);
  });
}

// Reveal pivot sub-options only when recursive pivot is enabled
document.getElementById('recursive-check').addEventListener('change', function() {
  document.getElementById('pivot-suboptions').style.display = this.checked ? 'block' : 'none';
});

document.getElementById('scan-form').addEventListener('submit', function() {
  const btn = document.getElementById('launch-btn');
  btn.querySelector('.launch-text').style.display = 'none';
  btn.querySelector('.launch-loading').style.display = 'inline';
  btn.disabled = true;
  btn.classList.add('loading');
});
</script>
<style>
.option-hint { font-size: 0.68rem; color: var(--text-dim, #6b7688); margin: 0.15rem 0 0.6rem 0; line-height: 1.35; }
.section-icon.neon-purple { color: #b026ff; }
#pivot-suboptions { border-left: 2px solid rgba(176,38,255,0.35); padding-left: 0.7rem; margin: 0.2rem 0 0.6rem 0; }
</style>
{% endblock %}