import {
  GetActiveSession,
  RemoveActiveSession,
  SaveActiveSession,
} from '@/lib/asyncStorage';
import {
  DEFAULT_FOCUS_DURATION_MINUTES,
  DEFAULT_SHORT_BREAK_DURATION_MINUTES,
} from '@/lib/sessionDefaults';
import { supabase } from '@/lib/supabase';
import type { SessionType, Task } from '@/lib/types';
import * as Haptics from 'expo-haptics';
import { router, Stack, useLocalSearchParams } from 'expo-router';
import * as React from 'react';
import {
  Alert,
  Animated,
  Dimensions,
  Easing,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';

const { width, height } = Dimensions.get('window');

const colors = {
  black: '#323F4E',
  red: '#F76A6A',
  text: '#ffffff',
};


/*
  TODO
  Make timer count down even when app is un-focused or closed.
  Set const endTime = Date.now() + duration and save that to the task, maybe? 
  Then trigger notif when endTime == Date.now()? 
  Then fetch endTime from DB -> if null then timer is inactive
  if !null then set timer to endTime  - Date.now() and start
  Might have to save duration as well in DB to preserve timer animation persistance
*/

const TIMER_OPTIONS = [...Array(13).keys()].map((index) => (index === 0 ? 1 : index * 5));
const ITEM_SIZE = width * 0.38;
const ITEM_SPACING = (width - ITEM_SIZE) / 2;
const TIMER_UNIT_IN_SECONDS = 60;
const HOLD_TO_CANCEL_MS = 2000;
const CANCEL_ANIMATION_DELAY_MS = 250;
const BUTTON_PRESS_IN_MS = 80;
const BUTTON_PRESS_OUT_MS = 140;
type PostSessionPrompt = {
  completedSessionType: SessionType;
  returnTaskId: string | null;
};

function formatTime(totalSeconds: number) {
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;

  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

function getSessionId(sessionData: unknown) {
  if (!sessionData || typeof sessionData !== 'object') {
    return null;
  }

  const maybeSession = sessionData as {
    sessionId?: string;
    sessionid?: string;
  };

  return maybeSession.sessionId ?? maybeSession.sessionid ?? null;
}

function getSessionLabel(sessionType: SessionType) {
  switch (sessionType) {
    case 'short_break':
      return 'Short Break';
    case 'long_break':
      return 'Long Break';
    default:
      return 'Sprint';
  }
}

type StartSessionInput = {
  sessionType: SessionType;
  taskId: string | null;
  durationSeconds: number;
};

export default function TimerScreen() {
  const [containerHeight, setContainerHeight] = React.useState(0);
  const duration = DEFAULT_FOCUS_DURATION_MINUTES;
  const [timerIsRunning, setIsRunning] = React.useState(false);
  const [timerOverlayVisible, setTimerOverlayVisible] = React.useState(false);
  const [timeRemaining, setTimeRemaining] = React.useState(0);
  const [task, setTask] = React.useState<Task | null>(null);
  const [currentSessionType, setCurrentSessionType] = React.useState<SessionType>('focus');
  const [postSessionPrompt, setPostSessionPrompt] = React.useState<PostSessionPrompt | null>(null);
  const [pickerDuration, setPickerDuration] = React.useState(DEFAULT_FOCUS_DURATION_MINUTES);

  const scrollX = React.useRef(new Animated.Value(0)).current;
  const pickerListRef = React.useRef<Animated.FlatList<number> | null>(null);
  const timerAnimation = React.useRef(new Animated.Value(0)).current;
  const buttonAnimation = React.useRef(new Animated.Value(0)).current;
  const taskDetailsAnimation = React.useRef(new Animated.Value(0)).current;
  const countdownAnimation = React.useRef(new Animated.Value(0)).current;
  const cancelButtonAnimation = React.useRef(new Animated.Value(0)).current;
  const pressedButtonAnimation = React.useRef(new Animated.Value(0)).current;
  const focusModeAnimation = React.useRef(new Animated.Value(0)).current;
  const cancelOverlayAnimation = React.useRef(new Animated.Value(0)).current;

  const countdownRef = React.useRef<ReturnType<typeof setInterval> | null>(null);
  const cancelHoldTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
  const cancelHoldAnimationDelayRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
  const runningAnimationRef = React.useRef<Animated.CompositeAnimation | null>(null);
  const progressAnimationRef = React.useRef<Animated.CompositeAnimation | null>(null);
  const sessionStartedAtRef = React.useRef<number | null>(null);
  const sessionDurationMsRef = React.useRef(0);
  const cancelAccelStartedRef = React.useRef(false);
  const cancelHoldCompletedRef = React.useRef(false);
  const cancelHoldActiveRef = React.useRef(false);
  const cancelHoldIdRef = React.useRef(0);
  const cancelHoldStartedAtRef = React.useRef(0);

  const { tId, sessionType: sessionTypeParam, durationMinutes, durationSeconds, returnTaskId, chooseDuration } = useLocalSearchParams<{
    tId?: string;
    sessionType?: SessionType;
    durationMinutes?: string;
    durationSeconds?: string;
    returnTaskId?: string;
    chooseDuration?: string;
  }>();
  const timerOverlayHeight = Math.max(containerHeight, 1);
  const timerOverlayOffscreenY = timerOverlayHeight + 1000;
  const selectedSessionType: SessionType = sessionTypeParam ?? 'focus';
  const showDurationPicker =
    selectedSessionType === 'focus' &&
    chooseDuration === 'true' &&
    durationSeconds == null;
  const selectedDurationMinutes = React.useMemo(() => {
    if (!durationMinutes) {
      return null;
    }

    const parsedDuration = Number(durationMinutes);

    if (!Number.isFinite(parsedDuration) || parsedDuration <= 0) {
      return null;
    }

    return parsedDuration;
  }, [durationMinutes]);
  const selectedDurationSeconds = React.useMemo(() => {
    if (!durationSeconds) {
      return null;
    }

    const parsedDuration = Number(durationSeconds);

    if (!Number.isFinite(parsedDuration) || parsedDuration <= 0) {
      return null;
    }

    return parsedDuration;
  }, [durationSeconds]);
  const displayDurationMinutes = React.useMemo(() => {
    if (selectedDurationSeconds != null) {
      return null;
    }

    if (selectedDurationMinutes != null) {
      return selectedDurationMinutes;
    }

    if (selectedSessionType === 'focus') {
      return DEFAULT_FOCUS_DURATION_MINUTES;
    }

    return DEFAULT_SHORT_BREAK_DURATION_MINUTES;
  }, [selectedDurationMinutes, selectedDurationSeconds, selectedSessionType]);

  React.useEffect(() => {
    if (showDurationPicker) {
      setPickerDuration(displayDurationMinutes ?? duration);
    }
  }, [displayDurationMinutes, duration, showDurationPicker]);

  React.useEffect(() => {
    if (!showDurationPicker) {
      return;
    }

    const selectedIndex = Math.max(0, TIMER_OPTIONS.indexOf(pickerDuration));
    const nextOffset = selectedIndex * ITEM_SIZE;

    scrollX.setValue(nextOffset);

    requestAnimationFrame(() => {
      pickerListRef.current?.scrollToOffset({
        offset: nextOffset,
        animated: false,
      });
    });
  }, [pickerDuration, scrollX, showDurationPicker]);

  React.useEffect(() => {
    if (containerHeight > 0 && !timerIsRunning) {
      timerAnimation.setValue(timerOverlayOffscreenY);
    }
  }, [containerHeight, timerIsRunning, timerAnimation, timerOverlayOffscreenY]);

  React.useEffect(() => {
    if (!tId) {
      setTask(null);
      return;
    }

    const fetchTask = async () => {
      const {data, error} = await supabase
      .from('tasks')
      .select('*')
      .eq('tId', tId)
      .single()
    

    if (!error && data) {
      setTask(data);
    }
  };
  fetchTask();
}, [tId])

  const pressedButtonScale = pressedButtonAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0.9],
  });

  const cancelButtonTranslateY = cancelButtonAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [16, 0],
  });

  // Real timer progress comes from timerAnimation. The cancel hold adds a
  // temporary visual offset on top so release/cancel logic does not fight the
  // underlying progress animation.
  const timerOverlayTranslateY = Animated.add(
    timerAnimation,
    cancelOverlayAnimation
  );

  const countdownTranslateX = focusModeAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [0, -width * 0.3],
  });

  const countdownTranslateY = focusModeAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [0, -height * 0.35],
  });

  const countdownScale = focusModeAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0.55],
  });

  const startButtonOpacity = buttonAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0],
  });

  const startButtonTranslateY = buttonAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 200],
  });

  const taskDetailsOpacity = taskDetailsAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
  });

  const taskDetailsTranslateY = taskDetailsAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [20, 0],
  });

  const finalizeSprintSession = React.useCallback(async (finalStatus: 'completed' | 'cancelled' | 'expired') => {
    const activeSession = await GetActiveSession();

    if (!activeSession) {
      return;
    }

    await RemoveActiveSession();

    const { error } = await supabase.rpc('finalize_sprint_session', {
      p_session_id: activeSession.sessionId,
      p_final_status: finalStatus,
      p_ended_at: new Date().toISOString(),
    });

    if (error) {
      Alert.alert(
        'Could not finalize sprint session',
        error.message
      );
    }
  }, []);

  const clearCountdownInterval = React.useCallback(() => {
    if (countdownRef.current) {
      clearInterval(countdownRef.current);
      countdownRef.current = null;
    }
  }, []);

  const clearCancelHoldTimeouts = React.useCallback(() => {
    if (cancelHoldTimeoutRef.current) {
      clearTimeout(cancelHoldTimeoutRef.current);
      cancelHoldTimeoutRef.current = null;
    }

    if (cancelHoldAnimationDelayRef.current) {
      clearTimeout(cancelHoldAnimationDelayRef.current);
      cancelHoldAnimationDelayRef.current = null;
    }
  }, []);

  const stopRunningAnimations = React.useCallback(() => {
    runningAnimationRef.current?.stop();
    runningAnimationRef.current = null;

    progressAnimationRef.current?.stop();
    progressAnimationRef.current = null;

    cancelOverlayAnimation.stopAnimation();
  }, [cancelOverlayAnimation]);

  React.useEffect(() => {
    return () => {
      clearCountdownInterval();
      clearCancelHoldTimeouts();
      stopRunningAnimations();
    };
  }, [clearCancelHoldTimeouts, clearCountdownInterval, stopRunningAnimations]);

  const animateButtonPress = React.useCallback(
    (pressed: boolean) => {
      Animated.timing(pressedButtonAnimation, {
        toValue: pressed ? 1 : 0,
        duration: pressed ? BUTTON_PRESS_IN_MS : BUTTON_PRESS_OUT_MS,
        useNativeDriver: true,
      }).start();
    },
    [pressedButtonAnimation]
  );

  const resetSessionValues = React.useCallback(() => {
    sessionStartedAtRef.current = null;
    sessionDurationMsRef.current = 0;
    cancelHoldActiveRef.current = false;
    cancelAccelStartedRef.current = false;
    cancelHoldCompletedRef.current = false;

    timerAnimation.setValue(timerOverlayOffscreenY);
    cancelOverlayAnimation.setValue(0);
    setTimerOverlayVisible(false);
    setTimeRemaining(0);
    setCurrentSessionType(selectedSessionType);
    setIsRunning(false);
  }, [cancelOverlayAnimation, selectedSessionType, timerAnimation, timerOverlayOffscreenY]);

  const finishTimer = React.useCallback(() => {
    clearCountdownInterval();
    const completedSessionType = currentSessionType;
    const completedReturnTaskId =
      completedSessionType === 'focus' ? (tId ?? null) : (returnTaskId ?? null);

    void finalizeSprintSession('completed');

    Animated.parallel([
      Animated.timing(countdownAnimation, {
        toValue: 0,
        duration: 200,
        useNativeDriver: true,
      }),
      Animated.timing(focusModeAnimation, {
        toValue: 0,
        duration: 250,
        useNativeDriver: true,
      }),
      Animated.timing(taskDetailsAnimation, {
        toValue: 0,
        duration: 300,
        useNativeDriver: true,
      }),
    ]).start(() => {
      Animated.parallel([
        Animated.timing(buttonAnimation, {
          toValue: 0,
          duration: 300,
          useNativeDriver: true,
        }),
        Animated.timing(cancelButtonAnimation, {
          toValue: 0,
          duration: 300,
          useNativeDriver: true,
        }),
      ]).start(() => {
        setIsRunning(false);
        resetSessionValues();
        setPostSessionPrompt({
          completedSessionType,
          returnTaskId: completedReturnTaskId,
        });
      });
    });
  }, [
    buttonAnimation,
    cancelButtonAnimation,
    clearCountdownInterval,
    countdownAnimation,
    currentSessionType,
    finalizeSprintSession,
    focusModeAnimation,
    resetSessionValues,
    taskDetailsAnimation,
    returnTaskId,
    tId,
  ]);

  // This picks up the timer overlay animation from the current Y position and
  // runs it to the bottom over the remaining session time.
  const startProgressAnimation = React.useCallback(
    (fromY: number) => {
      const elapsedRatio = fromY / timerOverlayHeight;
      const remainingMs = sessionDurationMsRef.current * (1 - elapsedRatio);

      sessionStartedAtRef.current = Date.now() - sessionDurationMsRef.current * elapsedRatio;
      timerAnimation.setValue(fromY);

      const progressAnimation = Animated.timing(timerAnimation, {
        toValue: timerOverlayHeight,
        duration: remainingMs,
        useNativeDriver: true,
      });

      progressAnimationRef.current = progressAnimation;
      progressAnimation.start(({ finished }) => {
        progressAnimationRef.current = null;

        if (!finished) {
          return;
        }

        finishTimer();
      });
    },
    [finishTimer, timerAnimation, timerOverlayHeight]
  );

  const runStartSequence = React.useCallback(() => {
    buttonAnimation.setValue(1);
    cancelButtonAnimation.setValue(1);
    countdownAnimation.setValue(1);
    timerAnimation.setValue(0);

    startProgressAnimation(0);

    const focusAnimation = Animated.parallel([
      Animated.timing(focusModeAnimation, {
        toValue: 1,
        duration: 450,
        useNativeDriver: true,
      }),
      Animated.timing(taskDetailsAnimation, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true,
      }),
    ]);

    runningAnimationRef.current = focusAnimation;
    focusAnimation.start(() => {
      runningAnimationRef.current = null;
    });
  }, [
    buttonAnimation,
    cancelButtonAnimation,
    countdownAnimation,
    focusModeAnimation,
    startProgressAnimation,
    taskDetailsAnimation,
    timerAnimation,
  ]);

  const startCountdown = React.useCallback(
    (endTime: number) => {
      clearCountdownInterval();

      const updateRemainingTime = () => {
        const remainingSeconds = Math.max(
          0,
          Math.ceil((endTime - Date.now()) / 1000)
        );

        setTimeRemaining(remainingSeconds);

        if (remainingSeconds <= 0) {
          clearCountdownInterval();
        }
      };

      updateRemainingTime();
      countdownRef.current = setInterval(updateRemainingTime, 1000);
    },
    [clearCountdownInterval]
  );

  React.useEffect(() => {
    if (timerIsRunning || containerHeight === 0) {
      return;
    }

    const restoreSprint = async () => {
      const activeSession = await GetActiveSession();

      if (!activeSession) {
        return;
      }

      if (activeSession.sessionType === 'focus' && activeSession.taskId !== tId) {
        return;
      }

      if (activeSession.sessionType !== 'focus' && selectedSessionType !== activeSession.sessionType) {
        return;
      }

      const remainingMs = activeSession.endTime - Date.now();

      if (remainingMs <= 0) {
        await finalizeSprintSession('expired');
        return;
      }

      const totalMs = activeSession.durationSeconds * 1000;
      const elapsedMs = totalMs - remainingMs;
      const elapsedRatio = Math.max(0, Math.min(elapsedMs / totalMs, 1));
      const restoredY = timerOverlayHeight * elapsedRatio;

      setIsRunning(true);
      setTimerOverlayVisible(true);
      setCurrentSessionType(activeSession.sessionType);
      sessionStartedAtRef.current = Date.now() - elapsedMs;
      sessionDurationMsRef.current = totalMs;

      buttonAnimation.setValue(1);
      cancelButtonAnimation.setValue(1);
      countdownAnimation.setValue(1);
      focusModeAnimation.setValue(1);
      taskDetailsAnimation.setValue(1);
      cancelOverlayAnimation.setValue(0);

      startCountdown(activeSession.endTime);
      startProgressAnimation(restoredY);
    };

    void restoreSprint();
  }, [
    buttonAnimation,
    cancelButtonAnimation,
    cancelOverlayAnimation,
    containerHeight,
    countdownAnimation,
    finalizeSprintSession,
    focusModeAnimation,
    startCountdown,
    startProgressAnimation,
    taskDetailsAnimation,
    selectedSessionType,
    tId,
    timerOverlayHeight,
    timerIsRunning,
  ]);

  const startSession = React.useCallback(async ({
    sessionType,
    taskId,
    durationSeconds,
  }: StartSessionInput) => {
    if (timerIsRunning || containerHeight === 0) {
      return;
    }

    if (sessionType === 'focus' && !taskId) {
      Alert.alert('Could not start session', 'Focus sessions must be linked to a task.');
      return;
    }

    const endTime = Date.now() + durationSeconds * 1000;
    const { data: userData, error: userError } = await supabase.auth.getUser();

    if (userError || !userData.user?.id) {
      Alert.alert('Could not start session', 'Missing signed-in user.');
      return;
    }

    const { data: sessionData, error: sessionError } = await supabase.rpc('start_sprint_session', {
      p_task_id: taskId,
      p_user_id: userData.user.id,
      p_session_type: sessionType,
      p_planned_duration: durationSeconds,
      p_started_at: new Date().toISOString(),
    });

    const sessionId = getSessionId(sessionData);

    if (sessionError || !sessionId) {
      Alert.alert(
        'Could not start session',
        sessionError?.message ?? 'Session could not be created.'
      );
      return;
    }

    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
    setIsRunning(true);
    setTimerOverlayVisible(true);
    setCurrentSessionType(sessionType);

    taskDetailsAnimation.setValue(0);
    countdownAnimation.setValue(0);
    cancelOverlayAnimation.setValue(0);

    sessionStartedAtRef.current = Date.now();
    sessionDurationMsRef.current = durationSeconds * 1000;

    void SaveActiveSession({
      sessionId,
      sessionType,
      taskId,
      durationSeconds,
      endTime,
    });

    startCountdown(endTime);
    runStartSequence();
  }, [
    cancelOverlayAnimation,
    containerHeight,
    countdownAnimation,
    runStartSequence,
    startCountdown,
    taskDetailsAnimation,
    timerIsRunning,
  ]);

  const startTimerSession = React.useCallback(async () => {
    if (selectedSessionType === 'focus' && !tId) {
      return;
    }

    const totalSeconds =
      selectedDurationSeconds ??
      (showDurationPicker ? pickerDuration : (displayDurationMinutes ?? duration)) * TIMER_UNIT_IN_SECONDS;

    await startSession({
      sessionType: selectedSessionType,
      taskId: selectedSessionType === 'focus' ? (tId ?? null) : null,
      durationSeconds: totalSeconds,
    });
  }, [
    displayDurationMinutes,
    duration,
    pickerDuration,
    selectedDurationSeconds,
    selectedSessionType,
    showDurationPicker,
    startSession,
    tId,
  ]);

  const handleStartShortBreak = React.useCallback(() => {
    setPostSessionPrompt(null);
    router.replace({
      pathname: '/task/timer',
      params: {
        sessionType: 'short_break',
        durationMinutes: String(DEFAULT_SHORT_BREAK_DURATION_MINUTES),
        returnTaskId: tId ?? undefined,
      },
    });
  }, [tId]);

  const handleContinueSameTask = React.useCallback(() => {
    if (!postSessionPrompt?.returnTaskId) {
      router.replace('/');
      return;
    }

    setPostSessionPrompt(null);
    router.replace({
      pathname: '/task/timer',
      params: {
        tId: postSessionPrompt.returnTaskId,
        durationMinutes: String(DEFAULT_FOCUS_DURATION_MINUTES),
      },
    });
  }, [postSessionPrompt]);

  const handleBackToDashboard = React.useCallback(() => {
    setPostSessionPrompt(null);
    router.replace('/');
  }, []);

  const handleChooseCustomDuration = React.useCallback(() => {
    if (timerIsRunning || selectedSessionType !== 'focus') {
      return;
    }

    router.replace({
      pathname: '/task/timer',
      params: {
        tId: tId ?? undefined,
        sessionType: 'focus',
        chooseDuration: 'true',
        durationMinutes: String(displayDurationMinutes ?? duration),
      },
    });
  }, [displayDurationMinutes, duration, selectedSessionType, tId, timerIsRunning]);

  const cancelTimer = React.useCallback(() => {
    if (!timerIsRunning) {
      return;
    }

    clearCountdownInterval();
    clearCancelHoldTimeouts();
    void finalizeSprintSession('cancelled');

    runningAnimationRef.current?.stop();
    runningAnimationRef.current = null;

    progressAnimationRef.current?.stop();
    progressAnimationRef.current = null;

    timerAnimation.stopAnimation(() => {
      cancelOverlayAnimation.stopAnimation(() => {
        timerAnimation.setValue(timerOverlayOffscreenY);
        cancelOverlayAnimation.setValue(0);
        setTimerOverlayVisible(false);

        Animated.parallel([
          Animated.timing(cancelButtonAnimation, {
            toValue: 0,
            duration: 180,
            useNativeDriver: true,
          }),
          Animated.timing(taskDetailsAnimation, {
            toValue: 0,
            duration: 220,
            useNativeDriver: true,
          }),
          Animated.timing(focusModeAnimation, {
            toValue: 0,
            duration: 250,
            useNativeDriver: true,
          }),
          Animated.timing(countdownAnimation, {
            toValue: 0,
            duration: 180,
            useNativeDriver: true,
          }),
        ]).start(() => {
          Animated.timing(buttonAnimation, {
            toValue: 0,
            duration: 220,
            useNativeDriver: true,
          }).start(() => {
            resetSessionValues();
          });
        });
      });
    });
  }, [
    buttonAnimation,
    cancelButtonAnimation,
    cancelOverlayAnimation,
    clearCancelHoldTimeouts,
    clearCountdownInterval,
    countdownAnimation,
    finalizeSprintSession,
    focusModeAnimation,
    resetSessionValues,
    taskDetailsAnimation,
    timerAnimation,
    timerOverlayOffscreenY,
    timerIsRunning,
  ]);

  const handleTimerPickerMomentumEnd = React.useCallback(
    (event: { nativeEvent: { contentOffset: { x: number } } }) => {
      if (timerIsRunning) {
        return;
      }

      const index = Math.round(event.nativeEvent.contentOffset.x / ITEM_SIZE);
      const clampedIndex = Math.max(0, Math.min(index, TIMER_OPTIONS.length - 1));
      const nextDuration = TIMER_OPTIONS[clampedIndex];

      setPickerDuration(nextDuration);
    },
    [timerIsRunning]
  );

  const renderTimerItem = React.useCallback(
    ({ item, index }: { item: number; index: number }) => {
      const inputRange = [
        (index - 1) * ITEM_SIZE,
        index * ITEM_SIZE,
        (index + 1) * ITEM_SIZE,
      ];

      const opacity = scrollX.interpolate({
        inputRange,
        outputRange: [0.38, 1, 0.38],
      });

      const scale = scrollX.interpolate({
        inputRange,
        outputRange: [0.72, 1, 0.72],
      });

      return (
        <View style={styles.timerOptionItem}>
          <Animated.Text
            style={[
              styles.timerOptionText,
              {
                opacity,
                transform: [{ scale }],
              },
            ]}
          >
            {item}
          </Animated.Text>
        </View>
      );
    },
    [scrollX]
  );

  const handleCancelHoldStart = React.useCallback(() => {
    animateButtonPress(true);
    cancelHoldIdRef.current += 1;

    const cancelHoldId = cancelHoldIdRef.current;
    cancelHoldActiveRef.current = true;
    cancelHoldStartedAtRef.current = Date.now();
    cancelAccelStartedRef.current = false;
    cancelHoldCompletedRef.current = false;

    cancelHoldAnimationDelayRef.current = setTimeout(() => {
      cancelHoldAnimationDelayRef.current = null;

      if (!cancelHoldActiveRef.current || cancelHoldIdRef.current !== cancelHoldId) {
        return;
      }

      // The hold starts with normal button feedback. After a short delay, we
      // begin the accelerated red overlay preview so quick taps do not cause a
      // jolt, while long holds still clearly show that cancel is about to fire.
      cancelAccelStartedRef.current = true;
      cancelOverlayAnimation.setValue(0);

      const elapsedHoldMs = Date.now() - cancelHoldStartedAtRef.current;
      const remainingHoldMs = Math.max(1, HOLD_TO_CANCEL_MS - elapsedHoldMs);
      const sessionStartedAt = sessionStartedAtRef.current ?? Date.now();
      const elapsedAtCancelMs = Date.now() + remainingHoldMs - sessionStartedAt;
      const expectedProgress = elapsedAtCancelMs / sessionDurationMsRef.current;
      const clampedProgress = Math.max(0, Math.min(expectedProgress, 1));
      const expectedYAtCancel = timerOverlayHeight * clampedProgress;
      const cancelOffset = Math.max(0, timerOverlayHeight - expectedYAtCancel);

      Animated.timing(cancelOverlayAnimation, {
        toValue: cancelOffset,
        duration: remainingHoldMs,
        easing: Easing.in(Easing.quad),
        useNativeDriver: true,
      }).start();
    }, CANCEL_ANIMATION_DELAY_MS);

    cancelHoldTimeoutRef.current = setTimeout(() => {
      cancelHoldActiveRef.current = false;
      cancelHoldIdRef.current += 1;
      cancelAccelStartedRef.current = false;
      cancelHoldCompletedRef.current = true;

      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
      cancelTimer();
      cancelHoldTimeoutRef.current = null;
    }, HOLD_TO_CANCEL_MS);
  }, [animateButtonPress, cancelOverlayAnimation, cancelTimer, timerOverlayHeight]);

  const handleCancelHoldEnd = React.useCallback(() => {
    animateButtonPress(false);
    cancelHoldActiveRef.current = false;
    cancelHoldIdRef.current += 1;

    clearCancelHoldTimeouts();

    if (cancelHoldCompletedRef.current) {
      return;
    }

    if (!cancelAccelStartedRef.current) {
      return;
    }

    cancelAccelStartedRef.current = false;
    cancelOverlayAnimation.stopAnimation((currentOffset) => {
      cancelOverlayAnimation.setValue(currentOffset);
      Animated.timing(cancelOverlayAnimation, {
        toValue: 0,
        duration: 750,
        easing: Easing.in(Easing.bounce),
        useNativeDriver: true,
      }).start();
    });
  }, [animateButtonPress, cancelOverlayAnimation, clearCancelHoldTimeouts]);

  return (
    <View
      style={styles.container}
      onLayout={(event) => {
        setContainerHeight(event.nativeEvent.layout.height);
      }}
    >
      <StatusBar hidden />
      
      <Stack.Screen 
      options={{
        title: timerIsRunning ? '' : `${getSessionLabel(selectedSessionType)} duration`,
        headerTransparent: true,
        headerTintColor: colors.text,
        headerTitleAlign: 'center',
      }}
      />

      <Animated.View
        pointerEvents="none"
        style={[
          styles.timerOverlay,
          {
            height: timerOverlayHeight,
            opacity: timerOverlayVisible ? 1 : 0,
            width,
            transform: [{ translateY: timerOverlayTranslateY }],
          },
        ]}
      />

      <Animated.View
        style={[
          StyleSheet.absoluteFillObject,
          styles.startButtonContainer,
          {
            opacity: startButtonOpacity,
            transform: [{ translateY: startButtonTranslateY }],
          },
        ]}
      >
        <TouchableOpacity
          disabled={timerIsRunning}
          onPress={startTimerSession}
          onPressIn={() => animateButtonPress(true)}
          onPressOut={() => animateButtonPress(false)}
        >
          <Animated.View
            style={[
              styles.roundButton,
              {
                transform: [{ scale: pressedButtonScale }],
              },
            ]}
          >
            <Text className="text-text-main text-xl">Start</Text>
            {selectedSessionType === 'focus' ? (
              <Text className="text-text-main text-xl">Sprint</Text>
            ) : null}
          </Animated.View>
        </TouchableOpacity>
      </Animated.View>

      <Animated.View
        pointerEvents={timerIsRunning ? 'auto' : 'none'}
        style={[
          styles.cancelButtonContainer,
          {
            opacity: cancelButtonAnimation,
            transform: [{ translateY: cancelButtonTranslateY }],
          },
        ]}
      >
        <TouchableOpacity onPressIn={handleCancelHoldStart} onPressOut={handleCancelHoldEnd}>
          <Animated.View
            style={[
              styles.cancelButton,
              {
                transform: [{ scale: pressedButtonScale }],
              },
            ]}
          >
            <Text className="text-text-main text-xl">Hold to end session</Text>
          </Animated.View>
        </TouchableOpacity>
      </Animated.View>

      <Animated.View
        pointerEvents="none"
        style={[
          styles.countdownOverlay,
          {
            opacity: countdownAnimation,
            transform: [
              { translateX: countdownTranslateX },
              { translateY: countdownTranslateY },
              { scale: countdownScale },
            ],
          },
        ]}
      >
        <Text style={styles.countdownText}>{formatTime(timeRemaining)}</Text>
      </Animated.View>

      {!timerIsRunning && showDurationPicker ? (
        <View
          style={[
            styles.timerPickerWrapper,
            {
              top: containerHeight / 3,
            },
          ]}
        >
          <Animated.FlatList
            ref={pickerListRef}
            data={TIMER_OPTIONS}
            horizontal
            bounces={false}
            keyExtractor={(item) => item.toString()}
            onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
              useNativeDriver: true,
            })}
            onMomentumScrollEnd={handleTimerPickerMomentumEnd}
            showsHorizontalScrollIndicator={false}
            snapToInterval={ITEM_SIZE}
            decelerationRate="fast"
            style={styles.timerPickerList}
            contentContainerStyle={styles.timerPickerContent}
            renderItem={renderTimerItem}
            getItemLayout={(_, index) => ({
              length: ITEM_SIZE,
              offset: ITEM_SIZE * index,
              index,
            })}
            initialNumToRender={TIMER_OPTIONS.length}
          />
        </View>
      ) : !timerIsRunning ? (
        <View style={styles.fixedDurationBlock}>
          <Text style={styles.fixedDurationLabel}>
            {selectedDurationSeconds != null
              ? `${selectedDurationSeconds} sec`
              : `${displayDurationMinutes ?? duration} min`}
          </Text>
          <Text style={styles.fixedDurationDescription}>
            {selectedSessionType === 'focus'
              ? 'This sprint uses the default focus duration so you can begin immediately.'
              : 'This session uses a fixed duration so you can move straight into the next step.'}
          </Text>
          {selectedSessionType === 'focus' ? (
            <TouchableOpacity onPress={handleChooseCustomDuration} style={styles.durationPickerLink}>
              <Text style={styles.durationPickerLinkText}>Choose a different duration</Text>
            </TouchableOpacity>
          ) : null}
        </View>
      ) : null}

      <Animated.View
        pointerEvents="none"
        style={[
          styles.taskDetails,
          {
            opacity: taskDetailsOpacity,
            transform: [{ translateY: taskDetailsTranslateY }],
          },
        ]}
      >
        <Text style={styles.taskName}>
          {currentSessionType === 'focus' ? task?.title ?? 'Sprint' : getSessionLabel(currentSessionType)}
        </Text>
        <Text style={styles.taskDescription}>
          {currentSessionType === 'focus'
            ? task?.description || 'Focus on this task until the timer ends.'
            : 'Use this timer as a real break before starting the next focus session.'}
        </Text>
      </Animated.View>

      {postSessionPrompt ? (
        <View style={styles.postSessionOverlay}>
          <View style={styles.postSessionCard}>
            <Text style={styles.postSessionEyebrow}>Session complete</Text>
            <Text style={styles.postSessionTitle}>
              {postSessionPrompt.completedSessionType === 'focus'
                ? 'What do you want to do next?'
                : 'Break finished'}
            </Text>
            <Text style={styles.postSessionBody}>
              {postSessionPrompt.completedSessionType === 'focus'
                ? 'Take a short break, jump straight into another sprint on the same task, or head back to the dashboard.'
                : 'Jump back into the same task or head back to the dashboard.'}
            </Text>

            {postSessionPrompt.completedSessionType === 'focus' ? (
              <>
                <TouchableOpacity onPress={handleStartShortBreak} style={styles.postSessionPrimaryButton}>
                  <Text style={styles.postSessionPrimaryButtonText}>Start short break</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={handleContinueSameTask} style={styles.postSessionSecondaryButton}>
                  <Text style={styles.postSessionSecondaryButtonText}>Continue same task</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={handleBackToDashboard} style={styles.postSessionTertiaryButton}>
                  <Text style={styles.postSessionTertiaryButtonText}>Back to dashboard</Text>
                </TouchableOpacity>
              </>
            ) : (
              <>
                <TouchableOpacity onPress={handleContinueSameTask} style={styles.postSessionPrimaryButton}>
                  <Text style={styles.postSessionPrimaryButtonText}>Continue with same task</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={handleBackToDashboard} style={styles.postSessionSecondaryButton}>
                  <Text style={styles.postSessionSecondaryButtonText}>Back to dashboard</Text>
                </TouchableOpacity>
              </>
            )}
          </View>
        </View>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.black,
    overflow: 'hidden',
  },
  timerOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: colors.red,
  },
  startButtonContainer: {
    justifyContent: 'flex-end',
    alignItems: 'center',
    paddingBottom: 100,
  },
  roundButton: {
    width: 80,
    height: 80,
    borderRadius: 80,
    backgroundColor: '#beb9a7',
    alignItems: 'center',
    justifyContent: 'center',
  },
  timerPickerWrapper: {
    position: 'absolute',
    left: 0,
    right: 0,
    flex: 1,
    alignItems: 'center',
  },
  timerPickerList: {
    flexGrow: 0,
  },
  fixedDurationBlock: {
    position: 'absolute',
    top: height * 0.28,
    left: 32,
    right: 32,
    alignItems: 'center',
  },
  fixedDurationLabel: {
    color: colors.text,
    fontSize: 56,
    fontFamily: 'Menlo',
    fontWeight: '900',
    textAlign: 'center',
  },
  fixedDurationDescription: {
    color: colors.text,
    fontSize: 18,
    lineHeight: 26,
    marginTop: 16,
    textAlign: 'center',
  },
  durationPickerLink: {
    marginTop: 18,
    minHeight: 42,
    paddingHorizontal: 18,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 999,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.24)',
    backgroundColor: 'rgba(255,255,255,0.08)',
  },
  durationPickerLinkText: {
    color: '#F3EBDD',
    fontSize: 15,
    fontWeight: '700',
    textAlign: 'center',
  },
  timerPickerContent: {
    paddingHorizontal: ITEM_SPACING,
  },
  timerOptionItem: {
    width: ITEM_SIZE,
    justifyContent: 'center',
    alignItems: 'center',
  },
  timerOptionText: {
    fontSize: ITEM_SIZE * 0.8,
    fontFamily: 'Menlo',
    color: colors.text,
    fontWeight: '900',
  },
  taskDetails: {
    position: 'absolute',
    top: height * 0.34,
    left: 32,
    right: 32,
    alignItems: 'center',
  },
  taskName: {
    color: colors.text,
    fontSize: 32,
    fontWeight: '800',
    textAlign: 'center',
  },
  taskDescription: {
    color: colors.text,
    fontSize: 24,
    lineHeight: 32,
    marginTop: 20,
    textAlign: 'center',
  },
  countdownText: {
    fontSize: ITEM_SIZE * 0.32,
    fontFamily: 'Menlo',
    color: colors.text,
    fontWeight: '900',
    textAlign: 'center',
  },
  cancelButtonContainer: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 44,
    alignItems: 'center',
    zIndex: 2,
  },
  cancelButton: {
    minWidth: 112,
    height: 44,
    borderRadius: 22,
    borderWidth: 1,
    borderColor: 'rgba(155, 155, 155, 0.35)',
    backgroundColor: '#beb9a7',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 22,
    position: 'relative',
    overflow: 'hidden',
  },
  countdownOverlay: {
    position: 'absolute',
    top: height / 2.5 ,
    left: 0,
    right: 0,
    alignItems: 'center',
  },
  postSessionOverlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(20, 26, 34, 0.94)',
    justifyContent: 'center',
    paddingHorizontal: 24,
    zIndex: 10,
  },
  postSessionCard: {
    borderRadius: 28,
    backgroundColor: '#F7F4EA',
    paddingHorizontal: 24,
    paddingVertical: 28,
  },
  postSessionEyebrow: {
    color: '#7A6F5A',
    fontSize: 13,
    fontWeight: '700',
    letterSpacing: 0.8,
    textTransform: 'uppercase',
  },
  postSessionTitle: {
    color: '#323F4E',
    fontSize: 30,
    fontWeight: '800',
    marginTop: 10,
  },
  postSessionBody: {
    color: '#52606D',
    fontSize: 17,
    lineHeight: 25,
    marginTop: 12,
    marginBottom: 24,
  },
  postSessionPrimaryButton: {
    minHeight: 54,
    borderRadius: 18,
    backgroundColor: '#323F4E',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  postSessionPrimaryButtonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '800',
  },
  postSessionSecondaryButton: {
    minHeight: 54,
    borderRadius: 18,
    borderWidth: 1,
    borderColor: '#C2B8A3',
    backgroundColor: '#EFE7D8',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 20,
    marginTop: 12,
  },
  postSessionSecondaryButtonText: {
    color: '#323F4E',
    fontSize: 16,
    fontWeight: '700',
  },
  postSessionTertiaryButton: {
    minHeight: 48,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 10,
  },
  postSessionTertiaryButtonText: {
    color: '#52606D',
    fontSize: 15,
    fontWeight: '700',
  },
});