interface FieldOptions<
  TParentData,
  TName extends DeepKeys<TParentData>,
  TData extends DeepValue<TParentData, TName>,
  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
  TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
  TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
  TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
  TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
  TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>
>

name: TName

// Simple field
const nameField = new FieldApi({
  form,
  name: 'firstName',
})

// Nested field
const streetField = new FieldApi({
  form,
  name: 'address.street',
})

// Array field
const firstHobbyField = new FieldApi({
  form,
  name: 'hobbies[0]',
})

defaultValue?: TData

const ageField = new FieldApi({
  form,
  name: 'age',
  defaultValue: 18,
})

defaultMeta?: Partial<FieldMeta>

const field = new FieldApi({
  form,
  name: 'email',
  defaultMeta: {
    isTouched: false,
    isValidating: false,
  },
})

validators?: FieldValidators<TParentData, TName, TData>

const emailField = new FieldApi({
  form,
  name: 'email',
  validators: {
    onChange: ({ value }) => {
      if (!value) return 'Email is required'
      if (!value.includes('@')) return 'Invalid email format'
      return undefined
    },
    onChangeAsync: async ({ value }) => {
      if (value) {
        const available = await checkEmailAvailability(value)
        if (!available) return 'Email already taken'
      }
      return undefined
    },
    onChangeAsyncDebounceMs: 500,
  },
})

asyncAlways?: boolean

asyncDebounceMs?: number

const usernameField = new FieldApi({
  form,
  name: 'username',
  asyncDebounceMs: 300,
  validators: {
    onChangeAsync: async ({ value }) => {
      const available = await checkUsername(value)
      return available ? undefined : 'Username taken'
    },
  },
})

listeners?: FieldListeners<TParentData, TName, TData>

const field = new FieldApi({
  form,
  name: 'password',
  listeners: {
    onChange: ({ value }) => {
      console.log('Password changed:', value.length, 'characters')
    },
    onBlur: ({ value }) => {
      console.log('Password field blurred')
    },
    onMount: ({ value }) => {
      console.log('Password field mounted')
    },
    onSubmit: ({ value }) => {
      console.log('Form submitted with password')
    },
  },
})

disableErrorFlat?: boolean

onMount?: FieldValidateOrFn<TParentData, TName, TData>

const field = new FieldApi({
  form,
  name: 'terms',
  validators: {
    onMount: ({ value }) => {
      // Validate immediately when field mounts
      if (!value) return 'You must accept the terms'
      return undefined
    },
  },
})

onChange?: FieldValidateOrFn<TParentData, TName, TData>

import { z } from 'zod'

const field = new FieldApi({
  form,
  name: 'email',
  validators: {
    // Using a custom function
    onChange: ({ value }) => {
      if (!value) return 'Email is required'
      if (!value.includes('@')) return 'Invalid email'
      return undefined
    },
    
    // Or using a schema (Zod example)
    onChange: z.string().email('Invalid email format'),
  },
})

onChangeAsync?: FieldAsyncValidateOrFn<TParentData, TName, TData>

const field = new FieldApi({
  form,
  name: 'username',
  validators: {
    onChangeAsync: async ({ value, signal }) => {
      if (!value) return undefined
      
      const response = await fetch(
        `/api/check-username?username=${value}`,
        { signal }
      )
      const data = await response.json()
      
      return data.available ? undefined : 'Username already taken'
    },
  },
})

onChangeAsyncDebounceMs?: number

onChangeListenTo?: DeepKeys<TParentData>[]

// Re-validate password confirmation when password changes
const passwordConfirmField = new FieldApi({
  form,
  name: 'passwordConfirm',
  validators: {
    onChange: ({ value, fieldApi }) => {
      const password = fieldApi.form.getFieldValue('password')
      if (value !== password) {
        return 'Passwords do not match'
      }
      return undefined
    },
    onChangeListenTo: ['password'], // Re-run validation when 'password' changes
  },
})

onBlur?: FieldValidateOrFn<TParentData, TName, TData>

