Form layouts

import * as React from "react"

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

import { InvoiceSettingsForm } from "./form-layouts-01.client"
import {
  COUNTRIES,
  FOOTER_LIMIT,
  REMINDERS,
  TERMS,
  history,
  invoiceSettings,
  saveInvoiceSettings,
  type InvoiceSettings,
} from "./form-layouts-01.data"

/**
 * A settings form in labelled groups, in one framed card: who the invoice is
 * from, how invoices are numbered, when they fall due and what they say at
 * the foot. On a wide screen each group's heading and what it is for sit in a
 * column beside its fields; on a phone they stack above them. The buttons are
 * the card's footer strip.
 *
 * A server component. It reads the settings and what the invoices already
 * sent say about them through `./form-layouts-01.data`, and hands the island
 * `save`, a server function defined here that checks everything again.
 */
export function FormLayouts01() {
  const titleId = React.useId()

  async function save(settings: InvoiceSettings) {
    "use server"
    return saveInvoiceSettings(settings)
  }

  return (
    <section
      data-section="form-layouts-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}>Invoice settings</h2>
            </CardTitle>
            <CardDescription>
              What every invoice Northwind sends says about you, and when it asks to be paid.
            </CardDescription>
          </CardHeader>
          <InvoiceSettingsForm
            initial={invoiceSettings()}
            history={history()}
            countries={COUNTRIES}
            terms={TERMS}
            reminders={REMINDERS}
            footerLimit={FOOTER_LIMIT}
            save={save}
          />
        </Card>
      </div>
    </section>
  )
}

export default FormLayouts01

"use client"

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

import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { CardContent, CardFooter } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldDescription, FieldError, FieldLabel, FieldLegend, FieldSet } from "@/components/ui/field"
import { FormSection } from "@/components/ui/form-section"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Spinner } from "@/components/ui/spinner"
import { Textarea } from "@/components/ui/textarea"

import type { History, InvoiceSettings, Result } from "./form-layouts-01.data"

type Key = keyof InvoiceSettings

export type InvoiceSettingsFormProps = {
  initial: InvoiceSettings
  history: History
  countries: string[]
  terms: readonly number[]
  reminders: readonly { value: string; label: string }[]
  footerLimit: number
  save: (settings: InvoiceSettings) => Promise<Result<{ next: string }>>
}

const termLabel = (days: number) => (days === 0 ? "On receipt" : `${days} days after it is issued`)

/**
 * Four labelled groups — who the invoice is from, how it is numbered, when it
 * falls due, what it says at the foot — each with its heading and what it is
 * for beside the fields on a wide screen, above them on a narrow one. Every
 * field is labelled, a required one says so in words, and every hint and
 * refusal is tied to its field. Save goes to the server, which checks it all
 * again; a refusal about a field lands under it with the focus on it, any
 * other refusal above the buttons, and a save is said in the status line.
 */
