tabatago/app/collection/[id].tsx

/**
 * TabataFit Collection Detail Screen
 * Shows collection info + ordered workout list
 */

import { useMemo } from 'react'
import { View, StyleSheet, ScrollView, Pressable, Text as RNText } from 'react-native'
import { useRouter, useLocalSearchParams } from 'expo-router'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { LinearGradient } from 'expo-linear-gradient'
import Ionicons from '@expo/vector-icons/Ionicons'

import { useHaptics } from '@/src/shared/hooks'
import { getCollectionById, getCollectionWorkouts, getTrainerById, COLLECTION_COLORS } from '@/src/shared/data'
import { StyledText } from '@/src/shared/components/StyledText'

import {
  BRAND,
  DARK,
  TEXT,
} from '@/src/shared/constants/colors'
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'

export default function CollectionDetailScreen() {
  const insets = useSafeAreaInsets()
  const router = useRouter()
  const haptics = useHaptics()
  const { id } = useLocalSearchParams<{ id: string }>()

  const collection = id ? getCollectionById(id) : null
  const workouts = useMemo(
    () => id ? getCollectionWorkouts(id) : [],
    [id]
  )
  const collectionColor = COLLECTION_COLORS[id ?? ''] ?? BRAND.PRIMARY

  const handleBack = () => {
    haptics.selection()
    router.back()
  }

  const handleWorkoutPress = (workoutId: string) => {
    haptics.buttonTap()
    router.push(`/workout/${workoutId}`)
  }

  if (!collection) {
    return (
      <View style={[styles.container, { paddingTop: insets.top, alignItems: 'center', justifyContent: 'center' }]}>
        <RNText style={{ color: TEXT.PRIMARY, fontSize: 17 }}>Collection not found</RNText>
      </View>
    )
  }

  const totalMinutes = workouts.reduce((sum, w) => sum + (w?.duration ?? 0), 0)
  const totalCalories = workouts.reduce((sum, w) => sum + (w?.calories ?? 0), 0)

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
        showsVerticalScrollIndicator={false}
      >
        {/* Hero Header */}
        <View style={styles.hero}>
          <LinearGradient
            colors={collection.gradient ?? [collectionColor, BRAND.PRIMARY_DARK]}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
            style={StyleSheet.absoluteFill}
          />

          <Pressable onPress={handleBack} style={styles.backButton}>
            <Ionicons name="chevron-back" size={24} color={TEXT.PRIMARY} />
          </Pressable>

          <View style={styles.heroContent}>
            <RNText style={styles.heroIcon}>{collection.icon}</RNText>
            <StyledText size={28} weight="bold" color={TEXT.PRIMARY}>{collection.title}</StyledText>
            <StyledText size={15} color={TEXT.SECONDARY}>{collection.description}</StyledText>

            <View style={styles.heroStats}>
              <View style={styles.heroStat}>
                <Ionicons name="fitness" size={14} color={TEXT.PRIMARY} />
                <StyledText size={13} color={TEXT.PRIMARY}>{workouts.length + ' workouts'}</StyledText>
              </View>
              <View style={styles.heroStat}>
                <Ionicons name="time" size={14} color={TEXT.PRIMARY} />
                <StyledText size={13} color={TEXT.PRIMARY}>{totalMinutes + ' min total'}</StyledText>
              </View>
              <View style={styles.heroStat}>
                <Ionicons name="flame" size={14} color={TEXT.PRIMARY} />
                <StyledText size={13} color={TEXT.PRIMARY}>{totalCalories + ' cal'}</StyledText>
              </View>
            </View>
          </View>
        </View>

        {/* Workout List */}
        <View style={styles.workoutList}>
          {workouts.map((workout, index) => {
            if (!workout) return null
            const trainer = getTrainerById(workout.trainerId)
            return (
              <Pressable
                key={workout.id}
                style={styles.workoutCard}
                onPress={() => handleWorkoutPress(workout.id)}
              >
                <View style={[styles.workoutNumber, { backgroundColor: `${collectionColor}20` }]}>
                  <RNText style={[styles.workoutNumberText, { color: collectionColor }]}>{index + 1}</RNText>
                </View>
                <View style={styles.workoutInfo}>
                  <StyledText size={17} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
                  <StyledText size={13} color={TEXT.TERTIARY}>
                    {trainer?.name + ' \u00B7 ' + workout.duration + ' min \u00B7 ' + workout.level}
                  </StyledText>
                </View>
                <View style={styles.workoutMeta}>
                  <StyledText size={13} color={BRAND.PRIMARY}>{workout.calories + ' cal'}</StyledText>
                  <Ionicons name="play-circle" size={28} color={collectionColor} />
                </View>
              </Pressable>
            )
          })}
        </View>
      </ScrollView>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: DARK.BASE,
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {},

  // Hero
  hero: {
    height: 260,
    overflow: 'hidden',
  },
  backButton: {
    width: 44,
    height: 44,
    alignItems: 'center',
    justifyContent: 'center',
    margin: SPACING[3],
  },
  heroContent: {
    position: 'absolute',
    bottom: SPACING[5],
    left: SPACING[5],
    right: SPACING[5],
  },
  heroIcon: {
    fontSize: 40,
    marginBottom: SPACING[2],
  },
  heroStats: {
    flexDirection: 'row',
    gap: SPACING[4],
    marginTop: SPACING[3],
  },
  heroStat: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: SPACING[1],
  },

  // Workout List
  workoutList: {
    paddingHorizontal: LAYOUT.SCREEN_PADDING,
    paddingTop: SPACING[4],
    gap: SPACING[2],
  },
  workoutCard: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: SPACING[3],
    paddingHorizontal: SPACING[4],
    backgroundColor: DARK.SURFACE,
    borderRadius: RADIUS.LG,
    gap: SPACING[3],
  },
  workoutNumber: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
  },
  workoutNumberText: {
    fontSize: 15,
    fontWeight: '700',
  },
  workoutInfo: {
    flex: 1,
    gap: 2,
  },
  workoutMeta: {
    alignItems: 'flex-end',
    gap: 4,
  },
})