import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Helmet } from 'react-helmet';



// Components
import Navbar from '../ComponentUtils/Headers/Navbar';
import Footer from '../ComponentUtils/Footer';
import ImageGallery from '../ComponentUtils/ImageGallery';

// Utils
import { fetchAllGroups } from '../../Utils/batchUpload';

// Styles
import '../../App.css';

function GroupsOverviewPage() {
  // use CSS classes from GroupsOverviewPage.css
  const navigate = useNavigate();
  
  const [groups, setGroups] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    loadGroups();
  }, []);

  const loadGroups = async () => {
    try {
      setLoading(true);
      const response = await fetchAllGroups();
      setGroups(response.groups || []);
      setError(null);
    } catch (err) {
      setError(err.message);
      console.error('Error loading groups:', err);
    } finally {
      setLoading(false);
    }
  };

  // previously had handleViewSlideshow but it was not used; removed to satisfy ESLint

  const handleViewGroup = (groupId) => {
    navigate(`/groups/${groupId}`);
  };

  const handleCreateNew = () => {
    navigate('/');
  };
  // removed unused local helpers (formatDate, handleGoHome) to clear ESLint warnings

  if (loading) {
    return (
      <div className="allContainer">
        <Navbar />
        <div className="container">
          <div className="flex-center" style={{ minHeight: '400px' }}>
            <div className="text-center">
              <div className="loading-spinner" style={{ width: '60px', height: '60px', border: '4px solid #f3f3f3', borderTop: '4px solid #3498db', borderRadius: '50%', animation: 'spin 1s linear infinite', margin: '0 auto' }}></div>
              <p className="mt-3" style={{ color: '#666666' }}>Slideshows werden geladen...</p>
            </div>
          </div>
        </div>
        <Footer />
      </div>
    );
  }

  return (
    <div className="allContainer">
      <Helmet>
        <title>Gruppenübersicht - Interne Verwaltung</title>
        <meta name="robots" content="noindex, nofollow, nosnippet, noarchive" />
        <meta name="googlebot" content="noindex, nofollow" />
        <meta name="description" content="Interne Gruppenübersicht - Nicht öffentlich zugänglich" />
      </Helmet>
      <Navbar />
      
      <div className="container page-container">
        {/* Header */}
        <div className="card">
          <h1 className="page-title">Alle Slideshows</h1>
          <p className="page-subtitle">Übersicht aller erstellten Slideshows.</p>
        </div>

        {/* Groups Grid */}
        {error ? (
          <div className="empty-state">
            <h2 style={{ color: '#f44336' }} className="mb-3">😕 Fehler beim Laden</h2>
            <p style={{ color: '#666666' }} className="mb-4">{error}</p>
            <button onClick={loadGroups} className="btn btn-secondary">
              🔄 Erneut versuchen
            </button>
          </div>
        ) : groups.length === 0 ? (
          <div className="empty-state">
            <h2 style={{ color: '#666666' }} className="mb-3">📸 Keine Slideshows vorhanden</h2>
            <p style={{ color: '#999999' }} className="mb-4">
              Erstellen Sie Ihre erste Slideshow, indem Sie mehrere Bilder hochladen.
            </p>
            <button className="btn btn-success" onClick={handleCreateNew}>
              ➕ Erste Slideshow erstellen
            </button>
          </div>
        ) : (
          <>
            <div className="mb-3">
              <h3 style={{ color: '#666666' }}>
                {groups.length} Slideshow{groups.length !== 1 ? 's' : ''} gefunden
              </h3>
            </div>
            <ImageGallery
              items={groups}
              onViewImages={(group) => handleViewGroup(group.groupId)}
              isPending={false}
              showActions={false}
              mode="group"
            />
          </>
        )}
      </div>

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

export default GroupsOverviewPage;