1"use client";
2
3import type { IconKeys } from "@versable-git/ui";
4import { Button, Dropdown, IdentityRow, RenderIcon, StatusPill, Tabs } from "@versable-git/ui";
5import { useEffect, useState } from "react";
6
7// The two live shapes converge here: speedway's initials-disc trigger with a
8// name/role block (AccountMenu.tsx:41-71) and walmart's IdentityRow already
9// doing double duty as trigger content (App.tsx:204-213). This fixture reuses
10// IdentityRow both places, once compact in the trigger and once full-size as
11// the panel header, the way neither app quite does on its own.
12type View = "closed" | "open" | "staff" | "signed-out";
13
14const VIEWS: { value: View; label: string }[] = [
15  { value: "closed", label: "Closed" },
16  { value: "open", label: "Open" },
17  { value: "staff", label: "Staff" },
18  { value: "signed-out", label: "Signed out" },
19];
20
21const member = {
22  name: "Priya Raman",
23  email: "priya@versable.ai",
24  role: "Owner",
25  workspace: "Speedway Motors",
26  initials: "PR",
27};
28
29const staff = {
30  name: "Dev Ops",
31  email: "dev@versable-internal.ai",
32  role: "Staff",
33  workspace: "Internal",
34  initials: "DO",
35};
36
37function MenuLink({ Icon, label }: { Icon: IconKeys; label: string }) {
38  return (
39    <button
40      type="button"
41      className="hover:bg-base-200 rounded-field flex items-center gap-2.5 px-2.5 py-2 text-left text-sm transition-colors"
42    >
43      <RenderIcon Icon={Icon} size={14} className="text-base-content/45" />
44      {label}
45    </button>
46  );
47}
48
49export function AccountMenu() {
50  const [view, setView] = useState<View>("closed");
51  const [open, setOpen] = useState(false);
52
53  // The dropdown's own open state is real (click the trigger). Switching the
54  // fixture's view just forces it to match what that view is meant to show.
55  useEffect(() => {
56    setOpen(view === "open" || view === "staff");
57  }, [view]);
58
59  const user = view === "staff" ? staff : member;
60  const isStaff = view === "staff";
61
62  return (
63    <div className="flex flex-col gap-4">
64      <Tabs size="sm" value={view} onChange={(v) => setView(v as View)} items={VIEWS} />
65
66      {view === "signed-out" ? (
67        <div className="border-base-300 rounded-field flex items-center gap-2.5 border border-dashed px-3 py-2">
68          <span className="bg-base-300 flex size-7 shrink-0 items-center justify-center rounded-full">
69            <RenderIcon Icon="User" size={13} className="text-base-content/45" />
70          </span>
71          <span className="text-base-content/65 text-sm">Not signed in</span>
72          <Button size="xs" variant="text" shade color="primary" className="ml-auto">
73            Sign in
74          </Button>
75        </div>
76      ) : (
77        <Dropdown
78          open={open}
79          setOpen={setOpen}
80          placement="bottom-start"
81          button={
82            <button
83              type="button"
84              className="hover:bg-base-200 rounded-field flex w-fit cursor-pointer items-center gap-1 py-1 pr-2 pl-1 transition-colors"
85            >
86              <IdentityRow avatar={user.initials} title={user.name} subtitle={user.role} size="sm" />
87              <RenderIcon Icon="Down" size={12} className="text-base-content/45" />
88            </button>
89          }
90        >
91          <div className="bg-base-100 border-base-300 rounded-field flex w-56 flex-col border p-1.5 shadow-(--shadow-md)">
92            <IdentityRow avatar={user.initials} title={user.name} subtitle={user.email} />
93            <div className="px-2.5 py-1">
94              <StatusPill kind="neutral" size="sm">
95                {user.workspace}
96              </StatusPill>
97            </div>
98            <div className="border-base-300 my-1 border-t" />
99            <MenuLink Icon="User" label="Account" />
100            <MenuLink Icon="Settings" label="Settings" />
101            {isStaff && <MenuLink Icon="Admin" label="Admin" />}
102            <div className="border-base-300 my-1 border-t" />
103            {/* No color at all marks a dead-end/exit action (design-language doc 2, §A2.2). */}
104            <button
105              type="button"
106              className="hover:bg-base-200 rounded-field text-base-content/70 flex items-center gap-2.5 px-2.5 py-2 text-left text-sm transition-colors"
107            >
108              <RenderIcon Icon="SignOut" size={14} className="text-base-content/45" />
109              Sign out
110            </button>
111          </div>
112        </Dropdown>
113      )}
114    </div>
115  );
116}
117