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 { useTranslation } from 'react-i18next'

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

import { useThemeColors, BRAND } from '@/src/shared/theme'
import type { ThemeColors } from '@/src/shared/theme/types'
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 { t } = useTranslation()
  const { id } = useLocalSearchParams<{ id: string }>()

  const colors = useThemeColors()
  const styles = useMemo(() => createStyles(colors), [colors])

  const rawCollection = id ? getCollectionById(id) : null
  const translatedCollections = useTranslatedCollections(rawCollection ? [rawCollection] : [])
  const collection = translatedCollections.length > 0 ? translatedCollections[0] : null
  const rawWorkouts = useMemo(
    () => id ? getCollectionWorkouts(id).filter((w): w is NonNullable<typeof w> => w != null) : [],
    [id]
  )
  const workouts = useTranslatedWorkouts(rawWorkouts)
  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: colors.text.primary, fontSize: 17 }}>{t('screens:collection.notFound')}</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 — on gradient, text stays white */}
        <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="#FFFFFF" />
          </Pressable>

          <View style={styles.heroContent}>
            <RNText style={styles.heroIcon}>{collection.icon}</RNText>
            <StyledText size={28} weight="bold" color="#FFFFFF">{collection.title}</StyledText>
            <StyledText size={15} color="rgba(255, 255, 255, 0.8)">{collection.description}</StyledText>

            <View style={styles.heroStats}>
              <View style={styles.heroStat}>
                <Ionicons name="fitness" size={14} color="#FFFFFF" />
                <StyledText size={13} color="#FFFFFF">{t('plurals.workout', { count: workouts.length })}</StyledText>
              </View>
              <View style={styles.heroStat}>
                <Ionicons name="time" size={14} color="#FFFFFF" />
                <StyledText size={13} color="#FFFFFF">{t('screens:collection.minTotal', { count: totalMinutes })}</StyledText>
              </View>
              <View style={styles.heroStat}>
                <Ionicons name="flame" size={14} color="#FFFFFF" />
                <StyledText size={13} color="#FFFFFF">{t('units.calUnit', { count: totalCalories })}</StyledText>
              </View>
            </View>
          </View>
        </View>

        {/* Workout List — on base bg, use theme tokens */}
        <View style={styles.workoutList}>
          {workouts.map((workout, index) => {
            if (!workout) return null
            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={colors.text.primary}>{workout.title}</StyledText>
                  <StyledText size={13} color={colors.text.tertiary}>
                    {t('durationLevel', { duration: workout.duration, level: t(`levels.${workout.level.toLowerCase()}`) })}
                  </StyledText>
                </View>
                <View style={styles.workoutMeta}>
                  <StyledText size={13} color={BRAND.PRIMARY}>{t('units.calUnit', { count: workout.calories })}</StyledText>
                  <Ionicons name="play-circle" size={28} color={collectionColor} />
                </View>
              </Pressable>
            )
          })}
        </View>
      </ScrollView>
    </View>
  )
}

function createStyles(colors: ThemeColors) {
  return StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.bg.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: colors.bg.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,
    },
  })
}