import React, { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import '../Pages/Css/GroupsOverviewPage.css';
import { 
  Container, 
  Card, 
  CardContent, 
  Typography, 
  Button, 
  Grid,
  CardMedia,
  Box,
  CircularProgress,
  Chip
} from '@material-ui/core';
import { 
  Slideshow as SlideshowIcon,
  Add as AddIcon,
  Home as HomeIcon
} from '@material-ui/icons';
import Swal from 'sweetalert2/dist/sweetalert2.js';

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

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

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

function GroupsOverviewPage() {
  // use CSS classes from GroupsOverviewPage.css
  const history = useHistory();
  
  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);
    }
  };

  const handleViewSlideshow = (groupId) => {
    history.push(`/slideshow/${groupId}`);
  };

  const handleCreateNew = () => {
    history.push('/multi-upload');
  };

  const handleGoHome = () => {
    history.push('/');
  };

  const formatDate = (dateString) => {
    return new Date(dateString).toLocaleDateString('de-DE', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    });
  };

  if (loading) {
    return (
      <div className="allContainer">
        <Navbar />
        <Container maxWidth="lg" className="groups-overview-container">
          <div className="loading-container">
            <CircularProgress size={60} color="primary" />
            <Typography variant="h6" style={{ marginTop: '20px', color: '#666666' }}>
              Slideshows werden geladen...
            </Typography>
          </div>
        </Container>
        <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 />
      
      <Container maxWidth="lg" className="groups-overview-container">
        {/* Header */}
        <Card className="header-card">
          <Typography className="header-title">
            🎬 Alle Slideshows
          </Typography>
          <Typography className="header-subtitle">
            Verwalten Sie Ihre hochgeladenen Bildersammlungen
          </Typography>
          
          <div className="action-buttons">
            <Button
              className="primary-button"
              onClick={handleCreateNew}
              startIcon={<AddIcon />}
              size="large"
            >
              ➕ Neue Slideshow erstellen
            </Button>
            
            <Button
              className="home-button"
              onClick={handleGoHome}
              startIcon={<HomeIcon />}
              size="large"
            >
              🏠 Zur Startseite
            </Button>
          </div>
        </Card>

        {/* Groups Grid */}
        {error ? (
            <div className="empty-state">
            <Typography variant="h6" style={{ color: '#f44336', marginBottom: '20px' }}>
              😕 Fehler beim Laden
            </Typography>
            <Typography variant="body1" style={{ color: '#666666', marginBottom: '30px' }}>
              {error}
            </Typography>
              <Button onClick={loadGroups} className="primary-button">
              🔄 Erneut versuchen
            </Button>
          </div>
        ) : groups.length === 0 ? (
            <div className="empty-state">
            <Typography variant="h4" style={{ color: '#666666', marginBottom: '20px' }}>
              📸 Keine Slideshows vorhanden
            </Typography>
            <Typography variant="body1" style={{ color: '#999999', marginBottom: '30px' }}>
              Erstellen Sie Ihre erste Slideshow, indem Sie mehrere Bilder hochladen.
            </Typography>
              <Button
                className="primary-button"
              onClick={handleCreateNew}
              size="large"
            >
              ➕ Erste Slideshow erstellen
            </Button>
          </div>
        ) : (
          <>
            <Box marginBottom={2}>
              <Typography variant="h6" style={{ color: '#666666' }}>
                📊 {groups.length} Slideshow{groups.length !== 1 ? 's' : ''} gefunden
              </Typography>
            </Box>
            
            <Grid container spacing={3}>
              {groups.map((group) => (
                <Grid item xs={12} sm={6} md={4} key={group.groupId}>
                  <Card className="group-card">
                    {group.images && group.images.length > 0 && (
                      <CardMedia
                        component="img"
                        className="group-image"
                        image={group.images[0].filePath}
                        alt={group.description || 'Slideshow Vorschau'}
                      />
                    )}
                    
                    <CardContent className="group-content">
                      <Typography className="group-title">
                        {group.description || 'Unbenannte Slideshow'}
                      </Typography>
                      
                      <Typography className="group-meta">
                        📅 {formatDate(group.uploadDate)} • 📸 {group.images?.length || 0} Bilder
                      </Typography>
                      
                      <div className="group-actions">
                        <Button
                          className="view-button"
                          onClick={() => handleViewSlideshow(group.groupId)}
                          startIcon={<SlideshowIcon />}
                          fullWidth
                        >
                          Anzeigen
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                </Grid>
              ))}
            </Grid>
          </>
        )}
      </Container>

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

export default GroupsOverviewPage;