Modal dialogs

import * as React from "react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

import { DeleteProject } from "./modal-dialogs-01.client"
import { projectLoss } from "./modal-dialogs-01.data"

export type ModalDialogs01Props = {
  /** Opens the confirmation on the first render — for a preview; false when installed. */
  defaultOpen?: boolean
}

/**
 * A project's danger zone: one row that deletes the project, and the alert
 * it opens, which counts what goes with it before anything is removed.
 *
 * A server component: the counts come from `./modal-dialogs-01.data`.
 */
export function ModalDialogs01({ defaultOpen = false }: ModalDialogs01Props) {
  const titleId = React.useId()
  const project = projectLoss()
  return (
    <section
      data-section="modal-dialogs-01"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Danger zone</h2>
            </CardTitle>
            <CardDescription>
              Settings for {project.name} ({project.code}), led by {project.lead.name}.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <DeleteProject project={project} defaultOpen={defaultOpen} />
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default ModalDialogs01

"use client"

import * as React from "react"
import { Trash2Icon, Undo2Icon } from "lucide-react"

import { formatNumber } from "@/lib/format"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { AvatarGroup } from "@/components/ui/avatar-group"
import { Button } from "@/components/ui/button"

import type { ProjectLoss } from "./modal-dialogs-01.data"

const DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })
const count = (value: number, one: string, many = `${one}s`) => `${formatNumber(value)} ${value === 1 ? one : many}`

/**
 * The danger-zone row and the confirmation it opens. The alert says what goes
 * with the project, counted — its tasks and how many are still open, the
 * points estimated on them, the people who lose it from their boards, its
 * timeline — so the decision is made on what will be lost, not on a name.
 * Focus opens on Keep project, the safe answer; Escape and Keep close it and
 * hand focus back to the button that opened it. Deleting says so in the
 * row's status line and puts Undo where the button was, with focus on it.
 */
export function DeleteProject({ project, defaultOpen }: { project: ProjectLoss; defaultOpen: boolean }) {
  const [open, setOpen] = React.useState(defaultOpen)
  const [deleted, setDeleted] = React.useState(false)
  const [notice, setNotice] = React.useState("")
  const trigger = React.useRef<HTMLButtonElement>(null)
  const keep = React.useRef<HTMLButtonElement>(null)
  const undo = React.useRef<HTMLButtonElement>(null)
  // Read when the dialog finishes closing, which is after the render that swapped the buttons.
  const deletedNow = React.useRef(false)
  const refocus = React.useRef(false)

  React.useEffect(() => {
    if (deleted || !refocus.current) return
    refocus.current = false
    trigger.current?.focus()
  }, [deleted])

  function remove() {
    deletedNow.current = true
    setDeleted(true)
    setOpen(false)
    setNotice(`${project.name} was deleted with its ${count(project.tasks, "task")}.`)
  }

  function restore() {
    deletedNow.current = false
    refocus.current = true
    setDeleted(false)
    setNotice(`${project.name} is back, with everything in it.`)
  }

  return (
    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <div className="flex min-w-0 flex-col gap-0.5">
        <p className="text-sm font-medium">{deleted ? `${project.name} was deleted` : `Delete ${project.name}`}</p>
        <p className="text-sm text-pretty text-muted-foreground">
          {deleted
            ? "Its tasks, estimates and board are gone for everyone. Undo brings them back."
            : `Removes the project and everything in it for everyone: ${count(project.tasks, "task")}, ${formatNumber(project.points)} points of estimates and its board.`}
        </p>
        <p role="status" aria-live="polite" className="text-sm font-medium">
          {notice}
        </p>
      </div>
      <AlertDialog open={open} onOpenChange={setOpen}>
        {deleted ? (
          <Button ref={undo} variant="outline" onClick={restore} className="self-start sm:self-center">
            <Undo2Icon data-icon="inline-start" aria-hidden="true" />
            Undo
          </Button>
        ) : (
          <AlertDialogTrigger ref={trigger} render={<Button variant="destructive" className="self-start sm:self-center" />}>
            <Trash2Icon data-icon="inline-start" aria-hidden="true" />
            Delete project
          </AlertDialogTrigger>
        )}
        <AlertDialogContent
          initialFocus={keep}
          finalFocus={() => (deletedNow.current ? undo.current : trigger.current)}
          className="data-[size=default]:sm:max-w-md"
        >
          <AlertDialogHeader>
            <AlertDialogMedia className="bg-danger-muted text-danger">
              <Trash2Icon aria-hidden="true" />
            </AlertDialogMedia>
            <AlertDialogTitle>Delete {project.name}?</AlertDialogTitle>
            <AlertDialogDescription>Everyone loses it at once, with everything listed here.</AlertDialogDescription>
          </AlertDialogHeader>
          <dl className="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-4 gap-y-2.5 rounded-lg bg-surface p-3 text-sm ring-1 ring-border">
            <dt className="text-muted-foreground">Tasks</dt>
            <dd className="tabular-nums">
              {count(project.tasks, "task")}, {formatNumber(project.open)} still open
            </dd>
            <dt className="text-muted-foreground">Estimates</dt>
            <dd className="tabular-nums">{formatNumber(project.points)} points</dd>
            <dt className="text-muted-foreground">People</dt>
            <dd className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
              <AvatarGroup size="sm" max={3} users={project.people.map((person) => ({ name: person.name, src: person.avatarUrl }))} />
              <span className="tabular-nums">{count(project.people.length, "person", "people")} lose it</span>
            </dd>
            <dt className="text-muted-foreground">Timeline</dt>
            <dd className="tabular-nums">
              <time dateTime={project.startAt.toISOString()}>{DAY.format(project.startAt)}</time> to{" "}
              <time dateTime={project.endAt.toISOString()}>{DAY.format(project.endAt)}</time>
            </dd>
          </dl>
          <AlertDialogFooter>
            <AlertDialogCancel ref={keep}>Keep project</AlertDialogCancel>
            <AlertDialogAction variant="destructive" onClick={remove}>
              Delete project
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}

/**
 * What `modal-dialogs-01` reads: one project in `db.projects` and everything
 * deleting it would take with it — its tasks in `db.tasks`, the estimates on
 * them, and the people (`db.members`) who would lose it from their boards.
 *
 * Selectors only, reading `db` inside functions and run on the server. The
 * island takes the summary as props; it never imports this module.
 */
import { db } from "@/lib/sample-data"

/** The project the band offers to delete. */
export const PROJECT = "Edge caching"

export type Person = { name: string; avatarUrl?: string }

export type ProjectLoss = {
  name: string
  code: string
  startAt: Date
  endAt: Date
  tasks: number
  /** Tasks not yet done. */
  open: number
  /** The story points estimated across its tasks. */
  points: number
  lead: Person
  /** Everyone with a task on it, the lead first. */
  people: Person[]
}

/** What deleting the project would remove, counted from the store. */
export function projectLoss(): ProjectLoss {
  const project = db.projects.all().find((entry) => entry.name === PROJECT)
  if (!project) throw new Error(`modal-dialogs-01 deletes "${PROJECT}", which is not a project`)
  const members = new Map(db.members.all().map((member) => [member.id, member]))
  const tasks = db.tasks.all().filter((task) => task.projectId === project.id)
  const ids = [project.lead, ...tasks.map((task) => task.assignee).filter((id) => id !== project.lead)]
  const people = [...new Set(ids)]
    .map((id) => members.get(id))
    .filter((member) => member !== undefined)
    .map((member) => ({ name: member.name, avatarUrl: member.avatarUrl }))
  return {
    name: project.name,
    code: project.code,
    startAt: project.startAt,
    endAt: project.endAt,
    tasks: tasks.length,
    open: tasks.filter((task) => task.status !== "done").length,
    points: tasks.reduce((total, task) => total + task.points, 0),
    lead: people[0],
    people,
  }
}

import * as React from "react"

import { InviteMembers } from "./modal-dialogs-02.client"
import { inviteContext, inviteMembers, type InviteOutcome, type InviteRequest, type Result } from "./modal-dialogs-02.data"

export type ModalDialogs02Props = {
  /** Opens the invitation on the first render — for a preview; false when installed. */
  defaultOpen?: boolean
}

/**
 * The members card with an Invite people dialog: addresses, a role, and the
 * seats the plan has left.
 *
 * A server component. It reads the seats and roles through
 * `./modal-dialogs-02.data` and hands the island `sendInvites`, a server
 * function defined here, which checks every address against the store and
 * the plan before anyone is invited.
 */
export function ModalDialogs02({ defaultOpen = false }: ModalDialogs02Props) {
  const titleId = React.useId()

  async function sendInvites(request: InviteRequest): Promise<Result<InviteOutcome>> {
    "use server"
    return inviteMembers(request)
  }

  return (
    <section
      data-section="modal-dialogs-02"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <InviteMembers context={inviteContext()} onInvite={sendInvites} titleId={titleId} defaultOpen={defaultOpen} />
      </div>
    </section>
  )
}

export default ModalDialogs02

"use client"

import * as React from "react"
import { UserPlusIcon } from "lucide-react"

import { formatNumber } from "@/lib/format"
import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Field, FieldContent, FieldDescription, FieldLabel, FieldLegend, FieldSet, FieldTitle } from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Spinner } from "@/components/ui/spinner"
import { StatusBadge } from "@/components/ui/status-badge"
import { Textarea } from "@/components/ui/textarea"
import { UsageMeter } from "@/components/ui/usage-meter"
import { UserCell } from "@/components/ui/user-cell"

