import { useState, useMemo } from 'react'
import { View, StyleSheet, ScrollView, Pressable, Dimensions, ActivityIndicator, FlatList } from 'react-native'
import { useRouter } from 'expo-router'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { BlurView } from 'expo-blur'
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 { usePurchases } from '@/src/shared/hooks/usePurchases'
import { useWorkouts, useCollections, useFeaturedWorkouts, useTrainers } from '@/src/shared/hooks/useSupabaseData'
import { isFreeWorkout } from '@/src/shared/services/access'
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'
import type { Workout, WorkoutCategory, WorkoutLevel } from '@/src/shared/types'

const { width: SCREEN_WIDTH } = Dimensions.get('window')
const CARD_WIDTH = (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3]) / 2
const COLLECTION_CARD_WIDTH = SCREEN_WIDTH * 0.7

type FilterState = {
  category: WorkoutCategory | 'all'
  level: WorkoutLevel | 'all'
  equipment: string | 'all'
}

const CATEGORY_ICONS: Record<WorkoutCategory | 'all', string> = {
  all: 'grid-outline',
  'full-body': 'body-outline',
  'upper-body': 'barbell-outline',
  'lower-body': 'footsteps-outline',
  core: 'fitness-outline',
  cardio: 'heart-outline',
}

const CATEGORY_COLORS: Record<WorkoutCategory | 'all', string> = {
  all: BRAND.PRIMARY,
  'full-body': '#5AC8FA',
  'upper-body': '#FF6B35',
  'lower-body': '#30D158',
  core: '#FF9500',
  cardio: '#FF3B30',
}

const CATEGORY_TRANSLATION_KEYS: Record<WorkoutCategory | 'all', string> = {
  all: 'all',
  'full-body': 'fullBody',
  'upper-body': 'upperBody',
  'lower-body': 'lowerBody',
  core: 'core',
  cardio: 'cardio',
}

function CollectionCard({
  title,
  description,
  icon,
  gradient,
  workoutCount,
  onPress,
}: {
  title: string
  description: string
  icon: string
  gradient?: [string, string]
  workoutCount: number
  onPress: () => void
}) {
  const colors = useThemeColors()
  const haptics = useHaptics()
  const gradientColors = gradient || [BRAND.PRIMARY, '#FF3B30']

  return (
    <Pressable
      testID={`collection-card-${title.toLowerCase().replace(/\s+/g, '-')}`}
      style={styles.collectionCard}
      onPress={() => {
        haptics.buttonTap()
        onPress()
      }}
    >
      <LinearGradient
        colors={gradientColors}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={StyleSheet.absoluteFill}
      />
      <View style={styles.collectionOverlay}>
        <View style={styles.collectionIcon}>
          <Ionicons name={icon as any} size={28} color="#FFFFFF" />
        </View>
        <StyledText size={18} weight="bold" color="#FFFFFF" style={{ marginTop: SPACING[3] }}>
          {title}
        </StyledText>
        <StyledText size={13} color="rgba(255,255,255,0.8)" numberOfLines={2} style={{ marginTop: SPACING[1] }}>
          {description}
        </StyledText>
        <StyledText size={12} color="rgba(255,255,255,0.6)" style={{ marginTop: SPACING[2] }}>
          {workoutCount} workouts
        </StyledText>
      </View>
    </Pressable>
  )
}