export function InvoiceSettingsForm(props: InvoiceSettingsFormProps) {
  const { initial, history, countries, terms, reminders, footerLimit, save } = props
  const uid = React.useId()
  const id = (key: string) => `${uid}-${key}`
  const [saved, setSaved] = React.useState(initial)
  const [values, setValues] = React.useState(initial)
  const [error, setError] = React.useState<{ field: string; message: string } | null>(null)
  const [refusal, setRefusal] = React.useState<string | null>(null)
  const [pending, setPending] = React.useState(false)
  const [said, setSaid] = React.useState("")

  const dirty = (Object.keys(values) as Key[]).some((key) => String(values[key]) !== String(saved[key]))
  const change = <K extends Key>(key: K, value: InvoiceSettings[K]) => {
    setValues((current) => ({ ...current, [key]: value }))
    if (error?.field === key) setError(null)
    setSaid("")
  }

  async function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setError(null)
    setRefusal(null)
    setPending(true)
    let result: Result<{ next: string }>
    try {
      result = await save(values)
    } catch {
      // The call never arrived — a dropped connection, or a page older than the server.
      result = { ok: false, error: { code: "network", message: "The settings did not reach the server. Try again." } }
    } finally {
      setPending(false)
    }
    if (!result.ok) {
      const field = result.error.field
      if (!field) return setRefusal(result.error.message)
      setError({ field, message: result.error.message })
      return document.getElementById(id(field))?.focus()
    }
    setSaved(values)
    setSaid(`Saved. The next invoice will be ${result.data.next}.`)
  }

  /** The id list a control is described by: its hint, and its refusal while it has one. */
  const describe = (key: Key, hint = false) =>
    [hint ? id(`${key}-hint`) : "", error?.field === key ? id(`${key}-error`) : ""].filter(Boolean).join(" ") ||
    undefined
  const invalid = (key: Key) => error?.field === key || undefined
  const refusalOf = (key: Key) =>
    error?.field === key ? <FieldError id={id(`${key}-error`)}>{error.message}</FieldError> : null
  const required = <span className="font-normal text-muted-foreground">(required)</span>
  const text = (key: Key) => ({
    id: id(key),
    value: String(values[key]),
    "aria-invalid": invalid(key),
    onChange: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) =>
      change(key, event.target.value),
  })

  return (
    <form noValidate onSubmit={submit} className="flex flex-1 flex-col gap-1">
      <CardContent className="flex flex-col divide-y p-0">
        <FormSection as="h3"
          aside
          title="Business details"
          description="Printed at the top of every invoice."
          className="p-(--card-spacing) md:p-6"
        >
          <Field>
            <FieldLabel htmlFor={id("legalName")}>Legal name {required}</FieldLabel>
            <Input
              {...text("legalName")}
              required
              autoComplete="organization"
              aria-describedby={describe("legalName")}
            />
            {refusalOf("legalName")}
          </Field>
          <div className="grid gap-4 sm:grid-cols-2">
            <Field>
              <FieldLabel htmlFor={id("taxId")}>
                Tax ID <span className="font-normal text-muted-foreground">(optional)</span>
              </FieldLabel>
              <Input
                {...text("taxId")}
                className="font-mono uppercase"
                spellCheck={false}
                aria-describedby={describe("taxId", true)}
              />
              <FieldDescription id={id("taxId-hint")}>Country code first, as it is registered.</FieldDescription>
              {refusalOf("taxId")}
            </Field>
            <Field>
              <FieldLabel htmlFor={id("country")}>Country {required}</FieldLabel>
              <NativeSelect {...text("country")} required className="w-full" aria-describedby={describe("country")}>
                {countries.map((country) => (
                  <NativeSelectOption key={country} value={country}>
                    {country}
                  </NativeSelectOption>
                ))}
              </NativeSelect>
              {refusalOf("country")}
            </Field>
          </div>
          <Field>
            <FieldLabel htmlFor={id("address")}>Address {required}</FieldLabel>
            <Textarea
              {...text("address")}
              required
              rows={3}
              autoComplete="street-address"
              aria-describedby={describe("address")}
            />
            {refusalOf("address")}
          </Field>
        </FormSection>

        <FormSection as="h3"
          aside
          title="Numbering"
          description={
            <>
              {history.sent} invoices have gone out; the last was{" "}
              <span className="font-mono whitespace-nowrap">
                {history.prefix}-{history.lastNumber}
              </span>
              . A number is never used twice.
            </>
          }
          className="p-(--card-spacing) md:p-6"
        >
          <div className="grid gap-4 sm:grid-cols-2">
            <Field>
              <FieldLabel htmlFor={id("prefix")}>Prefix {required}</FieldLabel>
              <Input
                {...text("prefix")}
                required
                spellCheck={false}
                autoComplete="off"
                className="font-mono"
                aria-describedby={describe("prefix")}
                onChange={(event) => change("prefix", event.target.value.toUpperCase())}
              />
              {refusalOf("prefix")}
            </Field>
            <Field>
              <FieldLabel htmlFor={id("nextNumber")}>Next number {required}</FieldLabel>
              <Input
                {...text("nextNumber")}
                required
                inputMode="numeric"
                autoComplete="off"
                className="font-mono"
                aria-describedby={describe("nextNumber")}
              />
              {refusalOf("nextNumber")}
            </Field>
          </div>
          <p className="text-sm text-muted-foreground">
            The next invoice will be{" "}
            <span className="font-mono text-foreground">
              {values.prefix || "…"}-{values.nextNumber || "…"}
            </span>
            .
          </p>
        </FormSection>

        <FormSection as="h3"
          aside
          title="Payment terms"
          description="When an invoice falls due, and when the customer hears about it."
          className="p-(--card-spacing) md:p-6"
        >
          <FieldSet>
            <FieldLegend variant="label" id={id("terms-legend")}>
              Due {required}
            </FieldLegend>
            <RadioGroup
              id={id("terms")}
              value={values.terms}
              onValueChange={(value) => change("terms", String(value))}
              aria-labelledby={id("terms-legend")}
              aria-describedby={describe("terms", true)}
              className="sm:grid-cols-2"
            >
              {terms.map((days) => (
                <div key={days} className="flex items-center gap-2.5">
                  <RadioGroupItem id={id(`terms-${days}`)} value={String(days)} />
                  <Label htmlFor={id(`terms-${days}`)} className="font-normal">
                    {termLabel(days)}
                  </Label>
                </div>
              ))}
            </RadioGroup>
            <FieldDescription id={id("terms-hint")}>
              Every invoice so far has fallen due within {history.longestTerms} days.
            </FieldDescription>
            {refusalOf("terms")}
          </FieldSet>
          <FieldSet>
            <FieldLegend variant="label">Reminders</FieldLegend>
            <div className="flex flex-col gap-2.5">
              {reminders.map((reminder) => (
                <div key={reminder.value} className="flex items-center gap-2.5">
                  <Checkbox
                    id={id(`reminder-${reminder.value}`)}
                    checked={values.reminders.includes(reminder.value)}
                    onCheckedChange={(checked) =>
                      change(
                        "reminders",
                        checked
                          ? [...values.reminders, reminder.value]
                          : values.reminders.filter((entry) => entry !== reminder.value)
                      )
                    }
                  />
                  <Label htmlFor={id(`reminder-${reminder.value}`)} className="font-normal">
                    {reminder.label}
                  </Label>
                </div>
              ))}
            </div>
          </FieldSet>
        </FormSection>

        <FormSection as="h3"
          aside
          title="Footer"
          description="Printed under the totals: how to pay, and a word of thanks."
          className="p-(--card-spacing) md:p-6"
        >
          <Field>
            <FieldLabel htmlFor={id("footer")}>Footer note</FieldLabel>
            <Textarea {...text("footer")} rows={3} aria-describedby={describe("footer", true)} />
            <FieldDescription id={id("footer-hint")} className="tabular-nums">
              {values.footer.length} of {footerLimit} characters
            </FieldDescription>
            {refusalOf("footer")}
          </Field>
        </FormSection>
      </CardContent>

      <CardFooter className="flex-wrap gap-x-4 gap-y-2">
        <p role="status" aria-live="polite" className="flex min-w-0 flex-1 items-center gap-2 text-sm">
          {said ? (
            <>
              <CircleCheckIcon aria-hidden="true" className="size-4 shrink-0 text-success" />
              {said}
            </>
          ) : null}
        </p>
        {refusal ? (
          <Callout variant="danger" role="alert" title="The settings were not saved" className="basis-full">
            {refusal}
          </Callout>
        ) : null}
        <div className="ms-auto flex items-center gap-2">
          {/* Off once there is nothing to discard — including the moment it is pressed — but it keeps the focus it was pressed with. */}
          <Button
            type="button"
            variant="ghost"
            disabled={!dirty || pending}
            focusableWhenDisabled
            onClick={() => {
              setValues(saved)
              setError(null)
            }}
          >
            Discard changes
          </Button>
          <Button type="submit" disabled={pending} focusableWhenDisabled aria-busy={pending || undefined}>
            {pending ? <Spinner aria-hidden="true" /> : null}
            Save settings
          </Button>
        </div>
      </CardFooter>
    </form>
  )
}

/**
 * What `form-layouts-01` reads and checks: the invoice settings of the
 * workspace, and what the invoices already sent say about them. The prefix
 * and the next number come from `db.invoices` — a number already used can
 * never be used again — and so does the longest time any invoice has been
 * given to fall due, which the terms start from. The business's own details
 * are its configuration, stated here the way `settings-general` states its
 * own. `saveInvoiceSettings` is what the section's server function calls: it
 * checks everything again, and the numbering against the store.
 *
 * Selectors and checks, reading `db` inside functions on the server. The
 * island takes the settings as plain props and never imports this module.
 */
import { db, type Result } from "@/lib/sample-data"

export type { Result }

/** How long an invoice is given to fall due, in days; 0 is due on receipt. */
export const TERMS = [0, 14, 30, 45] as const

/** When a reminder can go out, relative to the due date. */
export const REMINDERS = [
  { value: "before", label: "Three days before it falls due" },
  { value: "on", label: "On the day it falls due" },
  { value: "after", label: "A week after, while it is unpaid" },
] as const

/** Countries a business can be registered in: vocabulary for the address. */
export const COUNTRIES = ["Ireland", "United Kingdom", "Germany", "Netherlands", "France", "United States", "Canada"]

/** The longest a footer can run before it crowds the totals. */
export const FOOTER_LIMIT = 280

export type InvoiceSettings = {
  legalName: string
  taxId: string
  address: string
  country: string
  prefix: string
  nextNumber: string
  terms: string
  reminders: string[]
  footer: string
}

/** What the invoices already sent say: the numbering in use and the longest terms given. */
export type History = { prefix: string; lastNumber: number; sent: number; longestTerms: number }

const DAY_MS = 86_400_000

/** "INV-100300" → { prefix: "INV", number: 100300 }. */
function parse(number: string): { prefix: string; number: number } | null {
  const match = /^([A-Z][A-Z0-9]{1,5})-(\d+)$/.exec(number)
  return match ? { prefix: match[1], number: Number(match[2]) } : null
}

/** The numbering the invoices use and the longest any was given to fall due. */
export function history(): History {
  const invoices = db.invoices.all()
  let prefix = "INV"
  let lastNumber = 0
  let longestTerms = 0
  for (const invoice of invoices) {
    const parsed = parse(invoice.number)
    if (parsed && parsed.number > lastNumber) ({ prefix, number: lastNumber } = parsed)
    longestTerms = Math.max(longestTerms, Math.round((invoice.dueAt.getTime() - invoice.issuedAt.getTime()) / DAY_MS))
  }
  return { prefix, lastNumber, sent: invoices.length, longestTerms }
}

