"use client";

import { Button, Form, Input, Select, DatePicker, Radio, message, Modal, Cascader, InputNumber } from "antd";
import { useState, useMemo } from "react";
import { useStaff } from "@nice/client";
import { areaOptions } from './area-options';
const { TextArea } = Input;

const StaffInfoWrite = () => {
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);
    const { create, useCustomFields } = useStaff();
    const { data: fields, isLoading: fieldsLoading } = useCustomFields();

    // 按分组组织字段
    const fieldGroups = useMemo(() => {
        if (!fields) return {};
        return fields.reduce((groups: any, field: any) => {
            const group = field.group || '其他信息';
            if (!groups[group]) {
                groups[group] = [];
            }
            groups[group].push(field);
            return groups;
        }, {});
    }, [fields]);

    const renderField = (field: any) => {
        switch (field.type) {
            case 'text':
                return <Input />;
            case 'number':
                return <InputNumber />;
            case 'date':
                return <DatePicker />;
            case 'select':
                // 检查 field.options 是否存在且有数据
                if (field.options && field.options.length > 0) {
                    return <Select options={field.options} />;
                }
                return <Input placeholder="选项数据缺失" />;
            case 'radio':
                // 检查 field.options 是否存在且有数据
                if (field.options && field.options.length > 0) {
                    return <Radio.Group options={field.options} />;
                }
                return <Input placeholder="选项数据缺失" />;
            case 'textarea':
                return <Input.TextArea />;
            default:
                return <Input />;
        }
    };

    const onFinish = async (values: any) => {
        try {
            setLoading(true);
            const formattedValues = {
                ...values,
                birthplace: values.birthplace?.join('/'),
            };
            
            await create.mutateAsync({
                data: formattedValues
            });
            
            message.success("信息提交成功");
        } catch (error) {
            console.error('提交出错:', error);
            message.error("提交失败，请重试");
        } finally {
            setLoading(false);
        }
    };

    if (fieldsLoading) {
        return <div>加载中...</div>;
    }

    return (
        <div className="max-w-4xl mx-auto p-6">
            <h1 className="text-2xl font-bold mb-6">人员信息管理</h1>

            {/* 信息填报表单 */}
            <Form
                form={form}
                layout="vertical"
                onFinish={onFinish}
                className="space-y-6 mt-6"
            >
                {Object.entries(fieldGroups).map(([groupName, groupFields]) => (
                    <div key={groupName} className="bg-white p-6 rounded-lg shadow">
                        <h2 className="text-lg font-semibold mb-4">{groupName}</h2>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            {groupFields.map((field: any) => (
                                <Form.Item
                                    key={field.id}
                                    label={field.label}
                                    name={field.name}
                                    rules={[
                                        {
                                            required: field.required,
                                            message: `请输入${field.label}`,
                                        },
                                    ]}
                                >
                                    {renderField(field)}
                                </Form.Item>
                            ))}
                        </div>
                    </div>
                ))}

                <div className="flex justify-end space-x-4">
                    <Button onClick={() => form.resetFields()}>重置</Button>
                    <Button 
                        type="primary" 
                        htmlType="submit"
                        loading={loading}
                    >
                        提交
                    </Button>
                </div>
            </Form>
        </div>
    );
};

export default StaffInfoWrite;