{% extends "base.html" %}
{% block content %}
<div class="max-w-6xl mx-auto p-4 sm:p-6"
     x-data="hcHistory()"
     x-init="init()"
     @htmx:after-swap.window="recordFromResults()">
  <header class="mb-6 flex items-baseline gap-3 flex-wrap">
    <h1 class="text-3xl font-bold text-cyan-400">host-checker</h1>
    <span class="text-sm text-slate-500">v{{ version }}</span>
    <p class="text-slate-400 text-sm">— multi-source threat-intel for IPs, domains, URLs and hashes.</p>
  </header>

  <form hx-post="/check/html"
        hx-target="#results"
        hx-indicator="#spinner"
        hx-swap="innerHTML"
        class="space-y-4 mb-6 bg-slate-900/50 p-5 rounded-lg border border-slate-800">
    <div>
      <label class="block text-sm font-medium text-slate-300 mb-2">
        IOCs <span class="text-slate-500 text-xs">(comma or whitespace separated, defang OK)</span>
      </label>
      <textarea name="targets" rows="3" required
                x-ref="targets"
                x-init="$el.value = localStorage.getItem('hc:lastQuery') || ''"
                @input="localStorage.setItem('hc:lastQuery', $el.value)"
                class="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-md font-mono text-sm focus:border-cyan-500 focus:outline-none"
                placeholder="8.8.8.8, evil[.]com, hxxps://malicious[.]example/path, d41d8cd98f00b204e9800998ecf8427e"></textarea>
    </div>

    <div class="flex flex-wrap gap-4 text-sm">
      <label class="flex items-center gap-2 cursor-pointer">
        <input type="checkbox" name="auto_pivot" value="true" checked>
        <span>Auto-pivot domains &rarr; IPs</span>
      </label>
      <label class="flex items-center gap-2 cursor-pointer">
        <input type="checkbox" name="no_cache" value="true">
        <span>Bypass cache</span>
      </label>
      <label class="flex items-center gap-2 cursor-pointer" title="Passive intel sources only — never resolves or scans the IOC. Forces auto-pivot off.">
        <input type="checkbox" name="paranoid" value="true"
               x-init="document.body.classList.toggle('paranoid', $el.checked)"
               @change="document.body.classList.toggle('paranoid', $el.checked);
                        if($el.checked){ const ap = $el.closest('form').querySelector('input[name=auto_pivot]'); if(ap) ap.checked = false; }">
        <span>🛡 Paranoid (OPSEC)</span>
      </label>
    </div>

    <details class="text-sm">
      <summary class="cursor-pointer text-slate-400 hover:text-slate-200 select-none">
        Providers <span class="text-xs">({{ enabled_count }} enabled / {{ all_providers|length }} total)</span>
      </summary>
      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2 mt-3 pl-4">
        {% for p in all_providers %}
          <label class="flex items-center gap-2 {% if not p.enabled %}opacity-50{% endif %}"
                 {% if not p.enabled %}title="No API key configured"{% endif %}>
            <input type="checkbox" name="providers" value="{{ p.name }}"
                   {% if p.enabled %}checked{% else %}disabled{% endif %}>
            <span class="font-mono text-xs">{{ p.name }}</span>
          </label>
        {% endfor %}
      </div>
    </details>

    <div class="flex items-center gap-3">
      <button type="submit"
              class="px-5 py-2 bg-cyan-600 hover:bg-cyan-500 rounded-md font-medium transition-colors">
        Check
      </button>
      <span id="spinner" class="htmx-indicator text-sm text-slate-400">
        <span class="inline-block animate-spin">&#9203;</span> running&hellip;
      </span>
    </div>
  </form>

  <!-- Recent queries (stored locally in your browser, never on the server) -->
  <div x-show="history.length > 0" x-cloak class="mb-6">
    <div class="flex items-center gap-2 mb-2">
      <span class="text-xs uppercase tracking-wide text-slate-500">Recent queries</span>
      <span class="text-xs text-slate-600" x-text="`(${history.length})`"></span>
      <button type="button" @click="clearHistory()"
              class="ml-auto text-xs text-slate-500 hover:text-red-400">clear</button>
    </div>
    <div class="flex flex-col gap-1">
      <template x-for="h in history" :key="h.id">
        <button type="button" @click="rerun(h)"
                class="group flex items-center gap-3 text-left px-3 py-2 rounded-md bg-slate-900/40 hover:bg-slate-800/60 border border-slate-800 transition-colors">
          <span class="font-mono text-xs text-slate-300 truncate flex-1" x-text="h.query"></span>
          <span class="flex items-center gap-1.5 text-xs shrink-0">
            <template x-if="h.malicious">
              <span class="text-red-400" x-text="`${h.malicious}M`"></span>
            </template>
            <template x-if="h.suspicious">
              <span class="text-yellow-400" x-text="`${h.suspicious}S`"></span>
            </template>
            <template x-if="h.clean">
              <span class="text-green-400" x-text="`${h.clean}C`"></span>
            </template>
          </span>
          <span class="text-xs text-slate-600 shrink-0" x-text="timeAgo(h.at)"></span>
          <span class="text-xs text-cyan-500 opacity-0 group-hover:opacity-100 shrink-0">re-run &#8635;</span>
        </button>
      </template>
    </div>
  </div>

  <div id="results"></div>

  <footer class="mt-12 text-center text-xs text-slate-600">
    <a href="/docs" class="hover:text-slate-400">API docs</a> &middot;
    <a href="https://github.com/kukitzz/host-checker" class="hover:text-slate-400">source</a>
  </footer>