/** The settings as they stand: the business's details, and the numbering and terms the invoices imply. */
export function invoiceSettings(): InvoiceSettings {
  const { prefix, lastNumber, longestTerms } = history()
  return {
    legalName: "Northwind Analytics Ltd",
    taxId: "IE3812947NH",
    address: "4 Grand Canal Square\nDublin 2, D02 X285",
    country: "Ireland",
    prefix,
    nextNumber: String(lastNumber + 1),
    terms: String(TERMS.find((days) => days >= longestTerms) ?? TERMS[TERMS.length - 1]),
    reminders: ["on", "after"],
    footer:
      "Thank you for your business. Pay by bank transfer to the account on the right, quoting the invoice number.",
  }
}

const refuse = (message: string, field?: keyof InvoiceSettings): Result<never> => ({
  ok: false,
  error: { code: "invalid_input", message, ...(field ? { field } : {}) },
})

/** The longest each piece of text may be; anything longer is refused before it is read. */
const LIMITS = { legalName: 120, taxId: 32, address: 300, country: 60, prefix: 12, nextNumber: 12, terms: 4 }

/**
 * Saves the settings after checking every field again: a legal name and an
 * address, a tax ID in the shape tax IDs take, a prefix of two to six capital
 * letters and digits, terms and reminders from the lists, a footer that fits.
 * The next number is checked against the store — it has to come after every
 * number already on an invoice with that prefix, because an invoice number is
 * never used twice. Answers with what the next invoice will be called.
 *
 * The types are erased at the action boundary, so the input is checked for
 * its shape first: a plain object whose fields are text of a bounded length,
 * and a list of reminders. Anything else is refused, never thrown on.
 *
 * Nothing is written. The settings are the configuration this file states,
 * and the sample store keeps no table for them: this is the seam where your
 * app writes the checked settings to its own store, before it answers.
 */
export async function saveInvoiceSettings(input: InvoiceSettings): Promise<Result<{ next: string }>> {
  if (typeof input !== "object" || input === null || Array.isArray(input))
    return refuse("Those are not settings this form sends, so nothing was saved.")
  const fields = input as Record<string, unknown>
  /** The field as text, or null when it is not text or is longer than any real one. */
  const text = (key: keyof typeof LIMITS): string | null => {
    const value = fields[key]
    return typeof value === "string" && value.length <= LIMITS[key] ? value.trim() : null
  }

  const legalName = text("legalName")
  if (legalName === null && typeof fields.legalName === "string")
    return refuse(`Keep the legal name to ${LIMITS.legalName} characters.`, "legalName")
  if (!legalName) return refuse("Enter the name the business is registered under.", "legalName")
  const taxId = text("taxId")
  if (taxId === null || (taxId && !/^[A-Z]{2}[A-Z0-9]{6,12}$/.test(taxId.replace(/\s+/g, "").toUpperCase())))
    return refuse("A tax ID is two letters for the country, then 6 to 12 letters and digits.", "taxId")
  const address = text("address")
  if (address === null && typeof fields.address === "string")
    return refuse(`Keep the address to ${LIMITS.address} characters.`, "address")
  if (!address) return refuse("Enter the address printed on the invoice.", "address")
  const country = text("country")
  if (country === null || !COUNTRIES.includes(country))
    return refuse("Pick the country the business is registered in.", "country")

  const prefix = text("prefix")
  if (prefix === null || !/^[A-Z][A-Z0-9]{1,5}$/.test(prefix))
    return refuse("A prefix is 2 to 6 capital letters and digits, starting with a letter.", "prefix")
  // Digits only: Number() would read "1e21" and "0x10" as numbers too.
  const digits = text("nextNumber")
  if (digits === null || !/^\d{1,9}$/.test(digits) || Number(digits) < 1)
    return refuse("The next number is a whole number from 1 to 999,999,999.", "nextNumber")
  const next = Number(digits)
  const used = db.invoices
    .all()
    .map((invoice) => parse(invoice.number))
    .filter((parsed) => parsed?.prefix === prefix)
    .reduce((highest, parsed) => Math.max(highest, parsed!.number), 0)
  if (next <= used)
    return refuse(`${prefix}-${used} is already on an invoice. Start at ${used + 1} or later.`, "nextNumber")

  const terms = text("terms")
  if (terms === null || !TERMS.map(String).includes(terms)) return refuse("Pick when an invoice falls due.", "terms")
  const reminders = fields.reminders
  if (
    !Array.isArray(reminders) ||
    reminders.some((reminder) => !REMINDERS.some((option) => option.value === reminder)) ||
    new Set(reminders).size !== reminders.length
  )
    return refuse("Pick reminders from the list, each once.", "reminders")
  const footer = fields.footer
  if (typeof footer !== "string") return refuse("Write the footer as text, or leave it empty.", "footer")
  if (footer.length > FOOTER_LIMIT)
    return refuse(`Keep the footer to ${FOOTER_LIMIT} characters; it is ${footer.length}.`, "footer")

  return { ok: true, data: { next: `${prefix}-${next}` } }
}

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

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

import { DealEditor } from "./form-layouts-02.client"
import { SOURCES, STAGES, dealRecord, owners, saveDeal, today, type DealInput } from "./form-layouts-02.data"

/**
 * One record, edited in one framed card: a deal's fields as a two-column form
 * — the name across the top, then the money, the stage and its odds, the day
 * it should close, who owns it and where it came from — and beside them what
 * the record is and what is about to change. The buttons are the card's
 * footer strip.
 *
 * A server component. It reads the deal and the people who can own it
 * through `./form-layouts-02.data` and hands the island `save`, a server
 * function defined here that reads the deal again before it writes it. The
 * deal it changes is the one this card was drawn for, bound here on the
 * server: the page sends the fields, never an id. Once every deal has closed
 * there is nothing to edit, and the card says so.
 */
export function FormLayouts02() {
  const titleId = React.useId()
  const deal = dealRecord()
  const dealId = deal?.id ?? ""

  async function save(input: DealInput) {
    "use server"
    return saveDeal(dealId, input)
  }

  return (
    <section
      data-section="form-layouts-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">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Edit deal</h2>
            </CardTitle>
            {deal ? <CardDescription>{deal.name}</CardDescription> : null}
          </CardHeader>
          {deal ? (
            <DealEditor deal={deal} owners={owners()} stages={STAGES} sources={SOURCES} today={today()} save={save} />
          ) : (
            <CardContent>
              <EmptyState
                icon={<HandshakeIcon aria-hidden="true" />}
                title="No open deal to edit"
                description="Every deal in the pipeline has been won or lost. The next one opened is edited here."
              />
            </CardContent>
          )}
        </Card>
      </div>
    </section>
  )
}

export default FormLayouts02

"use client"

import * as React from "react"
import { ArrowRightIcon, CircleCheckIcon } from "lucide-react"

import { formatCurrency, getInitials } from "@/lib/format"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { CardContent, CardFooter } from "@/components/ui/card"
import { CurrencyInput } from "@/components/ui/currency-input"
import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
import { NumberInput } from "@/components/ui/number-input"
import { Spinner } from "@/components/ui/spinner"

