import React, { useEffect, useState } from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View, useWindowDimensions } 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 { useColors } from '../../constants/Colors';
import { useApp } from '../../context/AppContext';
import { Language } from '../../types';

type ColorsType = ReturnType<typeof useColors>;

const getSlidesCopy = (language: Language) => {
  if (language === 'de') {
    return {
      slides: [
        {
          // Slide 1 = Triage. Bewusst NICHT die Identifikation: die kann Google
          // Lens gratis. Der Pitch startet erst nach der Identifikation.
          title: 'Was ist mit meiner Pflanze los?',
          body: 'Fotografiere das Symptom. Du bekommst die wahrscheinlichsten Ursachen - und was du prüfen sollst.',
        },
        {
          title: 'Ein konkreter Plan. Für diese Pflanze.',
          body: 'Sofortmaßnahme, 7-Tage-Plan, und danach die Frage: Hat es gewirkt?',
        },
        {
          // Der Screen, den keine Konkurrenz-App hat. Beantwortet den Einwand
          // "Eine andere App hat mir selbstbewusst etwas Falsches gesagt."
          title: 'Wir sagen dir auch, wenn wir unsicher sind.',
          body: 'Ein Foto zeigt keine Wurzeln und keine Erdfeuchte. Deshalb Wahrscheinlichkeiten statt erfundener Gewissheit.',
        },
      ],
      causeTitle: 'Wahrscheinlichste Ursache',
      causePrimary: 'Überwässerung',
      causePrimaryLevel: '64 %',
      causeSecondary: 'Nährstoffmangel',
      causeSecondaryLevel: '41 %',
      checkLabel: 'Prüfe zuerst',
      checkItems: 'Erde 3 cm tief · Abzugslöcher · Blattunterseiten',
      planLabel: '7-Tage-Plan',
      planNow: 'Heute: nicht gießen',
      planFollowUp: 'Tag 7: Wir fragen nach, ob es besser wird',
      uncertainTitle: 'Was ein Foto nicht zeigt',
      uncertainItems: ['Wurzeln', 'Erdfeuchte', 'Vorgeschichte'],
      uncertainNote: 'Deshalb: Wahrscheinlichkeiten statt Diagnose.',
      continueLabel: 'Weiter',
    };
  }
  if (language === 'es') {
    return {
      slides: [
        {
          title: '¿Qué le pasa a mi planta?',
          body: 'Fotografía el síntoma. Recibes las causas más probables - y qué revisar.',
        },
        {
          title: 'Un plan concreto. Para esta planta.',
          body: 'Acción inmediata, plan de 7 días, y luego la pregunta: ¿funcionó?',
        },
        {
          title: 'También te decimos cuándo no estamos seguros.',
          body: 'Una foto no muestra las raíces ni la humedad. Por eso probabilidades, no certezas inventadas.',
        },
      ],
      causeTitle: 'Causa más probable',
      causePrimary: 'Exceso de riego',
      causePrimaryLevel: '64 %',
      causeSecondary: 'Falta de nutrientes',
      causeSecondaryLevel: '41 %',
      checkLabel: 'Revisa primero',
      checkItems: 'Sustrato a 3 cm · Drenaje · Reverso de las hojas',
      planLabel: 'Plan de 7 días',
      planNow: 'Hoy: no regar',
      planFollowUp: 'Día 7: preguntamos si va mejor',
      uncertainTitle: 'Lo que una foto no muestra',
      uncertainItems: ['Raíces', 'Humedad', 'Historial'],
      uncertainNote: 'Por eso: probabilidades, no diagnóstico.',
      continueLabel: 'Continuar',
    };
  }
  return {
    slides: [
      {
        title: "What's wrong with my plant?",
        body: 'Photograph the symptom. You get the most likely causes - and what to check.',
      },
      {
        title: 'A concrete plan. For this plant.',
        body: 'Immediate action, a 7-day plan, and then the question: did it work?',
      },
      {
        title: "We also tell you when we're not sure.",
        body: 'A photo cannot show roots or soil moisture. So: probabilities, not invented certainty.',
      },
    ],
    causeTitle: 'Most likely cause',
    causePrimary: 'Overwatering',
    causePrimaryLevel: '64%',
    causeSecondary: 'Nutrient deficiency',
    causeSecondaryLevel: '41%',
    checkLabel: 'Check first',
    checkItems: 'Soil 3 cm deep · Drainage holes · Leaf undersides',
    planLabel: '7-day plan',
    planNow: 'Today: do not water',
    planFollowUp: 'Day 7: we ask whether it improved',
    uncertainTitle: 'What a photo cannot show',
    uncertainItems: ['Roots', 'Soil moisture', 'History'],
    uncertainNote: 'So: probabilities, not diagnosis.',
    continueLabel: 'Continue',
  };
};

