'use client';

import * as React from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { CalendarIcon, Plus, Trash2 } from 'lucide-react';
import { IconChevronDown, IconCheck, IconX } from '@tabler/icons-react';

import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetHeader,
    SheetTitle,
    SheetFooter,
} from '@nice/ui/components/sheet';
import { Button } from '@nice/ui/components/button';
import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from '@nice/ui/components/form';
import { Input } from '@nice/ui/components/input';
import { Textarea } from '@nice/ui/components/textarea';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@nice/ui/components/select';
import { Calendar } from '@nice/ui/components/calendar';
import { Popover, PopoverContent, PopoverTrigger } from '@nice/ui/components/popover';
import { DateTimePicker } from '@nice/ui/components/date-time-picker';
import {
    Command,
    CommandEmpty,
    CommandGroup,
    CommandItem,
    CommandList,
} from '@nice/ui/components/command';
import { Card, CardContent, CardHeader, CardTitle } from '@nice/ui/components/card';
import { cn } from '@nice/ui/lib/utils';
import { DeptSelect, DutySelect } from '@/components/selector';
import { AvatarUpload } from '@/components/common/avatar-upload';
import { Education, EducationForm, PoliticalStatus, TrainType, AppraisalLevel, ProfileMetadata } from '@fenghuo/common';
import { useProfile } from './profile-provider';
import { useTranslation } from '@nice/i18n';


// 定义表单验证模式
const createProfileFormSchema = (t: (key: string) => string) => z.object({
    // 基本信息
    name: z.string().min(1, t('profile.profile_sheet.validation.name_required')),
    gender: z.number().min(1).max(2),
    idNum: z.string().min(15, t('profile.profile_sheet.validation.id_number_min_length')),
    paperId: z.string().min(1, t('profile.profile_sheet.validation.certificate_number_required')), // 改为必选
    avatar: z.string().optional(), // 添加头像字段，可选
    command: z.string(), // 添加编制命令字段
    birthday: z.date().optional(), // 添加生日字段

    // 入职信息 - 改为必选
    hireDate: z.date({ required_error: t('profile.profile_sheet.validation.hire_date_required') }),
    relativeHireDate: z.date().optional(),

    // 身份信息 - 改为必选
    identity: z.string().min(1, t('profile.profile_sheet.validation.identity_required')),
    level: z.string().min(1, t('profile.profile_sheet.validation.rank_required')),
    levelDate: z.date({ required_error: t('profile.profile_sheet.validation.rank_time_required') }),

    // 职务信息 - 改为必选
    dutyCode: z.string().optional(),
    dutyLevel: z.string().optional(), // 改为非必选
    dutyName: z.string().min(1, t('profile.profile_sheet.validation.duty_name_required')),

    // 组织信息 - 改为必选
    organizationId: z.string().min(1, t('profile.profile_sheet.validation.organization_required')),

    // 元数据
    metadata: z.object({
        ethnicity: z.string().optional(),
        bloodType: z.string().optional(),
        proxyDuty: z.string().optional(),
        isRehire: z.boolean().optional(),
        isExtendedDeparture: z.boolean().optional(),
        positionYear: z.number().optional(),
        politicalStatus: z.string().optional(),
        partyPosition: z.string().optional(),
        native: z.object({
            province: z.string().optional(),
            city: z.string().optional(),
            county: z.string().optional(),
        }).optional(),
        education: z.string().optional(),
        educationForm: z.string().optional(),
        isGraduate: z.boolean().optional(),
        schoolMajor: z.string().optional(),
        drills: z.number().optional(),
        train: z.array(z.object({
            type: z.string().optional(),
            location: z.string().optional(),
            major: z.string().optional(),
        })).optional(),
        appraisal: z.array(z.object({
            level: z.string().optional(),
            job: z.string().optional(),
        })).optional(),
        foreignLanguage: z.string().optional(),
        reward: z.string().optional(),
        punish: z.string().optional(),
        remark: z.string().optional(),
    }).optional(),
});

// 职务水平选择器组件
interface DutyLevelSelectProps {
    value?: string;
    onValueChange?: (value: string) => void;
    placeholder?: string;
    className?: string;
    disabled?: boolean;
}

