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

export interface ExpiredLinkScreenProps {
  title?: string;
  message?: string;
  /** Request a fresh link (e.g. resend verification / reset). */
  onRequestNew?: () => void;
  requestLabel?: string;
  /** Return to sign in. */
  onHome?: () => void;
  homeLabel?: string;
}

/**
 * Shown when a one-time link (email verification, password reset, magic link)
 * has expired or was already used. Presentational; the host app wires the
 * "request a new link" + "back to sign in" actions.
 */
export function ExpiredLinkScreen({
  title = "This link has expired",
  message = "For your security, this link is no longer valid. Request a new one to continue.",
  onRequestNew,
  requestLabel = "Send a new link",
  onHome,
  homeLabel = "Back to sign in",
}: ExpiredLinkScreenProps) {
  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>

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

export default ExpiredLinkScreen;