import type { DealInput, DealRecord, Owner, Result, Stage } from "./form-layouts-02.data"

type Key = keyof DealInput

export type DealEditorProps = {
  deal: DealRecord
  owners: Owner[]
  stages: { value: Stage; label: string; odds: number }[]
  sources: { value: string; label: string }[]
  /** The first day an open deal may close on: today, in UTC. */
  today: string
  /** Saves this card's deal: the server binds which one, so only the fields are sent. */
  save: (input: DealInput) => Promise<Result<DealRecord>>
}

const DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })
const money = (cents: number) => formatCurrency(cents / 100, "USD", { maximumFractionDigits: 0 })
const closed = (stage: Stage) => stage === "won" || stage === "lost"
const pick = ({ name, stage, amountCents, probability, expectedClose, owner, source }: DealRecord): DealInput => ({
  name,
  stage,
  amountCents,
  probability,
  expectedClose,
  owner,
  source,
})

/**
 * A deal's record as a form, and beside it what the record is and what is
 * about to change: each field that differs from the saved deal is listed,
 * from and to, before anything is sent. Moving the stage moves the odds to
 * what that stage usually closes at; a won or lost deal's odds are fixed.
 * The server reads the deal again and checks the fields against the stage it
 * is moving to; a refusal about a field lands under it with the focus on it,
 * one about the deal as a whole above the buttons, and a save in the status
 * line — after which the list of changes is empty again.
 */
export function DealEditor({ deal, owners, stages, sources, today, save }: DealEditorProps) {
  const uid = React.useId()
  const id = (key: string) => `${uid}-${key}`
  const [saved, setSaved] = React.useState(deal)
  const [values, setValues] = React.useState<DealInput>(() => pick(deal))
  const [error, setError] = React.useState<{ field: string; message: string } | null>(null)
  const [refusal, setRefusal] = React.useState<string | null>(null)
  const [pending, setPending] = React.useState(false)
  const [said, setSaid] = React.useState("")

  const stage = stages.find((entry) => entry.value === values.stage) ?? stages[0]
  const owner = owners.find((entry) => entry.id === values.owner)
  const label = (key: Key, value: DealInput[Key]) => {
    if (key === "amountCents") return money(Number(value))
    if (key === "stage") return stages.find((entry) => entry.value === value)?.label ?? String(value)
    if (key === "probability") return `${value}%`
    if (key === "expectedClose") {
      const day = new Date(`${value}T00:00:00Z`)
      return Number.isNaN(day.getTime()) ? "no date" : DAY.format(day)
    }
    if (key === "owner") return owners.find((entry) => entry.id === value)?.name ?? String(value)
    if (key === "source") return sources.find((entry) => entry.value === value)?.label ?? String(value)
    return String(value)
  }
  const NAMES: Record<Key, string> = {
    name: "Name",
    amountCents: "Amount",
    stage: "Stage",
    probability: "Odds",
    expectedClose: "Expected close",
    owner: "Owner",
    source: "Source",
  }
  const changes = (Object.keys(NAMES) as Key[]).filter((key) => values[key] !== pick(saved)[key])

  function change<K extends Key>(key: K, value: DealInput[K]) {
    setValues((current) => {
      const next = { ...current, [key]: value }
      if (key === "stage") next.probability = stages.find((entry) => entry.value === value)?.odds ?? current.probability
      return next
    })
    if (error?.field === key) setError(null)
    setSaid("")
  }

  async function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setError(null)
    setRefusal(null)
    setPending(true)
    let result: Result<DealRecord>
    try {
      result = await save(values)
    } catch {
      // The call never arrived — a dropped connection, or a page older than the server.
      result = { ok: false, error: { code: "network", message: "The deal did not reach the server. Try again." } }
    } finally {
      setPending(false)
    }
    if (!result.ok) {
      const field = result.error.field
      if (!field) return setRefusal(result.error.message)
      setError({ field, message: result.error.message })
      return document.getElementById(id(field))?.focus()
    }
    const moved = changes.map((key) => NAMES[key].toLowerCase()).join(", ")
    setSaved(result.data)
    setValues(pick(result.data))
    setSaid(`Saved ${result.data.name}${moved ? `: ${moved} changed` : ""}.`)
  }

  const describe = (key: Key, hint = false) =>
    [hint ? id(`${key}-hint`) : "", error?.field === key ? id(`${key}-error`) : ""].filter(Boolean).join(" ") ||
    undefined
  const wire = (key: Key, hint = false) => ({
    id: id(key),
    "aria-invalid": error?.field === key || undefined,
    "aria-describedby": describe(key, hint),
  })
  const refusalOf = (key: Key) =>
    error?.field === key ? <FieldError id={id(`${key}-error`)}>{error.message}</FieldError> : null
  const required = <span className="font-normal text-muted-foreground">(required)</span>

  return (
    <form noValidate onSubmit={submit} className="flex flex-1 flex-col gap-1">
      <CardContent className="grid p-0 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
        <div className="grid content-start gap-5 p-(--card-spacing) sm:grid-cols-2 md:p-6">
          <Field className="sm:col-span-2">
            <FieldLabel htmlFor={id("name")}>Deal name {required}</FieldLabel>
            <Input
              {...wire("name")}
              required
              value={values.name}
              onChange={(event) => change("name", event.target.value)}
            />
            {refusalOf("name")}
          </Field>
          <Field>
            <FieldLabel htmlFor={id("amountCents")}>Amount {required}</FieldLabel>
            <CurrencyInput
              {...wire("amountCents")}
              required
              currency="USD"
              value={values.amountCents / 100}
              onValueChange={(value) => change("amountCents", Math.round((value ?? 0) * 100))}
            />
            {refusalOf("amountCents")}
          </Field>
          <Field>
            <FieldLabel htmlFor={id("stage")}>Stage {required}</FieldLabel>
            <NativeSelect
              {...wire("stage")}
              required
              className="w-full"
              value={values.stage}
              onChange={(event) => change("stage", event.target.value as Stage)}
            >
              {stages.map((entry) => (
                <NativeSelectOption key={entry.value} value={entry.value}>
                  {entry.label}
                </NativeSelectOption>
              ))}
            </NativeSelect>
            {refusalOf("stage")}
          </Field>
          <Field>
            <FieldLabel htmlFor={id("probability")}>Odds of closing</FieldLabel>
            <NumberInput
              {...wire("probability", true)}
              min={closed(values.stage) ? 0 : 1}
              max={closed(values.stage) ? 100 : 99}
              suffix="%"
              disabled={closed(values.stage)}
              value={values.probability}
              onValueChange={(value) => change("probability", value ?? 0)}
            />
            <FieldDescription id={id("probability-hint")}>
              {closed(values.stage)
                ? `A ${stage.label.toLowerCase()} deal is ${stage.odds}%.`
                : `Deals at ${stage.label} close ${stage.odds}% of the time.`}
            </FieldDescription>
            {refusalOf("probability")}
          </Field>
          <Field>
            <FieldLabel htmlFor={id("expectedClose")}>Expected close {required}</FieldLabel>
            <Input
              {...wire("expectedClose")}
              type="date"
              required
              min={closed(values.stage) ? undefined : today}
              max={closed(values.stage) ? today : undefined}
              value={values.expectedClose}
              onChange={(event) => change("expectedClose", event.target.value)}
            />
            {refusalOf("expectedClose")}
          </Field>
          <Field>
            <FieldLabel htmlFor={id("owner")}>Owner {required}</FieldLabel>
            <div className="flex items-center gap-2">
              <Avatar size="sm">
                <AvatarImage src={owner?.face} alt="" />
                <AvatarFallback>{owner ? getInitials(owner.name) : ""}</AvatarFallback>
              </Avatar>
              <NativeSelect
                {...wire("owner")}
                required
                className="w-full"
                value={values.owner}
                onChange={(event) => change("owner", event.target.value)}
              >
                {owners.map((entry) => (
                  <NativeSelectOption key={entry.id} value={entry.id}>
                    {entry.name}
                  </NativeSelectOption>
                ))}
              </NativeSelect>
            </div>
            {refusalOf("owner")}
          </Field>
          <Field>
            <FieldLabel htmlFor={id("source")}>Source</FieldLabel>
            <NativeSelect
              {...wire("source")}
              className="w-full"
              value={values.source}
              onChange={(event) => change("source", event.target.value as DealInput["source"])}
            >
              {sources.map((entry) => (
                <NativeSelectOption key={entry.value} value={entry.value}>
                  {entry.label}
                </NativeSelectOption>
              ))}
            </NativeSelect>
            {refusalOf("source")}
          </Field>
        </div>

        <aside
          aria-label="About this deal"
          className="flex flex-col gap-5 border-t p-(--card-spacing) md:p-6 lg:border-s lg:border-t-0"
        >
          <dl className="grid grid-cols-[6.5rem_minmax(0,1fr)] gap-x-3 gap-y-2 text-sm">
            <dt className="text-muted-foreground">Company</dt>
            <dd className="font-medium">{saved.company}</dd>
            <dt className="text-muted-foreground">Deal</dt>
            <dd className="font-mono text-xs leading-5">{saved.id}</dd>
            <dt className="text-muted-foreground">Opened</dt>
            <dd className="tabular-nums">{saved.createdOn}</dd>
            <dt className="text-muted-foreground">Last activity</dt>
            <dd className="tabular-nums">{saved.lastActivity}</dd>
          </dl>
          <div className="flex flex-col gap-2 border-t pt-4">
            <h3 className="text-sm font-semibold">
              Changes <span className="font-normal text-muted-foreground tabular-nums">({changes.length})</span>
            </h3>
            {changes.length ? (
              <ul className="flex flex-col gap-1.5 text-sm">
                {changes.map((key) => (
                  // Spaces between the parts, so a screen reader hears words rather than one run.
                  <li key={key} className="flex flex-wrap items-center gap-x-1.5">
                    <span className="text-muted-foreground">{NAMES[key]}</span>{" "}
                    <del className="decoration-muted-foreground/60">{label(key, pick(saved)[key])}</del>{" "}
                    <ArrowRightIcon aria-hidden="true" className="size-3.5 text-muted-foreground" />
                    <span className="sr-only">to</span>{" "}
                    <ins className="font-medium no-underline">{label(key, values[key])}</ins>
                  </li>
                ))}
              </ul>
            ) : (
              <p className="text-sm text-muted-foreground">
                Nothing yet. Each field you change is listed here, from and to.
              </p>
            )}
          </div>
        </aside>
      </CardContent>

      <CardFooter className="flex-wrap gap-x-4 gap-y-2">
        <p role="status" aria-live="polite" className="flex min-w-0 flex-1 items-center gap-2 text-sm">
          {said ? (
            <>
              <CircleCheckIcon aria-hidden="true" className="size-4 shrink-0 text-success" />
              {said}
            </>
          ) : null}
        </p>
        {refusal ? (
          <Callout variant="danger" role="alert" title="The deal was not saved" className="basis-full">
            {refusal}
          </Callout>
        ) : null}
        <div className="ms-auto flex items-center gap-2">
          {/* Off once there is nothing to discard — including the moment it is pressed — but it keeps the focus it was pressed with. */}
          <Button
            type="button"
            variant="ghost"
            disabled={!changes.length || pending}
            focusableWhenDisabled
            onClick={() => {
              setValues(pick(saved))
              setError(null)
            }}
          >
            Discard changes
          </Button>
          <Button type="submit" disabled={pending} focusableWhenDisabled aria-busy={pending || undefined}>
            {pending ? <Spinner aria-hidden="true" /> : null}
            Save deal
          </Button>
        </div>
      </CardFooter>
    </form>
  )
}

