{% set active_page = "blast_radius" %}
{% extends "base.html" %}
{% block title %}Blast Radius{% endblock %}
{% block content %}
<div class="page-header animate-in">
    <div class="page-title">Blast Radius</div>
    <div class="page-subtitle">Visualize the impact of changing a symbol</div>
</div>

<div class="flex gap-3 mb-8 animate-in delay-1" style="position:relative;z-index:10">
    <select name="repo" id="blast-repo" style="min-width:160px">
        <option value="">All repos</option>
        {% for r in repos %}
        <option value="{{ r }}">{{ r }}</option>
        {% endfor %}
    </select>
    <div class="autocomplete-wrap flex-1" style="position:relative">
        <input type="text" id="symbol-search-input" class="input w-full mono" placeholder="Search or paste a symbol ID..."
            hx-get="/htmx/symbol-search"
            hx-trigger="keyup changed delay:300ms"
            hx-target="#autocomplete-list"
            hx-swap="innerHTML"
            hx-include="#blast-repo"
            name="q"
            autocomplete="off"
            style="font-size:13px">
        <div id="autocomplete-list" class="autocomplete-list" style="display:none"></div>
    </div>
    <select id="blast-depth" style="min-width:100px">
        <option value="1">Depth 1</option>
        <option value="2" selected>Depth 2</option>
        <option value="3">Depth 3</option>
    </select>
    <button onclick="runBlastRadius()" style="
        background:var(--accent);color:#000;border:none;border-radius:8px;
        padding:10px 20px;font:600 13px/1 'JetBrains Mono',monospace;
        cursor:pointer;white-space:nowrap;
    ">Analyze</button>
</div>

<div id="blast-result" class="animate-in delay-2" style="position:relative;z-index:1">
    <div class="empty-state">
        <div style="font-size:28px;margin-bottom:12px;opacity:0.3">&#9678;</div>
        Search for a symbol, then click Analyze to see its blast radius
    </div>
</div>

<script>
    var acList = document.getElementById('autocomplete-list');
    var searchInput = document.getElementById('symbol-search-input');

    searchInput.addEventListener('input', function() {
        acList.style.display = this.value.length >= 2 ? 'block' : 'none';
    });

    document.addEventListener('mousedown', function(e) {
        if (!e.target.closest('.autocomplete-wrap')) {
            acList.style.display = 'none';
        }
    });

    function selectSymbol(symbolId) {
        searchInput.value = symbolId;
        acList.style.display = 'none';
        runBlastRadius();
    }

    function runBlastRadius() {
        var symbolId = searchInput.value.trim();
        var depth = document.getElementById('blast-depth').value;
        if (!symbolId) return;
        htmx.ajax('GET', '/htmx/blast-radius?symbol_id=' + encodeURIComponent(symbolId) + '&depth=' + depth, '#blast-result');
    }

    document.body.addEventListener('htmx:afterSwap', function(e) {
        if (e.detail.target.id === 'blast-result') {
            var el = document.querySelector('#blast-result .mermaid');
            if (el) {
                el.removeAttribute('data-processed');
                mermaid.run({nodes: [el]});
            }
        }
    });
</script>
{% endblock %}