{% extends "base.html" %}

{% block content %}
<!-- ── Sidebar ── -->
<aside class="sidebar" id="sidebar">
    <div class="sidebar-brand">
        <span class="brand-icon">⚡</span>
        <span class="brand-text">VexRay</span>
    </div>
    <nav class="sidebar-nav">
        <div class="nav-label">ON THIS PAGE</div>
        {% for section in topic.sections %}
        <a class="nav-link toc-sidebar-link" href="#{{ section.id }}">
            {{ section.heading }}
        </a>
        {% endfor %}
    </nav>
    <div class="sidebar-footer">
        <div class="theme-toggle" id="themeToggle" onclick="toggleTheme()">
            <span class="theme-toggle-icon" id="themeIcon">🌙</span>
            <span class="theme-toggle-label" id="themeLabel">Dark Mode</span>
        </div>
        <span class="version-badge">v0.1.0</span>
    </div>
</aside>

<!-- ── Main Content ── -->
<main class="main-content">
    <!-- Hero -->
    <header class="hero">
        <div class="hero-glow"></div>
        <div class="hero-content">
            <span class="hero-icon">{{ topic.icon }}</span>
            <h1 class="hero-title">{{ topic.title }}</h1>
            <p class="hero-subtitle">{{ topic.subtitle }}</p>
        </div>
    </header>

    <!-- Sections -->
    <div class="sections-container">
        {% for section in topic.sections %}
        <section class="section-card" id="{{ section.id }}">
            <div class="section-number">{{ "%02d"|format(loop.index) }}</div>
            <h2 class="section-heading">{{ section.heading }}</h2>

            {% if section.type == "text" %}
            <div class="section-text">{{ section.content | safe }}</div>

            {% elif section.type == "math" %}
            {% for item in section.content %}
            <div class="math-block">
                <div class="math-label">{{ item.label }}</div>
                <div class="math-formula">$$ {{ item.formula }} $$</div>
                <div class="math-explanation">{{ item.explanation }}</div>
            </div>
            {% endfor %}

            {% elif section.type == "graph" %}
            {% if section.description %}
            <p class="section-description">{{ section.description | safe }}</p>
            {% endif %}
            <div class="graph-container" id="graph-{{ section.id }}"></div>
            <script>
                (function () {
                    var spec = {{ section.graph_json | safe
                }};
                Plotly.newPlot('graph-{{ section.id }}', spec.data, spec.layout, { responsive: true });
                }) ();
            </script>

            {% elif section.type == "code" %}
            <div class="code-block-wrapper">
                <div class="code-header">
                    <span class="code-lang">{{ section.language | upper }}</span>
                    <button class="copy-btn" onclick="copyCode(this)">Copy</button>
                </div>
                <pre><code class="{{ section.language }}">{{ section.content }}</code></pre>
            </div>

            {% elif section.type == "list" %}
            <div class="info-list">
                {% for item in section['entries'] %}
                <div class="info-item">
                    <div class="info-item-title">
                        <span class="info-bullet"></span>
                        {{ item.title }}
                    </div>
                    <div class="info-item-detail">{{ item.detail }}</div>
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </section>
        {% endfor %}
    </div>

    <!-- Footer -->
    <footer class="footer">
        <p>Built with <span style="color:#FF6584">♥</span> by <strong>VexRay</strong></p>
    </footer>
</main>

<script>
    function copyCode(btn) {
        const code = btn.closest('.code-block-wrapper').querySelector('code').textContent;
        navigator.clipboard.writeText(code).then(() => {
            btn.textContent = 'Copied!';
            btn.classList.add('copied');
            setTimeout(() => {
                btn.textContent = 'Copy';
                btn.classList.remove('copied');
            }, 2000);
        });
    }

    // Theme switching
    function getTheme() {
        return localStorage.getItem('vexray-theme') || 'dark';
    }

    function applyTheme(theme) {
        document.documentElement.setAttribute('data-theme', theme);
        const icon = document.getElementById('themeIcon');
        const label = document.getElementById('themeLabel');
        if (icon) icon.textContent = theme === 'dark' ? '🌙' : '☀️';
        if (label) label.textContent = theme === 'dark' ? 'Dark Mode' : 'Light Mode';

        // Re-render Plotly graphs with matching template
        const plotlyTemplate = theme === 'dark' ? 'plotly_dark' : 'plotly_white';
        const bgColor = 'rgba(0,0,0,0)';
        document.querySelectorAll('.graph-container').forEach(container => {
            if (container.data) {
                Plotly.relayout(container, {
                    'template': plotlyTemplate,
                    'paper_bgcolor': bgColor,
                    'plot_bgcolor': bgColor,
                    'xaxis.gridcolor': theme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)',
                    'yaxis.gridcolor': theme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)',
                    'font.color': theme === 'dark' ? '#e0e0e0' : '#333'
                });
            }
        });

        // Swap highlight.js theme
        const hlLink = document.getElementById('hljs-theme');
        if (hlLink) {
            hlLink.href = theme === 'dark'
                ? 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css'
                : 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-light.min.css';
        }
    }

    function toggleTheme() {
        const current = getTheme();
        const next = current === 'dark' ? 'light' : 'dark';
        localStorage.setItem('vexray-theme', next);
        applyTheme(next);
    }

    // Apply saved theme on load
    applyTheme(getTheme());
</script>
{% endblock %}