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 { 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 ONBOARDING_BACKGROUND = {
  light: '#fbfaf3',
  dark: '#0a110b',
};

const EXPERIENCE_OPTIONS = [
  { id: 'beginner', icon: 'leaf-outline' as const },
  { id: 'intermediate', icon: 'sunny-outline' as const },
  { id: 'advanced', icon: 'flask-outline' as const },
];

const getExperienceScreenCopy = (language: 'de' | 'en' | 'es') => {
  if (language === 'de') {
    return {
      step: 'Schritt 3 von 4',
      heroBadge: 'Pflege-Tiefe',
      subtitles: {
        beginner: 'Klare Sprache, sichere Defaults, weniger Fachbegriffe.',
        intermediate: 'Praktische Schritte mit genug Kontext.',
        advanced: 'Mehr botanische Details und engere Diagnose.',
      },
    };
  }

  if (language === 'es') {
    return {
      step: 'Paso 3 de 4',
      heroBadge: 'Nivel de cuidado',
      subtitles: {
        beginner: 'Lenguaje claro y recomendaciones seguras.',
        intermediate: 'Pasos practicos con suficiente contexto.',
        advanced: 'Mas detalle botanico y diagnostico preciso.',
      },
    };
  }

  return {
    step: 'Step 3 of 4',
    heroBadge: 'Care depth',
    subtitles: {
      beginner: 'Clear language, fewer assumptions, safer defaults.',
      intermediate: 'Practical care steps with enough detail.',
      advanced: 'More botanical context and tighter diagnosis.',
    },
  };
};

export default function OnboardingExperienceScreen() {
  const router = useRouter();
  const posthog = usePostHog();
  const { session, isDarkMode, colorPalette, language, t } = useApp();
  const colors = useColors(isDarkMode, colorPalette);
  const screenBackground = isDarkMode ? ONBOARDING_BACKGROUND.dark : ONBOARDING_BACKGROUND.light;
  const [selectedLevel, setSelectedLevel] = useState<string | null>(null);
  const copy = getExperienceScreenCopy(language);

  const levelLabels = useMemo(
    () => ({
      beginner: t.experienceOptionBeginner,
      intermediate: t.experienceOptionIntermediate,
      advanced: t.experienceOptionAdvanced,
    }),
    [t.experienceOptionAdvanced, t.experienceOptionBeginner, t.experienceOptionIntermediate],
  );

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

    posthog.capture('onboarding_experience_completed', {
      experience_level: level ?? 'skipped',
    });
    router.replace('/onboarding/health-check');
  };

  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_experience_mockup.png')}
            style={[styles.heroPreview, { borderColor: colors.border }]}
            imageStyle={styles.heroImage}
            resizeMode="cover"
          >
            <View style={[styles.heroOverlay, { backgroundColor: isDarkMode ? 'rgba(8, 14, 9, 0.4)' : 'rgba(251, 250, 243, 0.24)' }]} />
            <View style={[styles.heroMetric, { backgroundColor: colors.surface, borderColor: colors.border }]}>
              <Ionicons name="sparkles-outline" size={18} color={colors.primary} />
              <Text style={[styles.heroMetricText, { color: colors.text }]}>{copy.heroBadge}</Text>
            </View>
          </ImageBackground>
          <Text style={[styles.title, { color: colors.text }]}>{t.experienceOnboardingTitle}</Text>
          <Text style={[styles.subtitle, { color: colors.textSecondary }]}>{t.experienceOnboardingSubtitle}</Text>
        </View>

        <View style={styles.options}>
          {EXPERIENCE_OPTIONS.map((option) => {
            const isActive = selectedLevel === option.id;
            return (
              <TouchableOpacity
                key={option.id}
                style={[
                  styles.optionCard,
                  {
                    backgroundColor: isActive ? colors.primarySoft : colors.surface,
                    borderColor: isActive ? colors.primary : colors.border,
                  },
                ]}
                onPress={() => setSelectedLevel(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 }]}>{levelLabels[option.id as keyof typeof levelLabels]}</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} />}
              </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.experienceOnboardingSkip}</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.primaryBtn, { backgroundColor: selectedLevel ? colors.primary : colors.surfaceMuted }]}
            onPress={() => finish(selectedLevel)}
            disabled={!selectedLevel}
          >
            <Text style={[styles.primaryBtnText, { color: selectedLevel ? colors.onPrimary : colors.textMuted }]}>
              {t.experienceOnboardingContinue}
            </Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  safeArea: { flex: 1, paddingHorizontal: 20, paddingTop: 12, paddingBottom: 14 },
  header: { alignItems: 'center', gap: 9, marginBottom: 14 },
  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, overflow: 'hidden', justifyContent: 'flex-end', alignItems: 'flex-start' },
  heroImage: { borderRadius: 24 },
  heroOverlay: { ...StyleSheet.absoluteFillObject },
  heroMetric: { margin: 12, borderRadius: 999, borderWidth: 1, paddingHorizontal: 11, paddingVertical: 7, flexDirection: 'row', alignItems: 'center', gap: 6 },
  heroMetricText: { fontSize: 12, fontWeight: '800' },
  title: { fontSize: 25, fontWeight: '800', textAlign: 'center', lineHeight: 29 },
  subtitle: { fontSize: 13, textAlign: 'center', lineHeight: 18, maxWidth: 320 },
  options: { gap: 8, flex: 1 },
  optionCard: {
    flex: 1,
    borderRadius: 15,
    borderWidth: 1.5,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 14,
    paddingVertical: 16,
    gap: 10,
  },
  optionIcon: { width: 34, height: 34, borderRadius: 17, alignItems: 'center', justifyContent: 'center' },
  optionCopy: { flex: 1, gap: 3 },
  optionLabel: { fontSize: 14, fontWeight: '700' },
  optionSubtitle: { fontSize: 10.5, lineHeight: 14 },
  footer: { flexDirection: 'row', gap: 12, marginTop: 10 },
  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' },
});