/**
 * TabataFit Browse Screen
 * React Native UI — wired to shared data
 */

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

import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { useHaptics } from '@/src/shared/hooks'
import {
  COLLECTIONS,
  PROGRAMS,
  getFeaturedCollection,
  COLLECTION_COLORS,
  WORKOUTS,
} from '@/src/shared/data'
import { useTranslatedCollections, useTranslatedPrograms, 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'

const { width: SCREEN_WIDTH } = Dimensions.get('window')

const FONTS = {
  LARGE_TITLE: 34,
  TITLE: 28,
  TITLE_2: 22,
  HEADLINE: 17,
  SUBHEADLINE: 15,
  CAPTION_1: 12,
  CAPTION_2: 11,
}

function TextButton({ children, onPress }: { children: string; onPress?: () => void }) {
  return (
    <Pressable onPress={onPress} hitSlop={8}>
      <StyledText size={FONTS.SUBHEADLINE} color={BRAND.PRIMARY} weight="medium">
        {children}
      </StyledText>
    </Pressable>
  )
}

// New Releases: last 4 workouts
const NEW_RELEASES = WORKOUTS.slice(-4)

// ═══════════════════════════════════════════════════════════════════════════
// MAIN SCREEN
// ═══════════════════════════════════════════════════════════════════════════

export default function BrowseScreen() {
  const { t } = useTranslation()
  const insets = useSafeAreaInsets()
  const router = useRouter()
  const haptics = useHaptics()
  const colors = useThemeColors()
  const styles = useMemo(() => createStyles(colors), [colors])

  const featuredCollection = getFeaturedCollection()
  const translatedCollections = useTranslatedCollections(COLLECTIONS)
  const translatedPrograms = useTranslatedPrograms(PROGRAMS)
  const translatedNewReleases = useTranslatedWorkouts(NEW_RELEASES)

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

  const handleCollectionPress = (id: string) => {
    haptics.buttonTap()
    router.push(`/collection/${id}`)
  }

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
        showsVerticalScrollIndicator={false}
      >
        {/* Header */}
        <StyledText size={FONTS.LARGE_TITLE} weight="bold" color={colors.text.primary}>{t('screens:browse.title')}</StyledText>

        {/* Featured Collection */}
        {featuredCollection && (
          <Pressable style={styles.featuredCard} onPress={() => handleCollectionPress(featuredCollection.id)}>
            <LinearGradient
              colors={featuredCollection.gradient ?? [BRAND.PRIMARY, '#FF3B30']}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 1 }}
              style={StyleSheet.absoluteFill}
            />

            <View style={styles.featuredBadge}>
              <Ionicons name="star" size={12} color="#FFFFFF" />
              <RNText style={styles.featuredBadgeText}>{t('screens:browse.featured')}</RNText>
            </View>

            <View style={styles.featuredInfo}>
              <StyledText size={FONTS.TITLE} weight="bold" color="#FFFFFF">{t(`content:collections.${featuredCollection.id}.title`, { defaultValue: featuredCollection.title })}</StyledText>
              <StyledText size={FONTS.HEADLINE} color="rgba(255,255,255,0.8)">{t(`content:collections.${featuredCollection.id}.description`, { defaultValue: featuredCollection.description })}</StyledText>

              <View style={styles.featuredStats}>
                <View style={styles.featuredStat}>
                  <Ionicons name="fitness" size={14} color="#FFFFFF" />
                  <StyledText size={FONTS.CAPTION_1} color="#FFFFFF">{t('plurals.workout', { count: featuredCollection.workoutIds.length })}</StyledText>
                </View>
              </View>
            </View>
          </Pressable>
        )}

        {/* Collections Grid */}
        <View style={styles.section}>
          <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:browse.collections')}</StyledText>
          <View style={styles.collectionsGrid}>
            {translatedCollections.map((collection) => {
              const color = COLLECTION_COLORS[collection.id] ?? BRAND.PRIMARY
              return (
                <Pressable
                  key={collection.id}
                  style={styles.collectionCard}
                  onPress={() => handleCollectionPress(collection.id)}
                >
                  <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
                  <View style={[styles.collectionIconBg, { backgroundColor: `${color}20` }]}>
                    <RNText style={styles.collectionEmoji}>{collection.icon}</RNText>
                  </View>
                  <StyledText size={FONTS.SUBHEADLINE} weight="semibold" color={colors.text.primary} numberOfLines={1}>
                    {collection.title}
                  </StyledText>
                  <StyledText size={FONTS.CAPTION_1} color={color}>
                    {t('plurals.workout', { count: collection.workoutIds.length })}
                  </StyledText>
                </Pressable>
              )
            })}
          </View>
        </View>

        {/* Programs */}
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:browse.programs')}</StyledText>
            <TextButton>{t('seeAll')}</TextButton>
          </View>
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={styles.programsScroll}
          >
            {translatedPrograms.map((program) => (
              <View key={program.id} style={styles.programCard}>
                <BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />

                <View style={styles.programHeader}>
                  <View style={styles.programLevelBadge}>
                    <StyledText size={FONTS.CAPTION_2} weight="semibold" color={colors.text.primary}>{t(`levels.${program.level.toLowerCase()}`)}</StyledText>
                  </View>
                </View>

                <StyledText size={FONTS.HEADLINE} weight="semibold" color={colors.text.primary}>{program.title}</StyledText>

                <View style={styles.programMeta}>
                  <View style={styles.programMetaItem}>
                    <Ionicons name="calendar" size={14} color={colors.text.tertiary} />
                    <StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary}>{t('screens:browse.weeksCount', { count: program.weeks })}</StyledText>
                  </View>
                  <View style={styles.programMetaItem}>
                    <Ionicons name="repeat" size={14} color={colors.text.tertiary} />
                    <StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary}>{t('screens:browse.timesPerWeek', { count: program.workoutsPerWeek })}</StyledText>
                  </View>
                </View>
              </View>
            ))}
          </ScrollView>
        </View>

        {/* New Releases */}
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:browse.newReleases')}</StyledText>
          </View>
          {translatedNewReleases.map((workout) => (
            <Pressable
              key={workout.id}
              style={styles.releaseRow}
              onPress={() => handleWorkoutPress(workout.id)}
            >
              <View style={[styles.releaseAvatar, { backgroundColor: BRAND.PRIMARY }]}>
                <Ionicons name="flame" size={20} color="#FFFFFF" />
              </View>
              <View style={styles.releaseInfo}>
                <StyledText size={FONTS.HEADLINE} weight="semibold" color={colors.text.primary}>{workout.title}</StyledText>
                <StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary}>
                  {t('durationLevel', { duration: workout.duration, level: t(`levels.${workout.level.toLowerCase()}`) })}
                </StyledText>
              </View>
              <Ionicons name="play-circle" size={32} color={BRAND.PRIMARY} />
            </Pressable>
          ))}
        </View>
      </ScrollView>
    </View>
  )
}