function WorkoutCard({
  workout,
  onPress,
  isLocked,
}: {
  workout: Workout
  onPress: () => void
  isLocked?: boolean
}) {
  const colors = useThemeColors()
  const categoryColor = CATEGORY_COLORS[workout.category]

  return (
    <Pressable
      testID={`workout-card-${workout.id}`}
      style={[styles.workoutCard, { borderColor: colors.border.glassLight }]}
      onPress={onPress}
    >
      <BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
      <LinearGradient
        colors={[categoryColor + '20', 'transparent']}
        style={StyleSheet.absoluteFill}
      />

      <View style={[styles.durationBadge, { backgroundColor: categoryColor + '30' }]}>
        <Ionicons name="time-outline" size={10} color={categoryColor} />
        <StyledText size={11} weight="semibold" color={categoryColor} style={{ marginLeft: 3 }}>
          {workout.duration} min
        </StyledText>
      </View>

      {isLocked && (
        <View testID={`lock-badge-${workout.id}`} style={styles.lockBadge}>
          <Ionicons name="lock-closed" size={10} color="#FFFFFF" />
        </View>
      )}

      <View style={styles.playArea}>
        <View style={[styles.playCircle, { backgroundColor: categoryColor + '20' }]}>
          <Ionicons name={isLocked ? 'lock-closed' : 'play'} size={18} color={categoryColor} />
        </View>
      </View>

      <View style={styles.workoutInfo}>
        <StyledText size={14} weight="semibold" color={colors.text.primary} numberOfLines={2}>
          {workout.title}
        </StyledText>
        <StyledText size={11} color={colors.text.tertiary} style={{ marginTop: 2 }}>
          {workout.level} · {workout.calories} cal
        </StyledText>
      </View>
    </Pressable>
  )
}

function FilterPill({
  label,
  isSelected,
  color,
  onPress,
}: {
  label: string
  isSelected: boolean
  color: string
  onPress: () => void
}) {
  const colors = useThemeColors()
  const haptics = useHaptics()

  return (
    <Pressable
      style={[
        styles.filterPill,
        {
          backgroundColor: isSelected ? color + '20' : colors.glass.base.backgroundColor,
          borderColor: isSelected ? color : colors.border.glass,
        },
      ]}
      onPress={() => {
        haptics.selection()
        onPress()
      }}
    >
      <StyledText
        size={13}
        weight={isSelected ? 'semibold' : 'medium'}
        color={isSelected ? color : colors.text.secondary}
      >
        {label}
      </StyledText>
    </Pressable>
  )
}

function LoadingSkeleton() {
  const colors = useThemeColors()

  return (
    <View style={styles.loadingContainer}>
      <ActivityIndicator size="large" color={BRAND.PRIMARY} />
      <StyledText size={15} color={colors.text.secondary} style={{ marginTop: SPACING[3] }}>
        Loading workouts...
      </StyledText>
    </View>
  )
}

