import React from "react";
import { Pressable, 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";
import { withClickTracking } from "../../services/telemetry";

/** A signed-in account the picker can choose. */
export interface PickableAccount {
  userId: string;
  username: string;
  email: string;
  displayName?: string;
}

export interface AccountPickerScreenProps {
  accounts: PickableAccount[];
  /** Continue as the chosen account. */
  onSelect: (account: PickableAccount) => void;
  /** Sign in with a different account. */
  onUseAnother: () => void;
  isLoading?: boolean;
}

/**
 * "Choose an account" screen for multi-session SSO (OIDC `prompt=select_account`
 * style). Presentational: the host app supplies the accounts and handles the
 * selection (resume the authorize request) / "use another" (login) navigation.
 */
export function AccountPickerScreen({
  accounts,
  onSelect,
  onUseAnother,
  isLoading,
}: AccountPickerScreenProps) {
  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>Choose an account</CardTitle>
            <CardDescription>
              Select an account to continue, or use a different one.
            </CardDescription>
          </CardHeader>

          <CardContent className="gap-2">
            {accounts.length === 0 ? (
              <MutedText className="text-sm">No signed-in accounts.</MutedText>
            ) : (
              accounts.map((a) => (
                <Pressable
                  key={a.userId}
                  onPress={withClickTracking("auth.account_picker.on_select", () => onSelect(a))}
                  disabled={isLoading}
                  accessibilityRole="button"
                  accessibilityLabel={`Continue as ${a.username}`}
                  className="rounded-md border border-border px-3 py-3"
                >
                  <Text className="text-sm text-foreground">{a.displayName || a.username}</Text>
                  <MutedText className="text-xs">{a.email}</MutedText>
                </Pressable>
              ))
            )}
          </CardContent>

          <CardFooter className="border-t-0">
            <Button
              className="w-full"
              variant="outline"
              telemetryId="auth.account_picker.use_another"
              onPress={onUseAnother}
              accessibilityLabel="Use another account"
              accessibilityRole="button"
            >
              Use another account
            </Button>
          </CardFooter>
        </Card>
      </ScrollView>
    </SafeAreaView>
  );
}

export default AccountPickerScreen;