'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 {
  getAffiliatePartner,
  updateAffiliatePartner,
} from '@/lib/services/affiliate-partner-services'
import buttonTheme from '@/lib/themes/button'
import FullPageLoader from '@/lib/components/FullPageLoader'
import { handleApiError } from '@/lib/utils/error-handler'
import {
  AffiliatePartnerFormValues,
  AffiliatePartner,
} from '@/lib/types/partner'
import { affiliatePartnerSchema } from '@/lib/types/schemas/partner'
import { AffiliateExperience, 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 [affiliatePartner, setAffiliatePartner] =
    useState<AffiliatePartner | null>(null)
  const { user } = useAuth()

  const form = useForm<AffiliatePartnerFormValues>({
    resolver: yupResolver(affiliatePartnerSchema),
    defaultValues: {
      mode: 'edit',
      email: '',
      password: '',
      payout_method: PayoutMethod.BankTransfer,
      guest_market: '',
      referral_prefix: '',
      referral_suffix: '',
      referral_code: '',
      instagram_url: '',
      facebook_url: '',
      website_url: '',
      marketing_channels: [],
      referral_links: [],
      bank_account: null,
      wise_account: null,
      paypal_account: null,
      affiliate: {
        name: '',
        email: '',
        phone_number: '',
        country_id: undefined,
        address: '',
        lang_code: '',
        affiliate_category_id: undefined,
        niche: '',
        affiliate_experience: AffiliateExperience.NoExperience,
        affiliate_level_id: null,
      },
    },
  })

  useEffect(() => {
    const fetchAffiliatePartner = async () => {
      try {
        setLoading(true)
        const partner = await getAffiliatePartner(parseInt(partnerId, 10))
        setAffiliatePartner(partner)

        form.reset({
          mode: 'edit',
          email: partner.email || '',
          password: '',
          payout_method: partner.payout_method || PayoutMethod.BankTransfer,
          guest_market: partner.guest_market || '',
          referral_prefix: partner.referral_prefix || '',
          referral_suffix: partner.referral_suffix || '',
          referral_code: partner.referral_code || '',
          instagram_url: partner.instagram_url || '',
          facebook_url: partner.facebook_url || '',
          website_url: partner.website_url || '',
          marketing_channels:
            partner.marketing_channels?.map((channel) => channel.id) || [],
          referral_links: partner.referral_links?.map((link) => link.id) || [],
          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,
          affiliate: {
            name: partner.affiliate?.name || '',
            email: partner.affiliate?.email || '',
            phone_number: partner.affiliate?.phone_number || '',
            country_id: partner.affiliate?.country_id,
            address: partner.affiliate?.address || '',
            lang_code: partner.affiliate?.lang_code || '',
            date_of_birth: partner.affiliate?.date_of_birth || '',
            affiliate_category_id: partner.affiliate?.affiliate_category_id,
            niche: partner.affiliate?.niche || '',
            affiliate_experience:
              partner.affiliate?.affiliate_experience ||
              AffiliateExperience.NoExperience,
            affiliate_level_id: partner.affiliate?.affiliate_level_id ?? null,
          },
        })
      } catch (err) {
        handleApiError(err, 'An unexpected error occurred.')
      } finally {
        setLoading(false)
      }
    }

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

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

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

      form.reset()

      toast.success('Affiliate partner updated successfully')

      router.push('/affiliate-partners')
    } catch (err) {
      handleApiError(err, 'An unexpected error occurred.', (formErrors) => {
        Object.keys(formErrors).forEach((field) => {
          form.setError(field as keyof AffiliatePartnerFormValues, {
            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 Affiliate Partner
          </h1>
          <p className="font-medium text-slate-500">
            Please update the affiliate 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={affiliatePartner?.referral_links ?? []}
              hideAffiliateLevelSelector
            />

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