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";

/** One requested scope, with an optional human-readable description. */
export interface ConsentScope {
  scope: string;
  description?: string;
}

export interface ConsentScreenProps {
  /** The relying party's display name (heading). */
  clientName: string;
  /** The scopes the client is requesting. */
  scopes: ConsentScope[];
  /** Approve — the app records the grant and resumes the authorize request. */
  onAllow: () => void;
  /** Decline — the app bounces the client with `access_denied`. */
  onDeny: () => void;
  isLoading?: boolean;
  error?: string;
}

/**
 * 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,
}: ConsentScreenProps) {
  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;