ProgettoInterceptoCasaDellaScuola/components/PublicGrid.tsx

'use client';
import { useState, useEffect, useCallback, useRef } from 'react';
import { Card, MediaItem } from '@/types';

const isVideoUrl = (url: string) => /\.(mp4|webm|mov|m4v|ogv)(\?|$)/i.test(url);

function MediaCarousel({
  items,
  onMediaClick,
}: {
  items: MediaItem[];
  onMediaClick?: (index: number) => void;
}) {
  const [current, setCurrent] = useState(0);
  const [playing, setPlaying] = useState<Set<number>>(new Set());
  const touchStartX = useRef<number | null>(null);
  const videoRefs = useRef<Record<number, HTMLVideoElement | null>>({});

  const markPlaying = (i: number) => setPlaying(p => { const n = new Set(p); n.add(i); return n; });
  const markPaused = (i: number) => setPlaying(p => { const n = new Set(p); n.delete(i); return n; });

  const applyVolume = (v: HTMLVideoElement, item: MediaItem) => {
    v.muted = !!item.muted;
  };

  const togglePlay = (i: number) => {
    const v = videoRefs.current[i];
    if (!v) return;
    if (v.paused) {
      const item = items[i];
      if (item) applyVolume(v, item);
      v.play().catch(() => {});
    } else {
      v.pause();
    }
  };

  const prev = useCallback(() => setCurrent(i => (i - 1 + items.length) % items.length), [items.length]);
  const next = useCallback(() => setCurrent(i => (i + 1) % items.length), [items.length]);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'ArrowLeft') prev();
      if (e.key === 'ArrowRight') next();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [prev, next]);

  useEffect(() => { setCurrent(0); }, [items]);

  // Pause non-current videos; autoplay current if flagged
  useEffect(() => {
    Object.entries(videoRefs.current).forEach(([key, vid]) => {
      if (!vid) return;
      const idx = parseInt(key, 10);
      if (idx !== current) { vid.pause(); return; }
      const item = items[idx];
      if (item && isVideoUrl(item.url) && item.autoplay) {
        applyVolume(vid, item);
        vid.play().catch(() => {
          // Browser blocked unmuted autoplay — fall back to muted.
          vid.muted = true;
          vid.play().catch(() => {});
        });
      }
    });
  }, [current, items]);

  const onTouchStart = (e: React.TouchEvent) => { touchStartX.current = e.touches[0].clientX; };
  const onTouchEnd = (e: React.TouchEvent) => {
    if (touchStartX.current === null) return;
    const delta = e.changedTouches[0].clientX - touchStartX.current;
    if (Math.abs(delta) > 50) delta < 0 ? next() : prev();
    touchStartX.current = null;
  };

  if (items.length === 0) {
    return <div className="h-72 w-full bg-gray-100 flex items-center justify-center text-gray-400 rounded-t-2xl">No Image</div>;
  }

  return (
    <div
      className="relative h-72 w-full bg-black overflow-hidden rounded-t-2xl select-none"
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
    >
      {items.map((item, i) => {
        const isActive = i === current;
        const video = isVideoUrl(item.url);
        return (
          <div
            key={item.url + i}
            className={`absolute inset-0 transition-opacity duration-300 ${isActive ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
          >
            {video ? (
              <div
                className="relative w-full h-full cursor-pointer"
                onClick={(e) => { e.stopPropagation(); togglePlay(i); }}
              >
                <video
                  ref={el => { videoRefs.current[i] = el; }}
                  src={item.url}
                  className="w-full h-full object-contain bg-black pointer-events-none"
                  playsInline
                  preload="metadata"
                  onLoadedMetadata={(e) => applyVolume(e.currentTarget, item)}
                  onPlay={() => markPlaying(i)}
                  onPause={() => markPaused(i)}
                  onEnded={() => markPaused(i)}
                />
                {/* Custom play overlay (shown when paused) */}
                {!playing.has(i) && (
                  <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                    <span className="bg-black/60 text-white w-20 h-20 rounded-full flex items-center justify-center text-4xl shadow-2xl pl-1">▶</span>
                  </div>
                )}
                {/* Custom expand button */}
                <button
                  onClick={(e) => { e.stopPropagation(); onMediaClick?.(i); }}
                  className="absolute bottom-3 right-3 bg-black/60 hover:bg-black/80 text-white w-9 h-9 rounded-full flex items-center justify-center transition-colors shadow-lg z-10"
                  title="Expand fullscreen"
                  aria-label="Expand fullscreen"
                >
                  <svg viewBox="0 0 24 24" className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" />
                  </svg>
                </button>
              </div>
            ) : (
              <img
                src={item.url}
                alt=""
                className="w-full h-full object-cover cursor-zoom-in"
                onClick={() => onMediaClick?.(i)}
                title="Click to view fullscreen"
              />
            )}
          </div>
        );
      })}

      {items.length > 1 && (
        <>
          <button
            onClick={(e) => { e.stopPropagation(); prev(); }}
            className="absolute left-3 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/80 text-white w-9 h-9 rounded-full flex items-center justify-center transition-colors shadow-lg z-10"
            aria-label="Previous"
          >‹</button>
          <button
            onClick={(e) => { e.stopPropagation(); next(); }}
            className="absolute right-3 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/80 text-white w-9 h-9 rounded-full flex items-center justify-center transition-colors shadow-lg z-10"
            aria-label="Next"
          >›</button>

          <div className="absolute bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-1.5 z-10">
            {items.map((_, i) => (
              <button
                key={i}
                onClick={(e) => { e.stopPropagation(); setCurrent(i); }}
                className={`rounded-full transition-all duration-200 ${i === current ? 'w-5 h-2 bg-white' : 'w-2 h-2 bg-white/50 hover:bg-white/80'}`}
                aria-label={`Go to slide ${i + 1}`}
              />
            ))}
          </div>

          <div className="absolute top-3 left-3 bg-black/60 text-white text-xs font-semibold px-2 py-0.5 rounded-full z-10 flex items-center gap-1">
            <span>⊞</span>
            <span>{current + 1} / {items.length}</span>
          </div>
        </>
      )}
    </div>
  );
}

function FullscreenViewer({
  items,
  startIndex,
  onClose,
}: {
  items: MediaItem[];
  startIndex: number;
  onClose: () => void;
}) {
  const [current, setCurrent] = useState(startIndex);
  const [playing, setPlaying] = useState<Set<number>>(new Set());
  const [zoom, setZoom] = useState(1);
  const [pan, setPan] = useState({ x: 0, y: 0 });
  const touchStartX = useRef<number | null>(null);
  const videoRefs = useRef<Record<number, HTMLVideoElement | null>>({});
  const containerRef = useRef<HTMLDivElement | null>(null);
  const dragRef = useRef<{ sx: number; sy: number; px: number; py: number; moved: boolean } | null>(null);

  const markPlaying = (i: number) => setPlaying(p => { const n = new Set(p); n.add(i); return n; });
  const markPaused = (i: number) => setPlaying(p => { const n = new Set(p); n.delete(i); return n; });

  const applyVolume = (v: HTMLVideoElement, item: MediaItem) => {
    v.muted = !!item.muted;
  };

  const togglePlay = (i: number) => {
    const v = videoRefs.current[i];
    if (!v) return;
    if (v.paused) {
      const item = items[i];
      if (item) applyVolume(v, item);
      v.play().catch(() => {});
    } else {
      v.pause();
    }
  };

  const onImgClick = (e: React.MouseEvent<HTMLImageElement>) => {
    if (dragRef.current?.moved) {
      dragRef.current = null;
      return;
    }
    dragRef.current = null;
    if (zoom > 1) {
      setZoom(1);
      setPan({ x: 0, y: 0 });
    } else {
      const r = e.currentTarget.getBoundingClientRect();
      const ox = e.clientX - r.left - r.width / 2;
      const oy = e.clientY - r.top - r.height / 2;
      setZoom(2);
      setPan({ x: -2 * ox, y: -2 * oy });
    }
  };

  const onImgPointerDown = (e: React.PointerEvent<HTMLImageElement>) => {
    if (zoom <= 1) return;
    dragRef.current = { sx: e.clientX, sy: e.clientY, px: pan.x, py: pan.y, moved: false };
    e.currentTarget.setPointerCapture?.(e.pointerId);
  };

  const onImgPointerMove = (e: React.PointerEvent<HTMLImageElement>) => {
    if (!dragRef.current) return;
    const dx = e.clientX - dragRef.current.sx;
    const dy = e.clientY - dragRef.current.sy;
    if (Math.hypot(dx, dy) > 4) dragRef.current.moved = true;
    setPan({ x: dragRef.current.px + dx, y: dragRef.current.py + dy });
  };

  const prev = useCallback(() => setCurrent(i => (i - 1 + items.length) % items.length), [items.length]);
  const next = useCallback(() => setCurrent(i => (i + 1) % items.length), [items.length]);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
      else if (e.key === 'ArrowLeft') prev();
      else if (e.key === 'ArrowRight') next();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [prev, next, onClose]);

  // Pause non-current videos in fullscreen
  useEffect(() => {
    Object.entries(videoRefs.current).forEach(([key, vid]) => {
      if (!vid) return;
      const idx = parseInt(key, 10);
      if (idx !== current) { vid.pause(); return; }
      const item = items[idx];
      if (item && isVideoUrl(item.url) && item.autoplay) {
        applyVolume(vid, item);
        vid.play().catch(() => {
          vid.muted = true;
          vid.play().catch(() => {});
        });
      }
    });
  }, [current, items]);

  // Reset zoom whenever the active slide changes
  useEffect(() => {
    setZoom(1);
    setPan({ x: 0, y: 0 });
  }, [current]);

  // Wheel zoom (only on images). preventDefault requires passive: false → manual listener.
  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;
    const onWheel = (e: WheelEvent) => {
      const item = items[current];
      if (!item || isVideoUrl(item.url)) return;
      e.preventDefault();
      const factor = 1 - e.deltaY * 0.001;
      setZoom(prev => {
        const next = Math.max(1, Math.min(4, prev * factor));
        if (next === 1) setPan({ x: 0, y: 0 });
        return next;
      });
    };
    el.addEventListener('wheel', onWheel, { passive: false });
    return () => el.removeEventListener('wheel', onWheel);
  }, [current, items]);

  const onTouchStart = (e: React.TouchEvent) => {
    if (zoom > 1) return; // pan via pointer events instead
    touchStartX.current = e.touches[0].clientX;
  };
  const onTouchEnd = (e: React.TouchEvent) => {
    if (zoom > 1) return;
    if (touchStartX.current === null) return;
    const delta = e.changedTouches[0].clientX - touchStartX.current;
    if (Math.abs(delta) > 50) delta < 0 ? next() : prev();
    touchStartX.current = null;
  };

  return (
    <div
      ref={containerRef}
      className="fixed inset-0 z-[100] bg-black/95 flex items-center justify-center select-none animate-in fade-in duration-200"
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
    >
      {/* Media — full resolution, contained */}
      {items.map((item, i) => {
        const isActive = i === current;
        const video = isVideoUrl(item.url);
        return (
          <div
            key={item.url + i}
            className={`absolute inset-0 flex items-center justify-center p-4 pb-28 transition-opacity duration-200 ${isActive ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
          >
            {video ? (
              <div
                className="relative flex items-center justify-center max-w-full max-h-full cursor-pointer"
                onClick={(e) => { e.stopPropagation(); togglePlay(i); }}
              >
                <video
                  ref={el => { videoRefs.current[i] = el; }}
                  src={item.url}
                  className="max-w-full max-h-full pointer-events-none"
                  playsInline
                  preload="metadata"
                  onLoadedMetadata={(e) => applyVolume(e.currentTarget, item)}
                  onPlay={() => markPlaying(i)}
                  onPause={() => markPaused(i)}
                  onEnded={() => markPaused(i)}
                />
                {!playing.has(i) && (
                  <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                    <span className="bg-black/60 text-white w-24 h-24 rounded-full flex items-center justify-center text-5xl shadow-2xl pl-1">▶</span>
                  </div>
                )}
              </div>
            ) : (
              <img
                src={item.url}
                alt=""
                className="max-w-full max-h-full object-contain"
                draggable={false}
                style={isActive ? {
                  transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
                  cursor: zoom > 1 ? 'grab' : 'zoom-in',
                  transition: dragRef.current ? 'none' : 'transform 0.2s',
                  touchAction: zoom > 1 ? 'none' : 'auto',
                  willChange: 'transform',
                } : undefined}
                onClick={isActive ? onImgClick : undefined}
                onPointerDown={isActive ? onImgPointerDown : undefined}
                onPointerMove={isActive ? onImgPointerMove : undefined}
              />
            )}
          </div>
        );
      })}

      {/* Counter — top center */}
      {items.length > 1 && (
        <div className="absolute top-4 left-1/2 -translate-x-1/2 bg-black/60 text-white text-sm font-semibold px-3 py-1 rounded-full z-20">
          {current + 1} / {items.length}
        </div>
      )}

      {/* Side arrows */}
      {items.length > 1 && (
        <>
          <button
            onClick={(e) => { e.stopPropagation(); prev(); }}
            className="absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/80 text-white w-12 h-12 rounded-full flex items-center justify-center text-2xl shadow-lg z-20"
            aria-label="Previous"
          >‹</button>
          <button
            onClick={(e) => { e.stopPropagation(); next(); }}
            className="absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/80 text-white w-12 h-12 rounded-full flex items-center justify-center text-2xl shadow-lg z-20"
            aria-label="Next"
          >›</button>
        </>
      )}

      {/* Close button — bottom center, ABOVE the dots */}
      <button
        onClick={onClose}
        className="absolute bottom-12 left-1/2 -translate-x-1/2 bg-white/90 hover:bg-white text-black px-6 py-2.5 rounded-full font-semibold shadow-2xl flex items-center gap-2 z-20 transition-transform hover:scale-105"
        aria-label="Close fullscreen"
      >
        <span className="text-lg leading-none">✕</span>
        <span>Close</span>
      </button>

      {/* Dots — at the very bottom */}
      {items.length > 1 && (
        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-1.5 z-20">
          {items.map((_, i) => (
            <button
              key={i}
              onClick={(e) => { e.stopPropagation(); setCurrent(i); }}
              className={`rounded-full transition-all duration-200 ${i === current ? 'w-6 h-2 bg-white' : 'w-2 h-2 bg-white/50 hover:bg-white/80'}`}
              aria-label={`Go to slide ${i + 1}`}
            />
          ))}
        </div>
      )}
    </div>
  );
}

export default function PublicGrid({ cards, maxCols = 5 }: { cards: Card[], maxCols?: number }) {
  const [activeCard, setActiveCard] = useState<Card | null>(null);
  const [fullscreenIndex, setFullscreenIndex] = useState<number | null>(null);

  useEffect(() => {
    if (activeCard || fullscreenIndex !== null) document.body.style.overflow = 'hidden';
    else document.body.style.overflow = 'unset';
    return () => { document.body.style.overflow = 'unset'; };
  }, [activeCard, fullscreenIndex]);

  const gridClasses: Record<number, string> = {
    3: 'xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 grid-cols-1',
    4: 'xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1',
    5: 'xl:grid-cols-5 lg:grid-cols-4 md:grid-cols-3 grid-cols-1',
    6: 'xl:grid-cols-6 lg:grid-cols-4 md:grid-cols-3 grid-cols-2',
    7: 'xl:grid-cols-7 lg:grid-cols-5 md:grid-cols-4 grid-cols-2',
    8: 'xl:grid-cols-8 lg:grid-cols-6 md:grid-cols-4 grid-cols-2',
  };

  const activeGridClass = gridClasses[maxCols] || gridClasses[5];

  const carouselItems: MediaItem[] = activeCard
    ? [
        ...(activeCard.imageUrl && !activeCard.skipPreview ? [{ url: activeCard.imageUrl }] : []),
        ...(activeCard.extraMedia || []),
      ]
    : [];

  return (
    <>
      <div className={`grid gap-4 ${activeGridClass}`}>
        {cards.map((card) => {
          const galleryCount = (card.extraMedia?.length || 0) + (card.imageUrl ? 1 : 0);
          return (
            <div
              key={card.id}
              onClick={() => {
                setActiveCard(card);
                if (card.autoFullscreen) setFullscreenIndex(0);
              }}
              className="group relative cursor-pointer overflow-hidden rounded-xl shadow-md aspect-square bg-gray-200 transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
            >
              {card.imageUrl ? (
                <img src={card.imageUrl} alt={card.title} className="absolute inset-0 w-full h-full object-cover" />
              ) : (
                <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-100 to-gray-200 text-gray-400">No Image</div>
              )}
              {galleryCount > 1 && (
                <div className="absolute top-2 left-2 bg-black/60 text-white text-xs font-semibold px-1.5 py-0.5 rounded-full flex items-center gap-1 z-10">
                  <span>⊞</span>
                  <span>{galleryCount}</span>
                </div>
              )}
              <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent flex flex-col justify-end p-5 text-white">
                <h3 className="text-xl font-bold drop-shadow-md">{card.title}</h3>
                <p className="text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300 line-clamp-2 mt-1 text-gray-200 drop-shadow">
                  {card.shortDescription}
                </p>
              </div>
            </div>
          );
        })}
      </div>

      {activeCard && fullscreenIndex === null && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md p-4"
          onClick={() => setActiveCard(null)}
        >
          <div
            className="bg-white rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-2xl animate-in fade-in zoom-in-95 duration-200"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="relative">
              <MediaCarousel
                items={carouselItems}
                onMediaClick={(i) => setFullscreenIndex(i)}
              />
              <button
                onClick={() => setActiveCard(null)}
                className="absolute top-4 right-4 bg-black/60 text-white w-10 h-10 flex items-center justify-center rounded-full hover:bg-black hover:scale-110 transition-all shadow-lg z-20"
                title="Close"
              >✕</button>
            </div>
            <div className="p-8">
              <div className="text-xs text-blue-600 font-bold tracking-wider uppercase mb-2">{activeCard.cardType.replace('_', ' ')}</div>
              <h2 className="text-3xl font-bold mb-4 text-gray-900">{activeCard.title}</h2>
              {activeCard.fullContent ? (
                <div className="prose max-w-none text-gray-700" dangerouslySetInnerHTML={{ __html: activeCard.fullContent }} />
              ) : (
                <p className="text-gray-500 italic text-lg">{activeCard.shortDescription}</p>
              )}
            </div>
          </div>
        </div>
      )}

      {fullscreenIndex !== null && activeCard && (
        <FullscreenViewer
          items={carouselItems}
          startIndex={fullscreenIndex}
          onClose={() => {
            setFullscreenIndex(null);
            setActiveCard(null);
          }}
        />
      )}
    </>
  );
}