'use client'

import { useEffect, useState } from 'react'
import { FormProvider, useForm } from 'react-hook-form'
import { useRouter } from 'next/navigation'
import dynamic from 'next/dynamic'

import { texts } from '@/texts'
import type { AdminCreateEventPayload } from '@/services/events'
import Button from '@/components/formElements/Button'
import Input from '@/components/formElements/Input'
import CategoryTreeSelect from '@/components/events/create/CategoryTreeSelect'
import EventMediaGalleryUploader from '@/components/events/create/EventMediaGalleryUploader'
import FaqEditor from '@/components/events/create/FaqEditor'
import MapLocationPicker from '@/components/events/create/MapLocationPicker'
import { WizardFormFullWidth, WizardFormGrid } from '@/components/events/create/WizardFormLayout'
import type { FaqItem, StagedMediaItem } from '@/components/events/create/types'
import { combineDateAndMinutes, hasRequiredPosters } from '@/components/events/create/types'
import { DetailSkeleton } from '@/components/feedback/LoadingState'
import InlineNotice from '@/components/feedback/InlineNotice'
import { AdminFormActions, AdminFormSection } from '@/components/forms/AdminFormLayout'
import { useEventScheduleConstraints } from '@/components/events/schedule/eventScheduleConstraints'
import VerifiedHostPicker, { type VerifiedHostOption } from '@/features/events/create/VerifiedHostPicker'
import { slugifyEventTitle, shouldAutogenerateEventSlug } from '@/features/events/eventSlug'
import { createEventAsAdmin, createEventFaq, fetchEventCategories, type EventCategory } from '@/services/events'
import { GET_ADMIN_USER_DETAIL } from '@/services/adminUserDetail'
import { fetchAllCities, type City } from '@/services/geography'
import { extractServerErrorDetail } from '@/services/errorHandler'
import { addToast } from '@/lib/toast'
import { showFormValidationToast } from '@/lib/formValidationToast'
import { AGE_RESTRICTION_OPTIONS, GENDER_RESTRICTION_OPTIONS } from '@/lib/eventAudience'

const TextEditor = dynamic(() => import('@/components/formElements/TextEditor'), { ssr: false })

interface EventCreateFormValues {
  title: string
  slug: string
  categoryId: string
  shortDescription: string
  description: string
  startDate: string
  startTime: number
  endDate: string
  endTime: number
  cityId: string
  address: string
  lat: number
  lng: number
  isFree: boolean
  price: number
  capacity: number
  reservedCapacity: number
  genderRestriction: 'open' | 'female_only' | 'male_only'
  ageRestriction: 'open' | 'age_15_19' | 'age_20_24' | 'age_25_plus'
  cancellationFeePercent: number
  cancellationFeePercent12To24Hours: number
  cancellationFeePercentMoreThan24Hours: number
  isDiscoverable: boolean
  autoCreateGroup: boolean
  addressVisibility: 'public' | 'attendees_only'
  generalArea: string
  waitlistAutoOffer: boolean
  sendReviewRequestSms: boolean
}

const ADDRESS_VISIBILITY_OPTIONS = [
  { name: texts.events.addressVisibilityPublic, selectKey: 'public' },
  { name: texts.events.addressVisibilityAttendeesOnly, selectKey: 'attendees_only' },
]

const DEFAULT_VALUES: EventCreateFormValues = {
  title: '',
  slug: '',
  categoryId: '',
  shortDescription: '',
  description: '',
  startDate: '',
  startTime: 600,
  endDate: '',
  endTime: 720,
  cityId: '',
  address: '',
  lat: 35.6892,
  lng: 51.389,
  isFree: false,
  price: 0,
  capacity: 20,
  reservedCapacity: 0,
  genderRestriction: 'open',
  ageRestriction: 'open',
  cancellationFeePercent: 30,
  cancellationFeePercent12To24Hours: 20,
  cancellationFeePercentMoreThan24Hours: 10,
  isDiscoverable: true,
  autoCreateGroup: true,
  addressVisibility: 'public',
  generalArea: '',
  waitlistAutoOffer: true,
  sendReviewRequestSms: true,
}

interface EventCreateFormProps {
  cancelHref: string
  successHrefFor: (eventId: string) => string
  initialOrganizerId?: string | null
}

async function loadVerifiedHost(userId: string): Promise<VerifiedHostOption | null> {
  const result = await GET_ADMIN_USER_DETAIL(userId)

  if (!result.ok) return null
  if (result.data.identityStatus !== 'verified') return null

  return {
    id: result.data.id,
    firstName: result.data.firstName,
    lastName: result.data.lastName,
    mobile: result.data.mobile,
  }
}

