import React, { useState } 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, onOpenViewer, hasPrev, hasNext, onPrev, onNext }) {
  const [isLoaded, setIsLoaded] = useState(false)

  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 srcSet = `${md} 640w, ${lg} 1280w, ${xl} 1920w`

  return (
    <figure className="w-full">
      <div className="relative mx-auto w-full max-w-[1280px]">

        {/* Outer flex row: left arrow | image | right arrow */}
        <div className="flex items-center gap-2">

          {/* Prev arrow — outside the picture */}
          <div className="flex w-12 shrink-0 justify-center">
            {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 hover:bg-white/20 hover:text-white focus:bg-white/20 focus:text-white transition-colors duration-150"
              >
                <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>

          {/* Image area */}
          <div className="relative min-w-0 flex-1">
            {hasRealArtworkImage && (
              <div className="absolute inset-0 -z-10" />
            )}

            <div
              className={`relative w-full aspect-video overflow-hidden ${onOpenViewer ? 'cursor-zoom-in' : ''}`}
              onClick={onOpenViewer}
              role={onOpenViewer ? 'button' : undefined}
              aria-label={onOpenViewer ? 'View fullscreen' : undefined}
              tabIndex={onOpenViewer ? 0 : undefined}
              onKeyDown={onOpenViewer ? (e) => e.key === 'Enter' && onOpenViewer() : undefined}
            >
              <img
                src={md}
                alt={artwork?.title ?? 'Artwork'}
                className="absolute inset-0 h-full w-full object-contain"
                loading="eager"
                decoding="async"
              />

              <img
                src={lg}
                srcSet={srcSet}
                sizes="(min-width: 1280px) 1280px, (min-width: 768px) 90vw, 100vw"
                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"
                onLoad={() => setIsLoaded(true)}
                onError={(event) => {
                  event.currentTarget.src = FALLBACK_LG
                }}
              />

              {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 backdrop-blur-sm ring-1 ring-white/15 opacity-0 hover:opacity-100 focus:opacity-100 [div:hover_&]:opacity-100 transition-opacity duration-150 shadow-lg"
                >
                  <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>

          {/* Next arrow — outside the picture */}
          <div className="flex w-12 shrink-0 justify-center">
            {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 hover:bg-white/20 hover:text-white focus:bg-white/20 focus:text-white transition-colors duration-150"
              >
                <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>
      </div>
    </figure>
  )
}