import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'
import UploadDropzone from './UploadDropzone'
import ScreenshotUploader from './ScreenshotUploader'
import UploadSidebar from './UploadSidebar'
import UploadProgress from './UploadProgress'
import UploadActions from './UploadActions'
import UploadStepper from './UploadStepper'
import { emitUploadEvent } from '../../lib/uploadAnalytics'
import * as uploadEndpoints from '../../lib/uploadEndpoints'
import { AnimatePresence, motion, useReducedMotion } from 'framer-motion'

const IMAGE_EXTENSIONS = new Set(['jpg', 'jpeg', 'png', 'webp'])
const IMAGE_MIME = new Set(['image/jpeg', 'image/png', 'image/webp'])
const ARCHIVE_EXTENSIONS = new Set(['zip', 'rar', '7z', 'tar', 'gz'])
const ARCHIVE_MIME = new Set([
  'application/zip',
  'application/x-zip-compressed',
  'application/x-rar-compressed',
  'application/vnd.rar',
  'application/x-7z-compressed',
  'application/x-tar',
  'application/gzip',
  'application/x-gzip',
  'application/octet-stream',
])

const PRIMARY_IMAGE_MAX_BYTES = 50 * 1024 * 1024
const PRIMARY_ARCHIVE_MAX_BYTES = 200 * 1024 * 1024
const SCREENSHOT_MAX_BYTES = 10 * 1024 * 1024
const DEFAULT_CHUNK_SIZE_BYTES = 5 * 1024 * 1024
const POLL_INTERVAL_MS = 2000

const wizardSteps = [
  { key: 'upload', label: 'Upload' },
  { key: 'details', label: 'Details' },
  { key: 'publish', label: 'Publish' },
]

function getExtension(fileName = '') {
  const parts = String(fileName).toLowerCase().split('.')
  return parts.length > 1 ? parts.pop() : ''
}

function detectFileType(file) {
  if (!file) return 'unknown'
  const extension = getExtension(file.name)
  const mime = String(file.type || '').toLowerCase()

  if (IMAGE_MIME.has(mime) || IMAGE_EXTENSIONS.has(extension)) return 'image'
  if (ARCHIVE_MIME.has(mime) || ARCHIVE_EXTENSIONS.has(extension)) return 'archive'
  return 'unsupported'
}

function formatBytes(bytes) {
  if (!Number.isFinite(bytes) || bytes <= 0) return '—'
  if (bytes < 1024) return `${bytes} B`
  const kb = bytes / 1024
  if (kb < 1024) return `${kb.toFixed(1)} KB`
  const mb = kb / 1024
  if (mb < 1024) return `${mb.toFixed(1)} MB`
  return `${(mb / 1024).toFixed(2)} GB`
}

function readImageDimensions(file) {
  return new Promise((resolve, reject) => {
    const blobUrl = URL.createObjectURL(file)
    const image = new Image()

    image.onload = () => {
      resolve({ width: image.naturalWidth, height: image.naturalHeight })
      URL.revokeObjectURL(blobUrl)
    }

    image.onerror = () => {
      reject(new Error('image_read_failed'))
      URL.revokeObjectURL(blobUrl)
    }

    image.src = blobUrl
  })
}

function buildCategoryTree(contentTypes = []) {
  const rootsById = new Map()

  contentTypes.forEach((type) => {
    const categories = Array.isArray(type?.categories) ? type.categories : []
    categories.forEach((category) => {
      if (!category?.id) return
      if (!rootsById.has(String(category.id))) {
        rootsById.set(String(category.id), {
          id: String(category.id),
          name: category.name || `Category ${category.id}`,
          children: [],
        })
      }

      const root = rootsById.get(String(category.id))
      const children = Array.isArray(category?.children) ? category.children : []
      children.forEach((child) => {
        if (!child?.id) return
        const exists = root.children.some((item) => String(item.id) === String(child.id))
        if (!exists) {
          root.children.push({ id: String(child.id), name: child.name || `Subcategory ${child.id}` })
        }
      })
    })
  })

  return Array.from(rootsById.values())
}

function getContentTypeValue(type) {
  if (!type) return ''
  return String(type.id ?? type.key ?? type.slug ?? type.name ?? '')
}

function getContentTypeVisualKey(type) {
  const raw = String(type?.slug || type?.name || type?.key || '').toLowerCase()
  const normalized = raw.replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '')
  if (normalized.includes('wallpaper')) return 'wallpapers'
  if (normalized.includes('skin')) return 'skins'
  if (normalized.includes('photo')) return 'photography'
  return 'other'
}

export async function validatePrimaryFile(file) {
  const errors = []
  const warnings = []
  const type = detectFileType(file)

  if (!file) {
    return {
      type: 'unknown',
      errors: [],
      warnings,
      metadata: { resolution: '—', size: '—', type: '—' },
      previewUrl: '',
    }
  }

  const metadata = {
    resolution: '—',
    size: formatBytes(file.size),
    type: file.type || getExtension(file.name) || 'unknown',
  }

  if (type === 'unsupported') {
    errors.push('Unsupported file type. Use image (jpg/jpeg/png/webp) or archive (zip/rar/7z/tar/gz).')
  }

  if (type === 'image') {
    if (file.size > PRIMARY_IMAGE_MAX_BYTES) {
      errors.push('Image exceeds 50MB maximum size.')
    }

    try {
      const dimensions = await readImageDimensions(file)
      metadata.resolution = `${dimensions.width} × ${dimensions.height}`
      if (dimensions.width < 800 || dimensions.height < 600) {
        errors.push('Image resolution must be at least 800×600.')
      }
    } catch {
      errors.push('Unable to read image resolution.')
    }
  }

  if (type === 'archive') {
    metadata.resolution = 'n/a'
    if (file.size > PRIMARY_ARCHIVE_MAX_BYTES) {
      errors.push('Archive exceeds 200MB maximum size.')
    }
    warnings.push('Archive upload requires at least one valid screenshot.')
  }

  const previewUrl = type === 'image' ? URL.createObjectURL(file) : ''

  return {
    type,
    errors,
    warnings,
    metadata,
    previewUrl,
  }
}

export async function validateScreenshots(files, isArchive) {
  if (!isArchive) {
    return { errors: [], perFileErrors: [] }
  }

  const errors = []
  const perFileErrors = Array.from({ length: files.length }, () => '')

  if (files.length < 1) {
    errors.push('At least one screenshot is required for archives.')
  }

  if (files.length > 5) {
    errors.push('Maximum 5 screenshots are allowed.')
  }

  await Promise.all(files.map(async (file, index) => {
    const typeErrors = []
    const extension = getExtension(file.name)
    const mime = String(file.type || '').toLowerCase()

    if (!IMAGE_MIME.has(mime) && !IMAGE_EXTENSIONS.has(extension)) {
      typeErrors.push('Must be JPG, PNG, or WEBP.')
    }

    if (file.size > SCREENSHOT_MAX_BYTES) {
      typeErrors.push('Must be 10MB or less.')
    }

    if (typeErrors.length === 0) {
      try {
        const dimensions = await readImageDimensions(file)
        if (dimensions.width < 1280 || dimensions.height < 720) {
          typeErrors.push('Minimum resolution is 1280×720.')
        }
      } catch {
        typeErrors.push('Could not read screenshot resolution.')
      }
    }

    if (typeErrors.length > 0) {
      perFileErrors[index] = typeErrors.join(' ')
    }
  }))

  if (perFileErrors.some(Boolean)) {
    errors.push('One or more screenshots are invalid.')
  }

  return { errors, perFileErrors }
}

