import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  KeyboardAvoidingView,
  Platform,
  Alert,
} from "react-native";
import PrimaryButton from "../../components/PrimaryButton";
import ScreenWrapper from "../../components/ScreenWrapper";
import { useThemeColors, ColorScheme } from "../../constants";
import { ROUTES } from "../../constants/routes";
import { Passkee } from "@/components/auth/Auth";

// import { useSettingsStore } from "../store/useSettingsStore";
// import useAuthStore from "../store/useAuthStore";
// import { createPasskey, isPasskeySupported } from "../lib/passkey";
// import { navigationRef } from "../lib/navigationRef";

const PasskeySetupScreen = async () => {
  const [isLoading, setIsLoading] = useState(false);
  // const isDarkMode = useSettingsStore((s) => s.isDarkMode);
  const isDarkMode = false;
  const colors = useThemeColors();
  const styles = getStyles(colors);
  // const { setHasPasskey, setHasSeenPasskeyPrompt } = useAuthStore();

  const logoSource = isDarkMode
    ? require("../../assets/urbit-logo-dark.png")
    : require("../../assets/urbit-logo-light.png");

  const handleSkip = () => {
    // setHasSeenPasskeyPrompt(true);
    // navigationRef.current?.navigate(ROUTES.LOGIN as never);
  };

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === "ios" ? "padding" : undefined}
    >
      <ScreenWrapper>
        <View style={styles.topSection}>
          <Image
            source={logoSource}
            style={styles.walletIcon}
            resizeMode="contain"
          />
          <Text style={styles.title}>Secure Your Wallet</Text>
          <Text style={styles.subtitle}>
            Create a passkey for easy and secure access to your Urbit wallet
          </Text>
        </View>

        <View style={styles.bottomSection}>
          <Passkee />
          <PrimaryButton
            label="Skip for Now"
            onPress={handleSkip}
            style={{
              backgroundColor: colors.card,
              borderWidth: 1,
              borderColor: colors.border,
            }}
            textStyle={{ color: colors.text }}
          />

          <Text style={styles.infoText}>
            You can always set up a passkey later in settings
          </Text>
        </View>
      </ScreenWrapper>
    </KeyboardAvoidingView>
  );
};

export const getStyles = (colors: ColorScheme) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.background,
      justifyContent: "space-between",
      padding: 20,
    },
    topSection: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
    },
    walletIcon: {
      width: 64,
      height: 64,
      marginBottom: 24,
    },
    title: {
      fontSize: 24,
      color: colors.text,
      fontWeight: "600",
      marginBottom: 12,
      textAlign: "center",
    },
    subtitle: {
      fontSize: 16,
      color: colors.secondary,
      textAlign: "center",
      paddingHorizontal: 20,
      lineHeight: 24,
    },
    bottomSection: {
      marginBottom: 40,
    },
    infoText: {
      color: colors.secondary,
      fontSize: 14,
      textAlign: "center",
      marginTop: 16,
    },
  });

export default PasskeySetupScreen;