/**
 * TabataFit Profile Screen — Native iOS
 * Dark Medical design with SwiftUI Islands
 */

import { useRouter } from 'expo-router'
import {
  View,
  ScrollView,
  StyleSheet,
  Pressable,
} from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import * as Linking from 'expo-linking'
import Constants from 'expo-constants'
import { useTranslation } from 'react-i18next'
import { useMemo, useState } from 'react'
import { useUserStore, useActivityStore } from '@/src/shared/stores'
import { requestNotificationPermissions, usePurchases } from '@/src/shared/hooks'
import { useThemeColors } from '@/src/shared/theme'
import type { ThemeColors } from '@/src/shared/theme/types'
import { StyledText } from '@/src/shared/components/StyledText'
import { SPACING } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'
import { DataDeletionModal } from '@/src/shared/components/DataDeletionModal'
import { deleteSyncedData } from '@/src/shared/services/sync'
import { GREEN, NAVY, TEXT } from '@/src/shared/constants/colors'
import { FONT_FAMILY } from '@/src/shared/constants/typography'
import {
  NativeList,
  NativeSection,
  NativeSwitch,
  NativeLabeledRow,
  NativeButton,
} from '@/src/shared/components/native'

// ═══════════════════════════════════════════════════════════════════════════
// COMPONENT: PROFILE SCREEN
// ═══════════════════════════════════════════════════════════════════════════

