import React, { useState, useEffect } from 'react';
import { Helmet } from 'react-helmet';
import { useNavigate } from 'react-router-dom';
import { Container, Box, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
import FilterListIcon from '@mui/icons-material/FilterList';
import Swal from 'sweetalert2/dist/sweetalert2.js';

// Services
import { adminGet, adminRequest, adminDownload } from '../../services/adminApi';
import { handleAdminError } from '../../services/adminErrorHandler';

// Components
import Navbar from '../ComponentUtils/Headers/Navbar';
import Footer from '../ComponentUtils/Footer';
import ImageGallery from '../ComponentUtils/ImageGallery';
import DeletionLogSection from '../ComponentUtils/DeletionLogSection';
import ConsentBadges from '../ComponentUtils/ConsentBadges';
import { getImageSrc } from '../../Utils/imageUtils';

const ModerationGroupsPage = () => {
    const [groups, setGroups] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [selectedGroup, setSelectedGroup] = useState(null);
    const [showImages, setShowImages] = useState(false);
    const [consentFilter, setConsentFilter] = useState('all');
    const [platforms, setPlatforms] = useState([]);
    const navigate = useNavigate();

    useEffect(() => {
        loadModerationGroups();
        loadPlatforms();
    }, []);

    useEffect(() => {
        loadModerationGroups();
    }, [consentFilter]);

    const loadPlatforms = async () => {
        try {
            const data = await adminGet('/api/admin/social-media/platforms');
            setPlatforms(data);
        } catch (error) {
            await handleAdminError(error, 'Plattformen laden');
        }
    };

    const loadModerationGroups = async () => {
        try {
            setLoading(true);
            
            // Build URL with filter params
            let url = '/api/admin/groups';
            const params = new URLSearchParams();
            
            if (consentFilter !== 'all') {
                if (consentFilter === 'workshop-only') {
                    params.append('workshopOnly', 'true');
                } else {
                    // Platform filter (facebook, instagram, tiktok)
                    params.append('platform', consentFilter);
                }
            }
            
            if (params.toString()) {
                url += '?' + params.toString();
            }
            
            const data = await adminGet(url);
            setGroups(data.groups);
        } catch (error) {
            await handleAdminError(error, 'Moderations-Gruppen laden');
            setError('Fehler beim Laden der Gruppen');
        } finally {
            setLoading(false);
        }
    };

    const approveGroup = async (groupId, approved) => {
        try {
            await adminRequest(
                `/api/admin/groups/${groupId}/approve`,
                'PATCH',
                { approved: approved }
            );
            
            // Update local state
            setGroups(groups.map(group => 
                group.groupId === groupId 
                    ? { ...group, approved: approved }
                    : group
            ));

            // Success feedback
            await Swal.fire({
                icon: 'success',
                title: approved ? 'Gruppe freigegeben' : 'Freigabe zurückgezogen',
                text: approved 
                    ? 'Die Gruppe ist jetzt öffentlich sichtbar.' 
                    : 'Die Gruppe wurde zurück in "Wartend" verschoben.',
                timer: 2000,
                showConfirmButton: false
            });
        } catch (error) {
            await handleAdminError(error, 'Gruppe freigeben');
            await Swal.fire({
                icon: 'error',
                title: 'Fehler',
                text: 'Fehler beim Freigeben der Gruppe: ' + error.message
            });
        }
    };

    const deleteImage = async (groupId, imageId) => {
        console.log('deleteImage called with:', { groupId, imageId });
        console.log('API_URL:', window._env_.API_URL);
        
        try {
            // Use admin API endpoint
            const url = `/api/admin/groups/${groupId}/images/${imageId}`;
            console.log('DELETE request to:', url);
            
            await adminRequest(url, 'DELETE');
            
            // Remove image from selectedGroup
            if (selectedGroup && selectedGroup.groupId === groupId) {
                const updatedImages = selectedGroup.images.filter(img => img.id !== imageId);
                setSelectedGroup({
                    ...selectedGroup,
                    images: updatedImages,
                    imageCount: updatedImages.length
                });
            }
            
            // Update group image count
            setGroups(groups.map(group => 
                group.groupId === groupId 
                    ? { ...group, imageCount: group.imageCount - 1 }
                    : group
            ));
            
        } catch (error) {
            await handleAdminError(error, 'Bild löschen');
        }
    };

    const deleteGroup = async (groupId) => {
        if (!window.confirm('Gruppe wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.')) {
            return;
        }

        try {
            await adminRequest(`/api/admin/groups/${groupId}`, 'DELETE');
            
            setGroups(groups.filter(group => group.groupId !== groupId));
            if (selectedGroup && selectedGroup.groupId === groupId) {
                setSelectedGroup(null);
                setShowImages(false);
            }
        } catch (error) {
            await handleAdminError(error, 'Gruppe löschen');
        }
    };

    // Navigate to the dedicated group images page
    const viewGroupImages = (group) => {
        navigate(`/moderation/groups/${group.groupId}`);
    };

    const exportConsentData = async () => {
        try {
            const blob = await adminDownload('/api/admin/consents/export?format=csv');
            
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `consent-export-${new Date().toISOString().split('T')[0]}.csv`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);
            
            await Swal.fire({
                icon: 'success',
                title: 'Export erfolgreich',
                text: 'Consent-Daten wurden als CSV heruntergeladen.',
                timer: 2000,
                showConfirmButton: false
            });
        } catch (error) {
            await handleAdminError(error, 'Consent-Export');
            });
        }
    };

    if (loading) {
        return <div className="moderation-loading">Lade Gruppen...</div>;
    }

    if (error) {
        return <div className="moderation-error">{error}</div>;
    }

    const pendingGroups = groups.filter(g => !g.approved);
    const approvedGroups = groups.filter(g => g.approved);

    return (
        <div className="allContainer">
            <Navbar />
            <Helmet>
                <title>Moderation - Interne Verwaltung</title>
                <meta name="robots" content="noindex, nofollow, nosnippet, noarchive" />
                <meta name="googlebot" content="noindex, nofollow" />
                <meta name="description" content="Interne Moderationsseite - Nicht öffentlich zugänglich" />
            </Helmet>
            
            <Container className="moderation-content" maxWidth="lg" style={{ paddingTop: '20px' }}>
                <h1>Moderation</h1>

                <div className="moderation-stats">
                    <div className="stat-item">
                            <span className="stat-number">{pendingGroups.length}</span>
                            <span className="stat-label">Wartend</span>
                    </div>
                    <div className="stat-item">
                            <span className="stat-number">{approvedGroups.length}</span>
                            <span className="stat-label">Freigegeben</span>
                    </div>
                    <div className="stat-item">
                            <span className="stat-number">{groups.length}</span>
                            <span className="stat-label">Gesamt</span>
                    </div>
                </div>

                {/* Filter und Export Controls */}
                <Box sx={{ 
                    display: 'flex', 
                    gap: 2, 
                    mb: 3, 
                    alignItems: 'center',
                    flexWrap: 'wrap'
                }}>
                    <FormControl sx={{ minWidth: 250 }} size="small">
                        <InputLabel id="consent-filter-label">
                            <FilterListIcon sx={{ mr: 0.5, fontSize: 18, verticalAlign: 'middle' }} />
                            Consent-Filter
                        </InputLabel>
                        <Select
                            labelId="consent-filter-label"
                            value={consentFilter}
                            label="Consent-Filter"
                            onChange={(e) => setConsentFilter(e.target.value)}
                        >
                            <MenuItem value="all">Alle Gruppen</MenuItem>
                            <MenuItem value="workshop-only">Nur Werkstatt-Consent</MenuItem>
                            {platforms.map(platform => (
                                <MenuItem key={platform.id} value={platform.platform_name}>
                                    {platform.display_name}
                                </MenuItem>
                            ))}
                        </Select>
                    </FormControl>
                    
                    <button
                        className="btn btn-success"
                        onClick={exportConsentData}
                        style={{
                            fontSize: '14px',
                            padding: '10px 20px'
                        }}
                    >
                        📥 Consent-Daten exportieren
                    </button>
                </Box>

            {/* Wartende Gruppen */}
            <section className="moderation-section">
                <ImageGallery
                    items={pendingGroups}
                    title={`🔍 Wartende Freigabe (${pendingGroups.length})`}
                    onApprove={approveGroup}
                    onViewImages={viewGroupImages}
                    onDelete={deleteGroup}
                    isPending={true}
                    mode="moderation"
                    emptyMessage="Keine wartenden Gruppen"
                />
            </section>

            {/* Freigegebene Gruppen */}
            <section className="moderation-section">
                <ImageGallery
                    items={approvedGroups}
                    title={`✅ Freigegebene Gruppen (${approvedGroups.length})`}
                    onApprove={approveGroup}
                    onViewImages={viewGroupImages}
                    onDelete={deleteGroup}
                    isPending={false}
                    mode="moderation"
                    emptyMessage="Keine freigegebenen Gruppen"
                />
            </section>

            {/* Lösch-Historie */}
            <section className="moderation-section">
                <DeletionLogSection />
            </section>

            {/* Bilder-Modal */}
            {showImages && selectedGroup && (
                <ImageModal 
                    group={selectedGroup}
                    onClose={() => {
                        setShowImages(false);
                        setSelectedGroup(null);
                    }}
                    onDeleteImage={deleteImage}
                />
            )}
            </Container>
            <div className="footerContainer"><Footer /></div>
        </div>
    );
};

