function FancyLightbox({ images, activeIndex, onClose, ratingInfo, refreshRatings }) {
  const [index, setIndex] = React.useState(activeIndex);
  const [isClosing, setIsClosing] = React.useState(false);
  const [touchStartX, setTouchStartX] = React.useState(null);
  const [isPortrait, setIsPortrait] = React.useState(false);

  // Sync internal index when activeIndex changes
  React.useEffect(() => {
    setIndex(activeIndex);
  }, [activeIndex]);

  const image = images[index];

  const handleClose = () => {
    setIsClosing(true);
    setTimeout(() => {
      onClose();
      setIsClosing(false);
    }, 300);
  };

  const handlePrev = () => setIndex(i => (i - 1 + images.length) % images.length);
  const handleNext = () => setIndex(i => (i + 1) % images.length);

  const handleTouchStart = e => setTouchStartX(e.changedTouches[0].clientX);
  const handleTouchEnd = e => {
    if (touchStartX === null) return;
    const endX = e.changedTouches[0].clientX;
    const diffX = touchStartX - endX;
    if (Math.abs(diffX) > 50) {
      diffX > 0 ? handleNext() : handlePrev();
    }
    setTouchStartX(null);
  };

  React.useEffect(() => {
    const handleKey = e => {
      if (e.key === 'Escape') handleClose();
      if (e.key === 'ArrowRight') handleNext();
      if (e.key === 'ArrowLeft') handlePrev();
    };
    document.addEventListener('keydown', handleKey);
    return () => document.removeEventListener('keydown', handleKey);
  }, [images.length]);

  React.useEffect(() => {
    const img = new Image();
    img.src = image.src;
    img.onload = () => setIsPortrait(img.height > img.width);
  }, [image]);

  return (
    <div
      className={`fixed inset-0 bg-black bg-opacity-60 z-50 flex items-center justify-center transition-opacity duration-300 ${isClosing ? 'opacity-0' : 'opacity-100'}`}
      onClick={handleClose}
    >
      <div
        className="relative w-full max-h-[90vh] overflow-y-auto animate-fadeZoom"
        style={{ maxWidth: '50rem', transition: 'all 0.3s ease' }}
        onClick={e => e.stopPropagation()}
        onTouchStart={handleTouchStart}
        onTouchEnd={handleTouchEnd}
      >
        {/* Card Container */}
        <div className="bg-gray-800 p-6 rounded-2xl shadow-xl" style={{ backgroundColor: '#2d2d2d' }}>
          <button
            onClick={handleClose}
            className="absolute top-3 right-3 bg-red-600 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-700 transition z-20 shadow-md"
            title="Close"
          >
            <i className="fas fa-times text-xs" />
          </button>

          {/* 📷 Image */}
          <div className="flex justify-center">
            <img
              src={image.src}
              alt={image.title}
              className={`max-w-full object-contain rounded shadow ${isPortrait ? 'max-h-[60vh]' : 'max-h-[70vh]'}`}
            />
          </div>

          {/* ℹ️ Info */}
          <div className="mt-4 text-white space-y-1 text-center">
            <h2 className="text-xl font-semibold">{image.title}</h2>
            <p className="text-sm text-gray-300">{image.description}</p>
            <p className="text-xs text-gray-400">
              Uploaded by: <span className="text-blue-400">{image.uploader}</span>
            </p>
          </div>

          {/* ⭐ Rating */}
          <div className="mt-4 px-4 pb-4 flex items-center justify-center space-x-3">
            <MicRating
              initial={ratingInfo.avg}
              imageId={image.id}
              userCallsign={window.USER.callsign}
              onRate={refreshRatings}
              displayOnly={!window.USER.callsign}
            />
            <span className="text-gray-400">
              {ratingInfo.avg.toFixed(1)} average from {ratingInfo.votes} votes
            </span>
          </div>
        </div>

        {/* ⬅ ➡ Navigation */}
        <div className="absolute top-1/2 left-4 transform -translate-y-1/2">
          <button onClick={handlePrev} className="text-white hover:text-gray-300 text-3xl">
            ‹
          </button>
        </div>
        <div className="absolute top-1/2 right-4 transform -translate-y-1/2">
          <button onClick={handleNext} className="text-white hover:text-gray-300 text-3xl">
            ›
          </button>
        </div>

        {/* ⬇ Download (disabled/hidden) */}
        <div className="absolute bottom-4 right-4 hidden pointer-events-none">
          <a
            href={image.src}
            download
            className="bg-gray-800 text-white px-3 py-1 rounded hover:bg-gray-700 text-sm"
          >
            ⬇ Download
          </a>
        </div>
      </div>
    </div>
  );
}