import React from 'react';
import { Box, Chip, Tooltip } from '@mui/material';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import FacebookIcon from '@mui/icons-material/Facebook';
import InstagramIcon from '@mui/icons-material/Instagram';
import MusicNoteIcon from '@mui/icons-material/MusicNote';
import WorkIcon from '@mui/icons-material/Work';

const ICON_MAP = {
    'Facebook': FacebookIcon,
    'Instagram': InstagramIcon,
    'MusicNote': MusicNoteIcon,
};

const ConsentBadges = ({ group }) => {
    // Workshop consent badge (always show if consented)
    const workshopBadge = group.display_in_workshop && (
        <Tooltip 
            title={`Werkstatt-Anzeige zugestimmt am ${new Date(group.consent_timestamp).toLocaleString('de-DE')}`}
            arrow
        >
            <Chip
                icon={<WorkIcon />}
                label="Werkstatt"
                size="small"
                sx={{
                    bgcolor: '#4CAF50',
                    color: 'white',
                    '& .MuiChip-icon': { color: 'white' }
                }}
            />
        </Tooltip>
    );

    // Social media consent badges - only show active (not revoked) consents
    const socialMediaBadges = group.socialMediaConsents
        ?.filter(consent => consent.consented && !consent.revoked)
        .map(consent => {
            const IconComponent = ICON_MAP[consent.icon_name] || CheckCircleIcon;
            return (
                <Tooltip 
                    key={consent.platform_id}
                    title={`${consent.display_name} Consent am ${new Date(consent.consent_timestamp).toLocaleString('de-DE')}`}
                    arrow
                >
                    <Chip
                        icon={<IconComponent />}
                        label={consent.display_name}
                        size="small"
                        variant="outlined"
                        sx={{
                            borderColor: '#2196F3',
                            color: '#2196F3',
                            '& .MuiChip-icon': { color: '#2196F3' }
                        }}
                    />
                </Tooltip>
            );
        });

    // If no consents at all, show nothing or a neutral indicator
    if (!group.display_in_workshop && (!group.socialMediaConsents || group.socialMediaConsents.length === 0)) {
        return (
            <Chip
                label="Kein Consent"
                size="small"
                variant="outlined"
                sx={{
                    borderColor: '#757575',
                    color: '#757575'
                }}
            />
        );
    }

    return (
        <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', alignItems: 'center' }}>
            {workshopBadge}
            {socialMediaBadges}
        </Box>
    );
};

export default ConsentBadges;
