import React, { useState, useEffect } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import { makeStyles } from '@material-ui/core/styles';
import { Button, Card, CardContent, Typography, Container } from '@material-ui/core';
import Swal from 'sweetalert2/dist/sweetalert2.js';
import 'sweetalert2/src/sweetalert2.scss';

// Components
import Navbar from '../ComponentUtils/Headers/Navbar';
import Footer from '../ComponentUtils/Footer';
import ImagePreviewGallery from '../ComponentUtils/MultiUpload/ImagePreviewGallery';
import DescriptionInput from '../ComponentUtils/MultiUpload/DescriptionInput';

import '../ComponentUtils/Css/Background.css';

const useStyles = makeStyles({
  container: {
    paddingTop: '20px',
    paddingBottom: '40px',
    minHeight: '80vh'
  },
  card: {
    borderRadius: '12px',
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
    padding: '20px',
    marginBottom: '20px'
  },
  headerText: {
    fontFamily: 'roboto',
    fontWeight: '400',
    fontSize: '28px',
    textAlign: 'center',
    marginBottom: '10px',
    color: '#333333'
  },
  subheaderText: {
    fontFamily: 'roboto',
    fontWeight: '300',
    fontSize: '16px',
    color: '#666666',
    textAlign: 'center',
    marginBottom: '30px'
  },
  actionButtons: {
    display: 'flex',
    gap: '15px',
    justifyContent: 'center',
    marginTop: '20px',
    flexWrap: 'wrap'
  }
});

const GroupImagesPage = () => {
    const classes = useStyles();
    const { groupId } = useParams();
    const history = useHistory();
    const [group, setGroup] = useState(null);
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState(null);

    // selectedImages will hold objects compatible with ImagePreviewGallery
    const [selectedImages, setSelectedImages] = useState([]);
    const [metadata, setMetadata] = useState({ year: new Date().getFullYear(), title: '', description: '', name: '' });

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

    const loadGroup = async () => {
        try {
            setLoading(true);
            const res = await fetch(`/moderation/groups/${groupId}`);
            if (!res.ok) throw new Error('Nicht gefunden');
            const data = await res.json();
            setGroup(data);

            // Map group's images to preview-friendly objects
            if (data.images && data.images.length > 0) {
                const mapped = data.images.map(img => ({
                    remoteUrl: `/download/${img.fileName}`,
                    originalName: img.originalName || img.fileName,
                    id: img.id
                }));
                setSelectedImages(mapped);
            }

            // populate metadata from group
            setMetadata({
                year: data.year || new Date().getFullYear(),
                title: data.title || '',
                description: data.description || '',
                name: data.name || ''
            });
        } catch (e) {
            setError('Fehler beim Laden der Gruppe');
        } finally {
            setLoading(false);
        }
    };

    const handleChange = (field, value) => {
        setGroup({ ...group, [field]: value });
        setMetadata(prev => ({ ...prev, [field]: value }));
    };

    const handleSave = async () => {
        if (!group) return;
        setSaving(true);
        try {
            const payload = {
                title: group.title,
                description: group.description,
                year: group.year,
                name: group.name
            };

            const res = await fetch(`/groups/${groupId}`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });

            if (!res.ok) {
                const body = await res.json().catch(() => ({}));
                throw new Error(body.message || 'Speichern fehlgeschlagen');
            }

            Swal.fire({ icon: 'success', title: 'Gruppe erfolgreich aktualisiert', timer: 1500, showConfirmButton: false });
            history.push('/moderation');
        } catch (e) {
            console.error(e);
            Swal.fire({ icon: 'error', title: 'Fehler beim Speichern', text: e.message });
        } finally {
            setSaving(false);
        }
    };

    const handleDeleteImage = async (imageId) => {
        if (!window.confirm('Bild wirklich löschen?')) return;
        try {
            const res = await fetch(`/groups/${groupId}/images/${imageId}`, { method: 'DELETE' });
            if (!res.ok) throw new Error('Löschen fehlgeschlagen');
            // Aktualisiere lokale Ansicht
            const newImages = group.images.filter(img => img.id !== imageId);
            setGroup({ ...group, images: newImages, imageCount: (group.imageCount || 0) - 1 });
            setSelectedImages(prev => prev.filter(img => img.id !== imageId));
            Swal.fire({ icon: 'success', title: 'Bild gelöscht', timer: 1200, showConfirmButton: false });
        } catch (e) {
            console.error(e);
            Swal.fire({ icon: 'error', title: 'Fehler beim Löschen des Bildes' });
        }
    };

    const handleRemoveImage = (indexToRemove) => {
        // If it's a remote image mapped with id, call delete
        const img = selectedImages[indexToRemove];
        if (img && img.id) {
            handleDeleteImage(img.id);
            return;
        }
        setSelectedImages(prev => prev.filter((_, index) => index !== indexToRemove));
    };

    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 />

        <Container maxWidth="lg" className={classes.container}>
          <Card className={classes.card}>
            <CardContent>
              <Typography className={classes.headerText}>Gruppe bearbeiten</Typography>
              <Typography className={classes.subheaderText}>{group.title || ''}</Typography>

              <ImagePreviewGallery images={selectedImages} onRemoveImage={handleRemoveImage} />

              {selectedImages.length > 0 && (
                <>
                  <DescriptionInput metadata={metadata} onMetadataChange={setMetadata} />

                  <div className={classes.actionButtons}>
                    <Button variant="outlined" onClick={() => history.push('/moderation')}>↩ Zurück</Button>
                    <Button color="primary" variant="contained" onClick={handleSave} disabled={saving}>{saving ? 'Speichern...' : 'Speichern'}</Button>
                  </div>
                </>
              )}

            </CardContent>
          </Card>
        </Container>

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

export default GroupImagesPage;