import { FC } from "react"
import { TextStyle, View, ViewStyle } from "react-native"

import { Button } from "@/components/Button"
import { Screen } from "@/components/Screen"
import { Text } from "@/components/Text"
import type { AppStackScreenProps } from "@/navigators/navigationTypes"
import { useAppTheme } from "@/theme/context"
import type { ThemedStyle } from "@/theme/types"

interface AuthWelcomeScreenProps extends AppStackScreenProps<"AuthWelcome"> {}

export const AuthWelcomeScreen: FC<AuthWelcomeScreenProps> = ({ navigation }) => {
  const { themed } = useAppTheme()

  const handleLogin = () => {
    navigation.navigate("Login")
  }

  const handleRegister = () => {
    navigation.navigate("Register")
  }

  return (
    <Screen
      preset="fixed"
      contentContainerStyle={themed($screenContainer)}
      safeAreaEdges={["top", "bottom"]}
    >
      <View style={themed($content)}>
        <Text text="Welcome" preset="heading" style={themed($title)} />
        <Text
          text="Sign in to continue or create a new account"
          preset="subheading"
          style={themed($subtitle)}
        />
      </View>

      <View style={themed($buttonContainer)}>
        <Button
          testID="login-button"
          text="Log In"
          style={themed($button)}
          preset="reversed"
          onPress={handleLogin}
        />
        <Button
          testID="register-button"
          text="Create Account"
          style={themed($button)}
          preset="default"
          onPress={handleRegister}
        />
      </View>
    </Screen>
  )
}

const $screenContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
  flex: 1,
  paddingHorizontal: spacing.lg,
  justifyContent: "space-between",
})

const $content: ThemedStyle<ViewStyle> = ({ spacing }) => ({
  flex: 1,
  justifyContent: "center",
  alignItems: "center",
  paddingBottom: spacing.xxl,
})

const $title: ThemedStyle<TextStyle> = ({ spacing }) => ({
  marginBottom: spacing.sm,
  textAlign: "center",
})

const $subtitle: ThemedStyle<TextStyle> = () => ({
  textAlign: "center",
})

const $buttonContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
  paddingBottom: spacing.xl,
  gap: spacing.md,
})

const $button: ThemedStyle<ViewStyle> = () => ({
  width: "100%",
})