math_cms/resources/views/filament/pages/ocr-record-view-new.blade.php

<x-filament-panels::page>

<div class="space-y-6" @if($isGenerating) wire:poll.5s="checkGenerationStatus" @endif>
    @php
        $record = $this->record();
    @endphp

    {{-- 面包屑导航 --}}
    <div class="breadcrumbs text-sm">
        <ul>
            <li>
                <a href="{{ route('filament.admin.pages.ocr-records') }}" class="link link-primary link-hover no-underline">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    OCR识别记录
                </a>
            </li>
            <li>
                <span class="text-base-content/60">/</span>
            </li>
            <li>记录详情 #{{ $record->id }}</li>
        </ul>
    </div>

    @if($record)
        {{-- 头部信息卡片 --}}
        <div class="card bg-base-100 border border-base-300 shadow-xl">
            <div class="card-body">
                <div class="flex flex-col lg:flex-row justify-between gap-4">
                    <div class="flex items-center gap-3">
                        <div class="avatar placeholder">
                            <div class="bg-primary text-primary-content rounded-full w-12 h-12 flex items-center justify-center">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                </svg>
                            </div>
                        </div>
                        <div>
                            <h1 class="text-2xl font-bold">OCR记录详情</h1>
                            <p class="text-sm text-base-content/60">记录ID: {{ $record->id }}</p>
                        </div>
                    </div>

                    <div class="flex items-center gap-2">
                        @php
                            $statusConfig = $this->getStatusBadgeConfig($record->status);
                        @endphp
                        <div class="badge {{ $statusConfig['class'] }} gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            {{ $statusConfig['text'] }}
                        </div>

                        @if($record->status === 'pending' || $record->status === 'failed')
                            <button
                                wire:click="startRecognition"
                                class="btn btn-primary btn-sm"
                            >
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                开始识别
                            </button>
                        @endif

                        <a href="{{ route('filament.admin.pages.ocr-records') }}" class="btn btn-ghost btn-sm">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                            </svg>
                            返回列表
                        </a>
                    </div>
                </div>

                <div class="stats stats-vertical lg:stats-horizontal shadow bg-base-200 border border-base-300">
                    <div class="stat">
                        <div class="stat-figure text-primary">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                            </svg>
                        </div>
                        <div class="stat-title">学生</div>
                        <div class="stat-value text-lg">{{ $record->student->name ?? '未知' }}</div>
                        <div class="stat-desc">{{ $record->student->grade ?? '-' }} - {{ $record->student->class_name ?? '-' }}</div>
                    </div>

                    <div class="stat">
                        <div class="stat-figure text-secondary">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <div class="stat-title">图片</div>
                        <div class="stat-value text-lg">{{ $record->image_filename }}</div>
                        <div class="stat-desc">{{ number_format($record->image_size / 1024, 2) }} KB</div>
                    </div>

                    <div class="stat">
                        <div class="stat-figure text-info">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                            </svg>
                        </div>
                        <div class="stat-title">进度</div>
                        <div class="stat-value text-lg">{{ $record->processed_questions ?? 0 }}/{{ $record->total_questions ?? 0 }}</div>
                        <div class="stat-desc">
                            @if($record->total_questions > 0)
                                @php
                                    $percent = round(($record->processed_questions / $record->total_questions) * 100, 1);
                                @endphp
                                <progress class="progress progress-primary w-16" value="{{ $percent }}" max="100"></progress>
                                {{ $percent }}%
                            @else
                                未开始
                            @endif
                        </div>
                    </div>

                    <div class="stat">
                        <div class="stat-figure text-success">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <div class="stat-title">置信度</div>
                        <div class="stat-value text-lg">
                            @if($record->confidence_avg)
                                {{ number_format($record->confidence_avg * 100, 1) }}%
                            @else
                                -
                            @endif
                        </div>
                        <div class="stat-desc">
                            @if($record->confidence_avg)
                                @if($record->confidence_avg >= 0.7)
                                    <span class="text-success">优秀</span>
                                @elseif($record->confidence_avg >= 0.5)
                                    <span class="text-warning">良好</span>
                                @else
                                    <span class="text-error">需改进</span>
                                @endif
                            @else
                                暂无数据
                            @endif
                        </div>
                    </div>
                </div>

                @if($record->error_message)
                    <div class="alert alert-error mt-4">
                        <svg class="w-6 h-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <div>
                            <h3 class="font-bold">错误信息</h3>
                            <div class="text-xs">{{ $record->error_message }}</div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- 图片预览卡片 --}}
        @if($record->image_path)
            <div class="card bg-base-100 border border-base-300 shadow-xl">
                <div class="card-body">
                    <h2 class="card-title flex items-center gap-2">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                        原图预览
                    </h2>

                    <div class="mockup-window border border-base-300">
                        <div class="mockup-browser-toolbar">
                            <div class="mockup-browser-dot"></div>
                            <div class="mockup-browser-dot"></div>
                            <div class="mockup-browser-dot"></div>
                        </div>
                        <div class="mockup-browser-content bg-base-200">
                            <img
                                src="{{ asset('storage/' . $record->image_path) }}"
                                alt="卷子图片"
                                class="w-full h-auto rounded-b-lg"
                            >
                        </div>
                    </div>

                    <div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                        <div class="stat bg-base-200 rounded-lg border border-base-300">
                            <div class="stat-title text-xs">文件大小</div>
                            <div class="stat-value text-sm">{{ number_format($record->image_size / 1024, 2) }} KB</div>
                        </div>
                        @if($record->image_width)
                            <div class="stat bg-base-200 rounded-lg border border-base-300">
                                <div class="stat-title text-xs">宽度</div>
                                <div class="stat-value text-sm">{{ $record->image_width }} px</div>
                            </div>
                        @endif
                        @if($record->image_height)
                            <div class="stat bg-base-200 rounded-lg border border-base-300">
                                <div class="stat-title text-xs">高度</div>
                                <div class="stat-value text-sm">{{ $record->image_height }} px</div>
                            </div>
                        @endif
                        <div class="stat bg-base-200 rounded-lg border border-base-300">
                            <div class="stat-title text-xs">创建时间</div>
                            <div class="stat-value text-sm">{{ $record->created_at->format('m-d H:i') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- 题目识别结果列表 --}}
        <div class="card bg-base-100 border border-base-300 shadow-xl">
            <div class="card-body">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="card-title text-xl flex items-center gap-2">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                        </svg>
                        题目识别结果 ({{ count($record->questions ?? []) }} 道题)
                    </h2>

                    @if(!$this->hasAnalysisResults)
                        <div class="badge badge-primary badge-lg gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            待分析
                        </div>
                    @else
                        <div class="badge badge-success badge-lg gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            已分析
                        </div>
                    @endif
                </div>

                {{-- 题库生成提示 --}}
                @if(!$this->canSubmitAnalysis())
                    <div class="alert alert-warning shadow-sm mb-6">
                        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
                        <div class="flex-1">
                            <h3 class="font-bold">需生成题库题目</h3>
                            <div class="text-xs">当前有题目尚未关联题库，必须先生成题库题目才能进行 AI 分析。</div>
                            @if($isGenerating)
                                <div class="mt-2 flex items-center gap-2 text-xs">
                                    <span class="loading loading-spinner loading-xs"></span>
                                    正在生成中，请稍候...
                                </div>
                            @endif
                        </div>
                        <div class="flex-none">
                            <button 
                                wire:click="generateQuestionBankQuestions" 
                                class="btn btn-sm btn-ghost border-current" 
                                @if($isGenerating) disabled @endif
                                wire:loading.attr="disabled"
                                wire:target="generateQuestionBankQuestions"
                            >
                                <span wire:loading.remove wire:target="generateQuestionBankQuestions">
                                    @if($isGenerating)
                                        生成中...
                                    @else
                                        生成题库题目
                                    @endif
                                </span>
                                <span wire:loading wire:target="generateQuestionBankQuestions">
                                    <span class="loading loading-spinner loading-xs"></span>
                                    提交中...
                                </span>
                            </button>
                        </div>
                    </div>
                @endif

                @if($record->questions && count($record->questions) > 0)
                    <div class="overflow-x-auto">
                        <table class="table table-zebra table-compact">
                            <thead>
                                <tr>
                                    <th class="w-12">#</th>
                                    <th>题目内容</th>
                                    <th>学生答案</th>
                                    <th>题库关联</th>
                                    <th class="w-32">手动校准</th>
                                    <th class="w-32">判卷</th>
                                    <th class="w-24">AI分析</th>
                                    <th class="w-32">状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($record->questions as $index => $question)
                                    <tr class="hover">
                                        <td>
                                            <div class="badge badge-primary badge-sm">
                                                {{ $question->question_number }}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="max-w-xs">
                                                @if($question->question_text)
                                                    <p class="text-sm leading-tight">@math($question->question_text)</p>
                                                @else
                                                    <span class="text-gray-400 italic text-sm">未识别到题目内容</span>
                                                @endif
                                            </div>
                                        </td>
                                        <td>
                                            <div class="flex items-center gap-2">
                                                <div class="text-sm font-medium">
                                                    @if($question->student_answer)
                                                        <span class="text-primary">@math($question->student_answer)</span>
                                                    @else
                                                        <span class="text-gray-400 italic">未识别</span>
                                                    @endif
                                                </div>
                                                @if($question->answer_confidence)
                                                    <div class="w-2 h-2 rounded-full" style="background-color: {{ $question->answer_confidence >= 0.7 ? '#10b981' : ($question->answer_confidence >= 0.5 ? '#f59e0b' : '#ef4444') }}"></div>
                                                @endif
                                            </div>
                                        </td>
                                        <td>
                                            @if($question->question_bank_id)
                                                <div class="badge badge-success badge-sm gap-1" title="题库ID: {{ $question->question_bank_id }}">
                                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                                    已关联
                                                </div>
                                                <div class="text-[10px] text-base-content/40 font-mono mt-1">ID:{{ $question->question_bank_id }}</div>
                                            @else
                                                @php
                                                    $genStatus = $questionGenerationStatus[$question->id] ?? ($question->generation_status ?? 'pending');
                                                @endphp
                                                @if($genStatus === 'generating')
                                                    <div class="badge badge-info badge-sm gap-1">
                                                        <span class="loading loading-spinner loading-xs w-3 h-3"></span>
                                                        生成中
                                                    </div>
                                                @elseif($genStatus === 'failed')
                                                     <div class="badge badge-error badge-sm gap-1 tooltip" data-tip="{{ $question->generation_error }}">
                                                        <svg class="w-3 h-3" 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"></path></svg>
                                                        失败
                                                    </div>
                                                @else
                                                    <div class="badge badge-warning badge-sm gap-1">
                                                        未关联
                                                    </div>
                                                @endif
                                            @endif
                                        </td>
                                        <td>
                                            <input
                                                type="text"
                                                wire:model.defer="manualAnswers.{{ $question->id }}"
                                                placeholder="手动输入答案"
                                                class="input input-bordered input-xs w-full"
                                                maxlength="10"
                                                value="{{ $question->manual_answer }}"
                                            >
                                            @if($question->manual_answer)
                                                <div class="mt-1">
                                                    <div class="badge badge-success badge-xs">
                                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                                        </svg>
                                                        已校验
                                                    </div>
                                                </div>
                                            @endif
                                        </td>
                                        <td>
                                            {{-- 判卷区域 --}}
                                            <div class="space-y-2">
                                                {{-- 对错判断 --}}
                                                <div class="flex gap-1">
                                                    <label class="label cursor-pointer gap-1 p-1">
                                                        <input
                                                            type="radio"
                                                            wire:model="questionGrades.{{ $question->id }}.is_correct"
                                                            value="1"
                                                            class="radio radio-success radio-xs"
                                                        >
                                                        <span class="text-xs">✓</span>
                                                    </label>
                                                    <label class="label cursor-pointer gap-1 p-1">
                                                        <input
                                                            type="radio"
                                                            wire:model="questionGrades.{{ $question->id }}.is_correct"
                                                            value="0"
                                                            class="radio radio-error radio-xs"
                                                        >
                                                        <span class="text-xs">✗</span>
                                                    </label>
                                                </div>
                                                {{-- 分数输入 --}}
                                                <input
                                                    type="number"
                                                    wire:model="questionGrades.{{ $question->id }}.score"
                                                    placeholder="分数"
                                                    class="input input-bordered input-xs w-full"
                                                    min="0"
                                                    max="100"
                                                    step="0.5"
                                                >
                                            </div>
                                        </td>
                                        <td>
                                            @if($question->ai_score !== null || $question->ai_feedback !== null)
                                                <div class="space-y-1">
                                                    @if($question->ai_score !== null)
                                                        <div class="text-center">
                                                            <div class="stat-value text-lg text-success">{{ $question->ai_score }}</div>
                                                            <div class="stat-title text-xs">AI评分</div>
                                                        </div>
                                                    @endif
                                                    @if($question->ai_confidence)
                                                        <div class="w-full">
                                                            <progress class="progress progress-success w-full h-1" value="{{ $question->ai_confidence * 100 }}" max="100"></progress>
                                                            <div class="text-xs text-center mt-1">{{ number_format($question->ai_confidence * 100, 1) }}%</div>
                                                        </div>
                                                    @endif
                                                </div>
                                            @else
                                                <div class="text-center">
                                                    <div class="badge badge-ghost badge-sm">
                                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                        </svg>
                                                        待分析
                                                    </div>
                                                </div>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="flex flex-wrap gap-1">
                                                @if($question->answer_verified)
                                                    <div class="badge badge-success badge-xs">
                                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                                        </svg>
                                                        已校验
                                                    </div>
                                                @endif
                                                @if($question->score_value !== null)
                                                    <div class="badge badge-info badge-xs">
                                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 2.902 0l1.519 1.519a.922.922 0 011.603.921l1.518-1.519a.922.922 0 012.902 0l2.12 2.12a.922.922 0 010-1.303l-2.12-2.12z"></path>
                                                        </svg>
                                                        {{ $question->score_value }}分
                                                    </div>
                                                @endif
                                                @if($question->kp_code)
                                                    <div class="badge badge-warning badge-xs">
                                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 00-3.86.517L6.05 15.21a2 2 0 00-1.022.547c-.505 0-.903.197-1.255.537L3.82 16.673a6 6 0 003.86 2.518l.318.158a6 6 0 003.86-.517l2.387-.477a2 2 0 001.022-.547zM10 15.272a8 8 0 00-5.457-2.91l3.569-3.569a8 8 0 015.458 2.91l-3.57 3.568a8 8 0 00-5.457 2.91z"></path>
                                                        </svg>
                                                        {{ $question->kp_code }}
                                                    </div>
                                                @endif
                                                @if($question->mark_detected)
                                                    <div class="text-lg">
                                                        {!! $question->mark_badge ?? $question->mark_detected !!}
                                                    </div>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    {{-- 提交分析按钮 --}}
                    @if(!$this->hasAnalysisResults)
                        <div class="card bg-primary/10 border border-primary mt-6">
                            <div class="card-body">
                                <div class="flex justify-between items-center">
                                    <div>
                                        <h3 class="font-bold text-lg flex items-center gap-2">
                                            <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                                            </svg>
                                            提交 AI 分析
                                        </h3>
                                        <p class="text-sm text-base-content/70 mt-1">
                                            将使用手动校准的答案（如有），否则使用 OCR 识别结果进行智能分析
                                        </p>
                                        @if(!$this->canSubmitAnalysis())
                                            <div class="text-xs text-warning mt-2">
                                                <svg class="w-3 h-3 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L5.268 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                                                </svg>
                                                需要先完成题库题目生成
                                            </div>
                                        @endif
                                    </div>
                                    <button
                                        wire:click="submitForAnalysis"
                                        class="btn btn-primary btn-lg"
                                        wire:loading.attr="disabled"
                                        @if(!$this->canSubmitAnalysis()) disabled @endif
                                    >
                                        <span wire:loading.remove>
                                            <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                                            </svg>
                                        </span>
                                        <span wire:loading class="loading loading-spinner loading-sm"></span>
                                        <span wire:loading.remove>提交分析</span>
                                        <span wire:loading>分析中...</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="card bg-success/10 border border-success mt-6">
                            <div class="card-body">
                                <div class="flex justify-between items-center">
                                    <div>
                                        <h3 class="font-bold text-lg text-success flex items-center gap-2">
                                            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                            AI 分析已完成
                                        </h3>
                                        <p class="text-sm text-base-content/70 mt-1">
                                            所有题目已完成 AI 智能分析，查看上方表格中的详细分析结果
                                        </p>
                                        @if($record->ai_analyzed_at)
                                            <div class="flex gap-4 mt-2 text-sm text-base-content/60">
                                                <span>分析完成时间：{{ $record->ai_analyzed_at }}</span>
                                                @if($record->ai_analysis_count)
                                                    <span>分析题目数：{{ $record->ai_analysis_count }}</span>
                                                @endif
                                            </div>
                                        @endif
                                    </div>
                                    <div class="badge badge-success badge-lg gap-2">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                        已分析
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @else
                    <div class="text-center py-12 text-base-content/60">
                        <svg class="w-12 h-12 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        <p class="text-lg font-medium">暂无识别结果</p>
                        @if($record->status === 'pending')
                            <p class="text-sm mt-2">点击上方"开始识别"按钮开始处理</p>
                        @endif
                    </div>
                @endif
            </div>
        </div>

        {{-- DaisyUI 时间轴 --}}
        <div class="card bg-base-100 border border-base-300 shadow-xl">
            <div class="card-body">
                <h2 class="card-title text-xl flex items-center gap-2 mb-6">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    处理时间线
                </h2>

                <ul class="timeline timeline-snap-icon timeline-vertical">
                    <li>
                        <div class="timeline-middle">
                            <div class="timeline-box timeline-box-success">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="timeline-end">
                            <time class="text-xs opacity-70">{{ $record->created_at->format('m-d H:i:s') }}</time>
                            <div class="timeline-title font-bold text-base">上传成功</div>
                            <div class="timeline-body text-sm opacity-80">卷子图片已上传，等待OCR识别</div>
                        </div>
                        <hr class="border-success" />
                    </li>

                    @if($record->status === 'processing')
                        <li>
                            <div class="timeline-middle">
                                <div class="timeline-box timeline-box-info animate-pulse">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="timeline-end">
                                <time class="text-xs opacity-70">{{ now()->format('m-d H:i:s') }}</time>
                                <div class="timeline-title font-bold text-base text-info">处理中</div>
                                <div class="timeline-body text-sm opacity-80">OCR识别正在进行中...</div>
                                <div class="loading loading-spinner loading-sm mt-2"></div>
                            </div>
                            <hr class="border-info" />
                        </li>
                    @elseif($record->status === 'completed')
                        <li>
                            <div class="timeline-middle">
                                <div class="timeline-box timeline-box-success">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="timeline-end">
                                <time class="text-xs opacity-70">{{ $record->processed_at?->format('m-d H:i:s') }}</time>
                                <div class="timeline-title font-bold text-base text-success">OCR识别完成</div>
                                <div class="timeline-body text-sm opacity-80">
                                    OCR识别已完成，识别出 {{ $record->total_questions ?? 0 }} 道题目
                                    <div class="badge badge-success badge-sm mt-2">
                                        准确率: {{ number_format(($record->confidence_avg ?? 0) * 100, 1) }}%
                                    </div>
                                </div>
                            </div>
                            <hr class="border-success" />
                        </li>
                    @elseif($record->status === 'failed')
                        <li>
                            <div class="timeline-middle">
                                <div class="timeline-box timeline-box-error">
                                    <svg class="w-6 h-6" 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"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="timeline-end">
                                <time class="text-xs opacity-70">{{ now()->format('m-d H:i:s') }}</time>
                                <div class="timeline-title font-bold text-base text-error">OCR识别失败</div>
                                @if($record->error_message)
                                    <div class="timeline-body text-sm text-error bg-error/10 p-2 rounded mt-2">
                                        {{ $record->error_message }}
                                    </div>
                                @endif
                            </div>
                            <hr class="border-error" />
                        </li>
                    @endif

                    {{-- AI Analysis Timeline --}}
                    @if($record->status === 'completed' && $record->ai_analyzed_at)
                        <li>
                            <div class="timeline-middle">
                                <div class="timeline-box timeline-box-info">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="timeline-end">
                                <time class="text-xs opacity-70">{{ $record->ai_analyzed_at }}</time>
                                <div class="timeline-title font-bold text-base text-info">AI 分析完成</div>
                                <div class="timeline-body text-sm opacity-80">
                                    已完成 {{ $record->ai_analysis_count ?? count($record->questions) }} 道题目的智能分析
                                    <div class="flex gap-2 mt-2">
                                        <div class="badge badge-success badge-sm">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                            智能分析
                                        </div>
                                        <div class="badge badge-info badge-sm">学习分析</div>
                                        <div class="badge badge-warning badge-sm">掌握度评估</div>
                                    </div>
                                </div>
                            </div>
                            <hr class="border-info" />
                        </li>
                    @endif

                    {{-- 学生仪表板跳转 --}}
                    @if($record->status === 'completed' && $record->ai_analyzed_at)
                        <li>
                            <div class="timeline-middle">
                                <div class="timeline-box timeline-box-warning">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="timeline-end">
                                <div class="timeline-title font-bold text-base text-warning">查看详细分析</div>
                                <div class="timeline-body text-sm opacity-80">
                                    在学生仪表板中查看更详细的学习分析报告
                                    <div class="mt-3">
                                        @if($record->student)
                                            <a href="{{ route('filament.admin.pages.student-dashboard') }}?student_id={{ $record->student->student_id }}"
                                               class="btn btn-primary btn-sm gap-2 hover:btn-primary-focus transition-all">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                                                </svg>
                                                学生仪表板
                                            </a>
                                        @else
                                            <div class="btn btn-disabled btn-sm gap-2">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                </svg>
                                                学生信息缺失
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </li>
                    @endif
                </ul>
            </div>
        </div>
    @else
        <div class="card bg-base-100 border border-base-300 shadow-xl">
            <div class="card-body">
                <div class="alert alert-error">
                    <svg class="w-6 h-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <div>
                        <h3 class="font-bold">记录不存在</h3>
                        <div class="text-xs">找不到ID为 {{ $recordId }} 的OCR记录</div>
                    </div>
                </div>

                <div class="mt-4">
                    <a href="{{ route('filament.admin.pages.ocr-records') }}" class="btn btn-primary">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                        返回列表
                    </a>
                </div>
            </div>
        </div>
    @endif
</div>

<x-math-render />

</x-filament-panels::page>