import React from "react";
import { Platform, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Link } from "expo-router";
import { useNavigation } from "../../context/NavigationContext";
import { StatusBar } from "expo-status-bar";
import { useColorScheme } from "nativewind";
import { Heading, MutedText, Text } from "../../components/text";
import { Button } from "../../components/button";
import { useAppConfig } from "../../context/AppConfigContext";

export interface WelcomeScreenProps {
  /**
   * Optional decorative widget rendered between the brand block and the
   * action buttons (e.g. vault's PasswordDemoAnimation). Apps with
   * nothing to render here can omit it.
   */
  decoration?: React.ReactNode;
  /**
   * Optional widget rendered top-left/right of the screen. Vault uses
   * this for its admin server-settings cog.
   */
  topAccessory?: React.ReactNode;
}

export function WelcomeScreen({ decoration, topAccessory }: WelcomeScreenProps) {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";
  const router = useNavigation();
  const { appName, Logo, routes, tagline } = useAppConfig();

  return (
    <SafeAreaView className="flex-1 bg-background dark:bg-black">
      <StatusBar style={isDark ? "light" : "dark"} />
      <View className="flex-1 items-center justify-center px-6 py-8">
        {topAccessory}

        <View className="mb-6 items-center">
          <View className="mb-1 flex-row items-center">
            <Logo width={72} height={72} style={{ marginRight: -2 }} />
            <Heading className="text-4xl">{appName}</Heading>
          </View>
          {tagline ? <Text className="font-mono text-base text-foreground">{tagline}</Text> : null}
        </View>

        {decoration ? (
          <View className={Platform.OS === "web" ? "mb-6 pt-6 pb-4" : "mb-4 pt-3 pb-3"}>
            {decoration}
          </View>
        ) : null}

        <View className="w-full max-w-[360px] gap-3">
          <Button
            className="w-full"
            telemetryId="auth.welcome.push"
            onPress={() => router.push(routes.login)}
          >
            Sign In
          </Button>
          <Button
            variant="outline"
            className="w-full"
            telemetryId="auth.welcome.push_2"
            onPress={() => router.push(routes.register)}
          >
            Create Account
          </Button>
        </View>
      </View>

      <View className="px-5 pb-6">
        <MutedText className="text-center text-xs">
          By continuing, you agree to our{" "}
          <Link href={routes.termsOfService} asChild>
            <Text className="text-xs text-foreground underline">Terms of Service</Text>
          </Link>{" "}
          and{" "}
          <Link href={routes.privacyPolicy} asChild>
            <Text className="text-xs text-foreground underline">Privacy Policy</Text>
          </Link>
        </MutedText>
      </View>
    </SafeAreaView>
  );
}

export default WelcomeScreen;