import type { InviteContext, InviteOutcome, InviteRequest, InviteRole, Invitee, Result } from "./modal-dialogs-02.data"

const DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" })
const people = (count: number) => `${formatNumber(count)} ${count === 1 ? "person" : "people"}`
const ROLE_NOUNS: Record<InviteRole, [string, string]> = { admin: ["an admin", "admins"], member: ["a member", "members"], viewer: ["a viewer", "viewers"] }

/** The addresses in what was typed: separated by commas, semicolons, spaces or new lines. */
export function addressesIn(text: string): string[] {
  return [...new Set(text.split(/[\s,;]+/).map((part) => part.trim().toLowerCase()).filter(Boolean))]
}

/**
 * The members card and its Invite people dialog. The dialog opens on the
 * address box; a role is a choice card; the seat meter shows what the plan
 * has left. Send goes to the section's server action, which invites every
 * address or none: a refusal stays in the dialog as a danger callout that
 * names each address and why, and the field keeps what was typed. A sent
 * invitation closes the dialog, returns focus to Invite people, and the
 * card's status line says who was invited and until when; the newcomers join
 * the list.
 */
export function InviteMembers({
  context,
  onInvite,
  titleId,
  defaultOpen,
}: {
  context: InviteContext
  onInvite: (request: InviteRequest) => Promise<Result<InviteOutcome>>
  titleId: string
  defaultOpen: boolean
}) {
  const [open, setOpen] = React.useState(defaultOpen)
  const [text, setText] = React.useState("")
  const [role, setRole] = React.useState<InviteRole>("member")
  const [refusal, setRefusal] = React.useState("")
  const [pending, setPending] = React.useState(false)
  const [notice, setNotice] = React.useState("")
  const [taken, setTaken] = React.useState(context.taken)
  const [recent, setRecent] = React.useState<Invitee[]>(context.recent)
  const field = React.useRef<HTMLTextAreaElement>(null)
  const trigger = React.useRef<HTMLButtonElement>(null)
  const ids = { emails: React.useId(), hint: React.useId(), refusal: React.useId(), role: React.useId() }

  const addresses = addressesIn(text)
  const left = context.seats - taken

  function change(next: boolean) {
    setOpen(next)
    if (next) return
    setRefusal("")
  }

  async function send(event: React.FormEvent) {
    event.preventDefault()
    if (pending) return
    setPending(true)
    setRefusal("")
    let result: Result<InviteOutcome>
    try {
      result = await onInvite({ emails: addresses, role })
    } catch {
      result = { ok: false, error: { code: "network", message: "The invitations did not reach the server. Try again." } }
    }
    setPending(false)
    if (!result.ok) {
      setRefusal(result.error.message)
      field.current?.focus()
      return
    }
    const { invited, expiresAt } = result.data
    const [one, many] = ROLE_NOUNS[role]
    setTaken(context.seats - result.data.seatsLeft)
    setRecent((current) => [...invited, ...current].slice(0, 5))
    setNotice(
      `Invited ${invited.length === 1 ? invited[0].email : people(invited.length)} as ${invited.length === 1 ? one : many}. The ${invited.length === 1 ? "link works" : "links work"} until ${DAY.format(expiresAt)}.`
    )
    setText("")
    setOpen(false)
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>
          <h2 id={titleId}>Members</h2>
        </CardTitle>
        <CardDescription className="tabular-nums">
          {taken} of {context.seats} seats on the {context.plan} plan are taken.
        </CardDescription>
        <CardAction>
          <Dialog open={open} onOpenChange={change}>
            <DialogTrigger ref={trigger} render={<Button size="sm" />}>
              <UserPlusIcon data-icon="inline-start" aria-hidden="true" />
              Invite people
            </DialogTrigger>
            <DialogContent initialFocus={field} finalFocus={trigger} className="sm:max-w-lg">
              <form onSubmit={send} className="flex flex-col gap-4" noValidate>
                <DialogHeader>
                  <DialogTitle>Invite people</DialogTitle>
                  <DialogDescription>They join Northwind when they accept. Each link works for a week.</DialogDescription>
                </DialogHeader>

                <div className="flex flex-col gap-2">
                  <label htmlFor={ids.emails} className="text-sm font-medium">
                    Email addresses
                  </label>
                  <Textarea
                    ref={field}
                    id={ids.emails}
                    value={text}
                    onChange={(event) => {
                      setText(event.target.value)
                      setRefusal("")
                    }}
                    rows={3}
                    placeholder="ana.lopez@example.com, kofi@example.com"
                    aria-invalid={refusal ? true : undefined}
                    aria-describedby={refusal ? `${ids.hint} ${ids.refusal}` : ids.hint}
                    className="resize-none"
                  />
                  <p id={ids.hint} className="text-xs text-muted-foreground">
                    Separate addresses with commas or new lines.
                  </p>
                </div>

                <FieldSet className="gap-2">
                  <FieldLegend id={ids.role} variant="label">
                    Role
                  </FieldLegend>
                  <RadioGroup aria-labelledby={ids.role} value={role} onValueChange={(value) => setRole(value as InviteRole)} className="gap-2">
                    {context.roles.map((option) => (
                      <FieldLabel key={option.value} htmlFor={`${ids.role}-${option.value}`}>
                        <Field orientation="horizontal">
                          <RadioGroupItem id={`${ids.role}-${option.value}`} value={option.value} aria-describedby={`${ids.role}-${option.value}-hint`} />
                          <FieldContent>
                            <FieldTitle>{option.label}</FieldTitle>
                            <FieldDescription id={`${ids.role}-${option.value}-hint`}>{option.description}</FieldDescription>
                          </FieldContent>
                        </Field>
                      </FieldLabel>
                    ))}
                  </RadioGroup>
                </FieldSet>

                <UsageMeter
                  size="sm"
                  label={`Seats on the ${context.plan} plan`}
                  used={taken}
                  limit={context.seats}
                  resetsAt={
                    addresses.length > 0
                      ? `${people(addresses.length)} to invite, ${Math.max(0, left - addresses.length)} ${left - addresses.length === 1 ? "seat" : "seats"} left after`
                      : `${left} ${left === 1 ? "seat" : "seats"} left`
                  }
                />

                {refusal ? (
                  <Callout id={ids.refusal} variant="danger" role="alert" title="No invitations were sent">
                    {refusal}
                  </Callout>
                ) : null}

                <DialogFooter>
                  <DialogClose render={<Button variant="outline" type="button" />}>Cancel</DialogClose>
                  <Button type="submit" aria-busy={pending || undefined}>
                    {pending ? <Spinner aria-hidden="true" data-icon="inline-start" /> : null}
                    {addresses.length > 1 ? `Send ${addresses.length} invitations` : "Send invitation"}
                  </Button>
                </DialogFooter>
              </form>
            </DialogContent>
          </Dialog>
        </CardAction>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <ul aria-label="Newest members" className="divide-y divide-border">
          {recent.map((person) => (
            <li key={person.email} className="flex items-center justify-between gap-3 py-2 first:pt-0 last:pb-0">
              <UserCell name={person.name} email={person.email} src={person.avatarUrl} className="min-w-0" />
              <span className="flex shrink-0 items-center gap-2 text-sm text-muted-foreground">
                <span className="hidden sm:inline">{person.role.charAt(0).toUpperCase() + person.role.slice(1)}</span>
                {person.status === "invited" ? <StatusBadge size="sm" status="invited" variant="info" label="Invited" /> : null}
              </span>
            </li>
          ))}
        </ul>
        <p role="status" aria-live="polite" className="text-sm font-medium">
          {notice}
        </p>
      </CardContent>
    </Card>
  )
}

