@extends('layouts.site')

@php
    $trans = $post->translation($locale);
    $baseTitle = $trans?->meta_title ?: $trans?->title;
    if ($currentPage > 1 && $totalPages > 1 && !empty($globalToc[$currentPage - 1]['title'])) {
        $chapterTitle = $globalToc[$currentPage - 1]['title'];
        $pageTitle = $baseTitle . ' - ' . $chapterTitle . ' (' . $currentPage . '/' . $totalPages . ')';
    } else {
        $pageTitle = $baseTitle;
    }
    $baseDescription = $trans?->meta_description ?: Str::limit(strip_tags($trans?->body), 160);
    if ($currentPage > 1 && $totalPages > 1) {
        $pageDescription = Str::limit(strip_tags($pageBody), 160);
    } else {
        $pageDescription = $baseDescription;
    }
@endphp

@section('title', $pageTitle)
@section('meta_description', $pageDescription)

@section('content')
<article class="max-w-4xl">
    {{-- Header --}}
    <header class="mb-6">
        <div class="mb-2">
            <div class="flex items-center gap-3">
                <div class="flex-1 hidden h-px sm:block bg-gradient-to-r from-transparent to-primary/30"></div>
                <h1 class="min-w-0 entry-title">{{ $trans?->title }}</h1>
                <div class="flex-1 hidden h-px sm:block bg-gradient-to-r from-primary/30 to-transparent"></div>
            </div>
            <div class="flex items-center justify-end gap-2 mt-1">
                {{-- Share button --}}
                @if($trans)
                    <div x-data="{ copied: false }" class="relative">
                        <button @click="
                            if (navigator.share) {
                                navigator.share({ title: '{{ addslashes($trans->title) }}', url: window.location.href });
                            } else if (navigator.clipboard) {
                                navigator.clipboard.writeText(window.location.href).then(() => { copied = true; setTimeout(() => copied = false, 2000); });
                            } else {
                                const t = document.createElement('textarea');
                                t.value = window.location.href;
                                t.style.position = 'fixed';
                                t.style.opacity = '0';
                                document.body.appendChild(t);
                                t.select();
                                document.execCommand('copy');
                                document.body.removeChild(t);
                                copied = true;
                                setTimeout(() => copied = false, 2000);
                            }
                        " class="flex p-0 leading-none transition-transform group hover:scale-110" :title="copied ? '{{ __('Link copied!') }}' : '{{ __('Share') }}'">
                            <svg xmlns="http://www.w3.org/2000/svg" class="text-gray-400 transition-colors w-7 h-7 group-hover:text-primary" viewBox="0 0 256 256" fill="currentColor"><path d="M208,200a32,32,0,1,1-32-32A32,32,0,0,1,208,200ZM176,88a32,32,0,1,0-32-32A32,32,0,0,0,176,88Z" class="fill-primary/40"/><path d="M176,160a39.89,39.89,0,0,0-28.62,12.09l-46.1-29.63a39.8,39.8,0,0,0,0-28.92l46.1-29.63a40,40,0,1,0-8.66-13.45l-46.1,29.63a40,40,0,1,0,0,55.82l46.1,29.63A40,40,0,1,0,176,160Zm0-128a24,24,0,1,1-24,24A24,24,0,0,1,176,32ZM64,152a24,24,0,1,1,24-24A24,24,0,0,1,64,152Zm112,72a24,24,0,1,1,24-24A24,24,0,0,1,176,224Z"/></svg>
                        </button>
                        <span x-cloak x-show="copied" x-transition.opacity class="absolute px-2 py-1 text-xs text-white -translate-x-1/2 bg-gray-800 rounded -bottom-8 left-1/2 whitespace-nowrap">{{ __('Link copied!') }}</span>
                    </div>
                @endif

                {{-- Synthesis flipbook button --}}
                @if($post->allow_pdf && $trans?->pdf_synthesis_name)
                    @php
                        $synthPdfUrl = '/storage/PDF/' . ltrim($trans->pdf_synthesis_name, '/');
                        $synthConfig = json_encode([
                            'pdfUrl' => $synthPdfUrl,
                            'title' => $trans->title ?? 'PDF',
                            'thumbnail' => $trans->mediaUrl('og_image') ?? '',
                        ], JSON_HEX_APOS | JSON_HEX_QUOT);
                    @endphp
                    @php
                        $synthDownloadUrl = '/download/' . preg_replace('/^[^_]+_/', '', str_replace('.pdf', '-pdf', basename($trans->pdf_synthesis_name)));
                    @endphp
                    <div x-data="flipbook({{ $synthConfig }})" @keydown.window="handleKeydown($event)">
                        <button @click="open()" type="button"
                                class="flex p-0 leading-none transition-transform group hover:scale-110" title="{{ __('View synthesis') }}">
                            <svg xmlns="http://www.w3.org/2000/svg" class="text-gray-400 transition-colors w-7 h-7 group-hover:text-primary" viewBox="0 0 256 256" fill="currentColor"><path d="M208,72V184H48V72Z" class="fill-primary/40"/><path d="M232,64V48a16,16,0,0,0-16-16H40A16,16,0,0,0,24,48V64A16,16,0,0,0,40,80v96H32a8,8,0,0,0,0,16h88v17.38a24,24,0,1,0,16,0V192h88a8,8,0,0,0,0-16h-8V80A16,16,0,0,0,232,64ZM128,240a8,8,0,1,1,8-8A8,8,0,0,1,128,240ZM40,48H216V64H40ZM200,176H56V80H200Z"/></svg>
                        </button>
                        <x-flipbook-modal
                            :title="$trans->title"
                            :post-url="route('content.show', [$trans->locale, $trans->slug])"
                            :download-url="$synthDownloadUrl" />
                    </div>
                @endif

                {{-- PDF Download button --}}
                @if($post->allow_pdf && $trans)
                    <a href="{{ route('download', ['name' => $locale . '_' . $trans->slug . '-pdf']) }}" target="_blank"
                       class="transition-transform group hover:scale-110" title="{{ __('Download PDF') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" class="text-gray-400 transition-colors w-7 h-7 group-hover:text-primary" viewBox="0 0 256 256" fill="currentColor"><path d="M208,88H152V32Z" class="fill-primary/40"/><path d="M224,152a8,8,0,0,1-8,8H192v16h16a8,8,0,0,1,0,16H192v16a8,8,0,0,1-16,0V152a8,8,0,0,1,8-8h32A8,8,0,0,1,224,152ZM92,172a28,28,0,0,1-28,28H56v8a8,8,0,0,1-16,0V152a8,8,0,0,1,8-8H64A28,28,0,0,1,92,172Zm-16,0a12,12,0,0,0-12-12H56v24h8A12,12,0,0,0,76,172Zm88,8a36,36,0,0,1-36,36H112a8,8,0,0,1-8-8V152a8,8,0,0,1,8-8h16A36,36,0,0,1,164,180Zm-16,0a20,20,0,0,0-20-20h-8v40h8A20,20,0,0,0,148,180ZM40,112V40A16,16,0,0,1,56,24h96a8,8,0,0,1,5.66,2.34l56,56A8,8,0,0,1,216,88v24a8,8,0,0,1-16,0V96H152a8,8,0,0,1-8-8V40H56v72a8,8,0,0,1-16,0ZM160,80h28.69L160,51.31Z"/></svg>
                    </a>
                @endif

                {{-- Edit button (logged-in users only) --}}
                @auth
                    <a href="{{ url('/admin/translations/' . ($trans?->id ?? $post->id) . '/edit') }}"
                       class="transition-transform group hover:scale-110" title="{{ __('Edit') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" class="text-gray-400 transition-colors w-7 h-7 group-hover:text-primary" viewBox="0 0 256 256" fill="currentColor"><path d="M221.66,90.34,192,120,136,64l29.66-29.66a8,8,0,0,1,11.31,0L221.66,79A8,8,0,0,1,221.66,90.34Z" class="fill-primary/40"/><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"/></svg>
                    </a>
                @endauth
            </div>
        </div>
    </header>

    {{-- Global TOC (multi-page posts only) --}}
    @if($totalPages > 1)
    <div class="global-toc-container">
        <p class="global-toc-intro">{{ __('This article is divided into several pages:') }}</p>
        <ol>
            @foreach($globalToc as $tocItem)
                <li>
                    @if($tocItem['page'] === $currentPage)
                        <strong>{{ $tocItem['title'] }}</strong>
                    @else
                        <a href="{{ route('content.show', ['locale' => $locale, 'slug' => $trans->slug, 'page' => $tocItem['page'] > 1 ? $tocItem['page'] : null]) }}">{{ $tocItem['title'] }}</a>
                    @endif
                </li>
            @endforeach
        </ol>
    </div>
    @endif

    {{-- Table of Contents (current page only) --}}
    @if($pageBody && preg_match_all('/<(h[1-3])[^>]*>(.*?)<\/h[1-3]>/i', $pageBody, $headings, PREG_SET_ORDER) && count($headings) >= 2)
    @php
        // Slug helper: converts heading text to a URL-friendly anchor
        $seenSlugs = [];
        $makeSlug = function (string $text) use (&$seenSlugs): string {
            $slug = strip_tags($text);
            $slug = \Illuminate\Support\Str::ascii($slug);
            $slug = str_replace(' ', '_', $slug);
            $slug = preg_replace('/[^A-Za-z0-9_]/', '', $slug);
            if ($slug === '') {
                $slug = 'heading';
            }
            if (isset($seenSlugs[$slug])) {
                $seenSlugs[$slug]++;
                $slug .= '_' . $seenSlugs[$slug];
            } else {
                $seenSlugs[$slug] = 1;
            }
            return $slug;
        };

        // Build numbered TOC items with level info
        $counters = [0, 0, 0];
        $tocItems = [];
        foreach ($headings as $i => $match) {
            $level = (int) substr($match[1], 1);
            $text = html_entity_decode(strip_tags($match[2]), ENT_QUOTES | ENT_HTML5, 'UTF-8');
            $counters[$level - 1]++;
            for ($j = $level; $j < 3; $j++) $counters[$j] = 0;
            $parts = [];
            for ($j = 0; $j < $level; $j++) {
                if ($counters[$j] > 0) $parts[] = $counters[$j];
            }
            $tocItems[] = ['number' => implode('.', $parts), 'text' => $text, 'slug' => $makeSlug($match[2]), 'level' => $level];
        }

        // Build nested HTML
        $tocHtml = '';
        $prevLevel = 0;
        foreach ($tocItems as $item) {
            if ($item['level'] > $prevLevel) {
                $tocHtml .= str_repeat('<ul>', $item['level'] - $prevLevel);
            } elseif ($item['level'] < $prevLevel) {
                $tocHtml .= str_repeat('</li></ul>', $prevLevel - $item['level']) . '</li>';
            } else {
                if ($prevLevel > 0) $tocHtml .= '</li>';
            }
            $tocHtml .= '<li><a href="#' . $item['slug'] . '">' . $item['number'] . '. ' . e($item['text']) . '</a>';
            $prevLevel = $item['level'];
        }
        $tocHtml .= str_repeat('</li></ul>', $prevLevel);
    @endphp
    <div class="toc-container">
        {!! $tocHtml !!}
    </div>
    @endif

    {{-- Content --}}
    <div class="{{ ($post->template ?? 'default') === 'raw' ? 'max-w-[40rem] mx-auto' : 'prose prose-neutral dark:prose-invert prose-a:text-primary dark:prose-a:text-primary-dark hover:prose-a:text-secondary max-w-none' }}">
        @if($pageBody)
            @php
                // Build heading numbers and text-based slugs (same logic as TOC)
                $ctr = [0, 0, 0];
                $contentSeenSlugs = [];
                $contentBody = preg_replace_callback('/<(h[1-3])([^>]*)>(.*?)<\/(h[1-3])>/i', function($m) use (&$ctr, &$contentSeenSlugs) {
                    $lvl = (int) substr($m[1], 1);
                    $ctr[$lvl - 1]++;
                    for ($j = $lvl; $j < 3; $j++) $ctr[$j] = 0;
                    $parts = [];
                    for ($j = 0; $j < $lvl; $j++) {
                        if ($ctr[$j] > 0) $parts[] = $ctr[$j];
                    }
                    $num = implode('.', $parts);
                    // Generate slug from heading text
                    $slug = strip_tags($m[3]);
                    $slug = \Illuminate\Support\Str::ascii($slug);
                    $slug = str_replace(' ', '_', $slug);
                    $slug = preg_replace('/[^A-Za-z0-9_]/', '', $slug);
                    if ($slug === '') {
                        $slug = 'heading';
                    }
                    if (isset($contentSeenSlugs[$slug])) {
                        $contentSeenSlugs[$slug]++;
                        $slug .= '_' . $contentSeenSlugs[$slug];
                    } else {
                        $contentSeenSlugs[$slug] = 1;
                    }
                    return '<' . $m[1] . ' id="' . $slug . '"' . $m[2] . '>' . $num . '. ' . $m[3] . '</' . $m[4] . '>';
                }, $pageBody);
                if (($post->template ?? 'default') === 'default') {
                    $contentBody = wpautop($contentBody);
                    $contentBody = downgrade_headings($contentBody);
                }
                // Restore flipbook HTML that was protected from wpautop via placeholders
                if (isset($shortcodeService)) {
                    $contentBody = $shortcodeService->restorePlaceholders($contentBody);
                }
                // Lazy-load and async-decode all content images
                $contentBody = preg_replace('/<img(?![^>]*loading=)/', '<img loading="lazy" decoding="async"', $contentBody);
                // Ensure all images have an alt attribute
                $contentBody = preg_replace('/<img(?![^>]*alt=)([^>]*)\/?>/i', '<img alt=""$1/>', $contentBody);
                // Add rel="noopener noreferrer" and target="_blank" to external links
                $contentBody = preg_replace_callback('/<a([^>]*href=["\']https?:\/\/(?!' . preg_quote(request()->getHost(), '/') . ')[^"\']*["\'][^>]*)>/i', function($m) {
                    $tag = $m[1];
                    if (strpos($tag, 'target=') === false) {
                        $tag .= ' target="_blank"';
                    }
                    if (strpos($tag, 'rel=') === false) {
                        $tag .= ' rel="noopener noreferrer"';
                    }
                    return '<a' . $tag . '>';
                }, $contentBody);
            @endphp
            {!! $contentBody !!}
        @endif
    </div>

    {{-- Pagination (multi-page posts only) --}}
    @if($totalPages > 1)
    <nav class="page-navigation">
        @if($currentPage > 1)
            <a href="{{ route('content.show', ['locale' => $locale, 'slug' => $trans->slug, 'page' => $currentPage - 1 > 1 ? $currentPage - 1 : null]) }}" class="page-nav-arrow">&laquo; {{ __('Previous') }}</a>
        @endif

        @for($p = 1; $p <= $totalPages; $p++)
            @if($p === $currentPage)
                <span class="page-nav-number active">{{ $p }}</span>
            @else
                <a href="{{ route('content.show', ['locale' => $locale, 'slug' => $trans->slug, 'page' => $p > 1 ? $p : null]) }}" class="page-nav-number">{{ $p }}</a>
            @endif
        @endfor

        @if($currentPage < $totalPages)
            <a href="{{ route('content.show', ['locale' => $locale, 'slug' => $trans->slug, 'page' => $currentPage + 1]) }}" class="page-nav-arrow">{{ __('Next') }} &raquo;</a>
        @endif
    </nav>
    @endif

