import React from 'react';
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
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';
import { AppearanceMode, ColorPalette, Language } from '../../types';

const PALETTE_SWATCHES: Record<ColorPalette, string[]> = {
  forest: ['#5fa779', '#3d7f57'],
  ocean: ['#5a90be', '#3d6f99'],
  sunset: ['#c98965', '#a36442'],
  mono: ['#7b8796', '#5b6574'],
};

export default function CustomizeOnboardingScreen() {
  const router = useRouter();
  const posthog = useSafeAnalytics();
  const {
    session,
    isDarkMode,
    appearanceMode,
    colorPalette,
    language,
    setAppearanceMode,
    setColorPalette,
    changeLanguage,
    t,
  } = useApp();
  const colors = useColors(isDarkMode, colorPalette);

  const finishCustomization = () => {
    if (session?.userId) {
      OnboardingProgressService.completeStep(session.userId, 'customize');
    }

    posthog.capture('onboarding_customization_completed', {
      appearance_mode: appearanceMode,
      color_palette: colorPalette,
      language,
    });
    router.back();
  };

  const skipCustomization = () => {
    posthog.capture('onboarding_customization_skipped');
    router.back();
  };

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <ThemeBackdrop colors={colors} />
      <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right', 'bottom']}>
        <View style={styles.header}>
          <TouchableOpacity onPress={skipCustomization} style={[styles.iconBtn, { backgroundColor: colors.surface, borderColor: colors.border }]}>
            <Ionicons name="close" size={20} color={colors.text} />
          </TouchableOpacity>
          <View style={styles.headerCopy}>
            <Text style={[styles.eyebrow, { color: colors.primary }]}>{t.onboardingChecklistIntro}</Text>
            <Text style={[styles.title, { color: colors.text }]}>{t.customizeOnboardingTitle}</Text>
            <Text style={[styles.subtitle, { color: colors.textSecondary }]}>{t.customizeOnboardingSubtitle}</Text>
          </View>
        </View>

        <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
          <View style={[styles.previewCard, { backgroundColor: colors.surface, borderColor: colors.border }]}>
            <Text style={[styles.previewLabel, { color: colors.textMuted }]}>{t.customizeOnboardingPreview}</Text>
            <Text style={[styles.previewTitle, { color: colors.text }]}>{t.onboardingTagline}</Text>
            <View style={styles.previewMeta}>
              <View style={[styles.previewChip, { backgroundColor: colors.primarySoft }]}>
                <Text style={[styles.previewChipText, { color: colors.primaryDark }]}>{appearanceMode}</Text>
              </View>
              <View style={[styles.previewChip, { backgroundColor: colors.surfaceMuted }]}>
                <Text style={[styles.previewChipText, { color: colors.text }]}>{colorPalette}</Text>
              </View>
              <View style={[styles.previewChip, { backgroundColor: colors.surfaceMuted }]}>
                <Text style={[styles.previewChipText, { color: colors.text }]}>{language.toUpperCase()}</Text>
              </View>
            </View>
          </View>

          <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
            <Text style={[styles.sectionTitle, { color: colors.text }]}>{t.appearanceMode}</Text>
            <View style={styles.segmentedControl}>
              {(['system', 'light', 'dark'] as AppearanceMode[]).map((mode) => {
                const isActive = appearanceMode === mode;
                const label = mode === 'system' ? t.themeSystem : mode === 'light' ? t.themeLight : t.themeDark;

                return (
                  <TouchableOpacity
                    key={mode}
                    style={[styles.segmentBtn, isActive && { backgroundColor: colors.primary }]}
                    onPress={() => setAppearanceMode(mode)}
                  >
                    <Text style={[styles.segmentText, { color: isActive ? colors.onPrimary : colors.text }]}>
                      {label}
                    </Text>
                  </TouchableOpacity>
                );
              })}
            </View>
          </View>

          <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
            <Text style={[styles.sectionTitle, { color: colors.text }]}>{t.colorPalette}</Text>
            <View style={styles.swatchContainer}>
              {(['forest', 'ocean', 'sunset', 'mono'] as ColorPalette[]).map((palette) => {
                const isActive = colorPalette === palette;
                const swatch = PALETTE_SWATCHES[palette];
                const label =
                  palette === 'forest'
                    ? t.paletteForest
                    : palette === 'ocean'
                    ? t.paletteOcean
                    : palette === 'sunset'
                    ? t.paletteSunset
                    : t.paletteMono;

                return (
                  <TouchableOpacity
                    key={palette}
                    style={[styles.swatchWrap, isActive && { borderColor: colors.primary }]}
                    onPress={() => setColorPalette(palette)}
                  >
                    <View style={[styles.swatch, { backgroundColor: swatch[0] }]} />
                    <Text style={[styles.swatchLabel, { color: colors.text }]}>{label}</Text>
                  </TouchableOpacity>
                );
              })}
            </View>
          </View>

          <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
            <Text style={[styles.sectionTitle, { color: colors.text }]}>{t.language}</Text>
            <View style={styles.languageRow}>
              {(['en', 'de', 'es'] as Language[]).map((lang) => {
                const isActive = language === lang;
                const label = lang === 'en' ? 'English' : lang === 'de' ? 'Deutsch' : 'Español';

                return (
                  <TouchableOpacity
                    key={lang}
                    style={[styles.languageBtn, isActive && { backgroundColor: colors.primary }]}
                    onPress={() => changeLanguage(lang)}
                  >
                    <Text style={{ color: isActive ? colors.onPrimary : colors.text, fontWeight: '600' }}>
                      {label}
                    </Text>
                  </TouchableOpacity>
                );
              })}
            </View>
          </View>
        </ScrollView>

        <View style={styles.footer}>
          <TouchableOpacity
            style={[styles.secondaryBtn, { borderColor: colors.borderStrong, backgroundColor: colors.surface }]}
            onPress={skipCustomization}
          >
            <Text style={[styles.secondaryBtnText, { color: colors.text }]}>{t.customizeOnboardingSkip}</Text>
          </TouchableOpacity>
          <TouchableOpacity style={[styles.primaryBtn, { backgroundColor: colors.primary }]} onPress={finishCustomization}>
            <Text style={[styles.primaryBtnText, { color: colors.onPrimary }]}>{t.customizeOnboardingContinue}</Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  safeArea: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: 14,
    paddingHorizontal: 20,
    paddingTop: 12,
  },
  iconBtn: {
    width: 40,
    height: 40,
    borderRadius: 20,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerCopy: {
    flex: 1,
    gap: 6,
    paddingTop: 2,
  },
  eyebrow: {
    fontSize: 12,
    fontWeight: '700',
    letterSpacing: 0.4,
    textTransform: 'uppercase',
  },
  title: {
    fontSize: 28,
    fontWeight: '800',
    lineHeight: 32,
  },
  subtitle: {
    fontSize: 14,
    lineHeight: 20,
  },
  content: {
    padding: 20,
    gap: 16,
  },
  previewCard: {
    borderWidth: 1,
    borderRadius: 24,
    padding: 18,
    gap: 10,
  },
  previewLabel: {
    fontSize: 11,
    fontWeight: '700',
    letterSpacing: 0.5,
    textTransform: 'uppercase',
  },
  previewTitle: {
    fontSize: 20,
    fontWeight: '700',
  },
  previewMeta: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
  },
  previewChip: {
    borderRadius: 999,
    paddingHorizontal: 10,
    paddingVertical: 6,
  },
  previewChipText: {
    fontSize: 12,
    fontWeight: '700',
  },
  card: {
    padding: 18,
    borderRadius: 20,
    borderWidth: 1,
    gap: 14,
  },
  sectionTitle: {
    fontSize: 15,
    fontWeight: '700',
  },
  segmentedControl: {
    flexDirection: 'row',
    backgroundColor: '#00000010',
    borderRadius: 14,
    padding: 4,
  },
  segmentBtn: {
    flex: 1,
    paddingVertical: 12,
    borderRadius: 10,
    alignItems: 'center',
  },
  segmentText: {
    fontSize: 14,
    fontWeight: '600',
  },
  swatchContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    gap: 10,
  },
  swatchWrap: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 8,
    borderRadius: 16,
    borderWidth: 2,
    borderColor: 'transparent',
    gap: 8,
  },
  swatch: {
    width: 52,
    height: 52,
    borderRadius: 26,
  },
  swatchLabel: {
    fontSize: 12,
    fontWeight: '600',
  },
  languageRow: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 12,
  },
  languageBtn: {
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 14,
    backgroundColor: '#00000010',
  },
  footer: {
    flexDirection: 'row',
    gap: 12,
    paddingHorizontal: 20,
    paddingBottom: 20,
  },
  secondaryBtn: {
    flex: 1,
    height: 52,
    borderRadius: 16,
    borderWidth: 1.5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  secondaryBtnText: {
    fontSize: 15,
    fontWeight: '600',
  },
  primaryBtn: {
    flex: 1.3,
    height: 52,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
  },
  primaryBtnText: {
    fontSize: 15,
    fontWeight: '700',
  },
});