{% extends "base.html" %}
{% block title %}Playground — LynxManager{% endblock %}

{% block content %}

<div class="flex items-baseline justify-between mb-4">
  <h1 class="text-2xl font-bold text-slate-900">Search playground</h1>
  <div class="text-sm text-slate-500">
    Try the same tools your AI client uses via MCP.
  </div>
</div>

{% if not sources_meta %}
  <div class="p-6 bg-white border border-dashed border-slate-300 rounded text-slate-500 text-sm">
    No sources available. Add one in the
    <a href="/config" class="text-indigo-600 hover:underline">Config editor</a>
    or run <code class="bg-slate-100 px-1 rounded">lynx manager init</code>.
  </div>
{% else %}

<!-- Shared source selector — hx-include="#pg-source" pulls this into every form -->
<div class="mb-4 flex items-center gap-3">
  <label for="pg-source" class="text-sm font-medium text-slate-700">Source:</label>
  <select id="pg-source" name="source"
          class="px-3 py-1.5 border border-slate-300 rounded text-sm bg-white
                 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500">
    {% for s in sources_meta %}
      <option value="{{ s.name }}"
              data-type="{{ s.type }}"
              data-graph="{{ 'true' if s.graph else 'false' }}">
        {{ s.name }} ({{ s.type }}{% if s.graph %}, +graph{% endif %})
      </option>
    {% endfor %}
  </select>
  <div id="source-hint" class="text-xs text-slate-500"></div>
</div>

<!-- Tabs -->
<div class="border-b border-slate-200 mb-4">
  <nav class="flex gap-1" id="pg-tabs">
    <button type="button" class="pg-tab-btn px-4 py-2 text-sm font-medium border-b-2"
            data-tab="search">Search</button>
    <button type="button" class="pg-tab-btn px-4 py-2 text-sm font-medium border-b-2"
            data-tab="code">Code-aware</button>
    <button type="button" class="pg-tab-btn px-4 py-2 text-sm font-medium border-b-2"
            data-tab="graph">Graph</button>
    <button type="button" class="pg-tab-btn px-4 py-2 text-sm font-medium border-b-2"
            data-tab="diff">Diff</button>
  </nav>
</div>

<!-- ===== Search tab ===== -->
<section class="pg-panel" data-panel="search">
  <form hx-post="/api/playground/search"
        hx-include="#pg-source"
        hx-target="#search-results"
        hx-swap="innerHTML"
        class="space-y-3">
    <div class="flex gap-2 items-end">
      <div class="flex-1">
        <label class="block text-xs font-medium text-slate-600 mb-1">Query</label>
        <input name="query" required
               placeholder="e.g. 'authentication middleware' or 'parse json'"
               class="w-full px-3 py-2 border border-slate-300 rounded text-sm
                      focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500">
      </div>
      <div>
        <label class="block text-xs font-medium text-slate-600 mb-1">Mode</label>
        <select name="mode" class="px-3 py-2 border border-slate-300 rounded text-sm bg-white">
          <option value="">(default)</option>
          <option value="hybrid">hybrid</option>
          <option value="dense">dense</option>
          <option value="sparse">sparse</option>
        </select>
      </div>
      <div>
        <label class="block text-xs font-medium text-slate-600 mb-1">Top K</label>
        <input type="number" name="top_k" value="5" min="1" max="50"
               class="w-20 px-3 py-2 border border-slate-300 rounded text-sm">
      </div>
      <button type="submit"
              class="px-4 py-2 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">
        Search
      </button>
    </div>
  </form>
  <div id="search-results" class="mt-4"></div>

  <!-- deep_search: the escalation the agent reaches for when search is weak -->
  <form hx-post="/api/playground/deep_search"
        hx-include="#pg-source"
        hx-target="#deep-results"
        class="mt-6 p-4 bg-white border border-slate-200 rounded space-y-2">
    <div class="font-semibold text-slate-800 text-sm">deep_search</div>
    <div class="text-xs text-slate-500">
      One phrasing per line — 2-4 genuinely different angles, not paraphrases.
      Each is tried in order until one returns strong results.
    </div>
    <textarea name="queries" rows="3" required
              placeholder="player health system&#10;damage and healing logic&#10;HP component lifecycle"
              class="w-full px-3 py-2 border border-slate-300 rounded text-sm font-mono"></textarea>
    <div class="flex gap-2 items-end">
      <div>
        <label class="block text-xs text-slate-600 mb-1">Top K</label>
        <input type="number" name="top_k" value="5" min="1" max="50"
               class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
      </div>
      <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">Run</button>
    </div>
    <div id="deep-results" class="mt-2"></div>
  </form>
