'use client'

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

import { texts, format } from '@/texts'
import type { CreateEventPayload, CreatedEvent } 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 UnsavedChangesIndicator from '@/components/forms/UnsavedChangesIndicator'
import { useEventScheduleConstraints } from '@/components/events/schedule/eventScheduleConstraints'
import { isEventSlugLocked, isFieldLocked, resolveEventEditPolicy } from '@/features/events/eventEditPolicy'
import { syncEventFaqs, syncEventMedia } from '@/features/events/edit/syncEventExtras'
import { fetchEventCategories, fetchEventForEdit, updateEventAsAdmin, type EventCategory } from '@/services/events'
import { fetchEventFaqs, fetchEventMedia, type EventFaq, type EventMedia } from '@/services/eventDetail'
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 EventEditFormValues {
  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
  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' },
]

interface EventEditFormProps {
  eventId: string
  cancelHref: string
  successHref: string
}

function splitIsoToDateAndMinutes(iso: string): { date: string; minutes: number } {
  const d = new Date(iso)

  return {
    date: d.toISOString(),
    minutes: d.getHours() * 60 + d.getMinutes(),
  }
}

function eventToFormValues(event: CreatedEvent): EventEditFormValues {
  const start = splitIsoToDateAndMinutes(String(event.startsAt))
  const end = splitIsoToDateAndMinutes(String(event.endsAt))

  return {
    title: event.title,
    slug: event.slug,
    categoryId: String(event.categoryId),
    shortDescription: event.shortDescription ?? '',
    description: event.description ?? '',
    startDate: start.date,
    startTime: start.minutes,
    endDate: end.date,
    endTime: end.minutes,
    cityId: String(event.cityId),
    // The editing party (owner or admin) always gets the real address from
    // the backend (see EventsService.applyAddressVisibility) -- the `?? `
    // fallbacks only satisfy the DTO's general nullable type.
    address: event.address ?? '',
    lat: event.lat ?? 35.6892,
    lng: event.lng ?? 51.389,
    isFree: event.isFree,
    price: event.price,
    capacity: event.capacity,
    genderRestriction: event.genderRestriction ?? 'open',
    ageRestriction: event.ageRestriction ?? 'open',
    cancellationFeePercent: event.cancellationFeePercent,
    cancellationFeePercent12To24Hours: event.cancellationFeePercent12To24Hours,
    cancellationFeePercentMoreThan24Hours: event.cancellationFeePercentMoreThan24Hours,
    isDiscoverable: event.settings.isDiscoverable,
    autoCreateGroup: event.settings.autoCreateGroup,
    addressVisibility: event.settings.addressVisibility,
    generalArea: event.settings.generalArea ?? '',
    waitlistAutoOffer: event.settings.waitlistAutoOffer,
    sendReviewRequestSms: event.settings.sendReviewRequestSms ?? false,
  }
}

