import { useLocalSearchParams, router } from 'expo-router';
import { Image, Text, View, StyleSheet, Pressable } from 'react-native';
import { useTranslation } from 'react-i18next';
import { Screen } from '../../../src/components/Screen';
import { PrimaryButton } from '../../../src/components/PrimaryButton';
import { BackButton } from '../../../src/components/BackButton';
import { useAuth } from '../../../src/state/auth';
import { useOnboarding } from '../../../src/state/onboarding';
import { naviAssets } from '../../../src/assets/naviAssets';
import { color, spacing, typography } from '../../../src/theme';
import { naviTheme } from '../../../src/theme/naviTheme';

export default function Onboarding() {
  const { step } = useLocalSearchParams<{ step: string }>();
  const { t } = useTranslation();
  const markOnboarded = useOnboarding((s) => s.markOnboarded);
  const continueAsGuest = useAuth((s) => s.continueAsGuest);
  const idx = Math.max(1, Math.min(3, Number(step) || 1));

  const titles = [t('onboarding.step1Title'), t('onboarding.step2Title'), t('onboarding.step3Title')];
  const bodies = [t('onboarding.step1Body'), t('onboarding.step2Body'), t('onboarding.step3Body')];
  const images = [naviAssets.onboarding.discover, naviAssets.onboarding.planner, naviAssets.onboarding.services];

  async function goToAuth() {
    await markOnboarded();
    router.replace('/(auth)/login');
  }

  async function skipToGuest() {
    await markOnboarded();
    await continueAsGuest();
    router.replace('/(tabs)/home');
  }

  return (
    <Screen>
      <View style={styles.headerRow}>
        {idx > 1 ? (
          <BackButton
            label={t('actions.back')}
            onPress={() => router.replace(`/(auth)/onboarding/${idx - 1}`)}
          />
        ) : (
          <Text style={styles.brand}>{t('app.name')}</Text>
        )}
        <Pressable accessibilityRole="button" onPress={skipToGuest}>
          <Text style={styles.skip}>{t('actions.skip')}</Text>
        </Pressable>
      </View>

      <View style={styles.dots}>
        {[1, 2, 3].map((n) => (
          <View
            key={n}
            style={[styles.dot, n === idx ? { backgroundColor: color.blue[600], width: 22 } : null]}
          />
        ))}
      </View>

      <Image source={images[idx - 1]} style={styles.heroImage} resizeMode="cover" />
      <Text style={styles.title}>{titles[idx - 1]}</Text>
      <Text style={styles.body}>{bodies[idx - 1]}</Text>

      <View style={{ height: spacing[6] }} />
      <PrimaryButton
        label={idx === 3 ? t('actions.getStarted') : t('actions.next')}
        rightIcon={idx !== 3}
        onPress={() =>
          idx === 3
            ? void goToAuth()
            : router.replace(`/(auth)/onboarding/${idx + 1}`)
        }
      />
    </Screen>
  );
}

const styles = StyleSheet.create({
  headerRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  brand: { fontSize: 22, fontWeight: '700', color: color.blue[600] },
  skip: { color: color.ink[500] },
  dots: { flexDirection: 'row', gap: 6, marginTop: spacing[4] },
  dot: { width: 8, height: 8, borderRadius: 999, backgroundColor: color.bg[100] },
  heroImage: {
    borderRadius: naviTheme.radius.xxl,
    height: 360,
    marginTop: spacing[6],
    width: '100%',
  },
  title: {
    fontSize: typography.scale.h1.size,
    lineHeight: typography.scale.h1.line,
    fontWeight: '700',
    color: color.ink[900],
    marginTop: spacing[4],
  },
  body: { fontSize: typography.scale.body.size, color: color.ink[700], lineHeight: 22 },
});