import React from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import Chip from '@mui/material/Chip';
import Tooltip from '@mui/material/Tooltip';
import CoffeeIcon from '@mui/icons-material/Coffee';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import { Trans } from '@lingui/macro';
import { format, parseISO } from 'date-fns';
import { de } from 'date-fns/locale';
import { Break } from '../types/shift';

interface BreakTimelineCardProps {
  breakData: Break;
  readonly?: boolean;
  onEdit?: (breakData: Break) => void;
  onDelete?: (breakId: number) => void;
}

const BreakTimelineCard: React.FC<BreakTimelineCardProps> = ({
  breakData,
  readonly = false,
  onEdit,
  onDelete,
}) => {
  const formatTime = (timeString: string) => {
    return format(parseISO(timeString), 'HH:mm', { locale: de });
  };

  const formatDuration = (minutes: number | null, isActive: boolean) => {
    if (isActive) return 'Läuft...';
    if (minutes === null || minutes === 0) return '0 Min';
    const hours = Math.floor(minutes / 60);
    const mins = minutes % 60;
    if (hours > 0) {
      return mins > 0 ? `${hours} Std ${mins} Min` : `${hours} Std`;
    }
    return `${mins} Min`;
  };

  return (
    <Card
      sx={{
        mb: 1,
        border: breakData.is_active ? '2px solid' : '1px solid',
        borderColor: breakData.is_active ? 'warning.main' : 'divider',
        backgroundColor: breakData.is_active ? 'warning.50' : 'background.paper',
      }}
    >
      <CardContent sx={{ py: 1.5, '&:last-child': { pb: 1.5 } }}>
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flex: 1 }}>
            <CoffeeIcon
              fontSize="small"
              color={breakData.is_active ? 'warning' : 'action'}
            />
            <Box sx={{ flex: 1 }}>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
                <Typography variant="body2" fontWeight="medium">
                  {formatTime(breakData.start_time)}
                  {breakData.end_time ? (
                    <>
                      {' → '}
                      {formatTime(breakData.end_time)}
                    </>
                  ) : (
                    <>
                      {' '}
                      <PlayArrowIcon fontSize="small" sx={{ verticalAlign: 'middle' }} />
                    </>
                  )}
                </Typography>
                {breakData.is_active && (
                  <Chip
                    label={<Trans>Aktiv</Trans>}
                    size="small"
                    color="warning"
                    sx={{ height: 20, fontSize: '0.7rem' }}
                  />
                )}
              </Box>
              <Typography variant="caption" color="text.secondary">
                <Trans>Dauer</Trans>: {formatDuration(breakData.duration_minutes, breakData.is_active)}
              </Typography>
            </Box>
          </Box>

          {!readonly && (
            <Box sx={{ display: 'flex', gap: 0.5 }}>
              <Tooltip title={<Trans>Bearbeiten</Trans>}>
                <IconButton
                  size="small"
                  onClick={() => onEdit?.(breakData)}
                  disabled={breakData.is_active}
                >
                  <EditIcon fontSize="small" />
                </IconButton>
              </Tooltip>
              <Tooltip title={<Trans>Löschen</Trans>}>
                <IconButton
                  size="small"
                  onClick={() => onDelete?.(breakData.id)}
                  disabled={breakData.is_active}
                  color="error"
                >
                  <DeleteIcon fontSize="small" />
                </IconButton>
              </Tooltip>
            </Box>
          )}
        </Box>
      </CardContent>
    </Card>
  );
};

export default BreakTimelineCard;