import { useEffect, useState } from "react";
import { Button, Card, Form, Input, Modal, Select, Space, Switch, Table, Tag, message } from "antd";
import { api } from "../api";

type Grader = {
  id: number;
  username: string;
  display_name: string;
  is_active: boolean;
  created_at: string;
  subjects: string[];
};

type FormValues = {
  username: string;
  password?: string;
  display_name?: string;
  is_active?: boolean;
  subjects: string[];
};

export default function AdminGradersPage() {
  const [items, setItems] = useState<Grader[]>([]);
  const [loading, setLoading] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState<Grader | null>(null);
  const [form] = Form.useForm<FormValues>();
  const [subjectOptions, setSubjectOptions] = useState<string[]>([]);

  const loadSubjects = async () => {
    const { data } = await api.get<{ items: string[] }>("/api/subjects");
    setSubjectOptions(data.items);
  };

  const load = async () => {
    setLoading(true);
    try {
      const { data } = await api.get<{ items: Grader[] }>("/api/admin/graders");
      setItems(data.items);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    load();
    loadSubjects();
  }, []);

  const openCreate = () => {
    setEditing(null);
    form.resetFields();
    form.setFieldsValue({ is_active: true });
    setModalOpen(true);
  };

  const openEdit = (row: Grader) => {
    setEditing(row);
    form.setFieldsValue({
      username: row.username,
      display_name: row.display_name,
      is_active: row.is_active,
      subjects: row.subjects ?? [],
      password: "",
    });
    setModalOpen(true);
  };

  const submit = async () => {
    const v = await form.validateFields();
    try {
      if (editing) {
        const body: Record<string, unknown> = {
          username: v.username,
          display_name: v.display_name ?? "",
          is_active: v.is_active,
          subjects: v.subjects,
        };
        if (v.password) body.password = v.password;
        await api.put(`/api/admin/graders/${editing.id}`, body);
        message.success("已更新");
      } else {
        await api.post("/api/admin/graders", {
          username: v.username,
          password: v.password,
          display_name: v.display_name ?? "",
          subjects: v.subjects,
        });
        message.success("已创建");
      }
      setModalOpen(false);
      load();
    } catch (e: unknown) {
      const msg =
        (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail || "操作失败";
      message.error(typeof msg === "string" ? msg : "操作失败");
    }
  };

  return (
    <Card
      title="考评员管理"
      extra={
        <Button type="primary" onClick={openCreate}>
          新增考评员
        </Button>
      }
    >
      <Table
        rowKey="id"
        loading={loading}
        dataSource={items}
        scroll={{ x: 720 }}
        columns={[
          { title: "账号", dataIndex: "username" },
          { title: "姓名", dataIndex: "display_name" },
          {
            title: "关联科目",
            dataIndex: "subjects",
            render: (subs: string[]) =>
              subs?.length
                ? subs.map((s) => <Tag key={s}>{s}</Tag>)
                : <span style={{ color: "#999" }}>未配置</span>,
          },
          {
            title: "状态",
            dataIndex: "is_active",
            render: (v: boolean) => (v ? "启用" : "停用"),
          },
          { title: "创建时间", dataIndex: "created_at" },
          {
            title: "操作",
            render: (_, row) => (
              <Space>
                <Button type="link" onClick={() => openEdit(row)}>编辑</Button>
                <Button
                  type="link"
                  danger
                  onClick={() => {
                    Modal.confirm({
                      title: "删除该考评员？",
                      content: `账号：${row.username}`,
                      onOk: async () => {
                        await api.delete(`/api/admin/graders/${row.id}`);
                        message.success("已删除");
                        load();
                      },
                    });
                  }}
                >
                  删除
                </Button>
              </Space>
            ),
          },
        ]}
      />

      <Modal
        title={editing ? "编辑考评员" : "新增考评员"}
        open={modalOpen}
        onCancel={() => setModalOpen(false)}
        onOk={submit}
        destroyOnClose
      >
        <Form form={form} layout="vertical">
          <Form.Item name="username" label="账号" rules={[{ required: true, min: 2 }]}>
            <Input autoComplete="off" />
          </Form.Item>
          <Form.Item
            name="password"
            label={editing ? "新密码（留空不修改）" : "密码"}
            rules={editing ? [] : [{ required: true, min: 6 }]}
          >
            <Input.Password autoComplete="new-password" />
          </Form.Item>
          <Form.Item name="display_name" label="姓名">
            <Input />
          </Form.Item>
          <Form.Item
            name="subjects"
            label="关联科目"
            rules={[{ required: true, message: "请至少选择一个科目" }]}
          >
            <Select
              mode="multiple"
              placeholder="选择可查看成绩的科目"
              options={subjectOptions.map((s) => ({ label: s, value: s }))}
              optionFilterProp="label"
            />
          </Form.Item>
          {editing && (
            <Form.Item name="is_active" label="启用" valuePropName="checked">
              <Switch />
            </Form.Item>
          )}
        </Form>
      </Modal>
    </Card>
  );
}