/**
 * TabataFit Activity Screen
 * Premium stats dashboard — streak, rings, weekly chart, history
 */

import { View, StyleSheet, ScrollView, Dimensions } from 'react-native'
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 { useActivityStore, getWeeklyActivity } from '@/src/shared/stores'
import { getWorkoutById } from '@/src/shared/data'
import { ACHIEVEMENTS } from '@/src/shared/data'
import { StyledText } from '@/src/shared/components/StyledText'

import { useThemeColors, BRAND, PHASE, GRADIENTS } 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')

// ═══════════════════════════════════════════════════════════════════════════
// STAT RING — Custom circular progress (pure RN, no SwiftUI)
// ═══════════════════════════════════════════════════════════════════════════

function StatRing({
  value,
  max,
  color,
  size = 64,
}: {
  value: number
  max: number
  color: string
  size?: number
}) {
  const colors = useThemeColors()
  const strokeWidth = 5
  const radius = (size - strokeWidth) / 2
  const circumference = 2 * Math.PI * radius
  const progress = Math.min(value / max, 1)
  const strokeDashoffset = circumference * (1 - progress)

  // We'll use a View-based ring since SVG isn't available
  // Use border trick for a circular progress indicator
  return (
    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
      {/* Track */}
      <View
        style={{
          position: 'absolute',
          width: size,
          height: size,
          borderRadius: size / 2,
          borderWidth: strokeWidth,
          borderColor: colors.bg.overlay2,
        }}
      />
      {/* Fill — simplified: show a colored ring proportional to progress */}
      <View
        style={{
          position: 'absolute',
          width: size,
          height: size,
          borderRadius: size / 2,
          borderWidth: strokeWidth,
          borderColor: color,
          borderTopColor: progress > 0.25 ? color : 'transparent',
          borderRightColor: progress > 0.5 ? color : 'transparent',
          borderBottomColor: progress > 0.75 ? color : 'transparent',
          borderLeftColor: progress > 0 ? color : 'transparent',
          transform: [{ rotate: '-90deg' }],
          opacity: progress > 0 ? 1 : 0.3,
        }}
      />
    </View>
  )
}

// ═══════════════════════════════════════════════════════════════════════════
// STAT CARD
// ═══════════════════════════════════════════════════════════════════════════

function StatCard({
  label,
  value,
  max,
  color,
  icon,
}: {
  label: string
  value: number
  max: number
  color: string
  icon: keyof typeof Ionicons.glyphMap
}) {
  const colors = useThemeColors()
  const styles = useMemo(() => createStyles(colors), [colors])
  return (
    <View style={styles.statCard}>
      <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
      <View style={styles.statCardInner}>
        <StatRing value={value} max={max} color={color} size={52} />
        <View style={{ flex: 1, marginLeft: SPACING[3] }}>
          <StyledText size={24} weight="bold" color={colors.text.primary}>
            {String(value)}
          </StyledText>
          <StyledText size={12} color={colors.text.tertiary}>
            {label}
          </StyledText>
        </View>
        <Ionicons name={icon} size={18} color={color} />
      </View>
    </View>
  )
}

// ═══════════════════════════════════════════════════════════════════════════
// WEEKLY BAR
// ═══════════════════════════════════════════════════════════════════════════

