{% extends "base.html" %}

{% block content %}
<div class="row g-0 border rounded shadow-sm bg-white author-main-row">
    <!-- Right Panel: Bibliography -->
    <div class="col-md-8 col-lg-9 order-2 order-md-2 d-flex flex-column bg-light-subtle bibliography-panel p-4">
        {% if author_results_header_html %}
            {{ author_results_header_html|safe }}
        {% else %}
        <div id="author-results-header"></div>
        {% endif %}
        <div id="author-results" class="flex-grow-1">
            {% if author_results_html %}
                {{ author_results_html|safe }}
            {% else %}
            <div class="text-center py-5 mt-5">
                <div class="mb-4 text-muted opacity-25">
                    <i class="bi bi-people" style="font-size: 6rem;"></i>
                </div>
                <h4 class="text-muted fw-light">Select an Author</h4>
                <p class="text-muted">Search and select an author from the sidebar to view their papers.</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Left Sidebar: Author List -->
    <div class="col-md-4 col-lg-3 order-1 order-md-1 border-end d-flex flex-column h-100 author-sidebar">
        <div class="p-3 border-bottom bg-light">
            <h6 class="mb-3 text-muted small fw-bold text-uppercase">Author Index</h6>
            <div class="search-wrapper">
                <input type="text" 
                       id="author-filter" 
                       placeholder="Filter authors..." 
                       class="form-control form-control-sm border-2"
                       onkeyup="filterAuthors(event)"
                       autocomplete="off">
                <i class="bi bi-x-circle clear-input" onclick="clearAuthorFilter()"></i>
            </div>
        </div>
        
        <div id="author-list" class="list-group list-group-flush flex-grow-1 author-list-container sidebar-index-list">
            {% for author, count in authors %}
            <button type="button" 
                    class="author-item sidebar-index-item list-group-item list-group-item-action border-0 d-flex justify-content-between align-items-center" 
                    data-author="{{ author|lower }}"
                    hx-get="{{ url_for('main.author_search', author=author) }}" 
                    hx-target="#author-results"
                    hx-trigger="click"
                    onclick="setActiveAuthor(this)">
                <span class="sidebar-index-label me-2">{{ author }}</span>
                <span class="badge bg-light text-muted border">{{ count }}</span>
            </button>
            {% endfor %}
        </div>
    </div>
</div>

<script>
    function filterAuthors(event) {
        const input = document.getElementById('author-filter');
        const filter = input.value.toLowerCase();
        const items = document.querySelectorAll('.author-item');
        
        items.forEach(item => {
            const author = item.getAttribute('data-author');
            if (author.includes(filter)) {
                item.classList.remove('d-none');
            } else {
                item.classList.add('d-none');
            }
        });
    }

    function clearAuthorFilter() {
        const input = document.getElementById('author-filter');
        input.value = '';
        filterAuthors();
        input.focus();
    }

    function setActiveAuthor(element) {
        document.querySelectorAll('.author-item').forEach(el => el.classList.remove('active', 'fw-bold'));
        element.classList.add('active', 'fw-bold');
    }

    function exportAuthorToQuery(author) {
        const query = `q top 100 select year, * ! /${author}/ order by -year`;
        window.location.href = `{{ url_for('main.index') }}?q=${encodeURIComponent(query)}`;
    }

    // Keyboard Navigation
    window.addEventListener('keydown', (e) => {
        if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
        
        const active = document.querySelector('.author-item.active');
        const visibleItems = Array.from(document.querySelectorAll('.author-item:not(.d-none)'));
        if (visibleItems.length === 0) return;

        let next;
        if (!active) {
            next = visibleItems[0];
        } else {
            const index = visibleItems.indexOf(active);
            if (e.key === 'ArrowDown') {
                next = visibleItems[index + 1] || visibleItems[0];
            } else {
                next = visibleItems[index - 1] || visibleItems[visibleItems.length - 1];
            }
        }

        if (next) {
            e.preventDefault();
            next.click();
            // Optional: only scroll if it's not visible
            next.scrollIntoView({ behavior: 'instant', block: 'nearest' });
        }
    });

    // Auto-select author if passed in URL
    window.addEventListener('load', () => {
        const selectedAuthor = {{ selected_author|tojson }};
        if (selectedAuthor) {
            const items = document.querySelectorAll('.author-item');
            for (const item of items) {
                if (item.querySelector('span').innerText.trim() === selectedAuthor) {
                    setActiveAuthor(item);
                    item.scrollIntoView({ behavior: 'instant', block: 'center' });
                    break;
                }
            }
        }
    });
</script>

<style>
    /* Independent scrolling for split-pane layout */
    @media (min-width: 768px) {
        .author-main-row {
            height: calc(100vh - 120px);
            overflow: hidden;
        }
        .author-sidebar {
            height: 100% !important;
            overflow: hidden;
        }
        .author-list-container {
            overflow-y: auto;
            flex-grow: 1;
        }
        .bibliography-panel {
            height: 100% !important;
            overflow-y: auto;
        }
    }

    .author-item { transition: background-color 0.05s ease; }
    .author-item.active { background-color: var(--primary-color) !important; color: white !important; }
    .author-item.active .badge { background-color: rgba(255,255,255,0.2) !important; color: white !important; border: none !important; }

    /* Mobile View */
    @media (max-width: 767.98px) {
        .author-main-row { height: auto; overflow: visible; }
        .author-list-container { max-height: 15rem; overflow-y: auto; border-bottom: 1px solid #dee2e6; }
    }
</style>
{% endblock %}