/**
 * What `modal-dialogs-02` reads and the one thing it writes: the workspace's
 * seats — `seatUsage()`, the count every page shows — the
 * roles a newcomer can take from `db.roles`, and `inviteMembers`, which the
 * section's server action calls to add invited members.
 *
 * Every read happens inside a function and runs on the server. The island
 * takes the context as props and calls the action it is handed; it never
 * imports this module.
 */
import { avatarFor } from "@/lib/avatars"
import { REFERENCE_DATE, WORKSPACE_PLAN, db, fields, seatUsage, type Member, type Result } from "@/lib/sample-data"
import { isEmail } from "@/lib/validation"

export type { Result }

/** The plan the workspace is on. */
export const PLAN = WORKSPACE_PLAN

/** How long an invitation link works, in days. */
export const LINK_DAYS = 7

/** The most addresses one request carries: a team's worth. */
const MAX_INVITES = 50

export type InviteRole = Exclude<Member["role"], "owner">

export type Invitee = { name: string; email: string; avatarUrl?: string; role: Member["role"]; status: Member["status"] }

export type InviteContext = {
  plan: string
  seats: number
  /** Seats held: members who are in or yet to join, and open invitations. */
  taken: number
  roles: { value: InviteRole; label: string; description: string }[]
  /** The people who joined or were invited most recently. */
  recent: Invitee[]
}

export type InviteRequest = { emails: string[]; role: InviteRole }

export type InviteOutcome = { invited: Invitee[]; expiresAt: Date; seatsLeft: number }

const ROLES: InviteRole[] = ["admin", "member", "viewer"]

/** The plan's seats and how many are held, as every page counts them. */
function seatsHeld(): { seats: number; taken: number } {
  const { limit, used } = seatUsage()
  // A plan whose seats have no limit is never full.
  return { seats: limit ?? Number.POSITIVE_INFINITY, taken: used }
}

/** The plan's seats, who holds them, the roles on offer and the newest arrivals. */
export function inviteContext(): InviteContext {
  const members = db.members.all()
  const descriptions = new Map(db.roles.all().map((role) => [role.name.toLowerCase(), role.description]))
  const { seats, taken } = seatsHeld()
  return {
    plan: PLAN,
    seats,
    taken,
    roles: ROLES.map((value) => ({
      value,
      label: value.charAt(0).toUpperCase() + value.slice(1),
      description: descriptions.get(value) ?? "",
    })),
    recent: [...members]
      .sort((a, b) => b.joinedAt.getTime() - a.joinedAt.getTime())
      .slice(0, 4)
      .map(({ name, email, avatarUrl, role, status }) => ({ name, email, avatarUrl, role, status })),
  }
}

/** "ana.lopez@example.com" → "Ana Lopez": the name an invitation shows until its owner sets one. */
function nameFrom(email: string): string {
  return email
    .split("@")[0]
    .split(/[._-]+/)
    .filter(Boolean)
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join(" ")
}

