@extends('layouts.public')

@section('content')
@php

/**
 * CMS page renderer. Renders an admin-authored page through one of two
 * design-system templates, chosen by slug:
 *   - privacy / terms → .qm-legal layout (sticky TOC + "Last updated" meta)
 *   - everything else → .qm-article long-form prose card
 *
 * There was a third: an FAQ accordion assembled by walking the body's
 * <h2>/<h3>/<p> structure. It is gone with the FAQ page itself — the Help
 * Centre is the product's one FAQ surface, and it holds real question and
 * answer pairs instead of prose that had to be parsed back into them.
 *
 * The page body is sanitised on save (admin side); legal pages are structured
 * as <h2 id> sections with a leading <p class="qm-legal-meta">.
 *
 * @var array $page  pages row: title, body, slug, updated_at, meta_description
 */
$slug = (string) ($page['slug'] ?? '');
$body = (string) ($page['body'] ?? '');
$title = (string) ($page['title'] ?? '');
$legalSlugs = ['privacy', 'terms', 'cookies', 'refund', 'refund-policy', 'cookie-policy'];

/**
 * Parse an HTML fragment into a DOMDocument body node. Returns null when the
 * fragment is empty or cannot be parsed (the caller then falls back to the
 * plain article template, so no page ever renders blank).
 */
$loadDom = static function (string $html): ?DOMElement {
    $html = trim($html);
    if ($html === '' || !class_exists('DOMDocument')) {
        return null;
    }
    $doc = new DOMDocument();
    $prev = libxml_use_internal_errors(true);
    // Wrap so multibyte content is decoded as UTF-8 and we have a single root.
    $ok = $doc->loadHTML(
        '<?xml encoding="UTF-8"><div id="qm-cms-root">' . $html . '</div>',
        LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD
    );
    libxml_clear_errors();
    libxml_use_internal_errors($prev);
    if (!$ok) {
        return null;
    }
    $root = $doc->getElementById('qm-cms-root');
    return $root instanceof DOMElement ? $root : null;
};

/** Inner HTML of a DOM node (its children serialised). */
$innerHtml = static function (DOMNode $node): string {
    $html = '';
    foreach ($node->childNodes as $child) {
        $html .= $node->ownerDocument->saveHTML($child);
    }
    return trim($html);
};

/* ====================== LEGAL TEMPLATE (privacy/terms) ====================== */
if (in_array($slug, $legalSlugs, true)) {
    $toc = [];          // [['id' => ..., 'label' => ...], ...]
    $lastUpdated = '';  // text pulled from a leading .qm-legal-meta paragraph
    $contentHtml = '';

    $root = $loadDom($body);
    if ($root) {
        foreach ($root->childNodes as $node) {
            if ($node instanceof DOMElement) {
                $tag = strtolower($node->nodeName);
                // Lift a "Last updated …" meta line out of the body into the meta row.
                if ($lastUpdated === '' && $tag === 'p'
                    && strpos((string) $node->getAttribute('class'), 'qm-legal-meta') !== false) {
                    $lastUpdated = trim(strip_tags($innerHtml($node)));
                    continue;
                }
                if ($tag === 'h2' && $node->getAttribute('id') !== '') {
                    $toc[] = ['id' => $node->getAttribute('id'), 'label' => trim(strip_tags($innerHtml($node)))];
                }
            }
            $contentHtml .= $root->ownerDocument->saveHTML($node);
        }
    }
    if (trim($contentHtml) === '') {
        $contentHtml = $body;
    }
    // Normalise a "Last updated: <date>" prefix so the label reads cleanly.
    $lastUpdated = preg_replace('/^\s*last updated\s*:?\s*/i', '', $lastUpdated);
@endphp
    @partial('subheader', [
        'type'   => 'page',
        'title'  => $title,
        'crumbs' => [['label' => t_raw('common.home'), 'url' => route('home')], ['label' => $title]],
    ])
    <section class="qm-section">
        <div class="container-fluid">
            <div class="qm-legal">
                @if ($toc)
                <nav class="qm-legal-toc" aria-label="{{ t_raw('page.legal_toc_title') }}">
                    <p class="qm-legal-toc-title">{{ t_raw('page.legal_toc_title') }}</p>
                    <ul>
                        @foreach ($toc as $t)
                        <li><a href="#{{ $t['id'] }}" data-legal-link>{{ $t['label'] }}</a></li>
                        @endforeach
                    </ul>
                </nav>
                @endif
                <div class="qm-legal-body">
                    @if ($lastUpdated !== '')
                    <p class="qm-legal-meta"><i class="far fa-calendar-alt" aria-hidden="true"></i> {{ t_raw('page.last_updated_prefix', [':date' => $lastUpdated]) }}</p>
                    @endif
                    <div class="qm-article-body">{!! $contentHtml /* admin-authored, sanitised on save */ !!}</div>
                </div>
            </div>
        </div>
    </section>
    @if ($toc)
    <script>
    (function () {
        var links = Array.prototype.slice.call(document.querySelectorAll('[data-legal-link]'));
        if (!links.length || !('IntersectionObserver' in window)) { return; }
        var byId = {};
        links.forEach(function (a) { byId[a.getAttribute('href').slice(1)] = a; });
        var heads = links.map(function (a) { return document.getElementById(a.getAttribute('href').slice(1)); }).filter(Boolean);
        var io = new IntersectionObserver(function (entries) {
            entries.forEach(function (en) {
                if (en.isIntersecting) {
                    links.forEach(function (a) { a.classList.remove('is-active'); });
                    var active = byId[en.target.id];
                    if (active) { active.classList.add('is-active'); }
                }
            });
        }, { rootMargin: '-110px 0px -70% 0px', threshold: 0 });
        heads.forEach(function (h) { io.observe(h); });
    })();
    </script>
    @endif
    @php
    return;
}

/* ======================= GENERIC ARTICLE TEMPLATE ======================= */
@endphp
@partial('subheader', [
    'type'   => 'page',
    'title'  => $title,
    'crumbs' => [['label' => t_raw('common.home'), 'url' => route('home')], ['label' => $title]],
])
<section class="qm-section">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-9 mx-auto">
                <div class="qm-card qm-article">
                    <div class="qm-article-body">{{ $body /* admin-authored, sanitised on save */ }}</div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection