import { useEffect, useState } from "react";
import {
    Button,
    Col,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Radio,
    Row,
    Select,
    Space,
    Spin,
    Tabs,
    message,
} from "antd";
import dayjs from "dayjs";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { tools } from "@cqsjjb/jjb-common-lib";
import { NS_COURSEWARE } from "~/enumerate/namespace";
import {
    CLASS_UNIT_TYPE_OPTIONS,
    CLASS_YES_NO_OPTIONS,
    COURSEWARE_TRAINING_TYPE_OPTIONS,
} from "~/enumerate/constant";
import StudentTab from "./StudentTab";
import CourseTab from "./CourseTab";

const { router } = tools;
const { RangePicker } = DatePicker;

/** 教育培训 — 新增/编辑班级 */
function ClassAddPage(props) {
    const [form] = Form.useForm();
    /** 已保存的班级 id：有值时解锁学员/课程 Tab */
    const [savedClassId, setSavedClassId] = useState(router.query.classId);
    const isEdit = !!router.query.classId;
    const unlocked = !!savedClassId;

    const confirmLoading = props.courseware?.classConfirmLoading;
    const detailLoading = props.courseware?.classDetailLoading;
    /** 是否开启考试：选否时隐藏其余考试相关字段 */
    const openExam = Form.useWatch("openExam", form);

    useEffect(() => {
        if (!isEdit) return;
        (async () => {
            const res = await props.classDetail({ id: router.query.classId });
            if (res?.success !== false && res?.data) {
                const data = res.data;
                form.setFieldsValue({
                    ...data,
                    trainingDateRange:
                        data.startDate && data.endDate
                            ? [dayjs(data.startDate), dayjs(data.endDate)]
                            : undefined,
                });
            } else {
                props.history.goBack();
            }
        })();
    }, []);

    const handleSubmit = async () => {
        try {
            const values = await form.validateFields();
            // 培训日期范围拆为后端 startDate/endDate（yyyy-MM-dd）
            const { trainingDateRange, ...rest } = values;
            const payload = {
                ...rest,
                startDate: trainingDateRange?.[0]?.format("YYYY-MM-DD"),
                endDate: trainingDateRange?.[1]?.format("YYYY-MM-DD"),
                ...(isEdit ? { id: router.query.classId } : {}),
            };
            const res = await (isEdit
                ? props.classModify(payload)
                : props.classAdd(payload));
            if (res?.success === false) return;
            message.success("保存成功");
            if (isEdit) return;
            // 新增：save 接口返回新班级 id，同步 URL 并解锁学员/课程 Tab
            const newId = res?.data;
            if (newId) {
                router.query = { ...router.query, classId: newId };
                setSavedClassId(newId);
            }
        } catch {
            // 表单校验失败或请求异常，由 antd / http 层提示
        }
    };

    return (
        <PageLayout
            title={isEdit ? "编辑班级" : "新增班级"}
            history={props.history}
            previous
            footer={
                <Space>
                    <Button onClick={() => props.history.goBack()}>取消</Button>
                    <Button type="primary" loading={confirmLoading} onClick={handleSubmit}>
                        保存
                    </Button>
                </Space>
            }
        >
            <Tabs
                items={[
                    {
                        key: "base",
                        label: "基础信息",
                        children: (
                            <Spin spinning={isEdit && !!detailLoading}>
                                <Form
                                    form={form}
                                    layout="vertical"
                                    scrollToFirstError
                                    initialValues={{
                                        openExam: 0,
                                        examFaceRecognition: 0,
                                        faceRecognition: 0,
                                        shuffleQuestions: 0,
                                    }}
                                >
                    <h3>基本信息</h3>
                    <Row gutter={24}>
                        <Col span={12}>
                            <Form.Item label="参训单位类型" name="unitType">
                                <Select
                                    placeholder="请选择"
                                    allowClear
                                    options={CLASS_UNIT_TYPE_OPTIONS}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="班级名称"
                                name="className"
                                rules={[{ required: true, message: "请输入班级名称" }]}
                            >
                                <Input placeholder="请输入班级名称" allowClear maxLength={50} />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="参训单位"
                                name="unitName"
                                rules={[{ required: true, message: "请输入参训单位" }]}
                            >
                                <Input placeholder="请输入参训单位" allowClear maxLength={50} />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="记录人员"
                                name="recorder"
                                rules={[{ required: true, message: "请输入记录人员" }]}
                            >
                                <Input placeholder="请输入记录人员" allowClear maxLength={50} />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="考核人员"
                                name="assessor"
                                rules={[{ required: true, message: "请输入考核人员" }]}
                            >
                                <Input placeholder="请输入考核人员" allowClear maxLength={50} />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="安全管理部门负责人"
                                name="safetyManager"
                                rules={[{ required: true, message: "请输入安全管理部门负责人" }]}
                            >
                                <Input
                                    placeholder="请输入安全管理部门负责人"
                                    allowClear
                                    maxLength={50}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="培训日期"
                                name="trainingDateRange"
                                rules={[{ required: true, message: "请选择培训日期" }]}
                            >
                                <RangePicker style={{ width: "100%" }} />
                            </Form.Item>
                        </Col>



                        <Col span={12}>
                            <Form.Item
                                label="培训类型"
                                name="trainingType"
                                rules={[{ required: true, message: "请选择培训类型" }]}
                            >
                                <Select
                                    placeholder="请选择培训类型"
                                    allowClear
                                    options={COURSEWARE_TRAINING_TYPE_OPTIONS}
                                />
                            </Form.Item>
                        </Col>
                    </Row>

                    <h3>基本设置</h3>
                    <Row gutter={24}>
                        <Col span={12}>
                            <Form.Item label="是否开启考试" name="openExam" extra='不考试的班级，学员学习完所有课程，即为完成学业。'>
                                <Radio.Group options={CLASS_YES_NO_OPTIONS} />
                            </Form.Item>
                        </Col>
                        {openExam === 1 && (
                            <>
                                <Col span={12}>
                                    <Form.Item label="考试次数" name="examCount">
                                        <InputNumber
                                            placeholder="请输入考试次数"
                                            min={1}
                                            max={10}
                                            precision={0}
                                            style={{ width: "100%" }}
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item label="考试前人脸识别" name="examFaceRecognition">
                                        <Radio.Group options={CLASS_YES_NO_OPTIONS} />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item label="考试中人脸识别" name="faceRecognition">
                                        <Radio.Group options={CLASS_YES_NO_OPTIONS} />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item label="人脸识别时间（分钟）" name="faceRecognitionTime">
                                        <InputNumber
                                            placeholder="请输入人脸识别时间"
                                            min={1}
                                            max={60}
                                            precision={0}
                                            style={{ width: "100%" }}
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item label="是否打乱试题顺序" name="shuffleQuestions">
                                        <Radio.Group options={CLASS_YES_NO_OPTIONS} />
                                    </Form.Item>
                                </Col>
                            </>
                        )}
                    </Row>
                                </Form>
                            </Spin>
                        ),
                    },
                    {
                        key: "student",
                        label: "学员",
                        disabled: !unlocked,
                        children: unlocked ? (
                            <StudentTab classId={savedClassId} />
                        ) : null,
                    },
                    {
                        key: "course",
                        label: "课程",
                        disabled: !unlocked,
                        children: unlocked ? (
                            <CourseTab classId={savedClassId} history={props.history} />
                        ) : null,
                    },
                ]}
            />
        </PageLayout>
    );
}

export default Connect([NS_COURSEWARE], true)(ClassAddPage);