</section>

<!-- ===== Code-aware tab ===== -->
<section class="pg-panel hidden" data-panel="code">

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">

    <!-- find_definition -->
    <form hx-post="/api/playground/find_definition"
          hx-include="#pg-source"
          hx-target="#find-def-results"
          class="p-4 bg-white border border-slate-200 rounded space-y-2">
      <div class="font-semibold text-slate-800 text-sm">find_definition</div>
      <input name="symbol" required placeholder="symbol name (e.g. UserManager)"
             class="w-full px-3 py-2 border border-slate-300 rounded text-sm">
      <div class="flex gap-2 items-end">
        <div>
          <label class="block text-xs text-slate-600 mb-1">Limit</label>
          <input type="number" name="limit" value="10" min="1" max="50"
                 class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
        </div>
        <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">Run</button>
      </div>
      <div id="find-def-results" class="mt-2"></div>
    </form>

    <!-- find_usages -->
    <form hx-post="/api/playground/find_usages"
          hx-include="#pg-source"
          hx-target="#find-uses-results"
          class="p-4 bg-white border border-slate-200 rounded space-y-2">
      <div class="font-semibold text-slate-800 text-sm">find_usages</div>
      <input name="symbol" required placeholder="symbol name"
             class="w-full px-3 py-2 border border-slate-300 rounded text-sm">
      <div class="flex gap-2 items-end">
        <div>
          <label class="block text-xs text-slate-600 mb-1">Limit</label>
          <input type="number" name="limit" value="50" min="1" max="200"
                 class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
        </div>
        <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">Run</button>
      </div>
      <div id="find-uses-results" class="mt-2"></div>
    </form>

    <!-- find_tests_for -->
    <form hx-post="/api/playground/find_tests_for"
          hx-include="#pg-source"
          hx-target="#find-tests-results"
          class="p-4 bg-white border border-slate-200 rounded space-y-2">
      <div class="font-semibold text-slate-800 text-sm">find_tests_for</div>
      <input name="symbol" required placeholder="symbol name"
             class="w-full px-3 py-2 border border-slate-300 rounded text-sm">
      <input name="test_path_pattern" placeholder="optional path pattern (e.g. tests/)"
             class="w-full px-3 py-2 border border-slate-300 rounded text-sm">
      <div class="flex gap-2 items-end">
        <div>
          <label class="block text-xs text-slate-600 mb-1">Limit</label>
          <input type="number" name="limit" value="20" min="1" max="100"
                 class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
        </div>
        <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">Run</button>
      </div>
      <div id="find-tests-results" class="mt-2"></div>
    </form>

    <!-- find_similar -->
    <form hx-post="/api/playground/find_similar"
          hx-include="#pg-source"
          hx-target="#find-similar-results"
          class="p-4 bg-white border border-slate-200 rounded space-y-2">
      <div class="font-semibold text-slate-800 text-sm">find_similar</div>
      <textarea name="snippet" required rows="4" placeholder="paste a code snippet"
                class="w-full px-3 py-2 border border-slate-300 rounded text-sm font-mono"></textarea>
      <div class="flex gap-2 items-end">
        <div>
          <label class="block text-xs text-slate-600 mb-1">Top K</label>
          <input type="number" name="top_k" value="10" min="1" max="50"
                 class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
        </div>
        <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">Run</button>
      </div>
      <div id="find-similar-results" class="mt-2"></div>
    </form>

    <!-- describe_symbol -->
    <form hx-post="/api/playground/describe_symbol"
          hx-include="#pg-source"
          hx-target="#describe-results"
          class="p-4 bg-white border border-slate-200 rounded space-y-2">
      <div class="font-semibold text-slate-800 text-sm">describe_symbol</div>
      <div class="text-xs text-slate-500">Definition + callers + callees + tests, in one call.</div>
      <input name="symbol" required placeholder="symbol name"
             class="w-full px-3 py-2 border border-slate-300 rounded text-sm">
      <div class="flex gap-2 items-end flex-wrap">
        <div>
          <label class="block text-xs text-slate-600 mb-1">Callers</label>
          <input type="number" name="callers_limit" value="10" min="1" max="50"
                 class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
        </div>
        <div>
          <label class="block text-xs text-slate-600 mb-1">Callees</label>
          <input type="number" name="callees_limit" value="10" min="1" max="50"
                 class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
        </div>
        <div>
          <label class="block text-xs text-slate-600 mb-1">Tests</label>
          <input type="number" name="tests_limit" value="5" min="1" max="50"
                 class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
        </div>
        <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">Run</button>
      </div>
      <div id="describe-results" class="mt-2"></div>
    </form>

    <!-- impact -->
    <form hx-post="/api/playground/impact"
          hx-include="#pg-source"
          hx-target="#impact-results"
          class="p-4 bg-white border border-slate-200 rounded space-y-2">
      <div class="font-semibold text-slate-800 text-sm">impact</div>
      <div class="text-xs text-slate-500">Blast radius: transitive callers + the tests to re-run.</div>
      <input name="symbol" required placeholder="symbol name"
             class="w-full px-3 py-2 border border-slate-300 rounded text-sm">
      <div class="flex gap-2 items-end">
        <div>
          <label class="block text-xs text-slate-600 mb-1">Max depth</label>
          <input type="number" name="max_depth" value="3" min="1" max="6"
                 class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
        </div>
        <div>
          <label class="block text-xs text-slate-600 mb-1">Tests</label>
          <input type="number" name="tests_limit" value="10" min="1" max="50"
                 class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
        </div>
        <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">Run</button>
      </div>
      <div id="impact-results" class="mt-2"></div>
    </form>

    <!-- module_summary -->
    <form hx-post="/api/playground/module_summary"
          hx-include="#pg-source"
          hx-target="#module-results"
          class="p-4 bg-white border border-slate-200 rounded space-y-2">
      <div class="font-semibold text-slate-800 text-sm">module_summary</div>
      <div class="text-xs text-slate-500">A file as a unit: what it defines, imports, and who depends on it.</div>
      <input name="file" required placeholder="file path (or a symbol inside it)"
             class="w-full px-3 py-2 border border-slate-300 rounded text-sm">
      <div class="flex gap-2 items-end">
        <div>
          <label class="block text-xs text-slate-600 mb-1">Limit</label>
          <input type="number" name="limit" value="40" min="1" max="200"
                 class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
        </div>
        <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">Run</button>
      </div>
      <div id="module-results" class="mt-2"></div>
    </form>

    <!-- repo_overview -->
    <form hx-post="/api/playground/repo_overview"
          hx-include="#pg-source"
          hx-target="#repo-results"
          class="p-4 bg-white border border-slate-200 rounded space-y-2">
      <div class="font-semibold text-slate-800 text-sm">repo_overview</div>
      <div class="text-xs text-slate-500">
        Orientation map: languages, frameworks, entry points. No graph needed.
      </div>
      <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">Run</button>
      <div id="repo-results" class="mt-2"></div>
    </form>

  </div>