</article>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const params = new URLSearchParams(window.location.search);
    const q = params.get('q');
    if (!q || q.length < 2) return;

    const article = document.querySelector('article');
    if (!article) return;

    const accentMap = {
        'a': '[aàáâãäå]', 'c': '[cç]', 'e': '[eèéêë]', 'i': '[iìíîï]',
        'n': '[nñ]', 'o': '[oòóôõö]', 'u': '[uùúûü]', 'y': '[yýÿ]'
    };
    const pattern = Array.from(q).map(function (ch) {
        const base = ch.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
        return accentMap[base] || ch.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }).join('');
    const regex = new RegExp('(' + pattern + ')', 'gi');
    const walker = document.createTreeWalker(article, NodeFilter.SHOW_TEXT, null);
    const matches = [];

    while (walker.nextNode()) {
        const node = walker.currentNode;
        if (node.parentElement.closest('script, style, textarea, .toc-container, header')) continue;
        if (regex.test(node.textContent)) {
            matches.push(node);
        }
        regex.lastIndex = 0;
    }

    matches.forEach(function (textNode) {
        const parts = textNode.textContent.split(regex);
        if (parts.length <= 1) return;
        const fragment = document.createDocumentFragment();
        parts.forEach(function (part) {
            if (regex.test(part)) {
                const mark = document.createElement('mark');
                mark.className = 'bg-yellow-200 dark:bg-yellow-800 rounded px-0.5';
                mark.textContent = part;
                fragment.appendChild(mark);
            } else {
                fragment.appendChild(document.createTextNode(part));
            }
            regex.lastIndex = 0;
        });
        textNode.parentNode.replaceChild(fragment, textNode);
    });

    const firstMark = article.querySelector('mark');
    if (firstMark) {
        firstMark.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
});
</script>
@endsection