/**
 * Invites every address or none. Each is checked against the store — not a
 * member already, not someone with an invitation waiting — and together they
 * must fit the seats the plan has left. The role is one a newcomer can take,
 * never the owner's. A refusal names each address it turned down and why.
 */
export async function inviteMembers(sent: InviteRequest): Promise<Result<InviteOutcome>> {
  const request = fields(sent)
  const refuse = (message: string): Result<never> => ({ ok: false, error: { code: "refused", message, field: "emails" } })
  // A list of addresses, no longer than a team: anything else is not a request the dialog sends.
  if (!Array.isArray(request.emails) || request.emails.length > MAX_INVITES || request.emails.some((email) => typeof email !== "string")) {
    return refuse(`Invite up to ${MAX_INVITES} people by email address.`)
  }
  const emails = [...new Set(request.emails.map((email) => email.trim().toLowerCase()).filter(Boolean))]
  if (emails.length === 0) return refuse("Add at least one email address.")
  const role = request.role
  if (!role || !ROLES.includes(role)) return refuse("Choose Admin, Member or Viewer for the people you invite.")

  const malformed = emails.filter((email) => !isEmail(email))
  if (malformed.length > 0) return refuse(`${malformed.join(", ")} ${malformed.length === 1 ? "is not an email address" : "are not email addresses"}.`)

  const members = db.members.all()
  const waiting = new Set(db.invitations.all().filter((invitation) => invitation.status === "pending").map((invitation) => invitation.email))
  const problems: string[] = []
  for (const email of emails) {
    const member = members.find((entry) => entry.email.toLowerCase() === email)
    if (member?.status === "deactivated") problems.push(`${email} was deactivated; reactivate them from People instead`)
    else if (member?.status === "invited") problems.push(`${email} is already invited`)
    else if (member) problems.push(`${email} is already in the workspace`)
    else if (waiting.has(email)) problems.push(`${email} already has an invitation waiting`)
  }
  if (problems.length > 0) return refuse(`Nothing was sent. ${problems.join("; ")}.`)

  const { seats, taken } = seatsHeld()
  const left = seats - taken
  if (emails.length > left)
    return refuse(
      `The ${PLAN} plan has ${seats} seats and ${taken} are taken, so ${left === 0 ? "no one else" : `${left} more at most`} can be invited. Remove ${emails.length - left} ${emails.length - left === 1 ? "address" : "addresses"} or add seats.`
    )

  const invited: Invitee[] = []
  for (const email of emails) {
    const name = nameFrom(email)
    const created = await db.members.create({
      name,
      email,
      role,
      status: "invited",
      avatarUrl: avatarFor(name),
      joinedAt: REFERENCE_DATE,
      lastActiveAt: REFERENCE_DATE,
      twoFactor: false,
    })
    if (created.ok) invited.push({ name, email, avatarUrl: created.data.avatarUrl, role, status: "invited" })
  }
  return {
    ok: true,
    data: { invited, expiresAt: new Date(REFERENCE_DATE.getTime() + LINK_DAYS * 86_400_000), seatsLeft: left - invited.length },
  }
}

import * as React from "react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

import { NewProjectWizard } from "./modal-dialogs-03.client"
import { addProject, wizardContext, type CreatedProject, type ProjectDraft, type Result } from "./modal-dialogs-03.data"

export type ModalDialogs03Props = {
  /** Opens the wizard on the first render — for a preview; false when installed. */
  defaultOpen?: boolean
}

/**
 * The projects card and its New project wizard: four steps with a stepper,
 * each checked before the next, and a review before anything is created.
 *
 * A server component. It reads the people and the projects already running
 * through `./modal-dialogs-03.data` and hands the island `createProject`, a
 * server function defined here, which checks the draft again against the
 * store before it adds the project.
 */
export function ModalDialogs03({ defaultOpen = false }: ModalDialogs03Props) {
  const titleId = React.useId()

  async function createProject(draft: ProjectDraft): Promise<Result<CreatedProject>> {
    "use server"
    return addProject(draft)
  }

  return (
    <section
      data-section="modal-dialogs-03"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Projects</h2>
            </CardTitle>
            <CardDescription>The newest first. A new project starts in planning.</CardDescription>
          </CardHeader>
          <CardContent>
            <NewProjectWizard context={wizardContext()} onCreate={createProject} defaultOpen={defaultOpen} />
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default ModalDialogs03

"use client"

import * as React from "react"
import { PlusIcon } from "lucide-react"

import { formatNumber } from "@/lib/format"
import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { FieldError } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
import { Stepper } from "@/components/ui/stepper"
import { UserCell } from "@/components/ui/user-cell"

import type { CreatedProject, ProjectDraft, Result, WizardContext } from "./modal-dialogs-03.data"

export const STEPS = [
  { id: "basics", title: "Basics" },
  { id: "people", title: "People" },
  { id: "dates", title: "Dates" },
  { id: "review", title: "Review" },
]

type Errors = Partial<Record<"name" | "code" | "team" | "dates", string>>

const DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })
const dayLabel = (day: string) => DAY.format(new Date(`${day}T00:00:00Z`))
const weeksBetween = (from: string, to: string) => Math.round((Date.parse(`${to}T00:00:00Z`) - Date.parse(`${from}T00:00:00Z`)) / (7 * 86_400_000))

/** "Orbit launch" → "ORL": three letters from the name until the reader writes their own. */
export function codeFor(name: string): string {
  const words = name.match(/[A-Za-z]+/g) ?? []
  const code =
    words.length >= 3 ? words.slice(0, 3).map((word) => word[0]).join("") : words.length === 2 ? words[0].slice(0, 2) + words[1][0] : (words[0] ?? "").slice(0, 3)
  return code.toUpperCase()
}

/**
 * New project, as a four-step dialog: what it is called, who is on it, when
 * it runs, and a review before anything is created. The stepper and a line
 * read out on every move say where the reader is; each step checks its own
 * answers before Next lets them on, beside the field that is wrong, and focus
 * lands on each step's first field. Create goes to the section's server
 * action, which checks everything again against the store; a refusal comes
 * back as a danger callout on the review. A created project closes the
 * dialog, joins the list and is announced in the card's status line.
 */
