"use client";

import { useState } from "react";
import {
  Award,
  BookOpen,
  CheckCircle2,
  Target,
  Timer,
} from "lucide-react";

import { ScoreBar } from "@/components/display";
import {
  EmptyState,
  ErrorBanner,
  Loading,
  PageHeading,
} from "@/components/feedback";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Select } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { UsageGuide } from "@/components/usage-guide";
import { ApiError } from "@/lib/api";
import { examPrepApi } from "@/lib/services";

const SUBJECTS = [
  { value: "internal", label: "内科学" },
  { value: "surgery", label: "外科学" },
  { value: "pediatrics", label: "儿科学" },
  { value: "obgyn", label: "妇产科学" },
  { value: "pharmacology", label: "药理学" },
  { value: "pathology", label: "病理学" },
  { value: "diagnostics", label: "诊断学" },
  { value: "ethics", label: "医学伦理" },
];

export default function ExamPrepPage() {
  const [subject, setSubject] = useState("");
  const [mode, setMode] = useState("auto");
  const [question, setQuestion] = useState<any>(null);
  const [answer, setAnswer] = useState("");
  const [result, setResult] = useState<any>(null);
  const [stats, setStats] = useState<any>(null);
  const [history, setHistory] = useState<any[]>([]);
  const [selectedRecord, setSelectedRecord] = useState<any>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function generateQuestion() {
    setBusy(true);
    setError(null);
    setResult(null);
    setAnswer("");
    try {
      const q = await examPrepApi.generateQuestion({ subject: subject || undefined, mode });
      setQuestion(q);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "生成失败");
    } finally {
      setBusy(false);
    }
  }

  async function submitAnswer() {
    if (!answer.trim() || !question) return;
    setBusy(true);
    setError(null);
    try {
      const r = await examPrepApi.submitAnswer(question.id ?? "current", { answer });
      setResult(r);
      await loadStats();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "提交失败");
    } finally {
      setBusy(false);
    }
  }

  async function loadStats() {
    setBusy(true);
    setError(null);
    try {
      const s = await examPrepApi.getStats();
      setStats(s);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "加载失败");
    } finally {
      setBusy(false);
    }
  }

  async function loadHistory() {
    setBusy(true);
    setError(null);
    try {
      const h = await examPrepApi.listHistory();
      setHistory(Array.isArray(h) ? h : []);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "加载失败");
    } finally {
      setBusy(false);
    }
  }

  async function handleDeleteRecord(recordId: string) {
    setBusy(true);
    setError(null);
    try {
      await examPrepApi.deleteHistory(recordId);
      await loadHistory();
      await loadStats();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "删除失败");
    } finally {
      setBusy(false);
    }
  }

  async function handleDeleteAll() {
    if (!confirm("确定要清空所有答题记录吗？此操作不可恢复。")) return;
    setBusy(true);
    setError(null);
    try {
      await examPrepApi.deleteAllHistory();
      await loadHistory();
      await loadStats();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "清空失败");
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="space-y-6">
      <PageHeading
        icon={<Award className="size-5" />}
        title="执业医师备考"
        description="针对执业医师考试的专项题库与进度追踪，强化薄弱科目。"
      />

      <UsageGuide
        steps={[
          { title: "选择科目", detail: "选择内科学、外科学等薄弱科目进行专项训练。" },
          { title: "生成试题", detail: "AI 根据执医考试大纲生成模拟题，覆盖高频考点。" },
          { title: "作答与解析", detail: "提交答案后获得详细解析与相关知识点扩展。" },
          { title: "追踪进度", detail: "系统自动统计各科目正确率，定位薄弱环节。" },
        ]}
        tip="执业医师考试注重临床思维，建议在作答时写出推理过程，而非仅给出结论。"
      />

      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Target className="size-4" />
              专项训练
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex flex-wrap gap-2">
              <Select
                value={subject}
                onChange={(e) => setSubject(e.target.value)}
                className="w-40"
              >
                <option value="">全部科目</option>
                {SUBJECTS.map((s) => (
                  <option key={s.value} value={s.value}>
                    {s.label}
                  </option>
                ))}
              </Select>
              <Select
                value={mode}
                onChange={(e) => setMode(e.target.value)}
                className="w-32"
              >
                <option value="auto">自动</option>
                <option value="builtin">内置题库</option>
                <option value="ai">AI生成</option>
              </Select>
              <Button onClick={generateQuestion} disabled={busy}>
                {busy ? "生成中…" : "生成试题"}
              </Button>
              {selectedRecord && (
                <Button variant="outline" onClick={() => setSelectedRecord(null)} disabled={busy}>
                  关闭详情
                </Button>
              )}
            </div>

            {error && <ErrorBanner message={error} />}

            {question && (
              <div className="space-y-4">
                <div className="rounded-lg border border-primary/15 bg-primary/[0.03] p-4">
                  <p className="text-sm leading-relaxed text-foreground">
                    {question.content ?? question.question ?? JSON.stringify(question)}
                  </p>
                  {question.options && (
                    <ul className="mt-3 space-y-1">
                      {question.options.map((opt: string, i: number) => (
                        <li key={i} className="text-sm text-foreground/80">
                          {String.fromCharCode(65 + i)}. {opt}
                        </li>
                      ))}
                    </ul>
                  )}
                  {question.subject && (
                    <Badge variant="info" className="mt-3">
                      {SUBJECTS.find((s) => s.value === question.subject)?.label ?? question.subject}
                    </Badge>
                  )}
                </div>

                {!result && (
                  <div className="space-y-2">
                    <Textarea
                      value={answer}
                      onChange={(e) => setAnswer(e.target.value)}
                      placeholder="输入你的答案或推理过程…"
                      rows={3}
                    />
                    <Button onClick={submitAnswer} disabled={busy || !answer.trim()}>
                      提交答案
                    </Button>
                  </div>
                )}

                {result && (
                  <div className="space-y-3">
                    <div
                      className={`flex items-center gap-2 rounded-lg px-4 py-3 text-sm ${
                        result.correct
                          ? "bg-success/12 text-success"
                          : "bg-destructive/12 text-destructive"
                      }`}
                    >
                      {result.correct ? (
                        <><CheckCircle2 className="size-5" /> 回答正确</>
                      ) : (
                        <><Timer className="size-5" /> 回答有误</>
                      )}
                    </div>
                    {result.explanation && (
                      <div className="rounded-lg bg-muted/50 p-4">
                        <p className="mb-1 text-xs font-semibold text-muted-foreground">解析</p>
                        <p className="text-sm leading-relaxed text-foreground/80">
                          {result.explanation}
                        </p>
                      </div>
                    )}
                    <Button
                      onClick={() => {
                        setQuestion(null);
                        setResult(null);
                        setAnswer("");
                      }}
                    >
                      继续练习
                    </Button>
                  </div>
                )}
              </div>
            )}

            {selectedRecord && !question && (
              <div className="space-y-4">
                <div className="rounded-lg border border-primary/15 bg-primary/[0.03] p-4">
                  <p className="text-sm leading-relaxed text-foreground">{selectedRecord.content}</p>
                  {selectedRecord.options && selectedRecord.options.length > 0 && (
                    <ul className="mt-3 space-y-1">
                      {selectedRecord.options.map((opt: string, i: number) => (
                        <li key={i} className="text-sm text-foreground/80">
                          {String.fromCharCode(65 + i)}. {opt}
                        </li>
                      ))}
                    </ul>
                  )}
                  <Badge variant="info" className="mt-3">
                    {SUBJECTS.find((s) => s.value === selectedRecord.subject)?.label ?? selectedRecord.subject}
                  </Badge>
                </div>

                <div className="space-y-2">
                  <div className="rounded-lg bg-muted/50 p-3">
                    <p className="mb-1 text-xs font-semibold text-muted-foreground">你的答案</p>
                    <p className="text-sm text-foreground/80">{selectedRecord.userAnswer}</p>
                  </div>
                  <div className="rounded-lg bg-muted/50 p-3">
                    <p className="mb-1 text-xs font-semibold text-muted-foreground">正确答案</p>
                    <p className="text-sm text-foreground/80">{selectedRecord.correctAnswer}</p>
                  </div>
                  <div
                    className={`flex items-center gap-2 rounded-lg px-4 py-3 text-sm ${
                      selectedRecord.correct
                        ? "bg-success/12 text-success"
                        : "bg-destructive/12 text-destructive"
                    }`}
                  >
                    {selectedRecord.correct ? (
                      <><CheckCircle2 className="size-5" /> 回答正确</>
                    ) : (
                      <><Timer className="size-5" /> 回答有误</>
                    )}
                  </div>
                  {selectedRecord.explanation && (
                    <div className="rounded-lg bg-muted/50 p-4">
                      <p className="mb-1 text-xs font-semibold text-muted-foreground">解析</p>
                      <p className="text-sm leading-relaxed text-foreground/80">{selectedRecord.explanation}</p>
                    </div>
                  )}
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setSelectedRecord(null)}
                  >
                    关闭详情
                  </Button>
                </div>
              </div>
            )}

            {!question && !error && !selectedRecord && (
              <EmptyState message="点击「生成试题」开始执业医师备考训练。" />
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <BookOpen className="size-4" />
              备考进度
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="mb-4 flex items-center gap-2">
              <Button variant="outline" size="sm" onClick={loadStats} disabled={busy}>
                {busy ? "加载中…" : "刷新进度"}
              </Button>
              <Button variant="outline" size="sm" onClick={loadHistory} disabled={busy}>
                {busy ? "加载中…" : "刷新记录"}
              </Button>
              {history.length > 0 && (
                <Button variant="ghost" size="sm" onClick={handleDeleteAll} disabled={busy} className="text-destructive hover:text-destructive">
                  清空记录
                </Button>
              )}
            </div>

            {stats ? (
              <div className="space-y-4">
                <div className="grid grid-cols-2 gap-3">
                  <div className="rounded-lg bg-muted/50 p-3 text-center">
                    <p className="text-lg font-bold text-foreground">{stats.totalAnswered ?? 0}</p>
                    <p className="text-xs text-muted-foreground">已答题</p>
                  </div>
                  <div className="rounded-lg bg-muted/50 p-3 text-center">
                    <p className="text-lg font-bold text-foreground">{stats.correctRate ?? "—"}%</p>
                    <p className="text-xs text-muted-foreground">正确率</p>
                  </div>
                </div>

                {stats.bySubject && (
                  <div className="space-y-2">
                    <p className="text-xs font-medium text-muted-foreground">各科目正确率</p>
                    {Object.entries(stats.bySubject).map(([key, val]: [string, any]) => {
                      const label = SUBJECTS.find((s) => s.value === key)?.label ?? key;
                      const hasData = val.correctRate !== null && val.correctRate !== undefined;
                      return (
                        <div key={key} className="flex items-center justify-between text-sm">
                          <span className="text-muted-foreground">{label}</span>
                          {hasData ? (
                            <span className={`font-medium ${
                              val.correctRate >= 80 ? "text-success" : val.correctRate >= 60 ? "text-warning" : "text-destructive"
                            }`}>
                              {val.correctRate}%
                            </span>
                          ) : (
                            <span className="text-xs text-muted-foreground/60">未练习</span>
                          )}
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>
            ) : (
              <EmptyState message="暂无统计数据，请先开始练习。" />
            )}

            {/* 答题历史 */}
            {history.length > 0 && (
              <div className="mt-5 space-y-2">
                <p className="text-xs font-medium text-muted-foreground">答题记录（{history.length}）</p>
                <div className="max-h-80 space-y-2 overflow-y-auto">
                  {history.map((h: any) => (
                    <div
                      key={h.id}
                      onClick={() => {
                        setSelectedRecord(h);
                        setQuestion(null);
                        setResult(null);
                        setAnswer("");
                      }}
                      className="relative cursor-pointer rounded-lg border border-border p-3 transition-colors hover:bg-muted/50"
                    >
                      <div className="mb-1 flex items-center justify-between">
                        <Badge variant={h.correct ? "success" : "destructive"}>
                          {h.correct ? "正确" : "错误"}
                        </Badge>
                        <div className="flex items-center gap-1">
                          <span className="text-[11px] text-muted-foreground">
                            {h.createdAt ? new Date(h.createdAt).toLocaleString() : ""}
                          </span>
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              handleDeleteRecord(h.id);
                            }}
                            className="rounded p-1 text-muted-foreground/50 hover:bg-muted hover:text-destructive"
                            title="删除"
                          >
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
                          </button>
                        </div>
                      </div>
                      <p className="line-clamp-2 text-xs text-foreground/90">{h.content}</p>
                      <div className="mt-1.5 flex items-center gap-2 text-[11px] text-muted-foreground">
                        <span>你的答案：{h.userAnswer}</span>
                        <span>正确答案：{h.correctAnswer}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}