/**
 * TabataFit Terms of Service Screen
 * Features: F-027, F-029, F-100, F-129
 */

import { useMemo } from 'react'
import { View, StyleSheet, ScrollView } from 'react-native'
import { Stack } from 'expo-router'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useTranslation } from 'react-i18next'
import { StyledText } from '@/src/shared/components/StyledText'
import { useThemeColors } 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 { NAVY, BORDER_COLORS, GREEN } from '@/src/shared/constants/colors'

const SECTIONS = [
  'acceptance',
  'service',
  'subscriptions',
  'cancellation',
  'liability',
  'contact',
] as const

export default function TermsScreen() {
  const { t } = useTranslation()
  const colors = useThemeColors()
  const insets = useSafeAreaInsets()
  const styles = useMemo(() => createStyles(colors), [colors])

  return (
    <>
      <Stack.Screen
        options={{
          headerShown: true,
          headerStyle: { backgroundColor: colors.bg.base },
          headerShadowVisible: false,
          headerTitle: t('screens:terms.title'),
          headerTintColor: colors.text.primary,
          headerBackButtonDisplayMode: 'minimal',
        }}
      />
      <ScrollView
        style={styles.container}
        contentContainerStyle={[
          styles.content,
          { paddingBottom: insets.bottom + SPACING[8] },
        ]}
        contentInsetAdjustmentBehavior="automatic"
      >
        <StyledText preset="CAPTION_1" style={styles.lastUpdated}>
          {t('screens:terms.lastUpdated')}
        </StyledText>

        {SECTIONS.map((section) => (
          <View key={section} style={styles.section}>
            <StyledText preset="HEADING_2" style={styles.sectionTitle}>
              {t(`screens:terms.${section}.title`)}
            </StyledText>
            <StyledText preset="BODY" style={styles.sectionContent}>
              {t(`screens:terms.${section}.content`)}
            </StyledText>
          </View>
        ))}

        <StyledText preset="CAPTION_1" style={styles.email}>
          support@tabatafit.app
        </StyledText>
      </ScrollView>
    </>
  )
}

function createStyles(colors: ThemeColors) {
  return StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.bg.base,
    },
    content: {
      paddingHorizontal: LAYOUT.SCREEN_PADDING,
      paddingTop: SPACING[4],
      gap: SPACING[6],
    },
    lastUpdated: {
      color: colors.text.tertiary,
    },
    section: {
      gap: SPACING[2],
    },
    sectionTitle: {
      color: colors.text.primary,
    },
    sectionContent: {
      color: colors.text.secondary,
      lineHeight: 24,
    },
    email: {
      color: GREEN[500],
      textAlign: 'center',
      marginTop: SPACING[4],
    },
  })
}