export function NewProjectWizard({
  context,
  onCreate,
  defaultOpen,
}: {
  context: WizardContext
  onCreate: (draft: ProjectDraft) => Promise<Result<CreatedProject>>
  defaultOpen: boolean
}) {
  const blank = (): ProjectDraft => ({ name: "", code: "", leadId: context.people[0]?.id ?? "", teamIds: [], startDay: context.startDay, dueDay: context.dueDay })
  const [open, setOpen] = React.useState(defaultOpen)
  const [step, setStep] = React.useState(0)
  const [draft, setDraft] = React.useState<ProjectDraft>(blank)
  const [codeTouched, setCodeTouched] = React.useState(false)
  const [errors, setErrors] = React.useState<Errors>({})
  const [refusal, setRefusal] = React.useState("")
  const [pending, setPending] = React.useState(false)
  const [projects, setProjects] = React.useState(context.projects)
  const [notice, setNotice] = React.useState("")
  const trigger = React.useRef<HTMLButtonElement>(null)
  // The first thing on each step, where focus lands when the step opens.
  const nameField = React.useRef<HTMLInputElement>(null)
  const leadField = React.useRef<HTMLSelectElement>(null)
  const startField = React.useRef<HTMLInputElement>(null)
  const reviewHeading = React.useRef<HTMLHeadingElement>(null)
  const moved = React.useRef(false)
  const id = React.useId()

  React.useEffect(() => {
    if (!moved.current) return
    moved.current = false
    ;[nameField, leadField, startField, reviewHeading][step]?.current?.focus()
  }, [step])

  const people = new Map(context.people.map((person) => [person.id, person]))
  const team = [draft.leadId, ...draft.teamIds.filter((entry) => entry !== draft.leadId)]
  const update = (patch: Partial<ProjectDraft>) => {
    setDraft((current) => ({ ...current, ...patch }))
    setRefusal("")
  }

  function check(at: number): Errors {
    const found: Errors = {}
    if (at === 0) {
      const name = draft.name.trim()
      const taken = projects.find((project) => project.name.toLowerCase() === name.toLowerCase())
      if (!name) found.name = "Give the project a name."
      else if (taken) found.name = `${taken.name} already exists.`
      const owner = projects.find((project) => project.code === draft.code)
      if (!/^[A-Z]{3}$/.test(draft.code)) found.code = "A code is three letters."
      else if (owner) found.code = `${draft.code} belongs to ${owner.name}.`
    }
    if (at === 1 && team.length < 2) found.team = "Add at least one person besides the lead."
    if (at === 2) {
      if (!draft.startDay || !draft.dueDay) found.dates = "Both dates are needed."
      else if (draft.startDay < context.today) found.dates = "A project cannot start in the past."
      else if (draft.dueDay <= draft.startDay) found.dates = "The due date has to come after the start."
    }
    return found
  }

  function go(to: number) {
    if (to > step) {
      const found = check(step)
      setErrors(found)
      if (Object.keys(found).length > 0) return
    }
    moved.current = true
    setStep(to)
  }

  function reset(next: boolean) {
    setOpen(next)
    if (next) return
    setStep(0)
    setDraft(blank())
    setCodeTouched(false)
    setErrors({})
    setRefusal("")
  }

  async function create() {
    if (pending) return
    setPending(true)
    let result: Result<CreatedProject>
    try {
      result = await onCreate({ ...draft, teamIds: team })
    } catch {
      result = { ok: false, error: { code: "network", message: "The project did not reach the server. Try again." } }
    }
    setPending(false)
    if (!result.ok) return setRefusal(result.error.message)
    const made = result.data
    setProjects((current) => [made, ...current])
    setNotice(`Created ${made.name} (${made.code}) with ${formatNumber(made.people)} people, due ${DAY.format(made.endAt)}.`)
    reset(false)
  }

  const invalid = (key: keyof Errors) => (errors[key] ? { "aria-invalid": true, "aria-describedby": `${id}-${key}-error` } : {})

  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center justify-between gap-3">
        <p className="text-sm text-muted-foreground tabular-nums">{projects.length} projects</p>
        <Dialog open={open} onOpenChange={reset}>
          <DialogTrigger ref={trigger} render={<Button size="sm" />}>
            <PlusIcon data-icon="inline-start" aria-hidden="true" />
            New project
          </DialogTrigger>
          <DialogContent initialFocus={nameField} finalFocus={trigger} className="sm:max-w-lg">
            <DialogHeader>
              <DialogTitle>New project</DialogTitle>
              <DialogDescription>Four short steps. Nothing is created until you confirm on the last one.</DialogDescription>
            </DialogHeader>
            <Stepper steps={STEPS} activeStep={step} size="sm" aria-hidden="true" />
            <p aria-live="polite" className="sr-only">
              Step {step + 1} of {STEPS.length}, {STEPS[step].title}
            </p>

            {step === 0 ? (
              <div className="grid gap-4 sm:grid-cols-[minmax(0,1fr)_7rem]">
                <div className="flex flex-col gap-2">
                  <label htmlFor={`${id}-name`} className="text-sm font-medium">
                    Name
                  </label>
                  <Input
                    ref={nameField}
                    id={`${id}-name`}
                    value={draft.name}
                    onChange={(event) => update({ name: event.target.value, ...(codeTouched ? {} : { code: codeFor(event.target.value) }) })}
                    placeholder="Orbit launch"
                    {...invalid("name")}
                  />
                  <FieldError id={`${id}-name-error`}>{errors.name}</FieldError>
                </div>
                <div className="flex flex-col gap-2">
                  <label htmlFor={`${id}-code`} className="text-sm font-medium">
                    Code
                  </label>
                  <Input
                    id={`${id}-code`}
                    value={draft.code}
                    maxLength={3}
                    onChange={(event) => {
                      setCodeTouched(true)
                      update({ code: event.target.value.toUpperCase().replace(/[^A-Z]/g, "") })
                    }}
                    className="font-mono uppercase"
                    {...invalid("code")}
                  />
                  <FieldError id={`${id}-code-error`}>{errors.code}</FieldError>
                </div>
              </div>
            ) : null}

            {step === 1 ? (
              <div className="flex flex-col gap-4">
                <div className="flex flex-col gap-2">
                  <label htmlFor={`${id}-lead`} className="text-sm font-medium">
                    Lead
                  </label>
                  <NativeSelect ref={leadField} id={`${id}-lead`} value={draft.leadId} onChange={(event) => update({ leadId: event.target.value })} className="w-full">
                    {context.people.map((person) => (
                      <NativeSelectOption key={person.id} value={person.id}>
                        {person.name}
                      </NativeSelectOption>
                    ))}
                  </NativeSelect>
                </div>
                <fieldset className="flex flex-col gap-2" aria-describedby={errors.team ? `${id}-team-error` : undefined}>
                  <legend className="mb-2 text-sm font-medium">
                    Team <span className="font-normal text-muted-foreground tabular-nums">· {team.length} with the lead</span>
                  </legend>
                  <ul className="flex max-h-52 flex-col gap-1 overflow-y-auto rounded-lg p-1 ring-1 ring-border">
                    {context.people.map((person) => {
                      const isLead = person.id === draft.leadId
                      return (
                        <li key={person.id}>
                          <label className="flex cursor-pointer items-center gap-3 rounded-md px-2 py-1.5 hover:bg-muted/50 has-[[data-checked]]:bg-brand-muted">
                            <Checkbox
                              checked={isLead || draft.teamIds.includes(person.id)}
                              disabled={isLead}
                              onCheckedChange={(checked) =>
                                update({ teamIds: checked ? [...draft.teamIds, person.id] : draft.teamIds.filter((entry) => entry !== person.id) })
                              }
                            />
                            <UserCell size="sm" name={person.name} description={isLead ? "Lead" : person.email} src={person.avatarUrl} />
                          </label>
                        </li>
                      )
                    })}
                  </ul>
                  <FieldError id={`${id}-team-error`}>{errors.team}</FieldError>
                </fieldset>
              </div>
            ) : null}

            {step === 2 ? (
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="flex flex-col gap-2">
                  <label htmlFor={`${id}-start`} className="text-sm font-medium">
                    Starts
                  </label>
                  <Input ref={startField} id={`${id}-start`} type="date" min={context.today} value={draft.startDay} onChange={(event) => update({ startDay: event.target.value })} {...invalid("dates")} />
                </div>
                <div className="flex flex-col gap-2">
                  <label htmlFor={`${id}-due`} className="text-sm font-medium">
                    Due
                  </label>
                  <Input id={`${id}-due`} type="date" min={draft.startDay} value={draft.dueDay} onChange={(event) => update({ dueDay: event.target.value })} {...invalid("dates")} />
                </div>
                <FieldError id={`${id}-dates-error`} className="sm:col-span-2">
                  {errors.dates}
                </FieldError>
                {!errors.dates && draft.startDay && draft.dueDay > draft.startDay ? (
                  <p className="text-sm text-muted-foreground tabular-nums sm:col-span-2">{weeksBetween(draft.startDay, draft.dueDay)} weeks from start to finish.</p>
                ) : null}
              </div>
            ) : null}

            {step === 3 ? (
              <div className="flex flex-col gap-3">
                <h3 ref={reviewHeading} tabIndex={-1} className="text-sm font-semibold outline-none">
                  Check before you create
                </h3>
                <dl className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-2 rounded-lg bg-surface p-3 text-sm ring-1 ring-border">
                  <dt className="text-muted-foreground">Project</dt>
                  <dd>
                    {draft.name.trim()} <span className="font-mono text-xs text-muted-foreground">{draft.code}</span>
                  </dd>
                  <dt className="text-muted-foreground">Lead</dt>
                  <dd>{people.get(draft.leadId)?.name}</dd>
                  <dt className="text-muted-foreground">Team</dt>
                  <dd>{team.map((entry) => people.get(entry)?.name).join(", ")}</dd>
                  <dt className="text-muted-foreground">Runs</dt>
                  <dd className="tabular-nums">
                    {dayLabel(draft.startDay)} to {dayLabel(draft.dueDay)}
                  </dd>
                </dl>
                {refusal ? (
                  <Callout variant="danger" role="alert" title="The project was not created">
                    {refusal}
                  </Callout>
                ) : null}
              </div>
            ) : null}

            <DialogFooter>
              <Button variant="outline" disabled={step === 0} focusableWhenDisabled onClick={() => go(step - 1)}>
                Back
              </Button>
              {step < STEPS.length - 1 ? (
                <Button onClick={() => go(step + 1)}>Next: {STEPS[step + 1].title}</Button>
              ) : (
                <Button onClick={() => void create()} aria-busy={pending || undefined}>
                  Create project
                </Button>
              )}
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
      <ul aria-label="Projects" className="divide-y divide-border rounded-lg ring-1 ring-border">
        {projects.slice(0, 5).map((project) => (
          <li key={project.code} className="flex items-center justify-between gap-3 px-3 py-2 text-sm">
            <span className="flex min-w-0 items-center gap-2">
              <span className="font-mono text-xs text-muted-foreground">{project.code}</span>
              <span className="truncate font-medium">{project.name}</span>
            </span>
            <span className="shrink-0 text-muted-foreground tabular-nums">
              {project.lead} · due {DAY.format(project.endAt)}
            </span>
          </li>
        ))}
      </ul>
      <p role="status" aria-live="polite" className="text-sm font-medium">
        {notice}
      </p>
    </div>
  )
}

