import React from 'react';
import styled from 'styled-components';
import Card from '@mui/material/Card';
import Tooltip from '@mui/material/Tooltip';
import SettingsIcon from '@mui/icons-material/Settings';
import { Trans } from '@lingui/macro';

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;
`;

const ActionButton = styled.div`
  height: 26px;
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.3rem 0.8rem;
  background: #f3f3f3;
  border-radius: 7px;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  color: black;
  gap: 6px;
  transition: background-color 0.3s ease, color 0.3s ease;

  img {
    height: 1.1rem;
  }

  &:hover {
    background-color: #e5f1ff;
    color: #0078cc;
  }
`;

export type CardProps = {
  info: {
    ticket_id?: number;
    long_id?: string;
    agb_id?: string | number;
    agb_name: string;
    agb_typ: string;
    grp_path?: string;
    agb_nextaufgabe?: string;
  };
  handleMoreInfoClick?: () => void;
  isExternal?: boolean;
};

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 DashCard = ({ info, handleMoreInfoClick, isExternal }: CardProps) => {
  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 handleCreateForm = (e: React.MouseEvent) => {
    e.stopPropagation();
    const id = info.agb_id || info.long_id;
    if (!id) return;
    const url = `form?byid=${id}`;
    (window as any).openFormPopup?.(url);
  };

  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>
      <ButtonContainer>
        <ActionButton onClick={handleCreateForm}>
          <img
            src='/icon8/next24.png'
            alt='next task icon'
          />
          <span><Trans>Jetzt starten</Trans></span>
        </ActionButton>
      </ButtonContainer>
    </StyledCard>
  );
};

export default DashCard;