import { Label, TextInput, Select, Textarea, HelperText } from 'flowbite-react'
import { Controller, useFormContext } from 'react-hook-form'

import formTheme from '@/lib/themes/form'
import { AgentFormValues } from '../types'
import BankSelect from './BankSelect'
import PhoneNumberInput from '@/lib/components/forms/PhoneNumberInput'

export type AgentFormMode = 'create' | 'edit'

export default function Form() {
  const {
    control,
    formState: { errors },
    register,
  } = useFormContext<AgentFormValues>()

  return (
    <div className="space-y-12">
      {/* Business Details */}
      <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">
          {/* Business Name */}
          <div>
            <div className="mb-2 block">
              <Label theme={formTheme.label} htmlFor="business_name">
                Business Name <span className="text-red-500">*</span>
              </Label>
            </div>
            <TextInput
              theme={formTheme.textInput}
              id="business_name"
              type="text"
              placeholder="Enter business name"
              {...register('business_name')}
            />
            <HelperText color="failure">
              {errors.business_name?.message}
            </HelperText>
          </div>

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

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

          {/* Category */}
          <div>
            <div className="mb-2 block">
              <Label theme={formTheme.label} htmlFor="category">
                Category <span className="text-red-500">*</span>
              </Label>
            </div>
            <Controller
              name="category"
              control={control}
              render={({ field }) => (
                <Select {...field} theme={formTheme.select} id="category">
                  <option value="">-- Select Category --</option>
                  <option value="online">Online</option>
                  <option value="offline">Offline</option>
                </Select>
              )}
            />
            <HelperText color="failure">{errors.category?.message}</HelperText>
          </div>
        </div>

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

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

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

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

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Phone Number */}
          <div>
            <div className="mb-2 block">
              <Label theme={formTheme.label} htmlFor="contact_person.phone">
                Phone Number <span className="text-red-500">*</span>
              </Label>
            </div>
            <PhoneNumberInput
              controller={control}
              field_name="contact_person.phone_number"
              required
            />
            <HelperText color="failure">
              {errors.contact_person?.phone_number?.message}
            </HelperText>
          </div>

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

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

        {/* Bank ID */}
        <BankSelect />

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

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