{{--
    The glossary. Content is config/knowledge_base.php (definitions live one
    file per section under resources/knowledge/); this view only presents it.

    Layout: a sticky topic rail on the left (a scrollable chip row on mobile)
    and the definitions on the right. Every definition renders through
    partials/entry, so the topic view, the A-Z view and the focused term can
    never drift apart visually.
--}}
@php
    // Per-topic colour. Written out in full because Tailwind only ships classes
    // it can see in the source, interpolated class names would not survive the
    // build.
    $tone = [
        'brand'   => ['chip' => 'bg-brand-50 text-brand-600 ring-brand-100',     'rail' => 'bg-brand-50 text-brand-800 ring-brand-200',     'bar' => 'bg-brand-500',   'dot' => 'bg-brand-400'],
        'accent'  => ['chip' => 'bg-accent-50 text-accent-600 ring-accent-100',  'rail' => 'bg-accent-50 text-accent-800 ring-accent-200',  'bar' => 'bg-accent-500',  'dot' => 'bg-accent-400'],
        'emerald' => ['chip' => 'bg-emerald-50 text-emerald-600 ring-emerald-100', 'rail' => 'bg-emerald-50 text-emerald-800 ring-emerald-200', 'bar' => 'bg-emerald-500', 'dot' => 'bg-emerald-400'],
        'sky'     => ['chip' => 'bg-sky-50 text-sky-600 ring-sky-100',           'rail' => 'bg-sky-50 text-sky-800 ring-sky-200',           'bar' => 'bg-sky-500',     'dot' => 'bg-sky-400'],
        'amber'   => ['chip' => 'bg-amber-50 text-amber-600 ring-amber-100',     'rail' => 'bg-amber-50 text-amber-800 ring-amber-200',     'bar' => 'bg-amber-500',   'dot' => 'bg-amber-400'],
        'rose'    => ['chip' => 'bg-rose-50 text-rose-600 ring-rose-100',        'rail' => 'bg-rose-50 text-rose-800 ring-rose-200',        'bar' => 'bg-rose-500',    'dot' => 'bg-rose-400'],
        'cyan'    => ['chip' => 'bg-cyan-50 text-cyan-600 ring-cyan-100',        'rail' => 'bg-cyan-50 text-cyan-800 ring-cyan-200',        'bar' => 'bg-cyan-500',    'dot' => 'bg-cyan-400'],
        'orange'  => ['chip' => 'bg-orange-50 text-orange-600 ring-orange-100',  'rail' => 'bg-orange-50 text-orange-800 ring-orange-200',  'bar' => 'bg-orange-500',  'dot' => 'bg-orange-400'],
        'slate'   => ['chip' => 'bg-slate-100 text-slate-600 ring-slate-200',    'rail' => 'bg-slate-100 text-slate-800 ring-slate-300',    'bar' => 'bg-slate-400',   'dot' => 'bg-slate-400'],
    ];

    // Wrap search matches in a <mark>. The text is escaped BEFORE the pattern
    // is applied and the needle is escaped too, so this stays safe to print raw.
    $needle = trim($search);
    $hl = function (?string $text) use ($needle): string {
        $safe = e((string) $text);

        if ($needle === '') {
            return $safe;
        }

        return preg_replace(
            '/('.preg_quote(e($needle), '/').')/i',
            '<mark class="rounded-[3px] bg-amber-100 px-0.5 text-slate-900">$1</mark>',
            $safe,
        ) ?? $safe;
    };
@endphp

<div
    class="px-4 py-8 sm:px-6 lg:px-8"
    x-data="{
        copied: null,
        copy(slug) {
            const url = window.location.origin + window.location.pathname + '?term=' + slug;
            navigator.clipboard?.writeText(url);
            this.copied = slug;
            setTimeout(() => { if (this.copied === slug) this.copied = null }, 1600);
        },
    }"
    {{-- '/' focuses the search from anywhere on the page, Escape clears it. --}}
    x-on:keydown.window="
        if ($event.key === '/' && !['INPUT','TEXTAREA','SELECT'].includes(document.activeElement?.tagName)) {
            $event.preventDefault();
            $refs.kbSearch?.focus();
        }
    "
