"use client";

import { type HTMLMotionProps, motion, type Variants } from "motion/react";
import type { SVGProps } from "react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

// ---------------------------------------------------------------------------
// Animation variants (matching hero-vite vocabulary)
// ---------------------------------------------------------------------------

const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.07,
      delayChildren: 0.12,
    },
  },
};

const itemVariants: Variants = {
  hidden: {
    opacity: 0,
    y: 16,
    filter: "blur(6px)",
  },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: {
      duration: 0.5,
      ease: [0.25, 0.4, 0.25, 1],
    },
  },
};

const cardVariants: Variants = {
  hidden: { opacity: 0, y: 24, scale: 0.98 },
  visible: {
    opacity: 1,
    y: 0,
    scale: 1,
    transition: {
      duration: 0.6,
      ease: [0.25, 0.4, 0.25, 1],
    },
  },
};

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

export interface AuthViteOAuthProvider {
  name: string;
  icon: React.ComponentType<SVGProps<SVGSVGElement>>;
  onClick?: () => void;
}

export interface AuthViteRootProps extends Omit<React.ComponentPropsWithoutRef<"div">, "title" | "onSubmit"> {
  mode?: "signin" | "signup";
  onModeChange?: (mode: "signin" | "signup") => void;
  title?: React.ReactNode;
  subtitle?: React.ReactNode;
  oauthProviders?: AuthViteOAuthProvider[];
  showOAuth?: boolean;
  showDivider?: boolean;
  onSubmit?: (data: { email: string; password: string; name?: string }) => void;
  submitLabel?: string;
  footerText?: React.ReactNode;
  footerLinkText?: string;
  footerLinkHref?: string;
  termsText?: React.ReactNode;
}

// ---------------------------------------------------------------------------
// Context
// ---------------------------------------------------------------------------

interface AuthViteContextValue {
  mode: "signin" | "signup";
  setMode: (mode: "signin" | "signup") => void;
  title: React.ReactNode;
  subtitle: React.ReactNode;
  oauthProviders: AuthViteOAuthProvider[];
  showOAuth: boolean;
  showDivider: boolean;
  onSubmit?: (data: { email: string; password: string; name?: string }) => void;
  submitLabel: string;
  footerText: React.ReactNode;
  footerLinkText: string;
  footerLinkHref: string;
  termsText: React.ReactNode;
}

const AuthViteContext = React.createContext<AuthViteContextValue | undefined>(undefined);

function useAuthViteContext() {
  const ctx = React.useContext(AuthViteContext);
  if (!ctx) {
    throw new Error("AuthVite components must be used within AuthViteRoot");
  }
  return ctx;
}

export function useAuthVite() {
  return useAuthViteContext();
}

// ---------------------------------------------------------------------------
// Defaults
// ---------------------------------------------------------------------------

const VITE_COLORS = ["#ed40b3", "#6ef7cc", "#adfa1e", "#b054de"] as const;

const defaultOAuthProviders: AuthViteOAuthProvider[] = [
  { name: "GitHub", icon: GitHubIcon },
  { name: "Google", icon: GoogleIcon },
];

// ---------------------------------------------------------------------------
// Root
// ---------------------------------------------------------------------------

