'use client'

import React, { useCallback, useEffect, useRef, useState } from 'react'
import Image from 'next/image'
import Cropper from 'react-easy-crop'
import { I18nProvider } from '@react-aria/i18n'
import { isAxiosError } from 'axios'

import { texts } from '@/texts'
import type { StagedMediaItem } from '@/components/events/create/types'
import { Slider } from '@/components/heroui/Slider'
import { Progress } from '@/components/heroui/Progress'
import { Chip } from '@/components/heroui/Chip'
import { addToast } from '@/lib/toast'
import Button from '@/components/formElements/Button'
import ConsumerModal from '@/components/consumer/ConsumerModal'
import ImageUploadIcon from '@/components/icons/ImageUploadIcon'
import TrashIcon from '@/components/icons/TrashIcon'
import axiosInstance from '@/config/axios'
import { getCroppedImg, parseUploadedFile } from '@/helpers'
import { SAFE_IMAGE_ACCEPT, prepareImageForUpload } from '@/lib/fileValidation'
import { reportBrowserEvent } from '@/lib/observability/client'

const PORTRAIT_ASPECT_RATIO = 9 / 16
const SQUARE_ASPECT_RATIO = 1

type CropKind = 'portrait' | 'square'
type UploadStage = 'idle' | 'preparing' | 'cropping' | 'uploading'

interface EventMediaGalleryUploaderProps {
  items: StagedMediaItem[]
  onChange: (items: StagedMediaItem[]) => void
  // required?: boolean
}

interface PendingUpload {
  image: string
  name: string
  uploadPercentage: number
  kind: CropKind
  continueToSquare: boolean
  replaceId: string | null
}