>
    <div class="mx-auto max-w-7xl space-y-6">

        <x-page-header
            :title="__('Knowledge Base')"
            :subtitle="__('Every term the system uses, in plain English, and where to find it.')">
            <a href="{{ route('releases.index') }}" wire:navigate>
                <x-secondary-button type="button">
                    <x-icon name="sparkles" class="mr-1.5 h-4 w-4" />
                    {{ __("What's new") }}
                </x-secondary-button>
            </a>
        </x-page-header>

        {{-- ── Search ────────────────────────────────────────────────────── --}}
        <x-card class="overflow-hidden">
            <div class="relative overflow-hidden border-b border-slate-100 bg-brand-gradient px-5 py-6 sm:px-8 sm:py-8">
                {{-- Soft light behind the search field, purely decorative. --}}
                <div class="pointer-events-none absolute -right-24 -top-24 h-64 w-64 rounded-full bg-accent-400/20 blur-3xl"></div>
                <div class="pointer-events-none absolute -bottom-32 left-1/3 h-64 w-64 rounded-full bg-white/5 blur-3xl"></div>

                <div class="relative mx-auto max-w-3xl text-center">
                    <h2 class="text-xl font-bold tracking-tight text-white sm:text-2xl">
                        {{ __('What would you like explained?') }}
                    </h2>
                    <p class="mx-auto mt-1.5 max-w-xl text-sm text-slate-300">
                        {{ __('Search a word you saw on a screen, a line on a report, or a term someone used in a meeting.') }}
                    </p>

                    <div class="relative mt-5">
                        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400">
                            <x-icon name="magnifying-glass" class="h-5 w-5" />
                        </span>
                        <input
                            type="search"
                            x-ref="kbSearch"
                            wire:model.live.debounce.300ms="search"
                            placeholder="{{ __('Try “gross profit”, “offcut”, “void”…') }}"
                            aria-label="{{ __('Search the knowledge base') }}"
                            class="block w-full rounded-2xl border-0 bg-white/95 py-3.5 pl-12 pr-24 text-sm text-slate-900 shadow-lg ring-1 ring-white/20 transition placeholder:text-slate-400 focus:bg-white focus:ring-2 focus:ring-accent-300" />
                        <span class="pointer-events-none absolute inset-y-0 right-0 hidden items-center pr-4 sm:flex">
                            @if ($search !== '')
                                <span class="text-[11px] font-semibold tabular-nums text-slate-400">
                                    {{ trans_choice(':count match|:count matches', $results->count(), ['count' => $results->count()]) }}
                                </span>
                            @else
                                <kbd class="rounded-md border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10px] font-semibold text-slate-400">/</kbd>
                            @endif
                        </span>
                    </div>

                    {{-- Start-here chips, only on a clean page. --}}
                    @if ($featured->isNotEmpty())
                        <div class="mt-4 flex flex-wrap items-center justify-center gap-1.5">
                            <span class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Start here') }}</span>
                            @foreach ($featured as $pick)
                                <button type="button" wire:click="jumpTo('{{ $pick['slug'] }}')"
                                    class="rounded-full bg-white/10 px-2.5 py-1 text-[11px] font-medium text-slate-200 ring-1 ring-white/15 transition hover:bg-white/20 hover:text-white">
                                    {{ $pick['term'] }}
                                </button>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

            {{-- Headline counts --}}
            <div class="grid grid-cols-2 divide-slate-100 sm:grid-cols-4 sm:divide-x">
                @php
                    $tiles = [
                        ['label' => __('Terms defined'), 'value' => $stats['terms'],    'icon' => 'book-open',              'chip' => 'bg-brand-50 text-brand-600'],
                        ['label' => __('Topics'),        'value' => $stats['sections'], 'icon' => 'squares-2x2',            'chip' => 'bg-emerald-50 text-emerald-600'],
                        ['label' => __('Pages linked'),  'value' => $stats['linked'],   'icon' => 'link',                   'chip' => 'bg-sky-50 text-sky-600'],
                        ['label' => __('Other names'),   'value' => $stats['aliases'],  'icon' => 'chat-bubble-left-right', 'chip' => 'bg-amber-50 text-amber-600'],
                    ];
                @endphp
                @foreach ($tiles as $tile)
                    <div class="flex items-center gap-3 p-4 sm:p-5">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $tile['chip'] }}">
                            <x-icon :name="$tile['icon']" class="h-5 w-5" />
                        </span>
                        <div class="min-w-0">
                            <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ $tile['label'] }}</p>
                            <p class="text-base font-bold tabular-nums text-slate-900">{{ number_format($tile['value']) }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </x-card>

        {{-- ── Rail + results ────────────────────────────────────────────── --}}
        <div class="grid items-start gap-6 lg:grid-cols-[16rem_minmax(0,1fr)]">

            {{-- Topic rail: vertical and sticky on desktop, a scrolling chip row on mobile --}}
            {{-- top-20 clears the sticky app header (h-16). --}}
            <nav aria-label="{{ __('Topics') }}" class="lg:sticky lg:top-20">
                <div class="-mx-4 flex gap-2 overflow-x-auto px-4 pb-2 lg:mx-0 lg:flex-col lg:gap-1 lg:overflow-visible lg:rounded-2xl lg:bg-white lg:p-2 lg:px-2 lg:pb-2 lg:shadow-[0_1px_2px_rgba(15,23,42,0.04),0_8px_24px_-12px_rgba(15,23,42,0.08)] lg:ring-1 lg:ring-slate-200/60">
                    <p class="hidden px-2 pb-1 pt-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-400 lg:block">
                        {{ __('Browse by topic') }}
                    </p>

                    <button type="button" wire:click="switchSection('')"
                        @class([
                            'flex shrink-0 items-center gap-2.5 rounded-xl px-3 py-2 text-[13px] font-medium ring-1 transition lg:w-full',
                            'bg-slate-900 text-white ring-slate-900' => $section === '',
                            'bg-white text-slate-600 ring-slate-200 hover:bg-slate-50 hover:text-slate-900 lg:bg-transparent lg:ring-transparent' => $section !== '',
                        ])>
                        <x-icon name="queue-list" class="h-4 w-4 shrink-0 {{ $section === '' ? 'text-white' : 'text-slate-400' }}" />
                        <span class="whitespace-nowrap">{{ __('Everything') }}</span>
                        <span @class([
                            'ml-auto hidden rounded-full px-1.5 text-[10px] font-bold tabular-nums lg:inline-block',
                            'bg-white/15 text-white' => $section === '',
                            'bg-slate-100 text-slate-500' => $section !== '',
                        ])>{{ $stats['terms'] }}</span>
                    </button>

                    @foreach ($sections as $s)
                        @php
                            $t = $tone[$s['tone'] ?? 'slate'] ?? $tone['slate'];
                            $on = $section === $s['key'];
                        @endphp
                        <button type="button" wire:click="switchSection('{{ $s['key'] }}')"
                            @class([
                                'group flex shrink-0 items-center gap-2.5 rounded-xl px-3 py-2 text-[13px] font-medium ring-1 transition lg:w-full',
                                $t['rail'] => $on,
                                'bg-white text-slate-600 ring-slate-200 hover:bg-slate-50 hover:text-slate-900 lg:bg-transparent lg:ring-transparent' => ! $on,
                            ])>
                            <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg ring-1 {{ $t['chip'] }}">
                                <x-icon :name="$s['icon']" class="h-3.5 w-3.5" />
                            </span>
                            <span class="whitespace-nowrap lg:truncate">{{ $s['label'] }}</span>
                            <span @class([
                                'ml-auto hidden rounded-full px-1.5 text-[10px] font-bold tabular-nums lg:inline-block',
                                'bg-white/70 text-slate-600' => $on,
                                'bg-slate-100 text-slate-500' => ! $on,
                            ])>{{ $s['count'] }}</span>
                        </button>
                    @endforeach
                </div>
            </nav>

            {{-- Results column --}}
            <div class="min-w-0 space-y-5">

                {{-- Toolbar: what you are looking at + how it is listed --}}
                <div class="flex flex-col gap-3 rounded-2xl border border-slate-200 bg-white/70 px-4 py-3 backdrop-blur sm:flex-row sm:items-center sm:justify-between">
                    <div class="flex min-w-0 flex-wrap items-center gap-2 text-sm">
                        <span class="font-semibold text-slate-900">
                            {{ trans_choice(':count term|:count terms', $results->count(), ['count' => $results->count()]) }}
                        </span>
                        @if ($section !== '')
                            @php $current = $sections->firstWhere('key', $section); @endphp
                            <x-badge color="slate" class="gap-1.5">
                                <x-icon :name="$current['icon'] ?? 'queue-list'" class="h-3 w-3" />
                                {{ $current['label'] ?? $section }}
                                <button type="button" wire:click="switchSection('{{ $section }}')" class="text-slate-400 transition hover:text-slate-700" aria-label="{{ __('Clear topic') }}">
                                    <x-icon name="x-mark" class="h-3 w-3" />
                                </button>
                            </x-badge>
                        @endif
                        @if ($search !== '')
                            <x-badge color="brand" class="gap-1.5">
                                <x-icon name="magnifying-glass" class="h-3 w-3" />
                                “{{ \Illuminate\Support\Str::limit($search, 24) }}”
                                <button type="button" wire:click="$set('search', '')" class="text-brand-400 transition hover:text-brand-700" aria-label="{{ __('Clear search') }}">
                                    <x-icon name="x-mark" class="h-3 w-3" />
                                </button>
                            </x-badge>
                        @endif
                    </div>

                    <div class="flex shrink-0 items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                        <button type="button" wire:click="switchMode('topic')"
                            class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 transition {{ $mode === 'topic' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                            <x-icon name="squares-2x2" class="h-4 w-4" />
                            {{ __('By topic') }}
                        </button>
                        <button type="button" wire:click="switchMode('az')"
                            class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 transition {{ $mode === 'az' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                            <x-icon name="queue-list" class="h-4 w-4" />
                            {{ __('A–Z') }}
                        </button>
                    </div>
                </div>

                {{-- One term, deep-linked or jumped to --}}
                @if ($focused)
                    <x-card class="overflow-hidden ring-2 ring-brand-200">
                        <div class="flex items-center justify-between gap-3 border-b border-slate-100 bg-brand-50/60 px-5 py-2.5">
                            <p class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-brand-700">
                                <x-icon name="map-pin" class="h-3.5 w-3.5" />
                                {{ __('You jumped to') }}
                            </p>
                            <button type="button" wire:click="$set('focus', '')" class="text-xs font-medium text-slate-500 transition hover:text-slate-700">
                                {{ __('Close') }}
                            </button>
                        </div>
                        <div class="p-5">
                            @include('livewire.knowledge.partials.entry', ['entry' => $focused])
                        </div>
                    </x-card>
                @endif

                @if ($results->isEmpty())
                    <x-card class="p-6">
                        <x-empty-state
                            icon="magnifying-glass"
                            :title="__('Nothing matches that')"
                            :message="__('Try a shorter word, or browse a topic. If it is a real feature of the system and it is not here, it is a gap worth reporting.')"
                            class="border-0 bg-transparent py-6">
                            <x-secondary-button type="button" wire:click="clearFilters">
                                <x-icon name="arrow-path" class="mr-1.5 h-4 w-4" />
                                {{ __('Start again') }}
                            </x-secondary-button>
                        </x-empty-state>
                    </x-card>

                @elseif ($mode === 'az')
                    {{-- Letter jump strip --}}
                    <div class="flex flex-wrap items-center gap-1 rounded-2xl border border-slate-200 bg-white px-3 py-2.5">
                        <span class="mr-1 text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Jump to') }}</span>
                        @foreach (range('A', 'Z') as $letter)
                            @if ($alphabet->has($letter))
                                <a href="#letter-{{ $letter }}"
                                   class="flex h-7 w-7 items-center justify-center rounded-lg text-xs font-bold text-slate-600 transition hover:bg-brand-50 hover:text-brand-700">
                                    {{ $letter }}
                                </a>
                            @else
                                <span class="flex h-7 w-7 cursor-default items-center justify-center rounded-lg text-xs font-medium text-slate-300">{{ $letter }}</span>
                            @endif
                        @endforeach
                    </div>

                    @foreach ($alphabet as $letter => $entries)
                        <section wire:key="letter-{{ $letter }}" id="letter-{{ $letter }}" class="scroll-mt-24 space-y-3">
                            <div class="flex items-center gap-3">
                                <span class="flex h-8 w-8 items-center justify-center rounded-xl bg-slate-900 text-xs font-bold text-white">{{ $letter }}</span>
                                <span class="h-px flex-1 bg-slate-200"></span>
                                <span class="text-[11px] font-semibold tabular-nums text-slate-400">{{ $entries->count() }}</span>
                            </div>
                            <div class="grid gap-4 xl:grid-cols-2">
                                @foreach ($entries as $entry)
                                    <x-card wire:key="az-{{ $entry['slug'] }}" id="term-{{ $entry['slug'] }}" class="flex flex-col p-5">
                                        @include('livewire.knowledge.partials.entry', ['entry' => $entry])
                                    </x-card>
                                @endforeach
                            </div>
                        </section>
                    @endforeach

                @else
                    @foreach ($grouped as $group)
                        @php $t = $tone[$group['tone'] ?? 'slate'] ?? $tone['slate']; @endphp
                        <section wire:key="section-{{ $group['key'] }}" id="topic-{{ $group['key'] }}" class="scroll-mt-24 space-y-4">
                            <div class="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-4 py-3">
                                <span class="h-8 w-1 shrink-0 rounded-full {{ $t['bar'] }}"></span>
                                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl ring-1 {{ $t['chip'] }}">
                                    <x-icon :name="$group['icon']" class="h-[18px] w-[18px]" />
                                </span>
                                <div class="min-w-0">
                                    <h2 class="text-[15px] font-bold tracking-tight text-slate-900">{{ $group['label'] }}</h2>
                                    <p class="truncate text-xs text-slate-500">{{ $group['blurb'] }}</p>
                                </div>
                                <span class="ml-auto shrink-0 rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-semibold tabular-nums text-slate-600">
                                    {{ $group['entries']->count() }}
                                </span>
                            </div>

                            <div class="grid gap-4 xl:grid-cols-2">
                                @foreach ($group['entries'] as $entry)
                                    <x-card wire:key="entry-{{ $entry['slug'] }}" id="term-{{ $entry['slug'] }}" class="flex flex-col p-5">
                                        @include('livewire.knowledge.partials.entry', ['entry' => $entry])
                                    </x-card>
                                @endforeach
                            </div>
                        </section>
                    @endforeach
                @endif

                {{-- Footer note: how this page stays honest --}}
                <div class="rounded-2xl border border-dashed border-slate-300 bg-slate-50/60 px-5 py-4 text-center">
                    <p class="text-xs text-slate-500">
                        {{ __('This page ships with the system and is updated with every release, so it always describes the version you are running.') }}
                        <a href="{{ route('releases.index') }}" wire:navigate class="font-semibold text-indigo-600 transition hover:text-indigo-800">{{ __('See what changed recently') }}</a>
                    </p>
                </div>
            </div>
        </div>

        {{-- Back to top, appears once you are well down the page --}}
        <div x-data="{ show: false }" x-on:scroll.window="show = window.scrollY > 700" class="pointer-events-none fixed bottom-20 right-5 z-30 sm:bottom-6 sm:right-6">
            <button type="button"
                x-show="show" x-cloak x-transition
                x-on:click="window.scrollTo({ top: 0, behavior: 'smooth' })"
                class="pointer-events-auto flex h-11 w-11 items-center justify-center rounded-full bg-slate-900 text-white shadow-lg ring-1 ring-white/10 transition hover:bg-slate-800"
                aria-label="{{ __('Back to top') }}">
                <x-icon name="arrow-up" class="h-4 w-4" />
            </button>
        </div>

    </div>
</div>