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 } from "../../components/text";
import { Button } from "../../components/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "../../components/card";

export interface ErrorScreenProps {
  /** Machine error code (e.g. `unknown_client`), shown for support/debugging. */
  code?: string;
  title?: string;
  message?: string;
  /** Optional retry action. */
  onRetry?: () => void;
  /** Optional "back to safety" action (e.g. home / sign-in). */
  onHome?: () => void;
  homeLabel?: string;
}

/**
 * Polished terminal error screen for the auth surfaces (a failed authorize, an
 * unexpected server error, …). Presentational; the host app maps codes to
 * copy and wires the actions.
 */
export function ErrorScreen({
  code,
  title = "Something went wrong",
  message = "We couldn't complete that request. Please try again.",
  onRetry,
  onHome,
  homeLabel = "Back to sign in",
}: ErrorScreenProps) {
  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>{title}</CardTitle>
            <CardDescription>{message}</CardDescription>
          </CardHeader>

          {code ? (
            <CardContent>
              <MutedText className="font-mono text-xs">code: {code}</MutedText>
            </CardContent>
          ) : null}

          {onRetry || onHome ? (
            <CardFooter className="flex-col items-stretch gap-3 border-t-0">
              {onRetry ? (
                <Button
                  className="w-full"
                  telemetryId="auth.error.retry"
                  onPress={onRetry}
                  accessibilityLabel="Try again"
                  accessibilityRole="button"
                >
                  Try again
                </Button>
              ) : null}
              {onHome ? (
                <Button
                  className="w-full"
                  variant="outline"
                  telemetryId="auth.error.home"
                  onPress={onHome}
                  accessibilityLabel={homeLabel}
                  accessibilityRole="button"
                >
                  {homeLabel}
                </Button>
              ) : null}
            </CardFooter>
          ) : null}
        </Card>
      </ScrollView>
    </SafeAreaView>
  );
}

export default ErrorScreen;