// export default function EventMediaGalleryUploader({ items, onChange, required = false }: EventMediaGalleryUploaderProps) {
export default function EventMediaGalleryUploader({ items, onChange }: EventMediaGalleryUploaderProps) {
  const [pending, setPending] = useState<PendingUpload | null>(null)
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [crop, setCrop] = useState({ x: 0, y: 0 })
  const [zoom, setZoom] = useState(1)
  const [croppedAreaPixels, setCroppedAreaPixels] = useState<{ x: number; y: number; width: number; height: number } | null>(null)
  const [loading, setLoading] = useState(false)
  const [uploadStage, setUploadStage] = useState<UploadStage>('idle')
  const squareSourceInputRef = useRef<HTMLInputElement>(null)
  const itemsRef = useRef(items)
  const activeOperationRef = useRef(0)
  const abortControllerRef = useRef<AbortController | null>(null)

  useEffect(() => {
    itemsRef.current = items
  }, [items])

  useEffect(() => {
    return () => {
      abortControllerRef.current?.abort()
    }
  }, [])

  const portrait = items.find((item) => item.isPoster) ?? null
  const square = items.find((item) => item.isSquarePoster) ?? null
  const gallery = items.filter((item) => !item.isPoster && !item.isSquarePoster)

  const onCropComplete = useCallback((_: unknown, area: { x: number; y: number; width: number; height: number }) => {
    setCroppedAreaPixels(area)
  }, [])

  const resetCrop = () => {
    setCrop({ x: 0, y: 0 })
    setZoom(1)
    setCroppedAreaPixels(null)
  }

  const openCropper = (
    image: string,
    name: string,
    kind: CropKind,
    options?: { continueToSquare?: boolean; replaceId?: string | null }
  ) => {
    resetCrop()
    setPending({
      image,
      name,
      uploadPercentage: 0,
      kind,
      continueToSquare: options?.continueToSquare ?? false,
      replaceId: options?.replaceId ?? null,
    })
    setIsModalOpen(true)
  }

  const readPreparedFile = async (file: File) => {
    const prepared = await prepareImageForUpload(file)

    if (typeof prepared === 'string') {
      addToast({ title: prepared, color: 'danger' })

      return null
    }

    const image = await readFileAsDataUrl(prepared)

    return { image, name: prepared.name, file: prepared }
  }

  const handleCropFile = async (
    file: File | undefined,
    kind: CropKind,
    options?: { continueToSquare?: boolean; replaceId?: string | null }
  ) => {
    if (!file || loading) return

    const operation = ++activeOperationRef.current

    setLoading(true)
    setUploadStage('preparing')

    try {
      const prepared = await readPreparedFile(file)

      if (!prepared || operation !== activeOperationRef.current) return

      openCropper(prepared.image, prepared.name, kind, options)
    } catch (error) {
      if (operation === activeOperationRef.current) {
        reportUploadFailure('preparing', error)
        addToast({ title: resolveUploadErrorMessage(error, 'preparing'), color: 'danger' })
      }
    } finally {
      if (operation === activeOperationRef.current) {
        setLoading(false)
        setUploadStage('idle')
      }
    }
  }

  const uploadBlob = async (blob: Blob, onProgress: (percent: number) => void, signal: AbortSignal) => {
    const data = new FormData()

    data.append('file', blob)

    const result = await axiosInstance.post('/uploads', data, {
      signal,
      onUploadProgress: (progressEvent) => {
        if (progressEvent.total) {
          onProgress(Math.round((progressEvent.loaded / progressEvent.total) * 100))
        }
      },
    })

    const uploaded = parseUploadedFile(result.data)

    if (!uploaded) {
      throw new Error(texts.events.uploadFailed)
    }

    return uploaded
  }

  const commitItem = (item: StagedMediaItem, replaceId: string | null) => {
    const current = itemsRef.current
    const next = replaceId
      ? current.map((existing) => (existing.id === replaceId ? { ...item, sortOrder: existing.sortOrder } : existing))
      : [...current, { ...item, sortOrder: current.length }]

    itemsRef.current = next
    onChange(next)
  }

  const uploadImage = async () => {
    if (!pending || !croppedAreaPixels || loading) return

    const operation = ++activeOperationRef.current
    const controller = new AbortController()
    let failureStage: UploadStage = 'cropping'

    abortControllerRef.current = controller
    setLoading(true)
    setUploadStage('cropping')

    try {
      const croppedBlob = await getCroppedImg(pending.image, croppedAreaPixels)

      if (operation !== activeOperationRef.current) return

      setUploadStage('uploading')
      failureStage = 'uploading'
      const uploaded = await uploadBlob(
        croppedBlob,
        (uploadPercentage) => {
          if (operation === activeOperationRef.current) {
            setPending((prev) => (prev ? { ...prev, uploadPercentage } : prev))
          }
        },
        controller.signal
      )

      if (operation !== activeOperationRef.current) return

      const newItem: StagedMediaItem = {
        id: uploaded.id ?? uploaded.url,
        url: uploaded.url,
        isPoster: pending.kind === 'portrait',
        isSquarePoster: pending.kind === 'square',
        sortOrder: itemsRef.current.length,
      }

      commitItem(newItem, pending.replaceId)

      if (pending.kind === 'portrait' && pending.continueToSquare) {
        openCropper(pending.image, pending.name, 'square')

        return
      }

      setIsModalOpen(false)
      setPending(null)
      resetCrop()
    } catch (error) {
      if (operation === activeOperationRef.current && !isCancellation(error)) {
        reportUploadFailure(failureStage, error)
        addToast({ title: resolveUploadErrorMessage(error, failureStage), color: 'danger' })
      }
    } finally {
      if (operation === activeOperationRef.current) {
        setLoading(false)
        setUploadStage('idle')
      }
      if (abortControllerRef.current === controller) abortControllerRef.current = null
    }
  }

  const handleGalleryFile = async (file: File | undefined) => {
    if (!file || loading) return

    const operation = ++activeOperationRef.current
    const controller = new AbortController()
    let failureStage: UploadStage = 'preparing'

    abortControllerRef.current = controller
    setLoading(true)
    setUploadStage('preparing')

    try {
      const prepared = await prepareImageForUpload(file)

      if (typeof prepared === 'string') {
        addToast({ title: prepared, color: 'danger' })

        return
      }
      if (operation !== activeOperationRef.current) return

      setUploadStage('uploading')
      failureStage = 'uploading'
      const uploaded = await uploadBlob(prepared, () => undefined, controller.signal)

      if (operation !== activeOperationRef.current) return

      const newItem: StagedMediaItem = {
        id: uploaded.id ?? uploaded.url,
        url: uploaded.url,
        isPoster: false,
        isSquarePoster: false,
        sortOrder: itemsRef.current.length,
      }
      const next = [...itemsRef.current, newItem]

      itemsRef.current = next
      onChange(next)
    } catch (error) {
      if (operation === activeOperationRef.current && !isCancellation(error)) {
        reportUploadFailure(failureStage, error)
        addToast({ title: resolveUploadErrorMessage(error, failureStage), color: 'danger' })
      }
    } finally {
      if (operation === activeOperationRef.current) {
        setLoading(false)
        setUploadStage('idle')
      }
      if (abortControllerRef.current === controller) abortControllerRef.current = null
    }
  }

  const cancelActiveOperation = () => {
    if (!loading) return

    activeOperationRef.current += 1
    abortControllerRef.current?.abort()
    abortControllerRef.current = null
    setLoading(false)
    setUploadStage('idle')
    setPending((current) => (current ? { ...current, uploadPercentage: 0 } : current))
    addToast({ title: texts.common.requestCancelled, color: 'warning' })
  }

  const removeGalleryItem = (id: string) => {
    const next = itemsRef.current.filter((item) => item.id !== id).map((item, index) => ({ ...item, sortOrder: index }))

    itemsRef.current = next
    onChange(next)
  }

  const closeModal = () => {
    setIsModalOpen(false)
    setPending(null)
    resetCrop()
  }

  return (
    <div className="flex flex-col gap-5">
      <div className="w-full grid grid-cols-2 gap-2 items-end">
        <span className="label mb-1 block text-sm font-medium !text-secondary-20 col-span-2">تصویر شاخص(پوستر)</span>
        <PosterSlot
          accept={SAFE_IMAGE_ACCEPT}
          aspectClassName="aspect-[9/16]"
          disabled={loading}
          emptyLabel={texts.events.portraitPosterEmpty}
          hint={texts.events.portraitPosterHint}
          item={portrait}
          onPick={(file) => handleCropFile(file, 'portrait', { continueToSquare: !square, replaceId: portrait?.id ?? null })}
        />
        <PosterSlot
          accept={SAFE_IMAGE_ACCEPT}
          aspectClassName="aspect-square"
          disabled={loading}
          emptyLabel={texts.events.squarePosterEmpty}
          hint={texts.events.squarePosterHint}
          item={square}
          onPick={(file) => handleCropFile(file, 'square', { replaceId: square?.id ?? null })}
        />
      </div>

      <div className="flex flex-col gap-3">
        <div>
          <p className="text-sm font-bold text-foreground">{texts.events.galleryTitle}</p>
          <p className="text-xs text-default-500">{texts.events.galleryHint}</p>
        </div>
        <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-4">
          {gallery.map((item) => (
            <div
              key={item.id}
              className="relative aspect-square overflow-hidden rounded-2xl border border-tertiary"
            >
              <Image
                unoptimized
                alt=""
                className="h-full w-full object-cover"
                height={800}
                src={item.url}
                width={800}
              />
              <Button
                iconOnly
                aria-label={texts.events.ariaRemoveGalleryImage}
                className="absolute end-2 top-2 min-h-11 min-w-11 rounded-full bg-consumer-surface/90"
                color="default"
                size="sm"
                variant="light"
                onClick={() => {
                  removeGalleryItem(item.id)
                }}
              >
                <TrashIcon className="size-4 text-fourth-900" />
              </Button>
            </div>
          ))}

          <label className="flex aspect-square cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-default-200 bg-default-50">
            <input
              accept={SAFE_IMAGE_ACCEPT}
              className="hidden"
              disabled={loading}
              type="file"
              onChange={(event) => {
                void handleGalleryFile(event.target.files?.[0])
                event.target.value = ''
              }}
            />
            <ImageUploadIcon className="size-8 text-default-500" />
            <span className="text-xs text-default-600">{texts.events.addImage}</span>
            <span className="text-xs text-default-400">{texts.events.noAspectLimit}</span>
          </label>
        </div>
        {loading && !pending ? (
          <UploadStatus
            stage={uploadStage}
            onCancel={cancelActiveOperation}
          />
        ) : null}
      </div>

      {pending && (
        <ConsumerModal
          acceptBtnText={loading ? texts.events.uploading : texts.events.confirmUpload}
          isLoading={loading}
          isOpen={isModalOpen}
          title={pending.kind === 'portrait' ? texts.events.cropPortraitTitle : texts.events.cropSquareTitle}
          onAccept={uploadImage}
          onClose={closeModal}
          onOpenChange={() => {}}
        >
          <div className="px-2 py-4 flex flex-col gap-4">
            {pending.kind === 'square' ? (
              <p className="text-sm text-default-600">{texts.events.cropSquareFromPortraitHint}</p>
            ) : (
              <p className="text-sm text-default-600">{texts.events.cropPortraitHint}</p>
            )}
            <div className="relative w-full h-[300px] rounded-2xl">
              <Cropper
                aspect={pending.kind === 'portrait' ? PORTRAIT_ASPECT_RATIO : SQUARE_ASPECT_RATIO}
                classes={{ containerClassName: 'rounded-2xl' }}
                crop={crop}
                image={pending.image}
                zoom={zoom}
                onCropChange={setCrop}
                onCropComplete={onCropComplete}
                onZoomChange={setZoom}
              />
            </div>
            {pending.uploadPercentage > 0 && pending.uploadPercentage < 100 && (
              <Progress
                aria-label="upload"
                color="secondary"
                value={pending.uploadPercentage}
              />
            )}
            {loading ? (
              <UploadStatus
                stage={uploadStage}
                onCancel={cancelActiveOperation}
              />
            ) : null}
            <I18nProvider locale="en-US">
              <Slider
                aria-label="zoom"
                dir="ltr"
                maxValue={3}
                minValue={0.5}
                size="sm"
                step={0.1}
                value={zoom}
                onChange={(val) => {
                  setZoom(val as number)
                }}
              />
            </I18nProvider>
            {pending.kind === 'square' ? (
              <>
                <input
                  ref={squareSourceInputRef}
                  accept={SAFE_IMAGE_ACCEPT}
                  className="hidden"
                  disabled={loading}
                  type="file"
                  onChange={(event) => {
                    void handleCropFile(event.target.files?.[0], 'square', { replaceId: pending.replaceId })
                    event.target.value = ''
                  }}
                />
                <Button
                  color="default"
                  disabled={loading}
                  variant="flat"
                  onClick={() => squareSourceInputRef.current?.click()}
                >
                  {texts.events.pickOtherSquarePoster}
                </Button>
              </>
            ) : null}
          </div>
        </ConsumerModal>
      )}
    </div>
  )
}