export default function ExploreScreen() {
  const { t } = useTranslation()
  const insets = useSafeAreaInsets()
  const router = useRouter()
  const haptics = useHaptics()
  const colors = useThemeColors()
  const { isPremium } = usePurchases()

  const [filters, setFilters] = useState<FilterState>({
    category: 'all',
    level: 'all',
    equipment: 'all',
  })

  const { data: workoutsData, isLoading: workoutsLoading } = useWorkouts()
  const { data: collectionsData, isLoading: collectionsLoading } = useCollections()
  const { data: featuredData } = useFeaturedWorkouts()

  const workouts = workoutsData || []
  const collections = collectionsData || []
  const featured = featuredData || []

  const filteredWorkouts = useMemo(() => {
    return workouts.filter((workout) => {
      if (filters.category !== 'all' && workout.category !== filters.category) return false
      if (filters.level !== 'all' && workout.level !== filters.level) return false
      if (filters.equipment !== 'all') {
        if (filters.equipment === 'none') {
          return workout.equipment.length === 0
        }
        return workout.equipment.some((e) => e.toLowerCase().includes(filters.equipment.toLowerCase()))
      }
      return true
    })
  }, [workouts, filters])

  const categories: (WorkoutCategory | 'all')[] = ['all', 'full-body', 'upper-body', 'lower-body', 'core', 'cardio']
  const levels: (WorkoutLevel | 'all')[] = ['all', 'Beginner', 'Intermediate', 'Advanced']
  const equipmentOptions = ['all', 'none', 'band', 'dumbbells', 'mat']

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

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

  const clearFilters = () => {
    haptics.selection()
    setFilters({ category: 'all', level: 'all', equipment: 'all' })
  }

  const hasActiveFilters = filters.category !== 'all' || filters.level !== 'all' || filters.equipment !== 'all'

  if (workoutsLoading || collectionsLoading) {
    return (
      <View style={[styles.container, { backgroundColor: colors.bg.base, paddingTop: insets.top }]}>
        <LoadingSkeleton />
      </View>
    )
  }

  return (
    <View testID="explore-screen" style={[styles.container, { backgroundColor: colors.bg.base, paddingTop: insets.top }]}>
      <ScrollView
        testID="explore-scroll"
        style={styles.scrollView}
        contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
        showsVerticalScrollIndicator={false}
      >
        <View style={styles.header}>
          <StyledText size={34} weight="bold" color={colors.text.primary}>
            {t('screens:explore.title')}
          </StyledText>
          <StyledText size={15} color={colors.text.tertiary}>
            {t('screens:explore.workoutsCount', { count: workouts.length })}
          </StyledText>
        </View>

        {collections.length > 0 && (
          <View testID="collections-section" style={styles.collectionsSection}>
            <StyledText size={22} weight="bold" color={colors.text.primary}>
              {t('screens:explore.collections')}
            </StyledText>
            <FlatList
              horizontal
              data={collections}
              keyExtractor={(item) => item.id}
              showsHorizontalScrollIndicator={false}
              contentContainerStyle={styles.collectionsList}
              renderItem={({ item }) => (
                <CollectionCard
                  title={item.title}
                  description={item.description}
                  icon={item.icon}
                  gradient={item.gradient}
                  workoutCount={item.workoutIds.length}
                  onPress={() => handleCollectionPress(item.id)}
                />
              )}
            />
          </View>
        )}

        {featured.length > 0 && (
          <View testID="featured-section" style={styles.section}>
            <StyledText size={22} weight="bold" color={colors.text.primary}>
              {t('screens:explore.featured')}
            </StyledText>
            <View style={styles.workoutsGrid}>
              {featured.slice(0, 4).map((workout) => (
                <WorkoutCard
                  key={workout.id}
                  workout={workout}
                  onPress={() => handleWorkoutPress(workout.id)}
                  isLocked={!isPremium && !isFreeWorkout(workout.id)}
                />
              ))}
            </View>
          </View>
        )}

        <View testID="filters-section" style={styles.filtersSection}>
          <View style={styles.filterHeader}>
            <StyledText size={22} weight="bold" color={colors.text.primary}>
              {t('screens:explore.allWorkouts')}
            </StyledText>
            {hasActiveFilters && (
              <Pressable onPress={clearFilters}>
                <StyledText size={14} weight="medium" color={BRAND.PRIMARY}>
                  {t('screens:explore.clearFilters')}
                </StyledText>
              </Pressable>
            )}
          </View>

          <View style={styles.filterRow}>
            <StyledText size={12} weight="semibold" color={colors.text.tertiary}>
              {t('screens:explore.filterCategory')}
            </StyledText>
          </View>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.filterScroll}>
            {categories.map((cat) => (
              <FilterPill
                key={cat}
                label={t(`common:categories.${CATEGORY_TRANSLATION_KEYS[cat]}`)}
                isSelected={filters.category === cat}
                color={CATEGORY_COLORS[cat]}
                onPress={() => setFilters((f) => ({ ...f, category: cat }))}
              />
            ))}
          </ScrollView>

          <View style={[styles.filterRow, { marginTop: SPACING[3] }]}>
            <StyledText size={12} weight="semibold" color={colors.text.tertiary}>
              {t('screens:explore.filterLevel')}
            </StyledText>
          </View>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.filterScroll}>
            {levels.map((level) => (
              <FilterPill
                key={level}
                label={level === 'all' ? 'All Levels' : level}
                isSelected={filters.level === level}
                color={BRAND.PRIMARY}
                onPress={() => setFilters((f) => ({ ...f, level }))}
              />
            ))}
          </ScrollView>

          <View style={[styles.filterRow, { marginTop: SPACING[3] }]}>
            <StyledText size={12} weight="semibold" color={colors.text.tertiary}>
              {t('screens:explore.filterEquipment')}
            </StyledText>
          </View>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.filterScroll}>
            {equipmentOptions.map((eq) => (
              <FilterPill
                key={eq}
                label={eq === 'all' ? 'All Equipment' : t(`screens:explore.equipmentOptions.${eq}`)}
                isSelected={filters.equipment === eq}
                color={BRAND.PRIMARY}
                onPress={() => setFilters((f) => ({ ...f, equipment: eq }))}
              />
            ))}
          </ScrollView>
        </View>

        {filteredWorkouts.length > 0 ? (
          <View style={styles.workoutsGrid}>
            {filteredWorkouts.map((workout) => (
              <WorkoutCard
                key={workout.id}
                workout={workout}
                onPress={() => handleWorkoutPress(workout.id)}
                isLocked={!isPremium && !isFreeWorkout(workout.id)}
              />
            ))}
          </View>
        ) : (
          <View style={styles.noResults}>
            <Ionicons name="search-outline" size={48} color={colors.text.tertiary} />
            <StyledText size={17} weight="semibold" color={colors.text.secondary} style={{ marginTop: SPACING[3] }}>
              {t('screens:explore.noResults')}
            </StyledText>
            <StyledText size={14} color={colors.text.tertiary} style={{ marginTop: SPACING[1] }}>
              {t('screens:explore.tryAdjustingFilters')}
            </StyledText>
          </View>
        )}
      </ScrollView>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    paddingHorizontal: LAYOUT.SCREEN_PADDING,
  },
  header: {
    marginBottom: SPACING[6],
  },
  loadingContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },

  collectionsSection: {
    marginBottom: SPACING[6],
  },
  collectionsList: {
    marginTop: SPACING[4],
    paddingRight: LAYOUT.SCREEN_PADDING,
  },
  collectionCard: {
    width: COLLECTION_CARD_WIDTH,
    height: 180,
    borderRadius: RADIUS.XL,
    marginRight: SPACING[3],
    overflow: 'hidden',
  },
  collectionOverlay: {
    flex: 1,
    padding: SPACING[5],
    backgroundColor: 'rgba(0,0,0,0.3)',
  },
  collectionIcon: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: 'rgba(255,255,255,0.2)',
    alignItems: 'center',
    justifyContent: 'center',
  },

  section: {
    marginBottom: SPACING[6],
  },

  filtersSection: {
    marginBottom: SPACING[6],
  },
  filterHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: SPACING[4],
  },
  filterRow: {
    marginBottom: SPACING[2],
  },
  filterScroll: {
    marginHorizontal: -LAYOUT.SCREEN_PADDING,
    paddingHorizontal: LAYOUT.SCREEN_PADDING,
  },
  filterPill: {
    paddingHorizontal: SPACING[4],
    paddingVertical: SPACING[2],
    borderRadius: RADIUS.FULL,
    marginRight: SPACING[2],
    borderWidth: 1,
    borderCurve: 'continuous',
  },

  workoutsGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: SPACING[3],
  },
  workoutCard: {
    width: CARD_WIDTH,
    height: 200,
    borderRadius: RADIUS.GLASS_CARD,
    overflow: 'hidden',
    borderWidth: 1,
    borderCurve: 'continuous',
  },
  durationBadge: {
    position: 'absolute',
    top: SPACING[3],
    right: SPACING[3],
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: SPACING[2],
    paddingVertical: 3,
    borderRadius: RADIUS.SM,
  },
  lockBadge: {
    position: 'absolute',
    top: SPACING[3],
    left: SPACING[3],
    width: 22,
    height: 22,
    borderRadius: 11,
    backgroundColor: 'rgba(0,0,0,0.6)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  playArea: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 70,
    alignItems: 'center',
    justifyContent: 'center',
  },
  playCircle: {
    width: 44,
    height: 44,
    borderRadius: 22,
    alignItems: 'center',
    justifyContent: 'center',
  },
  workoutInfo: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    padding: SPACING[3],
    paddingTop: SPACING[2],
  },

  noResults: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: SPACING[10],
  },
})
