/**
 * TabataFit Profile Screen
 * React Native + SwiftUI Islands — wired to shared data
 */

import { View, StyleSheet, ScrollView, Text as RNText } 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 {
  Host,
  List,
  Section,
  Switch,
  Text,
  LabeledContent,
  DateTimePicker,
  Button,
} from '@expo/ui/swift-ui'

import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { useUserStore } from '@/src/shared/stores'
import { requestNotificationPermissions, usePurchases } from '@/src/shared/hooks'
import { StyledText } from '@/src/shared/components/StyledText'

import { useThemeColors, BRAND, 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 FONTS = {
  LARGE_TITLE: 34,
  TITLE_2: 22,
  HEADLINE: 17,
  SUBHEADLINE: 15,
  CAPTION_1: 12,
}

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

export default function ProfileScreen() {
  const { t } = useTranslation('screens')
  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 { restorePurchases } = usePurchases()

  const isPremium = profile.subscription !== 'free'
  const planLabel = isPremium ? 'TabataFit+' : 'Free'

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

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

  const handleTimeChange = (date: Date) => {
    const hh = String(date.getHours()).padStart(2, '0')
    const mm = String(date.getMinutes()).padStart(2, '0')
    updateSettings({ reminderTime: `${hh}:${mm}` })
  }

  // Build initial date string for the picker (today at reminderTime)
  const today = new Date()
  const [rh, rm] = settings.reminderTime.split(':').map(Number)
  const pickerDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), rh, rm)
  const pickerInitial = pickerDate.toISOString()

  const settingsHeight = settings.reminders ? 430 : 385

  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('profile.title')}
        </StyledText>

        {/* Profile Card */}
        <View style={styles.profileCard}>
          <BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
          <View style={styles.avatarContainer}>
            <LinearGradient
              colors={GRADIENTS.CTA}
              style={StyleSheet.absoluteFill}
            />
            <StyledText size={FONTS.LARGE_TITLE} weight="bold" color="#FFFFFF">
              {profile.name[0]}
            </StyledText>
          </View>
          <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>
            {profile.name}
          </StyledText>
          <StyledText size={FONTS.SUBHEADLINE} color={colors.text.tertiary}>
            {profile.email}
          </StyledText>
          {isPremium && (
            <View style={styles.premiumBadge}>
              <Ionicons name="star" size={12} color={BRAND.PRIMARY} />
              <StyledText size={FONTS.CAPTION_1} weight="semibold" color={colors.text.primary}>
                {planLabel}
              </StyledText>
            </View>
          )}
        </View>

        {/* Subscription */}
        {isPremium && (
          <View style={styles.subscriptionCard}>
            <LinearGradient
              colors={GRADIENTS.CTA}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 1 }}
              style={StyleSheet.absoluteFill}
            />
            <View style={styles.subscriptionContent}>
              <Ionicons name="ribbon" size={24} color="#FFFFFF" />
              <View style={styles.subscriptionInfo}>
                <StyledText size={FONTS.HEADLINE} weight="bold" color="#FFFFFF">
                  {planLabel}
                </StyledText>
                <StyledText size={FONTS.CAPTION_1} color="rgba(255,255,255,0.8)">
                  {t('profile.memberSince', { date: profile.joinDate })}
                </StyledText>
              </View>
            </View>
          </View>
        )}

        {/* SwiftUI Island: Subscription Section */}
        <Host useViewportSizeMeasurement colorScheme={colors.colorScheme} style={{ height: 60, marginTop: -20 }}>
          <List listStyle="insetGrouped" scrollEnabled={false}>
            <Section title={t('profile.sectionSubscription')}>
              <Button
                variant="borderless"
                onPress={handleRestore}
                color={colors.text.primary}
              >
                {t('profile.restorePurchases')}
              </Button>
            </Section>
          </List>
        </Host>

        {/* SwiftUI Island: Settings */}
        <Host useViewportSizeMeasurement colorScheme={colors.colorScheme} style={{ height: settingsHeight }}>
          <List listStyle="insetGrouped" scrollEnabled={false}>
            <Section title={t('profile.sectionWorkout')}>
              <Switch
                label={t('profile.hapticFeedback')}
                value={settings.haptics}
                onValueChange={(v) => updateSettings({ haptics: v })}
                color={BRAND.PRIMARY}
              />
              <Switch
                label={t('profile.soundEffects')}
                value={settings.soundEffects}
                onValueChange={(v) => updateSettings({ soundEffects: v })}
                color={BRAND.PRIMARY}
              />
              <Switch
                label={t('profile.voiceCoaching')}
                value={settings.voiceCoaching}
                onValueChange={(v) => updateSettings({ voiceCoaching: v })}
                color={BRAND.PRIMARY}
              />
            </Section>
            <Section title={t('profile.sectionNotifications')}>
              <Switch
                label={t('profile.dailyReminders')}
                value={settings.reminders}
                onValueChange={handleReminderToggle}
                color={BRAND.PRIMARY}
              />
              {settings.reminders && (
                <LabeledContent label={t('profile.reminderTime')}>
                  <DateTimePicker
                    displayedComponents="hourAndMinute"
                    variant="compact"
                    initialDate={pickerInitial}
                    onDateSelected={handleTimeChange}
                    color={BRAND.PRIMARY}
                  />
                </LabeledContent>
              )}
            </Section>
          </List>
        </Host>

        {/* Version */}
        <StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary} style={styles.versionText}>
          {t('profile.version')}
        </StyledText>
      </ScrollView>
    </View>
  )
}

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

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

    // Profile Card
    profileCard: {
      borderRadius: RADIUS.GLASS_CARD,
      overflow: 'hidden',
      marginBottom: SPACING[6],
      marginTop: SPACING[4],
      alignItems: 'center',
      paddingVertical: SPACING[6],
      borderWidth: 1,
      borderColor: colors.border.glass,
      ...colors.shadow.md,
    },
    avatarContainer: {
      width: 80,
      height: 80,
      borderRadius: 40,
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: SPACING[3],
      overflow: 'hidden',
    },
    premiumBadge: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: 'rgba(255, 107, 53, 0.15)',
      paddingHorizontal: SPACING[3],
      paddingVertical: SPACING[1],
      borderRadius: RADIUS.FULL,
      marginTop: SPACING[3],
      gap: SPACING[1],
    },

    // Subscription Card
    subscriptionCard: {
      height: 80,
      borderRadius: RADIUS.LG,
      overflow: 'hidden',
      marginBottom: SPACING[6],
      ...colors.shadow.BRAND_GLOW,
    },
    subscriptionContent: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: SPACING[4],
      gap: SPACING[3],
    },
    subscriptionInfo: {
      flex: 1,
    },

    // Version Text
    versionText: {
      textAlign: 'center',
      marginTop: SPACING[6],
    },
  })
}