import React, { useState, useCallback, useEffect } from 'react'

const FALLBACK_MD = 'https://files.skinbase.org/default/missing_md.webp'
const FALLBACK_LG = 'https://files.skinbase.org/default/missing_lg.webp'
const FALLBACK_XL = 'https://files.skinbase.org/default/missing_xl.webp'

export default function ArtworkHero({ artwork, presentMd, presentLg, presentXl, mediaWidth = null, mediaHeight = null, mediaKey = 'cover', onOpenViewer, hasPrev, hasNext, onPrev, onNext }) {
  const [isLoaded, setIsLoaded] = useState(false)
  const [mainImageMode, setMainImageMode] = useState('primary')
  const [previewImageMode, setPreviewImageMode] = useState('primary')
  const [showBackdrop, setShowBackdrop] = useState(true)

  const mdSource = presentMd?.url || artwork?.thumbs?.md?.url || null
  const lgSource = presentLg?.url || artwork?.thumbs?.lg?.url || null
  const xlSource = presentXl?.url || artwork?.thumbs?.xl?.url || null

  const md = mdSource || FALLBACK_MD
  const lg = lgSource || FALLBACK_LG
  const xl = xlSource || FALLBACK_XL

  const hasRealArtworkImage = Boolean(mdSource || lgSource || xlSource)
  const blurBackdropSrc = mdSource || lgSource || xlSource || null
  const primaryMainSrc = lgSource || xlSource || mdSource || FALLBACK_LG
  const primaryPreviewSrc = mdSource || lgSource || xlSource || FALLBACK_MD
  const srcSet = [
    mdSource ? `${mdSource} 640w` : null,
    lgSource ? `${lgSource} 1280w` : null,
    xlSource ? `${xlSource} 1920w` : null,
  ].filter(Boolean).join(', ')
  const resolvedMainSrc = mainImageMode === 'fallback'
    ? FALLBACK_LG
    : (mainImageMode === 'hidden' ? null : primaryMainSrc)
  const resolvedPreviewSrc = previewImageMode === 'fallback'
    ? FALLBACK_MD
    : (previewImageMode === 'hidden' ? null : primaryPreviewSrc)

  const dbWidth = Number(mediaWidth ?? artwork?.width)
  const dbHeight = Number(mediaHeight ?? artwork?.height)
  const hasDbDims = dbWidth > 0 && dbHeight > 0

  // Natural dimensions — seeded from DB if available, otherwise probed from
  // the xl thumbnail (largest available, never upscaled past the original).
  const [naturalDims, setNaturalDims] = useState(
    hasDbDims ? { w: dbWidth, h: dbHeight } : null
  )

  useEffect(() => {
    setIsLoaded(false)
    setMainImageMode('primary')
    setPreviewImageMode('primary')
    setShowBackdrop(true)

    if (hasDbDims) {
      setNaturalDims({ w: dbWidth, h: dbHeight })
      return
    }

    setNaturalDims(null)
  }, [mediaKey, hasDbDims, dbWidth, dbHeight])

  // Probe the xl image to discover real dimensions when DB has none
  useEffect(() => {
    if (naturalDims || !xlSource) return
    const img = new Image()
    img.onload = () => {
      if (img.naturalWidth > 0 && img.naturalHeight > 0) {
        setNaturalDims({ w: img.naturalWidth, h: img.naturalHeight })
      }
    }
    img.onerror = null
    img.src = xlSource
  }, [xlSource, naturalDims])

  const aspectRatio = naturalDims ? `${naturalDims.w} / ${naturalDims.h}` : '16 / 9'

  return (
    <figure className="relative w-full overflow-hidden rounded-[2rem] border border-white/10 bg-gradient-to-b from-nova-950 via-nova-900 to-nova-900 p-2 shadow-[0_35px_90px_-35px_rgba(15,23,36,0.9)] sm:p-4">
      {blurBackdropSrc && showBackdrop && (
        <>
          <img
            src={blurBackdropSrc}
            alt=""
            aria-hidden="true"
            className="pointer-events-none absolute inset-0 h-full w-full scale-110 object-cover opacity-30 blur-3xl"
            loading="eager"
            decoding="async"
            fetchPriority="high"
            onError={(event) => {
              event.currentTarget.onerror = null
              setShowBackdrop(false)
            }}
          />
          <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-nova-950/55 via-nova-900/40 to-nova-950/70" />
          <div className="pointer-events-none absolute inset-0 backdrop-blur-sm" />
        </>
      )}

      <div className="relative mx-auto flex w-full max-w-[1400px] items-center gap-2 sm:gap-4">
        <div className="hidden w-12 shrink-0 justify-center sm:flex">
          {hasPrev && (
            <button
              type="button"
              aria-label="Previous artwork"
              onClick={() => onPrev?.()}
              className="flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white/70 ring-1 ring-white/15 shadow-lg transition-colors duration-150 hover:bg-white/20 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
            >
              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
              </svg>
            </button>
          )}
        </div>

        <div className="relative min-w-0 flex-1">
          <div
            className={`relative mx-auto w-full max-h-[70vh] overflow-hidden transition-[max-width] duration-300 ${onOpenViewer ? 'cursor-zoom-in' : ''}`}
            style={{ aspectRatio, maxWidth: naturalDims ? `${naturalDims.w}px` : undefined }}
            onClick={onOpenViewer}
            role={onOpenViewer ? 'button' : undefined}
            aria-label={onOpenViewer ? 'Open artwork lightbox' : undefined}
            tabIndex={onOpenViewer ? 0 : undefined}
            onKeyDown={onOpenViewer ? (e) => {
              if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault()
                onOpenViewer()
              }
            } : undefined}
          >
            {resolvedPreviewSrc ? (
              <img
                src={resolvedPreviewSrc}
                alt={artwork?.title ?? 'Artwork'}
                className="absolute inset-0 h-full w-full object-contain rounded-xl"
                loading="eager"
                decoding="async"
                fetchPriority="high"
                onError={(event) => {
                  event.currentTarget.onerror = null

                  if (previewImageMode === 'primary') {
                    setPreviewImageMode('fallback')
                    return
                  }

                  setPreviewImageMode('hidden')
                }}
              />
            ) : null}

            {resolvedMainSrc ? (
              <img
                src={resolvedMainSrc}
                srcSet={mainImageMode === 'primary' && srcSet !== '' ? srcSet : undefined}
                sizes={mainImageMode === 'primary' && srcSet !== '' ? '(min-width: 1536px) 1400px, (min-width: 1024px) 92vw, 100vw' : undefined}
                alt={artwork?.title ?? 'Artwork'}
                className={`absolute inset-0 h-full w-full object-contain transition-opacity duration-500 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}
                loading="eager"
                decoding="async"
                fetchPriority="high"
                onLoad={() => setIsLoaded(true)}
                onError={(event) => {
                  event.currentTarget.onerror = null

                  if (mainImageMode === 'primary') {
                    setMainImageMode('fallback')
                    setIsLoaded(false)
                    return
                  }

                  setMainImageMode('hidden')
                  setIsLoaded(true)
                }}
              />
            ) : null}

            {onOpenViewer && (
              <button
                type="button"
                aria-label="View fullscreen"
                onClick={(e) => { e.stopPropagation(); onOpenViewer(); }}
                className="absolute bottom-3 right-3 flex h-9 w-9 items-center justify-center rounded-full bg-black/50 text-white/80 shadow-lg ring-1 ring-white/15 backdrop-blur-sm opacity-0 transition-opacity duration-150 hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:opacity-100 [div:hover_&]:opacity-100"
              >
                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
                </svg>
              </button>
            )}
          </div>

          {hasRealArtworkImage && (
            <div className="pointer-events-none absolute inset-x-8 -bottom-5 h-10 rounded-full bg-accent/25 blur-2xl" />
          )}
        </div>

        <div className="hidden w-12 shrink-0 justify-center sm:flex">
          {hasNext && (
            <button
              type="button"
              aria-label="Next artwork"
              onClick={() => onNext?.()}
              className="flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white/70 ring-1 ring-white/15 shadow-lg transition-colors duration-150 hover:bg-white/20 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
            >
              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
              </svg>
            </button>
          )}
        </div>
      </div>
    </figure>
  )
}