import React, { useState } from 'react';
import styled from 'styled-components';
import Card from '@mui/material/Card';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import Tooltip from '@mui/material/Tooltip';
import SettingsIcon from '@mui/icons-material/Settings';
import { Trans } from '@lingui/macro';
import axios from 'axios';
import { withDashToken } from '../requests';

const StyledCard = styled(Card)`
  display: flex;
  flex-direction: column;
  padding: 1em;
  margin-bottom: 1em;
  font-size: 1rem;
  position: relative;
`;

const TopRow = styled.div`
  display: flex;
  align-items: center;
  width: 100%;
`;

const IconContainer = styled.div`
  margin-right: 1em;
  width: 24px;
  height: 24px;
`;

const TextContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
`;

const NameRow = styled.div`
  display: flex;
  align-items: center;
  gap: 4px;
`;

const StyledID = styled.div`
  font-weight: bold;
`;

const ConfigLink = styled.a`
  display: inline-flex;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: #999;
  &:hover {
    color: #0099ff;
  }
  ${NameRow}:hover & {
    opacity: 1;
  }
`;

const NameInfo = styled.div``;

const DateDisplay = styled.div`
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.85em;
  color: #666;
`;

const ButtonContainer = styled.div`
  display: flex;
  gap: 0.5rem;
  margin-top: 1em;
  align-items: center;
`;

interface AvailableUser {
  id: number;
  name: string;
}

type CardProps = {
  info: {
    agb_id?: string | number;
    agb_name: string;
    agb_typ: string;
    grp_path?: string;
    agb_nextaufgabe?: string;
    responsibility_user_id?: number | null;
    responsibility_user_name?: string | null;
    available_users?: AvailableUser[];
  };
};

const formatDate = (dateStr: string) => {
  const date = new Date(dateStr);
  const currentDate = new Date();

  const startOfToday = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate());
  const endOfToday = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), 23, 59, 59);

  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');

  if (date >= startOfToday && date <= endOfToday) {
    return `${hours}:${minutes}`;
  } else {
    return `${day}.${month}.${year}`;
  }
};

const IntervallZuweisenCard = ({ info }: CardProps) => {
  const [selectedUserId, setSelectedUserId] = useState<number | ''>(
    info.responsibility_user_id ?? ''
  );

  const iconPathMap: Record<string, string> = {
    MWT: '/icon8/mwt24.png',
    WTG: '/icon8/wtg24.png',
    VBG: '/icon8/vbg24.png',
    MWTi: '/icon8/mwti24.png',
    WTGi: '/icon8/wtgi24.png',
    VBGi: '/icon8/vbgi24.png'
  };

  const getIconPath = (typ: string) => {
    return iconPathMap[typ] || '/icons/default.png';
  };

  const handleResponsibilityChange = async (userId: number | '') => {
    setSelectedUserId(userId);
    const agbId = info.agb_id;
    if (!agbId) return;

    try {
      await axios.post(withDashToken(`/api/dashboards/agb/${agbId}/responsibility`), {
        user_id: userId || null,
      });
    } catch {
      setSelectedUserId(info.responsibility_user_id ?? '');
    }
  };

  const hasAvailableUsers = info.agb_typ === 'WTG' && info.available_users && info.available_users.length > 0;
  const iconPath = getIconPath(info.agb_typ);

  return (
    <StyledCard>
      <TopRow>
        <IconContainer>
          <img src={iconPath} alt="Icon" />
        </IconContainer>
        <TextContainer>
          <NameRow>
            <StyledID>{info.agb_name}</StyledID>
            {info.agb_id && (
              <Tooltip title={<Trans>Konfiguration öffnen</Trans>} arrow>
                <ConfigLink
                  href={`/config/AGB${info.agb_id}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  onClick={(e) => e.stopPropagation()}
                >
                  <SettingsIcon sx={{ fontSize: 16 }} />
                </ConfigLink>
              </Tooltip>
            )}
          </NameRow>
          <NameInfo>{info.grp_path || 'No Additional Info'}</NameInfo>
        </TextContainer>
        {info.agb_nextaufgabe && (
          <DateDisplay>anstehend seit {formatDate(info.agb_nextaufgabe)}</DateDisplay>
        )}
      </TopRow>
      {hasAvailableUsers && (
        <ButtonContainer>
          <Select
            value={selectedUserId}
            onChange={(e) => handleResponsibilityChange(e.target.value as number | '')}
            displayEmpty
            size="small"
            sx={{
              minWidth: 160,
              height: 28,
              fontSize: 13,
              borderRadius: '7px',
            }}
          >
            <MenuItem value="">
              <em><Trans>Nicht zugewiesen</Trans></em>
            </MenuItem>
            {info.available_users!.map((user) => (
              <MenuItem key={user.id} value={user.id}>
                {user.name}
              </MenuItem>
            ))}
          </Select>
        </ButtonContainer>
      )}
    </StyledCard>
  );
};

export default IntervallZuweisenCard;