{% extends "base.html" %}

{% block content %}
<div class="row g-0 border rounded shadow-sm bg-white overflow-hidden edit-main-row">
    <!-- Right Panel: Editor -->
    <div class="col-md-8 col-lg-9 order-2 order-md-2 d-flex flex-column h-100 bg-light-subtle editor-panel">
        <div id="editor-container" class="p-0 flex-grow-1 overflow-auto">
            {% if initial_edit_html %}
                {{ initial_edit_html|safe }}
            {% else %}
            <div class="text-center py-5 mt-5">
                <div class="mb-4 text-muted opacity-25">
                    <i class="bi bi-pencil-square" style="font-size: 6rem;"></i>
                </div>
                <h4 class="text-muted fw-light">No Reference Selected</h4>
                <p class="text-muted">Search and select a tag from the sidebar to edit.</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Left Sidebar: Tag List -->
    <div class="col-md-4 col-lg-3 order-1 order-md-1 border-end d-flex flex-column h-100 tag-sidebar">
        <div class="p-3 border-bottom bg-light">
            <h6 class="mb-3 text-muted small fw-bold text-uppercase">Reference Tags</h6>
            <div class="search-wrapper">
                <input type="text" 
                       id="tag-filter" 
                       placeholder="Filter tags..." 
                       class="form-control form-control-sm border-2"
                       onkeyup="filterTags(event)"
                       autocomplete="off">
                <i class="bi bi-x-circle clear-input" onclick="clearFilter()"></i>
            </div>
            <div class="mt-2 text-muted d-none d-md-block" style="font-size: 0.7rem;">
                <i class="bi bi-keyboard me-1"></i> Use <b>↑/↓</b> to navigate, <b>Enter</b> to load.
            </div>
        </div>
        
        <div id="tag-list" class="list-group list-group-flush flex-grow-1 tag-list-container sidebar-index-list">
            {% for tag in lib.all_tags %}
            <button type="button" 
                    class="tag-item sidebar-index-item list-group-item list-group-item-action border-0 font-monospace" 
                    data-tag="{{ tag|lower }}"
                    hx-get="{{ url_for('main.edit_tag', tag=tag) }}" 
                    hx-target="#editor-container"
                    hx-trigger="click"
                    onclick="setActiveTag(this)">
                {{ tag }}
            </button>
            {% endfor %}
        </div>
    </div>
</div>

<script>
    let selectedIndex = -1;

    function filterTags(event) {
        // Handle keyboard navigation directly in the input for better flow
        if (event.key === 'ArrowDown') {
            navigateList(1);
            event.preventDefault();
            return;
        } else if (event.key === 'ArrowUp') {
            navigateList(-1);
            event.preventDefault();
            return;
        }

        const input = document.getElementById('tag-filter');
        const filter = input.value.toLowerCase();
        const items = document.querySelectorAll('.tag-item');
        
        items.forEach(item => {
            const tag = item.getAttribute('data-tag');
            if (tag.includes(filter)) {
                item.classList.remove('d-none');
            } else {
                item.classList.add('d-none');
            }
        });
        
        // Reset selection on filter change
        selectedIndex = -1;
        document.querySelectorAll('.tag-item').forEach(el => el.classList.remove('bg-primary-subtle'));
    }

    function getVisibleItems() {
        return Array.from(document.querySelectorAll('.tag-item:not(.d-none)'));
    }

    function navigateList(direction) {
        const visible = getVisibleItems();
        if (visible.length === 0) return;

        selectedIndex += direction;
        if (selectedIndex < 0) selectedIndex = visible.length - 1;
        if (selectedIndex >= visible.length) selectedIndex = 0;

        const active = visible[selectedIndex];
        active.click(); // This triggers HTMX and setActiveTag
        active.scrollIntoView({ block: 'nearest' });
    }

    // Global keyboard listener for when the input isn't focused
    window.addEventListener('keydown', (e) => {
        if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
        if (document.activeElement.id === 'tag-filter') return; // Already handled in filterTags

        e.preventDefault();
        navigateList(e.key === 'ArrowDown' ? 1 : -1);
    });

    function clearFilter() {
        const input = document.getElementById('tag-filter');
        input.value = '';
        filterTags({ key: '' });
        input.focus();
    }

    function setActiveTag(element) {
        document.querySelectorAll('.tag-item').forEach(el => el.classList.remove('active', 'fw-bold', 'bg-primary-subtle'));
        element.classList.add('active', 'fw-bold');
    }

    // Auto-scroll to initial tag if provided
    window.addEventListener('load', () => {
        const initial = "{{ initial_tag }}";
        if (initial) {
            const el = document.querySelector(`.tag-item[data-tag="${initial.toLowerCase()}"]`);
            if (el) {
                el.scrollIntoView({ block: 'center' });
                setActiveTag(el);
            }
        }
    });
</script>

<style>
    .tag-item {
        transition: background-color 0.05s ease;
        display: block;
        white-space: nowrap;
        border-bottom: 1px solid #f9f9f8;
    }
    .tag-item.active {
        background-color: var(--primary-color) !important;
        color: white !important;
    }
    .bg-primary-subtle {
        background-color: #e7f1ff !important;
    }
    #tag-list::-webkit-scrollbar {
        width: 5px;
    }
    #tag-list::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }

    /* Desktop View */
    @media (min-width: 768px) {
        .edit-main-row {
            height: calc(100vh - 120px);
            overflow: hidden;
        }
        .tag-sidebar {
            height: 100% !important;
            overflow-y: auto;
        }
        .editor-panel {
            height: 100% !important;
            overflow-y: auto;
        }
    }

    /* Mobile View */
    @media (max-width: 767.98px) {
        .edit-main-row {
            height: auto;
            overflow: visible !important;
        }
        .tag-sidebar {
            height: auto !important;
            margin-bottom: 1rem;
        }
        .tag-list-container {
            height: 12rem !important; /* Exactly 8 lines */
            max-height: 12rem !important;
            flex-grow: 0 !important;
            border-bottom: 1px solid #dee2e6;
        }
    }
</style>
{% endblock %}