</section>

<!-- ===== Graph tab ===== -->
<section class="pg-panel hidden" data-panel="graph">

  <div class="mb-3 p-3 bg-amber-50 border border-amber-200 rounded text-xs text-amber-900">
    💡 Graph tools work only on codebase sources with
    <code class="bg-amber-100 px-1 rounded">graph.enabled = true</code> in config.
  </div>

  <!-- graph_query: one form, all ten operations. Three hand-wired panels
       used to cover callers, callees and the overview — there was no way
       to ask for subclasses, imports, a shortest path or the bridges. -->
  <form hx-post="/api/playground/graph_query"
        hx-include="#pg-source"
        hx-target="#graph-results"
        class="p-4 bg-white border border-slate-200 rounded space-y-3">
    <div class="font-semibold text-slate-800 text-sm">graph_query</div>

    <div class="flex gap-3 items-end flex-wrap">
      <div>
        <label class="block text-xs text-slate-600 mb-1">Operation</label>
        <select name="operation" id="pg-graph-op"
                class="px-3 py-2 border border-slate-300 rounded text-sm">
          <option value="callers">callers — who calls this?</option>
          <option value="callees">callees — what does it call?</option>
          <option value="subclasses">subclasses — who inherits from it?</option>
          <option value="superclasses">superclasses — what does it extend?</option>
          <option value="imports">imports — a file's import edges</option>
          <option value="neighbors">neighbors — everything around it</option>
          <option value="shortest_path">shortest_path — how does A reach B?</option>
          <option value="overview">overview — hubs and communities</option>
          <option value="surprising_connections">surprising_connections — bridge edges</option>
          <option value="status">status — node/edge counts, freshness</option>
        </select>
      </div>
      <div class="flex-1 min-w-[12rem]" data-graph-field="symbol">
        <label class="block text-xs text-slate-600 mb-1">Symbol</label>
        <input name="symbol" placeholder="identifier (fuzzy, case-insensitive)"
               class="w-full px-3 py-2 border border-slate-300 rounded text-sm">
      </div>
      <button type="submit"
              class="px-3 py-1.5 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">Run</button>
    </div>

    <div class="flex gap-3 items-end flex-wrap">
      <div data-graph-field="target" class="hidden">
        <label class="block text-xs text-slate-600 mb-1">Target</label>
        <input name="target" placeholder="destination symbol"
               class="px-3 py-2 border border-slate-300 rounded text-sm">
      </div>
      <div data-graph-field="relation" class="hidden">
        <label class="block text-xs text-slate-600 mb-1">Relation</label>
        <input name="relation" placeholder="calls, imports, inherits…"
               class="px-3 py-2 border border-slate-300 rounded text-sm">
      </div>
      <div data-graph-field="depth" class="hidden">
        <label class="block text-xs text-slate-600 mb-1">Depth</label>
        <input type="number" name="depth" value="1" min="1" max="6"
               class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
      </div>
      <div data-graph-field="max_hops" class="hidden">
        <label class="block text-xs text-slate-600 mb-1">Max hops</label>
        <input type="number" name="max_hops" value="8" min="1" max="20"
               class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
      </div>
      <div data-graph-field="top_n" class="hidden">
        <label class="block text-xs text-slate-600 mb-1">Top N</label>
        <input type="number" name="top_n" value="10" min="1" max="50"
               class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
      </div>
      <div data-graph-field="min_community_size" class="hidden">
        <label class="block text-xs text-slate-600 mb-1">Min community</label>
        <input type="number" name="min_community_size" value="3" min="2" max="20"
               class="w-24 px-3 py-1.5 border border-slate-300 rounded text-sm">
      </div>
      <div data-graph-field="limit">
        <label class="block text-xs text-slate-600 mb-1">Limit</label>
        <input type="number" name="limit" value="50" min="1" max="200"
               class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
      </div>
    </div>

    <div id="graph-results" class="mt-2"></div>
  </form>

  <!-- export_graph: the one tool that had a CLI and an MCP entry point but
       no UI — backwards, for something whose output is a web page. -->
  <form hx-post="/api/playground/export_graph"
        hx-include="#pg-source"
        hx-target="#export-results"
        class="mt-4 p-4 bg-white border border-slate-200 rounded space-y-2">
    <div class="font-semibold text-slate-800 text-sm">export_graph</div>
    <div class="text-xs text-slate-500">
      A shareable, offline graph view in one self-contained file — a symbol's
      blast radius, or a file's import hub. Attach it to a PR.
    </div>
    <div class="flex gap-3 items-end flex-wrap">
      <div>
        <label class="block text-xs text-slate-600 mb-1">Mode</label>
        <select name="mode" id="pg-export-mode"
                class="px-3 py-2 border border-slate-300 rounded text-sm">
          <option value="symbol">symbol — blast radius</option>
          <option value="module">module — file hub</option>
        </select>
      </div>
      <div class="flex-1 min-w-[12rem]">
        <label class="block text-xs text-slate-600 mb-1">Target</label>
        <input name="target" required placeholder="symbol name, or a file path"
               class="w-full px-3 py-2 border border-slate-300 rounded text-sm">
      </div>
      <div id="pg-export-depth">
        <label class="block text-xs text-slate-600 mb-1">Depth</label>
        <input type="number" name="depth" value="2" min="1" max="6"
               class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
      </div>
      <button type="submit"
              class="px-3 py-1.5 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">Export</button>
    </div>
    <div id="export-results" class="mt-2"></div>
  </form>
