{% extends "base.html" %}
{% block title %}Diagrams - ICDEV™ Dashboard{% endblock %}
{% block content %}
<div class="page-header">
    <h1>System Diagrams</h1>
    <p class="subtitle">Interactive workflow and architecture diagrams</p>
</div>

<!-- Tab Navigation -->
<div class="diagram-tabs" role="tablist" aria-label="Diagram sections">
    <button class="diagram-tab active" data-tab="tab-catalog" role="tab" aria-selected="true"
            aria-controls="tab-catalog" id="btn-catalog">Catalog</button>
    <button class="diagram-tab" data-tab="tab-editor" role="tab" aria-selected="false"
            aria-controls="tab-editor" id="btn-editor">Editor</button>
</div>

<!-- ── Catalog Tab ────────────────────────────────────────────── -->
<div id="tab-catalog" class="diagram-tab-content active" role="tabpanel" aria-labelledby="btn-catalog">

    <!-- Filter bar -->
    <div class="mermaid-toolbar">
        <label for="cat-filter">Category:</label>
        <select id="cat-filter" aria-label="Filter by category">
            <option value="">All</option>
            <option value="workflows">Workflows</option>
            <option value="compliance">Compliance</option>
            <option value="security">Security</option>
            <option value="architecture">Architecture</option>
        </select>
    </div>

    <!-- Card grid -->
    <div id="diagram-catalog" class="mermaid-catalog" aria-label="Diagram catalog"></div>

    <!-- Viewer panel (hidden until a card is clicked) -->
    <div id="diagram-viewer-panel" class="mermaid-viewer" aria-live="polite">
        <div class="mermaid-viewer-header">
            <h3 id="viewer-title">Diagram</h3>
            <div>
                <button onclick="ICDEV.exportMermaidSVG('diagram-viewer','icdev-diagram.svg')"
                        title="Download as SVG">Export SVG</button>
                <button onclick="loadIntoEditor()" title="Edit this diagram in the editor">Edit</button>
                <button onclick="closeViewer()" title="Close viewer">Close</button>
            </div>
        </div>
        <div id="diagram-viewer" class="mermaid-container" role="img" aria-label="Rendered diagram"></div>
    </div>
</div>

