Workspace Picker Login Form

"use client";

import * as React from "react";
import { WorkspacePickerLogin } from "@/components/ui/workspace-picker-login";
import type { Workspace, WorkspaceStatus } from "@/components/ui/workspace-picker-login";

const EMAIL = "maria@acme.com";
export const DEMO_WORKSPACES: Workspace[] = [
  { id: "acme", name: "Acme Design", address: "acme.workspace.com", members: 48, method: "sso", tone: 1 },
  { id: "northwind", name: "Northwind Labs", address: "northwind.workspace.com", members: 12, lastUsed: "2d ago", method: "passkey", tone: 2 },
  { id: "personal", name: "Maria's Notes", address: "maria.workspace.com", members: 1, method: "password", tone: 4 },
];

type DemoProps = { autoplay?: boolean; bare?: boolean };
type DemoState = { status: WorkspaceStatus; email: string; workspaces: Workspace[]; selected: string | null; welcome?: string };
const initial = (): DemoState => ({ status: "idle", email: "", workspaces: [], selected: null });

export default function WorkspacePickerDemo({ autoplay = true, bare = false }: DemoProps) {
  const [state, setState] = React.useState(initial);
  const [motion, setMotion] = React.useState({ ready: false, reduced: true });
  const [run, setRun] = React.useState({ id: 0, auto: true });
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
    const update = () => setMotion({ ready: true, reduced: media.matches });
    update();
    media.addEventListener("change", update);
    return () => media.removeEventListener("change", update);
  }, []);

  React.useEffect(() => {
    if (!motion.ready || !run.auto || !autoplay || motion.reduced || paused) return;
    const timers: number[] = [];
    const later = (ms: number, callback: () => void) => timers.push(window.setTimeout(callback, ms));
    setState(initial());
    for (let index = 1; index <= EMAIL.length; index += 1) later(400 + (index / EMAIL.length) * 1000, () => setState((previous) => ({ ...previous, email: EMAIL.slice(0, index) })));
    later(1700, () => setState((previous) => ({ ...previous, status: "looking" })));
    later(2400, () => setState((previous) => ({ ...previous, status: "ready", workspaces: DEMO_WORKSPACES })));
    later(4000, () => setState((previous) => ({ ...previous, selected: "northwind" })));
    later(5400, () => setState((previous) => ({ ...previous, status: "continuing" })));
    later(6100, () => setState((previous) => ({ ...previous, status: "done", welcome: "Welcome back, Maria" })));
    later(7600, () => setRun((previous) => ({ ...previous, id: previous.id + 1 })));
    return () => timers.forEach((timer) => window.clearTimeout(timer));
  }, [motion.ready, motion.reduced, autoplay, paused, run]);

  const takeOver = () => { setPaused(true); setRun((previous) => ({ ...previous, auto: false })); };

  return (
    <main className="flex min-h-svh w-full flex-col items-center justify-center gap-3 bg-background px-4 py-4 text-foreground">
      {!bare && <div className="flex w-full max-w-[400px] items-center justify-between px-1 text-[9px] font-medium uppercase tracking-[0.18em] text-muted-foreground"><span>One email · every workspace</span><span>Sample data</span></div>}
      <WorkspacePickerLogin
        appName="Workspace"
        email={state.email}
        onEmailChange={(email) => { takeOver(); setState((previous) => ({ ...previous, email })); }}
        status={state.status}
        workspaces={state.workspaces}
        selected={state.selected}
        onSelect={(selected) => { takeOver(); setState((previous) => ({ ...previous, selected })); }}
        onLookup={(email) => {
          takeOver();
          setState((previous) => ({ ...previous, email, status: "looking" }));
          window.setTimeout(() => setState((previous) => ({ ...previous, status: "ready", workspaces: email === EMAIL ? DEMO_WORKSPACES : [{ id: "personal", name: `${email.split("@")[0]}'s space`, members: 1, method: "password", tone: 3 }] })), 700);
        }}
        onContinue={(workspace) => {
          takeOver();
          setState((previous) => ({ ...previous, status: "continuing" }));
          window.setTimeout(() => setState((previous) => ({ ...previous, status: "done", welcome: `Welcome back to ${workspace.name}` })), 700);
        }}
        onChangeEmail={() => { takeOver(); setState(initial()); }}
        onCreateWorkspace={() => takeOver()}
        welcome={state.welcome}
        footer={<span>Sign in once. Switch workspaces any time.</span>}
      />
      {!bare && (
        <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
          <span>{run.auto && !paused ? "Interactive preview" : "Try your own email"}</span>
          <span aria-hidden="true">·</span>
          <button type="button" data-replay onClick={() => { setPaused(false); setRun((previous) => ({ id: previous.id + 1, auto: true })); }} className="rounded px-1 underline decoration-border underline-offset-4 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Replay</button>
        </div>
      )}
    </main>
  );
}