fotospiel-app/resources/js/guest/components/GalleryPreview.tsx

import React from 'react';
import { Link } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { getDeviceId } from '../lib/device';
import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
import { Heart } from 'lucide-react';
import { useTranslation } from '../i18n/useTranslation';

type Props = { token: string };

type PreviewFilter = 'latest' | 'popular' | 'mine' | 'photobooth';
type PreviewPhoto = {
  id: number;
  session_id?: string | null;
  ingest_source?: string | null;
  likes_count?: number | null;
  created_at?: string | null;
  task_id?: number | null;
  task_title?: string | null;
  emotion_id?: number | null;
  emotion_name?: string | null;
  thumbnail_path?: string | null;
  file_path?: string | null;
  title?: string | null;
};

export default function GalleryPreview({ token }: Props) {
  const { locale } = useTranslation();
  const { photos, loading } = usePollGalleryDelta(token, locale);
  const [mode, setMode] = React.useState<PreviewFilter>('latest');
  const typedPhotos = React.useMemo(() => photos as PreviewPhoto[], [photos]);
  const hasPhotobooth = React.useMemo(() => typedPhotos.some((p) => p.ingest_source === 'photobooth'), [typedPhotos]);

  const items = React.useMemo(() => {
    let arr = typedPhotos.slice();
    
    // MyPhotos filter (requires session_id matching)
    if (mode === 'mine') {
      const deviceId = getDeviceId();
      arr = arr.filter((photo) => photo.session_id === deviceId);
    } else if (mode === 'photobooth') {
      arr = arr.filter((photo) => photo.ingest_source === 'photobooth');
    }
    
    // Sorting
    if (mode === 'popular') {
      arr.sort((a, b) => (b.likes_count ?? 0) - (a.likes_count ?? 0));
    } else {
      arr.sort((a, b) => new Date(b.created_at ?? 0).getTime() - new Date(a.created_at ?? 0).getTime());
    }
    
    return arr.slice(0, 4); // 2x2 = 4 items
  }, [typedPhotos, mode]);

  React.useEffect(() => {
    if (mode === 'photobooth' && !hasPhotobooth) {
      setMode('latest');
    }
  }, [mode, hasPhotobooth]);

  // Helper function to generate photo title (must be before return)
  function getPhotoTitle(photo: PreviewPhoto): string {
    if (photo.task_id) {
      return `Task: ${photo.task_title || 'Unbekannte Aufgabe'}`;
    }
    if (photo.emotion_id) {
      return `Emotion: ${photo.emotion_name || 'Gefühl'}`;
    }
    // Fallback based on creation time or placeholder
    const now = new Date();
    const created = new Date(photo.created_at || now);
    const hours = created.getHours();
    if (hours < 12) return 'Morgenmoment';
    if (hours < 18) return 'Nachmittagslicht';
    return 'Abendstimmung';
  }

  const filters: { value: PreviewFilter; label: string }[] = [
    { value: 'latest', label: 'Newest' },
    { value: 'popular', label: 'Popular' },
    { value: 'mine', label: 'My Photos' },
    ...(hasPhotobooth ? [{ value: 'photobooth', label: 'Fotobox' } as const] : []),
  ];

  return (
    <section className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-xs uppercase tracking-wide text-muted-foreground">Live-Galerie</p>
          <h3 className="text-lg font-semibold text-foreground">Alle Uploads auf einen Blick</h3>
        </div>
        <Link
          to={`/e/${encodeURIComponent(token)}/gallery?mode=${mode}`}
          className="text-sm font-semibold text-pink-600 hover:text-pink-700"
        >
          Alle ansehen →
        </Link>
      </div>

      <div className="flex gap-2 overflow-x-auto pb-1 text-sm font-medium [-ms-overflow-style:none] [scrollbar-width:none]">
        {filters.map((filter) => (
          <button
            key={filter.value}
            type="button"
            onClick={() => setMode(filter.value)}
            className={`rounded-full border px-4 py-1 transition ${
              mode === filter.value
                ? 'border-pink-500 bg-pink-500 text-white shadow'
                : 'border-transparent bg-white/70 text-muted-foreground hover:border-pink-200'
            }`}
          >
            {filter.label}
          </button>
        ))}
      </div>

      {loading && <p className="text-sm text-muted-foreground">Lädt…</p>}
      {!loading && items.length === 0 && (
        <Card>
          <CardContent className="p-3 text-sm text-muted-foreground">
            Noch keine Fotos. Starte mit deinem ersten Upload!
          </CardContent>
        </Card>
      )}

      <div className="grid gap-3 sm:grid-cols-2">
        {items.map((p: PreviewPhoto) => (
          <Link
            key={p.id}
            to={`/e/${encodeURIComponent(token)}/gallery?photoId=${p.id}`}
            className="group relative block overflow-hidden rounded-3xl border border-white/30 bg-gray-900 text-white shadow-lg"
          >
            <img
              src={p.thumbnail_path || p.file_path}
              alt={p.title || 'Foto'}
              className="h-48 w-full object-cover transition duration-300 group-hover:scale-105"
              loading="lazy"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" aria-hidden />
            <div className="absolute bottom-0 left-0 right-0 p-4">
              <p className="text-sm font-semibold leading-tight line-clamp-2">{p.title || getPhotoTitle(p)}</p>
              <div className="mt-2 flex items-center gap-1 text-xs text-white/80">
                <Heart className="h-4 w-4 fill-current" aria-hidden />
                {p.likes_count ?? 0}
              </div>
            </div>
          </Link>
        ))}
      </div>

      <p className="text-center text-sm text-muted-foreground">
        Lust auf mehr?{' '}
        <Link to={`/e/${encodeURIComponent(token)}/gallery`} className="font-semibold text-pink-600 hover:text-pink-700">
          Zur Galerie →
        </Link>
      </p>
    </section>
  );
}