"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { CheckCircle2, Save, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import type { QuizQ } from "@/lib/quiz-parse";
import { deleteExamPaper, saveExamPaper } from "../actions";
import { QuestionList } from "./question-list";

// xuchao: 与 lib/exam.ts 的 EXAM_TYPE_LABEL 保持同步(客户端不能直接引用服务端模块)
const EXAM_TYPE_LABEL: Record<string, string> = {
  entrance: "入学考",
  monthly: "月考",
  unit: "单元卷",
  midterm: "期中",
  final: "期末",
};

export type PaperMeta = {
  paperId: string;
  title: string;
  examType: string;
  region: string | null;
  year: number | null;
  duration: number | null;
  fullScore: number | null;
  month: number;
  seq: number;
  sourceUrl: string | null;
  summary: string | null;
  questions: string;
};

// xuchao: 试卷编辑器——元信息表单 + 结构化题目编辑器;保存走服务端完整校验
export function PaperForm({ paper, isNew }: { paper: PaperMeta | null; isNew: boolean }) {
  const router = useRouter();
  const [f, setF] = useState({
    paperId: paper?.paperId ?? "",
    title: paper?.title ?? "",
    examType: paper?.examType ?? "monthly",
    region: paper?.region ?? "",
    year: paper?.year != null ? String(paper.year) : "",
    duration: paper?.duration != null ? String(paper.duration) : "",
    fullScore: paper?.fullScore != null ? String(paper.fullScore) : "100",
    month: String(paper?.month ?? 9),
    seq: String(paper?.seq ?? 1),
    sourceUrl: paper?.sourceUrl ?? "",
    summary: paper?.summary ?? "",
  });
  // xuchao: 题目用结构化数组管理,保存时序列化为 JSON(与旧 JSON 形状一致)
  const [questions, setQuestions] = useState<QuizQ[]>(() => {
    try {
      return paper ? (JSON.parse(paper.questions) as QuizQ[]) : [];
    } catch {
      return [];
    }
  });
  const [msg, setMsg] = useState<{ ok?: boolean; text: string } | null>(null);
  const [pending, startTransition] = useTransition();

  const save = () => {
    setMsg(null);
    const fd = new FormData();
    (Object.keys(f) as (keyof typeof f)[]).forEach((k) => fd.set(k, f[k]));
    fd.set("questions", JSON.stringify(questions));
    startTransition(() => {
      saveExamPaper(fd).then((r) => {
        if (r.error) setMsg({ text: r.error });
        else setMsg({ ok: true, text: "已保存,孩子端立即生效" });
      });
    });
  };

  const remove = () => {
    if (!paper || !confirm(`确定删除试卷「${paper.title}」?孩子的历史作答记录会保留。`)) return;
    startTransition(() => {
      deleteExamPaper(paper.paperId).then(() => router.push("/parent/exams"));
    });
  };

  const n = (key: keyof typeof f) => ({
    value: f[key],
    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
      setF((prev) => ({ ...prev, [key]: e.target.value })),
  });

  return (
    <div className="space-y-4">
      <div className="grid gap-3 sm:grid-cols-2">
        <div className="space-y-1">
          <Label>试卷编号(唯一,如 g7s1-m09-2)</Label>
          <Input disabled={!isNew} placeholder="g7s1-m09-2" {...n("paperId")} />
        </div>
        <div className="space-y-1">
          <Label>试卷标题</Label>
          <Input placeholder="2025-2026 学年第一学期 9 月月考" {...n("title")} />
        </div>
        <div className="space-y-1">
          <Label>考试类型</Label>
          <select
            value={f.examType}
            onChange={(e) => setF((prev) => ({ ...prev, examType: e.target.value }))}
            className="h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200"
          >
            {Object.entries(EXAM_TYPE_LABEL).map(([k, v]) => (
              <option key={k} value={k}>
                {v}
              </option>
            ))}
          </select>
        </div>
        <div className="space-y-1">
          <Label>月份(0=入学考,1-12)</Label>
          <select
            value={f.month}
            onChange={(e) => setF((prev) => ({ ...prev, month: e.target.value }))}
            className="h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200"
          >
            {[0, 9, 10, 11, 12, 1].map((m) => (
              <option key={m} value={m}>
                {m === 0 ? "入学 · 分班考" : `${m} 月`}
              </option>
            ))}
          </select>
        </div>
        <div className="space-y-1">
          <Label>地区(如:湖南长沙)</Label>
          <Input placeholder="湖南长沙" {...n("region")} />
        </div>
        <div className="space-y-1">
          <Label>年份</Label>
          <Input type="number" placeholder="2025" {...n("year")} />
        </div>
        <div className="space-y-1">
          <Label>考试时长(分钟)</Label>
          <Input type="number" placeholder="120" {...n("duration")} />
        </div>
        <div className="space-y-1">
          <Label>卷面满分</Label>
          <Input type="number" placeholder="100" {...n("fullScore")} />
        </div>
        <div className="space-y-1">
          <Label>展示序号(组内顺序)</Label>
          <Input type="number" placeholder="1" {...n("seq")} />
        </div>
        <div className="space-y-1">
          <Label>来源链接</Label>
          <Input placeholder="https://…" {...n("sourceUrl")} />
        </div>
      </div>
      <div className="space-y-1">
        <Label>考查说明</Label>
        <Input placeholder="考查范围,如:有理数、整式的加减" {...n("summary")} />
      </div>

      <div className="space-y-1">
        <Label>题目(结构化编辑)</Label>
        <QuestionList
          value={questions}
          onChange={(qs) => setQuestions(qs)}
        />
      </div>

      {msg && <p className={msg.ok ? "text-sm font-medium text-emerald-600" : "text-sm font-medium text-destructive"}>{msg.text}</p>}
      <div className="flex items-center gap-2">
        <Button disabled={pending} onClick={save}>
          <Save className="size-4" /> {pending ? "保存中…" : "保存"}
        </Button>
        {!isNew && (
          <Button variant="outline" disabled={pending} onClick={remove}>
            <Trash2 className="size-4 text-destructive" /> 删除试卷
          </Button>
        )}
        {msg?.ok && <CheckCircle2 className="size-4 text-emerald-600" />}
      </div>
    </div>
  );
}