</section>

<!-- ===== Diff tab ===== -->
<section class="pg-panel hidden" data-panel="diff">

  <div class="mb-3 p-3 bg-amber-50 border border-amber-200 rounded text-xs text-amber-900">
    💡 Diff search works only on codebase sources with
    <code class="bg-amber-100 px-1 rounded">git_integration.enabled = true</code>.
    Restricts results to files modified vs the base ref.
  </div>

  <form hx-post="/api/playground/search_diff"
        hx-include="#pg-source"
        hx-target="#diff-results"
        class="p-4 bg-white border border-slate-200 rounded space-y-2">
    <div class="font-semibold text-slate-800 text-sm">search_diff</div>
    <input name="query" required placeholder="search query (e.g. 'token validation')"
           class="w-full px-3 py-2 border border-slate-300 rounded text-sm">
    <div class="flex gap-3 items-end">
      <div class="flex-1">
        <label class="block text-xs text-slate-600 mb-1">Base ref (optional)</label>
        <input name="base" placeholder="e.g. main, origin/main, HEAD~10"
               class="w-full px-3 py-2 border border-slate-300 rounded text-sm font-mono">
      </div>
      <div>
        <label class="block text-xs text-slate-600 mb-1">Top K</label>
        <input type="number" name="top_k" value="8" min="1" max="50"
               class="w-20 px-3 py-1.5 border border-slate-300 rounded text-sm">
      </div>
      <button type="submit" class="px-3 py-1.5 bg-indigo-600 text-white rounded text-sm hover:bg-indigo-700">Run</button>
    </div>
    <div id="diff-results" class="mt-2"></div>
  </form>

