import { Building2, Fingerprint } from "lucide-react"
import { useState } from "react"
import { AuthPage } from "@/components/ui/auth-page"
import { Button } from "@/components/ui/button"
import { SignInForm } from "@/components/ui/sign-in-form"
import { SignUpForm } from "@/components/ui/sign-up-form"

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

const providers = [
  { id: "passkey", label: "a passkey", icon: <Fingerprint aria-hidden="true" />, onClick: () => undefined },
  { id: "sso", label: "SSO", icon: <Building2 aria-hidden="true" />, onClick: () => undefined },
];

function Brand() {
  return (
    <span className="flex items-center gap-2 text-sm font-semibold tracking-tight">
      <span aria-hidden="true" className="grid size-7 place-items-center rounded-surface bg-foreground text-xs text-background">R</span>
      Caliper UI
    </span>
  );
}

export function AuthPageDemo() {
  const [view, setView] = useState<"in" | "up">("in");
  const [done, setDone] = useState<string | null>(null);
  return (
    <AuthPage brand={<Brand />} footer={<span>By continuing you accept the Terms and Privacy Policy.</span>}>
              {done ? (
                <div className="grid gap-4 text-center" role="status">
                  <h2 className="text-lg font-semibold">{done}</h2>
                  <p className="text-sm text-muted-foreground">This is where the app would take you next.</p>
                  <Button variant="secondary" onClick={() => setDone(null)}>Back to the form</Button>
                </div>
              ) : view === "in" ? (
                <SignInForm
                  description="Welcome back. Enter your details to continue."
                  providers={providers}
                  onForgot={() => undefined}
                  signUp={{ onClick: () => setView("up") }}
                  onSubmit={async ({ email }) => {
                    await wait(900);
                    if (email === "locked@example.com") throw new Error("This account is locked. Ask an admin to unlock it.");
                    if (email === "taken@example.com") return { fields: { password: "That password is not right. Try again or reset it." } };
                    setDone("You are signed in");
                  }}
                />
              ) : (
                <SignUpForm
                  description="Free for small teams. No card needed."
                  providers={providers}
                  signIn={{ onClick: () => setView("in") }}
                  onSubmit={async ({ email }) => {
                    await wait(1000);
                    if (email === "taken@example.com") return { fields: { email: "An account with this email already exists." } };
                    setDone("Check your inbox");
                  }}
                />
              )}
            </AuthPage>
  );
}