export const AuthViteRoot = React.forwardRef<HTMLDivElement, AuthViteRootProps>(
  (
    {
      className,
      children,
      mode: controlledMode,
      onModeChange,
      title,
      subtitle,
      oauthProviders = defaultOAuthProviders,
      showOAuth = true,
      showDivider = true,
      onSubmit,
      submitLabel,
      footerText,
      footerLinkText,
      footerLinkHref,
      termsText,
      ...props
    },
    ref
  ) => {
    const [internalMode, setInternalMode] = React.useState<"signin" | "signup">(controlledMode ?? "signin");
    const mode = controlledMode ?? internalMode;
    const setMode = React.useCallback(
      (next: "signin" | "signup") => {
        onModeChange?.(next);
        setInternalMode(next);
      },
      [onModeChange]
    );

    const resolvedTitle = title ?? (mode === "signin" ? "Welcome back" : "Create an account");
    const resolvedSubtitle = subtitle ?? (mode === "signin" ? "Sign in to your account" : "Get started for free");
    const resolvedSubmitLabel = submitLabel ?? (mode === "signin" ? "Sign in" : "Create account");
    const resolvedFooterText =
      footerText ?? (mode === "signin" ? "Don\u2019t have an account?" : "Already have an account?");
    const resolvedFooterLinkText = footerLinkText ?? (mode === "signin" ? "Sign up" : "Sign in");
    const resolvedFooterLinkHref = footerLinkHref ?? "#";
    const resolvedTermsText = termsText ?? (
      <>
        By continuing, you agree to our{" "}
        <a className="underline underline-offset-2 hover:text-foreground" href="#">
          Terms
        </a>{" "}
        and{" "}
        <a className="underline underline-offset-2 hover:text-foreground" href="#">
          Privacy Policy
        </a>
        .
      </>
    );

    const contextValue = React.useMemo<AuthViteContextValue>(
      () => ({
        mode,
        setMode,
        title: resolvedTitle,
        subtitle: resolvedSubtitle,
        oauthProviders,
        showOAuth,
        showDivider,
        onSubmit,
        submitLabel: resolvedSubmitLabel,
        footerText: resolvedFooterText,
        footerLinkText: resolvedFooterLinkText,
        footerLinkHref: resolvedFooterLinkHref,
        termsText: resolvedTermsText,
      }),
      [
        mode,
        setMode,
        resolvedTitle,
        resolvedSubtitle,
        oauthProviders,
        showOAuth,
        showDivider,
        onSubmit,
        resolvedSubmitLabel,
        resolvedFooterText,
        resolvedFooterLinkText,
        resolvedFooterLinkHref,
        resolvedTermsText,
      ]
    );

    return (
      <AuthViteContext.Provider value={contextValue}>
        <div
          className={cn(
            "relative flex min-h-svh w-full items-center justify-center overflow-hidden px-4 py-12",
            className
          )}
          data-slot="auth-vite-root"
          ref={ref}
          {...props}
        >
          {children}
        </div>
      </AuthViteContext.Provider>
    );
  }
);
AuthViteRoot.displayName = "AuthViteRoot";

// ---------------------------------------------------------------------------
// Background
// ---------------------------------------------------------------------------