const machineStates = {
  idle: 'idle',
  initializing: 'initializing',
  uploading: 'uploading',
  finishing: 'finishing',
  processing: 'processing',
  ready_to_publish: 'ready_to_publish',
  publishing: 'publishing',
  complete: 'complete',
  error: 'error',
  cancelled: 'cancelled',
}

const initialMachineState = {
  state: machineStates.idle,
  progress: 0,
  sessionId: null,
  uploadToken: null,
  processingStatus: null,
  isCancelling: false,
  error: '',
  lastAction: null,
}

function machineReducer(state, action) {
  switch (action.type) {
    case 'INIT_START':
      return { ...state, state: machineStates.initializing, progress: 0, error: '', isCancelling: false, lastAction: 'start' }
    case 'INIT_SUCCESS':
      return { ...state, sessionId: action.sessionId, uploadToken: action.uploadToken, error: '' }
    case 'UPLOAD_START':
      return { ...state, state: machineStates.uploading, progress: 1, error: '' }
    case 'UPLOAD_PROGRESS':
      return { ...state, progress: Math.max(1, Math.min(95, action.progress)), error: '' }
    case 'FINISH_START':
      return { ...state, state: machineStates.finishing, progress: Math.max(state.progress, 96), error: '' }
    case 'FINISH_SUCCESS':
      return { ...state, state: machineStates.processing, progress: 100, processingStatus: action.processingStatus ?? 'processing', error: '' }
    case 'PROCESSING_STATUS':
      return { ...state, processingStatus: action.processingStatus ?? state.processingStatus, error: '' }
    case 'READY_TO_PUBLISH':
      return { ...state, state: machineStates.ready_to_publish, processingStatus: 'ready', error: '' }
    case 'PUBLISH_START':
      return { ...state, state: machineStates.publishing, error: '', lastAction: 'publish' }
    case 'PUBLISH_SUCCESS':
      return { ...state, state: machineStates.complete, error: '' }
    case 'CANCEL_START':
      return { ...state, isCancelling: true, error: '', lastAction: 'cancel' }
    case 'CANCELLED':
      return { ...state, state: machineStates.cancelled, isCancelling: false, error: '' }
    case 'ERROR':
      return { ...state, state: machineStates.error, isCancelling: false, error: action.error || 'Upload failed.' }
    case 'RESET_MACHINE':
      return { ...initialMachineState }
    default:
      return state
  }
}

function toPercent(loaded, total) {
  if (!Number.isFinite(total) || total <= 0) return 0
  return Math.max(0, Math.min(100, Math.round((loaded / total) * 100)))
}

function getProcessingValue(payload) {
  const direct = String(payload?.processing_state || payload?.status || '').toLowerCase()
  if (direct) return direct
  return 'processing'
}

function isReadyToPublishStatus(status) {
  const normalized = String(status || '').toLowerCase()
  return ['ready', 'processed', 'publish_ready', 'published', 'complete'].includes(normalized)
}

function getProcessingTransparencyLabel(processingStatus, machineState) {
  if (!['processing', 'finishing', 'publishing'].includes(machineState)) return ''

  const normalized = String(processingStatus || '').toLowerCase()
  if (normalized === 'generating_preview') return 'Generating preview'

  if (['processed', 'ready', 'published', 'queued', 'publish_ready'].includes(normalized)) {
    return 'Preparing for publish'
  }

  return 'Analyzing content'
}

