@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/policy-pages.css') }}">
@endpush

@section('content')
<div class="policy-page" data-theme="light" id="policyPage">
    <div class="policy-progress-bar" id="policyProgress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>

    {{-- Hero --}}
    <section class="policy-hero" style="background-image: url('{{ $policy->getDesktopBannerUrl() ?? $policy->getHeroImageUrl() }}')" aria-label="{{ $policy->title }} hero banner">
        <div class="container policy-hero-content">
            <h1>{{ $policy->title }}</h1>
            @if($policy->short_description)
                <p class="lead text-white-50 mb-3" style="max-width: 700px;">{{ $policy->short_description }}</p>
            @endif
            <div class="policy-meta">
                <span><i class="bi bi-calendar3"></i> Updated {{ $policy->updated_at->format('F j, Y') }}</span>
                <span><i class="bi bi-clock"></i> {{ $policy->reading_time }} min read</span>
                <span><i class="bi bi-shield-check"></i> Official Gletra Policy</span>
            </div>
        </div>
    </section>

    {{-- Breadcrumb --}}
    <nav class="policy-breadcrumb" aria-label="Breadcrumb">
        <div class="container">
            <a href="{{ route('home') }}">Home</a>
            <span class="mx-2 text-muted">/</span>
            <a href="{{ route('policies.index') }}">Legal Center</a>
            <span class="mx-2 text-muted">/</span>
            <span aria-current="page">{{ $policy->title }}</span>
        </div>
    </nav>

    <div class="container">
        <div class="policy-layout">
            {{-- Sticky Sidebar --}}
            <aside class="policy-sidebar d-none d-lg-block" aria-label="Policy navigation">
                <div class="policy-sidebar-card">
                    <div class="policy-search">
                        <i class="bi bi-search"></i>
                        <input type="search" id="policySearch" placeholder="Search this policy..." aria-label="Search within policy">
                    </div>

                    <div class="policy-toolbar">
                        <button type="button" class="btn-policy-tool" id="toggleDarkMode" aria-label="Toggle dark mode">
                            <i class="bi bi-moon-stars"></i> Dark
                        </button>
                        <button type="button" class="btn-policy-tool" id="expandAll" aria-label="Expand all sections">
                            <i class="bi bi-arrows-expand"></i> Expand
                        </button>
                        <button type="button" class="btn-policy-tool" id="collapseAll" aria-label="Collapse all sections">
                            <i class="bi bi-arrows-collapse"></i> Collapse
                        </button>
                    </div>

                    <h6>Table of Contents</h6>
                    <nav id="policyToc">
                        @if($policy->content)
                            <a href="#policy-intro" class="policy-toc-link">Introduction</a>
                        @endif
                        @foreach($policy->activeSections as $section)
                            <a href="#{{ $section->getAnchorId() }}" class="policy-toc-link" data-section="{{ $section->id }}">
                                {{ $section->title }}
                            </a>
                        @endforeach
                        @if($policy->faqs->count())
                            <a href="#policy-faqs" class="policy-toc-link">FAQs</a>
                        @endif
                        <a href="#policy-contact" class="policy-toc-link">Contact</a>
                    </nav>

                    @if($allPolicies->count() > 1)
                        <hr class="my-3" style="border-color: var(--policy-border)">
                        <h6>Other Policies</h6>
                        @foreach($allPolicies->where('id', '!=', $policy->id)->take(8) as $other)
                            <a href="{{ route('policies.show', $other->slug) }}" class="policy-toc-link small">
                                {{ $other->title }}
                            </a>
                        @endforeach
                    @endif
                </div>
            </aside>

            {{-- Main Content --}}
            <main class="policy-main" id="policyMainContent">
                <div class="policy-main-card">
                    @if($policy->content)
                        <div class="policy-intro" id="policy-intro">
                            {!! $policy->content !!}
                        </div>
                    @endif

                    @foreach($policy->activeSections as $section)
                        <article class="policy-section type-{{ $section->section_type }}" id="{{ $section->getAnchorId() }}" data-searchable>
                            <div class="policy-section-header" role="button" tabindex="0" aria-expanded="true">
                                <h2>{{ $section->title }}</h2>
                                <i class="bi bi-chevron-down toggle-icon text-muted"></i>
                            </div>
                            <div class="policy-section-body">
                                @if($section->getImageUrl())
                                    <figure class="policy-section-figure mb-4">
                                        <img src="{{ $section->getImageUrl() }}" alt="{{ $section->title }}" class="img-fluid rounded-3 w-100 shadow-sm" loading="lazy" style="max-height:280px;object-fit:cover">
                                        <figcaption class="text-muted small mt-2 text-center">{{ $section->title }}</figcaption>
                                    </figure>
                                @endif
                                {!! $section->content !!}
                            </div>
                        </article>
                    @endforeach

                    @if($policy->faqs->count())
                        <section id="policy-faqs" class="mt-4" data-searchable>
                            <h2 class="h4 fw-bold mb-3">Frequently Asked Questions</h2>
                            <div class="policy-faq accordion" id="policyFaqAccordion">
                                @foreach($policy->faqs as $i => $faq)
                                    <div class="accordion-item">
                                        <h3 class="accordion-header">
                                            <button class="accordion-button {{ $i > 0 ? 'collapsed' : '' }}" type="button"
                                                    data-bs-toggle="collapse" data-bs-target="#faq-{{ $faq->id }}"
                                                    aria-expanded="{{ $i === 0 ? 'true' : 'false' }}">
                                                {{ $faq->question }}
                                            </button>
                                        </h3>
                                        <div id="faq-{{ $faq->id }}" class="accordion-collapse collapse {{ $i === 0 ? 'show' : '' }}"
                                             data-bs-parent="#policyFaqAccordion">
                                            <div class="accordion-body">{{ $faq->answer }}</div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </section>
                    @endif

                    @if($policy->legal_notice)
                        <div class="policy-legal-notice" role="note">
                            <h3><i class="bi bi-exclamation-triangle me-2"></i>Legal Notice</h3>
                            <p>{{ $policy->legal_notice }}</p>
                        </div>
                    @endif

                    <div class="policy-contact" id="policy-contact">
                        <h3 class="h5 fw-bold mb-2">Questions About This Policy?</h3>
                        <p class="text-muted mb-3">Our legal and support teams are here to help.</p>
                        <a href="{{ route('contact') }}" class="btn btn-primary btn-sm rounded-pill px-4">
                            <i class="bi bi-envelope me-1"></i> Contact Legal Team
                        </a>
                    </div>
                </div>
            </main>
        </div>
    </div>

    {{-- Mobile bottom nav --}}
    <nav class="policy-mobile-nav d-lg-none" aria-label="Policy quick navigation">
        <a href="{{ route('policies.index') }}"><i class="bi bi-grid"></i> All</a>
        <a href="#policy-intro"><i class="bi bi-file-text"></i> Intro</a>
        <a href="#policy-faqs"><i class="bi bi-question-circle"></i> FAQs</a>
        <a href="#policy-contact"><i class="bi bi-envelope"></i> Contact</a>
        <button type="button" id="toggleDarkModeMobile" class="border-0 bg-transparent" style="color:inherit">
            <i class="bi bi-moon-stars d-block" style="font-size:1.1rem"></i>
            <span style="font-size:0.65rem">Theme</span>
        </button>
    </nav>

    <button type="button" class="policy-back-top" id="backToTop" aria-label="Back to top">
        <i class="bi bi-arrow-up"></i>
    </button>
