goodgo-platform/apps/web/components/listings/image-gallery.tsx

'use client';

import Image from 'next/image';
import * as React from 'react';
import { ImageLightbox } from '@/components/listings/image-lightbox';
import { shimmerBlurDataURL } from '@/lib/image-blur';
import type { PropertyMedia } from '@/lib/listings-api';
import { cn } from '@/lib/utils';

interface ImageGalleryProps {
  media: PropertyMedia[];
  className?: string;
}

export function ImageGallery({ media, className }: ImageGalleryProps) {
  const images = media.filter((m) => m.type === 'image').sort((a, b) => a.order - b.order);
  const [selectedIndex, setSelectedIndex] = React.useState(0);
  const [lightboxOpen, setLightboxOpen] = React.useState(false);

  const openLightbox = React.useCallback((index: number) => {
    setSelectedIndex(index);
    setLightboxOpen(true);
  }, []);

  if (images.length === 0) {
    return (
      <div
        className={cn(
          'flex aspect-video items-center justify-center rounded-lg bg-muted text-muted-foreground',
          className,
        )}
      >
        Chưa có hình ảnh
      </div>
    );
  }

  return (
    <div className={cn('space-y-3', className)}>
      {/* Main image */}
      <div className="relative aspect-video overflow-hidden rounded-lg bg-muted">
        <button
          onClick={() => openLightbox(selectedIndex)}
          className="absolute inset-0 z-10 cursor-zoom-in"
          aria-label="Xem ảnh toàn màn hình"
        />
        <Image
          src={images[selectedIndex]?.url ?? ''}
          alt={images[selectedIndex]?.caption || `Ảnh ${selectedIndex + 1}`}
          fill
          sizes="(max-width: 640px) 100vw, 50vw"
          className="object-cover"
          priority={selectedIndex === 0}
          placeholder="blur"
          blurDataURL={shimmerBlurDataURL()}
        />
        {images.length > 1 && (
          <>
            <button
              onClick={(e) => {
                e.stopPropagation();
                setSelectedIndex((i) => (i > 0 ? i - 1 : images.length - 1));
              }}
              className="absolute left-2 top-1/2 z-20 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
              aria-label="Ảnh trước"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            </button>
            <button
              onClick={(e) => {
                e.stopPropagation();
                setSelectedIndex((i) => (i < images.length - 1 ? i + 1 : 0));
              }}
              className="absolute right-2 top-1/2 z-20 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
              aria-label="Ảnh tiếp"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </button>
          </>
        )}
        <div className="absolute bottom-2 right-2 z-20 rounded bg-black/60 px-2 py-1 text-xs text-white">
          {selectedIndex + 1} / {images.length}
        </div>
        {/* Expand hint icon */}
        <div className="absolute bottom-2 left-2 z-20 flex items-center gap-1 rounded bg-black/60 px-2 py-1 text-xs text-white">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M15 3h6v6" />
            <path d="M9 21H3v-6" />
            <path d="m21 3-7 7" />
            <path d="m3 21 7-7" />
          </svg>
          Xem toàn màn hình
        </div>
      </div>

      {/* Thumbnails */}
      {images.length > 1 && (
        <div className="flex gap-2 overflow-x-auto pb-1">
          {images.map((img, index) => (
            <button
              key={img.id}
              onClick={() => setSelectedIndex(index)}
              onDoubleClick={() => openLightbox(index)}
              className={cn(
                'relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border-2 transition-colors',
                index === selectedIndex ? 'border-primary' : 'border-transparent opacity-70 hover:opacity-100',
              )}
            >
              <Image
                src={img.url}
                alt={img.caption || `Thumbnail ${index + 1}`}
                fill
                sizes="64px"
                className="object-cover"
              />
            </button>
          ))}
        </div>
      )}

      {/* Lightbox */}
      <ImageLightbox
        images={images}
        initialIndex={selectedIndex}
        open={lightboxOpen}
        onClose={() => setLightboxOpen(false)}
      />
    </div>
  );
}