1"use client";
2
3import { Alert, Button, Card, Input, RenderIcon, Tabs } from "@versable-git/ui";
4import { useState } from "react";
5
6// Both apps independently built this shell under two different names, no
7// shared source: a centered fixed-width Card, a stacked brand mark, an h1
8// title, an optional subtitle, then the screen's own content (speedway's
9// AuthCard.tsx:8-38, walmart's AuthShell in Login.tsx:98-113). The Tabs knob
10// switches one shell through its four real states.
11type View = "signin" | "error" | "pending" | "no-access";
12
13const COPY: Record<View, { title: string; subtitle: string }> = {
14  signin: { title: "Sign in", subtitle: "Use the email and password for your account" },
15  error: { title: "Sign in", subtitle: "Use the email and password for your account" },
16  pending: { title: "Sign in", subtitle: "Use the email and password for your account" },
17  "no-access": {
18    title: "You're not in an org yet",
19    subtitle: "Your account isn't a member of any organization. Ask your team owner to add you.",
20  },
21};
22
23export function AuthCardShell() {
24  const [view, setView] = useState<View>("signin");
25  const { title, subtitle } = COPY[view];
26  const pending = view === "pending";
27
28  return (
29    <div className="flex flex-col gap-3">
30      <Tabs
31        size="sm"
32        value={view}
33        onChange={(v) => setView(v as View)}
34        items={[
35          { value: "signin", label: "Sign in" },
36          { value: "error", label: "Error" },
37          { value: "pending", label: "Pending" },
38          { value: "no-access", label: "No access" },
39        ]}
40      />
41      <div className="bg-base-200 rounded-box flex justify-center p-8">
42        {/* Card + centered max-w-md + stacked brand mark, the shell both
43            AuthCard and AuthShell converge on. */}
44        <Card className="w-full max-w-md" noAnimate>
45          <div className="mb-2 flex flex-col items-center gap-2">
46            <span className="bg-primary/10 text-primary grid size-9 place-items-center rounded-lg">
47              <RenderIcon Icon="Sparkle" size={18} />
48            </span>
49            <span className="text-base-content/70 text-xs font-semibold tracking-wide uppercase">Versable</span>
50          </div>
51          <h1 className="text-center text-2xl font-semibold">{title}</h1>
52          <h3 className="text-base-content/65 mt-1 mb-4 text-center text-sm">{subtitle}</h3>
53
54          {view === "no-access" ? (
55            // No color at all marks a dead-end/exit action (canon doc 2 §A2),
56            // the same shape as speedway's no-access.tsx:17-19.
57            <div className="flex justify-center">
58              <Button type="button" Icon="SignOut">
59                Sign out
60              </Button>
61            </div>
62          ) : (
63            <form className="flex flex-col gap-4" onSubmit={(e) => e.preventDefault()}>
64              {/* fullWidth belongs to signed-out auth screens only (canon doc 2 §A3). */}
65              <Input top="Email" type="email" autoComplete="username" readOnly={pending} fullWidth />
66              <Input top="Password" type="password" autoComplete="current-password" readOnly={pending} fullWidth />
67              {view === "error" && <Alert tone="error">Incorrect email or password.</Alert>}
68              <Button type="submit" color="primary" Icon="RightArrow" iconRight loading={pending} fullWidth>
69                Sign in
70              </Button>
71              <p className="text-base-content/65 text-center text-sm">Forgot your password?</p>
72            </form>
73          )}
74        </Card>
75      </div>
76    </div>
77  );
78}
79