tabatago/app/(tabs)/profile.tsx

/**
 * 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,
} from '@expo/ui/swift-ui'

import { useUserStore } from '@/src/shared/stores'
import { StyledText } from '@/src/shared/components/StyledText'

import {
  BRAND,
  DARK,
  TEXT,
  GLASS,
  SHADOW,
  GRADIENTS,
} from '@/src/shared/constants/colors'
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 insets = useSafeAreaInsets()
  const profile = useUserStore((s) => s.profile)
  const settings = useUserStore((s) => s.settings)
  const updateSettings = useUserStore((s) => s.updateSettings)

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

  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={TEXT.PRIMARY}>
          Profile
        </StyledText>

        {/* Profile Card */}
        <View style={styles.profileCard}>
          <BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
          <View style={styles.avatarContainer}>
            <LinearGradient
              colors={GRADIENTS.CTA}
              style={StyleSheet.absoluteFill}
            />
            <StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>
              {profile.name[0]}
            </StyledText>
          </View>
          <StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>
            {profile.name}
          </StyledText>
          <StyledText size={FONTS.SUBHEADLINE} color={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={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={TEXT.PRIMARY} />
              <View style={styles.subscriptionInfo}>
                <StyledText size={FONTS.HEADLINE} weight="bold" color={TEXT.PRIMARY}>
                  {planLabel}
                </StyledText>
                <StyledText size={FONTS.CAPTION_1} color={TEXT.SECONDARY}>
                  {'Member since ' + profile.joinDate}
                </StyledText>
              </View>
            </View>
          </View>
        )}

        {/* SwiftUI Island: Settings */}
        <Host useViewportSizeMeasurement colorScheme="dark" style={{ height: 385 }}>
          <List listStyle="insetGrouped" scrollEnabled={false}>
            <Section title="WORKOUT">
              <Switch
                label="Haptic Feedback"
                value={settings.haptics}
                onValueChange={(v) => updateSettings({ haptics: v })}
                color={BRAND.PRIMARY}
              />
              <Switch
                label="Sound Effects"
                value={settings.soundEffects}
                onValueChange={(v) => updateSettings({ soundEffects: v })}
                color={BRAND.PRIMARY}
              />
              <Switch
                label="Voice Coaching"
                value={settings.voiceCoaching}
                onValueChange={(v) => updateSettings({ voiceCoaching: v })}
                color={BRAND.PRIMARY}
              />
            </Section>
            <Section title="NOTIFICATIONS">
              <Switch
                label="Daily Reminders"
                value={settings.reminders}
                onValueChange={(v) => updateSettings({ reminders: v })}
                color={BRAND.PRIMARY}
              />
              <LabeledContent label="Reminder Time">
                <Text color={TEXT.TERTIARY}>{settings.reminderTime.replace(':00', ':00 AM')}</Text>
              </LabeledContent>
            </Section>
          </List>
        </Host>

        {/* Version */}
        <StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY} style={styles.versionText}>
          TabataFit v1.0.0
        </StyledText>
      </ScrollView>
    </View>
  )
}

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: DARK.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: 'rgba(255, 255, 255, 0.1)',
    ...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],
    ...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],
  },
})