import React, { useState, useEffect } from 'react';
import { Helmet } from 'react-helmet';
import { useNavigate } from 'react-router-dom';
import { Container, Box, FormControl, FormLabel, FormGroup, FormControlLabel, Checkbox, Typography } 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';
import { getActiveSocialMediaPlatforms } from '../../services/socialMediaApi';
import AdminSessionGate from '../AdminAuth/AdminSessionGate.jsx';
import { useAdminSession } from '../../contexts/AdminSessionContext.jsx';

// Components
import Navbar from '../ComponentUtils/Headers/Navbar';
import Footer from '../ComponentUtils/Footer';
import ImageGallery from '../ComponentUtils/ImageGallery';
import DeletionLogSection from '../ComponentUtils/DeletionLogSection';
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 [consentFilters, setConsentFilters] = useState({
        workshop: false,
        facebook: false,
        instagram: false,
        tiktok: false
    });
    const [platforms, setPlatforms] = useState([]);
    const navigate = useNavigate();
    const { isAuthenticated, logout, user } = useAdminSession();
    const [logoutPending, setLogoutPending] = useState(false);

    useEffect(() => {
        if (!isAuthenticated) {
            return;
        }
        loadModerationGroups();
        loadPlatforms();
    }, [isAuthenticated]);

    useEffect(() => {
        if (!isAuthenticated) {
            return;
        }
        loadModerationGroups();
    }, [consentFilters, isAuthenticated]);

    const loadPlatforms = async () => {
        try {
            const data = await getActiveSocialMediaPlatforms();
            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();
            
            // Sende alle aktivierten Filter
            const activeFilters = Object.keys(consentFilters).filter(key => consentFilters[key]);
            if (activeFilters.length > 0) {
                params.append('consents', activeFilters.join(','));
            }
            
            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) => {
        const result = await Swal.fire({
            icon: 'warning',
            title: 'Gruppe löschen?',
            text: 'Die Löschung kann nicht rückgängig gemacht werden.',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ja, löschen',
            cancelButtonText: 'Abbrechen'
        });

        if (!result.isConfirmed) {
            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);
            }

            await Swal.fire({
                icon: 'success',
                title: 'Gruppe gelöscht',
                text: 'Die Gruppe wurde vollständig entfernt.',
                timer: 1800,
                showConfirmButton: 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');
        }
    };

    const handleLogoutClick = async () => {
        try {
            setLogoutPending(true);
            await logout();
            await Swal.fire({
                icon: 'success',
                title: 'Abgemeldet',
                text: 'Die Admin-Session wurde beendet.',
                timer: 1500,
                showConfirmButton: false
            });
        } catch (logoutError) {
            console.error('Logout fehlgeschlagen:', logoutError);
            await Swal.fire({
                icon: 'error',
                title: 'Logout fehlgeschlagen',
                text: logoutError?.message || 'Bitte später erneut versuchen.'
            });
        } finally {
            setLogoutPending(false);
        }
    };

    const renderContent = () => {
        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' }}>
                    <Box sx={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        flexWrap: 'wrap',
                        gap: 2,
                        mb: 3
                    }}>
                        <Typography variant="h4" component="h1">
                            Moderation
                        </Typography>
                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                            {user?.username && (
                                <Typography variant="body2" color="text.secondary">
                                    Eingeloggt als <strong>{user.username}</strong>
                                </Typography>
                            )}
                            <button
                                type="button"
                                className="btn btn-outline-secondary"
                                onClick={handleLogoutClick}
                                disabled={logoutPending}
                                style={{ minWidth: '120px' }}
                            >
                                {logoutPending ? 'Wird abgemeldet…' : 'Logout'}
                            </button>
                        </Box>
                    </Box>

                    <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 component="fieldset" sx={{ minWidth: 250 }}>
                            <FormLabel component="legend" sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                                <FilterListIcon sx={{ mr: 0.5, fontSize: 18 }} />
                                Consent-Filter
                            </FormLabel>
                            <FormGroup>
                                <FormControlLabel
                                    control={
                                        <Checkbox
                                            checked={consentFilters.workshop}
                                            onChange={(e) => setConsentFilters({...consentFilters, workshop: e.target.checked})}
                                            size="small"
                                        />
                                    }
                                    label="Werkstatt"
                                />
                                <FormControlLabel
                                    control={
                                        <Checkbox
                                            checked={consentFilters.facebook}
                                            onChange={(e) => setConsentFilters({...consentFilters, facebook: e.target.checked})}
                                            size="small"
                                        />
                                    }
                                    label="Facebook"
                                />
                                <FormControlLabel
                                    control={
                                        <Checkbox
                                            checked={consentFilters.instagram}
                                            onChange={(e) => setConsentFilters({...consentFilters, instagram: e.target.checked})}
                                            size="small"
                                        />
                                    }
                                    label="Instagram"
                                />
                                <FormControlLabel
                                    control={
                                        <Checkbox
                                            checked={consentFilters.tiktok}
                                            onChange={(e) => setConsentFilters({...consentFilters, tiktok: e.target.checked})}
                                            size="small"
                                        />
                                    }
                                    label="TikTok"
                                />
                            </FormGroup>
                        </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>
        );
    };

    return (
        <AdminSessionGate>
            {renderContent()}
        </AdminSessionGate>
    );
};

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