/**
 * What `form-layouts-02` edits: one deal in `db.deals` — the largest still in
 * negotiation — with the people who can own it (the active `db.members`,
 * with their faces) and the stages and sources a deal can be in. `saveDeal`
 * is what the section's server function calls: it reads the deal again,
 * refuses to touch one that has closed, checks every field against the rules
 * of the stage it is moving to, and writes the row.
 *
 * Selectors and the one write, reading `db` inside functions on the server.
 * The island takes the record as plain props and never imports this module.
 */
import { REFERENCE_DATE, db, type Deal, type Result } from "@/lib/sample-data"

export type { Result }

export type Stage = Deal["stage"]

/** The stages in the order a deal moves through them, with how often a deal at each one closes. */
export const STAGES: { value: Stage; label: string; odds: number }[] = [
  { value: "lead", label: "Lead", odds: 10 },
  { value: "qualified", label: "Qualified", odds: 25 },
  { value: "proposal", label: "Proposal", odds: 50 },
  { value: "negotiation", label: "Negotiation", odds: 75 },
  { value: "won", label: "Won", odds: 100 },
  { value: "lost", label: "Lost", odds: 0 },
]

export const SOURCES: { value: Deal["source"]; label: string }[] = [
  { value: "inbound", label: "Inbound" },
  { value: "outbound", label: "Outbound" },
  { value: "referral", label: "Referral" },
  { value: "partner", label: "Partner" },
  { value: "event", label: "Event" },
]

/** A deal as the form holds it: money in cents, the close date as the calendar day it falls on. */
export type DealRecord = {
  id: string
  name: string
  company: string
  stage: Stage
  amountCents: number
  probability: number
  /** "2026-10-30": the UTC day it is forecast to close. */
  expectedClose: string
  owner: string
  source: Deal["source"]
  createdOn: string
  lastActivity: string
}

export type DealInput = Omit<DealRecord, "id" | "company" | "createdOn" | "lastActivity">

export type Owner = { id: string; name: string; face?: string }

const DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })
const isoDay = (date: Date) => date.toISOString().slice(0, 10)
const closed = (stage: Stage) => stage === "won" || stage === "lost"

function record(deal: Deal): DealRecord {
  return {
    id: deal.id,
    name: deal.name,
    company: deal.company,
    stage: deal.stage,
    amountCents: deal.amountCents,
    probability: deal.probability,
    expectedClose: isoDay(deal.expectedCloseAt),
    owner: deal.owner,
    source: deal.source,
    createdOn: DAY.format(deal.createdAt),
    lastActivity: DAY.format(deal.lastActivityAt),
  }
}

/** Today as a calendar day, in UTC: the first day an open deal can close on. */
export function today(): string {
  return isoDay(REFERENCE_DATE)
}

