import React, { useState } from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import Button from '@mui/material/Button';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import CircularProgress from '@mui/material/CircularProgress';
import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
import CheckIcon from '@mui/icons-material/Check';
import CloseIcon from '@mui/icons-material/Close';
import CancelIcon from '@mui/icons-material/Cancel';
import { Trans, t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import WidgetWrapper from './WidgetWrapper';
import { IncomingSwapRequest, OutgoingSwapRequest, ShiftInfo } from '../../types/swapReplacement';

interface SwapRequestsWidgetProps {
  incomingSwaps: IncomingSwapRequest[];
  outgoingSwaps: OutgoingSwapRequest[];
  loading: boolean;
  onRefresh: () => void;
  onAcceptSwap: (assignmentId: number) => Promise<void>;
  onDeclineSwap: (assignmentId: number) => Promise<void>;
  onCancelSwap: (assignmentId: number) => Promise<void>;
  actionLoading: boolean;
}

function formatShiftDate(shift: ShiftInfo): string {
  const date = new Date(shift.zs_date + 'T00:00:00');
  const day = date.getDate().toString().padStart(2, '0');
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  return `${day}.${month}`;
}

function formatShiftTime(shift: ShiftInfo): string {
  const start = shift.zs_start_time?.substring(0, 5) || '';
  const end = shift.zs_end_time?.substring(0, 5) || '';
  return `${start} - ${end}`;
}

const SwapRequestsWidget: React.FC<SwapRequestsWidgetProps> = ({
  incomingSwaps,
  outgoingSwaps,
  loading,
  onRefresh,
  onAcceptSwap,
  onDeclineSwap,
  onCancelSwap,
  actionLoading,
}) => {
  const { i18n } = useLingui();
  const [tab, setTab] = useState<number>(0);

  const totalCount: number = incomingSwaps.length + outgoingSwaps.length;

  return (
    <WidgetWrapper
      title={i18n._(t`Schichttausch`)}
      icon={<SwapHorizIcon />}
      loading={loading}
      onRefresh={onRefresh}
      badge={totalCount}
      badgeColor={incomingSwaps.length > 0 ? 'error' : 'primary'}
      empty={totalCount === 0}
      emptyMessage={i18n._(t`Keine Tauschanfragen`)}
      emptyIcon={<SwapHorizIcon sx={{ fontSize: 40 }} />}
    >
      <Box>
        <Tabs
          value={tab}
          onChange={(_, v: number) => setTab(v)}
          variant="fullWidth"
          sx={{
            minHeight: 40,
            borderBottom: '1px solid',
            borderColor: 'divider',
            '& .MuiTab-root': {
              minHeight: 40,
              py: 1,
              fontSize: '0.8rem',
              fontWeight: 500,
              textTransform: 'none',
              letterSpacing: 0,
            },
            '& .MuiTabs-indicator': {
              height: 2,
              borderRadius: 1,
            },
          }}
        >
          <Tab
            label={
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
                <Trans>Eingehend</Trans>
                {incomingSwaps.length > 0 && (
                  <Box
                    component="span"
                    sx={{
                      display: 'inline-flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      minWidth: 18,
                      height: 18,
                      borderRadius: 9,
                      bgcolor: 'error.main',
                      color: 'error.contrastText',
                      fontSize: '0.65rem',
                      fontWeight: 700,
                      px: 0.5,
                      lineHeight: 1,
                    }}
                  >
                    {incomingSwaps.length}
                  </Box>
                )}
              </Box>
            }
          />
          <Tab
            label={
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
                <Trans>Ausgehend</Trans>
                {outgoingSwaps.length > 0 && (
                  <Box
                    component="span"
                    sx={{
                      display: 'inline-flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      minWidth: 18,
                      height: 18,
                      borderRadius: 9,
                      bgcolor: 'primary.main',
                      color: 'primary.contrastText',
                      fontSize: '0.65rem',
                      fontWeight: 700,
                      px: 0.5,
                      lineHeight: 1,
                    }}
                  >
                    {outgoingSwaps.length}
                  </Box>
                )}
              </Box>
            }
          />
        </Tabs>

        <List disablePadding sx={{ overflow: 'auto' }}>
          {tab === 0 && incomingSwaps.map((swap: IncomingSwapRequest) => (
            <ListItem
              key={swap.request_assignment_id}
              sx={{
                borderBottom: '1px solid',
                borderColor: 'divider',
                py: 2,
                px: 2.5,
                flexDirection: 'column',
                alignItems: 'stretch',
                '&:last-child': { borderBottom: 'none' },
              }}
            >
              <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1, mb: 1 }}>
                <Typography variant="body2" fontWeight={600} sx={{ fontSize: '0.85rem' }}>
                  {swap.other_user.name}
                </Typography>
                <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.75rem' }}>
                  <Trans>möchte tauschen</Trans>
                </Typography>
              </Box>

              <Box
                sx={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 1,
                  mb: 1.5,
                  py: 1,
                  px: 1.5,
                  bgcolor: 'action.hover',
                  borderRadius: 1.5,
                }}
              >
                <Box sx={{ flex: 1, textAlign: 'center' }}>
                  <Typography variant="body2" sx={{ fontSize: '0.8rem', fontWeight: 500, color: 'text.secondary' }}>
                    {formatShiftDate(swap.their_shift)}
                  </Typography>
                  <Typography variant="caption" sx={{ color: 'text.disabled', fontVariantNumeric: 'tabular-nums' }}>
                    {formatShiftTime(swap.their_shift)}
                  </Typography>
                </Box>
                <SwapHorizIcon sx={{ fontSize: 18, color: 'text.disabled', flexShrink: 0 }} />
                <Box sx={{ flex: 1, textAlign: 'center' }}>
                  <Typography variant="body2" sx={{ fontSize: '0.8rem', fontWeight: 600, color: 'primary.main' }}>
                    {formatShiftDate(swap.my_shift)}
                  </Typography>
                  <Typography variant="caption" sx={{ color: 'primary.light', fontVariantNumeric: 'tabular-nums' }}>
                    {formatShiftTime(swap.my_shift)}
                  </Typography>
                </Box>
              </Box>

              <Box sx={{ display: 'flex', gap: 1 }}>
                <Button
                  size="small"
                  variant="contained"
                  disableElevation
                  color="success"
                  startIcon={actionLoading ? <CircularProgress size={14} /> : <CheckIcon sx={{ fontSize: 16 }} />}
                  disabled={actionLoading}
                  onClick={() => onAcceptSwap(swap.my_assignment_id)}
                  sx={{
                    fontSize: '0.75rem',
                    py: 0.5,
                    px: 2,
                    textTransform: 'none',
                    fontWeight: 600,
                    borderRadius: 1.5,
                  }}
                >
                  <Trans>Annehmen</Trans>
                </Button>
                <Button
                  size="small"
                  variant="contained"
                  disableElevation
                  color="error"
                  startIcon={actionLoading ? <CircularProgress size={14} /> : <CloseIcon sx={{ fontSize: 16 }} />}
                  disabled={actionLoading}
                  onClick={() => onDeclineSwap(swap.my_assignment_id)}
                  sx={{
                    fontSize: '0.75rem',
                    py: 0.5,
                    px: 2,
                    textTransform: 'none',
                    fontWeight: 600,
                    borderRadius: 1.5,
                  }}
                >
                  <Trans>Ablehnen</Trans>
                </Button>
              </Box>
            </ListItem>
          ))}

          {tab === 0 && incomingSwaps.length === 0 && (
            <Box sx={{ py: 4, textAlign: 'center' }}>
              <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.85rem' }}>
                <Trans>Keine eingehenden Tauschanfragen</Trans>
              </Typography>
            </Box>
          )}

          {tab === 1 && outgoingSwaps.map((swap: OutgoingSwapRequest) => (
            <ListItem
              key={swap.request_assignment_id}
              sx={{
                borderBottom: '1px solid',
                borderColor: 'divider',
                py: 2,
                px: 2.5,
                flexDirection: 'column',
                alignItems: 'stretch',
                '&:last-child': { borderBottom: 'none' },
              }}
            >
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
                <Typography variant="body2" fontWeight={600} sx={{ fontSize: '0.85rem' }}>
                  {swap.other_user.name}
                </Typography>
                <Chip
                  label={i18n._(t`Ausstehend`)}
                  size="small"
                  color="warning"
                  sx={{
                    height: 20,
                    fontSize: '0.65rem',
                    fontWeight: 600,
                    borderRadius: 5,
                  }}
                />
              </Box>

              <Box
                sx={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 1,
                  mb: 1.5,
                  py: 1,
                  px: 1.5,
                  bgcolor: 'action.hover',
                  borderRadius: 1.5,
                }}
              >
                <Box sx={{ flex: 1, textAlign: 'center' }}>
                  <Typography variant="body2" sx={{ fontSize: '0.8rem', fontWeight: 600, color: 'primary.main' }}>
                    {formatShiftDate(swap.my_shift)}
                  </Typography>
                  <Typography variant="caption" sx={{ color: 'primary.light', fontVariantNumeric: 'tabular-nums' }}>
                    {formatShiftTime(swap.my_shift)}
                  </Typography>
                </Box>
                <SwapHorizIcon sx={{ fontSize: 18, color: 'text.disabled', flexShrink: 0 }} />
                <Box sx={{ flex: 1, textAlign: 'center' }}>
                  <Typography variant="body2" sx={{ fontSize: '0.8rem', fontWeight: 500, color: 'text.secondary' }}>
                    {formatShiftDate(swap.their_shift)}
                  </Typography>
                  <Typography variant="caption" sx={{ color: 'text.disabled', fontVariantNumeric: 'tabular-nums' }}>
                    {formatShiftTime(swap.their_shift)}
                  </Typography>
                </Box>
              </Box>

              <Button
                size="small"
                variant="contained"
                disableElevation
                color="error"
                startIcon={actionLoading ? <CircularProgress size={14} /> : <CancelIcon sx={{ fontSize: 16 }} />}
                disabled={actionLoading}
                onClick={() => onCancelSwap(swap.request_assignment_id)}
                sx={{
                  fontSize: '0.75rem',
                  py: 0.5,
                  px: 2,
                  textTransform: 'none',
                  fontWeight: 600,
                  borderRadius: 1.5,
                  alignSelf: 'flex-start',
                }}
              >
                <Trans>Abbrechen</Trans>
              </Button>
            </ListItem>
          ))}

          {tab === 1 && outgoingSwaps.length === 0 && (
            <Box sx={{ py: 4, textAlign: 'center' }}>
              <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.85rem' }}>
                <Trans>Keine ausgehenden Tauschanfragen</Trans>
              </Typography>
            </Box>
          )}
        </List>
      </Box>
    </WidgetWrapper>
  );
};

export default React.memo(SwapRequestsWidget);