</div>
@endsection

@push('scripts')
<script>
(function() {
    const page = document.getElementById('policyPage');
    const progress = document.getElementById('policyProgress');
    const backTop = document.getElementById('backToTop');
    const searchInput = document.getElementById('policySearch');
    const tocLinks = document.querySelectorAll('.policy-toc-link[data-section], .policy-toc-link[href^="#"]');

    // Scroll progress
    window.addEventListener('scroll', function() {
        const docHeight = document.documentElement.scrollHeight - window.innerHeight;
        const pct = docHeight > 0 ? (window.scrollY / docHeight) * 100 : 0;
        progress.style.width = pct + '%';
        progress.setAttribute('aria-valuenow', Math.round(pct));
        backTop.classList.toggle('visible', window.scrollY > 400);
    }, { passive: true });

    backTop.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));

    // Section collapse
    document.querySelectorAll('.policy-section-header').forEach(header => {
        header.addEventListener('click', () => header.closest('.policy-section').classList.toggle('collapsed'));
        header.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); header.click(); }});
    });

    document.getElementById('expandAll')?.addEventListener('click', () =>
        document.querySelectorAll('.policy-section').forEach(s => s.classList.remove('collapsed')));
    document.getElementById('collapseAll')?.addEventListener('click', () =>
        document.querySelectorAll('.policy-section').forEach(s => s.classList.add('collapsed')));

    // Dark mode
    function toggleTheme() {
        const isDark = page.getAttribute('data-theme') === 'dark';
        page.setAttribute('data-theme', isDark ? 'light' : 'dark');
        localStorage.setItem('gletra-policy-theme', isDark ? 'light' : 'dark');
    }
    const saved = localStorage.getItem('gletra-policy-theme');
    if (saved) page.setAttribute('data-theme', saved);
    if (window.matchMedia('(prefers-color-scheme: dark)').matches && !saved) page.setAttribute('data-theme', 'dark');

    document.getElementById('toggleDarkMode')?.addEventListener('click', toggleTheme);
    document.getElementById('toggleDarkModeMobile')?.addEventListener('click', toggleTheme);

    // TOC active state
    const sections = document.querySelectorAll('.policy-section, #policy-intro, #policy-faqs');
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const id = entry.target.id;
                document.querySelectorAll('.policy-toc-link').forEach(l => l.classList.remove('active'));
                document.querySelector(`.policy-toc-link[href="#${id}"]`)?.classList.add('active');
            }
        });
    }, { rootMargin: '-20% 0px -60% 0px' });
    sections.forEach(s => { if (s.id) observer.observe(s); });

    // Search within policy
    searchInput?.addEventListener('input', function() {
        const q = this.value.toLowerCase().trim();
        document.querySelectorAll('[data-searchable], .policy-intro').forEach(el => {
            if (!q) { el.style.display = ''; return; }
            el.style.display = el.textContent.toLowerCase().includes(q) ? '' : 'none';
        });
    });
})();
</script>
@endpush