import React from "react";
import { ScrollView, View } 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";
/**
 * OIDC consent prompt (OIDC Core §3.1.2.4). Presentational + prop-driven: the
 * host app fetches the request detail, records the decision, and navigates —
 * this screen only renders the scopes and the allow/deny choice, so it stays
 * transport-agnostic and reusable across apps.
 */
export function ConsentScreen({ clientName, scopes, onAllow, onDeny, isLoading, error, }) {
    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-[400px]">
          <CardHeader>
            <CardTitle>Authorize {clientName}</CardTitle>
            <CardDescription>
              {clientName} wants access to your account. Review what it can do.
            </CardDescription>
          </CardHeader>

          <CardContent className="gap-3">
            {scopes.length === 0 ? (<MutedText className="text-sm">
                Basic sign-in (no additional access requested).
              </MutedText>) : (scopes.map((s) => (<View key={s.scope} className="flex-row gap-2">
                  <Text className="text-sm text-foreground">•</Text>
                  <View className="flex-1">
                    <Text className="text-sm text-foreground">{s.scope}</Text>
                    {s.description ? (<MutedText className="text-xs">{s.description}</MutedText>) : null}
                  </View>
                </View>)))}
            {error ? (<Text className="text-sm text-destructive dark:text-red-900">{error}</Text>) : null}
          </CardContent>

          <CardFooter className="flex-col items-stretch gap-3 border-t-0">
            <Button className="w-full" telemetryId="auth.consent.allow" onPress={onAllow} isLoading={isLoading} accessibilityLabel={`Allow ${clientName}`} accessibilityRole="button">
              Allow
            </Button>
            <Button className="w-full" variant="outline" telemetryId="auth.consent.deny" onPress={onDeny} accessibilityLabel="Deny access" accessibilityRole="button">
              Deny
            </Button>
          </CardFooter>
        </Card>
      </ScrollView>
    </SafeAreaView>);
}
export default ConsentScreen;
//# sourceMappingURL=ConsentScreen.jsx.map