import React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import Avatar from '@mui/material/Avatar';
import AvatarGroup from '@mui/material/AvatarGroup';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import Tooltip from '@mui/material/Tooltip';
import ScheduleIcon from '@mui/icons-material/Schedule';
import PersonIcon from '@mui/icons-material/Person';
import GroupsIcon from '@mui/icons-material/Groups';
import { Trans, t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import WidgetWrapper from './WidgetWrapper';
import { UpcomingShift, Department } from '../../types/dashboard';

interface UpcomingWidgetProps {
  shifts: UpcomingShift[];
  departments: Department[];
  loading?: boolean;
  error?: string | null;
  timeRange: 6 | 8 | 12;
  selectedDepartmentId: number | null;
  onTimeRangeChange: (range: 6 | 8 | 12) => void;
  onDepartmentChange: (departmentId: number | null) => void;
  onRefresh?: () => void;
}

const UpcomingWidget: React.FC<UpcomingWidgetProps> = ({
  shifts,
  departments,
  loading = false,
  error = null,
  timeRange,
  selectedDepartmentId,
  onTimeRangeChange,
  onDepartmentChange,
  onRefresh,
}) => {
  const { i18n } = useLingui();

  const handleTimeRangeChange = (
    _event: React.MouseEvent<HTMLElement>,
    newRange: 6 | 8 | 12 | null
  ) => {
    if (newRange !== null) {
      onTimeRangeChange(newRange);
    }
  };

  const getContrastColor = (hexColor: string): string => {
    if (!hexColor) return '#000000';
    const r: number = parseInt(hexColor.slice(1, 3), 16);
    const g: number = parseInt(hexColor.slice(3, 5), 16);
    const b: number = parseInt(hexColor.slice(5, 7), 16);
    const luminance: number = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
    return luminance > 0.5 ? '#000000' : '#FFFFFF';
  };

  const getFillStatus = (shift: UpcomingShift): 'success' | 'warning' | 'error' => {
    const ratio: number = shift.assignedCount / shift.maxWorkers;
    if (ratio >= 1) return 'success';
    if (ratio >= 0.5) return 'warning';
    return 'error';
  };

  return (
    <WidgetWrapper
      title={i18n._(t`Kommende Schichten`)}
      icon={<ScheduleIcon />}
      loading={loading}
      error={error}
      empty={shifts.length === 0}
      emptyMessage={i18n._(t`Keine Schichten in den nächsten ${timeRange} Stunden`)}
      emptyIcon={<ScheduleIcon sx={{ fontSize: 48 }} />}
      onRefresh={onRefresh}
      badge={shifts.length > 0 ? shifts.length : undefined}
      badgeColor="info"
      headerActions={
        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
          <ToggleButtonGroup
            value={timeRange}
            exclusive
            onChange={handleTimeRangeChange}
            size="small"
            sx={{
              '& .MuiToggleButton-root': {
                px: 1.25,
                py: 0.25,
                fontSize: '0.7rem',
                fontWeight: 500,
                textTransform: 'none',
                borderRadius: 1.5,
                border: '1px solid',
                borderColor: 'divider',
                color: 'text.secondary',
                '&.Mui-selected': {
                  bgcolor: 'primary.main',
                  color: 'primary.contrastText',
                  borderColor: 'primary.main',
                  '&:hover': {
                    bgcolor: 'primary.dark',
                  },
                },
                '&:hover': {
                  bgcolor: 'action.hover',
                },
              },
            }}
          >
            <ToggleButton value={6}>6h</ToggleButton>
            <ToggleButton value={8}>8h</ToggleButton>
            <ToggleButton value={12}>12h</ToggleButton>
          </ToggleButtonGroup>

          <FormControl size="small" sx={{ minWidth: 120 }}>
            <Select
              value={selectedDepartmentId || ''}
              onChange={(e) =>
                onDepartmentChange(e.target.value === '' ? null : Number(e.target.value))
              }
              displayEmpty
              sx={{
                fontSize: '0.75rem',
                fontWeight: 500,
                height: 28,
                borderRadius: 1.5,
                '& .MuiOutlinedInput-notchedOutline': {
                  borderColor: 'divider',
                },
              }}
            >
              <MenuItem value="">
                <Trans>Alle</Trans>
              </MenuItem>
              {departments.map((dept: Department) => (
                <MenuItem key={dept.ber_id} value={dept.ber_id}>
                  {dept.ber_name}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </Box>
      }
    >
      <List disablePadding>
        {shifts.map((shift: UpcomingShift) => (
          <ListItem
            key={shift.shiftId}
            disablePadding
            sx={{
              display: 'block',
              px: 2,
              py: 1.5,
              borderBottom: '1px solid',
              borderColor: 'divider',
              bgcolor: shift.isUserAssigned ? 'primary.50' : 'transparent',
              transition: 'background-color 0.15s ease',
              '&:hover': {
                bgcolor: shift.isUserAssigned ? 'primary.100' : 'grey.50',
              },
              '&:last-child': {
                borderBottom: 'none',
              },
            }}
          >
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.75 }}>
              <Typography
                variant="body2"
                sx={{ fontWeight: 600, minWidth: 100, color: 'text.primary' }}
              >
                {shift.shiftStartTime} - {shift.shiftEndTime}
              </Typography>
              <Chip
                size="small"
                label={shift.shiftName}
                sx={{
                  bgcolor: shift.shiftColor || 'grey.200',
                  color: shift.shiftColor ? getContrastColor(shift.shiftColor) : 'text.primary',
                  fontWeight: 500,
                  maxWidth: 150,
                  borderRadius: 1.5,
                  height: 22,
                  fontSize: '0.7rem',
                }}
              />
              <Typography
                variant="caption"
                sx={{ ml: 'auto', color: 'text.secondary', fontWeight: 500 }}
              >
                {shift.departmentName}
              </Typography>
            </Box>

            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flex: 1 }}>
                {(shift.assignments?.length ?? 0) > 0 ? (
                  <>
                    <AvatarGroup
                      max={3}
                      sx={{
                        '& .MuiAvatar-root': {
                          width: 22,
                          height: 22,
                          fontSize: '0.65rem',
                          fontWeight: 600,
                          border: '1.5px solid',
                          borderColor: 'background.paper',
                        },
                      }}
                    >
                      {shift.assignments.map((user) => (
                        <Tooltip key={user.userId} title={user.userName}>
                          {user.userPhoto ? (
                            <Avatar
                              src={user.userPhoto}
                              alt={user.userName}
                              sx={{
                                border: user.isCurrentUser
                                  ? '2px solid'
                                  : undefined,
                                borderColor: user.isCurrentUser
                                  ? 'primary.main'
                                  : undefined,
                              }}
                            />
                          ) : (
                            <Avatar
                              sx={{
                                bgcolor: user.isCurrentUser ? 'primary.main' : 'grey.400',
                              }}
                            >
                              {user.userInitials}
                            </Avatar>
                          )}
                        </Tooltip>
                      ))}
                    </AvatarGroup>
                    <Typography
                      variant="caption"
                      sx={{ color: 'text.secondary', fontWeight: 500 }}
                    >
                      {shift.assignments
                        .slice(0, 2)
                        .map((u) => (u.isCurrentUser ? i18n._(t`DU`) : u.userName.split(' ')[0]))
                        .join(', ')}
                      {shift.assignments.length > 2 && `, +${shift.assignments.length - 2}`}
                    </Typography>
                  </>
                ) : (
                  <Typography
                    variant="caption"
                    sx={{ color: 'text.disabled', fontStyle: 'italic', fontWeight: 500 }}
                  >
                    <Trans>Keine Zuweisungen</Trans>
                  </Typography>
                )}
              </Box>

              <Chip
                size="small"
                icon={<GroupsIcon sx={{ fontSize: 13 }} />}
                label={`${shift.assignedCount}/${shift.maxWorkers}`}
                color={getFillStatus(shift)}
                variant="filled"
                sx={{
                  fontWeight: 600,
                  borderRadius: 1.5,
                  height: 22,
                  fontSize: '0.7rem',
                  '& .MuiChip-icon': {
                    ml: 0.5,
                  },
                }}
              />

              {shift.isUserAssigned && (
                <Chip
                  size="small"
                  icon={<PersonIcon sx={{ fontSize: 13 }} />}
                  label={i18n._(t`DU`)}
                  color="primary"
                  variant="filled"
                  sx={{
                    fontWeight: 600,
                    borderRadius: 1.5,
                    height: 22,
                    fontSize: '0.7rem',
                    '& .MuiChip-icon': {
                      ml: 0.5,
                    },
                  }}
                />
              )}
            </Box>
          </ListItem>
        ))}
      </List>
    </WidgetWrapper>
  );
};

export default UpcomingWidget;