Workspace admin

"use client";
import * as React from "react";
import {
  type AdminDomain,
  type AdminInvite,
  type AdminMember,
  type WorkspaceAdminAdapter,
  WorkspaceAdmin,
} from "@/components/ui/notchset/blocks/workspace-admin";
import type { InviteLink } from "@/components/ui/notchset/blocks/invite-dialog";

const ROLES = [
  { value: "owner", label: "Owner", invitable: false },
  {
    value: "admin",
    label: "Admin",
    hint: "Admins manage members, roles and billing.",
  },
  {
    value: "member",
    label: "Member",
    hint: "Members see every company, deal and report. They can’t change billing or roles.",
  },
  {
    value: "guest",
    label: "Guest",
    hint: "Guests see only the records they’re added to.",
  },
];

/* The demo's own adapter: it keeps the lists in state, as a host keeps them in its store and hands each call on. */
export default function WorkspaceAdminDemo() {
  const [members, setMembers] = React.useState<AdminMember[]>([
    {
      id: "ml",
      name: "Maya Lindqvist",
      email: "maya@notchset.com",
      role: "owner",
      seen: "Now",
      you: true,
      hue: 3,
    },
    {
      id: "jb",
      name: "Jonas Berg",
      email: "jonas@notchset.com",
      role: "admin",
      seen: "2 hours ago",
      hue: 1,
    },
    {
      id: "pr",
      name: "Priya Raman",
      email: "priya@notchset.com",
      role: "member",
      seen: "Today",
      hue: 4,
    },
    {
      id: "to",
      name: "Theo Okafor",
      email: "theo@notchset.com",
      role: "member",
      seen: "Yesterday",
      hue: 2,
    },
    {
      id: "id",
      name: "Ines Duarte",
      email: "ines@notchset.com",
      role: "member",
      seen: "3 days ago",
      hue: 5,
    },
    {
      id: "km",
      name: "Kofi Mensah",
      email: "kofi@notchset.com",
      role: "member",
      seen: "Last week",
      hue: 1,
    },
    {
      id: "sw",
      name: "Sam Whitfield",
      email: "sam@haldenstudio.co",
      role: "guest",
      seen: "Today",
      sees: "2 companies",
      hue: 2,
    },
  ]);
  const [invites, setInvites] = React.useState<AdminInvite[]>([
    {
      id: "i1",
      email: "lena@notchset.com",
      role: "member",
      sent: "Jonas · 2 days ago",
      expires: "in 5 days",
    },
    {
      id: "i2",
      email: "rui@northwind.io",
      role: "guest",
      sent: "Maya · 9 days ago",
      expires: "2 days ago",
      expired: true,
    },
  ]);
  const [domains, setDomains] = React.useState<AdminDomain[]>([
    {
      domain: "notchset.com",
      role: "member",
      note: "Verified 12 Mar · 6 people joined this way",
    },
  ]);
  const [link, setLink] = React.useState<InviteLink | null>({
    url: "notchset.app/join/7Hq2-xK9p",
    role: "member",
    expires: "7d",
    uses: 0,
  });
  const adapter: WorkspaceAdminAdapter = {
    setRole: (ids, role) =>
      setMembers((ms) =>
        ms.map((m) => (ids.includes(m.id) ? { ...m, role } : m)),
      ),
    invite: ({ emails, role }) =>
      setInvites((is) => [
        ...is,
        ...emails.map((email, n) => ({
          id: `n${is.length + n}`,
          email,
          role,
          sent: "you · just now",
          expires: "in 7 days",
        })),
      ]),
    resendInvite: (id) =>
      setInvites((is) =>
        is.map((i) =>
          i.id === id
            ? {
                ...i,
                expired: false,
                expires: "in 7 days",
                sent: "you · just now",
              }
            : i,
        ),
      ),
    revokeInvite: (id) => setInvites((is) => is.filter((i) => i.id !== id)),
    deactivate: (id) =>
      setMembers((ms) =>
        ms.map((m) => (m.id === id ? { ...m, deactivated: true } : m)),
      ),
    reactivate: (id) =>
      setMembers((ms) =>
        ms.map((m) => (m.id === id ? { ...m, deactivated: false } : m)),
      ),
    setLink: ({ role, expires }) =>
      setLink((l) => ({
        url: l?.url ?? "notchset.app/join/Rm4t-8bQz",
        role,
        expires,
        uses: l?.uses ?? 0,
      })),
    revokeLink: () => setLink(null),
    addDomain: ({ domain, role }) =>
      setDomains((ds) => [...ds, { domain, role, note: "Added just now" }]),
    removeDomain: (domain) =>
      setDomains((ds) => ds.filter((d) => d.domain !== domain)),
    setDomainRole: (domain, role) =>
      setDomains((ds) =>
        ds.map((d) => (d.domain === domain ? { ...d, role } : d)),
      ),
  };
  const used =
    members.filter((m) => !m.deactivated).length +
    invites.filter((i) => !i.expired).length;
  return (
    <div className="w-full max-w-[880px]">
      <WorkspaceAdmin
        workspace="Notchset"
        roles={ROLES}
        members={members}
        invites={invites}
        domains={domains}
        link={link}
        adapter={adapter}
        seats={{ used, total: 10, plan: "Team" }}
        guestsSee="Guests see only the companies and deals they’re added to, and never Reports or Settings."
      />
    </div>
  );
}