/**
 * Sync Consent Modal - Shown after first workout completion
 * Never uses words: account, signup, login, register
 * Frames as "personalization" not "account creation"
 */

import { useState } from 'react'
import { View, Modal, Pressable, StyleSheet } from 'react-native'
import { useTranslation } from 'react-i18next'
import { useThemeColors } from '@/src/shared/theme'
import { StyledText } from '@/src/shared/components/StyledText'
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'
import { BRAND, TEXT, GREEN } from '@/src/shared/constants/colors'
import { Icon, type IconName } from '@/src/shared/components/Icon'

interface SyncConsentModalProps {
  visible: boolean
  onAccept: () => void
  onDecline: () => void
}

export function SyncConsentModal({
  visible,
  onAccept,
  onDecline,
}: SyncConsentModalProps) {
  const { t } = useTranslation('screens')
  const colors = useThemeColors()
  const [isLoading, setIsLoading] = useState(false)

  const handleAccept = async () => {
    setIsLoading(true)
    await onAccept()
    setIsLoading(false)
  }

  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      onRequestClose={onDecline}
    >
      <View style={[styles.overlay, { backgroundColor: colors.bg.scrim }]}>
        <View
          style={[styles.container, { backgroundColor: colors.bg.surface }]}
        >
          {/* Icon */}
          <View style={styles.iconContainer}>
            <Icon name="sparkles" size={40} tintColor={BRAND.PRIMARY} />
          </View>

          {/* Title */}
          <StyledText
            size={24}
            weight="bold"
            color={colors.text.primary}
            style={styles.title}
          >
            {t('sync.title')}
          </StyledText>

          {/* Benefits */}
          <View style={styles.benefits}>
            <BenefitRow
              icon="arrow.up.right"
              text={t('sync.benefits.recommendations')}
              colors={colors}
            />
            <BenefitRow
              icon="figure.run"
              text={t('sync.benefits.adaptive')}
              colors={colors}
            />
            <BenefitRow
              icon="arrow.triangle.2.circlepath"
              text={t('sync.benefits.sync')}
              colors={colors}
            />
            <BenefitRow
              icon="checkmark.shield.fill"
              text={t('sync.benefits.secure')}
              colors={colors}
            />
          </View>

          {/* Privacy Note */}
          <StyledText
            size={13}
            color={colors.text.tertiary}
            style={styles.privacy}
          >
            {t('sync.privacy')}
          </StyledText>

          {/* CTA Buttons */}
          <Pressable
            style={[styles.primaryButton, isLoading && styles.disabled]}
            onPress={handleAccept}
            disabled={isLoading}
          >
            <StyledText size={17} weight="semibold" color={TEXT.PRIMARY}>
              {isLoading ? 'Setting up...' : t('sync.primaryButton')}
            </StyledText>
          </Pressable>

          <Pressable style={styles.secondaryButton} onPress={onDecline}>
            <StyledText size={15} color={colors.text.secondary}>
              {t('sync.secondaryButton')}
            </StyledText>
          </Pressable>
        </View>
      </View>
    </Modal>
  )
}

function BenefitRow({
  icon,
  text,
  colors,
}: {
  icon: IconName
  text: string
  colors: ReturnType<typeof useThemeColors>
}) {
  return (
    <View style={styles.benefitRow}>
      <Icon
        name={icon}
        size={22}
        tintColor={BRAND.PRIMARY}
      />
      <StyledText
        size={15}
        color={colors.text.secondary}
        style={styles.benefitText}
      >
        {text}
      </StyledText>
    </View>
  )
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: SPACING[4],
  },
  container: {
    width: '100%',
    maxWidth: 360,
    borderRadius: RADIUS.XL,
    padding: SPACING[6],
    alignItems: 'center',
  },
  iconContainer: {
    width: 80,
    height: 80,
    borderRadius: RADIUS.FULL,
    backgroundColor: GREEN.DIM,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: SPACING[4],
  },
  title: {
    textAlign: 'center',
    marginBottom: SPACING[6],
  },
  benefits: {
    width: '100%',
    gap: SPACING[3],
    marginBottom: SPACING[6],
  },
  benefitRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: SPACING[3],
  },
  benefitText: {
    flex: 1,
    lineHeight: 22,
  },
  privacy: {
    textAlign: 'center',
    marginBottom: SPACING[6],
    lineHeight: 20,
  },
  primaryButton: {
    width: '100%',
    height: LAYOUT.BUTTON_HEIGHT,
    backgroundColor: BRAND.PRIMARY,
    borderRadius: RADIUS.MD,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: SPACING[3],
  },
  secondaryButton: {
    padding: SPACING[3],
  },
  disabled: {
    opacity: 0.6,
  },
})
