/**
 * ArtworkViewer
 *
 * Fullscreen image modal. Opens on image click or keyboard F.
 * Controls: ESC to close, click outside to close.
 */
import React, { useEffect, useRef } from 'react';

export default function ArtworkViewer({ isOpen, onClose, artwork, presentLg, presentXl }) {
  const dialogRef = useRef(null);

  // Resolve best quality source
  const imgSrc =
    presentXl?.url ||
    presentLg?.url ||
    artwork?.thumbs?.xl?.url ||
    artwork?.thumbs?.lg?.url ||
    artwork?.thumb ||
    null;

  // ESC to close
  useEffect(() => {
    if (!isOpen) return;
    function onKey(e) {
      if (e.key === 'Escape') onClose();
    }
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [isOpen, onClose]);

  // Lock scroll while open
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
      // Focus the dialog for accessibility
      requestAnimationFrame(() => dialogRef.current?.focus());
    } else {
      document.body.style.overflow = '';
    }
    return () => {
      document.body.style.overflow = '';
    };
  }, [isOpen]);

  if (!isOpen || !imgSrc) return null;

  return (
    <div
      ref={dialogRef}
      role="dialog"
      aria-modal="true"
      aria-label="Fullscreen artwork viewer"
      tabIndex={-1}
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-sm outline-none"
      onClick={onClose}
    >
      {/* Close button */}
      <button
        className="absolute right-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-black/60 text-white/70 ring-1 ring-white/15 transition-colors hover:bg-black/80 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
        onClick={onClose}
        aria-label="Close viewer (Esc)"
        type="button"
      >
        <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>

      {/* Image — stopPropagation so clicking image doesn't close modal */}
      <img
        src={imgSrc}
        alt={artwork?.title ?? 'Artwork'}
        className="max-h-[90vh] max-w-[90vw] rounded-xl object-contain shadow-2xl shadow-black/60 select-none"
        onClick={(e) => e.stopPropagation()}
        draggable={false}
        loading="eager"
        decoding="async"
      />

      {/* Title / author footer */}
      {artwork?.title && (
        <div
          className="absolute bottom-5 left-1/2 -translate-x-1/2 max-w-[70vw] truncate rounded-lg bg-black/65 px-4 py-2 text-center text-sm text-white backdrop-blur-sm"
          onClick={(e) => e.stopPropagation()}
        >
          {artwork.title}
        </div>
      )}

      {/* ESC hint */}
      <span className="pointer-events-none absolute bottom-5 right-5 text-xs text-white/30 select-none">
        ESC to close
      </span>
    </div>
  );
}