import {
  ICharacterDailyTask,
  ICollectGlobalRewardRequest,
  TaskStatus,
  isMobileOrTablet,
} from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';
import { Button, ButtonTypes } from '../Button';

interface IGlobalTaskProgressProps {
  tasks: ICharacterDailyTask[];
  onClaimAllRewards: (tasks: ICollectGlobalRewardRequest) => void;
  globalRewardClaimed: boolean;
}

export const GlobalDailyProgress: React.FC<IGlobalTaskProgressProps> = ({
  tasks,
  onClaimAllRewards,
  globalRewardClaimed,
}) => {
  const isMobile = isMobileOrTablet();
  const totalTasks = tasks.length;
  const completedTasks = tasks.filter(
    task => task.status === TaskStatus.Completed
  ).length;

  const allCompleted =
    tasks.length > 0 &&
    tasks.every(task => task.status === TaskStatus.Completed);

  const allClaimed =
    tasks.length > 0 && tasks.every(task => task.claimed === true);

  const shouldShowGlobalButton =
    allCompleted && allClaimed && !globalRewardClaimed;

  const shouldShowClaimedMessage = globalRewardClaimed;

  const handleClaimAll = () => {
    const taskIdentifiers = tasks.map(task => ({
      taskKey: task.key,
      type: task.type,
    }));
    onClaimAllRewards({ tasks: taskIdentifiers });
  };

  return (
    <GlobalProgressContainer isMobile={isMobile}>
      <HeaderContainer>
        <GlobeIcon>🌍</GlobeIcon>
        <ProgressText isMobile={isMobile}>
          {isMobile ? `${completedTasks}/${totalTasks} Complete` : `Global Tasks: ${completedTasks}/${totalTasks}`}
        </ProgressText>
      </HeaderContainer>
      <ProgressBar>
        <ProgressFill percentage={(completedTasks / totalTasks) * 100} />
      </ProgressBar>
      {allCompleted && (
        <>
          {shouldShowGlobalButton && (
            <CollectWrapper>
              <Button
                buttonType={ButtonTypes.RPGUIButton}
                onPointerDown={handleClaimAll}
              >
                {isMobile ? 'Global Rewards' : 'Collect Global Rewards'}
              </Button>
            </CollectWrapper>
          )}
          {shouldShowClaimedMessage && (
            <ClaimedText isMobile={isMobile}>✓ Global Rewards Claimed</ClaimedText>
          )}
        </>
      )}
    </GlobalProgressContainer>
  );
};

const GlobalProgressContainer = styled.div<{ isMobile: boolean }>`
  background: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid ${uiColors.blue} !important;
  border-radius: ${props => props.isMobile ? '4px' : '6px'};
  padding: ${props => props.isMobile ? '6px' : '8px'};
  display: flex;
  flex-direction: column;
  gap: ${props => props.isMobile ? '6px' : '8px'};
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  margin-bottom: ${props => props.isMobile ? '4px' : '6px'};
`;

const HeaderContainer = styled.div`
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
`;

const GlobeIcon = styled.span`
  font-size: 1rem !important;
  line-height: 1;
  color: ${uiColors.blue};
  display: flex;
  align-items: center;
  justify-content: center;
`;

const ProgressText = styled.div<{ isMobile: boolean }>`
  color: ${uiColors.white};
  font-size: ${props => props.isMobile ? '0.75rem' : '0.8rem'};
  font-weight: 500;
  flex: 1;
  line-height: 1.2;
`;

const ProgressBar = styled.div`
  width: 100%;
  height: 4px;
  background: ${uiColors.darkGray};
  border-radius: 2px;
  overflow: hidden;
`;

const ProgressFill = styled.div<{ percentage: number }>`
  width: ${props => props.percentage}%;
  height: 100%;
  background: ${uiColors.green};
  transition: width 0.3s ease;
`;

const ClaimedText = styled.span<{ isMobile: boolean }>`
  color: ${uiColors.green};
  font-size: ${props => props.isMobile ? '0.8rem' : '0.9rem'};
  text-align: center;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
`;

const CollectWrapper = styled.div`
  && {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 4px 0 !important;
  }
`;