export function AuthViteBackground({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
  return (
    <div
      className={cn("-z-10 pointer-events-none absolute inset-0 overflow-hidden", className)}
      data-slot="auth-vite-background"
      {...props}
    >
      <div
        className="-top-1/3 absolute right-0 h-[600px] w-[600px] rounded-full opacity-20 blur-[120px]"
        style={{ background: `radial-gradient(circle, ${VITE_COLORS[0]} 0%, transparent 70%)` }}
      />
      <div
        className="-left-1/4 -bottom-1/4 absolute h-[500px] w-[500px] rounded-full opacity-15 blur-[100px]"
        style={{ background: `radial-gradient(circle, ${VITE_COLORS[3]} 0%, transparent 70%)` }}
      />
      <div
        className="absolute top-1/2 left-1/3 h-[300px] w-[300px] rounded-full opacity-10 blur-[80px]"
        style={{ background: `radial-gradient(circle, ${VITE_COLORS[1]} 0%, transparent 70%)` }}
      />
    </div>
  );
}

// ---------------------------------------------------------------------------
// Card
// ---------------------------------------------------------------------------

export function AuthViteCard({ className, children, ...props }: HTMLMotionProps<"div">) {
  const context = useAuthViteContext();

  return (
    <motion.div
      animate="visible"
      className={cn(
        "relative w-full max-w-[420px] overflow-hidden rounded-2xl bg-card p-8 sm:p-10",
        "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_2px_4px_-1px_rgba(0,0,0,0.08),0px_8px_24px_-4px_rgba(0,0,0,0.08),0px_20px_48px_-12px_rgba(0,0,0,0.08)]",
        "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.06),0px_2px_4px_-1px_rgba(255,255,255,0.04),0px_8px_24px_-4px_rgba(0,0,0,0.35),0px_24px_56px_-14px_rgba(0,0,0,0.5)]",
        className
      )}
      data-slot="auth-vite-card"
      initial="hidden"
      variants={cardVariants}
      {...props}
    >
      <motion.div
        animate="visible"
        className="flex flex-col gap-6"
        initial="hidden"
        key={context.mode}
        variants={containerVariants}
      >
        {children}
      </motion.div>
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// Header
// ---------------------------------------------------------------------------

export interface AuthViteHeaderProps extends Omit<HTMLMotionProps<"div">, "title"> {
  title?: React.ReactNode;
  subtitle?: React.ReactNode;
}

export function AuthViteHeader({ className, title, subtitle, ...props }: AuthViteHeaderProps) {
  const context = useAuthViteContext();
  const resolvedTitle = title ?? context.title;
  const resolvedSubtitle = subtitle ?? context.subtitle;

  return (
    <motion.div
      className={cn("flex flex-col gap-1.5 text-center", className)}
      data-slot="auth-vite-header"
      variants={itemVariants}
      {...props}
    >
      <h1 className="text-balance font-medium text-2xl tracking-[-0.04em] sm:text-3xl">{resolvedTitle}</h1>
      <p className="text-muted-foreground text-sm sm:text-base">{resolvedSubtitle}</p>
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// OAuth Providers
// ---------------------------------------------------------------------------

export interface AuthViteOAuthProps extends HTMLMotionProps<"div"> {
  providers?: AuthViteOAuthProvider[];
}

export function AuthViteOAuth({ className, providers, ...props }: AuthViteOAuthProps) {
  const context = useAuthViteContext();
  const resolvedProviders = providers ?? context.oauthProviders;

  if (!context.showOAuth) {
    return null;
  }

  return (
    <motion.div
      className={cn("flex flex-col gap-2.5", className)}
      data-slot="auth-vite-oauth"
      variants={itemVariants}
      {...props}
    >
      {resolvedProviders.map((provider) => {
        const Icon = provider.icon;
        return (
          <Button
            className={cn(
              "relative h-11 w-full gap-2.5 font-medium transition-shadow duration-200",
              "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_2px_4px_-1px_rgba(0,0,0,0.06),0px_8px_20px_-6px_rgba(0,0,0,0.07)]",
              "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.06),0px_2px_4px_-1px_rgba(255,255,255,0.04),0px_8px_20px_-6px_rgba(0,0,0,0.3)]",
              "hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_4px_6px_-1px_rgba(0,0,0,0.09),0px_12px_28px_-6px_rgba(0,0,0,0.1)]",
              "dark:hover:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1),0px_4px_6px_-1px_rgba(255,255,255,0.05),0px_12px_28px_-6px_rgba(0,0,0,0.4)]"
            )}
            key={provider.name}
            onClick={provider.onClick}
            type="button"
            variant="outline"
          >
            <Icon className="size-4" />
            Continue with {provider.name}
          </Button>
        );
      })}
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// Divider
// ---------------------------------------------------------------------------

export function AuthViteDivider({ className, ...props }: HTMLMotionProps<"div">) {
  const context = useAuthViteContext();

  if (!context.showDivider) {
    return null;
  }

  return (
    <motion.div
      className={cn("relative flex items-center", className)}
      data-slot="auth-vite-divider"
      variants={itemVariants}
      {...props}
    >
      <div className="flex-1 border-border border-t" />
      <span className="px-3 font-mono text-muted-foreground text-xs uppercase tracking-wider">or</span>
      <div className="flex-1 border-border border-t" />
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// Form
// ---------------------------------------------------------------------------

export interface AuthViteFormProps extends Omit<HTMLMotionProps<"form">, "onSubmit"> {
  onSubmit?: (data: { email: string; password: string; name?: string }) => void;
  submitLabel?: string;
}

export function AuthViteForm({ className, onSubmit, submitLabel, ...props }: AuthViteFormProps) {
  const context = useAuthViteContext();
  const resolvedSubmitLabel = submitLabel ?? context.submitLabel;
  const resolvedOnSubmit = onSubmit ?? context.onSubmit;

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = new FormData(e.currentTarget);
    resolvedOnSubmit?.({
      email: form.get("email") as string,
      password: form.get("password") as string,
      name: form.get("name") as string | undefined,
    });
  };

  return (
    <motion.form
      className={cn("flex flex-col gap-4", className)}
      data-slot="auth-vite-form"
      onSubmit={handleSubmit}
      variants={itemVariants}
      {...props}
    >
      {context.mode === "signup" && (
        <div className="flex flex-col gap-2">
          <Label className="text-sm" htmlFor="auth-name">
            Name
          </Label>
          <Input autoComplete="name" className="h-11" id="auth-name" name="name" placeholder="Your name" type="text" />
        </div>
      )}

      <div className="flex flex-col gap-2">
        <Label className="text-sm" htmlFor="auth-email">
          Email
        </Label>
        <Input
          autoComplete="email"
          className="h-11"
          id="auth-email"
          name="email"
          placeholder="you@example.com"
          required
          type="email"
        />
      </div>

      <div className="flex flex-col gap-2">
        <div className="flex items-center justify-between">
          <Label className="text-sm" htmlFor="auth-password">
            Password
          </Label>
          {context.mode === "signin" && (
            <a
              className="text-muted-foreground text-xs underline-offset-2 hover:text-foreground hover:underline"
              href="#"
            >
              Forgot password?
            </a>
          )}
        </div>
        <Input
          autoComplete={context.mode === "signin" ? "current-password" : "new-password"}
          className="h-11"
          id="auth-password"
          minLength={8}
          name="password"
          placeholder="••••••••"
          required
          type="password"
        />
      </div>

      <Button className="mt-1 h-11 w-full font-medium" size="lg" type="submit">
        {resolvedSubmitLabel}
      </Button>
    </motion.form>
  );
}

// ---------------------------------------------------------------------------
// Footer
// ---------------------------------------------------------------------------

export interface AuthViteFooterProps extends HTMLMotionProps<"div"> {
  text?: React.ReactNode;
  linkText?: string;
  linkHref?: string;
  termsText?: React.ReactNode;
}

export function AuthViteFooter({ className, text, linkText, linkHref, termsText, ...props }: AuthViteFooterProps) {
  const context = useAuthViteContext();
  const resolvedText = text ?? context.footerText;
  const resolvedLinkText = linkText ?? context.footerLinkText;
  const resolvedTerms = termsText ?? context.termsText;

  return (
    <motion.div
      className={cn("flex flex-col gap-3 text-center", className)}
      data-slot="auth-vite-footer"
      variants={itemVariants}
      {...props}
    >
      <p className="text-muted-foreground text-sm">
        {resolvedText}{" "}
        <button
          className="font-medium text-foreground underline-offset-2 hover:underline"
          onClick={() => context.setMode(context.mode === "signin" ? "signup" : "signin")}
          type="button"
        >
          {resolvedLinkText}
        </button>
      </p>
      <p className="text-muted-foreground/70 text-xs leading-relaxed">{resolvedTerms}</p>
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// Composed shorthand
// ---------------------------------------------------------------------------

export interface AuthViteProps extends AuthViteRootProps {
  cardClassName?: string;
  showBackground?: boolean;
}

export function AuthVite({ cardClassName, showBackground = true, ...props }: AuthViteProps) {
  return (
    <AuthViteRoot {...props}>
      {showBackground && <AuthViteBackground />}
      <AuthViteCard className={cardClassName}>
        <AuthViteHeader />
        <AuthViteOAuth />
        <AuthViteDivider />
        <AuthViteForm />
        <AuthViteFooter />
      </AuthViteCard>
    </AuthViteRoot>
  );
}

// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------

function GitHubIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
      <title>GitHub</title>
      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
    </svg>
  );
}

function GoogleIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
      <title>Google</title>
      <path
        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
        fill="#4285F4"
      />
      <path
        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
        fill="#34A853"
      />
      <path
        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
        fill="#FBBC05"
      />
      <path
        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
        fill="#EA4335"
      />
    </svg>
  );
}

export default AuthVite;
Download Block

Add UI Components

Alternative Options

Download Block

Add UI Components

Alternative Options

Download Block

Add UI Components

Alternative Options

Download Block

Add UI Components

Alternative Options
