{% extends "base.html" %}
{% set active_page = "graph" %}

{% block title %}FaultRay - Dependency Graph{% endblock %}
{% block page_title %}Dependency Graph{% endblock %}
{% block page_subtitle %}<span class="page-subtitle">Interactive infrastructure topology</span>{% endblock %}

{% block head %}
<script src="https://d3js.org/d3.v7.min.js"></script>
{% endblock %}

{% block top_actions %}
<div class="graph-controls">
    <button class="btn btn-xs btn-outline" onclick="resetZoom()" title="Reset zoom" aria-label="Reset graph zoom">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M3.5 3.5L8 8m0 0V3.5M8 8H3.5"/>
            <path d="M20.5 20.5L16 16m0 0v4.5M16 16h4.5"/>
            <path d="M20.5 3.5L16 8m0 0V3.5M16 8h4.5"/>
            <path d="M3.5 20.5L8 16m0 0v4.5M8 16H3.5"/>
        </svg>
        Reset
    </button>
    <button class="btn btn-xs btn-outline" onclick="zoomIn()" title="Zoom in" aria-label="Zoom in on graph">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
            <line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/>
        </svg>
    </button>
    <button class="btn btn-xs btn-outline" onclick="zoomOut()" title="Zoom out" aria-label="Zoom out on graph">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
            <line x1="8" y1="11" x2="14" y2="11"/>
        </svg>
    </button>
</div>
{% endblock %}

{% block content %}
<div class="graph-container">
    <div class="graph-toolbar">
        <div class="graph-legend">
            <span class="legend-title">Component Types:</span>
            <span class="legend-item"><span class="legend-dot" style="background:#e94560;"></span>Load Balancer</span>
            <span class="legend-item"><span class="legend-dot" style="background:#6c5ce7;"></span>App Server</span>
            <span class="legend-item"><span class="legend-dot" style="background:#00b894;"></span>Database</span>
            <span class="legend-item"><span class="legend-dot" style="background:#fdcb6e;"></span>Cache</span>
            <span class="legend-item"><span class="legend-dot" style="background:#0984e3;"></span>Queue</span>
            <span class="legend-item"><span class="legend-dot" style="background:#a0a0a0;"></span>Other</span>
        </div>
        <div class="graph-edge-legend">
            <span class="legend-title">Dependencies:</span>
            <span class="legend-item"><span class="legend-line legend-solid"></span>Required</span>
            <span class="legend-item"><span class="legend-line legend-dashed"></span>Optional</span>
            <span class="legend-item"><span class="legend-line legend-dotted"></span>Async</span>
        </div>
        <div class="graph-health-legend">
            <span class="legend-title">Health (ring):</span>
            <span class="legend-item"><span class="legend-ring" style="border-color:#00b894;"></span>Healthy</span>
            <span class="legend-item"><span class="legend-ring" style="border-color:#f0a500;"></span>Degraded</span>
            <span class="legend-item"><span class="legend-ring" style="border-color:#e94560;"></span>Down</span>
        </div>
    </div>
    <div id="graphCanvas" class="graph-canvas" role="img" aria-label="Infrastructure dependency graph visualization"></div>
    <div id="nodeTooltip" class="node-tooltip" style="display:none;"></div>
</div>

<script src="/static/graph.js"></script>
<script>
/* Zoom control functions exposed globally */
var _graphZoom = null;
var _graphSvg = null;

function resetZoom() {
    if (_graphSvg && _graphZoom) {
        _graphSvg.transition().duration(300).call(_graphZoom.transform, d3.zoomIdentity);
    }
}
function zoomIn() {
    if (_graphSvg && _graphZoom) {
        _graphSvg.transition().duration(200).call(_graphZoom.scaleBy, 1.3);
    }
}
function zoomOut() {
    if (_graphSvg && _graphZoom) {
        _graphSvg.transition().duration(200).call(_graphZoom.scaleBy, 0.7);
    }
}
</script>
{% endblock %}