// `GroupCard` has been extracted to `../ComponentUtils/GroupCard`

const ImageModal = ({ group, onClose, onDeleteImage }) => {
    return (
        <div className="image-modal-overlay" onClick={onClose}>
            <div className="image-modal" onClick={e => e.stopPropagation()}>
                <div className="modal-header">
                    <h2>{group.title}</h2>
                    <button className="close-btn" onClick={onClose}>×</button>
                </div>
                
                <div className="modal-body">
                    <div className="group-details">
                        <p><strong>Jahr:</strong> {group.year}</p>
                        <p><strong>Ersteller:</strong> {group.name}</p>
                        {group.description && (
                            <p><strong>Beschreibung:</strong> {group.description}</p>
                        )}
                        <p><strong>Bilder:</strong> {group.images.length}</p>
                    </div>
                    
                    <div className="images-grid">
                        {group.images.map(image => (
                            <div key={image.id} className="image-item">
                                <img 
                                    src={getImageSrc(image, true)}
                                    alt={image.originalName}
                                    className="modal-image"
                                />
                                <div className="image-actions">
                                    <span className="image-name">{image.originalName}</span>
                                    <button 
                                        className="btn btn-danger btn-sm"
                                        onClick={() => onDeleteImage(group.groupId, image.id)}
                                        title="Bild löschen"
                                    >
                                        🗑️
                                    </button>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ModerationGroupsPage;