import { useEffect, useMemo, useState } from 'react'
import {
  Checkbox,
  HelperText,
  Label,
  Select,
  TextInput,
  Textarea,
} from 'flowbite-react'
import { useFormContext, useWatch } from 'react-hook-form'

import formTheme from '@/lib/themes/form'
import { getMarketingChannels } from '@/lib/services/marketing-channels'
import { getMerchants } from '@/lib/services/merchant-services'
import MultiSelect from '@/lib/components/MultiSelect'
import PhoneNumberInput from '@/lib/components/forms/PhoneNumberInput'
import { PartnerCategory, PayoutMethod } from '@/lib/types/enums/partner'
import { MarketingChannel, TravelPartnerFormValues } from '@/lib/types/partner'
import { ReferralLink } from '@/app/(dashboard)/referral-links/types'
import { Merchant } from '@/app/(dashboard)/merchants/types'
import BankSelect from './BankSelect'
import ReferralLinksSection from './ReferralLinksSection'

interface FormProps {
  initialReferralLinks?: ReferralLink[]
}

function generateRandomReferral(length: number = 4) {
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'

  return Array.from({ length }, () => {
    const randomIndex = Math.floor(Math.random() * characters.length)
    return characters[randomIndex]
  }).join('')
}

export default function Form({ initialReferralLinks = [] }: FormProps) {
  const {
    control,
    formState: { errors },
    register,
    setValue,
  } = useFormContext<TravelPartnerFormValues>()

  const [marketingChannels, setMarketingChannels] = useState<
    MarketingChannel[]
  >([])
  const [merchantOptions, setMerchantOptions] = useState<Merchant[]>([])
  const [selectedReferralLinks, setSelectedReferralLinks] =
    useState<ReferralLink[]>(initialReferralLinks)

  const partnerCategory = useWatch({
    control,
    name: 'partner_category',
  })
  const payoutMethod = useWatch({
    control,
    name: 'payout_method',
  })
  const referralPrefix = useWatch({
    control,
    name: 'referral_prefix',
  })
  const referralSuffix = useWatch({
    control,
    name: 'referral_suffix',
  })
  const formReferralCode = useWatch({
    control,
    name: 'referral_code',
  })
  const marketingChannelIds = useWatch({
    control,
    name: 'marketing_channels',
  }) as number[]
  const merchantWidgetIds = useWatch({
    control,
    name: 'merchant_widgets',
  }) as number[]

  useEffect(() => {
    getMarketingChannels()
      .then(setMarketingChannels)
      .catch(() => {
        setMarketingChannels([])
      })
  }, [])

  useEffect(() => {
    getMerchants({ all: true })
      .then((data) => {
        const merchants = Array.isArray(data) ? data : data.data
        setMerchantOptions(merchants)
      })
      .catch(() => {
        setMerchantOptions([])
      })
  }, [])

  useEffect(() => {
    if (referralPrefix || referralSuffix) {
      setValue(
        'referral_code',
        `${referralPrefix || ''}${referralSuffix || ''}`,
      )
    }
  }, [referralPrefix, referralSuffix, setValue])

  const referralCodePreview = useMemo(() => {
    if (referralPrefix || referralSuffix) {
      return `${referralPrefix || ''}${referralSuffix || ''}`
    }

    return formReferralCode || 'Preview will appear here'
  }, [referralPrefix, referralSuffix, formReferralCode])

  function handleToggleMarketingChannel(channelId: number) {
    const currentChannels = marketingChannelIds || []
    const updatedChannels = currentChannels.includes(channelId)
      ? currentChannels.filter((id) => id !== channelId)
      : [...currentChannels, channelId]

    setValue('marketing_channels', updatedChannels, {
      shouldValidate: true,
    })
  }

  function handleReferralLinksChange(referralLinks: ReferralLink[]) {
    setSelectedReferralLinks(referralLinks)
    setValue(
      'referral_links',
      referralLinks.map((link) => link.id),
      {
        shouldValidate: true,
      },
    )
  }

  function handleMerchantWidgetsChange(values: (number | undefined)[]) {
    setValue(
      'merchant_widgets',
      values.filter((value): value is number => value !== undefined),
      {
        shouldValidate: true,
      },
    )
  }

  function handleReferralValueChange(
    fieldName: 'referral_prefix' | 'referral_suffix',
    value: string,
  ) {
    setValue(fieldName, value.toUpperCase(), {
      shouldValidate: true,
    })
  }

  return (
    <div className="space-y-12">
      <input type="hidden" {...register('referral_code')} />
      <input type="hidden" {...register('mode')} />

      {/* Account Details */}
      <div className="space-y-4">
        <h3 className="text-xl font-semibold text-gray-900">Account Details</h3>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <div className="mb-2 block">
              <Label theme={formTheme.label} htmlFor="email">
                Email <span className="text-red-500">*</span>
              </Label>
            </div>
            <TextInput
              id="email"
              theme={formTheme.textInput}
              type="email"
              placeholder="Enter email"
              {...register('email')}
            />
            <HelperText color="failure">{errors.email?.message}</HelperText>
          </div>

          <div>
            <div className="mb-2 block">
              <Label theme={formTheme.label} htmlFor="password">
                Password
              </Label>
            </div>
            <TextInput
              id="password"
              theme={formTheme.textInput}
              type="password"
              placeholder="Enter password"
              {...register('password')}
            />
            <HelperText color="failure">{errors.password?.message}</HelperText>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <div className="mb-2 block">
              <Label theme={formTheme.label} htmlFor="partner_category">
                Partner Category <span className="text-red-500">*</span>
              </Label>
            </div>
            <Select
              id="partner_category"
              theme={formTheme.select}
              {...register('partner_category')}
            >
              <option value="">-- Select Category --</option>
              <option value={PartnerCategory.HotelVilla}>Hotel / Villa</option>
              <option value={PartnerCategory.Restaurant}>Restaurant</option>
              <option value={PartnerCategory.Driver}>Driver</option>
            </Select>
            <HelperText color="failure">
              {errors.partner_category?.message}
            </HelperText>
          </div>

          <div>
            <div className="mb-2 block">
              <Label theme={formTheme.label} htmlFor="guest_market">
                Guest Market <span className="text-red-500">*</span>
              </Label>
            </div>
            <TextInput
              id="guest_market"
              theme={formTheme.textInput}
              type="text"
              placeholder="Enter guest market (e.g. Australian, European, Asian)"
              {...register('guest_market')}
            />
            <HelperText color="failure">
              {errors.guest_market?.message}
            </HelperText>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <div className="mb-2 flex items-center justify-between">
              <Label theme={formTheme.label} htmlFor="referral_prefix">
                Referral Prefix
              </Label>
              <button
                type="button"
                onClick={() => {
                  const randomPrefix = generateRandomReferral()
                  handleReferralValueChange('referral_prefix', randomPrefix)
                }}
                className="rounded-full border border-blue-200 bg-blue-50 px-2.5 py-1 text-sm font-medium text-blue-700 transition-colors hover:border-blue-300 hover:bg-blue-100"
              >
                Generate
              </button>
            </div>
            <TextInput
              id="referral_prefix"
              theme={formTheme.textInput}
              type="text"
              placeholder="Enter referral prefix"
              {...register('referral_prefix')}
              onChange={(event) => {
                handleReferralValueChange('referral_prefix', event.target.value)
              }}
            />
            <HelperText color="failure">
              {errors.referral_prefix?.message}
            </HelperText>
          </div>

          <div>
            <div className="mb-2 flex items-center justify-between">
              <Label theme={formTheme.label} htmlFor="referral_suffix">
                Referral Suffix
              </Label>
              <button
                type="button"
                onClick={() => {
                  const randomSuffix = generateRandomReferral()
                  handleReferralValueChange('referral_suffix', randomSuffix)
                }}
                className="rounded-full border border-blue-200 bg-blue-50 px-2.5 py-1 text-sm font-medium text-blue-700 transition-colors hover:border-blue-300 hover:bg-blue-100"
              >
                Generate
              </button>
            </div>
            <TextInput
              id="referral_suffix"
              theme={formTheme.textInput}
              type="text"
              placeholder="Enter referral suffix"
              {...register('referral_suffix')}
              onChange={(event) => {
                handleReferralValueChange('referral_suffix', event.target.value)
              }}
            />
            <HelperText color="failure">
              {errors.referral_suffix?.message}
            </HelperText>
          </div>
        </div>

        <div>
          <div className="mb-2 block">
            <Label theme={formTheme.label} htmlFor="referral_code_preview">
              Referral Code Preview
            </Label>
          </div>
          <div
            id="referral_code_preview"
            className={`rounded-lg border px-4 py-3 text-sm transition-colors ${
              errors.referral_code
                ? 'border-red-300 bg-red-50 text-red-700'
                : 'border-blue-200 bg-blue-50 text-slate-700'
            }`}
          >
            <div className="flex items-center justify-between gap-3">
              <span className="font-bold">{referralCodePreview}</span>
              {!errors.referral_code && (
                <span className="rounded-full bg-white px-2.5 py-1 text-xs font-semibold uppercase tracking-wide text-blue-600">
                  Preview
                </span>
              )}
            </div>
          </div>
          {errors.referral_code?.message ? (
            <HelperText color="failure" className="mt-1">
              {errors.referral_code.message}
            </HelperText>
          ) : null}
        </div>
      </div>

      {/* Business Details */}
      {(partnerCategory === PartnerCategory.HotelVilla ||
        partnerCategory === PartnerCategory.Restaurant) && (
        <div className="space-y-4">
          <h3 className="text-xl font-semibold text-gray-900">
            Business Details
          </h3>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <div className="mb-2 block">
                <Label theme={formTheme.label} htmlFor="business.business_name">
                  Business Name <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="business.business_name"
                theme={formTheme.textInput}
                type="text"
                placeholder="Enter business name"
                {...register('business.business_name')}
              />
              <HelperText color="failure">
                {errors.business?.business_name?.message}
              </HelperText>
            </div>

            <div>
              <div className="mb-2 block">
                <Label
                  theme={formTheme.label}
                  htmlFor="business.business_email"
                >
                  Business Email <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="business.business_email"
                theme={formTheme.textInput}
                type="email"
                placeholder="Enter business email"
                {...register('business.business_email')}
              />
              <HelperText color="failure">
                {errors.business?.business_email?.message}
              </HelperText>
            </div>
          </div>

          <div>
            <div className="mb-2 block">
              <Label
                theme={formTheme.label}
                htmlFor="business.business_address"
              >
                Business Address <span className="text-red-500">*</span>
              </Label>
            </div>
            <Textarea
              id="business.business_address"
              theme={formTheme.textarea}
              placeholder="Enter full business address"
              rows={3}
              className="resize-none"
              {...register('business.business_address')}
            />
            <HelperText color="failure">
              {errors.business?.business_address?.message}
            </HelperText>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <div className="mb-2 block">
                <Label
                  theme={formTheme.label}
                  htmlFor="business.number_of_properties"
                >
                  Number of Properties <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="business.number_of_properties"
                theme={formTheme.textInput}
                type="number"
                placeholder="Enter number of properties"
                {...register('business.number_of_properties')}
              />
              <HelperText color="failure">
                {errors.business?.number_of_properties?.message}
              </HelperText>
            </div>

            <div>
              <div className="mb-2 block">
                <Label
                  theme={formTheme.label}
                  htmlFor="business.average_guest_per_month"
                >
                  Average Guest per Month{' '}
                  <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="business.average_guest_per_month"
                theme={formTheme.textInput}
                type="number"
                placeholder="Enter average guest per month"
                {...register('business.average_guest_per_month')}
              />
              <HelperText color="failure">
                {errors.business?.average_guest_per_month?.message}
              </HelperText>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <div className="mb-2 block">
                <Label theme={formTheme.label} htmlFor="business.pic_name">
                  PIC Name <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="business.pic_name"
                theme={formTheme.textInput}
                type="text"
                placeholder="Enter PIC name"
                {...register('business.pic_name')}
              />
              <HelperText color="failure">
                {errors.business?.pic_name?.message}
              </HelperText>
            </div>

            <div>
              <div className="mb-2 block">
                <Label theme={formTheme.label} htmlFor="business.pic_email">
                  PIC Email <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="business.pic_email"
                theme={formTheme.textInput}
                type="email"
                placeholder="Enter PIC email"
                {...register('business.pic_email')}
              />
              <HelperText color="failure">
                {errors.business?.pic_email?.message}
              </HelperText>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <div className="mb-2 block">
                <Label theme={formTheme.label} htmlFor="business.pic_position">
                  PIC Position <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="business.pic_position"
                theme={formTheme.textInput}
                type="text"
                placeholder="Enter PIC position"
                {...register('business.pic_position')}
              />
              <HelperText color="failure">
                {errors.business?.pic_position?.message}
              </HelperText>
            </div>

            <div>
              <div className="mb-2 block">
                <Label
                  theme={formTheme.label}
                  htmlFor="business.pic_phone_number"
                >
                  PIC Phone Number <span className="text-red-500">*</span>
                </Label>
              </div>
              <PhoneNumberInput
                controller={control}
                field_name="business.pic_phone_number"
                required
              />
              <HelperText color="failure">
                {errors.business?.pic_phone_number?.message}
              </HelperText>
            </div>
          </div>
        </div>
      )}

      {/* Driver Details */}
      {partnerCategory === PartnerCategory.Driver && (
        <div className="space-y-4">
          <h3 className="text-xl font-semibold text-gray-900">
            Driver Details
          </h3>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <div className="mb-2 block">
                <Label theme={formTheme.label} htmlFor="driver.name">
                  Name <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="driver.name"
                theme={formTheme.textInput}
                type="text"
                placeholder="Enter driver name"
                {...register('driver.name')}
              />
              <HelperText color="failure">
                {errors.driver?.name?.message}
              </HelperText>
            </div>

            <div>
              <div className="mb-2 block">
                <Label theme={formTheme.label} htmlFor="driver.email">
                  Email <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="driver.email"
                theme={formTheme.textInput}
                type="email"
                placeholder="Enter driver email"
                {...register('driver.email')}
              />
              <HelperText color="failure">
                {errors.driver?.email?.message}
              </HelperText>
            </div>
          </div>

          <div>
            <div className="mb-2 block">
              <Label theme={formTheme.label} htmlFor="driver.phone_number">
                Phone Number <span className="text-red-500">*</span>
              </Label>
            </div>
            <PhoneNumberInput
              controller={control}
              field_name="driver.phone_number"
              required
            />
            <HelperText color="failure">
              {errors.driver?.phone_number?.message}
            </HelperText>
          </div>

          <div>
            <div className="mb-2 block">
              <Label theme={formTheme.label} htmlFor="driver.address">
                Address <span className="text-red-500">*</span>
              </Label>
            </div>
            <Textarea
              id="driver.address"
              theme={formTheme.textarea}
              placeholder="Enter driver address"
              rows={3}
              className="resize-none"
              {...register('driver.address')}
            />
            <HelperText color="failure">
              {errors.driver?.address?.message}
            </HelperText>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <div className="mb-2 block">
                <Label theme={formTheme.label} htmlFor="driver.vehicle_plate">
                  Vehicle Plate <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="driver.vehicle_plate"
                theme={formTheme.textInput}
                type="text"
                placeholder="Enter vehicle plate"
                {...register('driver.vehicle_plate')}
              />
              <HelperText color="failure">
                {errors.driver?.vehicle_plate?.message}
              </HelperText>
            </div>

            <div>
              <div className="mb-2 block">
                <Label theme={formTheme.label} htmlFor="driver.vehicle_name">
                  Vehicle Name <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="driver.vehicle_name"
                theme={formTheme.textInput}
                type="text"
                placeholder="Enter vehicle name"
                {...register('driver.vehicle_name')}
              />
              <HelperText color="failure">
                {errors.driver?.vehicle_name?.message}
              </HelperText>
            </div>
          </div>
        </div>
      )}

      {/* Payout Details */}
      <div className="space-y-4">
        <h3 className="text-xl font-semibold text-gray-900">Payout Details</h3>

        <div>
          <div className="mb-2 block">
            <Label theme={formTheme.label} htmlFor="payout_method">
              Payout Method <span className="text-red-500">*</span>
            </Label>
          </div>
          <Select
            id="payout_method"
            theme={formTheme.select}
            {...register('payout_method')}
          >
            <option value="">-- Select Payout Method --</option>
            <option value={PayoutMethod.BankTransfer}>Bank Transfer</option>
            <option value={PayoutMethod.Wise}>Wise</option>
            <option value={PayoutMethod.Paypal}>Paypal</option>
          </Select>
          <HelperText color="failure">
            {errors.payout_method?.message}
          </HelperText>
        </div>

        {payoutMethod === PayoutMethod.BankTransfer && (
          <div className="space-y-4">
            <BankSelect />
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <div className="mb-2 block">
                  <Label
                    theme={formTheme.label}
                    htmlFor="bank_account.account_name"
                  >
                    Account Name <span className="text-red-500">*</span>
                  </Label>
                </div>
                <TextInput
                  id="bank_account.account_name"
                  theme={formTheme.textInput}
                  type="text"
                  placeholder="Enter account name"
                  {...register('bank_account.account_name')}
                />
                <HelperText color="failure">
                  {errors.bank_account?.account_name?.message}
                </HelperText>
              </div>

              <div>
                <div className="mb-2 block">
                  <Label
                    theme={formTheme.label}
                    htmlFor="bank_account.account_number"
                  >
                    Account Number <span className="text-red-500">*</span>
                  </Label>
                </div>
                <TextInput
                  id="bank_account.account_number"
                  theme={formTheme.textInput}
                  type="text"
                  placeholder="Enter account number"
                  {...register('bank_account.account_number')}
                />
                <HelperText color="failure">
                  {errors.bank_account?.account_number?.message}
                </HelperText>
              </div>
            </div>
          </div>
        )}

        {payoutMethod === PayoutMethod.Wise && (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <div className="mb-2 block">
                <Label
                  theme={formTheme.label}
                  htmlFor="wise_account.account_name"
                >
                  Account Name <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="wise_account.account_name"
                theme={formTheme.textInput}
                type="text"
                placeholder="Enter account name"
                {...register('wise_account.account_name')}
              />
              <HelperText color="failure">
                {errors.wise_account?.account_name?.message}
              </HelperText>
            </div>
            <div>
              <div className="mb-2 block">
                <Label theme={formTheme.label} htmlFor="wise_account.email">
                  Email <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="wise_account.email"
                theme={formTheme.textInput}
                type="email"
                placeholder="Enter account email"
                {...register('wise_account.email')}
              />
              <HelperText color="failure">
                {errors.wise_account?.email?.message}
              </HelperText>
            </div>
          </div>
        )}

        {payoutMethod === PayoutMethod.Paypal && (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <div className="mb-2 block">
                <Label
                  theme={formTheme.label}
                  htmlFor="paypal_account.account_name"
                >
                  Account Name <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="paypal_account.account_name"
                theme={formTheme.textInput}
                type="text"
                placeholder="Enter account name"
                {...register('paypal_account.account_name')}
              />
              <HelperText color="failure">
                {errors.paypal_account?.account_name?.message}
              </HelperText>
            </div>
            <div>
              <div className="mb-2 block">
                <Label theme={formTheme.label} htmlFor="paypal_account.email">
                  Email <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="paypal_account.email"
                theme={formTheme.textInput}
                type="email"
                placeholder="Enter account email"
                {...register('paypal_account.email')}
              />
              <HelperText color="failure">
                {errors.paypal_account?.email?.message}
              </HelperText>
            </div>
          </div>
        )}
      </div>

      {/* Social Media */}
      <div className="space-y-4">
        <h3 className="text-xl font-semibold text-gray-900">Social Media</h3>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div>
            <div className="mb-2 block">
              <Label theme={formTheme.label} htmlFor="instagram_url">
                Instagram URL
              </Label>
            </div>
            <TextInput
              id="instagram_url"
              theme={formTheme.textInput}
              type="url"
              placeholder="https://instagram.com/username"
              {...register('instagram_url')}
            />
            <HelperText color="failure">
              {errors.instagram_url?.message}
            </HelperText>
          </div>

          <div>
            <div className="mb-2 block">
              <Label theme={formTheme.label} htmlFor="facebook_url">
                Facebook URL
              </Label>
            </div>
            <TextInput
              id="facebook_url"
              theme={formTheme.textInput}
              type="url"
              placeholder="https://facebook.com/username"
              {...register('facebook_url')}
            />
            <HelperText color="failure">
              {errors.facebook_url?.message}
            </HelperText>
          </div>

          <div>
            <div className="mb-2 block">
              <Label theme={formTheme.label} htmlFor="website_url">
                Website URL
              </Label>
            </div>
            <TextInput
              id="website_url"
              theme={formTheme.textInput}
              type="url"
              placeholder="https://example.com"
              {...register('website_url')}
            />
            <HelperText color="failure">
              {errors.website_url?.message}
            </HelperText>
          </div>
        </div>
      </div>

      {/* Marketing Channels */}
      <div className="space-y-4">
        <h3 className="text-xl font-semibold text-gray-900">
          Marketing Channels
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {marketingChannels.length > 0 ? (
            marketingChannels.map((channel) => (
              <label
                key={channel.id}
                className="flex items-center gap-3 rounded-xl border border-gray-200 bg-white p-4"
              >
                <Checkbox
                  checked={marketingChannelIds?.includes(channel.id)}
                  onChange={() => handleToggleMarketingChannel(channel.id)}
                  color="blue"
                />
                <span className="text-sm font-medium text-gray-700">
                  {channel.channel_name}
                </span>
              </label>
            ))
          ) : (
            <div className="text-sm text-gray-500">
              Loading marketing channels...
            </div>
          )}
        </div>
        <HelperText color="failure">
          {errors.marketing_channels?.message}
        </HelperText>
      </div>

      {/* Referral Links */}
      <div className="space-y-4">
        <ReferralLinksSection
          referralLinks={selectedReferralLinks}
          onChange={handleReferralLinksChange}
        />
      </div>

      {/* Business Widget */}
      <div className="space-y-4">
        <h3 className="text-xl font-semibold text-gray-900">Business Widget</h3>
        <MultiSelect
          options={merchantOptions.map((merchant) => ({
            label: merchant.name,
            value: merchant.id,
          }))}
          value={merchantWidgetIds || []}
          onChange={handleMerchantWidgetsChange}
          placeholder="Select business widgets"
          label="Merchant Widgets"
        />
        <HelperText color="failure">
          {errors.merchant_widgets?.message}
        </HelperText>
      </div>

      {/* Agreement Document */}
      <div className="space-y-4">
        <h3 className="text-xl font-semibold text-gray-900">
          Agreement Document
        </h3>

        <div>
          <div className="mb-2 block">
            <Label theme={formTheme.label} htmlFor="agreement_document_url">
              Agreement Document URL
            </Label>
          </div>
          <TextInput
            theme={formTheme.textInput}
            id="agreement_document_url"
            type="url"
            placeholder="https://example.com/agreement.pdf"
            {...register('agreement_document_url')}
          />
          <HelperText color="failure">
            {errors.agreement_document_url?.message}
          </HelperText>
        </div>
      </div>
    </div>
  )
}