import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import Navbar from '../ComponentUtils/Headers/Navbar';
import Footer from '../ComponentUtils/Footer';
import ImageGalleryCard from '../ComponentUtils/ImageGalleryCard';
import ImageGallery from '../ComponentUtils/ImageGallery';
import { apiFetch } from '../../Utils/apiFetch';


const PublicGroupImagesPage = () => {
  const { groupId } = useParams();
  const [group, setGroup] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    loadGroup();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [groupId]);

  const loadGroup = async () => {
    try {
      setLoading(true);
      // Public endpoint (no moderation controls)
      const res = await apiFetch(`/api/groups/${groupId}`);
      if (!res.ok) throw new Error('Nicht gefunden');
      const data = await res.json();
      setGroup(data);
    } catch (e) {
      setError('Fehler beim Laden der Gruppe');
    } finally {
      setLoading(false);
    }
  };

  if (loading) return <div className="moderation-loading">Lade Gruppe...</div>;
  if (error) return <div className="moderation-error">{error}</div>;
  if (!group) return <div className="moderation-error">Gruppe nicht gefunden</div>;

  return (
    <div className="allContainer">
      <Navbar />

      <div className="container page-container" style={{ marginTop: '40px' }}>
        <ImageGalleryCard 
          item={group} 
          showActions={false} 
          isPending={!group.approved}
          mode="group"
          hidePreview={true}
        />

        <ImageGallery 
          items={group.images && group.images.length > 0 ? group.images.map(img => ({ 
            ...img, // Pass all image fields including previewPath and imageDescription
            remoteUrl: `/download/${img.fileName}`, // Keep for backward compatibility
            originalName: img.originalName || img.fileName, 
            id: img.id 
          })) : []} 
          showActions={false}
          enableReordering={false}
          mode="single-image"
          emptyMessage="Keine Bilder in dieser Gruppe."
          imageDescriptions={group.images && group.images.length > 0 ? 
            group.images.reduce((acc, img) => {
              if (img.imageDescription) {
                acc[img.id] = img.imageDescription;
              }
              return acc;
            }, {}) : {}}
        />
      </div>

      <div className="footerContainer"><Footer /></div>
    </div>
  );
};

export default PublicGroupImagesPage;