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

/**
 * Which shape an auth screen takes.
 *
 * `card` is a dialog floated in the middle of the viewport: a title, a
 * description, the content and the actions, all inside a bordered panel. It is
 * right on a desktop portal and it is what every consumer of these screens has
 * always had.
 *
 * `screen` is the phone shape — heading at the top, content filling the space
 * below it, actions at the bottom, no panel. A card on a phone is a panel
 * floated over nothing, with its own padding inside the screen's padding, and
 * next to a flow built the other way it reads as something from another app.
 *
 * The default stays `card` so nothing changes for anyone who does not ask.
 */
export type AuthPageLayout = "card" | "screen";

export interface AuthPageProps {
  layout?: AuthPageLayout;
  title: string;
  subtitle?: string | null;
  /** Drawn above the title in the card layout, and nowhere in the screen one. */
  icon?: React.ReactNode;
  /** Top-left of the page, outside the content — a sign-out control, usually. */
  corner?: React.ReactNode;
  children: React.ReactNode;
  footer?: React.ReactNode;
  /** Card width. Ignored by the screen layout, which has the whole width. */
  maxWidth?: number;
}

export function AuthPage({
  layout = "card",
  title,
  subtitle,
  icon,
  corner,
  children,
  footer,
  maxWidth = 440,
}: AuthPageProps) {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";

  if (layout === "screen") {
    return (
      <SafeAreaView className="flex-1 bg-background dark:bg-black">
        <StatusBar style={isDark ? "light" : "dark"} />
        <ScrollView
          className="flex-1"
          contentContainerStyle={{ flexGrow: 1 }}
          keyboardShouldPersistTaps="handled"
        >
          <View className="flex-1 px-6 pb-10 pt-4">
            {/* The corner control sits in the 40px above the heading rather
                than absolutely over the content, which is where the card
                layout puts it. Same row every screen in the flow leaves for a
                back control, so the headings all land in the same place. */}
            <View className="mb-4 h-10 flex-row items-center">{corner}</View>

            <Heading
              className="text-3xl"
              numberOfLines={1}
              adjustsFontSizeToFit
              minimumFontScale={0.7}
            >
              {title}
            </Heading>
            {subtitle ? (
              <MutedText className="mt-2 text-base leading-6">{subtitle}</MutedText>
            ) : null}

            <View className="flex-1 pt-6">{children}</View>
            {footer ? <View className="gap-2 pt-6">{footer}</View> : null}
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }

  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"
      >
        {corner ? <View className="absolute left-6 top-4 mt-4 self-start">{corner}</View> : null}

        <Card className="w-full" style={{ maxWidth }}>
          <CardHeader className="items-center">
            {icon}
            <CardTitle className="text-center text-2xl">{title}</CardTitle>
            {subtitle ? (
              <CardDescription className="text-center text-base">{subtitle}</CardDescription>
            ) : null}
          </CardHeader>

          <CardContent className="gap-4 pb-3">{children}</CardContent>

          {footer ? (
            <CardFooter className="flex-col items-stretch gap-1 border-t-0 pt-0">
              {footer}
            </CardFooter>
          ) : null}
        </Card>
      </ScrollView>
    </SafeAreaView>
  );
}

export default AuthPage;