function PosterSlot({
  accept,
  aspectClassName,
  disabled,
  emptyLabel,
  hint,
  item,
  label,
  onPick,
}: {
  accept: string
  aspectClassName: string
  disabled: boolean
  emptyLabel: string
  hint: string
  item: StagedMediaItem | null
  label?: string
  onPick: (file: File | undefined) => void
}) {
  return (
    <div className="flex flex-col gap-2">
      {label ? <span className="text-xs font-bold text-foreground">{label}</span> : null}
      {item ? (
        <label className={`relative ${aspectClassName} cursor-pointer overflow-hidden rounded-2xl border border-tertiary`}>
          <input
            accept={accept}
            className="hidden"
            disabled={disabled}
            type="file"
            onChange={(event) => {
              onPick(event.target.files?.[0])
              event.target.value = ''
            }}
          />
          <Image
            unoptimized
            alt=""
            className="h-full w-full object-cover"
            height={1920}
            src={item.url}
            width={1080}
          />
          <Chip
            className="absolute top-2 start-2"
            color="primary"
            size="sm"
            variant="flat"
          >
            {texts.events.change}
          </Chip>
        </label>
      ) : (
        <label
          className={`flex ${aspectClassName} cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-primary-200 bg-primary-50`}
        >
          <input
            accept={accept}
            className="hidden"
            disabled={disabled}
            type="file"
            onChange={(event) => {
              onPick(event.target.files?.[0])
              event.target.value = ''
            }}
          />
          <ImageUploadIcon className="size-8 text-primary" />
          <span className="text-xs text-primary">{emptyLabel}</span>
          <span className="text-xs text-default-500">{hint}</span>
        </label>
      )}
    </div>
  )
}

