{% extends "base.html" %}

{% block layout_body %}
    <a href="#main-content" class="skip-link">Skip to content</a>
    <div class="drawer min-[750px]:drawer-open">
        <input id="nav-drawer" type="checkbox" class="drawer-toggle" />

        <div class="drawer-content flex flex-col">
            <!-- Navbar -->
            <div class="navbar bg-base-200 min-[750px]:hidden">
                <div class="flex-none">
                    <label for="nav-drawer" class="btn btn-square btn-ghost drawer-button">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </label>
                </div>
                {% if site.search_enabled %}
                <div class="flex-1 px-4">
                    {% include "components/search.html" %}
                </div>
                {% else %}
                <div class="flex-1">
                    <span class="text-lg font-semibold">{{ site.title or 'Documentation' }}</span>
                </div>
                {% endif %}
                <div class="flex-none">
                    {% include "components/theme_toggle.html" %}
                </div>
            </div>

            <!-- Main content area -->
            <div class="flex flex-1 lg:min-h-screen">
                <main id="main-content" class="flex-1 min-w-0 p-4 lg:py-6 lg:{{ site.main_content_padding }}">
                    <div class="max-w-4xl">
                        {% block content %}{% endblock %}
                        {% block footer %}
                        {% if site.build_info %}
                        {% include "components/footer.html" %}
                        {% endif %}
                        {% endblock %}
                    </div>
                </main>
                <aside aria-label="Page sidebar" class="hidden lg:block w-56 flex-shrink-0 p-4 lg:py-6 lg:pr-6 lg:pl-0">
                    {% block right_sidebar %}{% endblock %}
                </aside>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="drawer-side z-40">
            <label for="nav-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
            <aside id="nav-sidebar" aria-label="Main navigation" class="bg-base-200 min-h-full w-60 pl-4 pr-2 py-2">
                <div class="flex items-center justify-between mb-4">
                    <a href="{{ site.base_path }}/" class="text-lg font-bold">{{ site.title or 'Home' }}</a>
                    <div class="hidden min-[750px]:block">
                        {% include "components/theme_toggle.html" %}
                    </div>
                </div>
                {% if site.search_enabled %}
                <div class="mb-4">
                    {% include "components/search.html" %}
                </div>
                {% endif %}
                {% if site.nav and site.nav.children %}
                {% include "components/nav.html" %}
                {% endif %}
            </aside>
        </div>
    </div>

    <!-- Global search results overlay -->
    {% if site.search_enabled %}
    <div id="search-overlay" class="hidden fixed inset-0 z-50 min-[750px]:left-60">
        <div class="search-backdrop absolute inset-0 bg-base-300/80 backdrop-blur-sm"></div>
        <div class="search-results-panel relative max-w-4xl mx-auto mt-4 p-4 bg-base-100 rounded-lg shadow-2xl max-h-[calc(100vh-2rem)] overflow-hidden">
            <div class="search-count px-6 py-3 text-sm text-base-content/60 border-b border-base-300"></div>
            <div class="search-results p-6 overflow-y-auto max-h-[calc(100vh-8rem)]"></div>
        </div>
    </div>
    {% endif %}

    <script>
        (function() {
            document.querySelectorAll('.theme-option').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    const theme = this.dataset.theme;
                    document.documentElement.setAttribute('data-theme', theme);
                    localStorage.setItem('theme', theme);
                    document.activeElement.blur();
                });
            });

            document.querySelectorAll('.theme-controller').forEach(function(el) {
                el.addEventListener('change', function() {
                    const theme = this.checked ? 'dark' : 'light';
                    document.documentElement.setAttribute('data-theme', theme);
                    localStorage.setItem('theme', theme);
                    document.querySelectorAll('.theme-controller').forEach(function(toggle) {
                        toggle.checked = theme === 'dark';
                    });
                });
            });

            const theme = document.documentElement.getAttribute('data-theme');
            document.querySelectorAll('.theme-controller').forEach(function(el) {
                el.checked = theme === 'dark';
            });
        })();

        (function() {
            const STORAGE_KEY = 'rockgarden-nav-state';

            function getNavState() {
                try {
                    return JSON.parse(localStorage.getItem(STORAGE_KEY)) || {};
                } catch {
                    return {};
                }
            }

            function saveNavState(state) {
                localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
            }

            const state = getNavState();
            document.querySelectorAll('.nav-tree details[data-nav-path]').forEach(function(el) {
                const path = el.dataset.navPath;
                if (path in state) {
                    el.open = state[path];
                }
            });

            document.querySelectorAll('.nav-tree details[data-nav-path]').forEach(function(el) {
                el.addEventListener('toggle', function() {
                    const state = getNavState();
                    state[this.dataset.navPath] = this.open;
                    saveNavState(state);
                });
            });

            document.querySelectorAll('.nav-folder-link').forEach(function(link) {
                link.addEventListener('click', function(e) {
                    const details = this.closest('details');
                    if (details && !details.open) {
                        details.open = true;
                        const state = getNavState();
                        state[details.dataset.navPath] = true;
                        saveNavState(state);
                    }
                    e.stopPropagation();
                });
            });

            const SCROLL_KEY = 'rockgarden-nav-scroll';
            const scrollContainer = document.querySelector('.drawer-side');
            if (scrollContainer) {
                const saved = sessionStorage.getItem(SCROLL_KEY);
                if (saved) scrollContainer.scrollTop = parseInt(saved, 10);
                scrollContainer.addEventListener('scroll', function() {
                    sessionStorage.setItem(SCROLL_KEY, scrollContainer.scrollTop);
                });
            }
        })();

        {% if site.search_enabled %}
        (function() {
            if (!window.lunr) return;

            const searchContainers = document.querySelectorAll('.search-container');
            if (searchContainers.length === 0) return;

            let searchIndex = null;
            let documents = {};

            fetch('{{ site.base_path }}/search-index.json')
                .then(r => r.json())
                .then(data => {
                    data.forEach(doc => { documents[doc.url] = doc; });

                    searchIndex = lunr(function() {
                        this.ref('url');
                        this.field('title', { boost: 10 });
                        this.field('tags', { boost: 5 });
                        this.field('content');

                        data.forEach(doc => {
                            this.add({
                                url: doc.url,
                                title: doc.title,
                                tags: doc.tags ? doc.tags.join(' ') : '',
                                content: doc.content || ''
                            });
                        });
                    });
                })
                .catch(err => console.error('Failed to load search index:', err));

            function highlightMatches(text, query) {
                if (!text || !query) return text;
                const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                const regex = new RegExp('(\\b' + escapedQuery + '\\w*)', 'gi');
                return text.replace(regex, '<mark>$1</mark>');
            }

            function getExcerpts(text, query, maxExcerpts) {
                maxExcerpts = maxExcerpts || 3;
                if (!text) return [];
                const lowerText = text.toLowerCase();
                const lowerQuery = query.toLowerCase();
                const excerpts = [];
                let lastIndex = 0;

                while (excerpts.length < maxExcerpts && lastIndex < text.length) {
                    const index = lowerText.indexOf(lowerQuery, lastIndex);
                    if (index === -1) break;

                    const start = Math.max(0, index - 60);
                    const end = Math.min(text.length, index + query.length + 120);
                    let excerpt = text.substring(start, end);

                    if (start > 0) excerpt = '...' + excerpt;
                    if (end < text.length) excerpt = excerpt + '...';

                    excerpts.push(excerpt);
                    lastIndex = end;
                }

                if (excerpts.length === 0) {
                    const excerpt = text.substring(0, 180);
                    excerpts.push(excerpt + (text.length > 180 ? '...' : ''));
                }

                return excerpts;
            }

            function renderResults(results, searchResults, searchCount, query) {
                if (searchCount) {
                    searchCount.textContent = results.length === 0 ?
                        'No results found' :
                        results.length + ' matching ' + (results.length === 1 ? 'page' : 'pages');
                }

                searchResults.textContent = '';

                if (results.length === 0) {
                    const noResultsDiv = document.createElement('div');
                    noResultsDiv.className = 'text-center py-12 text-base-content/60';
                    noResultsDiv.textContent = 'No pages found';
                    searchResults.appendChild(noResultsDiv);
                    return;
                }

                results.forEach(function(result) {
                    const doc = documents[result.ref];
                    if (!doc) return;

                    const resultCard = document.createElement('div');
                    resultCard.className = 'mb-8 pb-8 border-b border-base-300 last:border-0';

                    const titleLink = document.createElement('a');
                    titleLink.href = doc.url;
                    titleLink.className = 'flex items-start gap-3 group mb-3';

                    const icon = document.createElement('div');
                    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
                    svg.setAttribute('class', 'w-5 h-5 mt-1 text-base-content/40');
                    svg.setAttribute('fill', 'none');
                    svg.setAttribute('stroke', 'currentColor');
                    svg.setAttribute('viewBox', '0 0 24 24');
                    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                    path.setAttribute('stroke-linecap', 'round');
                    path.setAttribute('stroke-linejoin', 'round');
                    path.setAttribute('stroke-width', '2');
                    path.setAttribute('d', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z');
                    svg.appendChild(path);
                    icon.appendChild(svg);
                    titleLink.appendChild(icon);

                    const titleText = document.createElement('div');
                    titleText.className = 'text-lg font-semibold group-hover:text-primary transition-colors';
                    titleText.textContent = doc.title;
                    titleLink.appendChild(titleText);

                    resultCard.appendChild(titleLink);

                    if (doc.content) {
                        const excerpts = getExcerpts(doc.content, query, 2);
                        excerpts.forEach(function(excerpt) {
                            const excerptDiv = document.createElement('div');
                            excerptDiv.className = 'text-sm text-base-content/80 leading-relaxed mb-2 ml-8';
                            excerptDiv.innerHTML = highlightMatches(excerpt, query);
                            resultCard.appendChild(excerptDiv);
                        });

                        const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                        const allMatches = (doc.content.toLowerCase().match(new RegExp(escapedQuery.toLowerCase(), 'g')) || []).length;
                        if (allMatches > excerpts.length) {
                            const moreLink = document.createElement('a');
                            moreLink.href = doc.url;
                            moreLink.className = 'text-sm text-primary hover:underline ml-8';
                            moreLink.textContent = (allMatches - excerpts.length) + ' more on this page';
                            resultCard.appendChild(moreLink);
                        }
                    }

                    searchResults.appendChild(resultCard);
                });
            }

            const searchOverlay = document.getElementById('search-overlay');
            const searchBackdrop = searchOverlay ? searchOverlay.querySelector('.search-backdrop') : null;
            const searchResults = searchOverlay ? searchOverlay.querySelector('.search-results') : null;
            const searchCount = searchOverlay ? searchOverlay.querySelector('.search-count') : null;

            if (!searchOverlay || !searchResults) return;

            let activeSearchInput = null;

            searchContainers.forEach(function(container) {
                const searchInput = container.querySelector('.search-input');
                if (!searchInput) return;

                searchInput.addEventListener('input', function(e) {
                    activeSearchInput = searchInput;
                    const query = e.target.value.trim();

                    if (!query || query.length < 2) {
                        searchOverlay.classList.add('hidden');
                        searchResults.textContent = '';
                        if (searchCount) searchCount.textContent = '';
                        return;
                    }

                    if (!searchIndex) return;

                    searchOverlay.classList.remove('hidden');

                    let results = [];
                    try {
                        const exactResults = searchIndex.search(query);
                        const wildcardResults = searchIndex.search(query + '*');
                        const fuzzyResults = searchIndex.search(query + '~1');

                        const seen = new Set();
                        [exactResults, wildcardResults, fuzzyResults].forEach(function(resultSet) {
                            resultSet.forEach(function(result) {
                                if (!seen.has(result.ref)) {
                                    seen.add(result.ref);
                                    results.push(result);
                                }
                            });
                        });

                        results = results.slice(0, 20);
                    } catch (e) {
                        results = searchIndex.search(query + '*').slice(0, 20);
                    }

                    renderResults(results, searchResults, searchCount, query);
                });

                searchInput.addEventListener('keydown', function(e) {
                    if (e.key === 'Escape') {
                        searchOverlay.classList.add('hidden');
                        searchInput.blur();
                    }
                });
            });

            if (searchBackdrop) {
                searchBackdrop.addEventListener('click', function() {
                    searchOverlay.classList.add('hidden');
                    if (activeSearchInput) {
                        activeSearchInput.blur();
                    }
                });
            }

            document.addEventListener('click', function(e) {
                const clickedSearchContainer = e.target.closest('.search-container');
                const clickedOverlay = e.target.closest('#search-overlay');

                if (!clickedSearchContainer && !clickedOverlay) {
                    searchOverlay.classList.add('hidden');
                }
            });
        })();
        {% endif %}
    </script>
    {% for script in site.user_scripts %}
    <script src="{{ site.base_path }}/scripts/{{ script }}"></script>
    {% endfor %}
{% endblock %}