import React from 'react';
import Chip from '@mui/material/Chip';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Tooltip from '@mui/material/Tooltip';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import WarningIcon from '@mui/icons-material/Warning';
import ErrorIcon from '@mui/icons-material/Error';
import StarIcon from '@mui/icons-material/Star';
import { Trans } from '@lingui/macro';
import { PunctualityMetrics } from '../types/shift';

interface PunctualityBadgeProps {
  punctuality: PunctualityMetrics | null;
  detailed?: boolean;
}

const PunctualityBadge: React.FC<PunctualityBadgeProps> = ({ punctuality, detailed = false }) => {
  if (!punctuality) {
    return null;
  }

  const getStatusConfig = () => {
    const { status, late_minutes, early_minutes } = punctuality;

    switch (status) {
      case 'very_late':
        return {
          color: 'error' as const,
          icon: <ErrorIcon fontSize="small" />,
          label: <Trans>Sehr spät</Trans>,
          detail: `+${Math.round(late_minutes)} Min`,
          bgColor: '#ffebee',
          textColor: '#c62828',
        };
      case 'late':
        return {
          color: 'warning' as const,
          icon: <WarningIcon fontSize="small" />,
          label: <Trans>Verspätet</Trans>,
          detail: `+${Math.round(late_minutes)} Min`,
          bgColor: '#fff3e0',
          textColor: '#e65100',
        };
      case 'early':
        return {
          color: 'info' as const,
          icon: <StarIcon fontSize="small" />,
          label: <Trans>Zu früh</Trans>,
          detail: `-${Math.round(early_minutes)} Min`,
          bgColor: '#e3f2fd',
          textColor: '#1565c0',
        };
      default:
        return {
          color: 'success' as const,
          icon: <CheckCircleIcon fontSize="small" />,
          label: <Trans>Pünktlich</Trans>,
          detail: '',
          bgColor: '#e8f5e9',
          textColor: '#2e7d32',
        };
    }
  };

  const config = getStatusConfig();

  if (!detailed) {
    return (
      <Tooltip
        title={
          <Box>
            <Typography variant="caption" display="block">
              <Trans>Sollzeit</Trans>: {punctuality.shift_start_time ? new Date(punctuality.shift_start_time).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }) : 'N/A'}
            </Typography>
            <Typography variant="caption" display="block">
              <Trans>Ist-Zeit</Trans>: {punctuality.actual_clock_in ? new Date(punctuality.actual_clock_in).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }) : 'N/A'}
            </Typography>
          </Box>
        }
      >
        <Chip
          icon={config.icon}
          label={
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
              {config.label}
              {config.detail && (
                <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
                  {config.detail}
                </Typography>
              )}
            </Box>
          }
          color={config.color}
          size="small"
          sx={{ fontWeight: 'bold' }}
        />
      </Tooltip>
    );
  }

  return (
    <Box
      sx={{
        p: 2,
        borderRadius: 2,
        backgroundColor: config.bgColor,
        border: `2px solid ${config.textColor}`,
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
        {config.icon}
        <Typography variant="subtitle2" fontWeight="bold" color={config.textColor}>
          {config.label}
        </Typography>
      </Box>
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
        <Typography variant="body2">
          <Trans>Sollzeit</Trans>: {punctuality.shift_start_time ? new Date(punctuality.shift_start_time).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }) : 'N/A'}
        </Typography>
        <Typography variant="body2">
          <Trans>Ist-Zeit</Trans>: {punctuality.actual_clock_in ? new Date(punctuality.actual_clock_in).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }) : 'N/A'}
        </Typography>
        {config.detail && (
          <Typography variant="body2" fontWeight="bold" color={config.textColor}>
            <Trans>Abweichung</Trans>: {config.detail}
          </Typography>
        )}
        {punctuality.overtime_minutes > 0 && (
          <Typography variant="body2" color="primary">
            <Trans>Überstunden</Trans>: +{Math.round(punctuality.overtime_minutes)} Min
          </Typography>
        )}
        {punctuality.early_departure_minutes > 0 && (
          <Typography variant="body2" color="warning.main">
            <Trans>Vorzeitiger Abgang</Trans>: -{Math.round(punctuality.early_departure_minutes)} Min
          </Typography>
        )}
      </Box>
    </Box>
  );
};

export default PunctualityBadge;