import {
  ICharacterDailyTask,
  ICollectGlobalRewardRequest,
  TaskStatus,
} 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 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>
      <HeaderContainer>
        <GlobeIcon>🌍</GlobeIcon>
        <ProgressText>
          Global Tasks Completed: {completedTasks}/{totalTasks}
        </ProgressText>
      </HeaderContainer>
      <ProgressBar>
        <ProgressFill percentage={(completedTasks / totalTasks) * 100} />
      </ProgressBar>
      {allCompleted && (
        <>
          {shouldShowGlobalButton && (
            <CollectWrapper>
              <Button
                buttonType={ButtonTypes.RPGUIButton}
                onPointerDown={handleClaimAll}
              >
                Collect Global Rewards
              </Button>
            </CollectWrapper>
          )}
          {shouldShowClaimedMessage && (
            <ClaimedText>Global Rewards Claimed</ClaimedText>
          )}
        </>
      )}
    </GlobalProgressContainer>
  );
};

const GlobalProgressContainer = styled.div`
  background: rgba(0, 0, 0, 0.5) !important;
  border: 2px solid ${uiColors.darkGray} !important;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
`;

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

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

const ProgressText = styled.div`
  color: ${uiColors.white};
  text-align: center !important;
  margin-top: 8px;
  line-height: 1.2;
`;

const ProgressBar = styled.div`
  width: 100%;
  height: 8px;
  background: ${uiColors.darkGray};
  border-radius: 4px;
  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`
  color: ${uiColors.green};
  font-size: 0.9rem;
  text-align: center;
  margin-top: 8px;
  font-weight: bold;
`;

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