const field = new FieldApi({
  form,
  name: 'age',
  validators: {
    onBlur: ({ value }) => {
      if (value < 18) return 'Must be 18 or older'
      if (value > 120) return 'Invalid age'
      return undefined
    },
  },
})

onBlurAsync?: FieldAsyncValidateOrFn<TParentData, TName, TData>

onBlurAsyncDebounceMs?: number

onBlurListenTo?: DeepKeys<TParentData>[]

onSubmit?: FieldValidateOrFn<TParentData, TName, TData>

const field = new FieldApi({
  form,
  name: 'creditCard',
  validators: {
    onSubmit: ({ value }) => {
      // More expensive validation only on submit
      if (!isValidCreditCard(value)) {
        return 'Invalid credit card number'
      }
      return undefined
    },
  },
})

onSubmitAsync?: FieldAsyncValidateOrFn<TParentData, TName, TData>

onDynamic?: FieldValidateOrFn<TParentData, TName, TData>

onDynamicAsync?: FieldAsyncValidateOrFn<TParentData, TName, TData>

onDynamicAsyncDebounceMs?: number

onChange?: (props: {
  value: TData
  fieldApi: FieldApi<TParentData, TName, TData>
}) => void

onChangeDebounceMs?: number

onBlur?: (props: {
  value: TData
  fieldApi: FieldApi<TParentData, TName, TData>
}) => void

onBlurDebounceMs?: number

onMount?: (props: {
  value: TData
  fieldApi: FieldApi<TParentData, TName, TData>
}) => void

onSubmit?: (props: {
  value: TData
  fieldApi: FieldApi<TParentData, TName, TData>
}) => void

import { FormApi, FieldApi } from '@tanstack/form-core'
import { z } from 'zod'

interface FormData {
  username: string
  email: string
  password: string
  passwordConfirm: string
}

const form = new FormApi<FormData>({
  defaultValues: {
    username: '',
    email: '',
    password: '',
    passwordConfirm: '',
  },
})

const usernameField = new FieldApi({
  form,
  name: 'username',
  defaultValue: '',
  
  validators: {
    onChange: ({ value }) => {
      if (!value) return 'Username is required'
      if (value.length < 3) return 'Username must be at least 3 characters'
      if (!/^[a-zA-Z0-9_]+$/.test(value)) {
        return 'Username can only contain letters, numbers, and underscores'
      }
      return undefined
    },
    
    onChangeAsync: async ({ value, signal }) => {
      if (!value || value.length < 3) return undefined
      
      try {
        const response = await fetch(
          `/api/check-username?username=${value}`,
          { signal }
        )
        const data = await response.json()
        return data.available ? undefined : 'Username already taken'
      } catch (error) {
        if (signal.aborted) return undefined
        return 'Error checking username availability'
      }
    },
    
    onChangeAsyncDebounceMs: 500,
  },
  
  listeners: {
    onChange: ({ value }) => {
      console.log('Username changed to:', value)
    },
    onBlur: ({ value }) => {
      console.log('Username field blurred with value:', value)
    },
  },
})

const emailField = new FieldApi({
  form,
  name: 'email',
  
  validators: {
    onChange: z.string().email('Invalid email format'),
  },
})

const passwordField = new FieldApi({
  form,
  name: 'password',
  
  validators: {
    onChange: ({ value }) => {
      if (!value) return 'Password is required'
      if (value.length < 8) return 'Password must be at least 8 characters'
      if (!/[A-Z]/.test(value)) return 'Password must contain an uppercase letter'
      if (!/[a-z]/.test(value)) return 'Password must contain a lowercase letter'
      if (!/[0-9]/.test(value)) return 'Password must contain a number'
      return undefined
    },
  },
})

const passwordConfirmField = new FieldApi({
  form,
  name: 'passwordConfirm',
  
  validators: {
    onChange: ({ value, fieldApi }) => {
      const password = fieldApi.form.getFieldValue('password')
      if (value !== password) return 'Passwords do not match'
      return undefined
    },
    onChangeListenTo: ['password'],
  },
})