import {
  ICharacterDailyTask,
  isMobileOrTablet,
  TaskStatus,
  TaskType,
} from '@rpg-engine/shared';
import React from 'react';
import styled, { css, keyframes } from 'styled-components';
import { uiColors } from '../../constants/uiColors';
import { Button, ButtonTypes } from '../Button';
import { Ellipsis } from '../shared/Ellipsis';
import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
import { DailyRewardsTooltip } from './DailyRewardsTooltip';
import { TaskProgressDetails } from './TaskProgressDetails';
import { formatDifficulty, formatTaskKey, getStatusInfo } from './utils/dailyTasks.utils';


interface IDailyTaskItemProps {
  task: ICharacterDailyTask;
  spriteKey: string;
  onClaimReward: (taskKey: string, taskType: TaskType) => void;
  itemsAtlasJSON: Record<string, any>;
  itemsAtlasIMG: string;
  iconAtlasJSON?: Record<string, any>;
  iconAtlasIMG?: string;
  isRewardClaimed: boolean;
  isPinned?: boolean;
}

export const DailyTaskItem: React.FC<IDailyTaskItemProps> = ({
  task,
  spriteKey,
  onClaimReward,
  itemsAtlasJSON,
  itemsAtlasIMG,
  iconAtlasJSON,
  iconAtlasIMG,
  isRewardClaimed,
  isPinned,
}) => {
  const isMobile = isMobileOrTablet();

  const isCompleted = task.status === TaskStatus.Completed;
  const isInProgress = task.status === TaskStatus.InProgress;
  const isNotStarted = task.status === TaskStatus.NotStarted;
  const isClaimed = task.claimed || isRewardClaimed;
  const isChallenge = task.difficulty?.toLowerCase() === 'challenge';

  const handleClaimReward = () => {
    onClaimReward(task.key, task.type);
  };

  return (
    <TaskContainer
      isMobile={isMobile}
      isCompleted={isCompleted}
      isInProgress={isInProgress}
      isNotStarted={isNotStarted}
      isPinned={isPinned}
      isChallenge={isChallenge}
    >
      <TaskHeader isMobile={isMobile}>
        <TaskHeaderLeft>
          {iconAtlasJSON && iconAtlasIMG && (
            <IconWrapper>
              <SpriteFromAtlas
                atlasJSON={iconAtlasJSON}
                atlasIMG={iconAtlasIMG}
                spriteKey={spriteKey}
                width={isMobile ? 10 : 12}
                height={isMobile ? 10 : 12}
                imgScale={2}

              />
            </IconWrapper>
          )}
          <TaskTitleSection>
            <TaskTitle isMobile={isMobile}>
              <Ellipsis maxWidth="100%" maxLines={1}>
                {task.name ?? formatTaskKey(task.key)}
              </Ellipsis>
            </TaskTitle>
            <TaskMeta isMobile={isMobile}>
              <MetaItem>
                <MetaLabel>Difficulty:</MetaLabel>
                <TaskDifficulty difficulty={task.difficulty}>
                  {formatDifficulty(task.difficulty)}
                </TaskDifficulty>
              </MetaItem>
              <MetaDivider>•</MetaDivider>
              <MetaItem>
                <MetaLabel>Status:</MetaLabel>
                <StatusText color={getStatusInfo(task).color}>
                  {getStatusInfo(task).text}
                </StatusText>
              </MetaItem>
            </TaskMeta>
          </TaskTitleSection>
        </TaskHeaderLeft>

        <TaskHeaderRight>
          {isClaimed && <ClaimedBadge isMobile={isMobile}>✓</ClaimedBadge>}
        </TaskHeaderRight>
      </TaskHeader>

      <TaskBody isMobile={isMobile}>
        <TaskDescription isMobile={isMobile}>
          <Ellipsis maxWidth="100%" maxLines={isMobile ? 2 : 1}>
            {task.description}
          </Ellipsis>
        </TaskDescription>

        <TaskProgressDetails task={task} />

        {task.rewards && task.rewards.length > 0 && (
          <RewardsSection>
            <DailyRewardsTooltip
              rewards={task.rewards}
              itemsAtlasJSON={itemsAtlasJSON}
              itemsAtlasIMG={itemsAtlasIMG}
              iconAtlasJSON={iconAtlasJSON}
              iconAtlasIMG={iconAtlasIMG}
            />
          </RewardsSection>
        )}
      </TaskBody>

      {isCompleted && !isClaimed && (
        <TaskFooter isMobile={isMobile}>
          <Button
            buttonType={ButtonTypes.RPGUIButton}
            onPointerDown={handleClaimReward}
          >
            {isMobile ? 'Collect Reward' : 'Collect Reward'}
          </Button>
        </TaskFooter>
      )}
    </TaskContainer>
  );
};

