'use client'

import React, { useEffect, useState } from 'react'
import {
  Alert,
  Button,
  HelperText,
  Label,
  Modal,
  ModalBody,
  ModalHeader,
  TextInput,
} from 'flowbite-react'
import { Controller, UseFormReturn } from 'react-hook-form'
import { LuLink2 } from 'react-icons/lu'

import formTheme from '@/lib/themes/form'
import buttonTheme from '@/lib/themes/button'
import modalTheme from '@/lib/themes/modal'
import MerchantSelector from '@/lib/components/forms/MerchantSelector'
import appConfig from '@/lib/config/app'
import { Merchant } from '../../merchants/types'
import { ReferralLinkFormValues } from '../schema'
import { ReferralLink } from '../types'

interface ModalFormProps {
  isOpen: boolean
  type: 'create' | 'edit'
  isProcessing: boolean
  form: UseFormReturn<ReferralLinkFormValues>
  referralLink: ReferralLink | null
  onClose: () => void
  onSubmit: (formValues: ReferralLinkFormValues) => Promise<void>
}

export default function ModalForm({
  isOpen,
  type,
  isProcessing,
  form,
  referralLink,
  onClose,
  onSubmit,
}: ModalFormProps) {
  const [merchant, setMerchant] = useState<Merchant | null>(null)

  useEffect(() => {
    setMerchant(referralLink?.user || null)
  }, [referralLink])

  return (
    <Modal show={isOpen} size="xl" onClose={onClose} theme={modalTheme.modal}>
      <ModalHeader>
        {type === 'create' ? 'Create Referral Link' : 'Edit Referral Link'}
      </ModalHeader>
      <ModalBody>
        <form onSubmit={form.handleSubmit(onSubmit)} className="mt-4">
          <div className="space-y-6">
            {/* User ID */}
            <Controller
              name="user_id"
              control={form.control}
              render={({ field }) => (
                <MerchantSelector
                  value={field.value}
                  onChange={(merchant) => {
                    field.onChange(merchant?.id ?? null)
                    setMerchant(merchant)
                  }}
                  errorMessage={form.formState.errors.user_id?.message}
                  fullWidth
                  required
                />
              )}
            />

            {/* Link Name */}
            <div>
              <div className="mb-2 block">
                <Label htmlFor="link_name" theme={formTheme.label}>
                  Link Name <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="link_name"
                type="text"
                placeholder="Enter link name (e.g., Landing Page, Tour Detail)"
                theme={formTheme.textInput}
                {...form.register('link_name')}
              />
              <HelperText color="failure">
                {form.formState.errors.link_name?.message}
              </HelperText>
            </div>

            {/* Link URL */}
            <div>
              <div className="mb-2 block">
                <Label htmlFor="link_url" theme={formTheme.label}>
                  Link URL <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                id="link_url"
                type="url"
                placeholder={`Enter link url (e.g., ${appConfig.frontendUrl}/username)`}
                theme={formTheme.textInput}
                {...form.register('link_url')}
              />
              <HelperText color="failure">
                {form.formState.errors.link_url?.message}
              </HelperText>
              {merchant && (
                <React.Fragment>
                  <Alert
                    className="mt-4"
                    additionalContent={
                      <div className="text-sm">
                        <ul className="list-disc list-inside">
                          <li>
                            Merchant Page: {appConfig.frontendUrl}/
                            {merchant.username}
                          </li>
                          <li>
                            Experiences: {appConfig.frontendUrl}/
                            {merchant.username}/experiences
                          </li>
                          <li>
                            Packages: {appConfig.frontendUrl}/
                            {merchant.username}
                            /packages
                          </li>
                        </ul>
                      </div>
                    }
                    color="blue"
                    icon={LuLink2}
                  >
                    Common used URLs for merchant <b>{merchant?.name}</b>
                  </Alert>
                  <Alert className="mt-4" color="blue">
                    For other urls, you could navigate to{' '}
                    <a
                      href={`${appConfig.frontendUrl}/${merchant.username}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="underline font-medium"
                    >
                      {appConfig.frontendUrl}/{merchant.username}
                    </a>{' '}
                    and find pages that will be used as referral link targets.
                    After that, copy the URL and paste it into the Link URL
                    field.
                  </Alert>
                </React.Fragment>
              )}
            </div>

            <div className="w-full flex justify-end">
              <Button
                type="submit"
                theme={buttonTheme.button}
                disabled={isProcessing}
              >
                {isProcessing ? 'Submitting…' : 'Submit'}
              </Button>
            </div>
          </div>
        </form>
      </ModalBody>
    </Modal>
  )
}