<div class="ui-page">
    <div class="mx-auto flex max-w-7xl flex-col gap-6 px-4 py-8">
        @include('filament.partials.page-header', [
            'kicker' => 'Markdown 导入',
            'title' => 'Step 2 · 结构识别与预览',
            'subtitle' => '左侧查看卷子结构，右侧进行题目校对与批量入库。',
            'actions' => view('filament.partials.density-toggle') . view('filament.partials.quick-links'),
        ])

        <div class="grid grid-cols-1 gap-4 md:grid-cols-3 xl:grid-cols-5">
            <div class="ui-stat">
                <div class="ui-stat-label">总题数</div>
                <div class="ui-stat-value">{{ $this->summaryStats['total'] ?? 0 }}</div>
            </div>
            <div class="ui-stat">
                <div class="ui-stat-label">待审核</div>
                <div class="ui-stat-value text-amber-600">{{ $this->summaryStats['pending'] ?? 0 }}</div>
            </div>
            <div class="ui-stat">
                <div class="ui-stat-label">已审核</div>
                <div class="ui-stat-value text-blue-600">{{ $this->summaryStats['reviewed'] ?? 0 }}</div>
            </div>
            <div class="ui-stat">
                <div class="ui-stat-label">已接受</div>
                <div class="ui-stat-value text-emerald-600">{{ $this->summaryStats['accepted'] ?? 0 }}</div>
            </div>
            <div class="ui-stat">
                <div class="ui-stat-label">已拒绝</div>
                <div class="ui-stat-value text-rose-600">{{ $this->summaryStats['rejected'] ?? 0 }}</div>
            </div>
        </div>

        <div class="flex gap-4">
            <!-- 左侧精简信息栏 -->
            <div class="hidden lg:block w-80 space-y-4 flex-shrink-0">
                <div class="ui-card hover:shadow-md transition-shadow duration-200">
                    <div class="ui-card-header">
                        <div>
                            <div class="ui-section-title">📋 卷子结构</div>
                        </div>
                    </div>
                    <div class="ui-card-body space-y-2 max-h-[500px] overflow-y-auto no-scrollbar">
                        @forelse($this->paperTree as $paper)
                            <div class="p-3 bg-gradient-to-r from-slate-50 to-white rounded-lg border border-slate-200">
                                <div class="text-sm font-semibold text-slate-900">{{ $paper['title'] }}</div>
                                @foreach($paper['parts'] ?? [] as $part)
                                    <div class="mt-2 flex items-center justify-between">
                                        <span class="text-xs text-slate-600">{{ $part['title'] }}</span>
                                        <span class="text-xs font-medium text-blue-600">{{ $part['count'] }}题</span>
                                    </div>
                                @endforeach
                            </div>
                        @empty
                            <p class="text-sm text-slate-500 text-center py-4">暂无数据</p>
                        @endforelse
                    </div>
                </div>

                <div class="ui-card bg-gradient-to-br from-blue-50 to-indigo-50 border-blue-200">
                    <div class="ui-card-header border-blue-200">
                        <div class="ui-section-title text-blue-900 text-sm">✨ 操作指引</div>
                    </div>
                    <div class="ui-card-body">
                        <div class="space-y-2">
                            <div class="text-xs text-slate-700">1️⃣ 勾选候选题</div>
                            <div class="text-xs text-slate-700">2️⃣ 批量操作</div>
                            <div class="text-xs text-slate-700">3️⃣ 入库筛选库</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧主内容区 -->
            <div class="flex-1 min-w-0">
                <div class="ui-card h-full">
                    <div class="ui-card-header">
                        <div>
                            <div class="ui-section-title">📝 题目预览与校对</div>
                            <div class="ui-subtitle">专注题目内容 | 支持批量操作</div>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="ui-badge-muted">全屏展示</div>
                        </div>
                    </div>
                    <div class="ui-card-body p-0">
                        <div class="overflow-hidden rounded-b-2xl">
                            {{ $this->table }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('filament.partials.loading-overlay')
</div>
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const params = new URLSearchParams(window.location.search);
        const importId = params.get('import_id') || '';
        const source = new EventSource(`/admin/markdown-imports/stream?type=pre-question-candidates&import_id=${importId}`);
        let refreshTimer = null;

        const refreshLivewire = () => {
            if (refreshTimer) return;
            refreshTimer = setTimeout(() => {
                refreshTimer = null;
            }, 800);

            if (!window.Livewire || !Livewire.find) {
                return;
            }

            document.querySelectorAll('[wire\\:id]').forEach((el) => {
                const id = el.getAttribute('wire:id');
                const component = id ? Livewire.find(id) : null;
                if (component && typeof component.$refresh === 'function') {
                    component.$refresh();
                }
            });
        };

        source.addEventListener('update', (event) => {
            try {
                JSON.parse(event.data || '{}');
            } catch (e) {
                return;
            }
            refreshLivewire();
        });

        window.addEventListener('beforeunload', () => source.close());
    });
</script>
@endpush