type SlidesCopy = ReturnType<typeof getSlidesCopy>;

/** Slide 1: Ursachen-Ranking statt Prozent-Behauptung. */
function CauseRankingOverlay({ copy, colors }: { copy: SlidesCopy; colors: ColorsType }) {
  return (
    <>
      <View style={styles.scanFrameWrap} pointerEvents="none">
        <View style={[styles.cornerTL, { borderColor: colors.primary }]} />
        <View style={[styles.cornerTR, { borderColor: colors.primary }]} />
        <View style={[styles.cornerBL, { borderColor: colors.primary }]} />
        <View style={[styles.cornerBR, { borderColor: colors.primary }]} />
      </View>
      <View style={styles.healthCard}>
        <Text style={styles.overlayEyebrow}>{copy.causeTitle}</Text>
        <View style={[styles.healthRow, styles.healthRowWarning]}>
          <Ionicons name="alert-circle" size={15} color="#C62828" />
          <Text style={styles.healthRowWarningText}>
            {copy.causePrimary} · {copy.causePrimaryLevel}
          </Text>
        </View>
        <View style={[styles.healthRow, styles.healthRowNeutral]}>
          <Ionicons name="help-circle-outline" size={15} color="#6b7280" />
          <Text style={styles.healthRowNeutralText}>
            {copy.causeSecondary} · {copy.causeSecondaryLevel}
          </Text>
        </View>
        {/* In derselben Karte statt als zweites absolutes Element: zwei frei
            positionierte Overlays ueberlappen sich, sobald Uebersetzungen die
            Karte wachsen lassen. */}
        <View style={styles.checkInline}>
          <Text style={styles.checkChipLabel}>{copy.checkLabel}</Text>
          <Text style={styles.checkChipText}>{copy.checkItems}</Text>
        </View>
      </View>
    </>
  );
}

/** Slide 2: der Plan inklusive Follow-up - das ist der Kaufgrund. */
function PlanOverlay({ copy }: { copy: SlidesCopy }) {
  return (
    <View style={styles.healthCard}>
      <View style={styles.healthCardHeader}>
        <View style={styles.healthCardIcon}>
          <Ionicons name="calendar" size={16} color="#2e7d32" />
        </View>
        <Text style={styles.healthCardTitle}>{copy.planLabel}</Text>
      </View>
      <View style={[styles.healthRow, styles.healthRowSuccess]}>
        <Ionicons name="water-outline" size={15} color="#2e7d32" />
        <Text style={styles.healthRowSuccessText}>{copy.planNow}</Text>
      </View>
      <View style={[styles.healthRow, styles.healthRowNeutral]}>
        <Ionicons name="chatbubble-ellipses-outline" size={15} color="#6b7280" />
        <Text style={styles.healthRowNeutralText}>{copy.planFollowUp}</Text>
      </View>
    </View>
  );
}

/** Slide 3: die Grenzen des Verfahrens, sichtbar gemacht. */
function UncertaintyOverlay({ copy }: { copy: SlidesCopy }) {
  return (
    <View style={styles.healthCard}>
      <View style={styles.healthCardHeader}>
        <View style={styles.healthCardIcon}>
          <Ionicons name="eye-off-outline" size={16} color="#6b7280" />
        </View>
        <Text style={styles.healthCardTitle}>{copy.uncertainTitle}</Text>
      </View>
      {copy.uncertainItems.map((item) => (
        <View key={item} style={[styles.healthRow, styles.healthRowNeutral]}>
          <Ionicons name="close-circle-outline" size={15} color="#6b7280" />
          <Text style={styles.healthRowNeutralText}>{item}</Text>
        </View>
      ))}
      <Text style={styles.overlayNote}>{copy.uncertainNote}</Text>
    </View>
  );
}

