<div class="ui-page" wire:poll.5s>
    <div class="mx-auto flex max-w-7xl flex-col gap-6 px-4 py-8">
        @include('filament.partials.page-header', [
            'kicker' => 'Markdown 导入',
            'title' => 'Markdown 试卷导入管理',
            'subtitle' => '上传 Markdown 文件，解析题目结构并进入人工校对',
            'actions' => new \Illuminate\Support\HtmlString(
                '<a class="btn btn-primary" href="' . route('filament.admin.resources.markdown-imports.create') . '">开始导入</a>'
                . view('filament.partials.density-toggle')->render()
            ),
        ])

        @php
            $total = \App\Models\MarkdownImport::count();
            $processing = \App\Models\MarkdownImport::where('status', 'processing')->count();
            $parsed = \App\Models\MarkdownImport::where('status', 'parsed')->count();
            $reviewed = \App\Models\MarkdownImport::where('status', 'reviewed')->count();
            $completed = \App\Models\MarkdownImport::where('status', 'completed')->count();
            $failed = \App\Models\MarkdownImport::where('status', 'failed')->count();
        @endphp

        <div class="grid grid-cols-1 gap-4 md:grid-cols-3 xl:grid-cols-6">
            <div class="ui-stat">
                <div class="ui-stat-label">导入总数</div>
                <div class="ui-stat-value">{{ $total }}</div>
            </div>
            <div class="ui-stat">
                <div class="ui-stat-label">处理中</div>
                <div class="ui-stat-value text-amber-600">{{ $processing }}</div>
            </div>
            <div class="ui-stat">
                <div class="ui-stat-label">待校对</div>
                <div class="ui-stat-value text-blue-600">{{ $parsed }}</div>
            </div>
            <div class="ui-stat">
                <div class="ui-stat-label">已校对</div>
                <div class="ui-stat-value text-indigo-600">{{ $reviewed }}</div>
            </div>
            <div class="ui-stat">
                <div class="ui-stat-label">已完成</div>
                <div class="ui-stat-value text-emerald-600">{{ $completed }}</div>
            </div>
            <div class="ui-stat">
                <div class="ui-stat-label">失败</div>
                <div class="ui-stat-value text-rose-600">{{ $failed }}</div>
            </div>
        </div>

        <div class="ui-card">
            <div class="ui-card-body">
                <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
                    <div class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-4">
                        <div class="ui-kicker">Step 1</div>
                        <div class="mt-1 text-sm font-semibold text-slate-900">上传 Markdown</div>
                        <p class="mt-2 text-sm text-slate-500">支持 md / txt / zip，自动提取教材信息。</p>
                    </div>
                    <div class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-4">
                        <div class="ui-kicker">Step 2</div>
                        <div class="mt-1 text-sm font-semibold text-slate-900">结构识别与预览</div>
                        <p class="mt-2 text-sm text-slate-500">查看卷子 → 区块 → 题目树结构，并高亮异常。</p>
                    </div>
                    <div class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-4">
                        <div class="ui-kicker">Step 3</div>
                        <div class="mt-1 text-sm font-semibold text-slate-900">审核入库</div>
                        <p class="mt-2 text-sm text-slate-500">批量确认后入库，自动生成完成报告。</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="ui-card">
            <div class="ui-card-header">
                <div>
                    <div class="ui-section-title">导入记录</div>
                    <div class="ui-subtitle">查看处理进度与进入校对</div>
                </div>
                <div class="ui-badge-muted">自动刷新进度</div>
            </div>
            <div class="ui-card-body">
                {{ $this->table }}
            </div>
        </div>
    </div>
    @include('filament.partials.loading-overlay', [
        'target' => 'tableFilters,tableSort,tableSearch,tableColumns,tableRecordsPerPage,tablePagination,run_pipeline,parse,review,delete,edit',
    ])
</div>
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const source = new EventSource('/admin/markdown-imports/stream?type=markdown-imports');
        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
