import React, { useEffect } from 'react';
import {
  Image,
  ImageBackground,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  useWindowDimensions,
} from 'react-native';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { router } from 'expo-router';
import { useApp } from '../context/AppContext';
import { useSafeAnalytics } from '../services/analytics';
import { getWelcomeHeadlineVariant, WelcomeHeadlineVariant } from '../services/experiments';
import { APP_STORE_RATING, getTestimonialForLanguage, translatedNote } from '../constants/socialProof';
import { Language } from '../types';

const getWelcomeCopy = (language: Language, variant: WelcomeHeadlineVariant) => {
  if (language === 'de') {
    return {
      // Variante A (symptom): steigt direkt in Emmas akuten Moment ein.
      // Variante B (contrast): grenzt gegen kostenlose Identifikations-Apps ab.
      headline:
        variant === 'symptom'
          ? 'Gelbe Blätter. Und jetzt?'
          : 'Andere Apps sagen dir, wie deine Pflanze heißt.',
      subline:
        variant === 'symptom'
          ? 'GreenLens nennt dir die wahrscheinlichsten Ursachen, was du selbst prüfen solltest und die eine sichere Sache, die du jetzt tun kannst.'
          : 'GreenLens sagt dir, was mit ihr los ist: wahrscheinliche Ursache, was du prüfen sollst, was du als Nächstes tust - und ein Check, ob es gewirkt hat.',
      cta: 'Meine Pflanze prüfen',
      login: 'Ich habe schon ein Konto',
      demoScan: 'Erst ausprobieren - ohne Konto',
      legal: 'Mit dem Fortfahren akzeptierst du unsere Datenschutzerklärung und AGB.',
      ratingValue: APP_STORE_RATING.value.toLocaleString('de-DE', { minimumFractionDigits: 1 }),
      ratingCount: `${APP_STORE_RATING.count} Bewertungen`,
    };
  }
  if (language === 'es') {
    return {
      headline:
        variant === 'symptom'
          ? 'Hojas amarillas. ¿Y ahora?'
          : 'Otras apps te dicen cómo se llama tu planta.',
      subline:
        variant === 'symptom'
          ? 'GreenLens te da las causas más probables, qué revisar tú mismo y la única cosa segura que puedes hacer ahora.'
          : 'GreenLens te dice qué le pasa: causa probable, qué revisar, qué hacer después - y una comprobación de si funcionó.',
      cta: 'Revisar mi planta',
      login: 'Ya tengo cuenta',
      demoScan: 'Probar primero - sin cuenta',
      legal: 'Al continuar aceptas nuestra Política de privacidad y Términos.',
      ratingValue: APP_STORE_RATING.value.toLocaleString('es-ES', { minimumFractionDigits: 1 }),
      ratingCount: `${APP_STORE_RATING.count} valoraciones`,
    };
  }
  return {
    headline:
      variant === 'symptom'
        ? 'Yellow leaves. Now what?'
        : 'Other apps tell you what your plant is called.',
    subline:
      variant === 'symptom'
        ? 'GreenLens gives you the most likely causes, what to check yourself, and the one safe thing to do right now.'
        : "GreenLens tells you what's wrong with it: likely cause, what to check, what to do next - and a follow-up on whether it worked.",
    cta: 'Check my plant',
    login: 'I already have an account',
    demoScan: 'Try it first - no account needed',
    legal: 'By continuing you agree to our Privacy Policy and Terms.',
    ratingValue: APP_STORE_RATING.value.toLocaleString('en-US', { minimumFractionDigits: 1 }),
    ratingCount: `${APP_STORE_RATING.count} ratings`,
  };
};

/**
 * Proof-Punkte statt Testimonial: greifen, solange keine echten Store-Zitate
 * hinterlegt sind. Beide Zeilen sind Produktaussagen, keine Behauptungen ueber
 * Ergebnisse - sie halten damit die Positionierung "Triage statt Diagnose".
 */
const getProofPoints = (language: Language): string[] => {
  if (language === 'de') {
    return [
      'Wahrscheinlichste Ursachen - mit Angabe, wie sicher wir sind',
      'Konkrete Prüfschritte statt allgemeiner Pflegetipps',
      'Nach 7 Tagen fragen wir nach, ob es gewirkt hat',
    ];
  }
  if (language === 'es') {
    return [
      'Causas más probables - indicando qué tan seguros estamos',
      'Pasos concretos de revisión, no consejos genéricos',
      'A los 7 días preguntamos si funcionó',
    ];
  }
  return [
    'Most likely causes - with how confident we actually are',
    'Concrete things to check, not generic care tips',
    'After 7 days we ask whether it worked',
  ];
};