/**
 * The deal the form edits: the largest one still in negotiation — or, once
 * none is (each save that moves it on uses one up), the largest one still
 * open. Null once every deal has closed, and the section says so.
 */
export function dealRecord(): DealRecord | null {
  const deals = db.deals.all()
  const largest = (fits: (deal: Deal) => boolean) =>
    deals.filter(fits).sort((a, b) => b.amountCents - a.amountCents)[0]
  const deal = largest((entry) => entry.stage === "negotiation") ?? largest((entry) => !closed(entry.stage))
  return deal ? record(deal) : null
}

/** Everyone who can own a deal: the active members, A to Z. */
export function owners(): Owner[] {
  return db.members
    .all()
    .filter((member) => member.status === "active")
    .sort((a, b) => a.name.localeCompare(b.name))
    .map((member) => ({ id: member.id, name: member.name, face: member.avatarUrl }))
}

const refuse = (message: string, field?: keyof DealInput): Result<never> => ({
  ok: false,
  error: { code: field ? "invalid_input" : "refused", message, ...(field ? { field } : {}) },
})

/** The most a deal can be worth here, in cents: $100,000,000, far past any row, well inside a safe integer. */
const MAX_AMOUNT_CENTS = 100_000_000_00

/** How far ahead an open deal can be forecast to close, in years. */
const HORIZON_YEARS = 5

/** "2026-10-30" when it names a real calendar day; null for anything else — "2027-02-31" included, which Date.parse rolls into March. */
function calendarDay(value: unknown): string | null {
  if (typeof value !== "string" || !/^\d{4}-\d{2}-\d{2}$/.test(value)) return null
  const day = new Date(`${value}T00:00:00Z`)
  return !Number.isNaN(day.getTime()) && isoDay(day) === value ? value : null
}

/**
 * Saves the deal after reading it again. A deal that has closed — won or lost
 * — is not edited here, whatever the form says. Every field is checked
 * against the stage the deal is moving to: an open deal closes between today
 * and five years from now and has odds between 1 and 99; a won deal is 100
 * and a lost one 0, whatever was sent, and either closed between the day it
 * opened and today. The owner has to be an active member. Answers with the
 * deal as it now stands.
 *
 * The types are erased at the action boundary, so the shape is checked too:
 * an id and a plain object, a name that is text, money as a safe whole number
 * of cents under the cap, odds as a whole number, a close date that is a real
 * day. Anything else is refused on its field, never thrown on.
 */
export async function saveDeal(id: string, input: DealInput): Promise<Result<DealRecord>> {
  if (typeof id !== "string" || typeof input !== "object" || input === null || Array.isArray(input))
    return refuse("That is not a deal this form sends, so nothing was saved.")
  const deal = await db.deals.get(id)
  if (!deal) return refuse("That deal no longer exists, so nothing was saved.")
  if (closed(deal.stage))
    return refuse(
      `${deal.name} was ${deal.stage} on ${DAY.format(deal.expectedCloseAt)} and is closed. Reopen it from the pipeline first.`
    )

  if (typeof input.name !== "string" || !input.name.trim()) return refuse("Give the deal a name.", "name")
  const name = input.name.trim()
  if (name.length > 80) return refuse("Keep the name to 80 characters.", "name")
  const amountCents = input.amountCents
  if (!Number.isSafeInteger(amountCents) || amountCents <= 0 || amountCents > MAX_AMOUNT_CENTS)
    return refuse("Enter what the deal is worth, more than $0 and up to $100,000,000.", "amountCents")
  const stage = STAGES.find((entry) => entry.value === input.stage)
  if (!stage) return refuse("Pick a stage.", "stage")

  const probability = stage.value === "won" ? 100 : stage.value === "lost" ? 0 : input.probability
  if (!closed(stage.value) && (!Number.isInteger(probability) || probability < 1 || probability > 99))
    return refuse("An open deal's odds are a whole number from 1 to 99%.", "probability")

  const expectedClose = calendarDay(input.expectedClose)
  if (!expectedClose) return refuse("Pick the day it is expected to close.", "expectedClose")
  const today = isoDay(REFERENCE_DATE)
  const horizon = new Date(REFERENCE_DATE)
  horizon.setUTCFullYear(horizon.getUTCFullYear() + HORIZON_YEARS)
  const opened = isoDay(deal.createdAt)
  if (!closed(stage.value) && expectedClose < today)
    return refuse(`An open deal closes today or later: pick ${DAY.format(REFERENCE_DATE)} or after.`, "expectedClose")
  if (!closed(stage.value) && expectedClose > isoDay(horizon))
    return refuse(
      `An open deal is forecast within ${HORIZON_YEARS} years: pick ${DAY.format(horizon)} or before.`,
      "expectedClose"
    )
  if (closed(stage.value) && expectedClose > today)
    return refuse(
      `A deal that is ${stage.value} has closed: its date is ${DAY.format(REFERENCE_DATE)} or earlier.`,
      "expectedClose"
    )
  if (closed(stage.value) && expectedClose < opened)
    return refuse(`A deal closes after it opened: pick ${DAY.format(deal.createdAt)} or after.`, "expectedClose")

  if (!owners().some((owner) => owner.id === input.owner))
    return refuse("Pick an active member to own the deal.", "owner")
  const source = SOURCES.find((entry) => entry.value === input.source)
  if (!source) return refuse("Pick where the deal came from.", "source")

  const saved = await db.deals.update(id, {
    name,
    amountCents,
    stage: stage.value,
    probability,
    expectedCloseAt: new Date(`${expectedClose}T00:00:00Z`),
    owner: input.owner,
    source: source.value,
    lastActivityAt: REFERENCE_DATE,
  })
  if (!saved.ok) return saved
  return { ok: true, data: record(saved.data) }
}

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

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

import { EmployeeRecordForm } from "./form-layouts-03.client"
import {
  LOCATIONS,
  TIME_ZONES,
  companyDomain,
  departments,
  saveEmployee,
  teamRecords,
  type EmployeeInput,
  type EmployeeRecord,
  type Result,
} from "./form-layouts-03.data"

/**
 * A long form in one framed card: a person's whole record in four stacked
 * groups — who they are, their job, where and when they work, who to call —
 * with the groups listed beside it on a wide screen. A bar with Save and
 * Discard appears at the foot of the screen as soon as anything changes, and
 * nothing is lost by accident: another record, or leaving the page, asks
 * first while there are changes.
 *
 * A server component. It reads the records through `./form-layouts-03.data`
 * and hands the island `save`, a server function defined here that reads the
 * row again before it writes it. Which records it may write is bound here on
 * the server — the people this card drew — so the id the page sends picks
 * one of them, and an id the card never showed is refused. The island draws
 * the card's strip too, because the record it is on is chosen there. With
 * nobody on the team there is no record to open, and the card says so.
 */
