import { Loader, Select, SimpleGrid, TextInput } from '@mantine/core';
import type { FieldErrors, UseFormRegister, UseFormSetValue, UseFormWatch, UseFormTrigger } from 'react-hook-form';
import { z } from 'zod';
import { AmharicDatePicker } from '@ema-platform/ui';

export const profileSchema = z.object({
  professionId: z.string().min(1, 'Select your profession'),
  firstName: z.string().min(3, 'First name must be at least 3 characters'),
  middleName: z.string().min(3, 'Middle name must be at least 3 characters'),
  lastName: z.string().min(3, 'Last name must be at least 3 characters'),
  gender: z.string().min(1, 'Select your gender'),
  dob: z.string().min(1, 'Select your date of birth'),
  pob: z.string().optional(),
  maritalStatus: z.string().min(1, 'Select your marital status'),
});

export type ProfileValues = z.infer<typeof profileSchema>;

export const GENDERS = ['MALE', 'FEMALE'] as const;
export const MARITAL_STATUSES = ['SINGLE', 'MARRIED', 'DIVORCED', 'WIDOWED'] as const;
export const ID_TYPES = ['NID', 'VITAL', 'PASSPORT', 'DRIVERS_LICENSE'] as const;

interface ProfileFormContentProps {
  register: UseFormRegister<ProfileValues>;
  errors: FieldErrors<ProfileValues>;
  setValue: UseFormSetValue<ProfileValues>;
  watch: UseFormWatch<ProfileValues>;
  trigger: UseFormTrigger<ProfileValues>;
  professionsLoading: boolean;
  professionOptions: Array<{ value: string; label: string }>;
}

export function ProfileFormContent({
  register,
  errors,
  setValue,
  watch,
  trigger,
  professionsLoading,
  professionOptions,
}: ProfileFormContentProps) {
  return (
    <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
      <Select
        label="Profession"
        placeholder={professionsLoading ? 'Loading...' : 'Select'}
        required
        data={professionOptions}
        error={errors.professionId?.message}
        value={watch('professionId')}
        onChange={(val) => setValue('professionId', val || '', { shouldValidate: true })}
        onBlur={() => trigger('professionId')}
        name="professionId"
        searchable
        disabled={professionsLoading}
        rightSection={professionsLoading ? <Loader size="xs" /> : undefined}
      />
      <TextInput
        label="First Name"
        placeholder="Enter first name"
        required
        {...register('firstName')}
        error={errors.firstName?.message}
      />
      <TextInput
        label="Middle Name"
        placeholder="Enter middle name"
        required
        {...register('middleName')}
        error={errors.middleName?.message}
      />
      <TextInput
        label="Last Name"
        placeholder="Enter last name"
        required
        {...register('lastName')}
        error={errors.lastName?.message}
      />
      <Select
        label="Gender"
        placeholder="Select"
        required
        data={[...GENDERS]}
        error={errors.gender?.message}
        value={watch('gender')}
        onChange={(val) => setValue('gender', val || '', { shouldValidate: true })}
        onBlur={() => trigger('gender')}
        name="gender"
      />
      <AmharicDatePicker
        label="Date of Birth"
        required
        value={watch('dob')}
        onChange={(val) => setValue('dob', val, { shouldValidate: true })}
        onBlur={() => trigger('dob')}
        name="dob"
        error={errors.dob?.message}
      />
      <TextInput
        label="Place of Birth"
        placeholder="City, Region"
        {...register('pob')}
        error={errors.pob?.message}
      />
      <Select
        label="Marital Status"
        placeholder="Select"
        required
        data={[...MARITAL_STATUSES]}
        error={errors.maritalStatus?.message}
        value={watch('maritalStatus')}
        onChange={(val) => setValue('maritalStatus', val || '', { shouldValidate: true })}
        onBlur={() => trigger('maritalStatus')}
        name="maritalStatus"
      />
    </SimpleGrid>
  );
}
