import React from 'react';
import { DatePicker, Form, Input, Modal, Select } from 'antd';
import type { FormInstance } from 'antd';
import type { ClassOption, ExamFormValues } from './types';
import { EXAM_TYPE_OPTIONS } from './types';

interface Props {
  open: boolean;
  editing: boolean;
  saving: boolean;
  form: FormInstance<ExamFormValues>;
  classes: ClassOption[];
  onCancel: () => void;
  onSubmit: () => void;
}

const ExamFormModal: React.FC<Props> = ({
  open,
  editing,
  saving,
  form,
  classes,
  onCancel,
  onSubmit,
}) => (
  <Modal
    title={editing ? '编辑考试' : '创建考试'}
    open={open}
    confirmLoading={saving}
    onCancel={onCancel}
    onOk={onSubmit}
    width={560}
  >
    <Form form={form} layout="vertical">
      <Form.Item name="examType" label="考试类型" rules={[{ required: true, message: '请选择考试类型' }]}>
        <Select options={EXAM_TYPE_OPTIONS} placeholder="请选择" />
      </Form.Item>
      <Form.Item name="examName" label="考试名称" rules={[{ required: true, message: '请输入考试名称' }]}>
        <Input placeholder="如：2026 年 7 月月考" />
      </Form.Item>
      <Form.Item name="subject" label="科目" rules={[{ required: true, message: '请输入科目' }]}>
        <Input placeholder="如：数学" />
      </Form.Item>
      <Form.Item name="examDate" label="考试日期" rules={[{ required: true, message: '请选择考试日期' }]}>
        <DatePicker style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item name="classId" label="考试班级" rules={[{ required: true, message: '请选择考试班级' }]}>
        <Select
          showSearch
          optionFilterProp="label"
          placeholder="选择在读班级"
          options={classes.filter((item) => !item.isArchived).map((item) => ({ value: item.id, label: item.name }))}
        />
      </Form.Item>
    </Form>
  </Modal>
);

export default ExamFormModal;