export function FormLayouts03() {
  const titleId = React.useId()
  const records = teamRecords()
  const shown = records.map((record) => record.id)

  async function save(id: string, input: EmployeeInput): Promise<Result<EmployeeRecord>> {
    "use server"
    return saveEmployee(id, input, shown)
  }

  return (
    <section
      data-section="form-layouts-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 className="overflow-visible">
          {records.length ? (
            <EmployeeRecordForm
              titleId={titleId}
              records={records}
              departments={departments()}
              locations={LOCATIONS}
              timeZones={TIME_ZONES}
              domain={companyDomain()}
              save={save}
            />
          ) : (
            <>
              <CardHeader>
                <CardTitle>
                  <h2 id={titleId}>Employee record</h2>
                </CardTitle>
                <CardDescription>Everything People keeps about someone on the design team.</CardDescription>
              </CardHeader>
              <CardContent>
                <EmptyState
                  icon={<UsersIcon aria-hidden="true" />}
                  title="Nobody is on the design team"
                  description="Records open here once someone joins it."
                />
              </CardContent>
            </>
          )}
        </Card>
      </div>
    </section>
  )
}

export default FormLayouts03

"use client"

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

import { cn } from "@/lib/utils"
import { ActionBar } from "@/components/ui/action-bar"
import { Callout } from "@/components/ui/callout"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ConfirmDialog } from "@/components/ui/confirm-dialog"
import { Field, FieldDescription, FieldError, FieldLabel, FieldLegend, FieldSet } from "@/components/ui/field"
import { FormSection } from "@/components/ui/form-section"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

import type { EmployeeInput, EmployeeRecord, Result } from "./form-layouts-03.data"

type Key = keyof EmployeeInput
type Option = { value: string; label: string }

/** The four groups of the record, in order, and the fields each holds. */
const group = (id: string, title: string, description: string, fields: Key[]) => ({ id, title, description, fields })
const GROUPS = [
  group("personal", "Personal", "How they are named and reached.", ["fullName", "preferredName", "email", "phone"]),
  group("job", "Job", "What they do, and since when.", ["title", "department", "type", "startDate"]),
  group("where", "Where and when", "Where they work from, and whose clock they keep.", ["location", "timeZone"]),
  group("emergency", "Emergency contact", "Who People calls if something happens at work.", [
    "emergencyName",
    "emergencyPhone",
  ]),
]

const inputOf = (record: EmployeeRecord): EmployeeInput => {
  const input: Partial<EmployeeRecord> = { ...record }
  delete input.id
  return input as EmployeeInput
}

export type EmployeeRecordFormProps = {
  titleId: string
  records: EmployeeRecord[]
  departments: string[]
  locations: readonly Option[]
  timeZones: string[]
  domain: string
  save: (id: string, input: EmployeeInput) => Promise<Result<EmployeeRecord>>
}

/**
 * A long record in four groups, with a bar that appears at the foot of the
 * screen the moment anything differs from what is saved: how many changes,
 * Save and Discard. Leaving loses nothing by accident — switching to another
 * person's record while this one has changes asks first, and so does closing
 * or reloading the page. On a wide screen the groups are listed beside the
 * form, each with how many of its fields have changed.
 */
