import "server-only";
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 { type ColorScheme, lightColors } from "@/constants";
import { ShipForm } from "@/components/login/ShipCredsForm";

// // 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 isDarkMode = useSettingsStore((s) => s.isDarkMode);
//   const isDarkMode = false;
//   // const colors = useThemeColors();
//   const colors = lightColors;
//   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;
//
//

// export const unstable_settings = {
//   // This component will be rendered at build-time and never re-rendered in production.
//   render: "static",
// };

export default async function Index() {
  async function handleSubmit() {
    //
  }
  return (
    <View style={styles.container}>
      <ScreenWrapper>
        <View style={styles.topSection}>
          <Image
            source={require("../assets/urbit-logo-light.png")}
            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>
        <ShipForm />

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

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