function WeeklyBar({
  day,
  completed,
  isToday,
}: {
  day: string
  completed: boolean
  isToday: boolean
}) {
  const colors = useThemeColors()
  const styles = useMemo(() => createStyles(colors), [colors])
  return (
    <View style={styles.weekBarColumn}>
      <View style={[styles.weekBar, completed && styles.weekBarFilled]}>
        {completed && (
          <LinearGradient
            colors={[BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
            style={[StyleSheet.absoluteFill, { borderRadius: 4 }]}
          />
        )}
      </View>
      <StyledText
        size={11}
        weight={isToday ? 'bold' : 'regular'}
        color={isToday ? colors.text.primary : colors.text.hint}
      >
        {day}
      </StyledText>
    </View>
  )
}

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

const DAY_KEYS = ['days.sun', 'days.mon', 'days.tue', 'days.wed', 'days.thu', 'days.fri', 'days.sat'] as const

export default function ActivityScreen() {
  const { t } = useTranslation()
  const insets = useSafeAreaInsets()
  const colors = useThemeColors()
  const styles = useMemo(() => createStyles(colors), [colors])
  const streak = useActivityStore((s) => s.streak)
  const history = useActivityStore((s) => s.history)
  const totalWorkouts = history.length
  const totalMinutes = useMemo(() => history.reduce((sum, r) => sum + r.durationMinutes, 0), [history])
  const totalCalories = useMemo(() => history.reduce((sum, r) => sum + r.calories, 0), [history])
  const recentWorkouts = useMemo(() => history.slice(0, 5), [history])
  const weeklyActivity = useMemo(() => getWeeklyActivity(history), [history])

  const today = new Date().getDay() // 0=Sun

  // Check achievements
  const unlockedAchievements = ACHIEVEMENTS.filter(a => {
    switch (a.type) {
      case 'workouts': return totalWorkouts >= a.requirement
      case 'streak': return streak.longest >= a.requirement
      case 'minutes': return totalMinutes >= a.requirement
      case 'calories': return totalCalories >= a.requirement
      default: return false
    }
  })
  const displayAchievements = ACHIEVEMENTS.slice(0, 4).map(a => ({
    ...a,
    unlocked: unlockedAchievements.some(u => u.id === a.id),
  }))

  const formatDate = (timestamp: number) => {
    const now = Date.now()
    const diff = now - timestamp
    if (diff < 86400000) return t('screens:activity.today')
    if (diff < 172800000) return t('screens:activity.yesterday')
    return t('screens:activity.daysAgo', { count: Math.floor(diff / 86400000) })
  }

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

        {/* Streak Banner */}
        <View style={styles.streakBanner}>
          <LinearGradient
            colors={GRADIENTS.CTA}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
            style={StyleSheet.absoluteFill}
          />
          <View style={styles.streakRow}>
            <View style={styles.streakIconWrap}>
              <Ionicons name="flame" size={28} color="#FFFFFF" />
            </View>
            <View style={{ flex: 1 }}>
              <StyledText size={28} weight="bold" color="#FFFFFF">
                {String(streak.current || 0)}
              </StyledText>
              <StyledText size={13} color="rgba(255,255,255,0.8)">
                {t('screens:activity.dayStreak')}
              </StyledText>
            </View>
            <View style={styles.streakMeta}>
              <StyledText size={11} color="rgba(255,255,255,0.6)">
                {t('screens:activity.longest')}
              </StyledText>
              <StyledText size={20} weight="bold" color="#FFFFFF">
                {String(streak.longest)}
              </StyledText>
            </View>
          </View>
        </View>

        {/* Stats Grid — 2x2 */}
        <View style={styles.statsGrid}>
          <StatCard
            label={t('screens:activity.workouts')}
            value={totalWorkouts}
            max={100}
            color={BRAND.PRIMARY}
            icon="barbell-outline"
          />
          <StatCard
            label={t('screens:activity.minutes')}
            value={totalMinutes}
            max={300}
            color={PHASE.REST}
            icon="time-outline"
          />
          <StatCard
            label={t('screens:activity.calories')}
            value={totalCalories}
            max={5000}
            color={BRAND.SECONDARY}
            icon="flash-outline"
          />
          <StatCard
            label={t('screens:activity.bestStreak')}
            value={streak.longest}
            max={30}
            color={BRAND.SUCCESS}
            icon="trending-up-outline"
          />
        </View>

        {/* This Week */}
        <View style={styles.section}>
          <StyledText size={20} weight="semibold" color={colors.text.primary} style={{ marginBottom: SPACING[4] }}>
            {t('screens:activity.thisWeek')}
          </StyledText>
          <View style={styles.weekCard}>
            <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
            <View style={styles.weekBarsRow}>
              {weeklyActivity.map((d, i) => (
                <WeeklyBar
                  key={i}
                  day={t(DAY_KEYS[i])}
                  completed={d.completed}
                  isToday={i === today}
                />
              ))}
            </View>
            <View style={styles.weekSummary}>
              <StyledText size={13} color={colors.text.tertiary}>
                {t('screens:activity.ofDays', { completed: weeklyActivity.filter(d => d.completed).length })}
              </StyledText>
            </View>
          </View>
        </View>

        {/* Recent Workouts */}
        {recentWorkouts.length > 0 && (
          <View style={styles.section}>
            <StyledText size={20} weight="semibold" color={colors.text.primary} style={{ marginBottom: SPACING[4] }}>
              {t('screens:activity.recent')}
            </StyledText>
            <View style={styles.recentCard}>
              <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
              {recentWorkouts.map((result, idx) => {
                const workout = getWorkoutById(result.workoutId)
                const workoutTitle = workout ? t(`content:workouts.${workout.id}`, { defaultValue: workout.title }) : t('screens:activity.workouts')
                return (
                  <View key={result.id}>
                    <View style={styles.recentRow}>
                      <View style={styles.recentDot}>
                        <View style={[styles.dot, { backgroundColor: BRAND.PRIMARY }]} />
                      </View>
                      <View style={{ flex: 1 }}>
                        <StyledText size={15} weight="semibold" color={colors.text.primary}>
                          {workoutTitle}
                        </StyledText>
                        <StyledText size={12} color={colors.text.tertiary}>
                          {formatDate(result.completedAt) + ' \u00B7 ' + t('units.minUnit', { count: result.durationMinutes })}
                        </StyledText>
                      </View>
                      <StyledText size={14} weight="semibold" color={BRAND.PRIMARY}>
                        {t('units.calUnit', { count: result.calories })}
                      </StyledText>
                    </View>
                    {idx < recentWorkouts.length - 1 && <View style={styles.recentDivider} />}
                  </View>
                )
              })}
            </View>
          </View>
        )}

        {/* Achievements */}
        <View style={styles.section}>
          <StyledText size={20} weight="semibold" color={colors.text.primary} style={{ marginBottom: SPACING[4] }}>
            {t('screens:activity.achievements')}
          </StyledText>
          <View style={styles.achievementsRow}>
            {displayAchievements.map((a) => (
              <View key={a.id} style={styles.achievementCard}>
                <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
                <View
                  style={[
                    styles.achievementIcon,
                    a.unlocked
                      ? { backgroundColor: 'rgba(255, 107, 53, 0.15)' }
                      : { backgroundColor: 'rgba(255, 255, 255, 0.04)' },
                  ]}
                >
                  <Ionicons
                    name={a.unlocked ? 'trophy' : 'lock-closed'}
                    size={22}
                    color={a.unlocked ? BRAND.PRIMARY : colors.text.hint}
                  />
                </View>
                <StyledText
                  size={11}
                  weight="semibold"
                  color={a.unlocked ? colors.text.primary : colors.text.hint}
                  numberOfLines={1}
                  style={{ marginTop: SPACING[2], textAlign: 'center' }}
                >
                  {t(`content:achievements.${a.id}.title`, { defaultValue: a.title })}
                </StyledText>
              </View>
            ))}
          </View>
        </View>
      </ScrollView>
    </View>
  )
}

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

const CARD_HALF = (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,
    },

    // Streak
    streakBanner: {
      borderRadius: RADIUS.GLASS_CARD,
      overflow: 'hidden',
      marginBottom: SPACING[5],
      ...colors.shadow.md,
    },
    streakRow: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: SPACING[5],
      paddingVertical: SPACING[5],
      gap: SPACING[4],
    },
    streakIconWrap: {
      width: 48,
      height: 48,
      borderRadius: 24,
      backgroundColor: 'rgba(255,255,255,0.15)',
      alignItems: 'center',
      justifyContent: 'center',
    },
    streakMeta: {
      alignItems: 'center',
      backgroundColor: 'rgba(255,255,255,0.1)',
      paddingHorizontal: SPACING[4],
      paddingVertical: SPACING[2],
      borderRadius: RADIUS.MD,
    },

    // Stats 2x2
    statsGrid: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      gap: SPACING[3],
      marginBottom: SPACING[6],
    },
    statCard: {
      width: CARD_HALF,
      borderRadius: RADIUS.LG,
      overflow: 'hidden',
      borderWidth: 1,
      borderColor: colors.bg.overlay2,
    },
    statCardInner: {
      flexDirection: 'row',
      alignItems: 'center',
      padding: SPACING[4],
    },

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

    // Weekly
    weekCard: {
      borderRadius: RADIUS.LG,
      overflow: 'hidden',
      borderWidth: 1,
      borderColor: colors.bg.overlay2,
      paddingTop: SPACING[5],
      paddingBottom: SPACING[4],
    },
    weekBarsRow: {
      flexDirection: 'row',
      justifyContent: 'space-around',
      alignItems: 'flex-end',
      paddingHorizontal: SPACING[4],
      height: 100,
    },
    weekBarColumn: {
      alignItems: 'center',
      flex: 1,
      gap: SPACING[2],
    },
    weekBar: {
      width: 24,
      height: 60,
      borderRadius: 4,
      backgroundColor: colors.border.glassLight,
      overflow: 'hidden',
    },
    weekBarFilled: {
      backgroundColor: BRAND.PRIMARY,
    },
    weekSummary: {
      alignItems: 'center',
      marginTop: SPACING[3],
      paddingTop: SPACING[3],
      borderTopWidth: StyleSheet.hairlineWidth,
      borderTopColor: colors.bg.overlay2,
      marginHorizontal: SPACING[4],
    },

    // Recent
    recentCard: {
      borderRadius: RADIUS.LG,
      overflow: 'hidden',
      borderWidth: 1,
      borderColor: colors.bg.overlay2,
      paddingVertical: SPACING[2],
    },
    recentRow: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: SPACING[4],
      paddingVertical: SPACING[3],
    },
    recentDot: {
      width: 24,
      alignItems: 'center',
      marginRight: SPACING[3],
    },
    dot: {
      width: 8,
      height: 8,
      borderRadius: 4,
    },
    recentDivider: {
      height: StyleSheet.hairlineWidth,
      backgroundColor: colors.border.glassLight,
      marginLeft: SPACING[4] + 24 + SPACING[3],
    },

    // Achievements
    achievementsRow: {
      flexDirection: 'row',
      gap: SPACING[3],
    },
    achievementCard: {
      flex: 1,
      aspectRatio: 0.9,
      borderRadius: RADIUS.LG,
      alignItems: 'center',
      justifyContent: 'center',
      borderWidth: 1,
      borderColor: colors.bg.overlay2,
      overflow: 'hidden',
      paddingHorizontal: SPACING[1],
    },
    achievementIcon: {
      width: 44,
      height: 44,
      borderRadius: 22,
      alignItems: 'center',
      justifyContent: 'center',
    },
  })
}