export default function ProfileScreen() {
  const { t } = useTranslation('screens')
  const router = useRouter()
  const insets = useSafeAreaInsets()
  const colors = useThemeColors()
  const styles = useMemo(() => createStyles(colors), [colors])
  const profile = useUserStore((s) => s.profile)
  const settings = useUserStore((s) => s.settings)
  const updateSettings = useUserStore((s) => s.updateSettings)
  const updateProfile = useUserStore((s) => s.updateProfile)
  const setSyncStatus = useUserStore((s) => s.setSyncStatus)
  const { restorePurchases, isPremium } = usePurchases()
  const [showDeleteModal, setShowDeleteModal] = useState(false)

  const planLabel = isPremium ? 'TabataFit+' : t('profile.freePlan')
  const avatarInitial = profile.name?.[0]?.toUpperCase() || 'U'

  const history = useActivityStore((s) => s.history)
  const streak = useActivityStore((s) => s.streak)
  const stats = useMemo(() => ({
    workouts: history.length,
    streak: streak.current,
    calories: history.reduce((sum, r) => sum + (r.calories ?? 0), 0),
  }), [history, streak])

  const handleSignOut = () => {
    updateProfile({
      name: '',
      email: '',
      subscription: 'free',
      onboardingCompleted: false,
    })
    router.replace('/onboarding')
  }

  const handleRestore = async () => {
    await restorePurchases()
  }

  const handleDeleteData = async () => {
    const result = await deleteSyncedData()
    if (result.success) {
      setSyncStatus('unsynced', null)
      setShowDeleteModal(false)
    }
  }

  const handleReminderToggle = async (enabled: boolean) => {
    if (enabled) {
      const granted = await requestNotificationPermissions()
      if (!granted) return
    }
    updateSettings({ reminders: enabled })
  }

  const handleRateApp = () => {
    Linking.openURL('https://apps.apple.com/app/tabatafit/id1234567890')
  }

  const handleContactUs = () => {
    Linking.openURL('mailto:contact@tabatafit.app')
  }

  const handlePrivacyPolicy = () => {
    router.push('/privacy')
  }

  const handleFAQ = () => {
    Linking.openURL('https://tabatafit.app/faq')
  }

  const appVersion = Constants.expoConfig?.version ?? '1.0.0'

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 40 }]}
        showsVerticalScrollIndicator={false}
      >
      {/* ════════════════════════════════════════════════════════════════════
          PROFILE HEADER
      ═══════════════════════════════════════════════════════════════════ */}
      <View style={styles.headerContainer}>
        <View style={styles.avatarContainer}>
          <StyledText size={48} weight="bold" color={TEXT.PRIMARY}>
            {avatarInitial}
          </StyledText>
        </View>

        <View style={styles.nameContainer}>
          <StyledText size={22} weight="semibold" style={{ textAlign: 'center' }}>
            {profile.name || t('profile.guest')}
          </StyledText>
          <View style={styles.planContainer}>
            <StyledText size={15} color={isPremium ? GREEN[500] : colors.text.tertiary}>
              {planLabel}
            </StyledText>
            {isPremium && (
              <StyledText size={12} color={GREEN[500]}>✓</StyledText>
            )}
          </View>
        </View>

        <View style={styles.statsContainer}>
          <View style={styles.statItem}>
            <StyledText size={20} weight="bold" color={GREEN[500]} style={{ textAlign: 'center' }}>
              🔥 {stats.workouts}
            </StyledText>
            <StyledText size={12} color={colors.text.tertiary} style={{ textAlign: 'center' }}>
              {t('profile.statsWorkouts')}
            </StyledText>
          </View>
          <View style={styles.statItem}>
            <StyledText size={20} weight="bold" color={GREEN[500]} style={{ textAlign: 'center' }}>
              📅 {stats.streak}
            </StyledText>
            <StyledText size={12} color={colors.text.tertiary} style={{ textAlign: 'center' }}>
              {t('profile.statsStreak')}
            </StyledText>
          </View>
          <View style={styles.statItem}>
            <StyledText size={20} weight="bold" color={GREEN[500]} style={{ textAlign: 'center' }}>
              ⚡️ {Math.round(stats.calories / 1000)}k
            </StyledText>
            <StyledText size={12} color={colors.text.tertiary} style={{ textAlign: 'center' }}>
              {t('profile.statsCalories')}
            </StyledText>
          </View>
        </View>
      </View>

      {/* ════════════════════════════════════════════════════════════════════
          UPGRADE CTA (FREE USERS ONLY)
      ═══════════════════════════════════════════════════════════════════ */}
      {!isPremium && (
        <View style={styles.upgradeCard}>
          <Pressable onPress={() => router.push('/paywall')}>
            <View style={styles.premiumContent}>
              <StyledText size={17} weight="semibold" color={GREEN[500]}>
                ✨ {t('profile.upgradeTitle')}
              </StyledText>
              <StyledText size={15} color={colors.text.tertiary} style={{ marginTop: SPACING[1] }}>
                {t('profile.upgradeDescription')}
              </StyledText>
            </View>
            <StyledText size={15} color={GREEN[500]} style={{ marginTop: SPACING[3] }}>
              {t('profile.learnMore')} →
            </StyledText>
          </Pressable>
        </View>
      )}

      {/* ════════════════════════════════════════════════════════════════════
          WORKOUT SETTINGS — Native List
      ═══════════════════════════════════════════════════════════════════ */}
      <NativeList>
        <NativeSection title={t('profile.sectionWorkout').toUpperCase()}>
          <NativeLabeledRow label={t('profile.hapticFeedback')}>
            <NativeSwitch
              value={settings.haptics}
              onValueChange={(v) => updateSettings({ haptics: v })}
            />
          </NativeLabeledRow>
          <NativeLabeledRow label={t('profile.soundEffects')}>
            <NativeSwitch
              value={settings.soundEffects}
              onValueChange={(v) => updateSettings({ soundEffects: v })}
            />
          </NativeLabeledRow>
          <NativeLabeledRow label={t('profile.voiceCoaching')}>
            <NativeSwitch
              value={settings.voiceCoaching}
              onValueChange={(v) => updateSettings({ voiceCoaching: v })}
            />
          </NativeLabeledRow>
        </NativeSection>
      </NativeList>

      {/* ════════════════════════════════════════════════════════════════════
          NOTIFICATIONS — Native List
      ═══════════════════════════════════════════════════════════════════ */}
      <NativeList>
        <NativeSection title={t('profile.sectionNotifications').toUpperCase()}>
          <NativeLabeledRow label={t('profile.dailyReminders')}>
            <NativeSwitch
              value={settings.reminders}
              onValueChange={handleReminderToggle}
            />
          </NativeLabeledRow>
          {settings.reminders && (
            <NativeLabeledRow label={t('profile.reminderTime')} value={settings.reminderTime} />
          )}
        </NativeSection>
      </NativeList>

      {/* ════════════════════════════════════════════════════════════════════
          PERSONALIZATION (PREMIUM ONLY)
      ═══════════════════════════════════════════════════════════════════ */}
      {isPremium && (
        <NativeList>
          <NativeSection title={t('profile.sectionPersonalization').toUpperCase()}>
            <NativeLabeledRow
              label={
                profile.syncStatus === 'synced'
                  ? t('profile.personalizationEnabled')
                  : t('profile.personalizationDisabled')
              }
              value={profile.syncStatus === 'synced' ? '✓' : '○'}
            />
          </NativeSection>
        </NativeList>
      )}

      {/* ════════════════════════════════════════════════════════════════════
          ABOUT — Native List
      ═══════════════════════════════════════════════════════════════════ */}
      <NativeList>
        <NativeSection title={t('profile.sectionAbout').toUpperCase()}>
          <NativeLabeledRow
            label="Programmes Kiné"
            value="Rééducation et physiothérapie"
            chevron
            onPress={() => router.push('/program/debutant' as any)}
          />
          <NativeLabeledRow label={t('profile.version')} value={appVersion} />
          <NativeLabeledRow label={t('profile.rateApp')} chevron onPress={handleRateApp} />
          <NativeLabeledRow label={t('profile.contactUs')} chevron onPress={handleContactUs} />
          <NativeLabeledRow label={t('profile.faq')} chevron onPress={handleFAQ} />
          <NativeLabeledRow label={t('profile.privacyPolicy')} chevron onPress={handlePrivacyPolicy} />
        </NativeSection>
      </NativeList>

      {/* ════════════════════════════════════════════════════════════════════
          ACCOUNT (PREMIUM ONLY)
      ═══════════════════════════════════════════════════════════════════ */}
      {isPremium && (
        <NativeList>
          <NativeSection title={t('profile.sectionAccount').toUpperCase()}>
            <NativeLabeledRow label={t('profile.restorePurchases')} chevron onPress={handleRestore} />
          </NativeSection>
        </NativeList>
      )}

      {/* ════════════════════════════════════════════════════════════════════
          SIGN OUT — Native Button
      ═══════════════════════════════════════════════════════════════════ */}
      <View style={styles.signOutContainer}>
        <NativeButton
          variant="destructive"
          title={t('profile.signOut')}
          onPress={handleSignOut}
        />
      </View>
      </ScrollView>

      <DataDeletionModal
        visible={showDeleteModal}
        onDelete={handleDeleteData}
        onCancel={() => setShowDeleteModal(false)}
      />
    </View>
  )
}

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

