import React, { useMemo, useState } from 'react';
import { ImageBackground, 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 { useSafeAnalytics } from '../../services/analytics';
import { ThemeBackdrop } from '../../components/ThemeBackdrop';
import { useColors } from '../../constants/Colors';
import { useApp } from '../../context/AppContext';
import { OnboardingProgressService } from '../../services/onboardingProgressService';

const ONBOARDING_BACKGROUND = {
  light: '#fbfaf3',
  dark: '#0a110b',
};

const SOURCE_OPTIONS = [
  { id: 'app_store', icon: 'storefront-outline' as const, signal: 'organic_store' },
  { id: 'instagram', icon: 'logo-instagram' as const, signal: 'social_visual' },
  { id: 'tiktok', icon: 'musical-notes-outline' as const, signal: 'social_video' },
  { id: 'friend', icon: 'people-outline' as const, signal: 'referral' },
  { id: 'search', icon: 'search-outline' as const, signal: 'high_intent_search' },
  { id: 'other', icon: 'ellipsis-horizontal-circle-outline' as const, signal: 'unclassified' },
];

const getSourceOnboardingCopy = (language: 'de' | 'en' | 'es') => {
  if (language === 'de') {
    return {
      step: 'Schritt 1 von 4',
      heroTitle: 'Dein Start wird danach personalisiert.',
      heroMeta: 'Scan, Sammlung und Health-Check passen sich deinem Ziel an.',
      valueTitle: 'Warum wir fragen',
      valueBody: 'Die Antwort hilft, deinen Einstieg auf das auszurichten, was dich wirklich hierher gebracht hat.',
      subtitles: {
        app_store: 'Du hast aktiv nach Pflanzen- oder Pflegehilfe gesucht.',
        instagram: 'Du kamst ueber visuelle Pflanzen-Inhalte.',
        tiktok: 'Du kamst ueber kurze Videos oder Creator.',
        friend: 'Persoenliche Empfehlung, hoher Vertrauens-Intent.',
        search: 'Konkretes Problem oder schneller Pflanzen-Check.',
        other: 'Passt nicht sauber in die anderen Quellen.',
      },
    };
  }

  if (language === 'es') {
    return {
      step: 'Paso 1 de 4',
      heroTitle: 'Tu inicio se adapta despues.',
      heroMeta: 'Escaneo, coleccion y health-check segun tu objetivo.',
      valueTitle: 'Por que preguntamos',
      valueBody: 'La respuesta ayuda a adaptar el inicio a lo que realmente te trajo aqui.',
      subtitles: {
        app_store: 'Buscaste ayuda para plantas o cuidado.',
        instagram: 'Llegaste desde contenido visual de plantas.',
        tiktok: 'Llegaste desde videos cortos o creadores.',
        friend: 'Recomendacion personal con alta confianza.',
        search: 'Problema concreto o chequeo rapido.',
        other: 'No encaja en las demas fuentes.',
      },
    };
  }

  return {
    step: 'Step 1 of 4',
    heroTitle: 'Your first run adapts next.',
    heroMeta: 'Scanner, collection, and health check based on your goal.',
    valueTitle: 'Why we ask',
    valueBody: 'This helps tailor the first steps to what actually brought you here.',
    subtitles: {
      app_store: 'You actively searched for plant or care help.',
      instagram: 'You came from visual plant content.',
      tiktok: 'You came from short videos or creators.',
      friend: 'Personal referral with high trust intent.',
      search: 'Concrete problem or quick plant check intent.',
      other: 'Does not fit the other sources cleanly.',
    },
  };
};

export default function OnboardingSourceScreen() {
  const router = useRouter();
  const posthog = useSafeAnalytics();
  const { session, isDarkMode, colorPalette, language, t } = useApp();
  const colors = useColors(isDarkMode, colorPalette);
  const screenBackground = isDarkMode ? ONBOARDING_BACKGROUND.dark : ONBOARDING_BACKGROUND.light;
  const [selectedSource, setSelectedSource] = useState<string | null>(null);
  const copy = getSourceOnboardingCopy(language);

  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',
      revops_signal: SOURCE_OPTIONS.find((option) => option.id === source)?.signal ?? 'skipped',
    });
    router.replace('/onboarding/goal');
  };

  return (
    <View style={[styles.container, { backgroundColor: screenBackground }]}>
      {isDarkMode ? <ThemeBackdrop colors={colors} /> : null}
      <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right', 'bottom']}>
        <View style={styles.header}>
          <View style={[styles.stepPill, { backgroundColor: colors.primarySoft, borderColor: colors.border }]}>
            <Text style={[styles.stepLabel, { color: colors.primaryDark }]}>{copy.step}</Text>
          </View>
          <ImageBackground
            source={require('../../assets/onboarding_source_mockup.png')}
            style={[styles.heroPreview, { borderColor: colors.border }]}
            imageStyle={styles.heroImage}
            resizeMode="cover"
          >
            <View style={[styles.heroOverlay, { backgroundColor: isDarkMode ? 'rgba(8, 14, 9, 0.46)' : 'rgba(251, 250, 243, 0.32)' }]} />
            <View style={styles.heroContent}>
              <View style={[styles.heroIcon, { backgroundColor: colors.primary }]}>
                <Ionicons name="scan-outline" size={20} color={colors.onPrimary} />
              </View>
              <View style={styles.heroCopy}>
                <Text style={[styles.heroTitle, { color: isDarkMode ? colors.textOnImage : colors.text }]}>
                  {copy.heroTitle}
                </Text>
                <Text style={[styles.heroMeta, { color: isDarkMode ? '#d7ded9' : colors.textSecondary }]}>
                  {copy.heroMeta}
                </Text>
              </View>
            </View>
          </ImageBackground>
          <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>
                <View style={styles.optionCopy}>
                  <Text style={[styles.optionLabel, { color: colors.text }]}>{sourceLabels[option.id as keyof typeof sourceLabels]}</Text>
                  <Text style={[styles.optionSubtitle, { color: colors.textMuted }]}>
                    {copy.subtitles[option.id as keyof typeof copy.subtitles]}
                  </Text>
                </View>
                {isActive && <Ionicons name="checkmark-circle" size={18} color={colors.primary} style={styles.optionCheck} />}
              </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: 12,
    paddingBottom: 14,
    justifyContent: 'space-between',
  },
  header: {
    alignItems: 'center',
    gap: 9,
  },
  stepPill: {
    borderWidth: 1,
    borderRadius: 999,
    paddingHorizontal: 12,
    paddingVertical: 7,
  },
  stepLabel: {
    fontSize: 12,
    fontWeight: '800',
    textTransform: 'uppercase',
    letterSpacing: 0.4,
  },
  heroPreview: {
    width: '100%',
    height: 175,
    borderRadius: 24,
    borderWidth: 1,
    justifyContent: 'flex-end',
    overflow: 'hidden',
  },
  heroImage: {
    borderRadius: 24,
  },
  heroOverlay: {
    ...StyleSheet.absoluteFillObject,
  },
  heroContent: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    gap: 12,
    padding: 12,
  },
  heroIcon: {
    width: 36,
    height: 36,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
  },
  heroCopy: {
    flex: 1,
    gap: 3,
  },
  heroTitle: {
    fontSize: 15,
    lineHeight: 18,
    fontWeight: '800',
  },
  heroMeta: {
    fontSize: 10.5,
    lineHeight: 14,
    fontWeight: '600',
  },
  title: {
    fontSize: 25,
    fontWeight: '800',
    textAlign: 'center',
    lineHeight: 29,
  },
  subtitle: {
    fontSize: 13,
    textAlign: 'center',
    lineHeight: 18,
    maxWidth: 320,
  },
  options: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
  },
  optionCard: {
    width: '48.8%',
    minHeight: 68,
    borderRadius: 15,
    borderWidth: 1.5,
    padding: 9,
    gap: 8,
    position: 'relative',
  },
  optionIcon: {
    width: 34,
    height: 34,
    borderRadius: 17,
    alignItems: 'center',
    justifyContent: 'center',
  },
  optionCopy: {
    gap: 3,
  },
  optionLabel: {
    fontSize: 13,
    fontWeight: '700',
  },
  optionSubtitle: {
    fontSize: 10,
    lineHeight: 13,
  },
  optionCheck: {
    position: 'absolute',
    right: 9,
    top: 9,
  },
  footer: {
    flexDirection: 'row',
    gap: 12,
  },
  secondaryBtn: {
    flex: 1,
    height: 50,
    borderRadius: 16,
    borderWidth: 1.5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  secondaryBtnText: {
    fontSize: 15,
    fontWeight: '600',
  },
  primaryBtn: {
    flex: 1.2,
    height: 50,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
  },
  primaryBtnText: {
    fontSize: 15,
    fontWeight: '700',
  },
});