import DepartmentSelect from "@web/src/components/models/department/department-select";
import { Form, Input, Button, Select } from "antd";
import { motion } from "framer-motion";

export interface RegisterFormData {
    deptId: string;
    username: string;
    showname: string;
    officerId: string;
    password: string;
    repeatPass: string;
}

interface RegisterFormProps {
    onSubmit: (data: RegisterFormData) => void;
    isLoading: boolean;
}

export const RegisterForm = ({ onSubmit, isLoading }: RegisterFormProps) => {
    const [form] = Form.useForm<RegisterFormData>();

    return (
        <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
        >

            <Form
                form={form}
                layout="vertical"
                onFinish={onSubmit}
                scrollToFirstError
            >
                <Form.Item
                    name="deptId"
                    label="部门"
                    rules={[
                        { required: true, message: "请选择部门" }
                    ]}
                >
                    <DepartmentSelect></DepartmentSelect>

                </Form.Item>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <Form.Item
                        name="username"
                        label="用户名"
                        rules={[
                            { required: true, message: "请输入用户名" },
                            { min: 2, message: "用户名至少需要2个字符" }
                        ]}
                    >
                        <Input placeholder="用户名" />
                    </Form.Item>

                    <Form.Item
                        name="showname"
                        label="姓名"
                        rules={[
                            { required: true, message: "请输入姓名" },
                            { min: 2, message: "姓名至少需要2个字符" }
                        ]}
                    >
                        <Input placeholder="姓名" />
                    </Form.Item>
                </div>

                <Form.Item
                    name="officerId"
                    label="工号"
                    rules={[
                        { required: true, message: "请输入工号" },
                        {
                            pattern: /^\d{5,12}$/,
                            message: "请输入有效的工号（5-12位数字）"
                        }
                    ]}
                >
                    <Input placeholder="工号" />
                </Form.Item>

                <Form.Item
                    name="password"
                    label="密码"
                    rules={[
                        { required: true, message: "请输入密码" },
                        { min: 8, message: "密码至少需要8个字符" },
                        {
                            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
                            message: "密码必须包含大小写字母、数字和特殊字符"
                        }
                    ]}
                >
                    <Input.Password placeholder="密码" />
                </Form.Item>

                <Form.Item
                    name="repeatPass"
                    label="确认密码"
                    dependencies={['password']}
                    rules={[
                        { required: true, message: "请确认密码" },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (!value || getFieldValue('password') === value) {
                                    return Promise.resolve();
                                }
                                return Promise.reject(new Error('两次输入的密码不一致'));
                            },
                        }),
                    ]}
                >
                    <Input.Password placeholder="确认密码" />
                </Form.Item>

                <Form.Item>
                    <Button
                        type="primary"
                        htmlType="submit"
                        loading={isLoading}
                        className="w-full h-10 rounded-lg"
                    >
                        {isLoading ? "正在创建账户..." : "创建账户"}
                    </Button>
                </Form.Item>
            </Form>
        </motion.div>
    );
};