/**
 * What `modal-dialogs-03` reads and the one thing it writes: the projects
 * already in `db.projects` — their names and codes are taken — the active
 * people in `db.members` who can lead or join one, and `addProject`, which
 * the section's server action calls to create a project from the wizard's
 * answers. "Now" is `REFERENCE_DATE`.
 *
 * Every read happens inside a function and runs on the server. The island
 * takes the context as props and calls the action it is handed; it never
 * imports this module.
 */
import { REFERENCE_DATE, asString, calendarDay, db, fields, type Project, type Result } from "@/lib/sample-data"

export type { Result }

const DAY_MS = 86_400_000

export type Teammate = { id: string; name: string; email: string; avatarUrl?: string }

export type ProjectSummary = { name: string; code: string; status: Project["status"]; lead: string; endAt: Date }

export type WizardContext = {
  /** Projects already on the books; their names and codes are taken. */
  projects: ProjectSummary[]
  people: Teammate[]
  /** "YYYY-MM-DD" days the date fields open on: the Monday after now, and eight weeks on. */
  startDay: string
  dueDay: string
  today: string
}

export type ProjectDraft = { name: string; code: string; leadId: string; teamIds: string[]; startDay: string; dueDay: string }

export type CreatedProject = ProjectSummary & { people: number }

const dayOf = (date: Date) => date.toISOString().slice(0, 10)

/** Who can be asked, the projects already running, and the days the dates open on. */
export function wizardContext(): WizardContext {
  const members = new Map(db.members.all().map((member) => [member.id, member.name]))
  const monday = new Date(REFERENCE_DATE.getTime() + (((8 - REFERENCE_DATE.getUTCDay()) % 7 || 7) * DAY_MS))
  return {
    projects: db.projects
      .all()
      .sort((a, b) => b.startAt.getTime() - a.startAt.getTime())
      .map((project) => ({
        name: project.name,
        code: project.code,
        status: project.status,
        lead: members.get(project.lead) ?? "Unassigned",
        endAt: project.endAt,
      })),
    people: db.members
      .all()
      .filter((member) => member.status === "active")
      .sort((a, b) => a.name.localeCompare(b.name))
      .map(({ id, name, email, avatarUrl }) => ({ id, name, email, avatarUrl })),
    startDay: dayOf(monday),
    dueDay: dayOf(new Date(monday.getTime() + 8 * 7 * DAY_MS)),
    today: dayOf(REFERENCE_DATE),
  }
}

/** A project's name, as a board's column and a report's row print it. */
const MAX_NAME = 80