const EventEditForm = ({ eventId, cancelHref, successHref }: EventEditFormProps) => {
  const router = useRouter()
  const FormActions = AdminFormActions
  const FormSection = AdminFormSection
  const [event, setEvent] = useState<CreatedEvent | null>(null)
  const [categories, setCategories] = useState<EventCategory[]>([])
  const [cities, setCities] = useState<City[]>([])
  const [initialMedia, setInitialMedia] = useState<EventMedia[]>([])
  const [initialFaqs, setInitialFaqs] = useState<EventFaq[]>([])
  const [media, setMedia] = useState<StagedMediaItem[]>([])
  const [faqs, setFaqs] = useState<FaqItem[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)
  const [loadError, setLoadError] = useState<string | null>(null)

  const form = useForm<EventEditFormValues>()
  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)

  const policy = useMemo(
    () => (event ? resolveEventEditPolicy(event.status, event.bookedCount, event.reservedCapacity ?? 0) : null),
    [event]
  )

  useEffect(() => {
    let cancelled = false

    const load = async () => {
      try {
        setIsLoading(true)
        setLoadError(null)
        const [loaded, cats, cityList, mediaItems, faqItems] = await Promise.all([
          fetchEventForEdit(eventId),
          fetchEventCategories(),
          fetchAllCities(),
          fetchEventMedia(eventId).catch(() => [] as EventMedia[]),
          fetchEventFaqs(eventId).catch(() => [] as EventFaq[]),
        ])

        if (cancelled) return
        setEvent(loaded)
        setCategories(cats)
        setCities(cityList)
        setInitialMedia(mediaItems)
        setInitialFaqs(faqItems)
        setMedia(
          mediaItems
            .filter((item) => item.mediaType === 'image')
            .map((item, index) => ({
              id: item.id,
              url: item.url,
              isPoster: item.isPoster,
              isSquarePoster: Boolean(item.isSquarePoster),
              sortOrder: item.sortOrder ?? index,
            }))
        )
        setFaqs(
          faqItems.map((faq) => ({
            id: faq.id,
            question: faq.question,
            answer: faq.answer,
          }))
        )
        form.reset(eventToFormValues(loaded))
      } catch {
        if (!cancelled) setLoadError(texts.events.eventLoadFailed)
      } finally {
        if (!cancelled) setIsLoading(false)
      }
    }

    void load()

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

  const scheduleLocked = policy ? isFieldLocked(policy, 'startsAt') : false
  const locationLocked = policy ? isFieldLocked(policy, 'address') : false
  const priceLocked = policy ? isFieldLocked(policy, 'price') : false
  const cancellationFeeLocked = policy ? isFieldLocked(policy, 'cancellationFeePercent') : false
  const audienceLocked = policy ? isFieldLocked(policy, 'genderRestriction') : false
  const behavioralLocked = policy?.lockBehavioralSettings ?? false
  const slugLocked = event ? isEventSlugLocked(event.status) : false

  const handleSubmit = form.handleSubmit(async (values) => {
    if (!event || !policy?.canEdit) 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 (policy && values.capacity < policy.minCapacity) {
        addToast({
          title: format(texts.events.capacityBelowOccupied, { min: policy.minCapacity }),
          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: Partial<CreateEventPayload> = {
        title: values.title.trim(),
        categoryId: Number(values.categoryId),
        shortDescription: values.shortDescription.trim() || undefined,
        description: values.description || undefined,
        capacity: Number(values.capacity),
      }

      if (!behavioralLocked) {
        payload.settings = {
          isDiscoverable: values.isDiscoverable,
          autoCreateGroup: values.autoCreateGroup,
          waitlistAutoOffer: values.waitlistAutoOffer,
          sendReviewRequestSms: values.sendReviewRequestSms,
        }
      }

      if (!slugLocked) {
        payload.slug = values.slug.trim()
      }

      if (!scheduleLocked) {
        payload.startsAt = startsAt
        payload.endsAt = endsAt
      }

      if (!locationLocked) {
        payload.provinceId = selectedCity.provinceId
        payload.cityId = Number(values.cityId)
        payload.address = values.address.trim()
        payload.lat = values.lat
        payload.lng = values.lng
        payload.settings = {
          ...payload.settings,
          addressVisibility: values.addressVisibility,
          generalArea: values.addressVisibility === 'attendees_only' ? values.generalArea.trim() : undefined,
        }
      }

      if (!priceLocked) {
        payload.isFree = values.isFree
        payload.price = price
      }

      if (!cancellationFeeLocked) {
        payload.cancellationFeePercent = Number(values.cancellationFeePercent ?? 0)
        payload.cancellationFeePercent12To24Hours = Number(values.cancellationFeePercent12To24Hours ?? 0)
        payload.cancellationFeePercentMoreThan24Hours = Number(values.cancellationFeePercentMoreThan24Hours ?? 0)
      }

      if (!audienceLocked) {
        payload.genderRestriction = values.genderRestriction
        payload.ageRestriction = values.ageRestriction
      }

      setIsSaving(true)
      const updated = await updateEventAsAdmin(eventId, payload)

      await syncEventMedia(eventId, initialMedia, media)
      await syncEventFaqs(eventId, initialFaqs, faqs)

      setEvent(updated)
      addToast({ title: texts.events.eventUpdated, color: 'success' })
      router.push(successHref)
    } catch (err) {
      const detail = extractServerErrorDetail((err as { response?: { data?: unknown } })?.response?.data)

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

  if (isLoading) return <DetailSkeleton />
  if (loadError || !event || !policy) {
    return <p className="text-sm text-fourth-900">{loadError ?? texts.events.eventNotFound}</p>
  }

  if (!policy.canEdit) {
    return (
      <div className="grid max-w-xl gap-3">
        <p className="text-sm text-default-600">{format(texts.events.editStatusBlocked, { status: event.status })}</p>
        <Button
          size="sm"
          variant="flat"
          onClick={() => {
            router.push(cancelHref)
          }}
        >
          {texts.common.back}
        </Button>
      </div>
    )
  }

  return (
    <FormProvider {...form}>
      <form
        className="mx-auto flex max-w-5xl flex-col gap-5"
        onSubmit={(e) => void handleSubmit(e)}
      >
        {policy.hasActiveBookings ? (
          <InlineNotice>{format(texts.events.editLockedWithBookings, { count: event.bookedCount })}</InlineNotice>
        ) : null}

        <FormSection
          description={texts.events.basicInfoCardDescription}
          title={texts.events.basicInfoCardTitle}
        >
          <WizardFormGrid>
            <Input
              required
              generalType="input"
              label={texts.events.title}
              name="title"
            />
            <Input
              required
              description={slugLocked ? texts.events.slugLockedHint : texts.events.slugFormatHint}
              direction="ltr"
              disabled={slugLocked}
              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
              disabled={scheduleLocked}
              generalType="eventDatePicker"
              label={texts.events.startsAtDateLabel}
              minDate={todayIso}
              name="startDate"
            />
            <Input
              required
              disabled={scheduleLocked}
              generalType="eventTimePicker"
              label={texts.events.startsAtTimeLabel}
              minValue={startMinimumTime}
              name="startTime"
            />
            <Input
              required
              disabled={scheduleLocked}
              generalType="eventDatePicker"
              label={texts.events.endsAtDateLabel}
              minDate={startDate || todayIso}
              name="endDate"
            />
            <Input
              required
              disabled={scheduleLocked}
              generalType="eventTimePicker"
              label={texts.events.endsAtTimeLabel}
              minValue={endMinimumTime}
              name="endTime"
            />
            <Input
              required
              disabled={locationLocked}
              generalType="select"
              label={texts.common.city}
              name="cityId"
              selectKey="id"
              selectOptions={cities}
              selectValue="name"
            />
            <WizardFormFullWidth>
              <Input
                required
                disabled={locationLocked}
                generalType="textarea"
                label={texts.events.address}
                name="address"
                textAreaMinRows={3}
              />
            </WizardFormFullWidth>
            <WizardFormFullWidth>
              <MapLocationPicker
                disabled={locationLocked}
                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
                disabled={locationLocked}
                generalType="radio"
                label={texts.events.addressVisibilityLabel}
                name="addressVisibility"
                radioOptions={ADDRESS_VISIBILITY_OPTIONS}
                selectKey="selectKey"
              />
            </WizardFormFullWidth>
            {addressVisibility === 'attendees_only' && (
              <WizardFormFullWidth>
                <Input
                  required
                  disabled={locationLocked}
                  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
                disabled={priceLocked}
                generalType="switch"
                label={texts.events.isFreeLabel}
                name="isFree"
              />
            </div>
            <Input
              disabled={priceLocked || 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={policy.minCapacity}
              name="capacity"
            />
            <p className="text-xs text-secondary-20-span-2">
              {format(texts.events.reservedCapacityEditHint, { count: event.reservedCapacity ?? 0 })}
            </p>
            <WizardFormFullWidth>
              <Input
                disabled={audienceLocked}
                generalType="radio"
                label={texts.events.genderRestrictionLabel}
                name="genderRestriction"
                radioOptions={[...GENDER_RESTRICTION_OPTIONS]}
                selectKey="selectKey"
              />
            </WizardFormFullWidth>
            <WizardFormFullWidth>
              <Input
                disabled={audienceLocked}
                generalType="radio"
                label={texts.events.ageRestrictionLabel}
                name="ageRestriction"
                radioOptions={[...AGE_RESTRICTION_OPTIONS]}
                selectKey="selectKey"
              />
            </WizardFormFullWidth>
            <Input
              disabled={cancellationFeeLocked}
              generalType="numberInput"
              label={texts.events.cancellationFeeMoreThan24HoursLabel}
              maxValue={100}
              minValue={0}
              name="cancellationFeePercentMoreThan24Hours"
            />
            <Input
              disabled={cancellationFeeLocked}
              generalType="numberInput"
              label={texts.events.cancellationFee12To24HoursLabel}
              maxValue={100}
              minValue={0}
              name="cancellationFeePercent12To24Hours"
            />
            <Input
              disabled={cancellationFeeLocked}
              generalType="numberInput"
              label={texts.events.cancellationFeeLabel}
              maxValue={100}
              minValue={0}
              name="cancellationFeePercent"
            />
            <div className="flex items-end pb-1">
              <Input
                disabled={behavioralLocked}
                generalType="switch"
                label={texts.events.discoverableLabel}
                name="isDiscoverable"
              />
            </div>
            <div className="flex items-end pb-1">
              <Input
                disabled={behavioralLocked}
                generalType="switch"
                label={texts.events.autoCreateGroupAfterEndLabel}
                name="autoCreateGroup"
              />
            </div>
            <div className="flex items-end pb-1">
              <Input
                disabled={behavioralLocked}
                generalType="switch"
                label={texts.events.waitlistAutoOfferLabel}
                name="waitlistAutoOffer"
              />
            </div>
            <div className="flex items-end pb-1">
              <Input
                disabled={behavioralLocked}
                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"
          helper={<UnsavedChangesIndicator isDirty={form.formState.isDirty} />}
        >
          <Button
            isLoading={isSaving}
            type="submit"
          >
            {texts.common.saveChanges}
          </Button>
          <Button
            variant="flat"
            onClick={() => {
              router.push(cancelHref)
            }}
          >
            {texts.common.cancel}
          </Button>
        </FormActions>
      </form>
    </FormProvider>
  )
}

export default EventEditForm