'use client';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import * as z from 'zod';
import { Gender } from '@/types/user';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useCurrentUser } from '@/hooks/auth';
import { useAsyncFn } from '@/hooks/tools';
import { Input } from '@/components/ui/input';
import GenderInput from '@/components/features/genderInput';
import { Button } from '@/components/ui/button';
import { InputNumber } from '@/components/ui/inputnumber';
import { Textarea } from '@/components/ui/textarea';
import { useTranslations } from 'next-intl';

type MaskFormProps = {
  onSubmitSuccess?: (data: any) => void;
};

export const MaskForm = ({ onSubmitSuccess }: MaskFormProps) => {
  const t = useTranslations('profile.mask');
  const { data: user } = useCurrentUser();

  const schema = z.object({
    nickname: z.string().trim().min(1, t('nicknameRequired')).min(2, t('nicknameLength')),
    gender: z.enum(Gender, { message: t('selectGender') }),
    age: z.number().min(1, t('ageRequired')),
    whoAmI: z.string(),
  });

  const form = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: {
      nickname: user?.nickname || '',
      gender: user?.sex,
      age: 18,
      whoAmI: '',
    },
    mode: 'onChange',
  });

  const { run: onSubmitFn, loading } = useAsyncFn(async (data: any) => {
    onSubmitSuccess?.(data);
  });

  const {
    formState: { isValid, isDirty },
  } = form;

  return (
    <div>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmitFn)} className="space-y-6">
          {/* 昵称字段 */}
          <FormField
            control={form.control}
            name="nickname"
            render={({ field }) => (
              <FormItem>
                <FormLabel className="txt-label-m text-txt-primary-normal">
                  {t('nickname')}
                </FormLabel>
                <FormControl>
                  <Input
                    placeholder={t('enterNickname')}
                    maxLength={100}
                    showCount
                    error={!!form.formState.errors.nickname}
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          {/* 性别字段 */}
          <FormField
            control={form.control}
            name="gender"
            render={({ field }) => (
              <FormItem>
                <FormLabel className="txt-label-m text-txt-primary-normal">{t('gender')}</FormLabel>
                <FormControl>
                  <GenderInput value={field.value as Gender} onChange={field.onChange} />
                </FormControl>
                <p className="txt-body-s text-txt-secondary-normal">{t('genderNote')}</p>
                <FormMessage />
              </FormItem>
            )}
          />
          {/* AGE字段 */}
          <FormField
            control={form.control}
            name="age"
            render={({ field }) => (
              <FormItem>
                <FormLabel className="txt-label-m text-txt-primary-normal">{t('age')}</FormLabel>
                <FormControl>
                  <InputNumber
                    min={18}
                    placeholder={t('enterAge')}
                    error={!!form.formState.errors.age}
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          {/* WHO AM I */}
          <FormField
            control={form.control}
            name="whoAmI"
            render={({ field }) => (
              <FormItem>
                <FormLabel className="txt-label-m text-txt-primary-normal">{t('whoAmI')}</FormLabel>
                <FormControl>
                  <Textarea
                    placeholder={t('whoAmIPlaceholder')}
                    error={!!form.formState.errors.whoAmI}
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          {/* 保存按钮 */}
          <div className="flex justify-end">
            <Button
              type="submit"
              className="w-full sm:w-auto"
              size="large"
              disabled={!isValid || !isDirty}
              loading={loading}
            >
              {t('save')}
            </Button>
          </div>
        </form>
      </Form>
    </div>
  );
};
