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

import { View, StyleSheet, ScrollView, Dimensions, Pressable } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useRouter } from 'expo-router'
import { Icon, type IconName } from '@/src/shared/components/Icon'

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 { NativeGauge } from '@/src/shared/components/native'
import { NativeButton } from '@/src/shared/components/native'

import { useThemeColors, BRAND, PHASE } 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 { GREEN, NAVY, BORDER_COLORS, TEXT } from '@/src/shared/constants/colors'

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

// ═══════════════════════════════════════════════════════════════════════════
// STAT RING — Native SwiftUI Gauge
// ═══════════════════════════════════════════════════════════════════════════

function StatRing({
  value,
  max,
  color,
  size = 52,
}: {
  value: number
  max: number
  color: string
  size?: number
}) {
  return (
    <NativeGauge value={value} maxValue={max} color={color} size={size} />
  )
}

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

function StatCard({
  label,
  value,
  max,
  color,
  icon,
}: {
  label: string
  value: number
  max: number
  color: string
  icon: IconName
}) {
  const colors = useThemeColors()
  const styles = useMemo(() => createStyles(colors), [colors])
  return (
    <View style={styles.statCard}>
      <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>
        <Icon name={icon} size={18} tintColor={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]} />
      <StyledText
        size={11}
        weight={isToday ? 'bold' : 'regular'}
        color={isToday ? colors.text.primary : colors.text.hint}
      >
        {day}
      </StyledText>
    </View>
  )
}

// ═══════════════════════════════════════════════════════════════════════════
// EMPTY STATE
// ═══════════════════════════════════════════════════════════════════════════

function EmptyState({ onStartWorkout }: { onStartWorkout: () => void }) {
  const { t } = useTranslation()
  const colors = useThemeColors()
  const styles = useMemo(() => createStyles(colors), [colors])

  return (
    <View style={styles.emptyState}>
      <View style={styles.emptyIconCircle}>
        <Icon name="flame" size={48} tintColor={GREEN[500]} />
      </View>
      <StyledText size={22} weight="bold" color={colors.text.primary} style={styles.emptyTitle}>
        {t('screens:activity.emptyTitle')}
      </StyledText>
      <StyledText size={15} color={colors.text.tertiary} style={styles.emptySubtitle}>
        {t('screens:activity.emptySubtitle')}
      </StyledText>
      <View style={{ width: '100%', alignItems: 'center' }}>
        <NativeButton
          variant="primary"
          title={t('screens:activity.startFirstWorkout')}
          onPress={onStartWorkout}
          systemImage="play.fill"
        />
      </View>
    </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 router = useRouter()
  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 + 20 }]}
        showsVerticalScrollIndicator={false}
      >
        {/* Header */}
        <StyledText
          size={34}
          weight="bold"
          color={colors.text.primary}
          style={{ marginBottom: SPACING[6] }}
        >
          {t('screens:activity.title')}
        </StyledText>

        {/* Empty state when no history */}
        {history.length === 0 ? (
          <EmptyState onStartWorkout={() => router.push('/(tabs)' as any)} />
        ) : (
        <>
        {/* Streak Banner */}
        <View style={styles.streakBanner}>
          <View style={styles.streakRow}>
            <View style={styles.streakIconWrap}>
              <Icon name="flame.fill" size={28} tintColor={TEXT.PRIMARY} />
            </View>
            <View style={{ flex: 1 }}>
              <StyledText size={28} weight="bold" color={TEXT.PRIMARY}>
                {String(streak.current || 0)}
              </StyledText>
              <StyledText size={13} color={TEXT.PRIMARY}>
                {t('screens:activity.dayStreak')}
              </StyledText>
            </View>
            <View style={styles.streakMeta}>
              <StyledText size={11} color={TEXT.SECONDARY}>
                {t('screens:activity.longest')}
              </StyledText>
              <StyledText size={20} weight="bold" color={TEXT.PRIMARY}>
                {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={GREEN[500]}
            icon="dumbbell"
          />
          <StatCard
            label={t('screens:activity.minutes')}
            value={totalMinutes}
            max={300}
            color={PHASE.REST}
            icon="clock"
          />
          <StatCard
            label={t('screens:activity.calories')}
            value={totalCalories}
            max={5000}
            color={GREEN[600]}
            icon="bolt"
          />
          <StatCard
            label={t('screens:activity.bestStreak')}
            value={streak.longest}
            max={30}
            color={BRAND.SUCCESS}
            icon="arrow.up.right"
          />
        </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}>
            <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}>
              {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: GREEN[500] }]} />
                      </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={GREEN[500]}>
                        {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}>
                <View
                  style={[
                    styles.achievementIcon,
                    a.unlocked
                      ? { backgroundColor: GREEN.DIM }
                      : { backgroundColor: colors.bg.overlay1 },
                  ]}
                >
                  <Icon
                    name={a.unlocked ? 'trophy.fill' : 'lock.fill'}
                    size={22}
                    tintColor={a.unlocked ? GREEN[500] : 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.LG,
      overflow: 'hidden',
      marginBottom: SPACING[5],
      backgroundColor: GREEN[500],
    },
    streakRow: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: SPACING[5],
      paddingVertical: SPACING[5],
      gap: SPACING[4],
    },
    streakIconWrap: {
      width: 48,
      height: 48,
      borderRadius: RADIUS.FULL,
      backgroundColor: NAVY[900],
      alignItems: 'center',
      justifyContent: 'center',
    },
    streakMeta: {
      alignItems: 'center',
      backgroundColor: NAVY[900],
      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.border.dim,
      backgroundColor: NAVY[800],
    },
    statCardInner: {
      flexDirection: 'row',
      alignItems: 'center',
      padding: SPACING[4],
    },

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

    // Weekly
    weekCard: {
      borderRadius: RADIUS.LG,
      overflow: 'hidden',
      borderWidth: 1,
      borderColor: colors.border.dim,
      backgroundColor: NAVY[800],
      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: RADIUS.SM,
      backgroundColor: colors.bg.overlay2,
    },
    weekBarFilled: {
      backgroundColor: GREEN[500],
    },
    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.border.dim,
      backgroundColor: NAVY[800],
      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: RADIUS.SM,
    },
    recentDivider: {
      height: StyleSheet.hairlineWidth,
      backgroundColor: colors.border.dim,
      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.border.dim,
      backgroundColor: NAVY[800],
      overflow: 'hidden',
      paddingHorizontal: SPACING[1],
    },
    achievementIcon: {
      width: 44,
      height: 44,
      borderRadius: RADIUS.FULL,
      alignItems: 'center',
      justifyContent: 'center',
    },

    // Empty State
    emptyState: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      paddingTop: SPACING[10],
      paddingHorizontal: SPACING[6],
    },
    emptyIconCircle: {
      width: 96,
      height: 96,
      borderRadius: RADIUS.FULL,
      backgroundColor: GREEN.DIM,
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: SPACING[6],
    },
    emptyTitle: {
      textAlign: 'center' as const,
      marginBottom: SPACING[2],
    },
    emptySubtitle: {
      textAlign: 'center' as const,
      lineHeight: 22,
      marginBottom: SPACING[8],
    },
    emptyCtaButton: {
      flexDirection: 'row' as const,
      alignItems: 'center' as const,
      justifyContent: 'center' as const,
      height: 52,
      paddingHorizontal: SPACING[8],
      borderRadius: RADIUS.LG,
      overflow: 'hidden' as const,
      backgroundColor: GREEN[500],
    },
  })
}
