import { Image, View } from "react-native";
import { router } from "expo-router";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/ui/Button";
import { Screen } from "@/components/ui/Screen";
import { Text } from "@/components/ui/Text";
import { brand } from "@/lib/data/brand";
import { colors, gutter } from "@/lib/theme";
import { routes } from "@/lib/routes";
import { useAuthStore } from "@/lib/stores/authStore";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function WelcomeScreen() {
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();
  const setHasOnboarded = useAuthStore((s) => s.setHasOnboarded);

  return (
    <Screen>
      <View
        style={{
          flex: 1,
          paddingTop: insets.top + 24,
          paddingBottom: insets.bottom + 24,
          paddingHorizontal: gutter + 4,
        }}
      >
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <Image
            source={require("@/assets/logo/gishen-logo.png")}
            style={{ width: 160, height: 160, resizeMode: "contain" }}
          />
          <Text variant="display" center style={{ marginTop: 24 }}>
            {t("common.appName")}
          </Text>
          <Text variant="body" color={colors.muted} center style={{ marginTop: 8, maxWidth: 300 }}>
            {t("common.tagline")}
          </Text>
          <Text
            variant="caption"
            color={colors.subtle}
            center
            style={{ marginTop: 16, maxWidth: 320 }}
          >
            Est. {brand.founded} · {brand.branchCount} branches · Serving {brand.institutions}+
            institutions across Addis Ababa.
          </Text>
        </View>
        <View style={{ gap: 12 }}>
          <Button title={t("common.getStarted")} onPress={() => router.push(routes.language)} />
          <Button
            title={t("common.guest")}
            variant="outline"
            onPress={() => {
              useAuthStore.getState().signIn({
                name: "Guest",
                phone: "",
                isGuest: true,
              });
              setHasOnboarded(true);
              router.replace(routes.home);
            }}
          />
          <Text variant="caption" color={colors.subtle} center>
            Guests can browse. Loyalty, corporate and some care features need a signed-in account.
          </Text>
        </View>
      </View>
    </Screen>
  );
}