@props([
    'open' => false,
    'details' => [],
    'closeAction' => 'closeDrawer',
    'selectAction' => 'openDrawer',
    'panelTitle' => '知识点详情',
])

@php
    $mastery = $details['mastery_level'] ?? 0;
    $errorRate = $details['error_rate'] ?? 0;
    $name = $details['name'] ?? '';
    $code = $details['code'] ?? '';
@endphp

<div
    x-cloak
    x-show="@js($open)"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="translate-x-full opacity-50"
    x-transition:enter-end="translate-x-0 opacity-100"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="translate-x-0 opacity-100"
    x-transition:leave-end="translate-x-full opacity-0"
    class="fixed inset-y-0 right-0 w-full max-w-xl z-50"
    aria-live="polite"
>
    <div class="h-full bg-gradient-to-b from-white/95 to-slate-50/95 backdrop-blur border-l border-white/60 shadow-2xl overflow-y-auto">
        <div class="p-6 space-y-6">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-xs uppercase tracking-[0.3em] text-slate-400">Mindmap Drawer</p>
                    <h3 class="mt-1 text-2xl font-bold text-slate-900 leading-tight">{{ $panelTitle }}</h3>
                </div>
                <button
                    wire:click="{{ $closeAction }}"
                    type="button"
                    class="p-2 rounded-full bg-white/80 border border-slate-200 text-slate-500 hover:text-slate-700 hover:shadow"
                    aria-label="关闭"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            <div class="rounded-2xl border border-white/60 bg-white/80 shadow-inner p-5 space-y-3">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-slate-500">编号 {{ $code }}</p>
                        <h4 class="text-xl font-semibold text-slate-900">{{ $name }}</h4>
                    </div>
                    <div class="px-3 py-1.5 rounded-full text-xs font-semibold bg-gradient-to-r from-emerald-50 to-amber-50 text-emerald-700 border border-emerald-100">
                        掌握度 {{ number_format($mastery * 100, 1) }}%
                    </div>
                </div>

                <x-mindmap.mastery-meter :value="$mastery" :error-rate="$errorRate" />
            </div>

            @if(!empty($details['skills']))
                <div class="rounded-2xl border border-white/60 bg-white/80 shadow-sm p-4">
                    <p class="text-sm font-semibold text-slate-800 mb-3">关联技能</p>
                    <div class="flex flex-wrap gap-2">
                        @foreach($details['skills'] as $skill)
                            <span class="px-3 py-1 rounded-full text-xs bg-indigo-50 text-indigo-700 border border-indigo-100">
                                {{ $skill }}
                            </span>
                        @endforeach
                    </div>
                </div>
            @endif

            @if(!empty($details['prerequisites']))
                <div class="rounded-2xl border border-white/60 bg-white/80 shadow-sm p-4 space-y-3">
                    <p class="text-sm font-semibold text-slate-800">前置知识</p>
                    <div class="space-y-2">
                        @foreach($details['prerequisites'] as $prereq)
                            <button
                                wire:click="$parent.openPrerequisiteDrawer('{{ $prereq['id'] }}')"
                                type="button"
                                class="w-full flex items-center justify-between px-3 py-2 rounded-lg border border-slate-200/70 bg-white/60 hover:border-indigo-200 hover:bg-indigo-50/80 transition"
                            >
                                <span class="text-sm text-slate-700">{{ $prereq['name'] }}</span>
                                <span class="text-xs px-2 py-1 rounded-full {{ ($prereq['mastery'] ?? 0) >= 0.6 ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700' }}">
                                    {{ number_format(($prereq['mastery'] ?? 0) * 100, 0) }}%
                                </span>
                            </button>
                        @endforeach
                    </div>
                </div>
            @endif

            @if(!empty($details['successors']))
                <div class="rounded-2xl border border-white/60 bg-white/80 shadow-sm p-4 space-y-3">
                    <p class="text-sm font-semibold text-slate-800">后续知识</p>
                    <div class="space-y-2">
                        @foreach($details['successors'] as $succ)
                            <button
                                wire:click="$parent.openSuccessorDrawer('{{ $succ['id'] }}')"
                                type="button"
                                class="w-full flex items-center justify-between px-3 py-2 rounded-lg border border-slate-200/70 bg-white/60 hover:border-amber-200 hover:bg-amber-50/70 transition"
                            >
                                <span class="text-sm text-slate-700">{{ $succ['name'] }}</span>
                                <span class="text-xs px-2 py-1 rounded-full {{ ($succ['mastery'] ?? 0) >= 0.6 ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700' }}">
                                    {{ number_format(($succ['mastery'] ?? 0) * 100, 0) }}%
                                </span>
                            </button>
                        @endforeach
                    </div>
                </div>
            @endif

            @if(!empty($details['recommendations']))
                <div class="rounded-2xl border border-white/60 bg-white/80 shadow-sm p-4 space-y-3">
                    <div class="flex items-center justify-between">
                        <p class="text-sm font-semibold text-slate-800">推荐练习</p>
                        <span class="text-[11px] text-slate-500">自动挑选的3道题</span>
                    </div>
                    <div class="space-y-3">
                        @foreach($details['recommendations'] as $rec)
                            <div class="p-3 rounded-lg border border-slate-200/70 bg-white/60 hover:border-indigo-200 hover:shadow-sm transition">
                                <div class="flex items-start justify-between gap-2">
                                    <div class="text-sm font-medium text-slate-900">{{ $rec['title'] }}</div>
                                    <span class="text-xs px-2 py-0.5 rounded-full border border-indigo-100 text-indigo-700 bg-indigo-50">
                                        {{ $rec['difficulty'] ?? '中等' }}
                                    </span>
                                </div>
                                <p class="mt-1 text-xs text-slate-500">{{ $rec['type'] ?? '练习题' }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <div class="flex gap-3">
                <a
                    href="{{ url('/admin/practice?kp=' . ($details['id'] ?? '')) }}"
                    class="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-indigo-600 text-white font-semibold py-3 shadow-lg shadow-indigo-200 hover:bg-indigo-700 transition"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6l4 2"/>
                    </svg>
                    开始练习
                </a>
                <button
                    wire:click="{{ $closeAction }}"
                    type="button"
                    class="px-4 py-3 rounded-lg border border-slate-200 bg-white/70 text-slate-700 hover:border-slate-300"
                >
                    收起
                </button>
            </div>
        </div>
    </div>
</div>

<div
    x-cloak
    x-show="@js($open)"
    @click="{{ $closeAction }}"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-40"
></div>