export default function OnboardingSlidesScreen() {
  const router = useRouter();
  const { height } = useWindowDimensions();
  const compact = height < 700;
  const { language, isDarkMode, colorPalette } = useApp();
  const colors = useColors(isDarkMode, colorPalette);
  const posthog = useSafeAnalytics();
  const [page, setPage] = useState(0);
  const copy = getSlidesCopy(language);
  const slide = copy.slides[page];

  useEffect(() => {
    posthog.capture('onboarding_slide_viewed', { index: page, slide: ['triage', 'plan', 'uncertainty'][page] });
  }, [page, posthog]);

  const next = () => {
    if (page < copy.slides.length - 1) {
      setPage(page + 1);
    } else {
      router.replace('/onboarding/source');
    }
  };

  const back = () => {
    if (page > 0) {
      setPage(page - 1);
    } else {
      router.back();
    }
  };

  return (
    <View style={[styles.container, { backgroundColor: isDarkMode ? '#0a110b' : '#f8fbef' }]}>
      <View style={[styles.imageArea, { height: compact ? '58%' : '65%' }]}>
        <Image
          source={
            page === 0
              ? require('../../assets/onboarding_health_scan_mockup_vertical.png')
              : page === 1
                ? require('../../assets/paywall_scan_background.png')
                : require('../../assets/welcome_botanical_header.png')
          }
          style={styles.image}
          resizeMode="cover"
        />
        <SafeAreaView style={styles.imageSafeArea} edges={['top']}>
          <TouchableOpacity onPress={back} style={styles.backBtn} activeOpacity={0.85}>
            <Ionicons name="arrow-back" size={20} color="#1f2520" />
          </TouchableOpacity>
        </SafeAreaView>
        {page === 0 && <CauseRankingOverlay copy={copy} colors={colors} />}
        {page === 1 && <PlanOverlay copy={copy} />}
        {page === 2 && <UncertaintyOverlay copy={copy} />}
      </View>
      <View style={[styles.sheet, { backgroundColor: colors.surface }]}>
        <Text style={[styles.title, { color: colors.text }]}>{slide.title}</Text>
        <Text style={[styles.body, { color: colors.textSecondary }]}>{slide.body}</Text>
        <View style={styles.dots}>
          {copy.slides.map((_, index) => (
            <View
              key={index}
              style={[
                styles.dot,
                index === page
                  ? [styles.dotActive, { backgroundColor: colors.primary }]
                  : { backgroundColor: colors.border },
              ]}
            />
          ))}
        </View>
        <TouchableOpacity
          style={[styles.cta, { backgroundColor: colors.primary }]}
          onPress={next}
          activeOpacity={0.86}
        >
          <Text style={[styles.ctaText, { color: colors.onPrimary }]}>{copy.continueLabel}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  imageArea: {
    height: '58%',
    position: 'relative',
    overflow: 'hidden',
  },
  image: {
    width: '100%',
    height: '100%',
    position: 'absolute',
  },
  imageSafeArea: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
  },
  backBtn: {
    marginLeft: 16,
    marginTop: 8,
    width: 38,
    height: 38,
    borderRadius: 19,
    backgroundColor: 'rgba(255,255,255,0.85)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  // Scan frame overlay (slide 1)
  scanFrameWrap: {
    position: 'absolute',
    top: '22%',
    left: '20%',
    right: '20%',
    bottom: '26%',
  },
  cornerTL: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: 30,
    height: 30,
    borderTopWidth: 4,
    borderLeftWidth: 4,
    borderTopLeftRadius: 8,
  },
  cornerTR: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: 30,
    height: 30,
    borderTopWidth: 4,
    borderRightWidth: 4,
    borderTopRightRadius: 8,
  },
  cornerBL: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    width: 30,
    height: 30,
    borderBottomWidth: 4,
    borderLeftWidth: 4,
    borderBottomLeftRadius: 8,
  },
  cornerBR: {
    position: 'absolute',
    bottom: 0,
    right: 0,
    width: 30,
    height: 30,
    borderBottomWidth: 4,
    borderRightWidth: 4,
    borderBottomRightRadius: 8,
  },
  // Health card overlay (slide 2)
  healthCard: {
    position: 'absolute',
    bottom: 34,
    left: 16,
    right: 16,
    backgroundColor: 'rgba(255,255,255,0.96)',
    borderRadius: 18,
    padding: 14,
    gap: 8,
  },
  healthCardHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    marginBottom: 2,
  },
  healthCardIcon: {
    width: 28,
    height: 28,
    borderRadius: 14,
    backgroundColor: '#fdeaea',
    alignItems: 'center',
    justifyContent: 'center',
  },
  healthCardTitle: {
    fontSize: 16,
    fontWeight: '800',
    color: '#1f2520',
  },
  healthRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    borderRadius: 10,
    paddingHorizontal: 10,
    paddingVertical: 8,
  },
  healthRowWarning: {
    backgroundColor: '#fdeaea',
  },
  healthRowWarningText: {
    fontSize: 13.5,
    fontWeight: '700',
    color: '#C62828',
  },
  healthRowSuccess: {
    backgroundColor: '#e8f3e3',
  },
  healthRowSuccessText: {
    fontSize: 13.5,
    fontWeight: '700',
    color: '#2e7d32',
  },
  // Neutrale Zeile: bewusst grau, damit "weniger wahrscheinlich" und
  // "was wir nicht sehen" optisch NICHT wie eine Zusage aussehen.
  healthRowNeutral: {
    backgroundColor: '#f1f2f0',
  },
  healthRowNeutralText: {
    fontSize: 13.5,
    fontWeight: '600',
    color: '#5b6158',
  },
  overlayEyebrow: {
    fontSize: 10.5,
    fontWeight: '900',
    letterSpacing: 0.9,
    textTransform: 'uppercase',
    color: '#6b7280',
    marginBottom: 8,
  },
  overlayNote: {
    fontSize: 11.5,
    lineHeight: 15,
    fontWeight: '600',
    color: '#6b7280',
    marginTop: 8,
  },
  checkInline: {
    borderTopWidth: 1,
    borderTopColor: 'rgba(0,0,0,0.08)',
    paddingTop: 9,
    marginTop: 2,
  },
  // Ein Stack statt zwei absoluter Elemente: die Bloecke koennen sich nicht
  // mehr ueberlappen, egal wie lang der uebersetzte Text wird.
  checkChipLabel: {
    fontSize: 10,
    fontWeight: '900',
    letterSpacing: 0.8,
    textTransform: 'uppercase',
    color: '#6b7280',
    marginBottom: 3,
  },
  checkChipText: {
    fontSize: 12.5,
    lineHeight: 17,
    fontWeight: '700',
    color: '#1f2520',
  },
  // Reminder chips overlay (slide 3)
  // Bottom sheet
  sheet: {
    flex: 1,
    borderTopLeftRadius: 28,
    borderTopRightRadius: 28,
    marginTop: -24,
    paddingHorizontal: 24,
    paddingTop: 32,
    alignItems: 'center',
  },
  title: {
    fontSize: 30,
    fontWeight: '900',
    textAlign: 'center',
    marginBottom: 10,
  },
  body: {
    fontSize: 15.5,
    lineHeight: 22,
    textAlign: 'center',
    maxWidth: 320,
    marginBottom: 20,
  },
  dots: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    marginBottom: 'auto',
  },
  dot: {
    width: 8,
    height: 8,
    borderRadius: 4,
  },
  dotActive: {
    width: 26,
    height: 8,
    borderRadius: 4,
  },
  cta: {
    alignSelf: 'stretch',
    height: 58,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 24,
  },
  ctaText: {
    fontSize: 17,
    fontWeight: '800',
  },
});
