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: [
        {
          title: 'Scanne jede Pflanze',
          body: 'Richte die Kamera auf eine Pflanze und GreenLens erkennt sie in Sekunden.',
        },
        {
          title: 'Health Check & Pflegeplan',
          body: 'GreenLens erkennt Probleme früh und erstellt deinen Rettungsplan.',
        },
        {
          title: 'Nie mehr Gießen vergessen',
          body: 'Smarte Erinnerungen und deine Pflanzen-Bibliothek halten alles im Blick.',
        },
      ],
      resultChip: 'Monstera · 98%',
      healthCheckLabel: 'Health Check',
      overwateringDetected: 'Überwässerung erkannt',
      rescuePlanReady: '7-Tage-Rettungsplan bereit',
      waterReminder: 'Monstera gießen — heute',
      fertilizeReminder: 'Basilikum düngen — in 3 Tagen',
      continueLabel: 'Weiter',
    };
  }
  if (language === 'es') {
    return {
      slides: [
        {
          title: 'Escanea cualquier planta',
          body: 'Apunta la cámara a una planta y GreenLens la identifica en segundos.',
        },
        {
          title: 'Chequeo de salud y plan de cuidados',
          body: 'GreenLens detecta problemas a tiempo y crea tu plan de rescate.',
        },
        {
          title: 'No olvides regar nunca más',
          body: 'Recordatorios inteligentes y tu biblioteca de plantas lo mantienen todo al día.',
        },
      ],
      resultChip: 'Monstera · 98%',
      healthCheckLabel: 'Chequeo de salud',
      overwateringDetected: 'Exceso de riego detectado',
      rescuePlanReady: 'Plan de rescate de 7 días listo',
      waterReminder: 'Regar Monstera — hoy',
      fertilizeReminder: 'Abonar albahaca — en 3 días',
      continueLabel: 'Continuar',
    };
  }
  return {
    slides: [
      {
        title: 'Scan Any Plant',
        body: 'Point your camera at a plant and GreenLens identifies it in seconds.',
      },
      {
        title: 'Health Check & Care Plan',
        body: 'GreenLens spots problems early and builds a rescue plan for you.',
      },
      {
        title: 'Never Forget Watering',
        body: 'Smart reminders and your personal plant library keep everything on track.',
      },
    ],
    resultChip: 'Monstera · 98%',
    healthCheckLabel: 'Health Check',
    overwateringDetected: 'Overwatering detected',
    rescuePlanReady: '7-day rescue plan ready',
    waterReminder: 'Water Monstera — today',
    fertilizeReminder: 'Fertilize Basil — in 3 days',
    continueLabel: 'Continue',
  };
};

function ScanFrameOverlay({ resultChip, colors }: { resultChip: string; 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.resultChip}>
        <Ionicons name="leaf" size={15} color={colors.primary} />
        <Text style={styles.resultChipText}>{resultChip}</Text>
      </View>
    </>
  );
}

function HealthCardOverlay({
  label,
  overwateringDetected,
  rescuePlanReady,
}: {
  label: string;
  overwateringDetected: string;
  rescuePlanReady: string;
}) {
  return (
    <View style={styles.healthCard}>
      <View style={styles.healthCardHeader}>
        <View style={styles.healthCardIcon}>
          <Ionicons name="medkit" size={16} color="#C62828" />
        </View>
        <Text style={styles.healthCardTitle}>{label}</Text>
      </View>
      <View style={[styles.healthRow, styles.healthRowWarning]}>
        <Ionicons name="warning" size={15} color="#C62828" />
        <Text style={styles.healthRowWarningText}>{overwateringDetected}</Text>
      </View>
      <View style={[styles.healthRow, styles.healthRowSuccess]}>
        <Ionicons name="checkmark-circle" size={15} color="#2e7d32" />
        <Text style={styles.healthRowSuccessText}>{rescuePlanReady}</Text>
      </View>
    </View>
  );
}

function ReminderChipsOverlay({ waterReminder, fertilizeReminder }: { waterReminder: string; fertilizeReminder: string }) {
  const [waterLabel, waterMeta] = splitReminder(waterReminder);
  const [fertilizeLabel, fertilizeMeta] = splitReminder(fertilizeReminder);
  return (
    <>
      <View style={[styles.reminderChip, styles.reminderChipTop]}>
        <View style={[styles.reminderIcon, { backgroundColor: '#dff2e6' }]}>
          <Ionicons name="water" size={16} color="#2e7d32" />
        </View>
        <View>
          <Text style={styles.reminderLabel}>{waterLabel}</Text>
          <Text style={styles.reminderMeta}>{waterMeta}</Text>
        </View>
      </View>
      <View style={[styles.reminderChip, styles.reminderChipBottom]}>
        <View style={[styles.reminderIcon, { backgroundColor: '#e3f3c8' }]}>
          <Ionicons name="leaf" size={16} color="#558b2f" />
        </View>
        <View>
          <Text style={styles.reminderLabel}>{fertilizeLabel}</Text>
          <Text style={styles.reminderMeta}>{fertilizeMeta}</Text>
        </View>
      </View>
    </>
  );
}

// Splits "Water Monstera — today" into ["Water Monstera", "today"] for a two-line chip.
function splitReminder(text: string): [string, string] {
  const parts = text.split('—').map((part) => part.trim());
  if (parts.length === 2) return [parts[0], parts[1]];
  return [text, ''];
}

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 });
  }, [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/paywall_scan_background.png')
              : page === 1
                ? require('../../assets/onboarding_health_scan_mockup_vertical.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 && <ScanFrameOverlay resultChip={copy.resultChip} colors={colors} />}
        {page === 1 && (
          <HealthCardOverlay
            label={copy.healthCheckLabel}
            overwateringDetected={copy.overwateringDetected}
            rescuePlanReady={copy.rescuePlanReady}
          />
        )}
        {page === 2 && (
          <ReminderChipsOverlay waterReminder={copy.waterReminder} fertilizeReminder={copy.fertilizeReminder} />
        )}
      </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,
  },
  resultChip: {
    position: 'absolute',
    bottom: '10%',
    left: 20,
    right: 20,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    backgroundColor: 'rgba(255,255,255,0.94)',
    borderRadius: 999,
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  resultChipText: {
    fontSize: 15,
    fontWeight: '700',
    color: '#1f2520',
  },
  // 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',
  },
  // Reminder chips overlay (slide 3)
  reminderChip: {
    position: 'absolute',
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
    backgroundColor: 'rgba(255,255,255,0.96)',
    borderRadius: 999,
    paddingVertical: 8,
    paddingRight: 18,
    paddingLeft: 8,
  },
  reminderChipTop: {
    top: '24%',
    right: 20,
  },
  reminderChipBottom: {
    top: '42%',
    left: 20,
  },
  reminderIcon: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
  },
  reminderLabel: {
    fontSize: 14,
    fontWeight: '800',
    color: '#1f2520',
  },
  reminderMeta: {
    fontSize: 12,
    fontWeight: '600',
    color: '#5a8a3d',
  },
  // 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',
  },
});