'use client'

import { useEffect, useState } from 'react'
import { Alert, Button, Card } from 'flowbite-react'
import { FormProvider, useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import { toast } from 'react-toastify'
import { useRouter } from 'next/navigation'

import buttonTheme from '@/lib/themes/button'
import { createTravelPartner } from '@/lib/services/travel-partner-services'
import { handleApiError } from '@/lib/utils/error-handler'
import { TravelPartnerFormValues } from '@/lib/types/partner'
import { travelPartnerSchema } from '@/lib/types/schemas/partner'
import { PartnerCategory, PayoutMethod } from '@/lib/types/enums/partner'
import { useAuth } from '@/lib/context/AuthContext'
import Form from '../partials/Form'

export default function MainContent() {
  const router = useRouter()
  const [processing, setProcessing] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const { user } = useAuth()

  const form = useForm<TravelPartnerFormValues>({
    resolver: yupResolver(travelPartnerSchema),
    defaultValues: {
      mode: 'create',
      email: '',
      password: '',
      partner_category: PartnerCategory.HotelVilla,
      payout_method: PayoutMethod.BankTransfer,
      guest_market: '',
      agreement_document_url: '',
      referral_prefix: '',
      referral_suffix: '',
      referral_code: '',
      marketing_channels: [],
      referral_links: [],
      merchant_widgets: [],
      bank_account: null,
      wise_account: null,
      paypal_account: null,
      business: null,
      driver: null,
    },
  })

  const onSubmit = async (data: TravelPartnerFormValues) => {
    try {
      setProcessing(true)
      setError(null)

      await createTravelPartner(data)

      form.reset()

      toast.success('Travel partner created successfully')

      router.push('/travel-partners')
    } catch (err) {
      handleApiError(err, 'An unexpected error occurred.', (formErrors) => {
        Object.keys(formErrors).forEach((field) => {
          form.setError(field as keyof TravelPartnerFormValues, {
            type: 'server',
            message: formErrors[field][0],
          })
        })
      })
    } finally {
      setProcessing(false)
    }
  }

  // Authorize User
  useEffect(() => {
    if (user && user.role !== 'super_admin' && user.role !== 'manager') {
      router.replace('/')
    }
  }, [user, router])

  return (
    <Card className="mt-8 sm:mt-16 max-w-6xl shadow-none mx-auto">
      <section>
        <div>
          <h1 className="text-3xl font-semibold text-black mb-2">
            Create Travel Partner
          </h1>
          <p className="font-medium text-slate-500">
            Please fill in all required information below to create a new travel
            partner.
          </p>
        </div>

        <FormProvider {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="mt-8">
            {error && (
              <Alert
                color="failure"
                className="mb-4"
                onDismiss={() => {
                  setError(null)
                }}
              >
                {error}
              </Alert>
            )}

            <Form />

            <div className="flex justify-end gap-4 mt-8">
              <Button
                type="button"
                color="alternative"
                theme={buttonTheme.button}
                as="a"
                href="/travel-partners"
              >
                Cancel
              </Button>
              <Button
                type="submit"
                color="default"
                theme={buttonTheme.button}
                disabled={processing}
              >
                {processing ? 'Creating...' : 'Create Travel Partner'}
              </Button>
            </div>
          </form>
        </FormProvider>
      </section>
    </Card>
  )
}