<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学情报告 - {{ $paper['name'] ?? '试卷' }}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
    <style>
        * { box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; margin: 24px; color: #1f2937; background: #f9fafb; }
        h1, h2, h3 { margin: 0; color: #111827; }
        .card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06); }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
        .tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; color: #374151; background: #e5e7eb; }
        .section-title { font-size: 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
        .pill { padding: 4px 10px; border-radius: 999px; font-size: 12px; }
        .pill.green { background: #ecfdf3; color: #15803d; }
        .pill.amber { background: #fef3c7; color: #b45309; }
        .pill.red { background: #fef2f2; color: #b91c1c; }
        table { width: 100%; border-collapse: collapse; font-size: 13px; }
        th, td { padding: 8px 10px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
        th { background: #f3f4f6; color: #111827; }
        .muted { color: #6b7280; font-size: 12px; }
        .progress-wrap { background: #f3f4f6; border-radius: 999px; overflow: hidden; height: 10px; }
        .progress-bar { height: 100%; background: linear-gradient(90deg, #4f46e5, #10b981); }
        .recommend-card { border: 1px dashed #cbd5e1; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: #f8fafc; }
    </style>
</head>
<body>
    <div class="card" style="display:flex; justify-content:space-between; align-items:flex-start; gap:16px;">
        <div>
            <h1>学情报告</h1>
            <div class="muted" style="margin-top:6px;">卷子：{{ $paper['name'] ?? '-' }} | 学生：{{ $student['name'] ?? '-' }}（{{ $student['id'] ?? '' }}）</div>
            <div class="muted">年级：{{ $student['grade'] ?? '-' }} | 班级：{{ $student['class'] ?? '-' }}</div>
        </div>
        <div style="text-align:right;">
            <div class="pill {{ ($mastery['average'] ?? 0) >= 0.7 ? 'green' : (($mastery['average'] ?? 0) >= 0.5 ? 'amber' : 'red') }}">
                平均掌握度 {{ isset($mastery['average']) ? number_format($mastery['average'] * 100, 1) . '%' : '无数据' }}
            </div>
            <div class="muted" style="margin-top:6px;">题目数：{{ is_array($questions ?? null) ? count($questions) : ($paper['total_questions'] ?? '-') }}</div>
        </div>
    </div>

    <div class="card">
        <div class="section-title">知识点掌握度</div>
        @if(!empty($mastery['items']))
            @foreach($mastery['items'] as $item)
                @php
                    $pct = min(100, max(0, $item['mastery_level'] * 100));
                    $barColor = $pct >= 80 ? '#10b981' : ($pct >= 60 ? '#f59e0b' : '#ef4444');
                    $delta = $item['mastery_change'] ?? null;
                @endphp
                <div style="margin-bottom:10px;">
                    <div style="display:flex; justify-content:space-between; align-items:center;">
                        <div><strong>{{ $item['kp_name'] }}</strong> <span class="muted">({{ $item['kp_code'] ?? '-' }})</span></div>
                        <div>
                            {{ number_format($pct, 1) }}%
                            @if($delta !== null)
                                <span class="muted" style="margin-left:6px;">{{ $delta > 0 ? '↑' : ($delta < 0 ? '↓' : '→') }} {{ number_format(abs($delta) * 100, 1) }}%</span>
                            @endif
                        </div>
                    </div>
                    <div class="progress-wrap">
                        <div class="progress-bar" style="width: {{ $pct }}%; background: {{ $barColor }};"></div>
                    </div>
                </div>
            @endforeach
        @else
            <div class="muted">暂无掌握度数据</div>
        @endif
    </div>

    <div class="card">
        <div class="section-title">解题思路与题目表现</div>
        @php
            $insightMap = [];
            foreach (($question_insights ?? []) as $insight) {
                $no = $insight['question_number'] ?? $insight['question_id'] ?? null;
                if ($no !== null) {
                    $insightMap[$no] = $insight;
                }
            }
        @endphp
        @foreach($questions as $q)
            @php
                $insight = $insightMap[$q['question_number']] ?? ($insightMap[$q['display_number'] ?? null] ?? []);
                $score = $insight['score'] ?? ($insight['student_score'] ?? null);
                $fullScore = $insight['full_score'] ?? ($q['score'] ?? null);
                $analysisRaw = $insight['analysis']
                    ?? $insight['thinking_process']
                    ?? $insight['feedback']
                    ?? $insight['suggestions']
                    ?? $insight['reason']
                    ?? ($insight['correct_solution'] ?? null);
                // 若有下一步建议，追加
                if (empty($analysisRaw) && !empty($insight['next_steps'])) {
                    $analysisRaw = '后续建议：' . (is_array($insight['next_steps']) ? implode('；', $insight['next_steps']) : $insight['next_steps']);
                }
                $analysis = is_array($analysisRaw) ? json_encode($analysisRaw, JSON_UNESCAPED_UNICODE) : $analysisRaw;
                if ($analysis === null || $analysis === '') {
                    $analysis = '暂无解题思路，待补充';
                }
                $stepsRaw = $insight['steps'] ?? $insight['solution_steps'] ?? $insight['analysis_steps'] ?? null;
                $steps = [];
                if (is_array($stepsRaw)) {
                    $steps = $stepsRaw;
                } elseif (is_string($stepsRaw) && trim($stepsRaw) !== '') {
                    $steps = preg_split('/[\r\n]+/', trim($stepsRaw));
                }
                $isCorrect = $insight['is_correct'] ?? $insight['correct'] ?? null;
                $badgeColor = $isCorrect === true ? '#10b981' : ($isCorrect === false ? '#ef4444' : '#6b7280');
                $badgeText = $isCorrect === true ? '答对' : ($isCorrect === false ? '答错' : '待判');
                $typeMap = ['choice' => '选择题', 'fill' => '填空题', 'answer' => '解答题'];
                $typeLabel = $typeMap[$q['question_type'] ?? ''] ?? ($q['question_type'] ?? '题型未标注');
                $questionText = is_string($q['question_text']) ? $q['question_text'] : json_encode($q['question_text'], JSON_UNESCAPED_UNICODE);
                $solution = $q['solution'] ?? null;
            @endphp
            <div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px; margin-bottom:10px; background:#fff; page-break-inside: avoid;">
                <div style="display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px;">
                    <div style="display:flex; align-items:center; gap:8px; font-weight:600;">
                        <span class="tag">题号 {{ $q['display_number'] ?? $q['question_number'] }}</span>
                        <span class="tag" style="background: #eef2ff; color:#4338ca;">{{ $q['knowledge_point_name'] ?? $q['knowledge_point'] ?? '-' }}</span>
                        <span class="tag" style="background: {{ $badgeColor }}; color:#fff;">{{ $badgeText }}</span>
                    </div>
                    <div class="muted">
                        @if($score !== null && $fullScore !== null)
                            得分 {{ $score }} / {{ $fullScore }}
                        @else
                            待评分
                        @endif
                    </div>
                </div>
                <div class="math-content" style="margin-bottom:6px;">{!! $questionText !!}</div>
                <div class="muted" style="margin-bottom:6px;">题型：{{ $typeLabel }}</div>
                <div style="font-size:13px; line-height:1.6;">{!! nl2br(e($analysis ?? '暂无解题思路记录')) !!}</div>
                @if(!empty($steps))
                    <div style="margin-top:6px; font-size:13px;">
                        <div style="font-weight:600; margin-bottom:4px;">解题步骤</div>
                        <ol style="margin:0; padding-left:18px;">
                            @foreach($steps as $s)
                                <li>{!! nl2br(e(is_array($s) ? json_encode($s, JSON_UNESCAPED_UNICODE) : $s)) !!}</li>
                            @endforeach
                        </ol>
                    </div>
                @elseif(!empty($solution))
                    <div style="margin-top:6px; font-size:13px;">
                        <div style="font-weight:600; margin-bottom:4px;">题库解析</div>
                        <div class="math-content">{!! is_array($solution) ? json_encode($solution, JSON_UNESCAPED_UNICODE) : $solution !!}</div>
                    </div>
                @endif
            </div>
        @endforeach
    </div>

    <div class="card">
        <div class="section-title">整体分析</div>
        @php
            $overallRaw = $analysis_data['summary'] ?? $analysis_data['overall_feedback'] ?? null;
            $overall = is_array($overallRaw) ? json_encode($overallRaw, JSON_UNESCAPED_UNICODE) : $overallRaw;
        @endphp
        <div>
            @if($overall)
                {!! nl2br(e($overall)) !!}
            @elseif(!empty($analysis_data['summary']))
                {!! nl2br(e(json_encode($analysis_data['summary'], JSON_UNESCAPED_UNICODE))) !!}
            @elseif(!empty($analysis_data))
                {!! nl2br(e(json_encode($analysis_data, JSON_UNESCAPED_UNICODE))) !!}
            @else
                暂无整体分析，待分析服务返回后呈现。
            @endif
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            try {
                renderMathInElement(document.body, {
                    delimiters: [
                        {left: "$$", right: "$$", display: true},
                        {left: "$", right: "$", display: false},
                        {left: "\\(", right: "\\)", display: false},
                        {left: "\\[", right: "\\]", display: true}
                    ],
                    throwOnError: false,
                    strict: false,
                    trust: true
                });
            } catch (e) {}
        });
    </script>
</body>
</html>
