'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 {
  getTravelPartner,
  updateTravelPartner,
} from '@/lib/services/travel-partner-services'
import buttonTheme from '@/lib/themes/button'
import FullPageLoader from '@/lib/components/FullPageLoader'
import { handleApiError } from '@/lib/utils/error-handler'
import { TravelPartnerFormValues, TravelPartner } from '@/lib/types/partner'
import { travelPartnerSchema } from '@/lib/types/schemas/partner'
import { PayoutMethod } from '@/lib/types/enums/partner'
import { useAuth } from '@/lib/context/AuthContext'
import Form from '../../partials/Form'

interface MainContentProps {
  partnerId: string
}

export default function MainContent({ partnerId }: MainContentProps) {
  const router = useRouter()
  const [processing, setProcessing] = useState(false)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [travelPartner, setTravelPartner] = useState<TravelPartner | null>(null)
  const { user } = useAuth()

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

  useEffect(() => {
    const fetchTravelPartner = async () => {
      try {
        setLoading(true)
        const partner = await getTravelPartner(parseInt(partnerId, 10))
        setTravelPartner(partner)

        form.reset({
          mode: 'edit',
          email: partner.email || '',
          password: '',
          partner_category: partner.partner_category || '',
          payout_method: partner.payout_method || PayoutMethod.BankTransfer,
          guest_market: partner.guest_market || '',
          agreement_document_url: partner.agreement_document_url || '',
          referral_prefix: partner.referral_prefix || '',
          referral_suffix: partner.referral_suffix || '',
          referral_code: partner.referral_code || '',
          marketing_channels:
            partner.marketing_channels?.map((channel) => channel.id) || [],
          referral_links: partner.referral_links?.map((link) => link.id) || [],
          merchant_widgets:
            partner.merchant_widgets?.map((widget) => widget.id) || [],
          instagram_url: partner.instagram_url || '',
          facebook_url: partner.facebook_url || '',
          website_url: partner.website_url || '',
          bank_account: partner.bank_account
            ? {
                bank_id: partner.bank_account.bank_id,
                account_name: partner.bank_account.account_name || '',
                account_number: partner.bank_account.account_number || '',
              }
            : null,
          wise_account: partner.wise_account
            ? {
                account_name: partner.wise_account.account_name || '',
                email: partner.wise_account.email || '',
              }
            : null,
          paypal_account: partner.paypal_account
            ? {
                account_name: partner.paypal_account.account_name || '',
                email: partner.paypal_account.email || '',
              }
            : null,
          business: partner.business
            ? {
                business_name: partner.business.business_name || '',
                business_email: partner.business.business_email || '',
                business_address: partner.business.business_address || '',
                number_of_properties:
                  partner.business.number_of_properties ?? 0,
                average_guest_per_month:
                  partner.business.average_guest_per_month ?? 0,
                pic_name: partner.business.pic_name || '',
                pic_email: partner.business.pic_email || '',
                pic_position: partner.business.pic_position || '',
                pic_phone_number: partner.business.pic_phone_number || '',
              }
            : null,
          driver: partner.driver
            ? {
                name: partner.driver.name || '',
                email: partner.driver.email || '',
                phone_number: partner.driver.phone_number || '',
                address: partner.driver.address || '',
                vehicle_plate: partner.driver.vehicle_plate || '',
                vehicle_name: partner.driver.vehicle_name || '',
              }
            : null,
        })
      } catch (err) {
        handleApiError(err, 'An unexpected error occurred.')
      } finally {
        setLoading(false)
      }
    }

    if (partnerId) {
      fetchTravelPartner()
    }
  }, [partnerId, form])

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

      await updateTravelPartner(parseInt(partnerId, 10), data)

      form.reset()

      toast.success('Travel partner updated 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)
    }
  }

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

  if (loading) {
    return <FullPageLoader />
  }

  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">
            Edit Travel Partner
          </h1>
          <p className="font-medium text-slate-500">
            Please update the travel partner information below.
          </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 initialReferralLinks={travelPartner?.referral_links ?? []} />

            <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 ? 'Updating...' : 'Update Travel Partner'}
              </Button>
            </div>
          </form>
        </FormProvider>
      </section>
    </Card>
  )
}