import * as LocalAuthentication from "expo-local-authentication";
import { Alert, View } from "react-native";
import { SwitchRow } from "@/components/ui/Field";
import { Text } from "@/components/ui/Text";
import { colors } from "@/lib/theme";

export function BiometricRow({
  enabled,
  onChange,
}: {
  enabled: boolean;
  onChange: (v: boolean) => void;
}) {
  return (
    <View>
      <SwitchRow
        title="Biometric unlock"
        subtitle="Use Face ID / fingerprint when opening Gishen"
        value={enabled}
        onValueChange={async (v) => {
          if (!v) {
            onChange(false);
            return;
          }
          const hardware = await LocalAuthentication.hasHardwareAsync();
          const enrolled = await LocalAuthentication.isEnrolledAsync();
          if (!hardware || !enrolled) {
            Alert.alert(
              "Biometrics unavailable",
              "Set up Face ID or fingerprint on this device first."
            );
            return;
          }
          const result = await LocalAuthentication.authenticateAsync({
            promptMessage: "Enable biometric unlock for Gishen",
          });
          if (result.success) {
            onChange(true);
          } else {
            Alert.alert("Not enabled", "Biometric authentication was cancelled.");
          }
        }}
      />
      <Text variant="caption" color={colors.subtle} style={{ marginTop: -4, marginBottom: 4 }}>
        Requires a signed-in account (not guest).
      </Text>
    </View>
  );
}