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
    const socialMediaBadges = group.socialMediaConsents?.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;