import React from 'react';
import Paper from '@mui/material/Paper';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import Avatar from '@mui/material/Avatar';
import AvatarGroup from '@mui/material/AvatarGroup';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import PeopleIcon from '@mui/icons-material/People';
import { Trans } from '@lingui/macro';
import { Shift } from '../../types/shift';
import { getContrastColor } from '../../utils/colorUtils';
import UserAvatar from '../UserAvatar';

interface ShiftCardProps {
  shift: Shift;
  onEdit?: (shift: Shift) => void;
  onDelete?: (shift: Shift) => void;
  onCopy?: (shift: Shift) => void;
  onClick?: (shift: Shift) => void;
  showActions?: boolean;
  compact?: boolean;
  selected?: boolean;
}

const ShiftCard: React.FC<ShiftCardProps> = ({
  shift,
  onEdit,
  onDelete,
  onCopy,
  onClick,
  showActions = true,
  compact = false,
  selected = false,
}) => {
  const backgroundColor = shift.display_color || '#1976d2';
  const textColor = getContrastColor(backgroundColor);

  const getStatusColor = () => {
    switch (shift.zs_status) {
      case 'confirmed':
        return 'success';
      case 'completed':
        return 'info';
      case 'cancelled':
        return 'error';
      default:
        return 'default';
    }
  };

  const assignedCount = shift.assigned_users?.filter((a) => !a.is_unassigned).length || 0;
  const hasUnassigned = shift.assigned_users?.some((a) => a.is_unassigned) || false;

  return (
    <Paper
      elevation={selected ? 8 : 2}
      sx={{
        padding: compact ? 1 : 2,
        backgroundColor,
        color: textColor,
        cursor: onClick ? 'pointer' : 'default',
        border: selected ? '2px solid' : 'none',
        borderColor: 'primary.main',
        transition: 'all 0.2s',
        '&:hover': onClick ? {
          elevation: 4,
          transform: 'translateY(-2px)',
        } : {},
      }}
      onClick={() => onClick?.(shift)}
    >
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <Box sx={{ flex: 1 }}>
          <Typography variant={compact ? 'body2' : 'subtitle1'} fontWeight="bold">
            {shift.display_name}
          </Typography>
          <Typography variant="caption">
            {shift.zs_start_time} - {shift.zs_end_time} ({shift.duration_hours}h)
          </Typography>
        </Box>

        {showActions && (
          <Box sx={{ display: 'flex', gap: 0.5 }}>
            {onCopy && (
              <Tooltip title={<Trans>Kopieren</Trans>}>
                <IconButton
                  size="small"
                  onClick={(e) => {
                    e.stopPropagation();
                    onCopy(shift);
                  }}
                  sx={{ color: textColor }}
                >
                  <ContentCopyIcon fontSize="small" />
                </IconButton>
              </Tooltip>
            )}
            {onEdit && (
              <Tooltip title={<Trans>Bearbeiten</Trans>}>
                <IconButton
                  size="small"
                  onClick={(e) => {
                    e.stopPropagation();
                    onEdit(shift);
                  }}
                  sx={{ color: textColor }}
                >
                  <EditIcon fontSize="small" />
                </IconButton>
              </Tooltip>
            )}
            {onDelete && (
              <Tooltip title={<Trans>Löschen</Trans>}>
                <IconButton
                  size="small"
                  onClick={(e) => {
                    e.stopPropagation();
                    onDelete(shift);
                  }}
                  sx={{ color: textColor }}
                >
                  <DeleteIcon fontSize="small" />
                </IconButton>
              </Tooltip>
            )}
          </Box>
        )}
      </Box>

      {!compact && (
        <Box sx={{ mt: 1, display: 'flex', gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
          <Chip
            label={shift.zs_status}
            size="small"
            color={getStatusColor()}
            sx={{ color: textColor, borderColor: textColor }}
            variant="outlined"
          />

          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
            <PeopleIcon fontSize="small" />
            <Typography variant="caption">
              {assignedCount} {hasUnassigned && `(+${shift.assigned_users?.filter((a) => a.is_unassigned).length})`}
            </Typography>
          </Box>
        </Box>
      )}

      {!compact && shift.assigned_users && shift.assigned_users.length > 0 && (
        <Box sx={{ mt: 1 }}>
          <AvatarGroup max={4} sx={{ justifyContent: 'flex-start' }}>
            {shift.assigned_users
              .filter((a) => !a.is_unassigned)
              .map((assignment) => (
                <Tooltip key={assignment.assignment_id} title={assignment.user_name}>
                  <Avatar sx={{ width: 24, height: 24 }}>
                    <UserAvatar
                      photoUrl={assignment.user_photourl}
                      initials={assignment.user_avatar}
                      fullName={assignment.user_name}
                      sx={{ width: 24, height: 24, fontSize: '0.75rem' }}
                    />
                  </Avatar>
                </Tooltip>
              ))}
          </AvatarGroup>
        </Box>
      )}

      {shift.zs_notes && !compact && (
        <Typography variant="caption" sx={{ mt: 1, display: 'block', opacity: 0.8 }}>
          {shift.zs_notes}
        </Typography>
      )}
    </Paper>
  );
};

export default ShiftCard;