function DutyLevelSelect({
    value,
    onValueChange,
    placeholder = '请选择职务水平',
    className,
    disabled = false,
}: DutyLevelSelectProps) {
    const { t } = useTranslation();
    const [open, setOpen] = React.useState(false);

    // 职务水平选项
    const dutyLevelOptions = [
        { value: '1', label: t('profile.profile_sheet.duty_level_primary') },
        { value: '2', label: t('profile.profile_sheet.duty_level_middle') },
        { value: '3', label: t('profile.profile_sheet.duty_level_high') },
    ];

    // 获取当前选中的选项
    const selectedOption = dutyLevelOptions.find(option => option.value === value);

    // 处理选择逻辑
    const handleSelect = (selectedValue: string) => {
        if (!onValueChange) return;

        // 如果点击的是当前已选中的值，则清空选择
        if (value === selectedValue) {
            onValueChange('');
        } else {
            onValueChange(selectedValue);
        }
        setOpen(false);
    };

    // 清除选择
    const handleClear = (e: React.MouseEvent) => {
        e.preventDefault();
        e.stopPropagation();
        onValueChange?.('');
    };

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={open}
                    className={cn(
                        'w-full justify-between text-left font-normal',
                        !selectedOption && 'text-muted-foreground',
                        className,
                    )}
                    disabled={disabled}
                >
                    <span className="truncate">
                        {selectedOption ? selectedOption.label : placeholder}
                    </span>
                    <div className="flex items-center gap-1 shrink-0">
                        {selectedOption && (
                            <div
                                role="button"
                                tabIndex={0}
                                onClick={handleClear}
                                onKeyDown={(e) => {
                                    if (e.key === 'Enter' || e.key === ' ') {
                                        handleClear(e as any);
                                    }
                                }}
                                className="flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted/50 text-muted-foreground hover:text-foreground transition-colors"
                                aria-label={t('common.clear_selection')}
                            >
                                <IconX className="h-3 w-3" />
                            </div>
                        )}
                        <IconChevronDown className="h-4 w-4 shrink-0 opacity-50" />
                    </div>
                </Button>
            </PopoverTrigger>
            <PopoverContent className="w-full p-0" style={{ width: 'var(--radix-popover-trigger-width)' }} align="start">
                <Command>
                    <CommandList>
                        <CommandEmpty>{t('profile.profile_sheet.duty_level_not_found')}</CommandEmpty>
                        <CommandGroup>
                            {dutyLevelOptions.map((option) => (
                                <CommandItem
                                    key={option.value}
                                    value={option.value}
                                    onSelect={() => handleSelect(option.value)}
                                    className={cn(
                                        'flex items-center justify-between cursor-pointer',
                                        'hover:bg-accent hover:text-accent-foreground',
                                        value === option.value && 'bg-accent text-accent-foreground',
                                    )}
                                >
                                    <span>{option.label}</span>
                                    {value === option.value && (
                                        <IconCheck className="h-4 w-4 text-primary" />
                                    )}
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    </CommandList>
                </Command>
            </PopoverContent>
        </Popover>
    );
}


export function ProfileSheet() {
    const { t } = useTranslation();
    const {
        isSheetOpen,
        setIsSheetOpen,
        editingProfile,
        sheetMode,
        handleSubmitEmployee,
    } = useProfile();

    // 创建动态的表单验证模式
    const profileFormSchema = React.useMemo(() => createProfileFormSchema(t), [t]);

    type ProfileFormValues = z.infer<typeof profileFormSchema>;

    const form = useForm<ProfileFormValues>({
        resolver: zodResolver(profileFormSchema),
        defaultValues: {
            name: '',
            gender: 1,
            idNum: '',
            paperId: '',
            avatar: '',
            command: '',
            birthday: undefined,
            hireDate: undefined, // 改为 undefined，保持一致性
            relativeHireDate: undefined, // 改为 undefined，保持一致性
            identity: '',
            level: '',
            levelDate: undefined, // 改为 undefined，保持一致性
            dutyCode: '',
            dutyLevel: '',
            dutyName: '',
            organizationId: '',
            metadata: {
                ethnicity: '',
                bloodType: '',
                proxyDuty: '',
                isRehire: false,
                isExtendedDeparture: false,
                positionYear: undefined,
                politicalStatus: '',
                partyPosition: '',
                native: {
                    province: '',
                    city: '',
                    county: '',
                },
                education: '',
                educationForm: '',
                isGraduate: false,
                schoolMajor: '',
                drills: undefined,
                train: [{ type: '', location: '', major: '' }],
                appraisal: [{ level: '', job: '' }],
                foreignLanguage: '',
                reward: '',
                punish: '',
                remark: '',
            },
        },
    });

    // 当编辑数据变化时，回显数据
    React.useEffect(() => {
        if (editingProfile && sheetMode === 'edit') {
            const metadata = editingProfile.metadata as ProfileMetadata;
            form.reset({
                name: editingProfile.name || '',
                gender: editingProfile.gender || 1,
                idNum: editingProfile.idNum || '',
                paperId: editingProfile.paperId || '',
                avatar: editingProfile.avatar || '',
                birthday: editingProfile.birthday ? new Date(editingProfile.birthday) : undefined,
                command: editingProfile.command || '',
                hireDate: editingProfile.hireDate ? new Date(editingProfile.hireDate) : undefined,
                relativeHireDate: editingProfile.relativeHireDate ? new Date(editingProfile.relativeHireDate) : undefined,
                identity: editingProfile.identity || '',
                level: editingProfile.level || '',
                levelDate: editingProfile.levelDate ? new Date(editingProfile.levelDate) : undefined,
                dutyCode: editingProfile.dutyCode || '',
                dutyLevel: editingProfile.dutyLevel?.toString() || '',
                dutyName: editingProfile.dutyName || '',
                organizationId: editingProfile.organizationId || '',
                metadata: {
                    ethnicity: metadata?.ethnicity || '',
                    bloodType: metadata?.bloodType || '',
                    proxyDuty: metadata?.proxyDuty || '',
                    isRehire: metadata?.isRehire || false,
                    isExtendedDeparture: metadata?.isExtendedDeparture || false,
                    positionYear: metadata?.positionYear,
                    politicalStatus: metadata?.politicalStatus || '',
                    partyPosition: metadata?.partyPosition || '',
                    native: {
                        province: metadata?.native?.province || '',
                        city: metadata?.native?.city || '',
                        county: metadata?.native?.county || '',
                    },
                    education: metadata?.education || '',
                    educationForm: metadata?.educationForm || '',
                    isGraduate: metadata?.isGraduate || false,
                    schoolMajor: metadata?.schoolMajor || '',
                    drills: metadata?.drills,
                    train: metadata?.train || [{ type: '', location: '', major: '' }],
                    appraisal: metadata?.appraisal || [{ level: '', job: '' }],
                    foreignLanguage: metadata?.foreignLanguage || '',
                    reward: metadata?.reward || '',
                    punish: metadata?.punish || '',
                    remark: metadata?.remark || '',
                },
            });
        } else if (sheetMode === 'create') {
            // 创建模式时重置表单 - 保持与 defaultValues 一致
            form.reset({
                name: '',
                gender: 1,
                idNum: '',
                paperId: '',
                avatar: '',
                birthday: undefined,
                command: '',
                hireDate: undefined,
                relativeHireDate: undefined,
                identity: '',
                level: '',
                levelDate: undefined,
                dutyCode: '',
                dutyLevel: '',
                dutyName: '',
                organizationId: '',
                metadata: {
                    ethnicity: '',
                    bloodType: '',
                    proxyDuty: '',
                    isRehire: false,
                    isExtendedDeparture: false,
                    positionYear: undefined,
                    politicalStatus: '',
                    partyPosition: '',
                    native: {
                        province: '',
                        city: '',
                        county: '',
                    },
                    education: '',
                    educationForm: '',
                    isGraduate: false,
                    schoolMajor: '',
                    drills: undefined,
                    train: [{ type: '', location: '', major: '' }],
                    appraisal: [{ level: '', job: '' }],
                    foreignLanguage: '',
                    reward: '',
                    punish: '',
                    remark: '',
                },
            });
        }
    }, [editingProfile, sheetMode, form]);

    // 处理 Sheet 开关状态变化
    const handleOpenChange = (newOpen: boolean) => {
        setIsSheetOpen(newOpen);
        // 当 Sheet 关闭时清空表单
        if (!newOpen) {
            form.reset();
        }
    };

    const handleSubmit = (data: ProfileFormValues) => {
        handleSubmitEmployee(data);
        setIsSheetOpen(false);
        form.reset();
    };

    const addTrainExperience = () => {
        const current = form.getValues('metadata.train') || [];
        form.setValue('metadata.train', [...current, { type: '', location: '', major: '' }]);
    };

    const removeTrainExperience = (index: number) => {
        const current = form.getValues('metadata.train') || [];
        form.setValue('metadata.train', current.filter((_, i) => i !== index));
    };

    const addAppraisalExperience = () => {
        const current = form.getValues('metadata.appraisal') || [];
        form.setValue('metadata.appraisal', [...current, { level: '', job: '' }]);
    };

    const removeAppraisalExperience = (index: number) => {
        const current = form.getValues('metadata.appraisal') || [];
        form.setValue('metadata.appraisal', current.filter((_, i) => i !== index));
    };

    const politicalStatusOptions = Object.values(PoliticalStatus);
    const educationFormOptions = Object.values(EducationForm);
    const trainTypeOptions = Object.values(TrainType);
    const appraisalLevelOptions = Object.values(AppraisalLevel);
    const educationOptions = Object.values(Education);

    return (
        <Sheet open={isSheetOpen} onOpenChange={handleOpenChange}>
            <SheetContent side="right" className="w-1/3 min-w-[600px] p-3 overflow-y-auto mb-2">
                <SheetHeader>
                    <SheetTitle>
                        {sheetMode === 'edit'
                            ? t('profile.profile_sheet.title_edit')
                            : t('profile.profile_sheet.title_add')
                        }
                    </SheetTitle>
                    <SheetDescription>
                        {sheetMode === 'edit'
                            ? t('profile.profile_sheet.description_edit')
                            : t('profile.profile_sheet.description_add')
                        }，{t('profile.profile_sheet.required_fields_note')}
                    </SheetDescription>
                </SheetHeader>

                <Form {...form}>
                    <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-2">
                        {/* 基本信息 */}
                        <Card>
                            <CardHeader>
                                <CardTitle className="text-lg">{t('profile.profile_sheet.basic_info')}</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                {/* 头像和表单字段 */}
                                <div className="flex gap-4 items-start">
                                    {/* 头像上传区域 - 3:4 长方形 */}
                                    <div className="flex-shrink-0">
                                        <FormField
                                            control={form.control}
                                            name="avatar"
                                            render={({ field }) => (
                                                <FormItem>
                                                    <FormControl>
                                                        <AvatarUpload
                                                            value={field.value}
                                                            onChange={field.onChange}
                                                            className="w-24 h-32"
                                                            placeholder={t('common.upload_avatar')}
                                                            accept="image/*"
                                                            maxSize={10 * 1024 * 1024} // 10MB
                                                        />
                                                    </FormControl>
                                                    <FormMessage />
                                                </FormItem>
                                            )}
                                        />
                                    </div>

                                    {/* 表单字段区域 */}
                                    <div className="flex-1 space-y-4">
                                        {/* 姓名和性别 */}
                                        <div className="grid grid-cols-2 gap-4">
                                            <FormField
                                                control={form.control}
                                                name="name"
                                                render={({ field }) => (
                                                    <FormItem>
                                                        <FormLabel>{t('profile.profile_sheet.name') + ' *'}</FormLabel>
                                                        <FormControl>
                                                            <Input placeholder={t('profile.profile_sheet.placeholders.name')} {...field} />
                                                        </FormControl>
                                                        <FormMessage />
                                                    </FormItem>
                                                )}
                                            />
                                            <FormField
                                                control={form.control}
                                                name="gender"
                                                render={({ field }) => (
                                                    <FormItem>
                                                        <FormLabel>{t('profile.profile_sheet.gender') + ' *'}</FormLabel>
                                                        <Select
                                                            onValueChange={(value) => field.onChange(Number(value))}
                                                            value={field.value?.toString() || ''}
                                                        >
                                                            <FormControl>
                                                                <SelectTrigger>
                                                                    <SelectValue placeholder={t('profile.profile_sheet.placeholders.gender')} />
                                                                </SelectTrigger>
                                                            </FormControl>
                                                            <SelectContent>
                                                                <SelectItem value="1">{t('common.male')}</SelectItem>
                                                                <SelectItem value="2">{t('common.female')}</SelectItem>
                                                            </SelectContent>
                                                        </Select>
                                                        <FormMessage />
                                                    </FormItem>
                                                )}
                                            />
                                        </div>

                                        {/* 身份证号和证件号 */}
                                        <div className="grid grid-cols-2 gap-4">
                                            <FormField
                                                control={form.control}
                                                name="idNum"
                                                render={({ field }) => (
                                                    <FormItem>
                                                        <FormLabel>{t('profile.profile_sheet.id_number') + ' *'}</FormLabel>
                                                        <FormControl>
                                                            <Input placeholder={t('profile.profile_sheet.placeholders.id_number')} {...field} />
                                                        </FormControl>
                                                        <FormMessage />
                                                    </FormItem>
                                                )}
                                            />
                                            <FormField
                                                control={form.control}
                                                name="paperId"
                                                render={({ field }) => (
                                                    <FormItem>
                                                        <FormLabel>{t('profile.profile_sheet.certificate_number') + ' *'}</FormLabel>
                                                        <FormControl>
                                                            <Input placeholder={t('profile.profile_sheet.placeholders.certificate_number')} {...field} />
                                                        </FormControl>
                                                        <FormMessage />
                                                    </FormItem>
                                                )}
                                            />
                                        </div>
                                    </div>
                                </div>

                                {/* 编制命令 - 占据一整行 */}
                                <FormField
                                    control={form.control}
                                    name="command"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>{t('profile.profile_sheet.formation_command') + ' *'}</FormLabel>
                                            <FormControl>
                                                <Input placeholder={t('profile.profile_sheet.placeholders.formation_command')} {...field} />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </CardContent>
                        </Card>
                        {/* 组织信息 */}
                        <Card>
                            <CardHeader>
                                <CardTitle className="text-lg">{t('profile.profile_sheet.organization_info')}</CardTitle>
                            </CardHeader>
                            <CardContent>
                                <FormField
                                    control={form.control}
                                    name="organizationId"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>{t('profile.profile_sheet.organization') + ' *'}</FormLabel>
                                            <FormControl>
                                                <DeptSelect
                                                    value={field.value}
                                                    onValueChange={field.onChange}
                                                    placeholder={t('profile.profile_sheet.placeholders.organization')}
                                                    className="w-full border border-[#EBEFF5]"
                                                />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </CardContent>
                        </Card>
                        {/* 职务信息 */}
                        <Card>
                            <CardHeader>
                                <CardTitle className="text-lg">{t('profile.profile_sheet.duty_info')}</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div className="grid grid-cols-3 gap-4">
                                    <FormField
                                        control={form.control}
                                        name="dutyName"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>{t('profile.profile_sheet.duty_name') + ' *'}</FormLabel>
                                                <FormControl>
                                                    <DutySelect
                                                        value={field.value}
                                                        onChange={field.onChange}
                                                        placeholder={t('profile.profile_sheet.placeholders.duty_name')}
                                                    />
                                                </FormControl>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                    <FormField
                                        control={form.control}
                                        name="dutyCode"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>{t('profile.profile_sheet.duty_code')}</FormLabel>
                                                <FormControl>
                                                    <Input placeholder={t('profile.profile_sheet.placeholders.duty_code')} {...field} />
                                                </FormControl>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                    <FormField
                                        control={form.control}
                                        name="dutyLevel"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>{t('profile.profile_sheet.duty_level')}</FormLabel>
                                                <FormControl>
                                                    <DutyLevelSelect
                                                        value={field.value}
                                                        onValueChange={field.onChange}
                                                        placeholder={t('profile.profile_sheet.duty_level_placeholder')}
                                                        className="w-full border border-[#EBEFF5]"
                                                    />
                                                </FormControl>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                </div>
                            </CardContent>
                        </Card>
                        {/* 身份信息 */}
                        <Card>
                            <CardHeader>
                                <CardTitle className="text-lg">{t('profile.profile_sheet.identity_info')}</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div className="grid grid-cols-3 gap-4">
                                    <FormField
                                        control={form.control}
                                        name="identity"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>{t('profile.profile_sheet.identity') + ' *'}</FormLabel>
                                                <FormControl>
                                                    <Input placeholder={t('profile.profile_sheet.placeholders.identity')} {...field} />
                                                </FormControl>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                    <FormField
                                        control={form.control}
                                        name="level"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>{t('profile.profile_sheet.rank') + ' *'}</FormLabel>
                                                <FormControl>
                                                    <Input placeholder={t('profile.profile_sheet.placeholders.rank')} {...field} />
                                                </FormControl>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                    <FormField
                                        control={form.control}
                                        name="levelDate"
                                        render={({ field }) => (
                                            <FormItem className="flex flex-col">
                                                <FormLabel>{t('profile.profile_sheet.rank_time') + ' *'}</FormLabel>
                                                <Popover>
                                                    <PopoverTrigger asChild>
                                                        <FormControl>
                                                            <Button
                                                                variant="outline"
                                                                className={cn(
                                                                    "w-full pl-3 text-left font-normal border border-[#EBEFF5]",
                                                                    !field.value && "text-muted-foreground"
                                                                )}
                                                            >
                                                                {field.value ? (
                                                                    dayjs(field.value).format("YYYY-MM-DD")
                                                                ) : (
                                                                    <span>{t('common.select_date')}</span>
                                                                )}
                                                                <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                                                            </Button>
                                                        </FormControl>
                                                    </PopoverTrigger>
                                                    <PopoverContent className="w-auto p-0" align="start">
                                                        <Calendar
                                                            mode="single"
                                                            selected={field.value}
                                                            onSelect={field.onChange}
                                                            disabled={(date) =>
                                                                date > new Date() || date < new Date("1900-01-01")
                                                            }
                                                            initialFocus
                                                        />
                                                    </PopoverContent>
                                                </Popover>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                </div>
                            </CardContent>
                        </Card>
                        {/* 入职信息 */}
                        <Card>
                            <CardHeader>
                                <CardTitle className="text-lg">{t('profile.profile_sheet.hire_info')}</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div className="grid grid-cols-2 gap-4">
                                    <FormField
                                        control={form.control}
                                        name="hireDate"
                                        render={({ field }) => (
                                            <FormItem className="flex flex-col">
                                                <FormLabel>{t('profile.profile_sheet.hire_date') + ' *'}</FormLabel>
                                                <Popover>
                                                    <PopoverTrigger asChild>
                                                        <FormControl>
                                                            <Button
                                                                variant="outline"
                                                                className={cn(
                                                                    "w-full pl-3 text-left font-normal border border-[#EBEFF5]",
                                                                    !field.value && "text-muted-foreground"
                                                                )}
                                                            >
                                                                {field.value ? (
                                                                    dayjs(field.value).format("YYYY-MM-DD")
                                                                ) : (
                                                                    <span>{t('common.select_date')}</span>
                                                                )}
                                                                <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                                                            </Button>
                                                        </FormControl>
                                                    </PopoverTrigger>
                                                    <PopoverContent className="w-auto p-0" align="start">
                                                        <Calendar
                                                            mode="single"
                                                            selected={field.value}
                                                            onSelect={field.onChange}
                                                            disabled={(date) =>
                                                                date > new Date() || date < new Date("1900-01-01")
                                                            }
                                                            initialFocus
                                                        />
                                                    </PopoverContent>
                                                </Popover>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                    <FormField
                                        control={form.control}
                                        name="relativeHireDate"
                                        render={({ field }) => (
                                            <FormItem className="flex flex-col">
                                                <FormLabel>{t('profile.profile_sheet.relative_hire_time')}</FormLabel>
                                                <Popover>
                                                    <PopoverTrigger asChild>
                                                        <FormControl>
                                                            <Button
                                                                variant="outline"
                                                                className={cn(
                                                                    "w-full pl-3 text-left font-normal border border-[#EBEFF5]",
                                                                    !field.value && "text-muted-foreground"
                                                                )}
                                                            >
                                                                {field.value ? (
                                                                    dayjs(field.value).format("YYYY-MM-DD")
                                                                ) : (
                                                                    <span>{t('common.select_date')}</span>
                                                                )}
                                                                <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                                                            </Button>
                                                        </FormControl>
                                                    </PopoverTrigger>
                                                    <PopoverContent className="w-auto p-0" align="start">
                                                        <Calendar
                                                            mode="single"
                                                            selected={field.value}
                                                            onSelect={field.onChange}
                                                            disabled={(date) =>
                                                                date > new Date() || date < new Date("1900-01-01")
                                                            }
                                                            initialFocus
                                                        />
                                                    </PopoverContent>
                                                </Popover>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                </div>
                            </CardContent>
                        </Card>
                        {/* 详细信息 */}
                        <Card>
                            <CardHeader>
                                <CardTitle className="text-lg">{t('profile.profile_sheet.detailed_info')}</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                {/* 基本详细信息 */}
                                <div className="grid grid-cols-3 gap-4">
                                    <FormField
                                        control={form.control}
                                        name="metadata.ethnicity"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>{t('profile.profile_sheet.ethnicity')}</FormLabel>
                                                <FormControl>
                                                    <Input placeholder={t('profile.profile_sheet.placeholders.ethnicity')} {...field} />
                                                </FormControl>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                    <FormField
                                        control={form.control}
                                        name="birthday"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>{t('profile.profile_sheet.birth_date')}</FormLabel>
                                                <FormControl>
                                                    <DateTimePicker
                                                        value={field.value}
                                                        onChange={field.onChange}
                                                        placeholder={t('profile.profile_sheet.placeholders.birth_date')}
                                                        showTime={false}
                                                        maxDate={new Date()}
                                                        minDate={new Date("1900-01-01")}
                                                        dateFormat="YYYY-MM-DD"
                                                        className='border border-[#EBEFF5]'
                                                    />
                                                </FormControl>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                    <FormField
                                        control={form.control}
                                        name="metadata.bloodType"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>{t('profile.profile_sheet.blood_type')}</FormLabel>
                                                <Select onValueChange={field.onChange} value={field.value || ''}>
                                                    <FormControl className='w-full' >
                                                        <SelectTrigger>
                                                            <SelectValue placeholder={t('profile.profile_sheet.placeholders.blood_type')} />
                                                        </SelectTrigger>
                                                    </FormControl>
                                                    <SelectContent>
                                                        <SelectItem value="A">{t('profile.profile_sheet.blood_types.a')}</SelectItem>
                                                        <SelectItem value="B">{t('profile.profile_sheet.blood_types.b')}</SelectItem>
                                                        <SelectItem value="AB">{t('profile.profile_sheet.blood_types.ab')}</SelectItem>
                                                        <SelectItem value="O">{t('profile.profile_sheet.blood_types.o')}</SelectItem>
                                                    </SelectContent>
                                                </Select>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                </div>

                                {/* 政治面貌 */}
                                <div className="grid grid-cols-2 gap-4">
                                    <FormField
                                        control={form.control}
                                        name="metadata.politicalStatus"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>{t('profile.profile_sheet.political_status')}</FormLabel>
                                                <Select onValueChange={field.onChange} value={field.value || ''}>
                                                    <FormControl className='w-full'>
                                                        <SelectTrigger>
                                                            <SelectValue placeholder={t('profile.profile_sheet.placeholders.political_status')} />
                                                        </SelectTrigger>
                                                    </FormControl>
                                                    <SelectContent>
                                                        {politicalStatusOptions.map((status) => (
                                                            <SelectItem key={status} value={status}>
                                                                {status}
                                                            </SelectItem>
                                                        ))}
                                                    </SelectContent>
                                                </Select>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                    <FormField
                                        control={form.control}
                                        name="metadata.partyPosition"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>{t('profile.profile_sheet.party_position')}</FormLabel>
                                                <FormControl>
                                                    <Input placeholder={t('profile.profile_sheet.placeholders.party_position')} {...field} />
                                                </FormControl>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                </div>

                                {/* 籍贯 */}
                                <div className="space-y-2">
                                    <FormLabel>{t('profile.profile_sheet.native_place')}</FormLabel>
                                    <div className="grid grid-cols-3 gap-4">
                                        <FormField
                                            control={form.control}
                                            name="metadata.native.province"
                                            render={({ field }) => (
                                                <FormItem>
                                                    <FormControl>
                                                        <Input placeholder={t('profile.profile_sheet.province')} {...field} />
                                                    </FormControl>
                                                    <FormMessage />
                                                </FormItem>
                                            )}
                                        />
                                        <FormField
                                            control={form.control}
                                            name="metadata.native.city"
                                            render={({ field }) => (
                                                <FormItem>
                                                    <FormControl>
                                                        <Input placeholder={t('profile.profile_sheet.city')} {...field} />
                                                    </FormControl>
                                                    <FormMessage />
                                                </FormItem>
                                            )}
                                        />
                                        <FormField
                                            control={form.control}
                                            name="metadata.native.county"
                                            render={({ field }) => (
                                                <FormItem>
                                                    <FormControl>
                                                        <Input placeholder={t('profile.profile_sheet.county')} {...field} />
                                                    </FormControl>
                                                    <FormMessage />
                                                </FormItem>
                                            )}
                                        />
                                    </div>
                                </div>

                                {/* 学历信息 */}
                                <div className="grid grid-cols-3 gap-4">
                                    <FormField
                                        control={form.control}
                                        name="metadata.education"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>{t('profile.profile_sheet.education')}</FormLabel>
                                                <Select onValueChange={field.onChange} value={field.value || ''}>
                                                    <FormControl className='w-full'>
                                                        <SelectTrigger>
                                                            <SelectValue placeholder={t('profile.profile_sheet.placeholders.education')} />
                                                        </SelectTrigger>
                                                    </FormControl>
                                                    <SelectContent>
                                                        {educationOptions.map((education) => (
                                                            <SelectItem key={education} value={education}>
                                                                {education}
                                                            </SelectItem>
                                                        ))}
                                                    </SelectContent>
                                                </Select>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                    <FormField
                                        control={form.control}
                                        name="metadata.educationForm"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>{t('profile.profile_sheet.education_form')}</FormLabel>
                                                <Select onValueChange={field.onChange} value={field.value || ''}>
                                                    <FormControl className='w-full'>
                                                        <SelectTrigger>
                                                            <SelectValue placeholder={t('profile.profile_sheet.placeholders.education_form')} />
                                                        </SelectTrigger>
                                                    </FormControl>
                                                    <SelectContent>
                                                        {educationFormOptions.map((form) => (
                                                            <SelectItem key={form} value={form}>
                                                                {form}
                                                            </SelectItem>
                                                        ))}
                                                    </SelectContent>
                                                </Select>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                    <FormField
                                        control={form.control}
                                        name="metadata.schoolMajor"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>{t('profile.profile_sheet.school_major')}</FormLabel>
                                                <FormControl className='w-full'>
                                                    <Input placeholder={t('profile.profile_sheet.placeholders.school_major')} {...field} />
                                                </FormControl>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                </div>

                                {/* 其他信息 */}
                                <div className="grid grid-cols-2 gap-4">
                                    <FormField
                                        control={form.control}
                                        name="metadata.positionYear"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>{t('profile.profile_sheet.position_year')}</FormLabel>
                                                <FormControl>
                                                    <Input
                                                        type="number"
                                                        placeholder={t('profile.profile_sheet.placeholders.position_year')}
                                                        {...field}
                                                        onChange={(e) => field.onChange(e.target.value ? Number(e.target.value) : undefined)}
                                                    />
                                                </FormControl>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                    <FormField
                                        control={form.control}
                                        name="metadata.foreignLanguage"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>{t('profile.profile_sheet.foreign_language')}</FormLabel>
                                                <FormControl>
                                                    <Input placeholder={t('profile.profile_sheet.placeholders.foreign_language')} {...field} />
                                                </FormControl>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                </div>

                                {/* 培训经历 */}
                                <div className="space-y-4">
                                    <div className="flex items-center justify-between">
                                        <FormLabel>{t('profile.profile_sheet.train_experience')}</FormLabel>
                                        <Button className='border border-[#5D6E89]' type="button" variant="outline" size="sm" onClick={addTrainExperience}>
                                            <Plus className="w-4 h-4 mr-2" />
                                            {t('profile.profile_sheet.add_train')}
                                        </Button>
                                    </div>
                                    {form.watch('metadata.train')?.map((_, index) => (
                                        <Card key={index} className="p-4">
                                            <div className="flex items-center justify-between mb-4">
                                                <h4 className="text-sm font-medium">{t('profile.profile_sheet.train_experience')} {index + 1}</h4>
                                                {index > 0 && (
                                                    <Button
                                                        type="button"
                                                        variant="ghost"
                                                        size="sm"
                                                        onClick={() => removeTrainExperience(index)}
                                                    >
                                                        <Trash2 className="w-4 h-4" />
                                                    </Button>
                                                )}
                                            </div>
                                            <div className="grid grid-cols-2 gap-4">
                                                <FormField
                                                    control={form.control}
                                                    name={`metadata.train.${index}.type`}
                                                    render={({ field }) => (
                                                        <FormItem>
                                                            <FormLabel>{t('profile.profile_sheet.train_type')}</FormLabel>
                                                            <Select onValueChange={field.onChange} value={field.value || ''}>
                                                                <FormControl className='w-full'>
                                                                    <SelectTrigger>
                                                                        <SelectValue placeholder={t('profile.profile_sheet.placeholders.train_type')} />
                                                                    </SelectTrigger>
                                                                </FormControl>
                                                                <SelectContent>
                                                                    {trainTypeOptions.map((type) => (
                                                                        <SelectItem key={type} value={type}>
                                                                            {type}
                                                                        </SelectItem>
                                                                    ))}
                                                                </SelectContent>
                                                            </Select>
                                                            <FormMessage />
                                                        </FormItem>
                                                    )}
                                                />
                                                <FormField
                                                    control={form.control}
                                                    name={`metadata.train.${index}.location`}
                                                    render={({ field }) => (
                                                        <FormItem>
                                                            <FormLabel>{t('profile.profile_sheet.train_location')}</FormLabel>
                                                            <FormControl>
                                                                <Input placeholder={t('profile.profile_sheet.placeholders.train_location')} {...field} />
                                                            </FormControl>
                                                            <FormMessage />
                                                        </FormItem>
                                                    )}
                                                />
                                            </div>
                                            <FormField
                                                control={form.control}
                                                name={`metadata.train.${index}.major`}
                                                render={({ field }) => (
                                                    <FormItem className="mt-4">
                                                        <FormLabel>{t('profile.profile_sheet.train_major')}</FormLabel>
                                                        <FormControl>
                                                            <Input placeholder={t('profile.profile_sheet.placeholders.train_major')} {...field} />
                                                        </FormControl>
                                                        <FormMessage />
                                                    </FormItem>
                                                )}
                                            />
                                        </Card>
                                    ))}
                                </div>

                                {/* 考核经历 */}
                                <div className="space-y-4">
                                    <div className="flex items-center justify-between">
                                        <FormLabel>{t('profile.profile_sheet.appraisal_experience')}</FormLabel>
                                        <Button className='border border-[#5D6E89]' type="button" variant="outline" size="sm" onClick={addAppraisalExperience}>
                                            <Plus className="w-4 h-4 mr-2" />
                                            {t('profile.profile_sheet.add_appraisal')}
                                        </Button>
                                    </div>
                                    {form.watch('metadata.appraisal')?.map((_, index) => (
                                        <Card key={index} className="p-4">
                                            <div className="flex items-center justify-between mb-4">
                                                <h4 className="text-sm font-medium">{t('profile.profile_sheet.appraisal_experience')} {index + 1}</h4>
                                                {index > 0 && (
                                                    <Button
                                                        type="button"
                                                        variant="ghost"
                                                        size="sm"
                                                        onClick={() => removeAppraisalExperience(index)}
                                                    >
                                                        <Trash2 className="w-4 h-4" />
                                                    </Button>
                                                )}
                                            </div>
                                            <div className="grid grid-cols-2 gap-4">
                                                <FormField
                                                    control={form.control}
                                                    name={`metadata.appraisal.${index}.level`}
                                                    render={({ field }) => (
                                                        <FormItem>
                                                            <FormLabel>{t('profile.profile_sheet.appraisal_level')}</FormLabel>
                                                            <Select onValueChange={field.onChange} value={field.value || ''}>
                                                                <FormControl className='w-full'>
                                                                    <SelectTrigger>
                                                                        <SelectValue placeholder={t('profile.profile_sheet.placeholders.appraisal_level')} />
                                                                    </SelectTrigger>
                                                                </FormControl>
                                                                <SelectContent>
                                                                    {appraisalLevelOptions.map((level) => (
                                                                        <SelectItem key={level} value={level}>
                                                                            {level}
                                                                        </SelectItem>
                                                                    ))}
                                                                </SelectContent>
                                                            </Select>
                                                            <FormMessage />
                                                        </FormItem>
                                                    )}
                                                />
                                                <FormField
                                                    control={form.control}
                                                    name={`metadata.appraisal.${index}.job`}
                                                    render={({ field }) => (
                                                        <FormItem>
                                                            <FormLabel>{t('profile.profile_sheet.appraisal_job')}</FormLabel>
                                                            <FormControl>
                                                                <Input placeholder={t('profile.profile_sheet.placeholders.appraisal_job')} {...field} />
                                                            </FormControl>
                                                            <FormMessage />
                                                        </FormItem>
                                                    )}
                                                />
                                            </div>
                                        </Card>
                                    ))}
                                </div>

                                {/* 奖励 - 独占一行 */}
                                <FormField
                                    control={form.control}
                                    name="metadata.reward"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>{t('profile.profile_sheet.reward')}</FormLabel>
                                            <FormControl>
                                                <Textarea placeholder={t('profile.profile_sheet.placeholders.reward')} {...field} />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />

                                {/* 处分 - 独占一行 */}
                                <FormField
                                    control={form.control}
                                    name="metadata.punish"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>{t('profile.profile_sheet.punish')}</FormLabel>
                                            <FormControl>
                                                <Textarea placeholder={t('profile.profile_sheet.placeholders.punish')} {...field} />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />

                                <FormField
                                    control={form.control}
                                    name="metadata.remark"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>{t('profile.profile_sheet.remark')}</FormLabel>
                                            <FormControl>
                                                <Textarea placeholder={t('profile.profile_sheet.placeholders.remark')} {...field} />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </CardContent>
                        </Card>

                        <SheetFooter className="gap-2">
                            <Button type="submit">
                                {t('common.confirm')}
                            </Button>
                        </SheetFooter>
                    </form>
                </Form>
            </SheetContent>
        </Sheet>
    );
}