<!-- ── Editor Tab ─────────────────────────────────────────────── -->
<div id="tab-editor" class="diagram-tab-content" role="tabpanel" aria-labelledby="btn-editor">
    <div class="mermaid-toolbar">
        <label for="diagram-template">Template:</label>
        <select id="diagram-template" aria-label="Load a template diagram">
            <option value="">-- Select template --</option>
        </select>
        <button onclick="ICDEV.exportMermaidSVG('mermaid-preview','icdev-diagram.svg')"
                title="Download preview as SVG">Export SVG</button>
    </div>
    <div class="mermaid-editor">
        <div>
            <textarea id="mermaid-source" rows="22" spellcheck="false"
                      placeholder="flowchart LR&#10;  A[Start] --> B[End]"
                      aria-label="Mermaid diagram source code"></textarea>
        </div>
        <div>
            <div id="mermaid-preview" class="mermaid-preview" role="img"
                 aria-label="Live diagram preview">
                <p style="color:var(--text-muted)">Type Mermaid syntax to see a preview</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    'use strict';

    // ── State ──────────────────────────────────────────────────────
    var _allDiagrams = [];
    var _currentMermaid = '';

    // ── Tab switching ──────────────────────────────────────────────
    document.querySelectorAll('.diagram-tab').forEach(function (btn) {
        btn.addEventListener('click', function () {
            document.querySelectorAll('.diagram-tab').forEach(function (b) {
                b.classList.remove('active');
                b.setAttribute('aria-selected', 'false');
            });
            document.querySelectorAll('.diagram-tab-content').forEach(function (c) {
                c.classList.remove('active');
            });
            btn.classList.add('active');
            btn.setAttribute('aria-selected', 'true');
            document.getElementById(btn.getAttribute('data-tab')).classList.add('active');
        });
    });

    // ── Load catalog ───────────────────────────────────────────────
    function loadCatalog(category) {
        var url = '/api/diagrams/';
        var params = [];
        var role = new URLSearchParams(window.location.search).get('role');
        if (role) params.push('role=' + encodeURIComponent(role));
        if (category) params.push('category=' + encodeURIComponent(category));
        if (params.length) url += '?' + params.join('&');

        fetch(url)
            .then(function (r) { return r.json(); })
            .then(function (data) {
                _allDiagrams = data.diagrams || [];
                renderCatalog(_allDiagrams);
                populateTemplateSelect(_allDiagrams);
            })
            .catch(function (err) {
                console.error('[Diagrams] Failed to load catalog:', err);
            });
    }

    function renderCatalog(diagrams) {
        var container = document.getElementById('diagram-catalog');
        container.innerHTML = '';
        if (diagrams.length === 0) {
            container.innerHTML = '<p style="color:var(--text-muted)">No diagrams found.</p>';
            return;
        }
        diagrams.forEach(function (d) {
            var card = document.createElement('div');
            card.className = 'mermaid-card';
            card.setAttribute('tabindex', '0');
            card.setAttribute('role', 'button');
            card.setAttribute('aria-label', 'View ' + d.title);
            card.innerHTML = '<h3>' + esc(d.title) + '</h3>'
                + '<p>' + esc(d.description) + '</p>'
                + '<span class="card-category">' + esc(d.category) + '</span>';
            card.addEventListener('click', function () { openViewer(d.id, d.title); });
            card.addEventListener('keydown', function (e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    openViewer(d.id, d.title);
                }
            });
            container.appendChild(card);
        });
    }

    function populateTemplateSelect(diagrams) {
        var sel = document.getElementById('diagram-template');
        // Keep the first "-- Select --" option, clear the rest
        while (sel.options.length > 1) sel.remove(1);
        diagrams.forEach(function (d) {
            var opt = document.createElement('option');
            opt.value = d.id;
            opt.textContent = d.title;
            sel.appendChild(opt);
        });
    }

    // ── Viewer ─────────────────────────────────────────────────────
    function openViewer(diagramId, title) {
        fetch('/api/diagrams/' + encodeURIComponent(diagramId))
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (data.error) return;
                _currentMermaid = data.mermaid;
                document.getElementById('viewer-title').textContent = data.title;
                var panel = document.getElementById('diagram-viewer-panel');
                panel.classList.add('active');
                ICDEV.renderMermaid('diagram-viewer', data.mermaid);
                panel.scrollIntoView({ behavior: 'smooth', block: 'start' });
            });
    }

    window.closeViewer = function () {
        document.getElementById('diagram-viewer-panel').classList.remove('active');
    };

    window.loadIntoEditor = function () {
        // Switch to editor tab and populate textarea
        document.querySelector('[data-tab="tab-editor"]').click();
        var textarea = document.getElementById('mermaid-source');
        textarea.value = _currentMermaid;
        ICDEV.renderMermaid('mermaid-preview', _currentMermaid);
    };

    // ── Category filter ────────────────────────────────────────────
    document.getElementById('cat-filter').addEventListener('change', function () {
        loadCatalog(this.value || null);
    });

    // ── Template selector ──────────────────────────────────────────
    document.getElementById('diagram-template').addEventListener('change', function () {
        var id = this.value;
        if (!id) return;
        fetch('/api/diagrams/' + encodeURIComponent(id))
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (data.error) return;
                var textarea = document.getElementById('mermaid-source');
                textarea.value = data.mermaid;
                ICDEV.renderMermaid('mermaid-preview', data.mermaid);
            });
    });

    // ── Editor init ────────────────────────────────────────────────
    if (ICDEV.initMermaidEditor) {
        ICDEV.initMermaidEditor('mermaid-source', 'mermaid-preview');
    }

    // ── Escape helper ──────────────────────────────────────────────
    function esc(str) {
        var div = document.createElement('div');
        div.appendChild(document.createTextNode(str));
        return div.innerHTML;
    }

    // ── Init ───────────────────────────────────────────────────────
    loadCatalog(null);

});
</script>
{% endblock %}