export function EmployeeRecordForm(props: EmployeeRecordFormProps) {
  const { titleId, records, departments, locations, timeZones, domain, save } = props
  const uid = React.useId()
  const id = (key: string) => `${uid}-${key}`
  const form = React.useRef<HTMLFormElement>(null)
  const [stored, setStored] = React.useState(records)
  const [personId, setPersonId] = React.useState(records[0].id)
  const person = stored.find((entry) => entry.id === personId) ?? stored[0]
  const [values, setValues] = React.useState<EmployeeInput>(() => inputOf(person))
  const [asked, setAsked] = React.useState<string | null>(null)
  const [error, setError] = React.useState<{ field: string; message: string } | null>(null)
  const [refusal, setRefusal] = React.useState<string | null>(null)
  const [pending, setPending] = React.useState(false)
  const [said, setSaid] = React.useState("")

  const changed = (Object.keys(values) as Key[]).filter((key) => values[key] !== inputOf(person)[key])
  const dirty = changed.length > 0
  const plural = changed.length === 1 ? "change" : "changes"
  const unsaved = `${changed.length} unsaved ${plural}`

  // Closing or reloading the tab with changes asks the browser to ask.
  React.useEffect(() => {
    if (!dirty) return
    const hold = (event: BeforeUnloadEvent) => {
      event.preventDefault()
      event.returnValue = ""
    }
    window.addEventListener("beforeunload", hold)
    return () => window.removeEventListener("beforeunload", hold)
  }, [dirty])

  // After a render: a refusal puts the focus in its field. Otherwise a focus the bar dropped — it closes once
  // nothing is unsaved, and disables its buttons while it saves — goes back to the field changed last.
  const [lastEdited, setLastEdited] = React.useState<Key>("fullName")
  const [focusRequest, setFocusRequest] = React.useState<{ key: Key; always: boolean; n: number } | null>(null)
  const focusField = (key: Key, always = false) => setFocusRequest((last) => ({ key, always, n: (last?.n ?? 0) + 1 }))
  React.useEffect(() => {
    if (!focusRequest) return
    const active = document.activeElement
    if (!focusRequest.always && active && active !== document.body) return
    const target = document.getElementById(`${uid}-${focusRequest.key}`)
    // A radio group's id is on the group: its chosen radio takes the focus.
    const control = target?.matches("input, select, textarea")
      ? target
      : target?.querySelector<HTMLElement>('[role="radio"][aria-checked="true"], [role="radio"]')
    control?.focus()
  }, [focusRequest, uid])

  function open(next: string) {
    setPersonId(next)
    setValues(inputOf(stored.find((entry) => entry.id === next) ?? stored[0]))
    setError(null)
    setRefusal(null)
    setSaid("")
  }

  function change(key: Key, value: string) {
    setLastEdited(key)
    setValues((current) => ({ ...current, [key]: value }) as EmployeeInput)
    if (error?.field === key) setError(null)
    setSaid("")
  }

  async function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    // Enter in any field submits the form; with nothing to save, or a save already out, it does nothing.
    if (!dirty || pending) return
    setError(null)
    setRefusal(null)
    setPending(true)
    let result: Result<EmployeeRecord>
    try {
      result = await save(person.id, values)
    } catch {
      // The call never arrived — a dropped connection, or a page older than the server.
      result = { ok: false, error: { code: "network", message: "The record did not reach the server. Try again." } }
    } finally {
      setPending(false)
    }
    if (!result.ok) {
      const field = result.error.field as Key | undefined
      if (!field) {
        setRefusal(result.error.message)
        return focusField(lastEdited)
      }
      setError({ field, message: result.error.message })
      return focusField(field, true)
    }
    setStored((list) => list.map((entry) => (entry.id === result.data.id ? result.data : entry)))
    setValues(inputOf(result.data))
    setSaid(`Saved ${result.data.fullName}'s record: ${changed.length} ${plural}.`)
    focusField(lastEdited)
  }

  const wire = (key: Key, hint?: string) => ({
    id: id(key),
    "aria-invalid": error?.field === key || undefined,
    "aria-describedby":
      [hint ? id(`${key}-hint`) : "", error?.field === key ? id(`${key}-error`) : ""].filter(Boolean).join(" ") ||
      undefined,
  })
  const after = (key: Key, hint?: string) => (
    <>
      {hint ? <FieldDescription id={id(`${key}-hint`)}>{hint}</FieldDescription> : null}
      {error?.field === key ? <FieldError id={id(`${key}-error`)}>{error.message}</FieldError> : null}
    </>
  )
  const marker = (words: string) => <span className="font-normal text-muted-foreground">({words})</span>
  const text = (
    key: Key,
    label: string,
    opts: { required?: boolean; hint?: string; type?: string; mono?: boolean } = {}
  ) => (
    <Field key={key}>
      <FieldLabel htmlFor={id(key)}>
        {label} {marker(opts.required ? "required" : "optional")}
      </FieldLabel>
      <Input
        {...wire(key, opts.hint)}
        type={opts.type ?? "text"}
        required={opts.required}
        value={String(values[key])}
        className={cn(opts.mono && "font-mono")}
        onChange={(event) => change(key, event.target.value)}
      />
      {after(key, opts.hint)}
    </Field>
  )
  const select = (key: Key, label: string, options: Option[]) => (
    <Field key={key}>
      <FieldLabel htmlFor={id(key)}>{label}</FieldLabel>
      <NativeSelect
        {...wire(key)}
        className="w-full"
        value={String(values[key])}
        onChange={(event) => change(key, event.target.value)}
      >
        {options.map((option) => (
          <NativeSelectOption key={option.value} value={option.value}>
            {option.label}
          </NativeSelectOption>
        ))}
      </NativeSelect>
      {after(key)}
    </Field>
  )
  const radios = (key: Key, legend: string, options: readonly Option[]) => (
    <FieldSet key={key}>
      <FieldLegend variant="label" id={id(`${key}-legend`)}>
        {legend}
      </FieldLegend>
      <RadioGroup
        id={id(key)}
        aria-labelledby={id(`${key}-legend`)}
        value={String(values[key])}
        onValueChange={(value) => change(key, String(value))}
        className="gap-2.5"
      >
        {options.map((option) => (
          <div key={option.value} className="flex items-center gap-2.5">
            <RadioGroupItem id={id(`${key}-${option.value}`)} value={option.value} />
            <Label htmlFor={id(`${key}-${option.value}`)} className="font-normal">
              {option.label}
            </Label>
          </div>
        ))}
      </RadioGroup>
      {after(key)}
    </FieldSet>
  )

  const FIELDS: Record<Key, React.ReactNode> = {
    fullName: text("fullName", "Full name", { required: true }),
    preferredName: text("preferredName", "Preferred name", {
      hint: "What colleagues call them, if not their full name.",
    }),
    email: text("email", "Work email", { required: true, type: "email", hint: `Ends in @${domain}.` }),
    phone: text("phone", "Phone", { type: "tel" }),
    title: text("title", "Job title", { required: true }),
    department: select("department", "Department", departments.map((value) => ({ value, label: value }))),
    type: radios("type", "Contract", [
      { value: "fulltime", label: "Full time" },
      { value: "contract", label: "Contract" },
    ]),
    startDate: text("startDate", "Start date", { required: true, type: "date" }),
    location: radios("location", "Works", locations),
    timeZone: select("timeZone", "Time zone", timeZones.map((value) => ({ value, label: value.replace("_", " ") }))),
    emergencyName: text("emergencyName", "Contact's name"),
    emergencyPhone: text("emergencyPhone", "Contact's phone", { type: "tel", hint: "Needed once a name is given." }),
  }

  return (
    <>
      {/* The switcher sits beside the title from sm, and under the description on a phone. */}
      <CardHeader className="sm:grid-cols-[minmax(0,1fr)_auto] sm:gap-x-4">
        <CardTitle>
          <h2 id={titleId}>Employee record</h2>
        </CardTitle>
        <CardDescription>Everything People keeps about someone on the design team.</CardDescription>
        <div className="flex items-center gap-2 pt-1.5 sm:col-start-2 sm:row-span-2 sm:row-start-1 sm:pt-0">
          <Label htmlFor={id("person")} className="text-muted-foreground">
            Editing
          </Label>
          {/* Off while a save is out, so its answer can only land on the record it was for. */}
          <NativeSelect
            id={id("person")}
            size="sm"
            value={person.id}
            disabled={pending}
            className="min-w-0"
            onChange={(event) => (dirty ? setAsked(event.target.value) : open(event.target.value))}
          >
            {stored.map((entry) => (
              <NativeSelectOption key={entry.id} value={entry.id}>
                {entry.fullName}
              </NativeSelectOption>
            ))}
          </NativeSelect>
        </div>
      </CardHeader>

      {/* Visible overflow, so the bar and the list of groups can stick to the screen as the record scrolls. */}
      <CardContent className="grid overflow-visible p-0 lg:grid-cols-[13rem_minmax(0,1fr)]">
        <nav aria-label="Parts of the record" className="hidden border-e p-6 lg:block">
          <ul className="sticky top-6 flex flex-col gap-1 text-sm">
            {GROUPS.map((group) => {
              const count = group.fields.filter((key) => changed.includes(key)).length
              return (
                <li key={group.id}>
                  <a
                    href={`#${id(group.id)}`}
                    className="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 focus-ring hover:bg-muted"
                  >
                    {group.title}
                    {count ? <span className="text-xs text-muted-foreground tabular-nums">{count} changed</span> : null}
                  </a>
                </li>
              )
            })}
          </ul>
        </nav>

        <form ref={form} noValidate onSubmit={submit} aria-labelledby={titleId} className="flex min-w-0 flex-col">
          {/* The default button, so Enter in a field saves. Out of the tab order and hidden from assistive tech
              (the bar's Save is the one to press), but laid out: a browser submits implicitly only through one
              it renders. */}
          <button type="submit" tabIndex={-1} aria-hidden="true" className="sr-only">
            Save record
          </button>
          <div className="flex flex-col divide-y border-b">
            {GROUPS.map((group) => (
              <FormSection as="h3"
                key={group.id}
                id={id(group.id)}
                title={group.title}
                description={group.description}
                className="scroll-mt-6 p-(--card-spacing) md:p-6"
              >
                <div className="grid gap-4 sm:grid-cols-2">{group.fields.map((key) => FIELDS[key])}</div>
              </FormSection>
            ))}
          </div>
          {refusal ? (
            <Callout
              variant="danger"
              role="alert"
              title="The record was not saved"
              className="mx-(--card-spacing) md:mx-6"
            >
              {refusal}
            </Callout>
          ) : null}
          <p
            role="status"
            aria-live="polite"
            className="flex min-h-5 items-center gap-2 px-(--card-spacing) py-3 text-sm md:px-6"
          >
            {said ? (
              <>
                <CircleCheckIcon aria-hidden="true" className="size-4 shrink-0 text-success" />
                {said}
              </>
            ) : null}
          </p>
          <ActionBar
            open={dirty}
            message={unsaved}
            saving={pending}
            saveText="Save record"
            onSave={() => form.current?.requestSubmit()}
            onDiscard={() => {
              open(person.id)
              focusField(lastEdited)
            }}
            className="mb-4 w-[calc(100%-2rem)] [&_[data-slot=action-bar-message]]:whitespace-normal"
          />
        </form>
      </CardContent>

      <ConfirmDialog
        open={asked !== null}
        onOpenChange={(next) => !next && setAsked(null)}
        title={`Discard ${unsaved}?`}
        description={`${person.fullName}'s record has changes that are not saved. Opening another record throws them away.`}
        cancelText="Keep editing"
        confirmText="Discard and switch"
        variant="destructive"
        onConfirm={() => {
          if (asked) open(asked)
          setAsked(null)
        }}
      />
    </>
  )
}