import React, { useState, memo } from 'react';
import Box from '@mui/material/Box';
import Avatar from '@mui/material/Avatar';
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 List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import GroupIcon from '@mui/icons-material/Group';
import WorkIcon from '@mui/icons-material/Work';
import CoffeeIcon from '@mui/icons-material/Coffee';
import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
import { Trans, t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { format } from 'date-fns';
import { de } from 'date-fns/locale';
import WidgetWrapper from './WidgetWrapper';
import SessionDetailModal from './SessionDetailModal';
import { ActiveSession } from '../../types/dashboard';

interface SessionsWidgetProps {
  sessions: ActiveSession[];
  loading?: boolean;
  error?: string | null;
  onRefresh?: () => void;
  refreshing?: boolean;
  onClockOut?: (sessionId: number) => Promise<void>;
  onStartBreak?: (sessionId: number) => Promise<void>;
  onEndBreak?: (sessionId: number) => Promise<void>;
  onReplaceUser?: (sessionId: number, userId: number) => void;
  widgetRef?: (node: HTMLDivElement | null) => void;
}

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 counterSx = {
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  gap: 0.5,
  minWidth: 20,
  height: 22,
  borderRadius: '11px',
  px: 1,
  fontSize: '0.7rem',
  fontWeight: 600,
  lineHeight: 1,
} as const;

const SessionsWidget: React.FC<SessionsWidgetProps> = ({
  sessions,
  loading = false,
  error = null,
  onRefresh,
  refreshing = false,
  onClockOut,
  onStartBreak,
  onEndBreak,
  onReplaceUser,
  widgetRef,
}) => {
  const { i18n } = useLingui();
  const [selectedSession, setSelectedSession] = useState<ActiveSession | null>(null);
  const [modalOpen, setModalOpen] = useState<boolean>(false);

  const handleRowClick = (session: ActiveSession) => {
    setSelectedSession(session);
    setModalOpen(true);
  };

  const handleCloseModal = () => {
    setModalOpen(false);
    setSelectedSession(null);
  };

  const handleReplaceClick = (e: React.MouseEvent, session: ActiveSession) => {
    e.stopPropagation();
    if (onReplaceUser) {
      onReplaceUser(session.sessionId, session.userId);
    }
  };

  const workingCount: number = sessions.filter((s) => !s.isOnBreak).length;
  const breakCount: number = sessions.filter((s) => s.isOnBreak).length;

  return (
    <>
      <Box ref={widgetRef}>
        <WidgetWrapper
          title={i18n._(t`Aktive Sitzungen`)}
          icon={<GroupIcon />}
          loading={loading}
          error={error}
          empty={sessions.length === 0}
          emptyMessage={i18n._(t`Keine aktiven Sitzungen`)}
          emptyIcon={<WorkIcon sx={{ fontSize: 40 }} />}
          onRefresh={onRefresh}
          refreshing={refreshing}
          badge={sessions.length > 0 ? sessions.length : undefined}
          badgeColor="success"
          headerActions={
            sessions.length > 0 ? (
              <Box sx={{ display: 'flex', gap: 0.75, alignItems: 'center' }}>
                <Box
                  component="span"
                  sx={{
                    ...counterSx,
                    bgcolor: 'success.main',
                    color: 'success.contrastText',
                  }}
                >
                  <WorkIcon sx={{ fontSize: 12 }} />
                  {workingCount}
                </Box>
                {breakCount > 0 && (
                  <Box
                    component="span"
                    sx={{
                      ...counterSx,
                      bgcolor: 'warning.main',
                      color: 'warning.contrastText',
                    }}
                  >
                    <CoffeeIcon sx={{ fontSize: 12 }} />
                    {breakCount}
                  </Box>
                )}
              </Box>
            ) : undefined
          }
        >
          <List disablePadding>
            {sessions.map((session) => (
              <ListItem
                key={session.sessionId}
                onClick={() => handleRowClick(session)}
                sx={{
                  px: 2.5,
                  py: 1.5,
                  cursor: 'pointer',
                  borderBottom: '1px solid',
                  borderColor: 'divider',
                  transition: 'background-color 0.15s ease',
                  '&:hover': {
                    bgcolor: 'action.hover',
                  },
                  '&:last-child': { borderBottom: 'none' },
                }}
              >
                <Box
                  sx={{
                    width: 8,
                    height: 8,
                    borderRadius: '50%',
                    bgcolor: session.isOnBreak ? 'warning.main' : 'success.main',
                    mr: 1.5,
                    flexShrink: 0,
                  }}
                />

                <Box
                  sx={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1,
                    minWidth: 0,
                    mr: 2,
                    flexShrink: 1,
                    overflow: 'hidden',
                  }}
                >
                  <Chip
                    size="small"
                    label={session.shiftName || 'Flexible'}
                    sx={{
                      bgcolor: session.shiftColor || 'grey.200',
                      color: session.shiftColor
                        ? getContrastColor(session.shiftColor)
                        : 'text.primary',
                      fontWeight: 500,
                      fontSize: '0.7rem',
                      height: 22,
                      borderRadius: 1,
                      maxWidth: 120,
                      '& .MuiChip-label': {
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                      },
                    }}
                  />
                  <Typography
                    variant="body2"
                    noWrap
                    sx={{
                      color: 'text.secondary',
                      fontVariantNumeric: 'tabular-nums',
                      fontSize: '0.8rem',
                    }}
                  >
                    {session.shiftStartTime || '\u2014'} - {session.shiftEndTime || '\u2014'}
                  </Typography>
                </Box>

                <Box
                  sx={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1,
                    flex: 1,
                    minWidth: 0,
                  }}
                >
                  {session.userPhoto ? (
                    <Avatar
                      src={session.userPhoto}
                      alt={session.userName}
                      sx={{ width: 28, height: 28 }}
                    />
                  ) : (
                    <Avatar
                      sx={{
                        width: 28,
                        height: 28,
                        fontSize: '0.7rem',
                        fontWeight: 600,
                        bgcolor: session.isOnBreak ? 'warning.main' : 'success.main',
                      }}
                    >
                      {session.userInitials}
                    </Avatar>
                  )}
                  <Typography
                    variant="body2"
                    noWrap
                    sx={{
                      flex: 1,
                      minWidth: 0,
                      fontWeight: 600,
                      letterSpacing: '-0.01em',
                    }}
                  >
                    {session.userName}
                  </Typography>
                </Box>

                <Chip
                  size="small"
                  label={session.isOnBreak ? i18n._(t`Pause`) : i18n._(t`Arbeitet`)}
                  sx={{
                    fontWeight: 500,
                    fontSize: '0.7rem',
                    height: 22,
                    borderRadius: 1,
                    mr: 1,
                    bgcolor: session.isOnBreak ? 'warning.main' : 'success.main',
                    color: session.isOnBreak ? 'warning.contrastText' : 'success.contrastText',
                  }}
                />

                <Typography
                  variant="caption"
                  sx={{
                    color: 'text.secondary',
                    minWidth: 44,
                    textAlign: 'right',
                    mr: 1,
                    fontVariantNumeric: 'tabular-nums',
                    fontWeight: 500,
                  }}
                >
                  {format(new Date(session.clockInTime), 'HH:mm', { locale: de })}
                </Typography>

                {onReplaceUser && (
                  <Tooltip title={<Trans>Mitarbeiter ersetzen</Trans>}>
                    <IconButton
                      size="small"
                      onClick={(e) => handleReplaceClick(e, session)}
                      sx={{
                        color: 'text.secondary',
                        '&:hover': {
                          color: 'primary.main',
                          bgcolor: 'action.hover',
                        },
                      }}
                    >
                      <SwapHorizIcon fontSize="small" />
                    </IconButton>
                  </Tooltip>
                )}
              </ListItem>
            ))}
          </List>
        </WidgetWrapper>
      </Box>

      <SessionDetailModal
        open={modalOpen}
        onClose={handleCloseModal}
        session={selectedSession}
        onClockOut={onClockOut}
        onStartBreak={onStartBreak}
        onEndBreak={onEndBreak}
      />
    </>
  );
};

export default memo(SessionsWidget);