import { useEffect, useRef, useState } from "react";
import { Button, Card, Form, Input, message, Select, Table } from "antd";
import { useNavigate, useSearchParams } from "react-router-dom";
import { api } from "../api";
import {
  attemptDetailPath,
  readScoreListQuery,
  writeScoreListQuery,
  type ScoreListQuery,
} from "../scoreQueryParams";
import { useSystemSettings } from "../systemSettings";
import type { UserMe } from "../App";
import "./ScoreQueryPage.css";

type ScoreRow = {
  examinee_id: string;
  student_no: string;
  name: string | null;
  id_card: string | null;
  subject_name: string;
  score: number;
  attempt_id: string;
  start_time?: string | null;
  end_time?: string | null;
};

export default function ScoreQueryPage() {
  const nav = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const query = readScoreListQuery(searchParams);
  const [form] = Form.useForm<ScoreListQuery>();
  const tableWrapRef = useRef<HTMLDivElement>(null);
  const [subjects, setSubjects] = useState<string[]>([]);
  const [data, setData] = useState<ScoreRow[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(query.page ?? 1);
  const [pageSize, setPageSize] = useState(query.page_size ?? 20);
  const [filters, setFilters] = useState<Pick<ScoreListQuery, "name" | "id_card" | "subject">>({
    name: query.name,
    id_card: query.id_card,
    subject: query.subject,
  });
  const [tableScrollY, setTableScrollY] = useState(320);
  const [user, setUser] = useState<UserMe | null>(null);
  const { settings } = useSystemSettings();

  const hidePrivacy =
    user?.role === "grader" && !settings.grader_can_see_privacy;

  useEffect(() => {
    api
      .get<UserMe>("/api/auth/me")
      .then((r) => setUser(r.data))
      .catch(() => setUser(null));
  }, []);

  useEffect(() => {
    api.get<{ items: string[] }>("/api/subjects").then((r) => setSubjects(r.data.items));
  }, []);

  useEffect(() => {
    const q = readScoreListQuery(searchParams);
    setPage(q.page ?? 1);
    setPageSize(q.page_size ?? 20);
    setFilters({ name: q.name, id_card: q.id_card, subject: q.subject });
    form.setFieldsValue({
      name: q.name,
      id_card: q.id_card,
      subject: q.subject,
    });
  }, [searchParams, form]);

  const load = async () => {
    const params: Record<string, string | number> = { page, page_size: pageSize };
    if (!hidePrivacy) {
      if (filters.name) params.name = filters.name;
      if (filters.id_card) params.id_card = filters.id_card;
    }
    if (filters.subject) params.subject = filters.subject;
    const { data: res } = await api.get("/api/scores", { params });
    setData(res.items);
    setTotal(res.total);
  };

  useEffect(() => {
    load();
  }, [page, pageSize, filters, hidePrivacy]);

  useEffect(() => {
    const el = tableWrapRef.current;
    if (!el) return;
    const update = () => {
      const h = el.clientHeight;
      setTableScrollY(Math.max(120, h - 56 - 52));
    };
    update();
    const ro = new ResizeObserver(update);
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  const listQuery = (): ScoreListQuery => ({
    ...filters,
    page,
    page_size: pageSize,
  });

  const pushQuery = (q: ScoreListQuery) => {
    setSearchParams(writeScoreListQuery(q), { replace: true });
  };

  const [studentNo, setStudentNo] = useState("");
  const handleLookup = async () => {
    if (!studentNo.trim()) return;
    try {
      const { data } = await api.get<{ attempt_id: string }>(
        `/api/attempts/lookup/${encodeURIComponent(studentNo.trim().toUpperCase())}`
      );
      nav(attemptDetailPath(data.attempt_id, listQuery()));
    } catch {
      message.error("考生编号不存在");
    }
  };

  const columns = [
    {
      title: "序号",
      width: 64,
      fixed: "left" as const,
      render: (_: unknown, __: unknown, index: number) => (page - 1) * pageSize + index + 1,
    },
    { title: "考生编号", dataIndex: "student_no", width: 180, fixed: "left" as const },
    ...(hidePrivacy
      ? []
      : [
          { title: "姓名", dataIndex: "name", width: 100 },
          { title: "证件号", dataIndex: "id_card", width: 180 },
        ]),
    { title: "科目", dataIndex: "subject_name", width: 200, ellipsis: true },
    { title: "开始考试时间", dataIndex: "start_time", width: 170, render: (v: string | null) => v || "—" },
    { title: "结束考试时间", dataIndex: "end_time", width: 170, render: (v: string | null) => v || "—" },
    { title: "成绩", dataIndex: "score", width: 80 },
    {
      title: "操作",
      width: 80,
      fixed: "right" as const,
      render: (_: unknown, row: ScoreRow) => (
        <Button
          type="link"
          onClick={() => nav(attemptDetailPath(row.attempt_id, listQuery()))}
        >
          查看
        </Button>
      ),
    },
  ];

  return (
    <div className="score-query-page">
      <Card bordered className="score-query-page__card">
        <Form
          form={form}
          layout="inline"
          className="score-query-page__form"
          onFinish={(v) => {
            pushQuery({ ...v, page: 1, page_size: pageSize });
          }}
        >
          {!hidePrivacy && (
            <>
              <Form.Item name="name" label="姓名">
                <Input allowClear style={{ width: 120 }} />
              </Form.Item>
              <Form.Item name="id_card" label="证件号">
                <Input allowClear style={{ width: 180 }} />
              </Form.Item>
            </>
          )}
          <Form.Item name="subject" label="科目">
            <Select
              allowClear
              style={{ width: 220 }}
              options={subjects.map((s) => ({ value: s, label: s }))}
            />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">查询</Button>
          </Form.Item>
        </Form>
        <div style={{ marginBottom: 12, display: "flex", gap: 8, alignItems: "center" }}>
          <Input
            placeholder="输入考生编号直接查看答卷"
            value={studentNo}
            onChange={(e) => setStudentNo(e.target.value.toUpperCase())}
            onPressEnter={handleLookup}
            style={{ width: 200, fontFamily: "monospace" }}
            maxLength={10}
          />
          <Button onClick={handleLookup} disabled={!studentNo.trim()}>查看答卷</Button>
        </div>
        <div ref={tableWrapRef} className="score-query-page__table-wrap">
          <Table
            rowKey="attempt_id"
            scroll={{ x: hidePrivacy ? 800 : 1100, y: tableScrollY }}
            dataSource={data}
            pagination={{
              current: page,
              pageSize,
              total,
              showSizeChanger: true,
              showTotal: (t) => `共 ${t} 条`,
              position: ["bottomRight"],
              onChange: (p, ps) => {
                pushQuery({ ...filters, page: p, page_size: ps });
              },
            }}
            columns={columns}
          />
        </div>
      </Card>
    </div>
  );
}