export default function UploadWizard({
  onValidationStateChange,
  initialDraftId = null,
  chunkSize = DEFAULT_CHUNK_SIZE_BYTES,
  contentTypes = [],
  suggestedTags = [],
}) {
  const [activeStep, setActiveStep] = useState(1)
  const [showRestoredBanner, setShowRestoredBanner] = useState(Boolean(initialDraftId))

  const [primaryFile, setPrimaryFile] = useState(null)
  const [primaryPreviewUrl, setPrimaryPreviewUrl] = useState('')
  const [primaryType, setPrimaryType] = useState('unknown')
  const [primaryWarnings, setPrimaryWarnings] = useState([])
  const [primaryErrors, setPrimaryErrors] = useState([])
  const [fileMetadata, setFileMetadata] = useState({ resolution: '—', size: '—', type: '—' })

  const [screenshots, setScreenshots] = useState([])
  const [screenshotErrors, setScreenshotErrors] = useState([])
  const [screenshotPerFileErrors, setScreenshotPerFileErrors] = useState([])

  const [metadata, setMetadata] = useState({
    title: '',
    rootCategoryId: '',
    subCategoryId: '',
    tags: [],
    description: '',
    rightsAccepted: false,
    contentType: '',
  })
  const [visionSuggestedTags, setVisionSuggestedTags] = useState([])
  const [visionDebug, setVisionDebug] = useState({
    enabled: null,
    queueConnection: '',
    queuedJobs: 0,
    failedJobs: 0,
    triggered: false,
    aiTagCount: 0,
    totalTagCount: 0,
    lastError: '',
  })
  const [isUploadLocked, setIsUploadLocked] = useState(false)
  const [resolvedArtworkId, setResolvedArtworkId] = useState(() => {
    const parsed = Number(initialDraftId)
    return Number.isFinite(parsed) && parsed > 0 ? Math.floor(parsed) : null
  })

  const [machine, dispatchMachine] = useReducer(machineReducer, initialMachineState)
  const prefersReducedMotion = useReducedMotion()
  const stepContentRef = useRef(null)
  const stepHeadingRef = useRef(null)

  const primaryValidationRunRef = useRef(0)
  const screenshotValidationRunRef = useRef(0)
  const pollingTimerRef = useRef(null)
  const requestControllersRef = useRef(new Set())
  const publishLockRef = useRef(false)
  const hasAutoAdvancedRef = useRef(false)
  const lastVisionFetchAtRef = useRef(0)

  const effectiveChunkSize = useMemo(() => {
    const parsed = Number(chunkSize)
    if (!Number.isFinite(parsed) || parsed <= 0) return DEFAULT_CHUNK_SIZE_BYTES
    return Math.floor(parsed)
  }, [chunkSize])

  const quickTransition = prefersReducedMotion ? { duration: 0 } : { duration: 0.2, ease: 'easeOut' }
  const categoryTreeByType = useMemo(() => {
    const next = {}
    const list = Array.isArray(contentTypes) ? contentTypes : []
    list.forEach((type) => {
      const value = getContentTypeValue(type)
      if (!value) return
      next[value] = buildCategoryTree([type])
    })
    return next
  }, [contentTypes])
  const filteredCategoryTree = useMemo(() => {
    const selected = String(metadata.contentType || '')
    if (!selected) return []
    return categoryTreeByType[selected] || []
  }, [categoryTreeByType, metadata.contentType])
  const allRootCategoryOptions = useMemo(() => {
    const items = []
    Object.entries(categoryTreeByType).forEach(([contentTypeValue, roots]) => {
      roots.forEach((root) => {
        items.push({
          ...root,
          contentTypeValue,
        })
      })
    })
    return items
  }, [categoryTreeByType])
  const selectedRootFromAnyType = useMemo(() => {
    const selectedId = String(metadata.rootCategoryId || '')
    if (!selectedId) return null
    return allRootCategoryOptions.find((root) => String(root.id) === selectedId) || null
  }, [allRootCategoryOptions, metadata.rootCategoryId])
  const selectedRootCategory = useMemo(() => {
    return filteredCategoryTree.find((root) => String(root.id) === String(metadata.rootCategoryId || '')) || selectedRootFromAnyType || null
  }, [filteredCategoryTree, metadata.rootCategoryId, selectedRootFromAnyType])
  const requiresSubCategory = Boolean(selectedRootCategory && Array.isArray(selectedRootCategory.children) && selectedRootCategory.children.length > 0)
  const stepProgressPercent = useMemo(() => {
    if (activeStep === 1) return 33
    if (activeStep === 2) return 66
    return 100
  }, [activeStep])

  const isArchive = primaryType === 'archive'
  const processingTransparencyLabel = useMemo(() => getProcessingTransparencyLabel(machine.processingStatus, machine.state), [machine.processingStatus, machine.state])

  const uploadReady = useMemo(() => {
    return machine.state === machineStates.ready_to_publish || machine.processingStatus === 'ready' || machine.state === machineStates.complete
  }, [machine.state, machine.processingStatus])

  const metadataErrors = useMemo(() => {
    const next = {}
    if (!String(metadata.title || '').trim()) next.title = 'Title is required.'
    if (!metadata.contentType) next.contentType = 'Content type is required.'
    if (!metadata.rootCategoryId) next.category = 'Root category is required.'
    if (metadata.rootCategoryId && requiresSubCategory && !metadata.subCategoryId) next.category = 'Subcategory is required for the selected root category.'
    if (!metadata.rightsAccepted) next.rights = 'Rights confirmation is required to continue.'
    return next
  }, [metadata, requiresSubCategory])

  const detailsValid = Object.keys(metadataErrors).length === 0
  const mergedSuggestedTags = useMemo(() => {
    const normalized = new Map()
    const addTag = (item) => {
      if (!item) return
      const key = String(item?.slug || item?.tag || item?.name || item).trim().toLowerCase()
      if (!key) return
      if (!normalized.has(key)) {
        if (typeof item === 'string') {
          normalized.set(key, item)
        } else {
          normalized.set(key, {
            id: item.id ?? key,
            name: item.name || item.tag || item.slug || key,
            slug: item.slug || item.tag || key,
            usage_count: Number(item.usage_count || 0),
            is_ai: Boolean(item.is_ai || item.source === 'ai'),
            source: item.source || (item.is_ai ? 'ai' : 'manual'),
          })
        }
      }
    }

    ;(Array.isArray(suggestedTags) ? suggestedTags : []).forEach(addTag)
    ;(Array.isArray(visionSuggestedTags) ? visionSuggestedTags : []).forEach(addTag)
    return Array.from(normalized.values())
  }, [suggestedTags, visionSuggestedTags])
  const highestUnlockedStep = uploadReady ? (detailsValid ? 3 : 2) : 1
  const showProgress = machine.state !== machineStates.idle && machine.state !== machineStates.cancelled
  const canStartUpload = isValidForUpload(primaryFile, primaryErrors, isArchive, screenshotErrors)

  const canPublish = useMemo(() => {
    return uploadReady && metadata.rightsAccepted && machine.state !== machineStates.publishing
  }, [uploadReady, metadata.rightsAccepted, machine.state])

  const fileSelectionLocked = isUploadLocked

  useEffect(() => {
    if (uploadReady && activeStep === 1 && !hasAutoAdvancedRef.current) {
      hasAutoAdvancedRef.current = true
      setIsUploadLocked(true)
      setActiveStep(2)
    }
  }, [uploadReady, activeStep])

  useEffect(() => {
    if (uploadReady) {
      setIsUploadLocked(true)
    }
  }, [uploadReady])

  useEffect(() => {
    if (!stepContentRef.current) return
    if (typeof stepContentRef.current.scrollIntoView === 'function') {
      stepContentRef.current.scrollIntoView({ behavior: prefersReducedMotion ? 'auto' : 'smooth', block: 'start' })
    }

    window.setTimeout(() => {
      if (stepHeadingRef.current && typeof stepHeadingRef.current.focus === 'function') {
        stepHeadingRef.current.focus({ preventScroll: true })
      }
    }, 0)
  }, [activeStep, prefersReducedMotion])

  useEffect(() => {
    return () => {
      if (primaryPreviewUrl) URL.revokeObjectURL(primaryPreviewUrl)
      requestControllersRef.current.forEach((controller) => controller.abort())
      requestControllersRef.current.clear()
      if (pollingTimerRef.current) {
        window.clearInterval(pollingTimerRef.current)
        pollingTimerRef.current = null
      }
    }
  }, [primaryPreviewUrl])

  const registerController = useCallback(() => {
    const controller = new AbortController()
    requestControllersRef.current.add(controller)
    return controller
  }, [])

  const unregisterController = useCallback((controller) => {
    if (!controller) return
    requestControllersRef.current.delete(controller)
  }, [])

  const abortAllRequests = useCallback(() => {
    requestControllersRef.current.forEach((controller) => controller.abort())
    requestControllersRef.current.clear()
  }, [])

  const clearPolling = useCallback(() => {
    if (pollingTimerRef.current) {
      window.clearInterval(pollingTimerRef.current)
      pollingTimerRef.current = null
    }
  }, [])

  useEffect(() => {
    let cancelled = false
    primaryValidationRunRef.current += 1
    const runId = primaryValidationRunRef.current

    ;(async () => {
      const result = await validatePrimaryFile(primaryFile)
      if (cancelled || runId !== primaryValidationRunRef.current) return

      setPrimaryType(result.type)
      setPrimaryWarnings(result.warnings)
      setPrimaryErrors(result.errors)
      setFileMetadata(result.metadata)

      setPrimaryPreviewUrl((current) => {
        if (current) URL.revokeObjectURL(current)
        return result.previewUrl
      })
    })()

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

  useEffect(() => {
    let cancelled = false
    screenshotValidationRunRef.current += 1
    const runId = screenshotValidationRunRef.current

    ;(async () => {
      const result = await validateScreenshots(screenshots, isArchive)
      if (cancelled || runId !== screenshotValidationRunRef.current) return
      setScreenshotErrors(result.errors)
      setScreenshotPerFileErrors(result.perFileErrors)
    })()

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

  useEffect(() => {
    if (!isArchive) {
      setScreenshots([])
      setScreenshotErrors([])
      setScreenshotPerFileErrors([])
    }
  }, [isArchive])

  const validationErrors = useMemo(() => [...primaryErrors, ...screenshotErrors], [primaryErrors, screenshotErrors])

  useEffect(() => {
    if (typeof onValidationStateChange === 'function') {
      onValidationStateChange({
        isValid: canStartUpload,
        validationErrors,
        isArchive,
      })
    }
  }, [canStartUpload, validationErrors, isArchive, onValidationStateChange])

  const fetchProcessingStatus = useCallback(async (sessionId, uploadToken, signal) => {
    const response = await window.axios.get(uploadEndpoints.status(sessionId), {
      signal,
      headers: uploadToken ? { 'X-Upload-Token': uploadToken } : undefined,
      params: uploadToken ? { upload_token: uploadToken } : undefined,
    })
    return response.data || {}
  }, [])

  const runUploadFlow = useCallback(async () => {
    if (!primaryFile || !canStartUpload) return

    clearPolling()

    dispatchMachine({ type: 'INIT_START' })
    emitUploadEvent('upload_start', {
      file_name: primaryFile.name,
      file_size: primaryFile.size,
      file_type: primaryType,
      is_archive: isArchive,
    })

    try {
      let artworkIdForUpload = resolvedArtworkId
      if (!artworkIdForUpload) {
        const derivedTitle = String(metadata.title || '').trim() || String(primaryFile.name || '').replace(/\.[^.]+$/, '') || 'Untitled upload'
        const draftResponse = await window.axios.post('/api/artworks', {
          title: derivedTitle,
          description: String(metadata.description || '').trim() || null,
          category: metadata.subCategoryId || metadata.rootCategoryId || null,
          tags: Array.isArray(metadata.tags) ? metadata.tags.join(', ') : '',
          license: Boolean(metadata.rightsAccepted),
        })

        const draftIdCandidate = Number(draftResponse?.data?.artwork_id ?? draftResponse?.data?.id)
        if (!Number.isFinite(draftIdCandidate) || draftIdCandidate <= 0) {
          throw new Error('Unable to create upload draft before finishing upload.')
        }

        artworkIdForUpload = Math.floor(draftIdCandidate)
        setResolvedArtworkId(artworkIdForUpload)
      }

      const initController = registerController()
      const initResponse = await window.axios.post(uploadEndpoints.init(), { client: 'web' }, { signal: initController.signal })
      unregisterController(initController)

      const sessionId = initResponse?.data?.session_id
      const uploadToken = initResponse?.data?.upload_token
      if (!sessionId || !uploadToken) {
        throw new Error('Upload session initialization returned an invalid payload.')
      }

      dispatchMachine({ type: 'INIT_SUCCESS', sessionId, uploadToken })
      dispatchMachine({ type: 'UPLOAD_START' })

      let uploaded = 0
      const totalSize = primaryFile.size

      while (uploaded < totalSize) {
        const nextOffset = Math.min(uploaded + effectiveChunkSize, totalSize)
        const blob = primaryFile.slice(uploaded, nextOffset)

        const payload = new FormData()
        payload.append('session_id', sessionId)
        payload.append('offset', String(uploaded))
        payload.append('chunk_size', String(blob.size))
        payload.append('total_size', String(totalSize))
        payload.append('upload_token', uploadToken)
        payload.append('chunk', blob)

        const chunkController = registerController()
        const chunkResponse = await window.axios.post(uploadEndpoints.chunk(), payload, {
          signal: chunkController.signal,
          headers: { 'X-Upload-Token': uploadToken },
        })
        unregisterController(chunkController)

        const receivedBytes = Number(chunkResponse?.data?.received_bytes ?? nextOffset)
        uploaded = Math.max(nextOffset, Number.isFinite(receivedBytes) ? receivedBytes : nextOffset)
        const progress = chunkResponse?.data?.progress ?? toPercent(uploaded, totalSize)
        dispatchMachine({ type: 'UPLOAD_PROGRESS', progress })
      }

      dispatchMachine({ type: 'FINISH_START' })

      const finishController = registerController()
      const finishResponse = await window.axios.post(uploadEndpoints.finish(), {
        session_id: sessionId,
        upload_token: uploadToken,
        artwork_id: artworkIdForUpload,
      }, {
        signal: finishController.signal,
        headers: { 'X-Upload-Token': uploadToken },
      })
      unregisterController(finishController)

      const finishStatus = getProcessingValue(finishResponse?.data || {})
      dispatchMachine({ type: 'FINISH_SUCCESS', processingStatus: finishStatus })
      if (isReadyToPublishStatus(finishStatus)) {
        dispatchMachine({ type: 'READY_TO_PUBLISH' })
      }

      emitUploadEvent('upload_complete', {
        session_id: sessionId,
        artwork_id: artworkIdForUpload,
      })
    } catch (error) {
      if (error?.name === 'CanceledError' || error?.code === 'ERR_CANCELED') return

      const message = error?.response?.data?.message || error?.message || 'Upload failed.'
      dispatchMachine({ type: 'ERROR', error: message })
      emitUploadEvent('upload_error', { stage: 'upload_flow', message })
    }
  }, [primaryFile, canStartUpload, primaryType, isArchive, resolvedArtworkId, metadata, registerController, unregisterController, clearPolling, effectiveChunkSize])

  const pollProcessing = useCallback(async () => {
    if (!machine.sessionId) return

    try {
      const statusController = registerController()
      const payload = await fetchProcessingStatus(machine.sessionId, machine.uploadToken, statusController.signal)
      unregisterController(statusController)

      const processingValue = getProcessingValue(payload)
      dispatchMachine({ type: 'PROCESSING_STATUS', processingStatus: processingValue })

      if (isReadyToPublishStatus(processingValue)) {
        dispatchMachine({ type: 'READY_TO_PUBLISH' })
      } else if (processingValue === 'rejected' || processingValue === 'error' || payload?.failure_reason) {
        const failureMessage = payload?.failure_reason || payload?.message || `Processing ended with status: ${processingValue}`
        dispatchMachine({ type: 'ERROR', error: failureMessage })
      }
    } catch (error) {
      if (error?.name === 'CanceledError' || error?.code === 'ERR_CANCELED') return
      const message = error?.response?.data?.message || 'Processing status check failed.'
      dispatchMachine({ type: 'ERROR', error: message })
      emitUploadEvent('upload_error', { stage: 'processing_poll', message })
    }
  }, [machine.sessionId, machine.uploadToken, fetchProcessingStatus, registerController, unregisterController])

  const fetchVisionSuggestedTags = useCallback(async () => {
    if (!resolvedArtworkId || resolvedArtworkId <= 0) return

    const now = Date.now()
    if (now - lastVisionFetchAtRef.current < 3000) return
    lastVisionFetchAtRef.current = now

    try {
      const response = await window.axios.get(`/api/artworks/${resolvedArtworkId}/tags`, {
        params: { trigger: 1 },
      })
      const payload = response?.data || {}
      if (payload?.vision_enabled === false) {
        setVisionSuggestedTags([])
        setVisionDebug((current) => ({
          ...current,
          enabled: false,
          lastError: '',
        }))
        return
      }

      const aiTags = Array.isArray(payload?.ai_tags) ? payload.ai_tags : []
      setVisionSuggestedTags(aiTags)
      const debug = payload?.debug || {}
      setVisionDebug({
        enabled: Boolean(payload?.vision_enabled),
        queueConnection: String(debug?.queue_connection || ''),
        queuedJobs: Number(debug?.queued_jobs || 0),
        failedJobs: Number(debug?.failed_jobs || 0),
        triggered: Boolean(debug?.triggered),
        aiTagCount: Number(debug?.ai_tag_count || aiTags.length || 0),
        totalTagCount: Number(debug?.total_tag_count || 0),
        lastError: '',
      })
      if (typeof window !== 'undefined') {
        window.console?.debug?.('[upload][vision-tags]', {
          artworkId: resolvedArtworkId,
          aiTags: aiTags.map((tag) => tag?.slug || tag?.name || tag),
          debug,
        })
      }
    } catch (error) {
      if (error?.response?.status === 404 || error?.response?.status === 403) return
      setVisionDebug((current) => ({
        ...current,
        lastError: error?.response?.data?.message || error?.message || 'Vision tag fetch failed.',
      }))
    }
  }, [resolvedArtworkId])

  useEffect(() => {
    if (!resolvedArtworkId || activeStep < 2) return

    fetchVisionSuggestedTags()
    const timer = window.setInterval(() => {
      fetchVisionSuggestedTags()
    }, 4000)

    return () => window.clearInterval(timer)
  }, [resolvedArtworkId, activeStep, fetchVisionSuggestedTags])

  useEffect(() => {
    if (machine.state !== machineStates.processing) {
      clearPolling()
      return
    }

    pollProcessing()
    clearPolling()
    pollingTimerRef.current = window.setInterval(() => {
      pollProcessing()
    }, POLL_INTERVAL_MS)

    return () => {
      clearPolling()
    }
  }, [machine.state, pollProcessing, clearPolling])

  const handleCancel = useCallback(async () => {
    dispatchMachine({ type: 'CANCEL_START' })
    clearPolling()
    abortAllRequests()

    try {
      if (machine.sessionId) {
        await window.axios.post(uploadEndpoints.cancel(), {
          session_id: machine.sessionId,
          upload_token: machine.uploadToken,
        }, {
          headers: machine.uploadToken ? { 'X-Upload-Token': machine.uploadToken } : undefined,
        })
      }

      dispatchMachine({ type: 'CANCELLED' })
      emitUploadEvent('upload_cancel', { session_id: machine.sessionId || null })
    } catch (error) {
      const message = error?.response?.data?.message || 'Cancel failed.'
      dispatchMachine({ type: 'ERROR', error: message })
      emitUploadEvent('upload_error', { stage: 'cancel', message })
    }
  }, [machine.sessionId, machine.uploadToken, abortAllRequests, clearPolling])

  const handlePublish = useCallback(async () => {
    if (!canPublish || publishLockRef.current) return

    publishLockRef.current = true
    dispatchMachine({ type: 'PUBLISH_START' })

    try {
      const publishTargetId = resolvedArtworkId || initialDraftId || machine.sessionId
      const publishPayload = {
        title: String(metadata.title || '').trim() || undefined,
        description: String(metadata.description || '').trim() || null,
      }

      if (resolvedArtworkId && resolvedArtworkId > 0) {
        dispatchMachine({ type: 'PUBLISH_SUCCESS' })
        emitUploadEvent('upload_publish', { id: publishTargetId })
        return
      }

      if (!machine.sessionId) {
        if (!publishTargetId) throw new Error('Missing publish id.')
        const publishController = registerController()
        await window.axios.post(uploadEndpoints.publish(publishTargetId), publishPayload, { signal: publishController.signal })
        unregisterController(publishController)
      } else {
        if (!publishTargetId) throw new Error('Missing publish id.')
        const publishController = registerController()
        await window.axios.post(uploadEndpoints.publish(publishTargetId), publishPayload, { signal: publishController.signal })
        unregisterController(publishController)
      }

      dispatchMachine({ type: 'PUBLISH_SUCCESS' })
      emitUploadEvent('upload_publish', { id: publishTargetId })
    } catch (error) {
      if (error?.name === 'CanceledError' || error?.code === 'ERR_CANCELED') return
      const message = error?.response?.data?.message || error?.message || 'Publish failed.'
      dispatchMachine({ type: 'ERROR', error: message })
      emitUploadEvent('upload_error', { stage: 'publish', message })
    } finally {
      publishLockRef.current = false
    }
  }, [canPublish, machine.sessionId, initialDraftId, resolvedArtworkId, metadata.title, metadata.description, registerController, unregisterController])

  const handleReset = useCallback(() => {
    clearPolling()
    abortAllRequests()
    setPrimaryFile(null)
    setScreenshots([])
    setMetadata({
      title: '',
      rootCategoryId: '',
      subCategoryId: '',
      tags: [],
      description: '',
      rightsAccepted: false,
      contentType: '',
    })
    setVisionSuggestedTags([])
    setResolvedArtworkId(() => {
      const parsed = Number(initialDraftId)
      return Number.isFinite(parsed) && parsed > 0 ? Math.floor(parsed) : null
    })
    setIsUploadLocked(false)
    hasAutoAdvancedRef.current = false
    setActiveStep(1)
    dispatchMachine({ type: 'RESET_MACHINE' })
  }, [abortAllRequests, clearPolling])

  const handleRetry = useCallback(() => {
    clearPolling()
    abortAllRequests()
    if (machine.lastAction === 'publish') {
      handlePublish()
      return
    }
    runUploadFlow()
  }, [machine.lastAction, handlePublish, runUploadFlow, clearPolling, abortAllRequests])

  const goToStep = useCallback((step) => {
    if (step < 1 || step > highestUnlockedStep) return
    setActiveStep(step)
  }, [highestUnlockedStep])

  const statusBadges = [
    { label: 'Scan OK', ok: uploadReady },
    { label: 'Preview OK', ok: Boolean(primaryPreviewUrl) || (isArchive && screenshots.length > 0) },
    { label: 'AI tags OK', ok: uploadReady },
  ]

  const renderStepContent = () => {
    if (machine.state === machineStates.complete) {
      return (
        <motion.div
          initial={prefersReducedMotion ? false : { opacity: 0, y: 6 }}
          animate={prefersReducedMotion ? {} : { opacity: 1, y: 0 }}
          transition={quickTransition}
          className="rounded-2xl border border-emerald-300/30 bg-emerald-500/8 p-7 text-emerald-100"
        >
          <motion.div
            initial={prefersReducedMotion ? false : { scale: 0.8, opacity: 0 }}
            animate={prefersReducedMotion ? {} : { scale: 1, opacity: 1 }}
            transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.24, ease: 'easeOut' }}
            className="inline-flex items-center gap-2 rounded-full border border-emerald-300/45 bg-emerald-500/15 px-3 py-1 text-xs font-medium"
          >
            <span aria-hidden="true">✓</span>
            <span>Your artwork is live 🎉</span>
          </motion.div>
          <p className="mt-3 text-sm text-emerald-100/90">You can view it now or upload another item.</p>
          <div className="mt-4 flex flex-wrap gap-2">
            <a href={resolvedArtworkId ? `/artwork/${resolvedArtworkId}` : '/'} className="rounded-lg border border-emerald-300/45 bg-emerald-400/20 px-3 py-2 text-sm font-medium text-emerald-50 hover:bg-emerald-400/30">View artwork</a>
            <button type="button" onClick={handleReset} className="rounded-lg border border-white/25 bg-white/10 px-3 py-2 text-sm text-white hover:bg-white/20">Upload another</button>
          </div>
        </motion.div>
      )
    }

    if (activeStep === 1) {
      return (
        <div className="max-w-4xl mx-auto px-4 py-6">
          <div className="bg-panel/80 backdrop-blur rounded-2xl shadow-xl shadow-black/40 ring-1 ring-white/10 p-6 space-y-5">
            <div className="rounded-xl bg-white/5 px-4 py-3 ring-1 ring-white/10">
              <h2 ref={stepHeadingRef} tabIndex={-1} className="text-lg font-semibold text-white focus:outline-none">Upload your artwork</h2>
              <p className="mt-1 text-sm text-white/65">Select your file, satisfy requirements, and complete secure upload processing.</p>
            </div>

            {fileSelectionLocked && (
              <div className="rounded-lg bg-amber-500/10 px-3 py-2 text-xs text-amber-100 ring-1 ring-amber-300/35">
                File is locked after upload. Reset to change.
              </div>
            )}

            <div className="space-y-5">
            <UploadDropzone
              title="Upload your artwork file"
              description="Drag and drop or click to browse. Validation runs immediately before upload starts."
              fileName={primaryFile?.name || ''}
              previewUrl={primaryPreviewUrl}
              fileMeta={fileMetadata}
              fileHint="Awaiting file selection"
              invalid={primaryErrors.length > 0}
              errors={primaryErrors}
              showLooksGood={Boolean(primaryFile) && primaryErrors.length === 0}
              looksGoodText="Looks good"
              locked={fileSelectionLocked}
              onPrimaryFileChange={(file) => {
                if (fileSelectionLocked) return
                setPrimaryFile(file || null)
              }}
            />

            <ScreenshotUploader
              title="Archive screenshots"
              description="We need at least 1 screenshot to generate thumbnails and analyze content."
              visible={isArchive}
              files={screenshots}
              min={1}
              max={5}
              perFileErrors={screenshotPerFileErrors}
              errors={screenshotErrors}
              invalid={isArchive && screenshotErrors.length > 0}
              showLooksGood={isArchive && screenshots.length > 0 && screenshotErrors.length === 0}
              looksGoodText="Looks good"
              onFilesChange={(nextFiles) => setScreenshots(nextFiles)}
            />

            {showProgress && (
              <UploadProgress
                title="Upload progress"
                description="Upload and processing status"
                status={machine.state === machineStates.ready_to_publish ? 'Ready' : machine.state === machineStates.uploading ? 'Uploading' : machine.state === machineStates.processing ? 'Processing' : 'Idle'}
                progress={machine.progress}
                state={machine.state}
                processingStatus={machine.processingStatus}
                isCancelling={machine.isCancelling}
                error={machine.error}
                processingLabel={processingTransparencyLabel}
                onRetry={handleRetry}
                onReset={handleReset}
              />
            )}
            </div>
          </div>
        </div>
      )
    }

    if (activeStep === 2) {
      return (
        <div className="max-w-4xl mx-auto px-4 py-6">
          <div className="bg-panel/80 backdrop-blur rounded-2xl shadow-xl shadow-black/40 ring-1 ring-white/10 p-6 space-y-5">
            <div className="rounded-xl bg-white/5 px-4 py-3 ring-1 ring-white/10">
              <h2 ref={stepHeadingRef} tabIndex={-1} className="text-lg font-semibold text-white focus:outline-none">Artwork details</h2>
              <p className="mt-1 text-sm text-white/65">Complete required metadata and rights confirmation before publishing.</p>
            </div>

            <div className="mb-6 rounded-xl border border-white/8 bg-white/4 p-4">
              <p className="text-xs uppercase tracking-wide text-white/55">Uploaded asset</p>
              <div className="mt-2 flex flex-col gap-3 md:flex-row md:items-center">
                {primaryPreviewUrl && !isArchive ? (
                  <div className="flex h-40 w-40 items-center justify-center overflow-hidden rounded-lg border border-white/50 bg-black/25">
                    <img
                      src={primaryPreviewUrl}
                      alt="Uploaded artwork thumbnail"
                      className="max-h-full max-w-full object-contain"
                      loading="lazy"
                      decoding="async"
                      width="160"
                      height="160"
                    />
                  </div>
                ) : (
                  <div className="grid h-40 w-40 place-items-center rounded-lg border border-white/15 bg-white/5 text-white/60">📦</div>
                )}
                <div className="min-w-0">
                  <p className="truncate text-sm font-medium text-white">{primaryFile?.name || 'Primary file selected'}</p>
                  <p className="text-xs text-white/60">{isArchive ? `${screenshots.length} screenshot(s)` : fileMetadata.resolution}</p>
                </div>
              </div>
            </div>

            <div className="rounded-2xl border border-white/10 bg-gradient-to-br from-white/5 via-white/0 to-white/5 p-4 sm:p-5">
              <div className="flex flex-wrap items-center justify-between gap-2">
                <div>
                  <div className="text-sm font-semibold text-white">Content type, category & subcategory</div>
                  <div className="text-xs text-white/60">Select in order: type → category → subcategory (when available).</div>
                </div>
                <span className="rounded-full border border-sky-400/40 bg-sky-400/10 px-3 py-1 text-[11px] uppercase tracking-[0.2em] text-sky-200">Type</span>
              </div>

              {Array.isArray(contentTypes) && contentTypes.length > 0 ? (
                <div className="mt-4">
                  <div className="flex gap-4 overflow-x-auto py-2 no-scrollbar">
                    {contentTypes.map((ct) => {
                      const typeValue = getContentTypeValue(ct)
                      const active = String(typeValue) === String(metadata.contentType || '')
                      const visualKey = getContentTypeVisualKey(ct)
                      const iconPath = `/gfx/mascot_${visualKey}.webp`
                      return (
                        <button
                          key={typeValue || ct.name}
                          type="button"
                          onClick={() => {
                            setMetadata((current) => ({
                              ...current,
                              contentType: String(typeValue),
                              rootCategoryId: '',
                              subCategoryId: '',
                            }))
                          }}
                          className={`group flex flex-col items-center gap-2 min-w-[104px] rounded-xl border px-3 py-2 transition transform ${active
                            ? 'border-emerald-400/70 bg-emerald-400/15 shadow-lg shadow-emerald-900/30 scale-105'
                            : 'border-white/10 bg-white/[0.03] hover:border-white/25 hover:bg-white/[0.06] hover:-translate-y-1 hover:scale-105'} focus:outline-none focus:ring-2 focus:ring-emerald-400/30`}
                          aria-pressed={active}
                        >
                          <div className="h-20 w-20 rounded-full flex items-center justify-center overflow-hidden transform transition-transform duration-150 scale-110">
                            <img
                              src={iconPath}
                              alt={`${ct.name || 'Content type'} mascot`}
                              className={`h-full w-full object-contain transition-all duration-150 ${active ? 'grayscale-0 opacity-100' : 'grayscale opacity-40 group-hover:grayscale-0 group-hover:opacity-90'}`}
                              loading="lazy"
                              decoding="async"
                              width="80"
                              height="80"
                              onError={(event) => {
                                if (event.currentTarget.src.includes('mascot_other.webp')) return
                                event.currentTarget.src = '/gfx/mascot_other.webp'
                              }}
                            />
                          </div>
                          <div className={`text-sm font-semibold ${active ? 'text-white' : 'text-white/65'}`}>{ct.name || 'Type'}</div>
                        </button>
                      )
                    })}
                  </div>
                </div>
              ) : (
                <div className="mt-4 rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white/60">
                  No content types available.
                </div>
              )}
              {metadataErrors.contentType && <p className="mt-2 text-xs text-red-200">{metadataErrors.contentType}</p>}

              <div className="mt-5 rounded-xl border border-white/10 bg-white/5 p-4">
                <div className="text-xs uppercase tracking-wide text-white/60">Category</div>
                {!metadata.contentType ? (
                  <div className="mt-2 text-sm text-white/60">Choose a content type to load categories.</div>
                ) : filteredCategoryTree.length === 0 ? (
                  <div className="mt-2 text-sm text-white/60">No categories available for this content type.</div>
                ) : (
                  <div className="mt-3 flex flex-wrap gap-2">
                    {filteredCategoryTree.map((root) => {
                      const active = String(root.id) === String(metadata.rootCategoryId || '')
                      return (
                        <button
                          key={root.id}
                          type="button"
                          onClick={() => {
                            setMetadata((current) => ({
                              ...current,
                              rootCategoryId: String(root.id),
                              subCategoryId: '',
                            }))
                          }}
                                  className={`rounded-full border px-4 py-2 text-sm transition ${active
                                    ? 'border-purple-600/90 bg-purple-700/35 text-white shadow-lg'
                                    : 'border-white/10 bg-white/5 text-white/70 hover:border-purple-300/50 hover:bg-purple-400/10'}`}
                          aria-pressed={active}
                        >
                          {root.name}
                        </button>
                      )
                    })}
                  </div>
                )}

                <div className="sr-only">
                  <label htmlFor="upload-root-category">Root category</label>
                  <select
                    id="upload-root-category"
                    value={String(metadata.rootCategoryId || '')}
                    onChange={(event) => {
                      const nextRootId = String(event.target.value || '')
                      const matchedRoot = allRootCategoryOptions.find((root) => String(root.id) === nextRootId)
                      setMetadata((current) => ({
                        ...current,
                        contentType: matchedRoot ? String(matchedRoot.contentTypeValue) : current.contentType,
                        rootCategoryId: nextRootId,
                        subCategoryId: '',
                      }))
                    }}
                  >
                    <option value="">Select root category</option>
                    {allRootCategoryOptions.map((root) => (
                      <option key={root.id} value={String(root.id)}>{root.name}</option>
                    ))}
                  </select>
                </div>
              </div>

              {requiresSubCategory && (
                <div className="mt-4 rounded-xl border border-white/10 bg-white/5 p-4">
                  <div className="text-xs uppercase tracking-wide text-white/60">Subcategory</div>
                  <div className="mt-3 flex flex-wrap gap-2">
                    {selectedRootCategory.children.map((sub) => {
                      const active = String(sub.id) === String(metadata.subCategoryId || '')
                      return (
                        <button
                          key={sub.id}
                          type="button"
                          onClick={() => {
                            setMetadata((current) => ({
                              ...current,
                              subCategoryId: String(sub.id),
                            }))
                          }}
                          className={`rounded-full border px-4 py-2 text-sm transition ${active
                            ? 'border-cyan-600/90 bg-cyan-700/35 text-white shadow-lg'
                            : 'border-white/10 bg-white/5 text-white/70 hover:border-cyan-300/50 hover:bg-cyan-400/10'}`}
                          aria-pressed={active}
                        >
                          {sub.name}
                        </button>
                      )
                    })}
                  </div>

                  <div className="sr-only">
                    <label htmlFor="upload-subcategory">Subcategory</label>
                    <select
                      id="upload-subcategory"
                      value={String(metadata.subCategoryId || '')}
                      onChange={(event) => {
                        const nextSubId = String(event.target.value || '')
                        setMetadata((current) => ({
                          ...current,
                          subCategoryId: nextSubId,
                        }))
                      }}
                    >
                      <option value="">Select subcategory</option>
                      {selectedRootCategory.children.map((sub) => (
                        <option key={sub.id} value={String(sub.id)}>{sub.name}</option>
                      ))}
                    </select>
                  </div>
                </div>
              )}

              {metadataErrors.category && <p className="mt-2 text-xs text-red-200">{metadataErrors.category}</p>}
            </div>

            <UploadSidebar
              showHeader={false}
              metadata={metadata}
              suggestedTags={mergedSuggestedTags}
              errors={metadataErrors}
              onChangeTitle={(value) => setMetadata((current) => ({ ...current, title: value }))}
              onChangeTags={(value) => setMetadata((current) => ({ ...current, tags: value }))}
              onChangeDescription={(value) => setMetadata((current) => ({ ...current, description: value }))}
              onToggleRights={(value) => setMetadata((current) => ({ ...current, rightsAccepted: Boolean(value) }))}
            />

            {resolvedArtworkId ? (
              <div className="rounded-xl border border-white/10 bg-white/[0.03] p-3 text-xs text-white/70">
                <div className="font-medium text-white/85">Vision debug</div>
                <div className="mt-1">
                  enabled: {String(visionDebug.enabled)} · queue: {visionDebug.queueConnection || 'n/a'} · ai tags: {visionDebug.aiTagCount} · total tags: {visionDebug.totalTagCount}
                </div>
                <div className="mt-1">
                  queued jobs: {visionDebug.queuedJobs} · failed jobs: {visionDebug.failedJobs} · trigger sent: {String(visionDebug.triggered)}
                </div>
                {visionDebug.lastError ? <div className="mt-1 text-red-300">error: {visionDebug.lastError}</div> : null}
              </div>
            ) : null}
          </div>
        </div>
      )
    }

    return (
      <div className="max-w-4xl mx-auto px-4 py-6">
        <div className="bg-panel/80 backdrop-blur rounded-2xl shadow-xl shadow-black/40 ring-1 ring-white/10 p-6 space-y-5">
          <div className="rounded-xl bg-white/5 px-4 py-3 ring-1 ring-white/10">
            <h2 ref={stepHeadingRef} tabIndex={-1} className="text-lg font-semibold text-white focus:outline-none">Review & publish</h2>
            <p className="mt-1 text-sm text-white/65">Review your submission and publish when all checks are ready.</p>
          </div>

          <div className="rounded-xl border border-white/8 bg-white/4 p-5">
            <div className="flex flex-col gap-4 md:flex-row">
              <div className="w-40">
                {primaryPreviewUrl && !isArchive ? (
                  <div className="flex h-40 w-40 items-center justify-center overflow-hidden rounded-lg border border-white/50 bg-black/25">
                    <img
                      src={primaryPreviewUrl}
                      alt="Review preview"
                      className="max-h-full max-w-full object-contain"
                      loading="lazy"
                      decoding="async"
                      width="160"
                      height="160"
                    />
                  </div>
                ) : (
                  <div className="grid h-40 w-40 place-items-center rounded-lg border border-white/50 bg-black/25 text-white/60">Archive</div>
                )}
              </div>
            <div className="min-w-0 flex-1 space-y-2">
              <p className="text-base font-semibold text-white">{metadata.title || 'Untitled artwork'}</p>
              <p className="text-sm text-white/75">
                Category: {metadata.rootCategoryId || '—'} / {metadata.subCategoryId || '—'}
              </p>
              <p className="text-sm text-white/75">Tags: {(metadata.tags || []).length}</p>
              <div className="flex flex-wrap gap-2">
                <span className={`rounded-full border px-2.5 py-1 text-xs ${metadata.rightsAccepted ? 'border-emerald-300/45 bg-emerald-500/15 text-emerald-100' : 'border-white/20 bg-white/5 text-white/70'}`}>
                  {metadata.rightsAccepted ? '✓ Rights confirmed' : 'Rights not confirmed'}
                </span>
                <span className={`rounded-full border px-2.5 py-1 text-xs ${canPublish ? 'border-emerald-300/45 bg-emerald-500/15 text-emerald-100' : 'border-white/20 bg-white/5 text-white/70'}`}>
                  {canPublish ? 'Ready to publish' : 'Waiting for requirements'}
                </span>
              </div>
              {metadata.description && <p className="line-clamp-3 text-sm text-white/70">{metadata.description}</p>}
            </div>
          </div>

          <div className="mt-4 flex flex-wrap gap-2">
            {statusBadges.map((badge) => (
              <span key={badge.label} className={`rounded-full border px-2.5 py-1 text-xs ${badge.ok ? 'border-emerald-300/45 bg-emerald-500/15 text-emerald-100' : 'border-white/20 bg-white/5 text-white/60'}`}>
                {badge.ok ? '✓' : '•'} {badge.label}
              </span>
            ))}
          </div>
        </div>
      </div>
      </div>
    )
  }

  return (
    <section ref={stepContentRef} className="space-y-8 pb-24 text-white lg:pb-0" data-is-archive={isArchive ? 'true' : 'false'}>
      {showRestoredBanner && (
        <div className="rounded-xl border border-sky-300/30 bg-sky-500/10 px-4 py-2 text-sm text-sky-100">
          <div className="flex items-center justify-between gap-3">
            <span>Draft restored. Continue from your previous upload session.</span>
            <button
              type="button"
              onClick={() => setShowRestoredBanner(false)}
              className="rounded-md border border-sky-200/40 bg-sky-500/15 px-2 py-1 text-xs text-sky-100 hover:bg-sky-500/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70"
            >
              Dismiss
            </button>
          </div>
        </div>
      )}

      <UploadStepper
        steps={wizardSteps}
        activeStep={activeStep}
        highestUnlockedStep={highestUnlockedStep}
        onStepClick={goToStep}
      />

      <div className="-mt-4 rounded-full bg-white/8 p-0.5">
        <motion.div
          className="h-1.5 rounded-full bg-gradient-to-r from-sky-400/90 via-cyan-300/90 to-emerald-300/90"
          animate={{ width: `${stepProgressPercent}%` }}
          transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.24, ease: 'easeOut' }}
        />
      </div>

      <AnimatePresence mode="wait" initial={false}>
        <motion.div
          key={`wizard-step-${activeStep}`}
          initial={prefersReducedMotion ? false : { opacity: 0, y: 6 }}
          animate={prefersReducedMotion ? {} : { opacity: 1, y: 0 }}
          exit={prefersReducedMotion ? {} : { opacity: 0, y: -6 }}
          transition={quickTransition}
        >
          {renderStepContent()}
        </motion.div>
      </AnimatePresence>

      <UploadActions
        step={activeStep}
        canStart={canStartUpload && [machineStates.idle, machineStates.error, machineStates.cancelled].includes(machine.state)}
        canContinue={detailsValid}
        canPublish={canPublish}
        canGoBack={activeStep > 1}
        canReset={Boolean(primaryFile || screenshots.length || metadata.title || metadata.description || metadata.tags.length)}
        canCancel={activeStep === 1 && [machineStates.initializing, machineStates.uploading, machineStates.finishing, machineStates.processing].includes(machine.state)}
        canRetry={machine.state === machineStates.error}
        isUploading={machine.state === machineStates.uploading || machine.state === machineStates.initializing}
        isProcessing={machine.state === machineStates.processing || machine.state === machineStates.finishing}
        isPublishing={machine.state === machineStates.publishing}
        isCancelling={machine.isCancelling}
        disableReason={activeStep === 1 ? (validationErrors[0] || machine.error || 'Complete upload requirements first.') : activeStep === 2 ? (metadataErrors.title || metadataErrors.contentType || metadataErrors.category || metadataErrors.rights || 'Complete required metadata.') : (machine.error || 'Publish is available when upload is ready and rights are confirmed.')}
        onStart={runUploadFlow}
        onContinue={() => detailsValid && setActiveStep(3)}
        onPublish={handlePublish}
        onBack={() => setActiveStep((current) => Math.max(1, current - 1))}
        onCancel={handleCancel}
        onReset={handleReset}
        onRetry={handleRetry}
        onSaveDraft={() => {}}
        showSaveDraft={activeStep === 2}
        resetLabel={fileSelectionLocked ? 'Reset upload' : 'Reset'}
        mobileSticky
      />
    </section>
  )
}

function isValidForUpload(primaryFile, primaryErrors, isArchive, screenshotErrors) {
  if (!primaryFile) return false
  if (primaryErrors.length > 0) return false
  if (isArchive && screenshotErrors.length > 0) return false
  return true
}