const pulseAnimation = keyframes`
  0% {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
  }
  100% {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
`;

const TaskContainer = styled.div<{
  isMobile: boolean;
  isCompleted: boolean;
  isInProgress: boolean;
  isNotStarted: boolean;
  isPinned?: boolean;
  isChallenge?: boolean;
}>`
  background: ${props =>
    props.isChallenge ? 'rgb(209, 39, 42)' :
      props.isPinned ? 'rgba(255, 215, 0, 0.1)' :
        'rgba(0, 0, 0, 0.6)'
  } !important;
  border: 1px solid ${uiColors.darkGray} !important;
  border-radius: ${props => props.isMobile ? '4px' : '6px'};
  padding: ${props => props.isMobile ? '10px' : '14px'};
  display: flex;
  flex-direction: column;
  gap: ${props => props.isMobile ? '8px' : '12px'};
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  font-style: normal;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  
  /* Task status visual states */
  opacity: 1;
  
  ${props => props.isNotStarted && `
    filter: grayscale(0.7);
  `}
  
  ${props => props.isInProgress && css`
    animation: ${pulseAnimation} 2s ease-in-out infinite;
  `}
  
  * {
    font-style: normal !important;
  }
  
  &:hover {
    background: ${props =>
    props.isPinned ? 'rgba(255, 215, 0, 0.25)' : 'rgba(0, 0, 0, 0.7)'
  } !important;
    border-color: ${uiColors.yellow};
    opacity: 1;
  }
`;

const TaskHeader = styled.div<{ isMobile?: boolean }>`
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid ${uiColors.darkGray};
  padding-bottom: ${props => props.isMobile ? '8px' : '10px'};
  min-height: 36px;
`;

const TaskHeaderLeft = styled.div`
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
`;

const TaskHeaderRight = styled.div`
  display: flex;
  align-items: center;
  flex-shrink: 0;
`;

const TaskTitleSection = styled.div`
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
`;

const TaskMeta = styled.div<{ isMobile: boolean }>`
  display: flex;
  align-items: center;
  gap: ${props => props.isMobile ? '6px' : '8px'};
  flex-wrap: wrap;
`;

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

const MetaLabel = styled.span`
  color: ${uiColors.lightGray};
  font-size: 0.65rem;
  opacity: 0.8;
`;

const MetaDivider = styled.span`
  color: ${uiColors.darkGray};
  font-size: 0.7rem;
`;

const TaskDifficulty = styled.span<{ difficulty: string }>`
  color: ${props =>
    props.difficulty.toLowerCase() === 'challenge'
      ? uiColors.red
      : uiColors.lightGray};
  font-size: 0.65rem;
  font-weight: 500;
`;

const StatusText = styled.span<{ color: string }>`
  color: ${props => props.color} !important;
  font-size: 0.65rem;
  font-weight: 500;
`;

const ClaimedBadge = styled.div<{ isMobile: boolean }>`
  background: ${uiColors.green};
  color: white;
  border-radius: 50%;
  width: ${props => props.isMobile ? '18px' : '20px'};
  height: ${props => props.isMobile ? '18px' : '20px'};
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: ${props => props.isMobile ? '10px' : '12px'};
  font-weight: bold;
  margin-left: 8px;
`;

const TaskBody = styled.div<{ isMobile?: boolean }>`
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: ${props => props.isMobile ? '4px 0' : '6px 0'};
`;

const RewardsSection = styled.div`
  margin-top: 4px;
`;

const TaskFooter = styled.div<{ isMobile?: boolean }>`
  display: flex;
  justify-content: center;
  padding-top: ${props => props.isMobile ? '8px' : '10px'};
  border-top: 1px solid ${uiColors.darkGray};
`;

const IconWrapper = styled.div`
  pointer-events: none;
  user-select: none;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 2px;
  margin-left: 2px;
  font-style: normal;


  
  * {
    font-style: normal !important;
  }
`;


const TaskTitle = styled.h3<{ isMobile: boolean }>`
  && {
    color: ${uiColors.yellow};
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: ${props => props.isMobile ? '0.85rem' : '0.9rem'};
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    font-weight: 600;
    word-wrap: break-word;
    overflow-wrap: break-word;

    span {
      color: inherit;
    }
  }
`;

const TaskDescription = styled.div<{ isMobile: boolean }>`
  color: ${uiColors.lightGray};
  font-size: ${props => props.isMobile ? '0.7rem' : '0.75rem'};
  line-height: 1.4;
  margin: 0;
  opacity: 0.9;
  word-wrap: break-word;
  overflow-wrap: break-word;
`;