function createStyles(colors: ThemeColors) {
  return StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.bg.base,
    },
    scrollView: {
      flex: 1,
    },
    scrollContent: {
      flexGrow: 1,
    },
    headerContainer: {
      alignItems: 'center',
      paddingVertical: SPACING[6],
      paddingHorizontal: SPACING[4],
    },
    avatarContainer: {
      width: 90,
      height: 90,
      borderRadius: RADIUS.FULL,
      backgroundColor: NAVY[700],
      justifyContent: 'center',
      alignItems: 'center',
    },
    nameContainer: {
      marginTop: SPACING[4],
      alignItems: 'center',
    },
    planContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      marginTop: SPACING[1],
      gap: SPACING[1],
    },
    statsContainer: {
      flexDirection: 'row',
      justifyContent: 'center',
      marginTop: SPACING[4],
      gap: SPACING[8],
    },
    statItem: {
      alignItems: 'center',
    },
    upgradeCard: {
      marginHorizontal: SPACING[5],
      paddingVertical: SPACING[4],
      paddingHorizontal: SPACING[4],
      backgroundColor: NAVY[800],
      borderRadius: RADIUS.LG,
      borderCurve: 'continuous' as const,
      borderWidth: 1,
      borderColor: colors.border.dim,
    },
    premiumContent: {
      gap: SPACING[1],
    },
    signOutContainer: {
      marginTop: SPACING[5],
      marginHorizontal: SPACING[5],
    },
  })
}