const EventCreateForm = ({ cancelHref, successHrefFor, initialOrganizerId }: EventCreateFormProps) => {
  const router = useRouter()
  const FormActions = AdminFormActions
  const FormSection = AdminFormSection
  const [categories, setCategories] = useState<EventCategory[]>([])
  const [cities, setCities] = useState<City[]>([])
  const [media, setMedia] = useState<StagedMediaItem[]>([])
  const [faqs, setFaqs] = useState<FaqItem[]>([])
  const [host, setHost] = useState<VerifiedHostOption | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)
  const [loadError, setLoadError] = useState<string | null>(null)

  const form = useForm<EventCreateFormValues>({ defaultValues: DEFAULT_VALUES })
  const title = form.watch('title')
  const slug = form.watch('slug')
  const isFree = form.watch('isFree')
  const lat = form.watch('lat')
  const lng = form.watch('lng')
  const addressVisibility = form.watch('addressVisibility')
  const startDate = form.watch('startDate')
  const startTime = form.watch('startTime')
  const endDate = form.watch('endDate')
  const { todayIso, startMinimumTime, endMinimumTime } = useEventScheduleConstraints(startDate, startTime, endDate)

  useEffect(() => {
    if (!shouldAutogenerateEventSlug(slug, title)) return

    const nextSlug = slugifyEventTitle(title)

    if (nextSlug && nextSlug !== slug) {
      form.setValue('slug', nextSlug, { shouldDirty: false })
    }
  }, [form, slug, title])

  useEffect(() => {
    let cancelled = false

    const load = async () => {
      try {
        setIsLoading(true)
        setLoadError(null)
        const [cats, cityList] = await Promise.all([fetchEventCategories(), fetchAllCities()])

        if (cancelled) return
        setCategories(cats)
        setCities(cityList)

        if (initialOrganizerId) {
          const preselected = await loadVerifiedHost(initialOrganizerId)

          if (!cancelled && preselected) setHost(preselected)
        }
      } catch {
        if (!cancelled) setLoadError(texts.events.categoriesListFailed)
      } finally {
        if (!cancelled) setIsLoading(false)
      }
    }

    void load()

    return () => {
      cancelled = true
    }
  }, [initialOrganizerId])

  const handleSubmit = form.handleSubmit(async (values) => {
    if (!host) {
      addToast({ title: texts.events.createEventHostRequired, color: 'danger' })

      return
    }

    try {
      const startsAt = combineDateAndMinutes(values.startDate, values.startTime)
      const endsAt = combineDateAndMinutes(values.endDate, values.endTime)

      if (new Date(endsAt) <= new Date(startsAt)) {
        addToast({ title: texts.validation.eventWizard.endAfterStart, color: 'danger' })

        return
      }

      if (!hasRequiredPosters(media)) {
        addToast({
          title: texts.events.postersRequiredTitle,
          description: texts.events.postersRequiredDescription,
          color: 'danger',
        })

        return
      }

      const selectedCity = cities.find((city) => String(city.id) === values.cityId)

      if (!selectedCity) {
        addToast({ title: texts.validation.cityRequired, color: 'danger' })

        return
      }

      if (
        values.cancellationFeePercent < values.cancellationFeePercent12To24Hours ||
        values.cancellationFeePercent12To24Hours < values.cancellationFeePercentMoreThan24Hours
      ) {
        addToast({ title: texts.validation.eventWizard.cancelPenaltyOrder, color: 'danger' })

        return
      }

      const price = values.isFree ? 0 : Number(values.price)
      const payload: AdminCreateEventPayload = {
        organizerId: host.id,
        title: values.title.trim(),
        slug: values.slug.trim(),
        categoryId: Number(values.categoryId),
        shortDescription: values.shortDescription.trim() || undefined,
        description: values.description || undefined,
        startsAt,
        endsAt,
        provinceId: selectedCity.provinceId,
        cityId: Number(values.cityId),
        address: values.address.trim(),
        lat: values.lat,
        lng: values.lng,
        isFree: values.isFree,
        price,
        capacity: Number(values.capacity),
        reservedCapacity: Number(values.reservedCapacity) || 0,
        genderRestriction: values.genderRestriction,
        ageRestriction: values.ageRestriction,
        cancellationFeePercent: values.cancellationFeePercent,
        cancellationFeePercent12To24Hours: values.cancellationFeePercent12To24Hours,
        cancellationFeePercentMoreThan24Hours: values.cancellationFeePercentMoreThan24Hours,
        settings: {
          isDiscoverable: values.isDiscoverable,
          autoCreateGroup: values.autoCreateGroup,
          addressVisibility: values.addressVisibility,
          generalArea: values.addressVisibility === 'attendees_only' ? values.generalArea.trim() : undefined,
          waitlistAutoOffer: values.waitlistAutoOffer,
          sendReviewRequestSms: values.sendReviewRequestSms,
        },
        media: media.map((item, index) => ({
          mediaType: 'image' as const,
          url: item.url,
          sortOrder: item.sortOrder ?? index,
          isPoster: item.isPoster,
          isSquarePoster: item.isSquarePoster,
        })),
      }

      setIsSaving(true)
      const created = await createEventAsAdmin(payload)

      for (const [index, faq] of faqs.entries()) {
        const question = faq.question.trim()
        const answer = faq.answer.trim()

        if (!question || !answer) continue

        await createEventFaq(created.id, {
          question,
          answer,
          sortOrder: index,
        })
      }

      addToast({ title: texts.events.createEventSuccess, color: 'success' })
      router.push(successHrefFor(created.id))
    } catch (err) {
      const detail = extractServerErrorDetail((err as { response?: { data?: unknown } })?.response?.data)

      addToast({
        title: texts.events.createEventFailed,
        description: detail ?? undefined,
        color: 'danger',
      })
    } finally {
      setIsSaving(false)
    }
  }, showFormValidationToast)

  if (isLoading) return <DetailSkeleton />
  if (loadError) return <p className="text-sm text-fourth-900">{loadError}</p>

  return (
    <FormProvider {...form}>
      <form
        className="mx-auto flex max-w-5xl flex-col gap-5"
        onSubmit={(e) => void handleSubmit(e)}
      >
        <InlineNotice>{texts.events.createEventApprovedHint}</InlineNotice>

        <FormSection
          description={texts.events.createEventHostSectionDescription}
          title={texts.events.createEventHostSectionTitle}
        >
          <VerifiedHostPicker
            selected={host}
            onSelect={setHost}
          />
        </FormSection>

        <FormSection
          description={texts.events.basicInfoCardDescription}
          title={texts.events.basicInfoCardTitle}
        >
          <WizardFormGrid>
            <Input
              required
              generalType="input"
              label={texts.events.title}
              name="title"
            />
            <Input
              required
              description={texts.events.slugFormatHint}
              direction="ltr"
              generalType="input"
              label={texts.events.slugFieldLabel}
              name="slug"
            />
            <WizardFormFullWidth>
              <CategoryTreeSelect
                required
                categories={categories}
                label={texts.common.category}
                name="categoryId"
              />
            </WizardFormFullWidth>
            <WizardFormFullWidth>
              <Input
                generalType="textarea"
                label={texts.events.shortDescriptionLabel}
                name="shortDescription"
                textAreaMinRows={2}
              />
            </WizardFormFullWidth>
            <WizardFormFullWidth>
              <p className="labelClass mb-2">{texts.common.description}</p>
              <TextEditor
                value={form.watch('description')}
                variant="default"
                onChange={(value) => {
                  form.setValue('description', value, { shouldDirty: true })
                }}
              />
            </WizardFormFullWidth>
          </WizardFormGrid>
        </FormSection>

        <FormSection
          description={texts.events.mediaSectionDescription}
          title={texts.events.editMediaCardTitle}
        >
          <EventMediaGalleryUploader
            items={media}
            onChange={setMedia}
          />
        </FormSection>

        <FormSection
          description={texts.events.wizardStep2Hint}
          title={texts.events.wizardStep2Label}
        >
          <WizardFormGrid>
            <Input
              required
              generalType="eventDatePicker"
              label={texts.events.startsAtDateLabel}
              minDate={todayIso}
              name="startDate"
            />
            <Input
              required
              generalType="eventTimePicker"
              label={texts.events.startsAtTimeLabel}
              minValue={startMinimumTime}
              name="startTime"
            />
            <Input
              required
              generalType="eventDatePicker"
              label={texts.events.endsAtDateLabel}
              minDate={startDate || todayIso}
              name="endDate"
            />
            <Input
              required
              generalType="eventTimePicker"
              label={texts.events.endsAtTimeLabel}
              minValue={endMinimumTime}
              name="endTime"
            />
            <Input
              required
              generalType="select"
              label={texts.common.city}
              name="cityId"
              selectKey="id"
              selectOptions={cities}
              selectValue="name"
            />
            <WizardFormFullWidth>
              <Input
                required
                generalType="textarea"
                label={texts.events.address}
                name="address"
                textAreaMinRows={3}
              />
            </WizardFormFullWidth>
            <WizardFormFullWidth>
              <MapLocationPicker
                lat={lat}
                lng={lng}
                onAddressResolved={(address) => {
                  form.setValue('address', address, { shouldDirty: true })
                }}
                onChange={({ lat: nextLat, lng: nextLng }) => {
                  form.setValue('lat', nextLat, { shouldDirty: true })
                  form.setValue('lng', nextLng, { shouldDirty: true })
                }}
              />
            </WizardFormFullWidth>
            <WizardFormFullWidth>
              <Input
                generalType="radio"
                label={texts.events.addressVisibilityLabel}
                name="addressVisibility"
                radioOptions={ADDRESS_VISIBILITY_OPTIONS}
                selectKey="selectKey"
              />
            </WizardFormFullWidth>
            {addressVisibility === 'attendees_only' && (
              <WizardFormFullWidth>
                <Input
                  required
                  generalType="textarea"
                  label={texts.events.generalAreaLabel}
                  name="generalArea"
                  placeholder={texts.events.generalAreaPlaceholder}
                  textAreaMinRows={2}
                />
              </WizardFormFullWidth>
            )}
          </WizardFormGrid>
        </FormSection>

        <FormSection
          description={texts.events.wizardStep3Hint}
          title={texts.events.pricingCardTitle}
        >
          <WizardFormGrid>
            <div className="flex items-end pb-1">
              <Input
                generalType="switch"
                label={texts.events.isFreeLabel}
                name="isFree"
              />
            </div>
            <Input
              disabled={isFree}
              formatOptions={{ style: 'decimal' }}
              generalType="numberInput"
              label={texts.events.priceTomanLabel}
              minValue={0}
              name="price"
              required={!isFree}
            />
            <Input
              required
              generalType="numberInput"
              label={texts.events.capacity}
              minValue={1}
              name="capacity"
            />
            <Input
              generalType="numberInput"
              label={texts.events.reservedCapacityLabel}
              minValue={0}
              name="reservedCapacity"
            />
            <WizardFormFullWidth>
              <Input
                generalType="radio"
                label={texts.events.genderRestrictionLabel}
                name="genderRestriction"
                radioOptions={[...GENDER_RESTRICTION_OPTIONS]}
                selectKey="selectKey"
              />
            </WizardFormFullWidth>
            <WizardFormFullWidth>
              <Input
                generalType="radio"
                label={texts.events.ageRestrictionLabel}
                name="ageRestriction"
                radioOptions={[...AGE_RESTRICTION_OPTIONS]}
                selectKey="selectKey"
              />
            </WizardFormFullWidth>
            <Input
              generalType="numberInput"
              label={texts.events.cancellationFeeMoreThan24HoursLabel}
              maxValue={100}
              minValue={0}
              name="cancellationFeePercentMoreThan24Hours"
            />
            <Input
              generalType="numberInput"
              label={texts.events.cancellationFee12To24HoursLabel}
              maxValue={100}
              minValue={0}
              name="cancellationFeePercent12To24Hours"
            />
            <Input
              generalType="numberInput"
              label={texts.events.cancellationFeeLabel}
              maxValue={100}
              minValue={0}
              name="cancellationFeePercent"
            />
            <div className="flex items-end pb-1">
              <Input
                generalType="switch"
                label={texts.events.discoverableLabel}
                name="isDiscoverable"
              />
            </div>
            <div className="flex items-end pb-1">
              <Input
                generalType="switch"
                label={texts.events.autoCreateGroupAfterEndLabel}
                name="autoCreateGroup"
              />
            </div>
            <div className="flex items-end pb-1">
              <Input
                generalType="switch"
                label={texts.events.waitlistAutoOfferLabel}
                name="waitlistAutoOffer"
              />
            </div>
            <div className="flex items-end pb-1">
              <Input
                generalType="switch"
                label={texts.events.sendReviewSmsAfterEndLabel}
                name="sendReviewRequestSms"
              />
            </div>
          </WizardFormGrid>
        </FormSection>

        <FormSection
          description={texts.events.faqSectionDescription}
          title={texts.events.editFaqCardTitle}
        >
          <FaqEditor
            items={faqs}
            onChange={setFaqs}
          />
        </FormSection>

        <FormActions className="sticky bottom-3 z-20">
          <Button
            isLoading={isSaving}
            type="submit"
          >
            {texts.events.createEventSubmit}
          </Button>
          <Button
            variant="flat"
            onClick={() => {
              router.push(cancelHref)
            }}
          >
            {texts.common.cancel}
          </Button>
        </FormActions>
      </form>
    </FormProvider>
  )
}

export default EventCreateForm