import React from "react";
import { View } from "react-native";
import { router } from "expo-router";
import ScreenWrapper from "~/components/ui/ScreenWrapper";
import { Text } from "~/components/ui/text";
import { Button } from "~/components/ui/button";
import { HOME } from "~/lib/routes";
import BackButton from "~/components/ui/backButton";
import LottieView from "lottie-react-native";

export default function NotFoundScreen() {
  const handleClose = () => {
    if (router.canGoBack()) {
      router.back();
    } else {
      router.replace(HOME);
    }
  };

  const handleGoHome = () => {
    router.replace(HOME);
  };

  return (
    <ScreenWrapper edges={[]}>
      <View className="flex-1 bg-white">
        {/* Close icon */}
        <BackButton />

        {/* Content */}
        <View className="flex-1 items-center justify-center px-8">
          <LottieView
            source={require("../assets/lottie/404.json")}
            autoPlay
            loop
            style={{ width: 260, height: 260, marginBottom: 24 }}
          />

          <Text className="text-3xl font-dmsans-bold text-[#105D38] mb-2">
            404
          </Text>

          <Text className="text-base font-dmsans text-gray-500 mb-10 text-center">
            Page has not been found.
          </Text>
        </View>

        {/* Go Home button */}
        <View className="px-6 pb-8">
          <Button
            className="bg-[#105D38] rounded-full h-12 items-center justify-center"
            onPress={handleGoHome}
          >
            <Text className="text-white font-dmsans-medium text-base">
              Go Back Home
            </Text>
          </Button>
        </View>
      </View>
    </ScreenWrapper>
  );
}