{% extends "base.html" %}
{% block title %}{{ meta.name }} — codebase analysis | Verifii{% endblock %}
{% block og_title %}{{ meta.name }} — AI codebase analysis{% endblock %}
{% block meta_description %}Verifii uses AI to scan and understand {{ meta.name }} — traceable documentation with architecture, security observations, and spec vs reality. Every finding linked to a specific file and line.{% endblock %}
{% block og_description %}AI scans {{ meta.name }} and produces traceable documentation — architecture, security observations, spec vs reality. Every finding sourced to a file and line.{% endblock %}
{% block content %}

<div class="hub-header">
  <h1>{{ meta.name }}</h1>
  <p class="hub-meta">
    {{ meta.file_count }} files &middot;
    {{ meta.claim_count }} findings &middot;
    analysed {{ analysed_ago }}
  </p>
</div>

{# ── Query — hero position ──────────────────────────────────────────────── #}
<div class="query-section query-section--hero">
  <div class="query-hero-label">Ask anything about this codebase</div>
  <p class="muted" style="margin:0 0 0.75rem;">Every answer is grounded in the extracted findings and cites file and line.</p>

  <div class="query-examples">
    <span class="query-eg-label">e.g.</span>
    {% if meta.name and 'joda' in meta.name.lower() %}
    <button type="button" class="query-eg" onclick="fillQuestion(this)">How does currency mismatch get handled?</button>
    <button type="button" class="query-eg" onclick="fillQuestion(this)">What happens with NaN in Money.of(double)?</button>
    {% elif meta.name and 'request' in meta.name.lower() %}
    <button type="button" class="query-eg" onclick="fillQuestion(this)">How does session authentication work?</button>
    <button type="button" class="query-eg" onclick="fillQuestion(this)">How are redirects followed and what are the limits?</button>
    {% else %}
    <button type="button" class="query-eg" onclick="fillQuestion(this)">How is authentication implemented?</button>
    <button type="button" class="query-eg" onclick="fillQuestion(this)">Where is the main entry point and what does it do?</button>
    <button type="button" class="query-eg" onclick="fillQuestion(this)">What are the key data models?</button>
    {% endif %}
  </div>

  <form id="query-form">
    <div class="query-input-row">
      <input type="text" id="question-input" placeholder="Ask anything about this codebase…" style="background:var(--white);">
      <button type="submit" id="ask-btn">Ask</button>
    </div>
  </form>

  <div id="answer"></div>
</div>

<hr>

{# ── SECTION 1: Role Agents ─────────────────────────────────────────────── #}
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;">
  <div class="section-label" style="margin-bottom:0;">Agent views — choose your perspective</div>
  {% set any_unready = namespace(value=false) %}
  {% for role_key, status in role_cache.items() %}
    {% if not status.ready %}{% set any_unready.value = true %}{% endif %}
  {% endfor %}
  {% if any_unready.value %}
  <button id="gen-all-btn" class="btn-secondary"
          style="font-size:0.78rem;padding:0.3rem 0.85rem;"
          onclick="generateAll()">⚡ Generate all views</button>
  {% endif %}
</div>
<div class="roles-list">

  {% for role_key, role_def in roles.items() %}
  {% set rs = role_cache.get(role_key, {}) %}
  <div class="role-row" id="row-{{ role_key }}" style="--role-color:{{ role_def.color }};">
    <a href="/projects/{{ slug }}/roles/{{ role_key }}"
       style="display:contents;text-decoration:none;color:inherit;">
      <span class="role-row-icon" style="color:{{ role_def.color }}">{{ role_def.icon }}</span>
      <span class="role-row-body">
        <span class="role-row-title">{{ role_def.label }}</span>
        <span class="role-row-desc">{{ role_def.description }}</span>
      </span>
    </a>
    <span class="role-row-status" id="status-{{ role_key }}">
      {% if rs.ready %}
      <span class="role-dot role-dot-ready"></span>
      <span class="role-status-label">Ready</span>
      {% elif rs.generating %}
      <span class="role-dot" style="background:#f59e0b;animation:pulse 1.2s ease-in-out infinite;"></span>
      <span class="role-status-label">Generating…</span>
      {% else %}
      <span class="role-dot role-dot-new"></span>
      <button class="role-gen-btn btn-secondary"
              style="font-size:0.75rem;padding:0.2rem 0.65rem;margin-left:0.4rem;"
              onclick="generateRole('{{ role_key }}', this)">Generate</button>
      {% endif %}
    </span>
    <a href="/projects/{{ slug }}/roles/{{ role_key }}"
       style="text-decoration:none;">
      <span class="role-row-arrow" style="color:{{ role_def.color }}">&rarr;</span>
    </a>
  </div>
  {% endfor %}

</div>

<style>
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.role-row { cursor:default; }
.role-row a[style*="display:contents"] { display:contents; }
</style>

<script>
(function(){
  var slug = "{{ slug }}";

  function generateRole(role, btn) {
    if (btn) {
      btn.disabled = true;
      btn.textContent = "⚙ Queued";
    }
    var statusEl = document.getElementById("status-" + role);
    if (statusEl) {
      statusEl.innerHTML =
        '<span class="role-dot" style="background:#f59e0b;animation:pulse 1.2s ease-in-out infinite;"></span>' +
        '<span class="role-status-label">Generating…</span>';
    }
    fetch("/projects/" + slug + "/roles/" + role + "/generate", {
      method: "POST",
      redirect: "manual"
    }).catch(function(){});
    startPolling();
  }

  function generateAll() {
    var btn = document.getElementById("gen-all-btn");
    if (btn) { btn.disabled = true; btn.textContent = "⚙ Generating all…"; }
    var rows = document.querySelectorAll(".role-gen-btn");
    rows.forEach(function(b) { generateRole(b.closest("[id^='row-']").id.replace("row-", ""), b); });
  }

  window.generateAll = generateAll;
  window.generateRole = generateRole;

  // ── Polling ───────────────────────────────────────────────────────
  var pollTimer = null;

  function startPolling() {
    if (pollTimer) return;
    pollTimer = setInterval(poll, 6000);
  }

  function poll() {
    fetch("/api/projects/" + slug + "/roles/status")
      .then(function(r){ return r.json(); })
      .then(function(data){
        var anyGenerating = false;
        Object.keys(data).forEach(function(role) {
          var s = data[role];
          var statusEl = document.getElementById("status-" + role);
          if (!statusEl) return;
          if (s.ready) {
            statusEl.innerHTML =
              '<span class="role-dot role-dot-ready"></span>' +
              '<span class="role-status-label">Ready</span>';
          } else if (s.generating) {
            anyGenerating = true;
            statusEl.innerHTML =
              '<span class="role-dot" style="background:#f59e0b;animation:pulse 1.2s ease-in-out infinite;"></span>' +
              '<span class="role-status-label">Generating…</span>';
          }
        });
        if (!anyGenerating) {
          clearInterval(pollTimer);
          pollTimer = null;
          // Hide generate-all btn if all ready
          var allReady = Object.values(data).every(function(s){ return s.ready; });
          if (allReady) {
            var b = document.getElementById("gen-all-btn");
            if (b) b.style.display = "none";
          }
        }
      })
      .catch(function(){});
  }

  // Auto-start polling if anything is currently generating
  {% set any_generating = namespace(value=false) %}
  {% for role_key, status in role_cache.items() %}
    {% if status.generating %}{% set any_generating.value = true %}{% endif %}
  {% endfor %}
  {% if any_generating.value %}
  startPolling();
  {% endif %}
})();
</script>

<hr style="margin:1.75rem 0;">

{# ── SECTION 2: Existing docs & tools ─────────────────────────────────── #}
<div class="section-label">Documentation &amp; tools</div>
<div class="eng-grid">

  {% for view in lens_views %}{% if view.group in ("executive", "engineering") %}
  <a href="/projects/{{ slug }}/docs/{{ view.slug }}/" class="doc-card" style="--card-color:{{ view.color }};text-decoration:none;">
    <div class="doc-card-icon">{{ view.icon }}</div>
    <div class="doc-title">{{ view.label }}</div>
    <div class="doc-desc">{{ view.desc }}</div>
    <div class="doc-arrow">&rarr;</div>
  </a>
  {% endif %}{% endfor %}

  {% for view in lens_views %}{% if view.group == "fullsite" %}
  <a href="/projects/{{ slug }}/docs/" class="doc-card" style="--card-color:#94a3b8;text-decoration:none;">
    <div class="doc-card-icon">{{ view.icon }}</div>
    <div class="doc-title">{{ view.label }}</div>
    <div class="doc-desc">{{ view.desc }}</div>
    <div class="doc-arrow">&rarr;</div>
  </a>
  {% endif %}{% endfor %}

</div>

<hr>

{# ── Intent document ──────────────────────────────────────────────────────── #}
<div class="intent-section">
  <div class="intent-section-hd">
    <div>
      <h2 style="margin:0 0 0.25rem">Intent document</h2>
      <p class="muted" style="margin:0;font-size:0.875rem">
        {% if spec_source_exists %}
        <span class="intent-badge-set">● Custom spec set</span> — Spec vs Reality compares against your document.
        {% else %}
        <span class="intent-badge-auto">● Auto-detected</span> — using the project README. Paste your PRD or spec to override.
        {% endif %}
      </p>
    </div>
    {% if spec_source_exists %}
    <form method="post" action="/projects/{{ slug }}/spec-source/delete">
      <button type="submit" class="btn-muted" style="font-size:0.8rem">Remove &amp; revert to README</button>
    </form>
    {% endif %}
  </div>

  {% if spec_source_exists %}
  <div class="intent-preview">{{ spec_source_preview }}</div>
  {% endif %}

  <details {% if not spec_source_exists %}open{% endif %} class="intent-details">
    <summary>{% if spec_source_exists %}Replace spec document{% else %}Set spec document{% endif %}</summary>
    <form method="post" action="/projects/{{ slug }}/spec-source"
          enctype="multipart/form-data" style="margin-top:0.9rem">
      <div style="margin-bottom:0.75rem">
        <label class="intent-label">Paste your spec, PRD, or requirements</label>
        <textarea name="spec_text" rows="8"
          placeholder="Paste your product spec, PRD, or requirements document here. Plain text or Markdown."></textarea>
      </div>
      <div style="margin-bottom:0.9rem">
        <label class="intent-label">Or upload a file <span class="muted">(.md .txt .rst)</span></label>
        <input type="file" name="spec_file" accept=".md,.txt,.rst,.markdown"
               style="font-size:0.875rem;margin-top:0.35rem;display:block">
      </div>
      <button type="submit">Save &amp; regenerate Spec vs Reality</button>
    </form>
  </details>
</div>

<script>
(function() {
  var slug = "{{ slug }}";
  var form = document.getElementById("query-form");
  var input = document.getElementById("question-input");
  var btn = document.getElementById("ask-btn");
  var answer = document.getElementById("answer");

  window.fillQuestion = function(el) {
    input.value = el.textContent;
    input.focus();
  };

  // Linkify file.ext:N-M citations (bare or parenthesised) to source viewer
  var CITE_RE = /([a-zA-Z][a-zA-Z0-9_\/.-]*\.(?:py|java|js|ts|jsx|tsx|mjs|cjs|rb|go|rs|cpp|hpp|h|c|kt|swift|cs|scala)):(?:L?(\d+))(?:-L?(\d+))?(?=[^0-9a-zA-Z_]|$)/gi;
  function linkifyCitations(text) {
    // Escape HTML entities first (prevent XSS)
    var div = document.createElement("div");
    div.appendChild(document.createTextNode(text));
    var escaped = div.innerHTML;
    // Replace citations with links
    return escaped.replace(CITE_RE, function(match, file, start, end) {
      var url = "/projects/" + slug + "/source/" + file + "?line=" + start;
      var label = file + ":" + start + (end ? "-" + end : "");
      return "<a href=\"" + url + "\" class=\"cite-link\">" + label + "</a>";
    });
  }

  form.addEventListener("submit", function(e) {
    e.preventDefault();
    var question = input.value.trim();
    if (!question) return;

    btn.disabled = true;
    btn.textContent = "Investigating…";
    answer.innerHTML = '<p class="muted" style="font-style:italic;font-size:0.875rem;">🔍 Agent investigating — tracing evidence across claims and source files…</p>';

    fetch("/api/projects/" + slug + "/query", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ question: question })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
      answer.innerHTML = "";

      // Agent steps trace
      if (data.steps && data.steps.length) {
        var trace = document.createElement("div");
        trace.style.cssText = "font-size:0.75rem;color:var(--muted);margin-bottom:0.75rem;padding:0.5rem 0.75rem;background:var(--surface);border-radius:4px;border-left:2px solid var(--border);";
        trace.innerHTML = "<span style='font-weight:600;color:var(--accent);'>Agent trace</span> &nbsp;·&nbsp; " +
          data.steps.map(function(s) {
            return "<code style='font-size:0.72rem;'>" + s + "</code>";
          }).join(" → ") +
          " &nbsp;·&nbsp; " + data.iterations + " step" + (data.iterations === 1 ? "" : "s");
        answer.appendChild(trace);
      }

      if (data.answer) {
        var p = document.createElement("p");
        p.className = "query-answer";
        p.innerHTML = linkifyCitations(data.answer);
        answer.appendChild(p);
      }

      if (data.citations && data.citations.length) {
        var ul = document.createElement("ul");
        ul.className = "query-citations";
        data.citations.forEach(function(c) {
          var li = document.createElement("li");
          li.innerHTML = "<code>" + c + "</code>";
          ul.appendChild(li);
        });
        answer.appendChild(ul);
      }
    })
    .catch(function() {
      answer.innerHTML = '<p class="muted">Request failed. Try again.</p>';
    })
    .finally(function() {
      btn.disabled = false;
      btn.textContent = "Ask";
    });
  });
})();
</script>

{% endblock %}