{% extends "templates/wiki/layout.html" %}
{% from "templates/wiki/macros/buttons.html" import render_icon, page_actions_dropdown, page_action_item, download_action_item, dropdown_end %}

{% block title %}
    {{ metatags.title if metatags and metatags.title else doc.title }}
{% endblock %}

{% block head %}
<link rel="icon" href="{{ favicon or '/assets/wiki/favicon.png' }}">
{% endblock %}

{% block content %}
<div x-data="wikiPage" x-init="$store.navigation.init()" class="flex-1 min-w-0 flex">
    <!-- Main Content Area -->
    <main class="flex-1 min-w-0 px-4 py-6 lg:px-6 lg:py-8 xl:px-12 flex justify-center">
        <article class="min-w-0 w-full transition-opacity duration-300 xl:max-w-[85ch]"
             :class="{ 'opacity-50': $store.navigation.loading, 'xl:!max-w-[100ch]': $store.sidebar?.isCollapsed }">
        <!-- Page Header -->
        <header class="py-6 mb-6 border-b border-[var(--outline-gray-1)]">
            {% if hide_chrome %}
            {# Orphan document: Simple header with just copy button #}
            <div class="flex items-center justify-between gap-4">
                <h1 id="wiki-page-title" class="text-4xl-semibold text-[var(--ink-gray-9)]">{{ doc.title }}</h1>
                <div class="flex items-center gap-2">
                    <button @click="downloadPage()"
                            :disabled="downloadInProgress"
                            :aria-busy="downloadInProgress"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm-medium text-[var(--ink-gray-7)] bg-[var(--surface-base)] border border-[var(--outline-gray-2)] rounded-6 hover:bg-[var(--surface-gray-1)] transition-colors duration-200 cursor-pointer disabled:cursor-wait disabled:opacity-70">
                        <template x-if="!downloadInProgress">
                            {{ render_icon("download", "w-4 h-4") }}
                        </template>
                        <template x-if="downloadInProgress">
                            {{ render_icon("loader", "w-4 h-4 animate-spin") }}
                        </template>
                        <span x-text="downloadInProgress ? 'Preparing…' : 'Download'"></span>
                    </button>
                    <button @click="copyMarkdown()"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm-medium text-[var(--ink-gray-7)] bg-[var(--surface-base)] border border-[var(--outline-gray-2)] rounded-6 hover:bg-[var(--surface-gray-1)] transition-colors duration-200 cursor-pointer">
                        <template x-if="!copied">
                            {{ render_icon("clipboard", "w-4 h-4") }}
                        </template>
                        <template x-if="copied">
                            {{ render_icon("check", "w-4 h-4 text-green-600") }}
                        </template>
                        <span x-text="copied ? 'Copied!' : 'Copy'"></span>
                    </button>
                </div>
            </div>
            {% else %}
            <!-- Mobile: Edit above title -->
            <div class="flex justify-start mb-4 sm:hidden">
                {{ page_actions_dropdown(edit_href=doc.get_edit_link(), show_edit=can_edit, edit_external=wiki_space.git_synced) }}
                    {{ download_action_item() }}
                    {% if can_edit %}
                    {{ page_action_item(text="Copy page", description="Copy page as Markdown for LLMs", icon="clipboard", click="copyMarkdown(); open = false") }}
                    {% endif %}
                    {{ page_action_item(text="Open in ChatGPT", description="Ask ChatGPT about this page", icon="openai", href_expr="getAIUrl('openai')", target="_blank") }}
                    {{ page_action_item(text="Open in Claude", description="Ask Claude about this page", icon="claude", href_expr="getAIUrl('claude')", target="_blank") }}
                {{ dropdown_end() }}
            </div>
            <div class="flex items-center justify-between gap-4">
                <h1 id="wiki-page-title" class="text-4xl-semibold text-[var(--ink-gray-9)]">{{ doc.title }}</h1>

                <!-- Desktop: Edit beside title -->
                <div class="hidden sm:block">
                    {{ page_actions_dropdown(edit_href=doc.get_edit_link(), show_edit=can_edit, edit_external=wiki_space.git_synced) }}
                        {{ download_action_item() }}
                        {% if can_edit %}
                        {{ page_action_item(text="Copy page", description="Copy page as Markdown for LLMs", icon="clipboard", click="copyMarkdown(); open = false") }}
                        {% endif %}
                        {{ page_action_item(text="Open in ChatGPT", description="Ask ChatGPT about this page", icon="openai", href_expr="getAIUrl('openai')", target="_blank") }}
                        {{ page_action_item(text="Open in Claude", description="Ask Claude about this page", icon="claude", href_expr="getAIUrl('claude')", target="_blank") }}
                    {{ dropdown_end() }}
                </div>
            </div>
            {% endif %}
        </header>


        <!-- Page Content -->
        <!-- prose prose-v3 mirrors the SPA editor's EditorContent defaults -->
        <div class="prose prose-v3 !max-w-none text-[15px] [&>*:first-child]:mt-0" id="wiki-content">
            {{ rendered_content | safe }}
        </div>

        <!-- Previous/Next Navigation — frappe-ui docs PrevNextBtns (subtle/md pills) -->
        <nav id="wiki-nav-buttons" class="mt-10">
            {% if prev_doc or next_doc %}
            {% set nav_link_classes = "group inline-flex min-w-0 max-w-[48%] items-center gap-2 h-8 px-2.5 rounded-4 text-base font-medium text-[var(--ink-gray-8)] bg-[var(--surface-gray-2)] hover:bg-[var(--surface-gray-3)] active:bg-[var(--surface-gray-4)] transition-colors no-underline" %}
            {#- justify-between alone: with both links they sit at the two ends,
                and a lone next button falls back to the start rather than
                hanging off the right edge. Same as frappe-ui docs'
                PrevNextBtns, which adds no margin utility for that case.
                Mirrored by updateNavButtons in includes/sidebar.html. -#}
            <div class="flex justify-between gap-5">
                {% if prev_doc %}
                <a href="/{{ prev_doc.route }}"
                   @click.prevent="$store.navigation.navigateTo({{ prev_doc.route | tojson | forceescape }})"
                   @mouseenter="$store.navigation.prefetch({{ prev_doc.route | tojson | forceescape }})"
                   class="{{ nav_link_classes }}">
                    {{ render_icon("arrow-left", "h-4 w-4 shrink-0") }}
                    <span class="truncate">{{ prev_doc.title }}</span>
                </a>
                {% endif %}

                {% if next_doc %}
                <a href="/{{ next_doc.route }}"
                   @click.prevent="$store.navigation.navigateTo({{ next_doc.route | tojson | forceescape }})"
                   @mouseenter="$store.navigation.prefetch({{ next_doc.route | tojson | forceescape }})"
                   class="{{ nav_link_classes }}">
                    <span class="truncate">{{ next_doc.title }}</span>
                    {{ render_icon("arrow-right", "h-4 w-4 shrink-0") }}
                </a>
                {% endif %}
            </div>
            {% endif %}
        </nav>

        <!-- Last Updated & Feedback Widget -->
        <div class="mt-8 flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
            <div id="wiki-last-updated" class="text-sm text-[var(--ink-gray-5)]" title="{{ last_updated_on }}" data-timestamp="{{ last_updated_on }}">
                {{ _('Last updated {0}').format(last_updated) }}
            </div>
            {% if wiki_space and wiki_space.enable_feedback_collection %}
            {% include "templates/wiki/includes/feedback_widget.html" %}
            {% endif %}
        </div>
    </article>
    </main>

    {% if not hide_chrome %}
    {% include "templates/wiki/includes/toc.html" %}
    {% endif %}
</div>

<script>
    // Initialize page content store and wikiPage component for reactive updates during navigation
    document.addEventListener('alpine:init', () => {
        Alpine.store('pageContent', {
            {#- Script context: bare `tojson` is correct — it emits a valid JS
                string literal and escapes </script>/quotes. Do NOT add
                `forceescape` here (that's only for tojson in HTML attributes);
                inside <script> the browser doesn't HTML-decode, so entities
                would be a JS syntax error and break Alpine init. -#}
            markdown: {{ raw_markdown | tojson }}
        });

        // Combined component for wiki document page (wikiDocument + tocScrollSpy)
        Alpine.data('wikiPage', () => ({
            // wikiDocument properties
            copied: false,
            downloadInProgress: false,

            get markdown() {
                return this.$store.pageContent?.markdown || '';
            },

            copyMarkdown() {
                navigator.clipboard.writeText(this.markdown).then(() => {
                    this.copied = true;
                    setTimeout(() => {
                        this.copied = false;
                    }, 2000);
                }).catch(err => {
                    console.error('Failed to copy markdown:', err);
                });
            },

            async downloadPage() {
                if (this.downloadInProgress) return;
                this.downloadInProgress = true;

                // Read the route fresh each click — SPA navigation updates window.location
                // via history.pushState, so this stays in sync with the visible page.
                const route = window.location.pathname.replace(/^\/+/, '');
                const url = `/api/method/wiki.frappe_wiki.doctype.wiki_document.wiki_document.download_pdf?route=${encodeURIComponent(route)}`;

                try {
                    const response = await fetch(url, { credentials: 'same-origin' });
                    if (!response.ok) {
                        throw new Error(`Failed to download PDF: ${response.status}`);
                    }

                    const objectUrl = URL.createObjectURL(await response.blob());
                    const link = document.createElement('a');
                    link.href = objectUrl;
                    link.download = `${route.split('/').pop() || 'wiki-document'}.pdf`;
                    document.body.appendChild(link);
                    link.click();
                    link.remove();
                    URL.revokeObjectURL(objectUrl);
                } catch (err) {
                    console.error('Failed to download PDF:', err);
                    window.frappe?.show_alert?.({
                        message: __('Unable to download this page right now.'),
                        indicator: 'red'
                    });
                } finally {
                    this.downloadInProgress = false;
                }
            },

            getAIUrl(provider) {
                const pageUrl = window.location.href;
                const prompt = `I'm currently browsing this web page: ${pageUrl}\n\nPlease answer any questions I have based on the content of this page.`;
                const encodedPrompt = encodeURIComponent(prompt);
                const urls = {
                    'claude': `https://claude.ai/new?q=${encodedPrompt}`,
                    'openai': `https://chatgpt.com/?q=${encodedPrompt}`,
                    't3': `https://t3.chat/new?q=${encodedPrompt}`,
                    'perplexity': `https://www.perplexity.ai/search?q=${encodedPrompt}`
                };
                return urls[provider] || '#';
            },

            // tocScrollSpy properties - works with server-rendered TOC
            headingIds: [],
            activeId: '',
            observer: null,
            resizeHandler: null,
            scrollHandler: null,
            visibleHeadings: new Set(),

            init() {
                this.initScrollSpy();

                // Register refresh callback with store for SPA navigation
                Alpine.store('toc').setRefreshCallback(() => {
                    this.refresh();
                });
            },

            refresh() {
                // Disconnect existing observer and listeners
                if (this.observer) {
                    this.observer.disconnect();
                }
                if (this.resizeHandler) {
                    window.removeEventListener('resize', this.resizeHandler);
                }
                if (this.scrollHandler) {
                    window.removeEventListener('scroll', this.scrollHandler);
                }
                this.visibleHeadings.clear();

                // Re-initialize scroll spy
                this.initScrollSpy();
            },

            initScrollSpy() {
                // Get heading IDs from server-rendered TOC links
                const tocLinks = document.querySelectorAll('[data-toc-link]');
                this.headingIds = Array.from(tocLinks).map(link => link.dataset.tocLink);

                // Add anchor links to headings in content (even if TOC is empty)
                document
                    .querySelectorAll(
                        '#wiki-content h1[id], #wiki-content h2[id], #wiki-content h3[id], #wiki-content h4[id], #wiki-content h5[id], #wiki-content h6[id]',
                    )
                    .forEach(heading => {
                        this.addAnchorLink(heading);
                    });

                if (this.headingIds.length === 0) return;

                // Set initial active heading
                this.activeId = this.headingIds[0];
                this.updateTocLinkStyles();

                this.setupScrollSpy();
            },

            setupScrollSpy() {
                if (this.headingIds.length === 0) return;

                this.createObserver();

                // Handle scroll - needed to detect top-of-page state
                this.scrollHandler = () => {
                    this.updateActiveHeading();
                };
                window.addEventListener('scroll', this.scrollHandler, { passive: true });

                // Handle resize - need to recreate observer with new document height
                let resizeTimeout;
                this.resizeHandler = () => {
                    clearTimeout(resizeTimeout);
                    resizeTimeout = setTimeout(() => {
                        if (this.observer) {
                            this.observer.disconnect();
                        }
                        this.visibleHeadings.clear();
                        this.createObserver();
                    }, 100);
                };
                window.addEventListener('resize', this.resizeHandler, { passive: true });
            },

            createObserver() {
                // Use document height as top margin so headings STAY intersecting after scrolling past
                // Use -66% bottom margin so headings only START intersecting in top 33% of viewport
                const docHeight = document.documentElement.scrollHeight;
                const options = {
                    root: null,
                    rootMargin: `${docHeight}px 0px -66% 0px`,
                    threshold: 0
                };

                this.observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            this.visibleHeadings.add(entry.target.id);
                        } else {
                            this.visibleHeadings.delete(entry.target.id);
                        }
                    });

                    this.updateActiveHeading();
                }, options);

                this.headingIds.forEach(id => {
                    const element = document.getElementById(id);
                    if (element) {
                        this.observer.observe(element);
                    }
                });
            },

            updateActiveHeading() {
                if (this.headingIds.length === 0) return;

                let newActiveId = this.activeId;

                // When at the top of the page, always highlight the first heading
                if (window.scrollY < 100) {
                    newActiveId = this.headingIds[0];
                } else if (this.visibleHeadings.size === 0) {
                    // No headings visible - keep current or set to first
                    if (!this.activeId) {
                        newActiveId = this.headingIds[0];
                    }
                } else {
                    // Find the last visible heading in DOM order (most recently scrolled past)
                    const visibleInOrder = this.headingIds.filter(id => this.visibleHeadings.has(id));
                    if (visibleInOrder.length > 0) {
                        newActiveId = visibleInOrder[visibleInOrder.length - 1];
                    }
                }

                // Only update DOM if active heading changed
                if (newActiveId !== this.activeId) {
                    this.activeId = newActiveId;
                    this.updateTocLinkStyles();
                }
            },

            updateTocLinkStyles() {
                // Update the active class on server-rendered TOC links
                document.querySelectorAll('[data-toc-link]').forEach(link => {
                    if (link.dataset.tocLink === this.activeId) {
                        link.classList.add('active');
                        this.keepTocLinkInView(link);
                    } else {
                        link.classList.remove('active');
                    }
                });
            },

            // A long TOC overflows its sticky nav, so keep the active link in view.
            // Scrolled by hand: scrollIntoView would also move the page.
            keepTocLinkInView(link) {
                const nav = link.closest('nav');
                if (!nav) return;
                if (link.offsetTop < nav.scrollTop) {
                    nav.scrollTop = link.offsetTop;
                } else if (link.offsetTop + link.offsetHeight > nav.scrollTop + nav.clientHeight) {
                    nav.scrollTop = link.offsetTop + link.offsetHeight - nav.clientHeight;
                }
            },

            addAnchorLink(heading) {
                // Skip if anchor already exists
                if (heading.querySelector('.heading-anchor')) return;

                const anchor = document.createElement('a');
                anchor.href = `#${heading.id}`;
                anchor.className = 'heading-anchor';
                anchor.setAttribute('aria-label', {{ _('Link to {0}') | tojson }}.replace('{0}', heading.textContent.trim()));
                anchor.textContent = '#';
                heading.insertBefore(anchor, heading.firstChild);
            },

            destroy() {
                if (this.observer) {
                    this.observer.disconnect();
                }
                if (this.resizeHandler) {
                    window.removeEventListener('resize', this.resizeHandler);
                }
                if (this.scrollHandler) {
                    window.removeEventListener('scroll', this.scrollHandler);
                }
                this.visibleHeadings.clear();
            }
        }));
    });
</script>
{% endblock %}