import React, { useEffect, useRef, useState } from 'react';
import {
  ActivityIndicator,
  Animated,
  Easing,
  FlatList,
  Image,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  useWindowDimensions,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { useApp } from '../../context/AppContext';
import { useColors } from '../../constants/Colors';
import { useSafeAnalytics } from '../../services/analytics';
import { OnboardingProgressService } from '../../services/onboardingProgressService';
import { PreAuthOnboardingService } from '../../services/preAuthOnboardingService';
import { Language } from '../../types';

// Avatar path matching copied file
const BOT_AVATAR = require('../../assets/robot_monstera_avatar.jpg');

interface Message {
  id: string;
  sender: 'bot' | 'user';
  text: string;
  subtext?: string;
  timestamp: string;
}

const getChatCopy = (language: Language) => {
  if (language === 'de') {
    return {
      title: 'GreenLens',
      skip: 'Überspringen',
      continue: 'Weiter',
      today: 'Heute, 20:42 Uhr',
      typing: 'schreibt...',
      // Reihenfolge folgt dem Nutzer, nicht dem Unternehmen: erst sein Problem,
      // dann Kontext, zuletzt die Marketing-Frage.
      botGreeting: 'Hi! Ich helfe dir herauszufinden, was mit deinen Pflanzen los ist. 🌿',
      botSituation: 'Damit ich weiß, wo wir starten: Hat gerade eine deiner Pflanzen ein Problem?',
      botSymptom: 'Verstanden. Was siehst du genau? Das grenzt die möglichen Ursachen am stärksten ein.',
      botNoSymptom: 'Gut zu wissen - dann richten wir alles auf Vorbeugung aus.',
      botLight: 'Licht entscheidet bei den meisten Problemen mit. Wie viel Licht bekommt deine Pflanze?',
      botExperience: 'Fast geschafft. Wie sicher fühlst du dich bei Pflanzenpflege? Danach passe ich an, wie ausführlich ich erkläre.',
      botSource: 'Letzte Frage, rein aus Neugier: Wie hast du von GreenLens gehört?',
      botComplete: 'Perfekt. Ich stelle dir jetzt deinen Plan zusammen.',
      stepSituation: 'Hat eine Pflanze gerade ein Problem?',
      stepSymptom: 'Was siehst du?',
      stepLight: 'Wie viel Licht bekommt sie?',
      stepExperience: 'Wie sicher fühlst du dich?',
      stepSource: 'Wie hast du von uns gehört?',
      situations: {
        acute: 'Ja - und es wird schnell schlechter',
        slow: 'Ja - es verändert sich langsam',
        prevention: 'Nein - ich will vorbeugen',
      },
      symptoms: {
        yellow: 'Gelbe Blätter',
        brown_tips: 'Braune Spitzen oder Ränder',
        drooping: 'Hängt oder lässt die Blätter fallen',
        spots: 'Flecken oder Belag',
        pests: 'Krabbeltiere',
        other: 'Etwas anderes',
      },
      sources: {
        app_store: 'App Store / Play Store',
        instagram: 'Instagram',
        tiktok: 'TikTok',
        friend: 'Freunde oder Familie',
        search: 'Google oder Suche',
        // Bewusst unwahrscheinliche Optionen: sie brechen das Muster der
        // Standard-Attributionsfrage und machen den letzten Schritt leichter.
        tv: 'Im Fernsehen (haben wir nicht - aber schön wärs)',
        radio: 'Im Radio zwischen zwei Songs',
        plant: 'Meine Pflanze hat es mir empfohlen',
        other: 'Etwas anderes',
      },
      experiences: {
        beginner: 'Unsicher - ich fange gerade an',
        intermediate: 'Geht so - ich habe ein paar Pflanzen',
        advanced: 'Sicher - ich kenne mich aus',
      },
      lights: {
        bright_indirect: {
          title: 'Helles, indirektes Licht',
          sub: 'In der Nähe eines sonnigen Fensters, ohne direkte Strahlen',
        },
        low_light: {
          title: 'Wenig Licht',
          sub: 'Weit weg von Fenstern, meistens Schatten',
        },
        direct_sunlight: {
          title: 'Direktes Sonnenlicht',
          sub: 'Den ganzen Tag direkt an einem sonnigen Fenster',
        },
      },
    };
  }
  if (language === 'es') {
    return {
      title: 'GreenLens',
      skip: 'Omitir',
      continue: 'Continuar',
      today: 'Hoy, 8:42 PM',
      typing: 'escribiendo...',
      botGreeting: '¡Hola! Te ayudo a averiguar qué les pasa a tus plantas. 🌿',
      botSituation: 'Para saber por dónde empezamos: ¿alguna de tus plantas tiene un problema ahora mismo?',
      botSymptom: 'Entendido. ¿Qué ves exactamente? Esto es lo que más acota las causas posibles.',
      botNoSymptom: 'Bien saberlo - entonces lo enfocamos todo en la prevención.',
      botLight: 'La luz influye en la mayoría de los problemas. ¿Cuánta luz recibe tu planta?',
      botExperience: 'Casi listo. ¿Qué tan seguro te sientes cuidando plantas? Con eso ajusto cuánto explico.',
      botSource: 'Última pregunta, por curiosidad: ¿cómo te enteraste de GreenLens?',
      botComplete: 'Perfecto. Ahora preparo tu plan.',
      stepSituation: '¿Alguna planta tiene un problema?',
      stepSymptom: '¿Qué ves?',
      stepLight: '¿Cuánta luz recibe?',
      stepExperience: '¿Qué tan seguro te sientes?',
      stepSource: '¿Cómo nos conociste?',
      situations: {
        acute: 'Sí - y empeora rápido',
        slow: 'Sí - cambia poco a poco',
        prevention: 'No - quiero prevenir',
      },
      symptoms: {
        yellow: 'Hojas amarillas',
        brown_tips: 'Puntas o bordes marrones',
        drooping: 'Se cae o pierde hojas',
        spots: 'Manchas o residuo',
        pests: 'Bichos',
        other: 'Otra cosa',
      },
      sources: {
        app_store: 'App Store / Play Store',
        instagram: 'Instagram',
        tiktok: 'TikTok',
        friend: 'Amigos o familia',
        search: 'Google o búsqueda',
        tv: 'En la tele (no tenemos anuncios - pero ojalá)',
        radio: 'En la radio entre dos canciones',
        plant: 'Me la recomendó mi planta',
        other: 'Otra cosa',
      },
      experiences: {
        beginner: 'Inseguro - recién empiezo',
        intermediate: 'Más o menos - tengo algunas plantas',
        advanced: 'Seguro - sé bastante',
      },
      lights: {
        bright_indirect: {
          title: 'Luz brillante e indirecta',
          sub: 'Cerca de una ventana soleada, sin sol directo',
        },
        low_light: {
          title: 'Poca luz',
          sub: 'Lejos de las ventanas, principalmente sombra',
        },
        direct_sunlight: {
          title: 'Luz solar directa',
          sub: 'Directamente en una ventana soleada todo el día',
        },
      },
    };
  }
  return {
    title: 'GreenLens',
    skip: 'Skip',
    continue: 'Continue',
    today: 'Today, 8:42 PM',
    typing: 'typing...',
    botGreeting: "Hi! I'll help you work out what's going on with your plants. 🌿",
    botSituation: 'So I know where to start: is one of your plants having a problem right now?',
    botSymptom: 'Got it. What exactly do you see? This narrows down the possible causes more than anything else.',
    botNoSymptom: "Good to know - then we'll focus everything on prevention.",
    botLight: 'Light plays a role in most problems. How much light does your plant get?',
    botExperience: 'Almost done. How confident do you feel about plant care? I use that to adjust how much I explain.',
    botSource: 'Last question, purely out of curiosity: how did you hear about GreenLens?',
    botComplete: "Perfect. I'm putting your plan together now.",
    stepSituation: 'Is a plant having a problem?',
    stepSymptom: 'What do you see?',
    stepLight: 'How much light does it get?',
    stepExperience: 'How confident do you feel?',
    stepSource: 'How did you hear about us?',
    situations: {
      acute: "Yes - and it's getting worse fast",
      slow: "Yes - it's changing slowly",
      prevention: 'No - I want to prevent problems',
    },
    symptoms: {
      yellow: 'Yellow leaves',
      brown_tips: 'Brown tips or edges',
      drooping: 'Drooping or dropping leaves',
      spots: 'Spots or residue',
      pests: 'Bugs',
      other: 'Something else',
    },
    sources: {
      app_store: 'App Store / Play Store',
      instagram: 'Instagram',
      tiktok: 'TikTok',
      friend: 'Friends or family',
      search: 'Google or search',
      tv: "On TV (we don't run ads - but a girl can dream)",
      radio: 'On the radio between two songs',
      plant: 'My plant recommended it',
      other: 'Something else',
    },
    experiences: {
      beginner: "Not confident - I'm just starting",
      intermediate: 'So-so - I have a few plants',
      advanced: 'Confident - I know my way around',
    },
    lights: {
      bright_indirect: {
        title: 'Bright, indirect light',
        sub: 'Near a sunny window, but no harsh rays',
      },
      low_light: {
        title: 'Low light',
        sub: 'Far from windows, mostly shadow',
      },
      direct_sunlight: {
        title: 'Direct sunlight',
        sub: 'Directly in a sunny window all day',
      },
    },
  };
};

/** Fragenreihenfolge des Chats. Bewusst: Problem zuerst, Attribution zuletzt. */
const STEP_KEYS = ['situation', 'symptom', 'lightLevel', 'experienceLevel', 'acquisitionSource'] as const;
type StepKey = (typeof STEP_KEYS)[number];
const TOTAL_STEPS = STEP_KEYS.length;

const TypingIndicator = ({ colors }: { colors: any }) => {
  const dot1 = useRef(new Animated.Value(0)).current;
  const dot2 = useRef(new Animated.Value(0)).current;
  const dot3 = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    const animateDot = (value: Animated.Value, delay: number) => {
      return Animated.loop(
        Animated.sequence([
          Animated.delay(delay),
          Animated.timing(value, {
            toValue: -6,
            duration: 250,
            useNativeDriver: true,
          }),
          Animated.timing(value, {
            toValue: 0,
            duration: 250,
            useNativeDriver: true,
          }),
          Animated.delay(350),
        ])
      );
    };

    const anim1 = animateDot(dot1, 0);
    const anim2 = animateDot(dot2, 120);
    const anim3 = animateDot(dot3, 240);

    anim1.start();
    anim2.start();
    anim3.start();

    return () => {
      anim1.stop();
      anim2.stop();
      anim3.stop();
    };
  }, [dot1, dot2, dot3]);

  return (
    <View style={styles.typingContainer}>
      <Animated.View style={[styles.typingDot, { backgroundColor: colors.primary, transform: [{ translateY: dot1 }] }]} />
      <Animated.View style={[styles.typingDot, { backgroundColor: colors.primary, transform: [{ translateY: dot2 }] }]} />
      <Animated.View style={[styles.typingDot, { backgroundColor: colors.primary, transform: [{ translateY: dot3 }] }]} />
    </View>
  );
};