/**
 * Creates the project, or says why not. Everything is checked again here,
 * against the store as it is now rather than as the wizard saw it: the name
 * and the code are free, the lead and the team are active people, the dates
 * run forwards and do not start in the past.
 */
export async function addProject(sent: ProjectDraft): Promise<Result<CreatedProject>> {
  const refuse = (message: string, field: string): Result<never> => ({ ok: false, error: { code: "refused", message, field } })
  const draft = fields(sent)
  const name = asString(draft.name).trim()
  const code = asString(draft.code).trim().toUpperCase()
  if (!name) return refuse("Give the project a name.", "name")
  if (name.length > MAX_NAME) return refuse(`Keep the name under ${MAX_NAME} characters.`, "name")
  if (!/^[A-Z]{3}$/.test(code)) return refuse("A code is three letters.", "code")
  const projects = db.projects.all()
  const sameName = projects.find((project) => project.name.toLowerCase() === name.toLowerCase())
  if (sameName) return refuse(`${sameName.name} already exists. Choose another name.`, "name")
  const sameCode = projects.find((project) => project.code === code)
  if (sameCode) return refuse(`${code} was taken by ${sameCode.name} while you were filling this in. Choose another code.`, "code")

  const active = new Map(db.members.all().filter((member) => member.status === "active").map((member) => [member.id, member]))
  const lead = typeof draft.leadId === "string" ? active.get(draft.leadId) : undefined
  if (!lead) return refuse("The lead has to be someone active in the workspace.", "lead")
  const teamIds: unknown[] = Array.isArray(draft.teamIds) ? draft.teamIds : [null]
  const team = [...new Set([lead.id, ...teamIds])]
  if (team.some((id) => typeof id !== "string" || !active.has(id))) return refuse("Everyone on the team has to be active in the workspace.", "team")

  // Days that exist, within the next five years: "2026-02-31" is not one, and nor is 9999.
  const within = { to: new Date(REFERENCE_DATE.getTime() + 5 * 365 * 86_400_000) }
  const startAt = calendarDay(draft.startDay, within)
  const endAt = calendarDay(draft.dueDay, within)
  if (!startAt || !endAt) return refuse("Both dates are needed, each a day within the next five years.", "dates")
  if (startAt.getTime() < new Date(`${dayOf(REFERENCE_DATE)}T00:00:00Z`).getTime()) return refuse("A project cannot start in the past.", "dates")
  if (endAt <= startAt) return refuse("The due date has to come after the start.", "dates")

  const created = await db.projects.create({ name, code, status: "planning", lead: lead.id, startAt, endAt, progress: 0 })
  if (!created.ok) return created
  return { ok: true, data: { name, code, status: "planning", lead: lead.name, endAt, people: team.length } }
}

import * as React from "react"

import { formatNumber } from "@/lib/format"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

import { ShareFile } from "./modal-dialogs-04.client"
import { sharedFile } from "./modal-dialogs-04.data"

export type ModalDialogs04Props = {
  /** Opens the Share dialog on the first render — for a preview; false when installed. */
  defaultOpen?: boolean
}

/**
 * A file and its Share dialog: who can open it and what each can do, who
 * else in the workspace could, and what its link opens for.
 *
 * A server component: the file and its people come from
 * `./modal-dialogs-04.data`.
 */
