import React from "react";
import { ScrollView } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
import { useColorScheme } from "nativewind";
import { MutedText, Text } from "../../components/text";
import { Button } from "../../components/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "../../components/card";

export interface PasskeyEnrollScreenProps {
  /** Start the WebAuthn registration ceremony (host app owns the ceremony). */
  onEnroll: () => void;
  /** Continue without enrolling a passkey. */
  onSkip: () => void;
  isLoading?: boolean;
  error?: string;
}

/**
 * Standalone passkey (WebAuthn) enrollment prompt — offered after sign-in so a
 * user can add a passkey without going through account settings. Presentational:
 * the host app runs the actual `navigator.credentials` ceremony via its
 * AuthService and drives navigation on enroll / skip.
 */
export function PasskeyEnrollScreen({
  onEnroll,
  onSkip,
  isLoading,
  error,
}: PasskeyEnrollScreenProps) {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";

  return (
    <SafeAreaView className="flex-1 bg-background dark:bg-black">
      <StatusBar style={isDark ? "light" : "dark"} />
      <ScrollView
        className="flex-1"
        contentContainerClassName="flex-1 items-center justify-center p-6"
        keyboardShouldPersistTaps="handled"
      >
        <Card className="w-full max-w-[380px]">
          <CardHeader>
            <CardTitle>Add a passkey</CardTitle>
            <CardDescription>
              Sign in faster and more securely next time with a passkey — your device unlocks it
              with your fingerprint, face, or PIN. No password to remember or phish.
            </CardDescription>
          </CardHeader>

          <CardContent className="gap-2">
            {error ? (
              <Text className="text-sm text-destructive dark:text-red-900">{error}</Text>
            ) : (
              <MutedText className="text-sm">
                You can always add or remove passkeys later in your account settings.
              </MutedText>
            )}
          </CardContent>

          <CardFooter className="flex-col items-stretch gap-3 border-t-0">
            <Button
              className="w-full"
              telemetryId="auth.passkey_enroll.enroll"
              onPress={onEnroll}
              isLoading={isLoading}
              accessibilityLabel="Add a passkey"
              accessibilityRole="button"
            >
              Add a passkey
            </Button>
            <Button
              className="w-full"
              variant="ghost"
              telemetryId="auth.passkey_enroll.skip"
              onPress={onSkip}
              accessibilityLabel="Not now"
              accessibilityRole="button"
            >
              Not now
            </Button>
          </CardFooter>
        </Card>
      </ScrollView>
    </SafeAreaView>
  );
}

export default PasskeyEnrollScreen;