</div>

<script>
  // Query history — lives entirely in the browser's localStorage, never on
  // the server, consistent with host-checker's self-hosted / OPSEC stance.
  function hcHistory() {
    const KEY = 'hc:history';
    const MAX = 20;
    return {
      history: [],

      init() {
        try { this.history = JSON.parse(localStorage.getItem(KEY) || '[]'); }
        catch { this.history = []; }
      },

      persist() {
        try { localStorage.setItem(KEY, JSON.stringify(this.history)); }
        catch { /* quota / private mode — ignore */ }
      },

      // Called after every htmx swap into #results. Reads the rendered
      // verdict counts straight from the DOM and records the query.
      recordFromResults() {
        const cards = document.querySelectorAll('#results details[data-verdict]');
        if (cards.length === 0) return;  // error fragment or empty — skip

        const query = (this.$refs.targets?.value || '').trim();
        if (!query) return;

        let malicious = 0, suspicious = 0, clean = 0;
        for (const c of cards) {
          const v = c.dataset.verdict;
          if (v === 'malicious') malicious++;
          else if (v === 'suspicious') suspicious++;
          else if (v === 'clean') clean++;
        }

        const entry = {
          id: Date.now() + ':' + Math.random().toString(36).slice(2, 7),
          query, malicious, suspicious, clean,
          count: cards.length, at: Date.now(),
        };
        // De-dupe: drop any existing entry with the same query, then put the
        // fresh one on top. Keeps the list to one row per distinct query.
        this.history = this.history.filter(h => h.query !== query);
        this.history.unshift(entry);
        if (this.history.length > MAX) this.history.length = MAX;
        this.persist();
      },

      rerun(h) {
        const ta = this.$refs.targets;
        ta.value = h.query;
        localStorage.setItem('hc:lastQuery', h.query);
        const form = ta.closest('form');
        window.htmx.trigger(form, 'submit');
        window.scrollTo({ top: 0, behavior: 'smooth' });
      },

      clearHistory() {
        this.history = [];
        this.persist();
      },

      timeAgo(ts) {
        const s = Math.floor((Date.now() - ts) / 1000);
        if (s < 60) return 'just now';
        const m = Math.floor(s / 60);
        if (m < 60) return m + 'm ago';
        const h = Math.floor(m / 60);
        if (h < 24) return h + 'h ago';
        return Math.floor(h / 24) + 'd ago';
      },
    };
  }
</script>
{% endblock %}