</section>

<script>
  // ----- Tab switcher (vanilla JS, no library) -----
  const tabBtns = document.querySelectorAll('.pg-tab-btn');
  const panels  = document.querySelectorAll('.pg-panel');
  function activate(tab) {
    tabBtns.forEach(b => {
      const on = b.dataset.tab === tab;
      b.className = 'pg-tab-btn px-4 py-2 text-sm font-medium border-b-2 ' +
        (on ? 'border-indigo-600 text-indigo-700'
            : 'border-transparent text-slate-500 hover:text-slate-700');
    });
    panels.forEach(p => p.classList.toggle('hidden', p.dataset.panel !== tab));
  }
  tabBtns.forEach(b => b.addEventListener('click', () => activate(b.dataset.tab)));
  activate('search');  // default

  // ----- Source hint (graph badge etc) -----
  const sel = document.getElementById('pg-source');
  const hint = document.getElementById('source-hint');
  function refreshHint() {
    const opt = sel.options[sel.selectedIndex];
    if (!opt) { hint.textContent = ''; return; }
    const bits = [];
    bits.push('type=' + opt.dataset.type);
    if (opt.dataset.graph === 'true') bits.push('graph✓');
    hint.textContent = bits.join(' · ');
  }
  sel.addEventListener('change', refreshHint);
  refreshHint();

  // ----- graph_query: show only the fields the chosen operation uses -----
  // Ten operations behind one form means most inputs are irrelevant most of
  // the time; leaving them all visible is how a form with a selector turns
  // into a wall of boxes nobody reads.
  const GRAPH_FIELDS = {
    callers:                {symbol: 1, limit: 1},
    callees:                {symbol: 1, limit: 1},
    subclasses:             {symbol: 1, limit: 1},
    superclasses:           {symbol: 1, limit: 1},
    imports:                {symbol: 1, limit: 1},
    neighbors:              {symbol: 1, limit: 1, relation: 1, depth: 1},
    shortest_path:          {symbol: 1, target: 1, max_hops: 1},
    overview:               {top_n: 1, min_community_size: 1},
    surprising_connections: {top_n: 1},
    status:                 {},
  };
  const opSel = document.getElementById('pg-graph-op');
  if (opSel) {
    const fields = document.querySelectorAll('[data-graph-field]');
    function refreshGraphFields() {
      const wanted = GRAPH_FIELDS[opSel.value] || {};
      fields.forEach(el => {
        const on = !!wanted[el.dataset.graphField];
        el.classList.toggle('hidden', !on);
        // A hidden `symbol` must not still be required, or the browser
        // refuses to submit a `status` query with an empty box it isn't
        // showing.
        el.querySelectorAll('input').forEach(i => { i.required = false; });
      });
      const sym = document.querySelector('[data-graph-field="symbol"] input');
      if (sym) sym.required = !!wanted.symbol;
      const tgt = document.querySelector('[data-graph-field="target"] input');
      if (tgt) tgt.required = !!wanted.target;
    }
    opSel.addEventListener('change', refreshGraphFields);
    refreshGraphFields();
  }

  // Depth only means something for a symbol's blast radius; a module hub
  // renders one file's edges and ignores it.
  const expMode = document.getElementById('pg-export-mode');
  const expDepth = document.getElementById('pg-export-depth');
  if (expMode && expDepth) {
    const refreshExport = () =>
      expDepth.classList.toggle('hidden', expMode.value !== 'symbol');
    expMode.addEventListener('change', refreshExport);
    refreshExport();
  }
</script>

{% endif %}
{% endblock %}