import { router } from "expo-router";
import { useRef, useState } from "react";
import { Image, Text, TouchableOpacity, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import Swiper from "react-native-swiper";

import { CustomButton } from "@/components/custom-button";
import { onboarding } from "@/constants";
import { useT } from "@/lib/i18n";

const Welcome = () => {
  const swiperRef = useRef<Swiper>(null);
  const [activeIndex, setActiveIndex] = useState(0);
  const isLastSlide = activeIndex === onboarding.length - 1;
  const t = useT();

  return (
    <SafeAreaView className="flex h-full items-center justify-between bg-white dark:bg-neutral-950">
      <TouchableOpacity
        onPress={() => router.push("/(auth)/sign-up")}
        className="w-full flex justify-end items-end p-5"
      >
        <Text className="text-black dark:text-white text-base font-JakartaBold">
          {t("onboarding.skip")}
        </Text>
      </TouchableOpacity>

      <Swiper
        ref={swiperRef}
        loop={false}
        dot={<View className="w-8 h-1 mx-1 bg-[#E2E8F0] dark:bg-neutral-700 rounded-full" />}
        activeDot={<View className="w-8 h-1 mx-1 bg-[#0286FF] rounded-full" />}
        index={activeIndex}
        onIndexChanged={setActiveIndex}
      >
        {onboarding.map((item) => (
          <View key={item.id} className="flex items-center justify-center p-5">
            <Image
              source={item.image}
              alt={`Onboarding Item ${item.id}`}
              className="w-full h-[300px]"
              resizeMode="contain"
            />

            <View className="flex flex-row items-center justify-center w-full mt-10">
              <Text className="text-black dark:text-white text-3xl font-bold mx-10 text-center">
                {t(item.titleKey)}
              </Text>
            </View>

            <Text className="text-base font-JakartaSemiBold text-center text-[#858585] dark:text-neutral-400 mx-10 mt-3">
              {t(item.descKey)}
            </Text>
          </View>
        ))}
      </Swiper>

      <CustomButton
        onPress={() =>
          isLastSlide
            ? router.push("/(auth)/sign-up")
            : swiperRef.current?.scrollBy(1)
        }
        title={isLastSlide ? t("onboarding.getStarted") : t("onboarding.next")}
        className="w-11/12 mt-10"
      />
    </SafeAreaView>
  );
};

export default Welcome;