Greenlens/app/onboarding/source.tsx

import React, { useMemo, useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { usePostHog } from 'posthog-react-native';
import { ThemeBackdrop } from '../../components/ThemeBackdrop';
import { useColors } from '../../constants/Colors';
import { useApp } from '../../context/AppContext';
import { OnboardingProgressService } from '../../services/onboardingProgressService';

const SOURCE_OPTIONS = [
  { id: 'app_store', icon: 'phone-portrait-outline' as const },
  { id: 'instagram', icon: 'logo-instagram' as const },
  { id: 'tiktok', icon: 'musical-notes-outline' as const },
  { id: 'friend', icon: 'people-outline' as const },
  { id: 'search', icon: 'search-outline' as const },
  { id: 'other', icon: 'ellipsis-horizontal-circle-outline' as const },
];

export default function OnboardingSourceScreen() {
  const router = useRouter();
  const posthog = usePostHog();
  const { session, isDarkMode, colorPalette, t } = useApp();
  const colors = useColors(isDarkMode, colorPalette);
  const [selectedSource, setSelectedSource] = useState<string | null>(null);

  const sourceLabels = useMemo(
    () => ({
      app_store: t.sourceOptionAppStore,
      instagram: t.sourceOptionInstagram,
      tiktok: t.sourceOptionTikTok,
      friend: t.sourceOptionFriend,
      search: t.sourceOptionSearch,
      other: t.sourceOptionOther,
    }),
    [
      t.sourceOptionAppStore,
      t.sourceOptionFriend,
      t.sourceOptionInstagram,
      t.sourceOptionOther,
      t.sourceOptionSearch,
      t.sourceOptionTikTok,
    ],
  );

  const finish = (source: string | null) => {
    if (session?.userId && source) {
      OnboardingProgressService.setAcquisitionSource(session.userId, source);
    }

    posthog.capture('onboarding_source_completed', {
      source: source ?? 'skipped',
    });
    router.replace('/onboarding/goal');
  };

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <ThemeBackdrop colors={colors} />
      <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right', 'bottom']}>
        <View style={styles.header}>
          <View style={[styles.headerIcon, { backgroundColor: colors.primarySoft }]}>
            <Ionicons name="paper-plane-outline" size={26} color={colors.primaryDark} />
          </View>
          <Text style={[styles.title, { color: colors.text }]}>{t.sourceOnboardingTitle}</Text>
          <Text style={[styles.subtitle, { color: colors.textSecondary }]}>{t.sourceOnboardingSubtitle}</Text>
        </View>

        <View style={styles.options}>
          {SOURCE_OPTIONS.map((option) => {
            const isActive = selectedSource === option.id;
            return (
              <TouchableOpacity
                key={option.id}
                style={[
                  styles.optionCard,
                  {
                    backgroundColor: isActive ? colors.primarySoft : colors.surface,
                    borderColor: isActive ? colors.primary : colors.border,
                  },
                ]}
                onPress={() => setSelectedSource(option.id)}
                activeOpacity={0.85}
              >
                <View style={[styles.optionIcon, { backgroundColor: isActive ? colors.primary : colors.surfaceMuted }]}>
                  <Ionicons name={option.icon} size={18} color={isActive ? colors.onPrimary : colors.textMuted} />
                </View>
                <Text style={[styles.optionLabel, { color: colors.text }]}>{sourceLabels[option.id as keyof typeof sourceLabels]}</Text>
                {isActive && <Ionicons name="checkmark-circle" size={18} color={colors.primary} />}
              </TouchableOpacity>
            );
          })}
        </View>

        <View style={styles.footer}>
          <TouchableOpacity
            style={[styles.secondaryBtn, { borderColor: colors.borderStrong, backgroundColor: colors.surface }]}
            onPress={() => finish(null)}
          >
            <Text style={[styles.secondaryBtnText, { color: colors.text }]}>{t.sourceOnboardingSkip}</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[
              styles.primaryBtn,
              { backgroundColor: selectedSource ? colors.primary : colors.surfaceMuted },
            ]}
            onPress={() => finish(selectedSource)}
            disabled={!selectedSource}
          >
            <Text
              style={[
                styles.primaryBtnText,
                { color: selectedSource ? colors.onPrimary : colors.textMuted },
              ]}
            >
              {t.sourceOnboardingContinue}
            </Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  safeArea: {
    flex: 1,
    paddingHorizontal: 20,
    paddingTop: 24,
    paddingBottom: 20,
  },
  header: {
    alignItems: 'center',
    gap: 10,
    marginBottom: 28,
  },
  headerIcon: {
    width: 64,
    height: 64,
    borderRadius: 32,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 28,
    fontWeight: '800',
    textAlign: 'center',
    lineHeight: 32,
  },
  subtitle: {
    fontSize: 14,
    textAlign: 'center',
    lineHeight: 20,
    maxWidth: 320,
  },
  options: {
    gap: 12,
    flex: 1,
  },
  optionCard: {
    minHeight: 64,
    borderRadius: 18,
    borderWidth: 1.5,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    gap: 12,
  },
  optionIcon: {
    width: 36,
    height: 36,
    borderRadius: 18,
    alignItems: 'center',
    justifyContent: 'center',
  },
  optionLabel: {
    flex: 1,
    fontSize: 15,
    fontWeight: '600',
  },
  footer: {
    flexDirection: 'row',
    gap: 12,
    marginTop: 16,
  },
  secondaryBtn: {
    flex: 1,
    height: 52,
    borderRadius: 16,
    borderWidth: 1.5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  secondaryBtnText: {
    fontSize: 15,
    fontWeight: '600',
  },
  primaryBtn: {
    flex: 1.2,
    height: 52,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
  },
  primaryBtnText: {
    fontSize: 15,
    fontWeight: '700',
  },
});