export default function OnboardingChatScreen() {
  const router = useRouter();
  const posthog = useSafeAnalytics();
  const { session, colorPalette, language } = useApp();
  // This screen is hardcoded dark (#131e14 backgrounds), so always use the
  // dark color set - theme-dependent text would be unreadable in light mode.
  const colors = useColors(true, colorPalette);
  const copy = getChatCopy(language);
  const { height } = useWindowDimensions();
  const compact = height < 700;

  const [currentStep, setCurrentStep] = useState<number>(0);
  const [messages, setMessages] = useState<Message[]>([]);
  const [isTyping, setIsTyping] = useState<boolean>(false);
  const [showOptions, setShowOptions] = useState<boolean>(false);
  const [answers, setAnswers] = useState({
    situation: null as string | null,
    symptom: null as string | null,
    lightLevel: null as string | null,
    experienceLevel: null as string | null,
    acquisitionSource: null as string | null,
  });

  const flatListRef = useRef<FlatList>(null);
  const inputScrollRef = useRef<ScrollView>(null);
  const floatAnim = useRef(new Animated.Value(0)).current;

  // Float animation loop for the background monstera pot
  useEffect(() => {
    const float = () => {
      Animated.sequence([
        Animated.timing(floatAnim, {
          toValue: -12,
          duration: 3000,
          easing: Easing.inOut(Easing.sin),
          useNativeDriver: true,
        }),
        Animated.timing(floatAnim, {
          toValue: 0,
          duration: 3000,
          easing: Easing.inOut(Easing.sin),
          useNativeDriver: true,
        }),
      ]).start(() => float());
    };
    float();
  }, [floatAnim]);

  // Initial Bot Greeting
  useEffect(() => {
    setIsTyping(true);
    setShowOptions(false);
    const timer1 = setTimeout(() => {
      setMessages([
        {
          id: 'greeting',
          sender: 'bot',
          text: copy.botGreeting,
          timestamp: copy.today,
        },
      ]);
      setIsTyping(false);
      
      // Delay before asking first question
      const timer2 = setTimeout(() => {
        setIsTyping(true);
        const timer3 = setTimeout(() => {
          setMessages((prev) => [
            ...prev,
            {
              id: 'question-situation',
              sender: 'bot',
              text: copy.botSituation,
              timestamp: copy.today,
            },
          ]);
          setIsTyping(false);
          setShowOptions(true); // Only show options after question is fully posted!
        }, 800);
        return () => clearTimeout(timer3);
      }, 500);

      return () => clearTimeout(timer2);
    }, 1200);

    return () => clearTimeout(timer1);
  }, []);

  // Scroll to bottom on messages update
  useEffect(() => {
    setTimeout(() => {
      flatListRef.current?.scrollToEnd({ animated: true });
    }, 100);
  }, [messages, isTyping]);

  useEffect(() => {
    inputScrollRef.current?.scrollTo({ y: 0, animated: false });
  }, [currentStep]);

  const selectOption = (id: string, label: string) => {
    // Add user bubble
    const userMsg: Message = {
      id: `user-${currentStep}-${Date.now()}`,
      sender: 'user',
      text: label,
      timestamp: copy.today,
    };
    setMessages((prev) => [...prev, userMsg]);

    // Wer "vorbeugen" waehlt, hat kein Symptom - die Symptomfrage wird
    // uebersprungen. Ohne das antwortet der Bot "dann beugen wir vor" und
    // fragt im selben Atemzug "Was siehst du?".
    const skipsSymptom = currentStep === 0 && id === 'prevention';
    const nextStep = skipsSymptom ? 2 : currentStep + 1;
    setCurrentStep(nextStep);

    // Save answer
    const nextAnswers = { ...answers };
    const stepKey: StepKey | undefined = STEP_KEYS[currentStep];
    if (stepKey) nextAnswers[stepKey] = id;
    setAnswers(nextAnswers);

    // Trigger bot response typing
    setIsTyping(true);
    setShowOptions(false); // Hide immediately when user answers
    const delay = setTimeout(() => {
      let botText = '';
      let botSubtext = undefined;
      
      if (nextStep === 1) {
        botText = copy.botSymptom;
      } else if (nextStep === 2) {
        // Nach dem uebersprungenen Symptomschritt zuerst die Ueberleitung,
        // damit die Antwort des Nutzers nicht unkommentiert bleibt.
        botText = skipsSymptom ? `${copy.botNoSymptom} ${copy.botLight}` : copy.botLight;
      } else if (nextStep === 3) {
        botText = copy.botExperience;
      } else if (nextStep === 4) {
        botText = copy.botSource;
      } else if (nextStep === TOTAL_STEPS) {
        botText = copy.botComplete;
      }

      setMessages((prev) => [
        ...prev,
        {
          id: `bot-${nextStep}-${Date.now()}`,
          sender: 'bot',
          text: botText,
          subtext: botSubtext,
          timestamp: copy.today,
        },
      ]);
      setIsTyping(false);
      setShowOptions(true); // Re-enable options after bot finishes typing
    }, 850);

    return () => clearTimeout(delay);
  };

  const handleBack = () => {
    if (currentStep === 0) {
      router.back();
      return;
    }

    // Gegenstueck zum uebersprungenen Symptomschritt: von Schritt 2 zurueck
    // landet ein Vorbeuger wieder bei der Situationsfrage, nicht bei einer
    // Symptomfrage, die er nie gesehen hat.
    const skippedSymptom = currentStep === 2 && answers.situation === 'prevention';
    const prevStep = skippedSymptom ? 0 : currentStep - 1;
    setCurrentStep(prevStep);

    // Revert last answers
    const nextAnswers = { ...answers };
    const prevKey: StepKey | undefined = STEP_KEYS[prevStep];
    if (prevKey) nextAnswers[prevKey] = null;
    setAnswers(nextAnswers);

    // Remove user bubble and bot bubble from messages history
    setMessages((prev) => {
      const copyMsgs = [...prev];
      // Pop bot question bubble and user response bubble
      copyMsgs.pop();
      copyMsgs.pop();
      return copyMsgs;
    });
  };

  const onSkip = () => {
    posthog.capture('onboarding_chat_skipped', { step: currentStep });
    router.replace('/onboarding/health-check');
  };

  const onFinish = () => {
    if (session?.userId) {
      if (answers.acquisitionSource) OnboardingProgressService.setAcquisitionSource(session.userId, answers.acquisitionSource);
      if (answers.experienceLevel) OnboardingProgressService.setExperienceLevel(session.userId, answers.experienceLevel);
    }

    if (answers.acquisitionSource) void PreAuthOnboardingService.setAnswer('acquisitionSource', answers.acquisitionSource);
    if (answers.experienceLevel) void PreAuthOnboardingService.setAnswer('experienceLevel', answers.experienceLevel);
    if (answers.lightLevel) void PreAuthOnboardingService.setAnswer('lightLevel', answers.lightLevel);
    // Situation und Symptom steuern spaeter die Personalisierung des Plans.
    if (answers.situation) void PreAuthOnboardingService.setAnswer('situation', answers.situation);
    if (answers.symptom) void PreAuthOnboardingService.setAnswer('symptom', answers.symptom);

    posthog.capture('onboarding_chat_completed', {
      situation: answers.situation,
      symptom: answers.symptom,
      light: answers.lightLevel,
      experience: answers.experienceLevel,
      source: answers.acquisitionSource,
    });

    router.replace('/onboarding/health-check');
  };

  // Build options list based on current question step
  const renderOptions = () => {
    if (!showOptions || isTyping) return null;

    // Schritt 1 - Situation. Erste Frage gehoert dem Nutzer, nicht dem Marketing.
    if (currentStep === 0) {
      return (
        <View style={styles.optionsWrap}>
          <Text style={styles.stepTitle} maxFontSizeMultiplier={1.3}>{copy.stepSituation}</Text>
          <View style={styles.optionsVertical}>
            {([
              { id: 'acute', label: copy.situations.acute, icon: 'alert-circle-outline' as const },
              { id: 'slow', label: copy.situations.slow, icon: 'trending-down-outline' as const },
              { id: 'prevention', label: copy.situations.prevention, icon: 'shield-checkmark-outline' as const },
            ]).map((opt) => (
              <TouchableOpacity key={opt.id} style={[styles.optionRow, { borderColor: colors.border }]} onPress={() => selectOption(opt.id, opt.label)}>
                <View style={styles.optionRowLeft}>
                  <Ionicons name={opt.icon} size={18} color={colors.primary} style={{ marginRight: 10 }} />
                  <Text style={[styles.rowText, { color: colors.text }]} maxFontSizeMultiplier={1.3}>{opt.label}</Text>
                </View>
                <Ionicons name="chevron-forward" size={16} color={colors.textMuted} />
              </TouchableOpacity>
            ))}
          </View>
        </View>
      );
    }

    // Schritt 2 - Symptom. Der Moment, in dem sich der Nutzer wiedererkennt.
    if (currentStep === 1) {
      return (
        <View style={styles.optionsWrap}>
          <Text style={styles.stepTitle} maxFontSizeMultiplier={1.3}>{copy.stepSymptom}</Text>
          <View style={styles.optionsGrid}>
            {([
              { id: 'yellow', label: copy.symptoms.yellow, icon: 'leaf-outline' as const },
              { id: 'brown_tips', label: copy.symptoms.brown_tips, icon: 'flame-outline' as const },
              { id: 'drooping', label: copy.symptoms.drooping, icon: 'trending-down-outline' as const },
              { id: 'spots', label: copy.symptoms.spots, icon: 'ellipse-outline' as const },
              { id: 'pests', label: copy.symptoms.pests, icon: 'bug-outline' as const },
              { id: 'other', label: copy.symptoms.other, icon: 'help-circle-outline' as const },
            ]).map((opt) => (
              <TouchableOpacity key={opt.id} style={[styles.pillBtn, { borderColor: colors.border }]} onPress={() => selectOption(opt.id, opt.label)}>
                <Ionicons name={opt.icon} size={15} color={colors.primary} style={{ marginRight: 4 }} />
                <Text style={[styles.pillLabel, { color: colors.text }]} maxFontSizeMultiplier={1.3}>{opt.label}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
      );
    }

    // Schritt 3 - Licht.
    if (currentStep === 2) {
      return (
        <View style={styles.optionsWrap}>
          <Text style={styles.stepTitle} maxFontSizeMultiplier={1.3}>{copy.stepLight}</Text>
          <View style={styles.optionsVertical}>
            {([
              { id: 'bright_indirect', label: copy.lights.bright_indirect.title, sub: copy.lights.bright_indirect.sub, icon: 'wb-twilight' },
              { id: 'low_light', label: copy.lights.low_light.title, sub: copy.lights.low_light.sub, icon: 'brightness-4' },
              { id: 'direct_sunlight', label: copy.lights.direct_sunlight.title, sub: copy.lights.direct_sunlight.sub, icon: 'sunny' },
            ]).map((opt) => (
              <TouchableOpacity key={opt.id} style={[styles.bentoOption, { borderColor: colors.border }]} onPress={() => selectOption(opt.id, opt.label)}>
                <View style={styles.bentoCopy}>
                  <Text style={[styles.bentoTitle, { color: colors.text }]} maxFontSizeMultiplier={1.3}>{opt.label}</Text>
                  <Text style={[styles.bentoSub, { color: colors.textSecondary }]} maxFontSizeMultiplier={1.3}>{opt.sub}</Text>
                </View>
                <Ionicons name={opt.icon === 'sunny' ? 'sunny-outline' : opt.icon === 'brightness-4' ? 'contrast' : 'partly-sunny-outline'} size={20} color={colors.primary} />
              </TouchableOpacity>
            ))}
          </View>
        </View>
      );
    }

    // Schritt 4 - Erfahrung. Formuliert als Sicherheitsgefuehl, nicht als
    // Wissenstest: Emma soll sich nicht schon hier als Anfaengerin abstempeln.
    if (currentStep === 3) {
      return (
        <View style={styles.optionsWrap}>
          <Text style={styles.stepTitle} maxFontSizeMultiplier={1.3}>{copy.stepExperience}</Text>
          <View style={styles.optionsVertical}>
            {([
              { id: 'beginner', label: copy.experiences.beginner, icon: 'leaf-outline' as const },
              { id: 'intermediate', label: copy.experiences.intermediate, icon: 'sunny-outline' as const },
              { id: 'advanced', label: copy.experiences.advanced, icon: 'flask-outline' as const },
            ]).map((opt) => (
              <TouchableOpacity key={opt.id} style={[styles.optionRow, { borderColor: colors.border }]} onPress={() => selectOption(opt.id, opt.label)}>
                <View style={styles.optionRowLeft}>
                  <Ionicons name={opt.icon} size={18} color={colors.primary} style={{ marginRight: 10 }} />
                  <Text style={[styles.rowText, { color: colors.text }]} maxFontSizeMultiplier={1.3}>{opt.label}</Text>
                </View>
                <Ionicons name="chevron-forward" size={16} color={colors.textMuted} />
              </TouchableOpacity>
            ))}
          </View>
        </View>
      );
    }

    // Schritt 5 - Attribution. Ganz ans Ende verschoben: die Frage nuetzt uns,
    // nicht dem Nutzer. Die unwahrscheinlichen Optionen (TV, Radio, "meine
    // Pflanze") brechen das Muster und machen den letzten Tap leicht.
    if (currentStep === 4) {
      return (
        <View style={styles.optionsWrap}>
          <Text style={styles.stepTitle} maxFontSizeMultiplier={1.3}>{copy.stepSource}</Text>
          <View style={styles.optionsGrid}>
            {([
              { id: 'app_store', label: copy.sources.app_store, icon: 'logo-apple' as const },
              { id: 'instagram', label: copy.sources.instagram, icon: 'logo-instagram' as const },
              { id: 'tiktok', label: copy.sources.tiktok, icon: 'musical-notes-outline' as const },
              { id: 'friend', label: copy.sources.friend, icon: 'people-outline' as const },
              { id: 'search', label: copy.sources.search, icon: 'search-outline' as const },
              { id: 'tv', label: copy.sources.tv, icon: 'tv-outline' as const },
              { id: 'radio', label: copy.sources.radio, icon: 'radio-outline' as const },
              { id: 'plant', label: copy.sources.plant, icon: 'leaf-outline' as const },
              { id: 'other', label: copy.sources.other, icon: 'sparkles-outline' as const },
            ]).map((opt) => (
              <TouchableOpacity key={opt.id} style={[styles.pillBtn, { borderColor: colors.border }]} onPress={() => selectOption(opt.id, opt.label)}>
                <Ionicons name={opt.icon} size={15} color={colors.primary} style={{ marginRight: 4 }} />
                <Text style={[styles.pillLabel, { color: colors.text }]} maxFontSizeMultiplier={1.3}>{opt.label}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
      );
    }

    // Alle Fragen beantwortet -> Abschluss-CTA.
    if (currentStep >= TOTAL_STEPS) {
      return (
        <View style={styles.footerWrap}>
          <TouchableOpacity style={[styles.continueCta, { backgroundColor: colors.primary }]} onPress={onFinish} activeOpacity={0.86}>
            <Text style={[styles.continueCtaText, { color: colors.onPrimary }]} maxFontSizeMultiplier={1.2}>{copy.continue}</Text>
          </TouchableOpacity>
        </View>
      );
    }

    return null;
  };

  const renderMessageItem = ({ item }: { item: Message }) => {
    const isBot = item.sender === 'bot';
    return (
      <View style={[styles.messageRow, isBot ? styles.messageRowLeft : styles.messageRowRight]}>
        {isBot && (
          <Image source={BOT_AVATAR} style={styles.chatAvatar} resizeMode="cover" />
        )}
        <View style={[
          styles.bubble,
          isBot
            ? [styles.bubbleLeft, { backgroundColor: '#142215' }]
            : [styles.bubbleRight, { backgroundColor: '#2e4f00' }]
        ]}>
          <Text style={[styles.bubbleText, { color: isBot ? '#dae6d6' : '#ffffff' }]}>{item.text}</Text>
          {item.subtext ? (
            <Text style={styles.bubbleSub}>{item.subtext}</Text>
          ) : null}
        </View>
      </View>
    );
  };

  const progressPercent = `${Math.min(Math.round((currentStep / TOTAL_STEPS) * 100), 100)}%`;

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
    >
      <Animated.Image
        source={{ uri: 'https://lh3.googleusercontent.com/aida/AP1WRLvNv80S62DEz_zBQ-9HwoEIRjqH2RBaY0knbsg2dBsQySI1kJC23xC8q_rkQ_100IiLnW4uwtzj0t7koHQvFUc6-4kyGCdyYdE7JY_nMeC628hnY7KYw52GNy1ErcjFii-YOISxq1GRLNpaFN_IklHttmJ30NC85GX4pCt7Q23hrYSQ_Mfx4_T1lqXum2KdLfiyyOZoRKuLCP0jTBbAcEi8DCLZtsAUSYcttqmUtuaTMnt5W07_sIn0dAw' }}
        style={[styles.robotBackground, { transform: [{ translateY: floatAnim }] }]}
        resizeMode="cover"
      />
      {/* Soft stepwise gradient mask to blend bottom image edge with background */}
      <View style={styles.maskContainer}>
        <View style={[styles.maskLine, { opacity: 0.1, backgroundColor: '#131e14' }]} />
        <View style={[styles.maskLine, { opacity: 0.25, backgroundColor: '#131e14' }]} />
        <View style={[styles.maskLine, { opacity: 0.45, backgroundColor: '#131e14' }]} />
        <View style={[styles.maskLine, { opacity: 0.65, backgroundColor: '#131e14' }]} />
        <View style={[styles.maskLine, { opacity: 0.85, backgroundColor: '#131e14' }]} />
        <View style={[styles.maskLine, { opacity: 1.0, backgroundColor: '#131e14' }]} />
      </View>

      <SafeAreaView style={styles.safe} edges={['top', 'bottom']}>
        {/* Header Bar */}
        <View style={styles.header}>
          <TouchableOpacity onPress={handleBack} style={styles.headerBack}>
            <Ionicons name="arrow-back" size={24} color="#dae6d6" />
          </TouchableOpacity>
          
          <View style={styles.progressContainer}>
            <View style={styles.progressBarTrack}>
              <View style={[styles.progressBarFill, { width: progressPercent as any }]} />
            </View>
          </View>

          <TouchableOpacity onPress={onSkip} style={styles.headerSkip}>
            <Text style={styles.skipText}>{copy.skip}</Text>
          </TouchableOpacity>
        </View>

        {/* Chat History Panel */}
        <View style={styles.chatPanel}>
          <FlatList
            ref={flatListRef}
            data={messages}
            keyExtractor={(item) => item.id}
            renderItem={renderMessageItem}
            contentContainerStyle={styles.chatListContent}
            showsVerticalScrollIndicator={false}
            ListHeaderComponent={
              <View style={styles.timeDivider}>
                <Text style={styles.timeDividerText}>{copy.today}</Text>
              </View>
            }
            ListFooterComponent={
              isTyping ? (
                <View style={[styles.messageRow, styles.messageRowLeft]}>
                  <Image source={BOT_AVATAR} style={styles.chatAvatar} resizeMode="cover" />
                  <View style={[styles.bubble, styles.bubbleLeft, { backgroundColor: '#142215' }]}>
                    <TypingIndicator colors={colors} />
                  </View>
                </View>
              ) : null
            }
          />
        </View>

        {/* Input/Selection Panel. Scrollbar und in der Hoehe gedeckelt: der
            Attributions-Schritt hat 9 Optionen, die bei grosser Systemschrift
            sonst den Chatverlauf und den Weiter-Button verdraengen. */}
        <View style={styles.inputPanel}>
          <ScrollView
            ref={inputScrollRef}
            contentContainerStyle={styles.inputPanelContent}
            showsVerticalScrollIndicator={false}
            bounces={false}
          >
            {renderOptions()}
          </ScrollView>
        </View>
      </SafeAreaView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#131e14',
  },
  robotBackground: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: 380,
    opacity: 0.28,
  },
  maskContainer: {
    position: 'absolute',
    top: 260,
    left: 0,
    right: 0,
    height: 120,
  },
  maskLine: {
    height: 20,
    width: '100%',
  },

  optionRowLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  safe: {
    flex: 1,
    justifyContent: 'space-between',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: 'rgba(255,255,255,0.08)',
  },
  headerBack: {
    width: 38,
    height: 38,
    borderRadius: 19,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255,255,255,0.04)',
  },
  progressContainer: {
    flex: 1,
    marginHorizontal: 16,
  },
  progressBarTrack: {
    height: 6,
    borderRadius: 3,
    backgroundColor: 'rgba(255,255,255,0.08)',
    overflow: 'hidden',
  },
  progressBarFill: {
    height: 6,
    borderRadius: 3,
    backgroundColor: '#a5d56e',
  },
  headerSkip: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 14,
    backgroundColor: 'rgba(255,255,255,0.04)',
  },
  skipText: {
    color: '#dae6d6',
    fontSize: 13,
    fontWeight: '700',
  },
  chatPanel: {
    flex: 1,
    paddingHorizontal: 16,
  },
  chatListContent: {
    paddingVertical: 16,
    gap: 16,
  },
  timeDivider: {
    alignSelf: 'center',
    backgroundColor: 'rgba(255,255,255,0.05)',
    borderRadius: 999,
    paddingHorizontal: 12,
    paddingVertical: 4,
    marginBottom: 16,
  },
  timeDividerText: {
    color: '#8d9382',
    fontSize: 11,
    fontWeight: '700',
  },
  messageRow: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    gap: 10,
    marginVertical: 4,
  },
  messageRowLeft: {
    alignSelf: 'flex-start',
    maxWidth: '85%',
  },
  messageRowRight: {
    alignSelf: 'flex-end',
    flexDirection: 'row-reverse',
    maxWidth: '85%',
  },
  chatAvatar: {
    width: 32,
    height: 32,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.1)',
  },
  bubble: {
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 18,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 1,
  },
  bubbleLeft: {
    borderBottomLeftRadius: 3,
  },
  bubbleRight: {
    borderBottomRightRadius: 3,
  },
  bubbleText: {
    fontSize: 15,
    lineHeight: 21,
    fontWeight: '600',
  },
  bubbleSub: {
    fontSize: 12,
    marginTop: 4,
    color: '#8d9382',
  },
  typingContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
    width: 36,
    height: 18,
    justifyContent: 'center',
  },
  typingDot: {
    width: 6,
    height: 6,
    borderRadius: 3,
  },
  inputPanel: {
    flexShrink: 1,
    maxHeight: '58%',
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: 'rgba(255,255,255,0.08)',
    backgroundColor: '#131e14',
  },
  inputPanelContent: {
    paddingTop: 12,
    paddingBottom: 24,
    paddingHorizontal: 16,
  },
  optionsWrap: {
    gap: 10,
  },
  stepTitle: {
    color: '#8d9382',
    fontSize: 12,
    fontWeight: '800',
    textTransform: 'uppercase',
    letterSpacing: 0.8,
    marginBottom: 4,
    textAlign: 'center',
  },
  optionsGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
    justifyContent: 'center',
  },
  pillBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    paddingHorizontal: 14,
    paddingVertical: 10,
    borderRadius: 999,
    borderWidth: 1.5,
    backgroundColor: '#101e11',
  },
  pillEmoji: {
    fontSize: 14,
  },
  pillLabel: {
    fontSize: 13.5,
    fontWeight: '700',
  },
  optionsVertical: {
    gap: 8,
  },
  optionRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 14,
    borderRadius: 14,
    borderWidth: 1,
    backgroundColor: '#101e11',
  },
  rowText: {
    fontSize: 14.5,
    fontWeight: '700',
  },
  bentoOption: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 14,
    borderWidth: 1,
    backgroundColor: '#101e11',
  },
  bentoCopy: {
    flex: 1,
    gap: 2,
    marginRight: 12,
  },
  bentoTitle: {
    fontSize: 15,
    fontWeight: '700',
  },
  bentoSub: {
    fontSize: 11.5,
    fontWeight: '600',
    lineHeight: 15,
  },
  footerWrap: {
    paddingVertical: 8,
  },
  continueCta: {
    minHeight: 56,
    paddingVertical: 16,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
  },
  continueCtaText: {
    fontSize: 16.5,
    fontWeight: '900',
  },
});