tabatago/app/(tabs)/profile.tsx

/**
 * TabataFit Profile Screen
 * SwiftUI-first settings with native iOS look
 */

import { View, StyleSheet, ScrollView } from 'react-native'
import { useRouter } from 'expo-router'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import {
  Host,
  List,
  Section,
  Switch,
  LabeledContent,
  DateTimePicker,
  Button,
  VStack,
  Text,
} 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 } from '@/src/shared/theme'
import type { ThemeColors } from '@/src/shared/theme/types'
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'

const FONTS = {
  LARGE_TITLE: 34,
  TITLE_2: 22,
  CAPTION_1: 12,
}

// ═══════════════════════════════════════════════════════════════════════════
// MAIN 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 { restorePurchases } = usePurchases()

  const isPremium = profile.subscription !== 'free'
  const planLabel = isPremium ? 'TabataFit+' : t('profile.freePlan')

  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()

  // Calculate total height for single SwiftUI island
  // insetGrouped style: ~50px top/bottom margins, section header ~35px, row ~44px
  const basePadding = 100 // top + bottom margins for insetGrouped

  // Account section
  const accountRows = 1 + (isPremium ? 1 : 0) // plan, [+ restore]
  const accountHeight = 35 + accountRows * 44

  // Upgrade section (free users only)
  const upgradeHeight = isPremium ? 0 : 35 + 80 // header + VStack content

  // Workout section
  const workoutHeight = 35 + 3 * 44 // haptics, sound, voice

  // Notifications section
  const notificationRows = settings.reminders ? 2 : 1
  const notificationHeight = 35 + notificationRows * 44

  // About section
  const aboutHeight = 35 + 2 * 44 // version, privacy

  // Sign out section
  const signOutHeight = 44 // single button row

  const totalHeight = basePadding + accountHeight + upgradeHeight + workoutHeight + notificationHeight + aboutHeight + signOutHeight

  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 Header Card */}
        <View style={styles.profileHeader}>
          <View style={styles.avatarContainer}>
            <StyledText size={FONTS.LARGE_TITLE} weight="bold" color="#FFFFFF">
              {profile.name?.[0] || '?'}
            </StyledText>
          </View>
          <View style={styles.profileInfo}>
            <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>
              {profile.name || t('profile.guest')}
            </StyledText>
            {isPremium && (
              <View style={styles.premiumBadge}>
                <StyledText size={FONTS.CAPTION_1} weight="semibold" color={BRAND.PRIMARY}>
                  {planLabel}
                </StyledText>
              </View>
            )}
          </View>
        </View>

        {/* All Settings in Single SwiftUI Island */}
        <Host useViewportSizeMeasurement colorScheme={colors.colorScheme} style={{ height: totalHeight }}>
          <List listStyle="insetGrouped" scrollEnabled={false}>
            {/* Account Section */}
            <Section header={t('profile.sectionAccount')}>
              <LabeledContent label={t('profile.plan')}>
                <Text color={isPremium ? BRAND.PRIMARY : undefined}>{planLabel}</Text>
              </LabeledContent>
              {isPremium && (
                <Button variant="borderless" onPress={handleRestore} color={colors.text.tertiary}>
                  {t('profile.restorePurchases')}
                </Button>
              )}
            </Section>

            {/* Upgrade CTA for Free Users */}
            {!isPremium && (
              <Section>
                <VStack alignment="leading" spacing={8}>
                  <Text font="headline" color={BRAND.PRIMARY}>
                    {t('profile.upgradeTitle')}
                  </Text>
                  <Text color="systemSecondary" font="subheadline">
                    {t('profile.upgradeDescription')}
                  </Text>
                </VStack>
                <Button variant="borderless" onPress={() => router.push('/paywall')} color={BRAND.PRIMARY}>
                  {t('profile.learnMore')}
                </Button>
              </Section>
            )}

            {/* Workout Settings */}
            <Section header={t('profile.sectionWorkout')} footer={t('profile.workoutSettingsFooter')}>
              <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>

            {/* Notification Settings */}
            <Section header={t('profile.sectionNotifications')} footer={settings.reminders ? t('profile.reminderFooter') : undefined}>
              <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>

            {/* About Section */}
            <Section header={t('profile.sectionAbout')}>
              <LabeledContent label={t('profile.version')}>
                <Text color="systemSecondary">1.0.0</Text>
              </LabeledContent>
              <Button variant="borderless" color="systemSecondary" onPress={() => router.push('/privacy')}>
                {t('profile.privacyPolicy')}
              </Button>
            </Section>

            {/* Sign Out */}
            <Section>
              <Button variant="borderless" role="destructive" onPress={() => {}}>
                {t('profile.signOut')}
              </Button>
            </Section>
          </List>
        </Host>
      </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 Header
    profileHeader: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: SPACING[5],
      gap: SPACING[4],
    },
    avatarContainer: {
      width: 60,
      height: 60,
      borderRadius: 30,
      backgroundColor: BRAND.PRIMARY,
      alignItems: 'center',
      justifyContent: 'center',
    },
    profileInfo: {
      flex: 1,
    },
    premiumBadge: {
      backgroundColor: 'rgba(255, 107, 53, 0.15)',
      paddingHorizontal: SPACING[3],
      paddingVertical: SPACING[1],
      borderRadius: 12,
      alignSelf: 'flex-start',
      marginTop: SPACING[1],
    },
  })
}