function UploadStatus({ stage, onCancel }: { stage: UploadStage; onCancel: () => void }) {
  const label = stage === 'uploading' ? texts.events.uploading : texts.events.preparingImage

  return (
    <div
      aria-live="polite"
      className="flex items-center justify-between gap-3 rounded-xl bg-default-100 px-3 py-2 text-sm text-default-700"
      role="status"
    >
      <span>{label}</span>
      <Button
        color="default"
        size="sm"
        variant="flat"
        onClick={onCancel}
      >
        {texts.events.cancelCurrentUpload}
      </Button>
    </div>
  )
}

function isCancellation(error: unknown): boolean {
  return isAxiosError(error) && error.code === 'ERR_CANCELED'
}

function readFileAsDataUrl(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    const timeout = window.setTimeout(() => {
      reader.abort()
      reject(new Error('IMAGE_PROCESSING_TIMEOUT'))
    }, 30_000)

    reader.onload = () => {
      window.clearTimeout(timeout)
      resolve(reader.result as string)
    }
    reader.onerror = () => {
      window.clearTimeout(timeout)
      reject(new Error(texts.events.imageReadFailed))
    }
    reader.onabort = () => {
      window.clearTimeout(timeout)
    }
    reader.readAsDataURL(file)
  })
}

function resolveUploadErrorMessage(error: unknown, stage: UploadStage): string {
  if (error instanceof Error && error.message === 'IMAGE_PROCESSING_TIMEOUT') {
    return texts.common.imageProcessingTimedOut
  }
  if (isAxiosError(error) && (error.code === 'ECONNABORTED' || error.code === 'ETIMEDOUT')) {
    return texts.common.imageUploadTimedOut
  }
  if (stage === 'preparing' && error instanceof Error && error.message === texts.common.imageProcessingTimedOut) {
    return error.message
  }

  return texts.common.imageUploadFailed
}

function reportUploadFailure(stage: UploadStage, error: unknown): void {
  reportBrowserEvent({
    name: 'event_media_upload_failed',
    level: 'warning',
    attributes: {
      stage,
      code: isAxiosError(error) ? (error.code ?? null) : error instanceof Error ? error.message.slice(0, 80) : null,
    },
  })
}