import React from 'react';
import { Text, View } from '@/components/shared/Themed';
import styled from '@emotion/native';
import { formatTime } from '@/components/shared/business/timeHelpers';
import Button from '@/components/shared/Button';
import { ElasticSpacer, VerticalSpacer } from '@/components/shared/Spacers';
import { TimerBgColor } from '@/components/useCases/timer/business/type';
import { useNavigation } from '@react-navigation/native';
import { i18n } from '@/app/i18n/i18n';

interface TimerContentProps {
  isWorkPhase: boolean;
  isPreparationPhase?: boolean;
  timeLeft: number;
  reps: number;
  currentRep: number;
  isRunning: boolean;
  handleStop: () => void;
  handleContinue: () => void;
  nextRep: () => void;
  previousRep: () => void;
  bgColor: TimerBgColor;
  handleReset: () => void;
}

const t = i18n.scoped('timer.timerContent');

export default function TimerContent({
  isWorkPhase,
  isPreparationPhase = false,
  timeLeft,
  reps,
  currentRep,
  isRunning,
  handleStop,
  handleContinue,
  handleReset,
  nextRep,
  previousRep,
  bgColor,
}: TimerContentProps ) {
  const navigation = useNavigation();

  const handleBackClick = () => {
    navigation.goBack();
    handleReset();
  };

  const getTitle = () => {
    if (isPreparationPhase) return t('preparation');
    if (isWorkPhase) return t('fight');
    return t('rest');
  };

  // Handler for disabled buttons during preparation phase
  const handleNoop = () => {
    // Ne fait rien si on est en phase de préparation
  };

  return (
    <>
      <Title isPreparationPhase={isPreparationPhase}>{getTitle()}</Title>

      <VerticalSpacer heightUnits={8} />

      <Time isPreparationPhase={isPreparationPhase}>
        {formatTime(timeLeft)}
      </Time>

      <VerticalSpacer heightUnits={8} />

      {!isPreparationPhase && <Reps>{currentRep} / {reps}</Reps>}
      {isPreparationPhase && <Reps isPreparationPhase={true}>{t('preparationDescription')}</Reps>}

      <VerticalSpacer heightUnits={8} />

      <ButtonContainer bgColor={bgColor}>
        <Button
          label={t('prev')}
          onPress={isPreparationPhase ? handleNoop : previousRep}
          status={isPreparationPhase ? 'disabled' : 'ready'}
        />

        <ElasticSpacer />

        {isRunning ? (
          <Button label={t('stop')} onPress={handleStop} />
        ) : (
          <Button label={t('start')} onPress={handleContinue} />
        )}

        <ElasticSpacer />

        <Button
          label={t('next')}
          onPress={isPreparationPhase ? nextRep : nextRep}
          status="ready"
        />
      </ButtonContainer>

      <VerticalSpacer heightUnits={4} />

      <Button label={i18n.t('back')} onPress={handleBackClick} />
    </>
  );
}

const ButtonContainer = styled(View)<{ bgColor: TimerBgColor }>(({ theme, bgColor }) => ({
  backgroundColor: theme.colors.fixed[bgColor],
  flexDirection: 'row',
  justifyContent: 'space-between',
}));

const Title = styled(Text)<{ isPreparationPhase?: boolean }>(({ theme, isPreparationPhase = false }) => ({
  fontSize: 50,
  fontWeight: 'bold',
  color: isPreparationPhase ? theme.colors.fixed.black : theme.colors.fixed.white
}));

const Time = styled(Text)<{ isPreparationPhase?: boolean }>(({ theme, isPreparationPhase = false }) => ({
  fontSize: 100,
  fontWeight: 'bold',
  color: isPreparationPhase ? theme.colors.fixed.black : theme.colors.fixed.white
}));

const Reps = styled(Text)<{ isPreparationPhase?: boolean }>(({ theme, isPreparationPhase = false }) => ({
  fontSize: 30,
  fontWeight: 'bold',
  color: isPreparationPhase ? theme.colors.fixed.black : theme.colors.fixed.white
}));