export default function OnboardingScreen() {
  const { language } = useApp();
  const { height } = useWindowDimensions();
  const compact = height < 700;
  const posthog = useSafeAnalytics();
  const insets = useSafeAreaInsets();

  const [variant, setVariant] = React.useState<WelcomeHeadlineVariant | null>(null);
  const copy = getWelcomeCopy(language, variant ?? 'symptom');
  const testimonial = getTestimonialForLanguage(language);
  const proofPoints = getProofPoints(language);

  useEffect(() => {
    let active = true;
    void getWelcomeHeadlineVariant().then((assigned) => {
      if (!active) return;
      setVariant(assigned);
      posthog.capture('onboarding_welcome_viewed', { welcome_variant: assigned });
    });
    return () => {
      active = false;
    };
  }, [posthog]);

  return (
    <View style={styles.container}>
      <Image
        source={require('../assets/welcome_hero_vertical.png')}
        style={[{ position: 'absolute', top: 0, left: 0, right: 0, width: '100%' }, { height: compact ? '65%' : '70%' }]}
        resizeMode="cover"
      />
      <View style={[{ width: '100%' }, { height: compact ? '48%' : '52%' }]}>
        <View style={[styles.heroSafe, { paddingTop: Math.max(insets.top, 16) }]}>
          <View style={styles.heroTopRow}>
            <View style={styles.brandRow}>
              <Image
                source={require('../assets/icon.png')}
                style={styles.logo}
                resizeMode="cover"
              />
              <Text style={styles.brandName}>
                Green<Text style={styles.brandAccent}>Lens</Text>
              </Text>
            </View>
            {/* Rating und Anzahl immer gemeinsam: 5,0 aus 6 Bewertungen ist
                ehrlich und ueberpruefbar - eine nackte Sternezahl waere es nicht. */}
            <View style={styles.ratingPill}>
              <Ionicons name="star" size={13} color="#f5c04e" />
              <Text style={styles.ratingText}>{copy.ratingValue}</Text>
              <Text style={styles.ratingCount}>· {copy.ratingCount}</Text>
            </View>
          </View>

          {testimonial ? (
            <View style={[styles.testimonialCard, compact && styles.testimonialCardCompact]}>
              <Text style={styles.testimonialText} numberOfLines={compact ? 3 : 4}>
                „{testimonial.quote}"
              </Text>
              <View style={styles.testimonialMeta}>
                <Text style={styles.testimonialAuthor}>
                  {testimonial.author}
                  {testimonial.isTranslated ? ` · ${translatedNote(language)}` : ''}
                </Text>
                <View style={styles.starsRow}>
                  {Array.from({ length: testimonial.stars }).map((_, i) => (
                    <Ionicons key={i} name="star" size={14} color="#f5c04e" />
                  ))}
                </View>
              </View>
            </View>
          ) : (
            /* Kein belegtes Zitat vorhanden → Argument statt erfundenem Social Proof. */
            <View style={[styles.testimonialCard, compact && styles.testimonialCardCompact]}>
              {proofPoints.map((point) => (
                <View key={point} style={styles.proofRow}>
                  <Ionicons name="checkmark-circle" size={15} color="#a6d66f" />
                  <Text style={styles.proofText}>{point}</Text>
                </View>
              ))}
            </View>
          )}
        </View>
      </View>

      <View style={styles.sheet}>
        <View style={styles.sheetHandle} />
        <View style={styles.sheetContent}>
          <View style={styles.topSpacer} />
          {/* Erst rendern, wenn die Variante feststeht. Sonst blitzt fuer die
              Haelfte der Nutzer kurz die falsche Headline auf und wechselt dann -
              das sieht kaputt aus und verfaelscht den Test. */}
          <View style={{ opacity: variant ? 1 : 0 }}>
            <Text style={[styles.headline, compact && styles.headlineCompact]}>{copy.headline}</Text>
            <Text style={styles.subline}>{copy.subline}</Text>
          </View>

          <View style={styles.spacer} />

          <TouchableOpacity
            style={styles.cta}
            onPress={() => {
              posthog.capture('onboarding_started', { welcome_variant: variant ?? 'unassigned' });
              router.push('/onboarding/slides');
            }}
            activeOpacity={0.86}
          >
            <Text style={styles.ctaText}>{copy.cta}</Text>
          </TouchableOpacity>

          <TouchableOpacity onPress={() => router.push('/auth/login')} style={styles.loginLink}>
            <Text style={styles.loginText}>{copy.login}</Text>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() => {
              posthog.capture('onboarding_demo_scan_started', {
                welcome_variant: variant ?? 'unassigned',
              });
              router.push('/scanner');
            }}
            style={styles.demoLink}
          >
            <Ionicons name="scan-outline" size={18} color="#a6d66f" />
            <Text style={styles.demoText}>{copy.demoScan}</Text>
          </TouchableOpacity>

          <Text style={styles.legal}>{copy.legal}</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0a110b',
  },
  hero: {
    width: '100%',
  },
  heroImageContent: {
    backgroundColor: '#0a110b',
  },
  heroShadeTop: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    height: 120,
    backgroundColor: 'rgba(10,17,11,0.4)',
  },
  heroSafe: {
    flex: 1,
    justifyContent: 'space-between',
    paddingHorizontal: 24,
    paddingBottom: 32,
  },
  heroTopRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
  },
  brandRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
  },
  logo: {
    width: 36,
    height: 36,
    borderRadius: 10,
    backgroundColor: '#fff',
  },
  brandName: {
    color: '#ffffff',
    fontSize: 24,
    fontWeight: '900',
  },
  brandAccent: {
    color: '#8ba885',
  },
  ratingPill: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    backgroundColor: 'rgba(0, 0, 0, 0.55)',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.25)',
    borderRadius: 999,
    paddingHorizontal: 14,
    paddingVertical: 8,
  },
  ratingText: {
    color: '#ffffff',
    fontSize: 12,
    fontWeight: '700',
  },
  ratingCount: {
    color: '#c9d3c2',
    fontSize: 11,
    fontWeight: '600',
  },
  proofRow: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: 8,
    marginBottom: 8,
  },
  proofText: {
    flex: 1,
    color: '#e6efe2',
    fontSize: 13.5,
    lineHeight: 18,
    fontWeight: '600',
  },
  testimonialCard: {
    backgroundColor: 'rgba(16, 26, 18, 0.75)',
    borderRadius: 16,
    padding: 16,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.08)',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.25,
    shadowRadius: 14,
    elevation: 4,
    marginBottom: 8,
  },
  testimonialCardCompact: {
    padding: 12,
  },
  testimonialText: {
    color: '#ffffff',
    fontSize: 14.5,
    lineHeight: 20,
    fontStyle: 'italic',
    marginBottom: 10,
  },
  testimonialMeta: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  testimonialAuthor: {
    color: '#a6d66f',
    fontSize: 13,
    fontWeight: '700',
  },
  starsRow: {
    flexDirection: 'row',
    gap: 1,
  },
  sheet: {
    flex: 1,
    backgroundColor: '#0c160d',
    borderTopLeftRadius: 28,
    borderTopRightRadius: 28,
    marginTop: -20,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.05)',
  },
  sheetHandle: {
    alignSelf: 'center',
    width: 44,
    height: 5,
    borderRadius: 3,
    backgroundColor: 'rgba(255,255,255,0.2)',
    marginTop: 12,
    marginBottom: 8,
  },
  sheetContent: {
    flex: 1,
    paddingHorizontal: 24,
    paddingTop: 8,
    paddingBottom: 12,
  },
  topSpacer: {
    height: 12,
  },
  headline: {
    color: '#ffffff',
    fontSize: 28,
    lineHeight: 34,
    fontWeight: '900',
    textAlign: 'center',
    marginBottom: 10,
  },
  headlineCompact: {
    fontSize: 24,
    lineHeight: 29,
  },
  subline: {
    color: '#dae6d6',
    fontSize: 16,
    lineHeight: 22,
    fontWeight: '500',
    textAlign: 'center',
  },
  spacer: {
    height: 18,
  },
  cta: {
    height: 60,
    borderRadius: 16,
    backgroundColor: '#437824',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 6,
  },
  ctaText: {
    color: '#f8f7ef',
    fontSize: 18,
    fontWeight: '800',
  },
  loginLink: {
    alignItems: 'center',
    paddingVertical: 10,
  },
  loginText: {
    color: '#a6d66f',
    fontSize: 15,
    fontWeight: '800',
  },
  demoLink: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    height: 52,
    borderRadius: 14,
    borderWidth: 1.5,
    borderColor: '#a6d66f',
    backgroundColor: 'rgba(166, 214, 111, 0.05)',
    marginVertical: 8,
    marginBottom: 12,
  },
  demoText: {
    color: '#a6d66f',
    fontSize: 15,
    fontWeight: '700',
  },
  legal: {
    color: '#8d9382',
    fontSize: 11,
    lineHeight: 14,
    fontWeight: '500',
    textAlign: 'center',
  },
});
