@php
    // Access properties to trigger lazy loading
    $stats = $this->stats;
    $points = $this->paginatedPoints['data'];
    $pagination = $this->paginatedPoints;

    // Explicitly call the getter to ensure selectedPoint is loaded
    $selectedPointData = $this->selectedPoint;
    $selectedPoint = $selectedPointData;
    $selectedSkills = isset($selectedPoint) ? collect($selectedPoint['skills'] ?? []) : collect();

    // Get current phase filter
    $currentPhase = $this->currentPhase;
@endphp

<x-filament-panels::page>
    <div class="space-y-8">
        <div class="grid gap-4 md:grid-cols-4">
            @foreach($stats as $stat)
                <div class="rounded-2xl border border-gray-200/80 bg-white/70 px-5 py-4 shadow-sm dark:border-gray-800 dark:bg-gray-900/40">
                    <p class="text-sm text-gray-500">{{ $stat['label'] }}</p>
                    <p class="mt-2 text-2xl font-semibold text-gray-900 dark:text-gray-100">{{ $stat['value'] }}</p>
                    <p class="text-xs text-gray-400">{{ $stat['hint'] }}</p>
                </div>
            @endforeach
        </div>

        <div class="grid gap-6 lg:grid-cols-3">
            <div class="lg:col-span-1 space-y-6">
                <div class="rounded-2xl border border-gray-200 bg-white/80 px-4 py-3 shadow-sm dark:border-gray-800 dark:bg-gray-900/40">
                    <div class="relative">
                        <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400">
                            @svg('heroicon-m-magnifying-glass', 'h-4 w-4')
                        </span>
                        <input
                            type="text"
                            id="search-input"
                            x-on:change="handleSearch($event)"
                            x-on:keydown.enter="handleSearch($event)"
                            placeholder="搜索知识点或编号..."
                            class="w-full rounded-xl border border-gray-200 bg-white/80 py-2 pl-10 pr-3 text-sm placeholder:text-gray-400 focus:border-primary-300 focus:outline-none dark:border-gray-700 dark:bg-gray-900/60"
                        />
                    </div>
                    <div class="mt-4 grid gap-3 md:grid-cols-2">
                        <div class="relative">
                            <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400">
                                @svg('heroicon-m-academic-cap', 'h-4 w-4')
                            </span>
                            <select
                                onchange="updateFilter('phase', this.value)"
                                class="w-full rounded-xl border border-gray-200 bg-white/80 py-2 pl-10 pr-3 text-sm focus:border-primary-300 focus:outline-none dark:border-gray-700 dark:bg-gray-900/60"
                            >
                                <option value="">全部学段</option>
                                @foreach($this->phaseOptions as $value => $label)
                                    <option value="{{ $value }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="relative">
                            <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400">
                                @svg('heroicon-m-tag', 'h-4 w-4')
                            </span>
                            <select
                                onchange="updateFilter('category', this.value)"
                                class="w-full rounded-xl border border-gray-200 bg-white/80 py-2 pl-10 pr-3 text-sm focus:border-primary-300 focus:outline-none dark:border-gray-700 dark:bg-gray-900/60"
                            >
                                <option value="">全部类别</option>
                                @foreach($this->categoryOptions as $value => $label)
                                    <option value="{{ $value }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="rounded-2xl border border-gray-200 bg-white/90 px-4 py-4 shadow-sm dark:border-gray-800 dark:bg-gray-900/40">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">知识点列表</h3>
                        <p class="text-xs text-gray-500">{{ $pagination['total'] }} 个结果</p>
                    </div>
                    <div class="space-y-3">
                        @forelse($points as $point)
                            <button
                                onclick="selectPoint('{{ $point['kp_code'] }}')"
                                class="w-full rounded-xl border px-4 py-3 text-left transition @if($selectedPoint && $selectedPoint['kp_code'] === $point['kp_code']) border-primary-500 bg-primary-50/70 dark:bg-primary-500/10 @else border-gray-200 hover:border-primary-200 dark:border-gray-800 hover:shadow-md @endif"
                            >
                                <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ $point['cn_name'] }}</p>
                                <p class="text-xs text-gray-500">{{ $point['kp_code'] }} · {{ $point['phase'] ?? '未知学段' }}</p>
                                <div class="mt-2 flex items-center gap-2 text-xs text-gray-500">
                                    <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 dark:bg-gray-800">重要度 {{ $point['importance'] ?? '-' }}</span>
                                    <span>{{ $point['category'] ?? '未分类' }}</span>
                                </div>
                            </button>
                        @empty
                            <p class="text-sm text-gray-500">暂无数据</p>
                        @endforelse
                    </div>
                    <div class="mt-4 flex items-center justify-between text-xs text-gray-500">
                        <button
                            onclick="navigateToPage({{ $pagination['page'] - 1 }})"
                            @disabled(!$pagination['has_prev'])
                            class="rounded-full border px-3 py-1 @if(!$pagination['has_prev']) opacity-40 cursor-not-allowed @endif"
                        >
                            上一页
                        </button>
                        <span>第 {{ $pagination['page'] }} / {{ $pagination['total_pages'] }} 页</span>
                        <button
                            onclick="navigateToPage({{ $pagination['page'] + 1 }})"
                            @disabled(!$pagination['has_next'])
                            class="rounded-full border px-3 py-1 @if(!$pagination['has_next']) opacity-40 cursor-not-allowed @endif"
                        >
                            下一页
                        </button>
                    </div>
                </div>
            </div>

            <div class="lg:col-span-2 space-y-6">
                @if($selectedPoint)
                    <div class="rounded-3xl bg-gradient-to-br from-primary-500 via-primary-600 to-indigo-600 px-6 py-6 text-white shadow-xl">
                        <div class="flex flex-wrap items-start justify-between gap-4">
                            <div class="space-y-1">
                                <p class="text-xs uppercase tracking-[0.3em] text-white/80">Knowledge Node</p>
                                <h1 class="text-3xl font-semibold">{{ $selectedPoint['cn_name'] }} <span class="text-sm font-normal text-white/70">({{ $selectedPoint['kp_code'] }})</span></h1>
                                <div class="flex flex-wrap gap-2 text-sm text-white/90">
                                    <span class="inline-flex items-center gap-1 rounded-full bg-white/15 px-3 py-1">
                                        {{ $selectedPoint['category'] ?? '未分类' }}
                                    </span>
                                    <span class="inline-flex items-center gap-1 rounded-full bg-white/15 px-3 py-1">
                                        {{ $selectedPoint['phase'] ?? '未知学段' }} @if($selectedPoint['grade']) · {{ $selectedPoint['grade'] }} 年级 @endif
                                    </span>
                                </div>
                            </div>
                            <div class="flex gap-4 text-right">
                                <div>
                                    <p class="text-xs uppercase tracking-widest text-white/70">重要度</p>
                                    <p class="text-3xl font-semibold">{{ number_format((float) ($selectedPoint['importance'] ?? 0), 1) }}</p>
                                    <p class="text-xs text-white/80">教研权重</p>
                                </div>
                                <div>
                                    <p class="text-xs uppercase tracking-widest text-white/70">技能</p>
                                    <p class="text-3xl font-semibold">{{ $selectedSkills->count() }}</p>
                                    <p class="text-xs text-white/80">拆解单元</p>
                                </div>
                            </div>
                        </div>
                        <div class="mt-6">
                            <a href="/admin/knowledge-point-detail?kp_code={{ $selectedPoint['kp_code'] }}@if($currentPhase)&phase={{ urlencode($currentPhase) }}@endif"
                               class="inline-flex items-center gap-2 rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-primary-600 hover:bg-primary-50 transition shadow-sm">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
                                </svg>
                                <span>查看完整知识图谱</span>
                            </a>
                        </div>
                      </div>

                    <div class="rounded-2xl border border-gray-200 bg-white/90 px-5 py-5 shadow-sm dark:border-gray-800 dark:bg-gray-900/50">
                        <h3 class="text-sm font-semibold text-gray-600 dark:text-gray-300">知识路径</h3>
                        <p class="mt-2 text-sm text-gray-900 dark:text-gray-100">{{ $selectedPoint['group_path'] ?? '尚未设置路径。' }}</p>

                        <div class="mt-4 grid gap-4 lg:grid-cols-2">
                            <div>
                                <h4 class="text-sm font-semibold text-gray-600 dark:text-gray-300">描述 / 知识意图</h4>
                                <p class="mt-2 rounded-xl bg-gray-50 px-4 py-3 text-sm text-gray-600 dark:bg-gray-800/40 dark:text-gray-300">
                                    {!! nl2br(e($selectedPoint['description'] ?? '暂无描述，建议补充课堂目标、典型错因等内容。')) !!}
                                </p>
                            </div>
                            <div>
                                <h4 class="text-sm font-semibold text-gray-600 dark:text-gray-300">先修关系</h4>
                                <div class="mt-2 rounded-xl border border-gray-200 px-4 py-4 dark:border-gray-700">
                                    @if(!empty($selectedPoint['parent_details']))
                                        <ol class="relative border-l border-dashed border-primary-200 dark:border-primary-400/50 pl-4">
                                            @foreach($selectedPoint['parent_details'] as $parent)
                                                <li class="mb-4 ml-2">
                                                    <span class="absolute -left-1.5 mt-1 h-3 w-3 rounded-full border-2 border-white bg-primary-400 dark:border-gray-900"></span>
                                                    <a href="/admin/knowledge-point-detail?kp_code={{ $parent['kp_code'] }}@if($currentPhase)&phase={{ urlencode($currentPhase) }}@endif"
                                                       class="text-sm font-medium text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 hover:underline cursor-pointer">
                                                        {{ $parent['cn_name'] }}
                                                    </a>
                                                    <p class="text-xs text-gray-500">触发该节点之前需掌握</p>
                                                </li>
                                            @endforeach
                                        </ol>
                                    @elseif(!empty($selectedPoint['parents']))
                                        <ol class="relative border-l border-dashed border-primary-200 dark:border-primary-400/50 pl-4">
                                            @foreach($selectedPoint['parents'] as $parent)
                                                <li class="mb-4 ml-2">
                                                    <span class="absolute -left-1.5 mt-1 h-3 w-3 rounded-full border-2 border-white bg-primary-400 dark:border-gray-900"></span>
                                                    <a href="/admin/knowledge-point-detail?kp_code={{ $parent }}@if($currentPhase)&phase={{ urlencode($currentPhase) }}@endif"
                                                       class="text-sm font-medium text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 hover:underline cursor-pointer">
                                                        {{ $parent }}
                                                    </a>
                                                    <p class="text-xs text-gray-500">触发该节点之前需掌握</p>
                                                </li>
                                            @endforeach
                                        </ol>
                                    @else
                                        <p class="text-sm text-gray-500">无父节点，可能是一级知识点。</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-gray-200 bg-white/90 px-5 py-5 shadow-sm dark:border-gray-800 dark:bg-gray-900/50">
                        <div class="flex items-center justify-between">
                            <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">技能拆解</h3>
                            <span class="text-xs text-gray-500">{{ $selectedSkills->count() }} 项</span>
                        </div>
                        @if($selectedSkills->isEmpty())
                            <p class="mt-4 rounded-xl border border-dashed border-gray-300 px-4 py-6 text-center text-sm text-gray-500 dark:border-gray-700/60">
                                该知识点尚未配置技能，建议补充规则步骤、策略和应用场景，便于题库筛选。
                            </p>
                        @else
                            <div class="mt-4 grid gap-4 md:grid-cols-2">
                                @foreach($selectedSkills as $skill)
                                    <div class="rounded-2xl border border-gray-200 bg-white px-4 py-4 shadow-sm dark:border-gray-700/60 dark:bg-gray-900/40">
                                        <div class="flex items-start justify-between">
                                            <div>
                                                <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ $skill['skill_name'] ?? '未命名技能' }}</p>
                                                <p class="text-xs text-gray-500">{{ $skill['skill_type'] ?? '类型未知' }}</p>
                                            </div>
                                            <span class="inline-flex items-center gap-1 rounded-full bg-primary-50 px-2.5 py-0.5 text-xs font-medium text-primary-700 dark:bg-primary-500/10 dark:text-primary-300">
                                                难度 {{ $skill['difficulty'] ?? '-' }}
                                            </span>
                                        </div>
                                        <p class="mt-3 text-sm leading-relaxed text-gray-600 dark:text-gray-300">
                                            {{ $skill['description'] ?? '暂无描述' }}
                                        </p>
                                        @if(!empty($skill['examples']))
                                            <div class="mt-3 rounded-lg bg-gray-50 px-3 py-2 text-xs text-gray-500 dark:bg-gray-800/50 dark:text-gray-300">
                                                <p class="font-medium text-gray-600 dark:text-gray-200">例题提示：</p>
                                                {{ $skill['examples'][0]['prompt'] ?? '' }}
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                @else
                    <div class="rounded-2xl border border-dashed border-gray-300 px-6 py-12 text-center text-gray-500">
                        请选择左侧任意知识点查看详情。
                    </div>
                @endif
            </div>
        </div>
    </div>

    <script>
        // Initialize search input from URL on page load
        document.addEventListener('DOMContentLoaded', () => {
            const urlParams = new URLSearchParams(window.location.search);
            const searchParam = urlParams.get('search');
            const searchInput = document.getElementById('search-input');
            if (searchInput && searchParam) {
                searchInput.value = searchParam;
            }
        });

        function handleSearch(event) {
            const query = event.target.value.trim();

            if (query === '') {
                // If search is cleared, remove search param
                const url = new URL(window.location.href);
                url.searchParams.delete('search');
                // Reset to page 1
                url.searchParams.set('page', 1);
                window.location.href = url.toString();
                return;
            }

            // Only update if query changed
            const currentUrl = new URL(window.location.href);
            const currentSearch = currentUrl.searchParams.get('search') || '';

            if (query !== currentSearch) {
                const url = new URL(window.location.href);
                url.searchParams.set('search', query);
                url.searchParams.set('page', 1); // Reset to first page
                window.location.href = url.toString();
            }
        }

        function navigateToPage(page) {
            const url = new URL(window.location.href);
            url.searchParams.set('page', page);
            window.location.href = url.toString();
        }

        function selectPoint(kpCode) {
            const url = new URL(window.location.href);
            url.searchParams.set('selected', kpCode);
            window.location.href = url.toString();
        }

        function updateFilter(filterName, value) {
            const url = new URL(window.location.href);
            if (value) {
                url.searchParams.set(filterName, value);
            } else {
                url.searchParams.delete(filterName);
            }
            // Reset to page 1 when filters change
            url.searchParams.set('page', 1);
            window.location.href = url.toString();
        }
    </script>
</x-filament-panels::page>