{% extends "base.html" %}
{% block title %}WordForge · forge a wordlist{% endblock %}

{% block content %}
<section class="grid grid-cols-1 gap-5 lg:grid-cols-[1.5fr_1fr]">
  {# ============================================================ FORGE FORM #}
  <article class="panel-accent p-6">
    <header class="mb-5 flex items-center justify-between">
      <div>
        <p class="eyebrow">target acquisition</p>
        <h1 class="mt-1 text-lg font-semibold tracking-tight" style="color: var(--text);">
          Forge a contextual wordlist
        </h1>
      </div>
      <span class="hidden eyebrow sm:inline">passive osint · pipe-friendly</span>
    </header>

    <form id="forge-form" class="space-y-4" onsubmit="return startForge(event)">
      <label class="block">
        <span class="eyebrow">target</span>
        <input id="forge-target" type="text" name="target" required autofocus
               placeholder="example.com   ·   Acme Corp   ·   github.com/acme"
               class="input mt-1.5" />
      </label>

      <div class="flex flex-wrap items-center gap-3">
        <button id="forge-btn" type="submit" class="btn btn-primary">
          <i data-lucide="hammer" class="h-4 w-4"></i>
          <span id="forge-btn-label">Forge</span>
        </button>
        <span class="eyebrow">collect → extract → generate → mutate</span>
      </div>

      {# Live progress checklist — populated by the SSE stream #}
      <div id="forge-stages" class="hidden space-y-1 rounded-lg p-4 mono text-xs"
           style="background: var(--bg-elev-2); border: 1px solid var(--border);"></div>
    </form>
  </article>

  {# =========================================================== OPS PANEL #}
  <aside class="grid grid-cols-2 gap-3 text-sm">
    <div class="panel p-4">
      <p class="eyebrow">active provider</p>
      <p class="mt-2 mono text-base" style="color: var(--text);">{{ active_provider }}</p>
      <p class="mt-0.5 mono text-xs" style="color: var(--text-faint);">{{ models[active_provider] }}</p>
    </div>
    <div class="panel p-4">
      <p class="eyebrow">companion</p>
      <a href="https://github.com/Ataraxia-ia-labs/SubSift"
         class="mt-2 inline-flex items-center gap-1 mono text-base hover:underline" style="color: var(--ember-bright);">
        SubSift <i data-lucide="external-link" class="h-3 w-3"></i>
      </a>
      <p class="mt-0.5 text-xs" style="color: var(--text-faint);">subdomain discovery</p>
    </div>
    <div class="panel col-span-2 p-4">
      <p class="eyebrow">quickstart</p>
      <pre class="mt-2 overflow-x-auto rounded-md p-3 mono text-[11px] leading-relaxed"
           style="background: var(--bg); color: var(--text-dim);"><span style="color: var(--text-faint);"># diagnose setup</span>
wordforge doctor

<span style="color: var(--text-faint);"># forge → pipe straight into SubSift</span>
wordforge generate acme.io --format subdomains \
  | subsift scan --wordlist - acme.io</pre>
    </div>
  </aside>

  {# ======================================================= LATEST RESULT #}
  <div id="latest-result" class="lg:col-span-2"></div>

  {# ============================================================ HISTORY #}
  <section class="lg:col-span-2">
    <div id="recent-runs"
         hx-get="/api/generations/htmx"
         hx-trigger="load, generation-completed from:body"
         hx-swap="innerHTML">
      <p class="text-sm" style="color: var(--text-faint);">Loading recent runs…</p>
    </div>
  </section>
</section>

<script>
  // ===== Live SSE forge flow =========================================
  const FORGE_STAGES = ["collect", "extract", "generate", "mutate", "finalize"];
  const FORGE_LABELS = {
    collect: "Collect OSINT",
    extract: "Extract entities",
    generate: "Generate (LLM)",
    mutate: "Mutate + dedupe",
    finalize: "Finalize",
  };

  function renderForgeStages(state) {
    const box = document.getElementById("forge-stages");
    box.innerHTML = FORGE_STAGES.map((s) => {
      const st = state[s] || { status: "pending", detail: "" };
      const icon = st.status === "done" ? "✓" : st.status === "active" ? "▸" : "·";
      const color =
        st.status === "done" ? "var(--ok)" : st.status === "active" ? "var(--ember-bright)" : "var(--text-faint)";
      return `<div class="flex items-center justify-between" style="color:${color}">
        <span><span class="inline-block w-4">${icon}</span>${FORGE_LABELS[s]}</span>
        <span style="color: var(--text-faint)">${st.detail || ""}</span></div>`;
    }).join("");
  }

  let forgeSource = null;
  function startForge(event) {
    event.preventDefault();
    const target = document.getElementById("forge-target").value.trim();
    if (!target) return false;

    const btn = document.getElementById("forge-btn");
    const label = document.getElementById("forge-btn-label");
    const stagesBox = document.getElementById("forge-stages");
    const result = document.getElementById("latest-result");

    btn.disabled = true;
    label.textContent = "Forging…";
    result.innerHTML = "";
    stagesBox.classList.remove("hidden");

    const state = {};
    FORGE_STAGES.forEach((s) => (state[s] = { status: "pending", detail: "" }));
    renderForgeStages(state);

    let finished = false;
    const reset = () => { btn.disabled = false; label.textContent = "Forge"; };

    if (forgeSource) forgeSource.close();
    forgeSource = new EventSource(`/api/generate/stream?target=${encodeURIComponent(target)}`);

    forgeSource.addEventListener("progress", (ev) => {
      const d = JSON.parse(ev.data);
      if (!FORGE_STAGES.includes(d.stage)) return;
      const idx = FORGE_STAGES.indexOf(d.stage);
      FORGE_STAGES.forEach((s, i) => {
        if (i < idx && state[s].status !== "done") state[s] = { status: "done", detail: state[s].detail };
      });
      const detail = d.label ? `${d.label} · ${d.detail}` : d.detail;
      state[d.stage] = { status: d.status === "done" ? "done" : "active", detail };
      renderForgeStages(state);
    });

    forgeSource.addEventListener("complete", (ev) => {
      finished = true;
      const d = JSON.parse(ev.data);
      FORGE_STAGES.forEach((s) => (state[s] = { status: "done", detail: state[s].detail }));
      renderForgeStages(state);
      forgeSource.close();
      reset();
      setTimeout(() => stagesBox.classList.add("hidden"), 1500);
      if (d.id) {
        htmx
          .ajax("GET", `/api/generations/${d.id}/card`, { target: "#latest-result", swap: "innerHTML" })
          .then(() => htmx.trigger(document.body, "generation-completed"));
      }
    });

    forgeSource.addEventListener("error", (ev) => {
      if (finished) return;
      finished = true;
      forgeSource.close();
      reset();
      stagesBox.classList.add("hidden");
      let msg = "Connection to the stream failed.";
      try { if (ev.data) msg = JSON.parse(ev.data).message; } catch (_) {}
      result.innerHTML = `<div class="panel p-5 text-sm" style="border-color: var(--err); color: var(--err);">
        <span class="mono">forge failed</span> · ${msg}</div>`;
    });

    return false;
  }
  window.startForge = startForge;
</script>
{% endblock %}