import { useEffect } from 'react'
import { useFormContext } from 'react-hook-form'
import Image from 'next/image'
import { LuUpload } from 'react-icons/lu'
import { Alert, HelperText, Label, TextInput } from 'flowbite-react'
import { useFileUpload } from '@/lib/hooks/useFileUpload'
import formTheme from '@/lib/themes/form'
import { BankFormValues } from '../types'

interface BankFormProps {
  originalLogoUrl?: string | null
}

export default function BankForm(props: BankFormProps) {
  const {
    formState: { errors },
    setValue,
    setError,
    register,
  } = useFormContext<BankFormValues>()

  const {
    fileState,
    fileInputRef,
    dragState,
    setFileState,
    handleInputChange,
    setDragState,
    handleDragLeave,
    handleDragOver,
    handleDrop,
  } = useFileUpload()

  useEffect(() => {
    if (props.originalLogoUrl) {
      setFileState((prev) => ({
        ...prev,
        preview: props.originalLogoUrl as string,
      }))
    }
  }, [props.originalLogoUrl, setFileState])

  return (
    <div>
      <div className="w-full flex gap-8 mx-auto mb-4">
        <div
          className="relative"
          onDragOver={handleDragOver}
          onDragLeave={handleDragLeave}
          onDrop={(event) => {
            handleDrop({
              event,
              onSuccess: (file) => {
                setValue('logo', file)

                setError('logo', {
                  type: 'manual',
                  message: '',
                })
              },
              onError: (error) => {
                setError('logo', {
                  type: 'manual',
                  message: error.message,
                })
              },
            })
          }}
          onMouseEnter={() =>
            setDragState((prev) => ({ ...prev, isHovering: true }))
          }
          onMouseLeave={() =>
            setDragState((prev) => ({ ...prev, isHovering: false }))
          }
          onClick={() => fileInputRef.current?.click()}
        >
          <div
            className={`relative w-[300px] h-[300px] rounded-lg overflow-hidden border-2 border-dashed ${dragState.isDragging ? 'border-blue-600' : 'border-gray-300'} transition-colors duration-200 cursor-pointer`}
          >
            {fileState.preview ? (
              <Image
                src={fileState.preview}
                alt="Bank Logo Preview"
                fill
                className="object-contain"
              />
            ) : (
              <div className="h-[300px] w-[300px] bg-gray-50 flex flex-col items-center justify-center">
                <LuUpload className="w-12 h-12 text-gray-400" />
                <p className="font-normal mt-2 text-sm text-center px-4">
                  Click or drop to upload logo
                </p>
              </div>
            )}

            {(dragState.isHovering || dragState.isDragging) && (
              <div className="absolute inset-0 bg-gray-900 bg-opacity-70 flex items-center justify-center transition-opacity duration-200">
                <p className="text-white text-lg font-medium">
                  Click or drop to upload logo
                </p>
              </div>
            )}
          </div>

          <input
            ref={fileInputRef}
            type="file"
            className="hidden"
            accept="image/jpeg,image/png,image/webp"
            onChange={(event) => {
              handleInputChange({
                event,
                onSuccess: (file) => {
                  setValue('logo', file)

                  setError('logo', {
                    type: 'manual',
                    message: '',
                  })
                },
                onError: (error) => {
                  setError('logo', {
                    type: 'manual',
                    message: error.message,
                  })
                },
              })
            }}
          />
        </div>

        <div>
          {errors.logo?.message && (
            <Alert
              color="failure"
              className="mb-4 w-full"
              onDismiss={() =>
                setError('logo', {
                  type: 'manual',
                  message: '',
                })
              }
            >
              <p className="text-sm text-red-500">
                {errors.logo?.message as string}
              </p>
            </Alert>
          )}

          <ul className="list-disc list-inside bg-gray-50 border border-gray-200 p-4 rounded-lg">
            <li className="mt-2 text-sm">The maximum size of file is 2MB</li>
            <li className="mt-2 text-sm">
              Upload file in JPG, JPEG, PNG, or WEBP formats.
            </li>
            <li className="mt-2 text-sm">
              File dimension should be at least 200x200 pixels.
            </li>
            <li className="mt-2 text-sm">
              This is optional. Just leave it empty if you don&apos;t want to
              add a logo.
            </li>
          </ul>
        </div>
      </div>

      {/* Bank Name Field */}
      <div className="mb-4">
        <div className="mb-2 block">
          <Label htmlFor="bank_name">Bank Name</Label>
        </div>
        <TextInput
          id="bank_name"
          type="text"
          theme={formTheme.textInput}
          placeholder="Enter bank name"
          color={errors.bank_name ? 'failure' : 'gray'}
          {...register('bank_name')}
        />
        <HelperText color="failure">{errors.bank_name?.message}</HelperText>
      </div>

      {/* Short Name Field */}
      <div className="mb-4">
        <div className="mb-2 block">
          <Label htmlFor="short_name">Short Name</Label>
        </div>
        <TextInput
          id="short_name"
          type="text"
          theme={formTheme.textInput}
          placeholder="Enter short name"
          color={errors.short_name ? 'failure' : 'gray'}
          {...register('short_name')}
        />
        <HelperText color="failure">{errors.short_name?.message}</HelperText>
      </div>
    </div>
  )
}