export function ModalDialogs04({ defaultOpen = false }: ModalDialogs04Props) {
  const titleId = React.useId()
  const file = sharedFile()
  return (
    <section
      data-section="modal-dialogs-04"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Sharing</h2>
            </CardTitle>
            <CardDescription className="tabular-nums">
              In {file.folder}, open to {formatNumber(file.grants.length)} people.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <ShareFile file={file} defaultOpen={defaultOpen} />
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default ModalDialogs04

"use client"

import * as React from "react"
import { CheckIcon, FileTextIcon, LinkIcon, Share2Icon } from "lucide-react"

import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
import { formatBytes, formatNumber } from "@/lib/format"
import { Autocomplete } from "@/components/ui/autocomplete"
import { AvatarGroup } from "@/components/ui/avatar-group"
import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { FieldError } from "@/components/ui/field"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
import { UserCell } from "@/components/ui/user-cell"

import type { Access, Grant, SharedFile } from "./modal-dialogs-04.data"

type Level = Exclude<Access, "owner">

export const LEVELS: { value: Level; label: string }[] = [
  { value: "edit", label: "Can edit" },
  { value: "comment", label: "Can comment" },
  { value: "view", label: "Can view" },
]
const RANK: Record<Level, number> = { view: 0, comment: 1, edit: 2 }
const LINK = {
  restricted: "Only people with access",
  workspace: "Anyone at Northwind with the link",
} as const

const people = (count: number) => `${formatNumber(count)} ${count === 1 ? "person" : "people"}`

/**
 * The file row and its Share dialog. The dialog opens on the Add people box,
 * which suggests the workspace and takes a name or an address; the access
 * picked beside it goes with them. Someone outside the workspace, or a
 * workspace viewer asked to edit, is refused in a danger callout under the
 * box that says why; a person already listed is told so under the box. Each
 * person's access is a select that offers only what their workspace role
 * allows, and removes them; the owner stays. Copy link says so in a status
 * line inside the dialog; Done closes it and the row says who has the file.
 */
export function ShareFile({ file, defaultOpen }: { file: SharedFile; defaultOpen: boolean }) {
  const [open, setOpen] = React.useState(defaultOpen)
  const [grants, setGrants] = React.useState<Grant[]>(file.grants)
  const [query, setQuery] = React.useState("")
  const [level, setLevel] = React.useState<Level>("view")
  const [invalid, setInvalid] = React.useState("")
  const [refusal, setRefusal] = React.useState("")
  const [link, setLink] = React.useState<keyof typeof LINK>("restricted")
  const [copied, setCopied] = React.useState("")
  const [notice, setNotice] = React.useState("")
  const { copy } = useCopyToClipboard()
  const trigger = React.useRef<HTMLButtonElement>(null)
  const field = React.useRef<HTMLInputElement>(null)
  const ids = { add: React.useId(), list: React.useId(), error: React.useId(), refusal: React.useId(), link: React.useId() }

  const everyone = [...grants, ...file.others]

  function add(event: React.FormEvent) {
    event.preventDefault()
    setInvalid("")
    setRefusal("")
    const needle = query.trim().toLowerCase()
    if (!needle) return setInvalid("Type a name or an email address.")
    const person = everyone.find((entry) => entry.email.toLowerCase() === needle || entry.name.toLowerCase() === needle)
    if (!person) return setRefusal(`${query.trim()} is not in the Northwind workspace, so they cannot open files here. Invite them to the workspace first.`)
    if (grants.some((grant) => grant.id === person.id)) return setInvalid(`${person.name} already has access.`)
    if (RANK[level] > RANK[person.ceiling])
      return setRefusal(`${person.name} is a viewer in the workspace, so they can only view files. Add them with Can view, or change their workspace role first.`)
    setGrants((current) => [...current, { ...person, access: level }])
    setQuery("")
  }

  function change(id: string, value: string) {
    setRefusal("")
    if (value === "remove") setGrants((current) => current.filter((grant) => grant.id !== id))
    else setGrants((current) => current.map((grant) => (grant.id === id ? { ...grant, access: value as Level } : grant)))
  }

  async function copyLink() {
    const ok = await copy(`https://northwind.example/files/${file.id}`)
    setCopied(ok ? `Link copied. ${LINK[link]} can open it.` : "The browser blocked the clipboard, so the link was not copied.")
  }

  function finish(next: boolean) {
    setOpen(next)
    if (next) return
    setNotice(`${file.name} is shared with ${people(grants.length)}. ${LINK[link]} can open it.`)
    setInvalid("")
    setRefusal("")
    setCopied("")
  }

  return (
    <div className="flex flex-col gap-3">
      <div className="flex flex-wrap items-center gap-3">
        <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
          <FileTextIcon aria-hidden="true" className="size-5" />
        </span>
        <span className="flex min-w-0 flex-1 flex-col">
          <span className="truncate text-sm font-medium">{file.name}</span>
          <span className="text-xs text-muted-foreground tabular-nums">
            {formatBytes(file.sizeBytes, 1)} · changed {file.modifiedDaysAgo === 0 ? "today" : `${file.modifiedDaysAgo} days ago`}
          </span>
        </span>
        <AvatarGroup size="sm" max={4} users={grants.map((grant) => ({ name: grant.name, src: grant.avatarUrl }))} />
        <Dialog open={open} onOpenChange={finish}>
          <DialogTrigger ref={trigger} render={<Button variant="outline" size="sm" />}>
            <Share2Icon data-icon="inline-start" aria-hidden="true" />
            Share
          </DialogTrigger>
          <DialogContent initialFocus={field} finalFocus={trigger} className="gap-5 sm:max-w-lg">
            <DialogHeader>
              <DialogTitle>Share {file.name}</DialogTitle>
              <DialogDescription>
                People with access open it from {file.folder}. Add someone from the workspace, or change what each can do.
              </DialogDescription>
            </DialogHeader>

            <form onSubmit={add} noValidate className="flex flex-col gap-2">
              <label htmlFor={ids.add} className="text-sm font-medium">
                Add people
              </label>
              <div className="flex flex-col gap-2 sm:flex-row">
                <Autocomplete
                  ref={field}
                  id={ids.add}
                  value={query}
                  onValueChange={(next) => {
                    setQuery(next)
                    setInvalid("")
                    setRefusal("")
                  }}
                  getSuggestions={(typed) => {
                    const needle = typed.trim().toLowerCase()
                    return file.others
                      .filter((person) => person.name.toLowerCase().includes(needle) || person.email.includes(needle))
                      .slice(0, 6)
                      .map((person) => ({ value: person.email, label: person.name, description: person.email }))
                  }}
                  emptyText="Nobody in the workspace matches"
                  placeholder="Name or email"
                  aria-invalid={invalid || refusal ? true : undefined}
                  aria-describedby={invalid ? ids.error : refusal ? ids.refusal : undefined}
                  className="flex-1"
                />
                <div className="flex gap-2">
                  <NativeSelect aria-label="Access for who you add" value={level} onChange={(event) => setLevel(event.target.value as Level)} className="flex-1 sm:w-36">
                    {LEVELS.map((option) => (
                      <NativeSelectOption key={option.value} value={option.value}>
                        {option.label}
                      </NativeSelectOption>
                    ))}
                  </NativeSelect>
                  <Button type="submit">Add</Button>
                </div>
              </div>
              <FieldError id={ids.error}>{invalid}</FieldError>
              {refusal ? (
                <Callout id={ids.refusal} variant="danger" role="alert" title="Not added">
                  {refusal}
                </Callout>
              ) : null}
            </form>

            <div className="flex flex-col gap-2">
              <h3 id={`${ids.list}-heading`} className="text-sm font-medium">
                {people(grants.length)} with access
              </h3>
              <ul aria-labelledby={`${ids.list}-heading`} className="flex max-h-60 flex-col divide-y divide-border overflow-y-auto">
                {grants.map((grant) => (
                  <li key={grant.id} className="flex items-center justify-between gap-3 py-2">
                    <UserCell size="sm" name={grant.name} email={grant.email} src={grant.avatarUrl} className="min-w-0" />
                    {grant.access === "owner" ? (
                      <span className="px-2.5 text-sm text-muted-foreground">Owner</span>
                    ) : (
                      <NativeSelect
                        size="sm"
                        aria-label={`Access for ${grant.name}`}
                        value={grant.access}
                        onChange={(event) => change(grant.id, event.target.value)}
                        className="w-36 shrink-0"
                      >
                        {LEVELS.map((option) => (
                          <NativeSelectOption key={option.value} value={option.value} disabled={RANK[option.value] > RANK[grant.ceiling]}>
                            {option.label}
                          </NativeSelectOption>
                        ))}
                        <NativeSelectOption value="remove">Remove access</NativeSelectOption>
                      </NativeSelect>
                    )}
                  </li>
                ))}
              </ul>
            </div>

            <div className="flex flex-col gap-2 rounded-lg bg-surface p-3 ring-1 ring-border">
              <label htmlFor={ids.link} className="text-sm font-medium">
                Link
              </label>
              <div className="flex flex-col gap-2 sm:flex-row">
                <NativeSelect id={ids.link} value={link} onChange={(event) => setLink(event.target.value as keyof typeof LINK)} className="w-full">
                  {(Object.keys(LINK) as (keyof typeof LINK)[]).map((key) => (
                    <NativeSelectOption key={key} value={key}>
                      {LINK[key]}
                    </NativeSelectOption>
                  ))}
                </NativeSelect>
                <Button variant="outline" onClick={() => void copyLink()} className="shrink-0">
                  {copied.startsWith("Link copied") ? <CheckIcon data-icon="inline-start" aria-hidden="true" /> : <LinkIcon data-icon="inline-start" aria-hidden="true" />}
                  Copy link
                </Button>
              </div>
              <p role="status" aria-live="polite" className="text-xs text-muted-foreground">
                {copied}
              </p>
            </div>

            <DialogFooter>
              <DialogClose render={<Button />}>Done</DialogClose>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
      <p role="status" aria-live="polite" className="text-sm font-medium">
        {notice}
      </p>
    </div>
  )
}