// ═══════════════════════════════════════════════════════════════════════════
// STYLES
// ═══════════════════════════════════════════════════════════════════════════

const COLLECTION_CARD_WIDTH = (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3]) / 2

function createStyles(colors: ThemeColors) {
  return StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.bg.base,
    },
    scrollView: {
      flex: 1,
    },
    scrollContent: {
      paddingHorizontal: LAYOUT.SCREEN_PADDING,
    },

    // Featured Collection
    featuredCard: {
      height: 200,
      borderRadius: RADIUS.GLASS_CARD,
      overflow: 'hidden',
      marginBottom: SPACING[8],
      marginTop: SPACING[4],
      ...colors.shadow.lg,
    },
    featuredBadge: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: 'rgba(0, 0, 0, 0.3)',
      paddingHorizontal: SPACING[2],
      paddingVertical: SPACING[1],
      borderRadius: RADIUS.SM,
      alignSelf: 'flex-start',
      margin: SPACING[4],
      gap: SPACING[1],
    },
    featuredBadgeText: {
      fontSize: 11,
      fontWeight: 'bold',
      color: '#FFFFFF',
    },
    featuredInfo: {
      position: 'absolute',
      bottom: SPACING[5],
      left: SPACING[5],
      right: SPACING[5],
    },
    featuredStats: {
      flexDirection: 'row',
      gap: SPACING[4],
      marginTop: SPACING[3],
    },
    featuredStat: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: SPACING[1],
    },

    // Section
    section: {
      marginBottom: SPACING[6],
    },
    sectionHeader: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginBottom: SPACING[4],
    },

    // Collections Grid
    collectionsGrid: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      gap: SPACING[3],
      marginTop: SPACING[3],
    },
    collectionCard: {
      width: COLLECTION_CARD_WIDTH,
      paddingVertical: SPACING[4],
      paddingHorizontal: SPACING[3],
      borderRadius: RADIUS.LG,
      overflow: 'hidden',
      borderWidth: 1,
      borderColor: colors.border.glass,
      gap: SPACING[1],
    },
    collectionIconBg: {
      width: 44,
      height: 44,
      borderRadius: 12,
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: SPACING[2],
    },
    collectionEmoji: {
      fontSize: 22,
    },

    // Programs
    programsScroll: {
      gap: SPACING[3],
    },
    programCard: {
      width: 200,
      height: 140,
      borderRadius: RADIUS.LG,
      overflow: 'hidden',
      padding: SPACING[4],
      borderWidth: 1,
      borderColor: colors.border.glass,
    },
    programHeader: {
      flexDirection: 'row',
      justifyContent: 'flex-end',
      marginBottom: SPACING[2],
    },
    programLevelBadge: {
      backgroundColor: 'rgba(255, 107, 53, 0.2)',
      paddingHorizontal: SPACING[2],
      paddingVertical: SPACING[1],
      borderRadius: RADIUS.SM,
    },
    programMeta: {
      flexDirection: 'row',
      gap: SPACING[3],
      marginTop: SPACING[3],
    },
    programMetaItem: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: SPACING[1],
    },

    // New Releases
    releaseRow: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: SPACING[3],
      paddingHorizontal: SPACING[4],
      backgroundColor: colors.bg.surface,
      borderRadius: RADIUS.LG,
      marginBottom: SPACING[2],
      gap: SPACING[3],
    },
    releaseAvatar: {
      width: 44,
      height: 44,
      borderRadius: 22,
      alignItems: 'center',
      justifyContent: 'center',
    },
    releaseInitial: {
      fontSize: 18,
      fontWeight: '700',
      color: '#FFFFFF',
    },
    releaseInfo: {
      flex: 1,
      gap: 2,
    },
  })
}