Tables

import * as React from "react"

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

import { LeadsTable } from "./tables-01.client"
import { exportDate, leadRows } from "./tables-01.data"

/**
 * Every lead in one compact table on the page ground: the strip names the
 * book and what is still in play, and the sheet holds a search box, two
 * facets, sortable columns, paging buttons and a selection that can be copied
 * or saved as a CSV.
 *
 * A server component: the rows come from `./tables-01.data`, and the island
 * takes them as props with the heading's id, which names the table.
 */
export function Tables01() {
  const titleId = React.useId()
  const rows = leadRows()
  const open = rows.filter((row) => row.status !== "won" && row.status !== "lost")
  const inPlay = open.reduce((total, row) => total + row.valueCents, 0)

  return (
    <section
      data-section="tables-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}>Leads</h2>
            </CardTitle>
            <CardDescription className="tabular-nums">
              {formatNumber(open.length)} open of {formatNumber(rows.length)} ·{" "}
              {formatCurrency(inPlay / 100, "USD", { maximumFractionDigits: 0 })} still in play
            </CardDescription>
          </CardHeader>
          <CardContent className="p-0">
            <LeadsTable rows={rows} titleId={titleId} exportDate={exportDate()} />
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default Tables01

"use client"

import * as React from "react"
import { useTable } from "@tanstack/react-table"
import { ClipboardCopyIcon, DownloadIcon, SearchIcon, XIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
import { downloadText, rowsToCsv } from "@/lib/export"
import { formatCurrency, formatNumber } from "@/lib/format"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DataTableColumnHeader,
  DataTableFacetedFilter,
  DataTablePagination,
  dataTableDefaultColumn,
  dataTableFeatures,
  type DataTableColumnDef,
} from "@/components/ui/data-table"
import { ariaSortOf } from "@/components/ui/data-table/columns"
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group"
import { StatusBadge, type StatusVariant } from "@/components/ui/status-badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { UserCell } from "@/components/ui/user-cell"

import type { LeadRow, LeadSource, LeadStatus } from "./tables-01.data"

export const STATUS_LABELS: Record<LeadStatus, string> = {
  new: "New",
  contacted: "Contacted",
  qualified: "Qualified",
  won: "Won",
  lost: "Lost",
}

/** Where a lead came from, in the words a sales team uses; no network is named. */
export const SOURCE_LABELS: Record<LeadSource, string> = {
  website: "Website",
  referral: "Referral",
  ads: "Paid ads",
  social: "Social",
  event: "Event",
}

const TONES: Record<LeadStatus, StatusVariant> = {
  new: "info",
  contacted: "neutral",
  qualified: "primary",
  won: "success",
  lost: "danger",
}

const DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" })
const money = (cents: number) => formatCurrency(cents / 100, "USD", { maximumFractionDigits: 0 })
const plural = (count: number, one: string, many = `${one}s`) => `${formatNumber(count)} ${count === 1 ? one : many}`

/**
 * The pinned column below md: it keeps the lead in view while the figures
 * scroll past, on an opaque plane in every state — at rest the card, under
 * the pointer the same half-muted wash the row takes, selected the accent
 * tint — so nothing scrolling underneath ever shows through it.
 */
const PINNED =
  "max-md:sticky max-md:start-0 max-md:z-10 max-md:after:absolute max-md:after:inset-y-0 max-md:after:end-0 max-md:after:w-px max-md:after:bg-border"
const PINNED_CELL = cn(
  PINNED,
  "bg-card group-hover/row:bg-[color-mix(in_oklab,var(--muted)_50%,var(--card))] group-data-[state=selected]/row:bg-brand-muted"
)

const columns: DataTableColumnDef<LeadRow>[] = [
  {
    id: "lead",
    accessorFn: (row) => row.name,
    enableHiding: false,
    header: ({ column, table }) => (
      <div className="flex items-center gap-3">
        <Checkbox
          checked={table.getIsAllPageRowsSelected()}
          indeterminate={table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected()}
          onCheckedChange={(checked) => table.toggleAllPageRowsSelected(checked)}
          aria-label="Select every lead on this page"
        />
        <DataTableColumnHeader column={column} title="Lead" />
      </div>
    ),
    cell: ({ row }) => (
      <div className="flex items-center gap-3">
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(checked) => row.toggleSelected(checked)}
          aria-label={`Select ${row.original.name}, ${row.original.company}`}
        />
        <UserCell size="sm" name={row.original.name} description={row.original.company} src={row.original.avatarUrl} className="max-w-36 sm:max-w-52" />
      </div>
    ),
  },
  {
    accessorKey: "status",
    filterFn: "arrHas",
    enableSorting: false,
    enableHiding: false,
    header: () => "Status",
    cell: ({ row }) => (
      <StatusBadge size="sm" status={row.original.status} variant={TONES[row.original.status]} label={STATUS_LABELS[row.original.status]} />
    ),
  },
  {
    accessorKey: "source",
    filterFn: "arrHas",
    enableSorting: false,
    enableHiding: false,
    header: () => "Source",
    cell: ({ row }) => <span className="text-muted-foreground">{SOURCE_LABELS[row.original.source]}</span>,
  },
  {
    accessorKey: "owner",
    enableHiding: false,
    header: ({ column }) => <DataTableColumnHeader column={column} title="Owner" />,
  },
  {
    accessorKey: "valueCents",
    enableHiding: false,
    header: ({ column }) => <DataTableColumnHeader column={column} title="Value" />,
    cell: ({ row }) => money(row.original.valueCents),
    meta: { align: "right" },
  },
  {
    accessorKey: "createdAt",
    enableHiding: false,
    header: ({ column }) => <DataTableColumnHeader column={column} title="Created" />,
    cell: ({ row }) => <time dateTime={row.original.createdAt.toISOString()}>{DAY.format(row.original.createdAt)}</time>,
    meta: { align: "right" },
  },
  {
    id: "next",
    accessorFn: (row) => row.nextActionAt?.getTime() ?? 0,
    enableSorting: false,
    enableHiding: false,
    header: () => "Next step",
    cell: ({ row }) => {
      const next = row.original.nextActionAt
      if (!next) return <span className="text-muted-foreground">—</span>
      return (
        <time dateTime={next.toISOString()} className={cn(row.original.overdue && "font-medium text-danger")}>
          {row.original.overdue ? `Overdue, ${DAY.format(next)}` : DAY.format(next)}
        </time>
      )
    },
    meta: { align: "right" },
  },
]

const STATUS_OPTIONS = (Object.keys(STATUS_LABELS) as LeadStatus[]).map((value) => ({ value, label: STATUS_LABELS[value] }))
const SOURCE_OPTIONS = (Object.keys(SOURCE_LABELS) as LeadSource[]).map((value) => ({ value, label: SOURCE_LABELS[value] }))

const matches = (row: LeadRow, query: string) =>
  [row.name, row.company, row.email].some((field) => field.toLowerCase().includes(query))

/**
 * The leads table: a search box and two facets over compact rows, sorted by
 * the column headers, paged by buttons, and a selection that survives both —
 * copy the selected leads' addresses or save them as a CSV. One status line
 * says how many rows the filters leave, and then what the last bulk action
 * did; it never moves focus.
 */
export function LeadsTable({ rows, titleId, exportDate }: { rows: LeadRow[]; titleId: string; exportDate: string }) {
  const [query, setQuery] = React.useState("")
  // A notice answers the action that raised it, for as long as the view it
  // was raised on lasts: the next change of selection or filters hands the
  // line back to the count.
  const [notice, setNotice] = React.useState<{ text: string; view: string } | null>(null)
  const { copy } = useCopyToClipboard()

  const needle = query.trim().toLowerCase()
  const data = React.useMemo(() => (needle ? rows.filter((row) => matches(row, needle)) : rows), [rows, needle])

  const table = useTable({
    features: dataTableFeatures,
    columns,
    data,
    getRowId: (row) => row.id,
    enableRowSelection: true,
    defaultColumn: dataTableDefaultColumn,
    initialState: { sorting: [{ id: "createdAt", desc: true }], pagination: { pageIndex: 0, pageSize: 10 } },
  })

  const selectedIds = Object.keys(table.state.rowSelection).filter((id) => table.state.rowSelection[id])
  const selected = rows.filter((row) => selectedIds.includes(row.id))
  const visible = table.getFilteredRowModel().rows.length
  const filtered = table.state.columnFilters.length > 0 || needle !== ""

  const view = `${selectedIds.join(",")}|${visible}|${needle}`
  const say = (text: string) => setNotice({ text, view })

  const summary =
    visible === rows.length ? `${plural(rows.length, "lead")}` : `${formatNumber(visible)} of ${plural(rows.length, "lead")}`

  async function copyEmails() {
    const ok = await copy(selected.map((row) => row.email).join(", "))
    say(
      ok
        ? `Copied ${plural(selected.length, "email address", "email addresses")}.`
        : "The browser blocked the clipboard, so nothing was copied."
    )
  }

  function exportCsv() {
    const filename = `leads-${exportDate}.csv`
    const csv = rowsToCsv(
      selected.map((row) => ({
        name: row.name,
        company: row.company,
        email: row.email,
        status: STATUS_LABELS[row.status],
        source: SOURCE_LABELS[row.source],
        owner: row.owner,
        value: (row.valueCents / 100).toFixed(2),
        created: row.createdAt.toISOString().slice(0, 10),
      })),
      [
        { key: "name", label: "Name" },
        { key: "company", label: "Company" },
        { key: "email", label: "Email" },
        { key: "status", label: "Status" },
        { key: "source", label: "Source" },
        { key: "owner", label: "Owner" },
        { key: "value", label: "Value (USD)" },
        { key: "created", label: "Created" },
      ]
    )
    const saved = downloadText(filename, csv)
    say(saved ? `Saved ${plural(selected.length, "lead")} to ${filename}.` : "This browser cannot save files from the page.")
  }

  function clearFilters() {
    setQuery("")
    table.resetColumnFilters()
  }

  return (
    <div data-slot="leads-table">
      <div className="flex flex-wrap items-center gap-2 border-b border-rule p-3">
        <InputGroup className="w-full sm:w-60">
          <InputGroupAddon>
            <SearchIcon aria-hidden="true" />
          </InputGroupAddon>
          <InputGroupInput
            type="search"
            value={query}
            onChange={(event) => setQuery(event.target.value)}
            placeholder="Name, company or email"
            aria-label="Search leads"
          />
        </InputGroup>
        <DataTableFacetedFilter column={table.getColumn("status")} title="Status" options={STATUS_OPTIONS} />
        <DataTableFacetedFilter column={table.getColumn("source")} title="Source" options={SOURCE_OPTIONS} />
        {filtered ? (
          <Button variant="ghost" size="sm" onClick={clearFilters}>
            Clear
            <XIcon data-icon="inline-end" aria-hidden="true" />
          </Button>
        ) : null}

        <div className="flex min-h-7 w-full items-center gap-2 sm:ml-auto sm:w-auto">
          {selected.length > 0 ? (
            <div role="group" aria-label="Selected leads" className="flex flex-wrap items-center gap-1.5">
              <span className="text-label font-medium tabular-nums">{formatNumber(selected.length)} selected</span>
              <Button variant="outline" size="sm" onClick={copyEmails}>
                <ClipboardCopyIcon data-icon="inline-start" aria-hidden="true" />
                Copy emails
              </Button>
              <Button variant="outline" size="sm" onClick={exportCsv}>
                <DownloadIcon data-icon="inline-start" aria-hidden="true" />
                Export CSV
              </Button>
              <Button variant="ghost" size="icon-sm" aria-label="Clear the selection" onClick={() => table.resetRowSelection()}>
                <XIcon aria-hidden="true" />
              </Button>
            </div>
          ) : null}
          <p role="status" aria-live="polite" className="text-xs text-muted-foreground tabular-nums">
            {notice?.view === view ? notice.text : summary}
          </p>
        </div>
      </div>

      <Table aria-labelledby={titleId} className="text-label">
        <TableHeader>
          {table.getHeaderGroups().map((group) => (
            <TableRow key={group.id} className="hover:bg-transparent">
              {group.headers.map((header, index) => {
                const align = header.column.columnDef.meta?.align
                return (
                  <TableHead
                    key={header.id}
                    aria-sort={ariaSortOf(header.column)}
                    className={cn(
                      "h-9 bg-surface px-3 text-foreground",
                      align === "right" && "text-right",
                      index === 0 && cn(PINNED, "bg-surface")
                    )}
                  >
                    <table.FlexRender header={header} />
                  </TableHead>
                )
              })}
            </TableRow>
          ))}
        </TableHeader>
        <TableBody>
          {table.getRowModel().rows.length === 0 ? (
            <TableRow className="hover:bg-transparent">
              <TableCell colSpan={columns.length} className="px-3 py-8 text-center">
                <p className="text-sm text-muted-foreground">No leads match these filters.</p>
                <Button variant="link" size="sm" onClick={clearFilters}>
                  Clear the filters
                </Button>
              </TableCell>
            </TableRow>
          ) : (
            table.getRowModel().rows.map((row) => (
              <TableRow key={row.id} data-state={row.getIsSelected() ? "selected" : undefined} className="group/row h-11">
                {row.getVisibleCells().map((cell, index) => {
                  const align = cell.column.columnDef.meta?.align
                  return (
                    <TableCell
                      key={cell.id}
                      className={cn("px-3 py-1.5", align === "right" && "text-right tabular-nums", index === 0 && PINNED_CELL)}
                    >
                      <table.FlexRender cell={cell} />
                    </TableCell>
                  )
                })}
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>

      <div className="border-t border-rule px-3 py-2.5">
        <DataTablePagination table={table} showSelectedCount={false} pageSizeOptions={[10, 20, 50]} />
      </div>
    </div>
  )
}

/**
 * What `tables-01` reads: every lead in `db.leads`, each with the rep who is
 * working it, as the compact table lists them. "Now" is `REFERENCE_DATE`, so a
 * follow-up that fell before it reads as overdue on the server and in the
 * browser alike.
 *
 * Selectors only, reading `db` inside functions and run on the server. The
 * island takes these rows as props; it never imports this module.
 */
import { REFERENCE_DATE, db, type Lead } from "@/lib/sample-data"

export type LeadStatus = Lead["status"]
export type LeadSource = Lead["source"]

/** One lead as a row of the table. */
export type LeadRow = {
  id: string
  name: string
  email: string
  company: string
  avatarUrl?: string
  status: LeadStatus
  source: LeadSource
  /** What the deal would be worth, in cents. */
  valueCents: number
  /** The rep working it, by name. */
  owner: string
  createdAt: Date
  /** The next follow-up, when one is booked. */
  nextActionAt?: Date
  /** True when the follow-up fell before `REFERENCE_DATE` and has not been done. */
  overdue: boolean
}

/** Every lead, newest first, with its rep's name and whether its follow-up is late. */
export function leadRows(): LeadRow[] {
  const members = new Map(db.members.all().map((member) => [member.id, member.name]))
  const now = REFERENCE_DATE.getTime()
  return db.leads
    .all()
    .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
    .map((lead) => ({
      id: lead.id,
      name: lead.name,
      email: lead.email,
      company: lead.company,
      avatarUrl: lead.avatarUrl,
      status: lead.status,
      source: lead.source,
      valueCents: lead.valueCents,
      owner: members.get(lead.ownerId) ?? "Unassigned",
      createdAt: lead.createdAt,
      nextActionAt: lead.nextActionAt ?? undefined,
      overdue: lead.nextActionAt ? lead.nextActionAt.getTime() < now : false,
    }))
}

/** The day the export is dated: `REFERENCE_DATE`, never the clock. */
export function exportDate(): string {
  return REFERENCE_DATE.toISOString().slice(0, 10)
}

import * as React from "react"

import { formatCurrency } from "@/lib/format"
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ProductArt } from "@/components/ui/product-art"

import { ExpandAll, OrderTable, OrdersView } from "./tables-02.client"
import { recentOrders } from "./tables-02.data"

const DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" })

/**
 * The newest orders as rows that open in place: each chevron shows the
 * order's lines with their pictures, its totals, how it was paid and where it
 * went, without leaving the table. The strip says what the page holds and
 * opens or closes every order on the page at once.
 *
 * A server component: it draws the card and its heading, the orders come
 * from `./tables-02.data`, and every product picture is drawn here and handed
 * to the island by product id. The island is what opens: the strip's Expand
 * all and the table on the card's sheet.
 */
export function Tables02() {
  const titleId = React.useId()
  const orders = recentOrders()
  const art: Record<string, React.ReactNode> = {}
  for (const line of orders.flatMap((order) => order.lines)) {
    art[line.productId] ??= <ProductArt name={line.name} category={line.category} className="rounded-md" />
  }
  const total = orders.reduce((sum, order) => sum + order.totalCents, 0)
  const oldest = orders.at(-1)?.placedAt

  return (
    <section
      data-section="tables-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">
        <OrdersView orders={orders}>
          <Card>
            <CardHeader>
              <CardTitle>
                <h2 id={titleId}>Recent orders</h2>
              </CardTitle>
              <CardDescription className="tabular-nums">
                {orders.length} orders{oldest ? ` since ${DAY.format(oldest)}` : ""} ·{" "}
                {formatCurrency(total / 100, "USD", { maximumFractionDigits: 0 })}
              </CardDescription>
              <CardAction>
                <ExpandAll />
              </CardAction>
            </CardHeader>
            {/* A container, so an open order's detail can hold at the sheet's width. */}
            <CardContent className="@container p-0">
              <OrderTable art={art} titleId={titleId} />
            </CardContent>
          </Card>
        </OrdersView>
      </div>
    </section>
  )
}

export default Tables02

"use client"

import * as React from "react"
import { ChevronRightIcon, ChevronsDownUpIcon, ChevronsUpDownIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { formatCurrency, formatNumber } from "@/lib/format"
import { Button } from "@/components/ui/button"
import { StatusBadge } from "@/components/ui/status-badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { UserCell } from "@/components/ui/user-cell"

import type { RecentOrder } from "./tables-02.data"

export const PAGE_SIZE = 8

const STATUS_TONES = { fulfilled: "success", refunded: "warning", paid: "info" } as const
const PAYMENT = { card: "Card", wallet: "Wallet", bank: "Bank transfer", cash: "Cash", voucher: "Gift voucher" } as const

const money = (cents: number) => formatCurrency(cents / 100)
const DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" })
const TIME = new Intl.DateTimeFormat("en-US", { hour: "2-digit", minute: "2-digit", hourCycle: "h23", timeZone: "UTC" })
const when = (date: Date) => `${DAY.format(date)}, ${TIME.format(date)}`
const lineCount = (count: number) => `${count} ${count === 1 ? "line" : "lines"}`

const HEAD = "h-10 bg-surface px-3 text-foreground"
// On a narrow phone the table scrolls sideways: the order stays put on an
// opaque plane that follows the row's own — the card, and the half-muted wash
// the kit's row takes on hover and while its order is open.
const PINNED =
  "max-md:sticky max-md:left-0 max-md:z-10 max-md:after:absolute max-md:after:inset-y-0 max-md:after:right-0 max-md:after:w-px max-md:after:bg-border"
const PLANE =
  "bg-card group-hover/row:bg-[color-mix(in_oklab,var(--muted)_50%,var(--card))] group-has-aria-expanded/row:bg-[color-mix(in_oklab,var(--muted)_50%,var(--card))]"

/**
 * What an order holds: its lines with their pictures, then the totals and
 * where it went. Where the table scrolls sideways — a phone narrower than
 * 390px — it holds still at the sheet's width, as the pinned order does, so
 * scrolling to the totals never slides the lines out of view.
 */
function OrderDetail({ order, art }: { order: RecentOrder; art: Record<string, React.ReactNode> }) {
  return (
    <div className="grid gap-3 px-3 py-3 max-md:sticky max-md:left-0 max-md:w-[100cqw] md:grid-cols-[minmax(0,1fr)_15rem] md:gap-6 md:ps-14">
      <ul aria-label={`Lines of ${order.number}`} className="divide-y divide-border overflow-hidden rounded-lg bg-card ring-1 ring-border">
        {order.lines.map((line) => (
          <li key={line.productId} className="flex items-center gap-3 px-3 py-2">
            <span className="w-9 shrink-0">{art[line.productId]}</span>
            <span className="flex min-w-0 flex-1 flex-col">
              <span className="truncate text-sm font-medium">{line.name}</span>
              <span className="truncate text-xs text-muted-foreground tabular-nums">
                <span className="font-mono">{line.sku}</span>
                {/* On a phone the quantity joins the SKU, leaving the name its room. */}
                <span className="sm:hidden">
                  {" "}
                  · {formatNumber(line.qty)} × {money(line.unitCents)}
                </span>
              </span>
            </span>
            <span className="text-xs whitespace-nowrap text-muted-foreground tabular-nums max-sm:hidden">
              {formatNumber(line.qty)} × {money(line.unitCents)}
            </span>
            <span className="w-20 text-right text-sm font-medium tabular-nums">{money(line.totalCents)}</span>
          </li>
        ))}
      </ul>
      <dl className="grid grid-cols-[minmax(0,1fr)_auto] content-start gap-x-4 gap-y-1 text-sm tabular-nums">
        <dt className="text-muted-foreground">Subtotal</dt>
        <dd className="text-right">{money(order.subtotalCents)}</dd>
        {order.discountCents > 0 ? (
          <>
            <dt className="text-muted-foreground">Discount</dt>
            <dd className="text-right">−{money(order.discountCents)}</dd>
          </>
        ) : null}
        {order.taxCents > 0 ? (
          <>
            <dt className="text-muted-foreground">Tax</dt>
            <dd className="text-right">{money(order.taxCents)}</dd>
          </>
        ) : null}
        <div className="col-span-2 grid grid-cols-subgrid border-t border-rule pt-1 font-medium">
          <dt>Total</dt>
          <dd className="text-right">{money(order.totalCents)}</dd>
        </div>
        <dt className="mt-2 text-muted-foreground">Paid by</dt>
        <dd className="mt-2 text-right">{PAYMENT[order.paymentMethod]}</dd>
        <dt className="text-muted-foreground">Ships to</dt>
        <dd className="text-right">{order.country}</dd>
        {order.fulfilledAt ? (
          <>
            <dt className="text-muted-foreground">Fulfilled</dt>
            <dd className="text-right">
              <time dateTime={order.fulfilledAt.toISOString()}>{when(order.fulfilledAt)} UTC</time>
            </dd>
          </>
        ) : null}
      </dl>
    </div>
  )
}

type Orders = {
  orders: RecentOrder[]
  shown: RecentOrder[]
  open: ReadonlySet<string>
  page: number
  pages: number
  allOpen: boolean
  setPage: React.Dispatch<React.SetStateAction<number>>
  toggle: (id: string) => void
  toggleAll: () => void
}

const OrdersContext = React.createContext<Orders | null>(null)

function useOrders(): Orders {
  const orders = React.useContext(OrdersContext)
  if (!orders) throw new Error("ExpandAll and OrderTable belong inside OrdersView")
  return orders
}

/**
 * Which page is in view and which orders are open, shared by the Expand all
 * button in the card's strip and the table on its sheet — the card itself,
 * its heading and its description are the server's, passed through as
 * children. The newest order of more than one line opens with the table, so
 * the reader sees what a row holds before they reach for a chevron; what is
 * open stays open across pages.
 */
export function OrdersView({ orders, children }: { orders: RecentOrder[]; children: React.ReactNode }) {
  const [page, setPage] = React.useState(0)
  const [open, setOpen] = React.useState<ReadonlySet<string>>(() => {
    const first = orders.slice(0, PAGE_SIZE).find((order) => order.lines.length > 1)
    return new Set(first ? [first.id] : [])
  })

  const pages = Math.max(1, Math.ceil(orders.length / PAGE_SIZE))
  const shown = orders.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE)
  const allOpen = shown.length > 0 && shown.every((order) => open.has(order.id))

  function toggle(id: string) {
    setOpen((current) => {
      const next = new Set(current)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

  function toggleAll() {
    setOpen((current) => {
      const next = new Set(current)
      for (const order of shown) {
        if (allOpen) next.delete(order.id)
        else next.add(order.id)
      }
      return next
    })
  }

  const value: Orders = { orders, shown, open, page, pages, allOpen, setPage, toggle, toggleAll }
  return <OrdersContext.Provider value={value}>{children}</OrdersContext.Provider>
}

/** Opens every order on the page in view, or closes them all again. */
export function ExpandAll() {
  const { allOpen, toggleAll } = useOrders()
  return (
    <Button variant="outline" size="sm" onClick={toggleAll}>
      {allOpen ? (
        <ChevronsDownUpIcon data-icon="inline-start" aria-hidden="true" />
      ) : (
        <ChevronsUpDownIcon data-icon="inline-start" aria-hidden="true" />
      )}
      {allOpen ? "Collapse all" : "Expand all"}
    </Button>
  )
}

/**
 * The recent orders, eight to a page, on the card's sheet. Each row opens in
 * place onto its lines, its totals and where it went: the chevron is a
 * disclosure button naming the order it opens, and the detail row it
 * controls stays in the table, hidden, so the reference always resolves.
 * Paging is two buttons and a polite line that says which orders are showing.
 */
export function OrderTable({ art, titleId }: { art: Record<string, React.ReactNode>; titleId: string }) {
  const { orders, shown, open, page, pages, setPage, toggle } = useOrders()
  const baseId = React.useId()
  const first = page * PAGE_SIZE + 1
  const last = Math.min((page + 1) * PAGE_SIZE, orders.length)

  return (
    <>
      <Table aria-labelledby={titleId}>
        <TableHeader>
          <TableRow className="hover:bg-transparent">
            <TableHead className={cn(HEAD, PINNED)}>Order</TableHead>
            <TableHead className={cn(HEAD, "hidden md:table-cell")}>Customer</TableHead>
            <TableHead className={cn(HEAD, "hidden md:table-cell")}>Placed</TableHead>
            <TableHead className={HEAD}>Status</TableHead>
            <TableHead className={cn(HEAD, "hidden text-right lg:table-cell")}>Items</TableHead>
            <TableHead className={cn(HEAD, "text-right")}>Total</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {shown.map((order) => {
            const expanded = open.has(order.id)
            const detailId = `${baseId}-${order.id}`
            return (
              <React.Fragment key={order.id}>
                <TableRow className="group/row">
                  <TableCell className={cn(PINNED, PLANE, "px-3 py-2")}>
                    <div className="flex items-center gap-2">
                      <Button
                        variant="ghost"
                        size="icon-sm"
                        aria-expanded={expanded}
                        aria-controls={detailId}
                        aria-label={`Lines of ${order.number}`}
                        onClick={() => toggle(order.id)}
                      >
                        <ChevronRightIcon
                          aria-hidden="true"
                          className="transition-transform duration-(--duration-fast) ease-(--ease-standard) group-aria-expanded/button:rotate-90"
                        />
                      </Button>
                      <span className="flex min-w-0 flex-col">
                        <span className="font-mono text-xs font-medium">{order.number}</span>
                        <span className="truncate text-xs text-muted-foreground md:hidden">
                          {order.customer.name} · {DAY.format(order.placedAt)}
                        </span>
                      </span>
                    </div>
                  </TableCell>
                  <TableCell className="hidden px-3 py-2 md:table-cell">
                    <UserCell size="sm" name={order.customer.name} description={order.customer.company} src={order.customer.avatarUrl} />
                  </TableCell>
                  <TableCell className="hidden px-3 py-2 text-muted-foreground tabular-nums md:table-cell">
                    <time dateTime={order.placedAt.toISOString()}>{when(order.placedAt)}</time>
                  </TableCell>
                  <TableCell className="px-3 py-2">
                    <StatusBadge size="sm" status={order.status} map={STATUS_TONES} />
                  </TableCell>
                  <TableCell className="hidden px-3 py-2 text-right text-muted-foreground tabular-nums lg:table-cell">
                    {lineCount(order.lines.length)} · {formatNumber(order.units)} {order.units === 1 ? "unit" : "units"}
                  </TableCell>
                  <TableCell className="px-3 py-2 text-right font-medium tabular-nums">{money(order.totalCents)}</TableCell>
                </TableRow>
                <TableRow id={detailId} hidden={!expanded} data-slot="order-detail" className="bg-surface hover:bg-surface">
                  <TableCell colSpan={6} className="p-0 whitespace-normal">
                    {expanded ? <OrderDetail order={order} art={art} /> : null}
                  </TableCell>
                </TableRow>
              </React.Fragment>
            )
          })}
        </TableBody>
      </Table>
      <div className="flex flex-wrap items-center justify-between gap-2 border-t border-rule px-3 py-2.5">
        <p role="status" aria-live="polite" className="text-sm text-muted-foreground tabular-nums">
          Orders {first}–{last} of {orders.length}
        </p>
        <div className="flex items-center gap-1.5">
          <Button variant="outline" size="sm" disabled={page === 0} focusableWhenDisabled onClick={() => setPage((current) => Math.max(0, current - 1))}>
            Previous
          </Button>
          <Button
            variant="outline"
            size="sm"
            disabled={page >= pages - 1}
            focusableWhenDisabled
            onClick={() => setPage((current) => Math.min(pages - 1, current + 1))}
          >
            Next
          </Button>
        </div>
      </div>
    </>
  )
}

/**
 * What `tables-02` reads: the most recent orders in `db.orders`, each with
 * the customer who placed it and its lines resolved against `db.products`, so
 * a row opens onto what was bought without a second read.
 *
 * Selectors only, reading `db` inside functions and run on the server. The
 * island takes these rows as props; it never imports this module.
 */
import { db, type Order } from "@/lib/sample-data"

/** How many orders the table holds. */
export const RECENT_COUNT = 24

export type OrderLine = {
  productId: string
  name: string
  category: string
  sku: string
  qty: number
  unitCents: number
  totalCents: number
}

export type RecentOrder = {
  id: string
  number: string
  status: Order["status"]
  placedAt: Date
  fulfilledAt?: Date
  customer: { name: string; company: string; avatarUrl?: string }
  country: string
  paymentMethod: Order["paymentMethod"]
  units: number
  /** The lines before any discount or tax. */
  subtotalCents: number
  discountCents: number
  taxCents: number
  totalCents: number
  lines: OrderLine[]
}

/** The `count` most recent orders, newest first, with their lines. */
export function recentOrders(count = RECENT_COUNT): RecentOrder[] {
  const customers = new Map(db.customers.all().map((customer) => [customer.id, customer]))
  const products = new Map(db.products.all().map((product) => [product.id, product]))
  return db.orders
    .all()
    .sort((a, b) => b.placedAt.getTime() - a.placedAt.getTime())
    .slice(0, count)
    .map((order) => {
      const customer = customers.get(order.customerId)
      const lines = order.items.map((item) => {
        const product = products.get(item.productId)
        return {
          productId: item.productId,
          name: product?.name ?? item.productId,
          category: product?.category ?? "",
          sku: product?.sku ?? item.productId,
          qty: item.qty,
          unitCents: item.unitCents,
          totalCents: item.qty * item.unitCents,
        }
      })
      return {
        id: order.id,
        number: order.number,
        status: order.status,
        placedAt: order.placedAt,
        fulfilledAt: order.fulfilledAt,
        customer: {
          name: customer?.name ?? "Walk-in customer",
          company: customer?.company ?? "",
          avatarUrl: customer?.avatarUrl,
        },
        country: order.country,
        paymentMethod: order.paymentMethod,
        units: lines.reduce((total, line) => total + line.qty, 0),
        subtotalCents: lines.reduce((total, line) => total + line.totalCents, 0),
        discountCents: order.discountCents ?? 0,
        taxCents: order.taxCents ?? 0,
        totalCents: order.totalCents,
        lines,
      }
    })
}

import * as React from "react"

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

import { SeatTable } from "./tables-03.client"
import {
  ACCOUNT_MANAGER,
  MAX_SEATS,
  changeSeats,
  seatAccounts,
  type Result,
  type SeatChange,
  type SeatSaved,
} from "./tables-03.data"

/**
 * An account manager's book, with each account's seats editable in place:
 * the strip names whose accounts they are, and the sheet holds the table and
 * a status line that says what the last change did to the bill.
 *
 * A server component. It reads the rows through `./tables-03.data` and hands
 * the island `saveSeats`, a server function defined here: the island calls it
 * with an account and a number, and every rule — the plan's limit, a
 * suspended account, what a seat costs — is decided on the server from the
 * stored row, answered as a `Result`.
 */
export function Tables03() {
  const titleId = React.useId()

  async function saveSeats(change: SeatChange): Promise<Result<SeatSaved>> {
    "use server"
    return changeSeats(change)
  }

  return (
    <section
      data-section="tables-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}>Seats by account</h2>
            </CardTitle>
            <CardDescription>
              {ACCOUNT_MANAGER}’s accounts. Press a seat count to change it; the bill follows.
            </CardDescription>
          </CardHeader>
          <CardContent className="p-0">
            <SeatTable rows={seatAccounts()} onSave={saveSeats} titleId={titleId} maxSeats={MAX_SEATS} />
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default Tables03

"use client"

import * as React from "react"
import { CheckIcon, PencilIcon, XIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { formatCurrency, formatNumber } from "@/lib/format"
import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { Input } from "@/components/ui/input"
import { Spinner } from "@/components/ui/spinner"
import { StatusBadge } from "@/components/ui/status-badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { UserCell } from "@/components/ui/user-cell"

import type { AccountPlan, Result, SeatAccount, SeatChange, SeatSaved } from "./tables-03.data"

export const PAGE_SIZE = 10

const PLAN_LABELS: Record<AccountPlan, string> = { free: "Free", starter: "Starter", team: "Team", enterprise: "Enterprise" }
const STATUS_TONES = { active: "success", trial: "info", suspended: "warning", churned: "neutral" } as const
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 seatsWord = (count: number) => `${formatNumber(count)} ${count === 1 ? "seat" : "seats"}`

const HEAD = "h-10 bg-surface px-3 text-foreground"
const PINNED = "max-md:sticky max-md:left-0 max-md:z-10 max-md:after:absolute max-md:after:inset-y-0 max-md:after:right-0 max-md:after:w-px max-md:after:bg-border"

type Editing = { id: string; draft: string }

/**
 * The seats column edits in place. A seat count is a button naming the
 * account it belongs to; pressing it swaps in a field with Save and Cancel —
 * Enter saves, Escape puts the number back and returns focus to it. The field
 * refuses what is not a whole number itself; everything else is the server
 * action's to decide, and a refusal opens a danger callout on the row under
 * the account, named and read out, while the field keeps what was typed. A
 * saved change updates the row and says what the account now pays.
 */
export function SeatTable({
  rows,
  onSave,
  titleId,
  maxSeats,
}: {
  rows: SeatAccount[]
  onSave: (change: SeatChange) => Promise<Result<SeatSaved>>
  titleId: string
  maxSeats: number
}) {
  const [accounts, setAccounts] = React.useState(rows)
  const [editing, setEditing] = React.useState<Editing | null>(null)
  const [invalid, setInvalid] = React.useState<string | null>(null)
  const [refusal, setRefusal] = React.useState<{ id: string; message: string } | null>(null)
  const [pending, setPending] = React.useState(false)
  const [notice, setNotice] = React.useState("")
  const [page, setPage] = React.useState(0)
  const buttons = React.useRef(new Map<string, HTMLButtonElement | null>())
  const field = React.useRef<HTMLInputElement>(null)
  const returnTo = React.useRef<string | null>(null)
  const errorId = React.useId()
  const refusalId = React.useId()

  const editingId = editing?.id
  React.useEffect(() => {
    if (editingId) field.current?.select()
  }, [editingId])
  React.useEffect(() => {
    if (editingId || !returnTo.current) return
    buttons.current.get(returnTo.current)?.focus()
    returnTo.current = null
  }, [editingId])

  const pages = Math.max(1, Math.ceil(accounts.length / PAGE_SIZE))
  const shown = accounts.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE)
  const monthly = accounts.reduce((total, account) => total + account.mrrCents, 0)

  function start(account: SeatAccount) {
    setEditing({ id: account.id, draft: String(account.seats) })
    setInvalid(null)
    setRefusal(null)
  }

  function stop() {
    returnTo.current = editing?.id ?? null
    setEditing(null)
    setInvalid(null)
    setRefusal(null)
  }

  async function save() {
    if (!editing || pending) return
    const account = accounts.find((entry) => entry.id === editing.id)
    if (!account) return
    const draft = editing.draft.trim()
    if (!/^\d+$/.test(draft)) return setInvalid("Enter a whole number of seats.")
    const seats = Number(draft)
    if (seats < 1) return setInvalid("An account keeps at least one seat.")
    if (seats > maxSeats) return setInvalid(`One change can ask for at most ${formatNumber(maxSeats)} seats.`)
    if (seats === account.seats) return stop()

    setInvalid(null)
    setRefusal(null)
    setPending(true)
    let result: Result<SeatSaved>
    try {
      result = await onSave({ id: account.id, seats })
    } catch {
      result = { ok: false, error: { code: "network", message: "The change did not reach the server. Try again." } }
    }
    setPending(false)
    if (!result.ok) return setRefusal({ id: account.id, message: result.error.message })

    const saved = result.data
    setAccounts((current) =>
      current.map((entry) => (entry.id === saved.id ? { ...entry, seats: saved.seats, mrrCents: saved.mrrCents } : entry))
    )
    const direction = saved.seats > saved.previousSeats ? "up" : "down"
    const bill =
      saved.mrrCents === saved.previousMrrCents
        ? `The monthly bill stays at ${money(saved.mrrCents)}.`
        : `Monthly bill ${money(saved.previousMrrCents)} → ${money(saved.mrrCents)}.`
    setNotice(`${saved.company} now has ${seatsWord(saved.seats)}, ${direction} from ${formatNumber(saved.previousSeats)}. ${bill}`)
    returnTo.current = saved.id
    setEditing(null)
  }

  function turn(to: number) {
    setEditing(null)
    setInvalid(null)
    setRefusal(null)
    setPage(to)
  }

  return (
    <div data-slot="seat-table">
      <Table aria-labelledby={titleId}>
        <TableHeader>
          <TableRow className="hover:bg-transparent">
            <TableHead className={cn(HEAD, PINNED)}>Account</TableHead>
            <TableHead className={HEAD}>Plan</TableHead>
            <TableHead className={HEAD}>Status</TableHead>
            <TableHead className={cn(HEAD, "text-right")}>Seats</TableHead>
            <TableHead className={cn(HEAD, "text-right")}>Monthly</TableHead>
            <TableHead className={cn(HEAD, "text-right")}>Renews</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {shown.map((account) => {
            const open = editing?.id === account.id
            const refused = refusal?.id === account.id
            return (
              <React.Fragment key={account.id}>
                <TableRow className="group/row">
                  <TableCell
                    className={cn(
                      "px-3 py-2",
                      PINNED,
                      "bg-card group-hover/row:bg-[color-mix(in_oklab,var(--muted)_50%,var(--card))]"
                    )}
                  >
                    <UserCell size="sm" name={account.company} description={account.contact} src={account.avatarUrl} className="max-w-44 sm:max-w-none" />
                  </TableCell>
                  <TableCell className="px-3 py-2">
                    <span className="flex flex-col leading-tight">
                      <span>{PLAN_LABELS[account.plan]}</span>
                      <span className="text-xs text-muted-foreground tabular-nums">
                        {account.seatCents > 0 ? `${money(account.seatCents)} a seat` : "No charge"}
                      </span>
                    </span>
                  </TableCell>
                  <TableCell className="px-3 py-2">
                    <StatusBadge size="sm" status={account.status} map={STATUS_TONES} />
                  </TableCell>
                  <TableCell className="px-3 py-1.5 text-right">
                    {open ? (
                      <div className="inline-flex flex-col items-end gap-1">
                        <div className="flex items-center gap-1">
                          <Input
                            ref={field}
                            autoFocus
                            inputMode="numeric"
                            value={editing.draft}
                            readOnly={pending}
                            onChange={(event) => {
                              setEditing({ id: account.id, draft: event.target.value })
                              setInvalid(null)
                            }}
                            onKeyDown={(event) => {
                              if (event.key === "Enter") {
                                event.preventDefault()
                                void save()
                              } else if (event.key === "Escape") {
                                event.preventDefault()
                                stop()
                              }
                            }}
                            aria-label={`Seats for ${account.company}`}
                            aria-invalid={invalid || refused ? true : undefined}
                            aria-describedby={invalid ? errorId : refused ? refusalId : undefined}
                            className="h-7 w-20 text-right tabular-nums"
                          />
                          <Button
                            size="icon-sm"
                            aria-label={`Save seats for ${account.company}`}
                            aria-busy={pending || undefined}
                            onClick={() => void save()}
                          >
                            {pending ? <Spinner aria-hidden="true" className="size-3.5" /> : <CheckIcon aria-hidden="true" />}
                          </Button>
                          <Button variant="ghost" size="icon-sm" aria-label="Cancel" disabled={pending} focusableWhenDisabled onClick={stop}>
                            <XIcon aria-hidden="true" />
                          </Button>
                        </div>
                        {invalid ? (
                          <p id={errorId} className="text-xs whitespace-normal text-danger">
                            {invalid}
                          </p>
                        ) : null}
                      </div>
                    ) : (
                      <Button
                        ref={(node) => {
                          buttons.current.set(account.id, node)
                        }}
                        variant="ghost"
                        size="sm"
                        aria-label={`Edit seats for ${account.company}, ${account.seats}`}
                        onClick={() => start(account)}
                        // The dotted rule says the number can be changed before the pointer finds the pencil.
                        className="-me-2 font-normal tabular-nums underline decoration-muted-foreground/50 decoration-dotted underline-offset-4"
                      >
                        {formatNumber(account.seats)}
                        <PencilIcon
                          data-icon="inline-end"
                          aria-hidden="true"
                          className="text-muted-foreground opacity-0 transition-opacity group-hover/row:opacity-100 group-focus-visible/button:opacity-100"
                        />
                      </Button>
                    )}
                  </TableCell>
                  <TableCell className="px-3 py-2 text-right tabular-nums">{money(account.mrrCents)}</TableCell>
                  <TableCell className="px-3 py-2 text-right text-muted-foreground tabular-nums">
                    {account.renewsAt ? <time dateTime={account.renewsAt.toISOString()}>{DAY.format(account.renewsAt)}</time> : "—"}
                  </TableCell>
                </TableRow>
                {refused ? (
                  <TableRow className="hover:bg-transparent">
                    <TableCell colSpan={6} className="px-3 pt-0 pb-3 whitespace-normal">
                      <Callout id={refusalId} variant="danger" role="alert" title={`${account.company} keeps ${seatsWord(account.seats)}`}>
                        {refusal.message}
                      </Callout>
                    </TableCell>
                  </TableRow>
                ) : null}
              </React.Fragment>
            )
          })}
        </TableBody>
      </Table>
      <div className="flex flex-wrap items-center justify-between gap-2 border-t border-rule px-3 py-2.5">
        <p role="status" aria-live="polite" className="min-w-0 text-sm text-muted-foreground tabular-nums">
          {notice || `${accounts.length} accounts · ${money(monthly)} a month`}
        </p>
        <div className="flex items-center gap-1.5">
          <span className="me-1 text-sm text-muted-foreground tabular-nums">
            Page {page + 1} of {pages}
          </span>
          <Button variant="outline" size="sm" disabled={page === 0} focusableWhenDisabled onClick={() => turn(page - 1)}>
            Previous
          </Button>
          <Button variant="outline" size="sm" disabled={page >= pages - 1} focusableWhenDisabled onClick={() => turn(page + 1)}>
            Next
          </Button>
        </div>
      </div>
    </div>
  )
}

/**
 * What `tables-03` reads and the one thing it writes: the accounts an account
 * manager owns in `db.customers`, with the renewal each one's subscription is
 * on, and `changeSeats`, which the section's server action calls to resize an
 * account.
 *
 * Every read happens inside a function and runs on the server. The island
 * takes the rows as props and calls the action it is handed; it never imports
 * this module.
 */
import { db, fields, isWhole, type Customer, type Result } from "@/lib/sample-data"

export type { Result }

/** Whose book of accounts the table shows. */
export const ACCOUNT_MANAGER = "Farid Meyer"

/** The most seats a Free workspace can hold; past it the account has to move to a paid plan. */
export const FREE_SEAT_LIMIT = 3

/** The most seats one change may ask for — a typo guard, not a plan limit. */
export const MAX_SEATS = 1000

export type AccountPlan = Customer["plan"]
export type AccountStatus = Customer["status"]

export type SeatAccount = {
  id: string
  company: string
  contact: string
  avatarUrl?: string
  plan: AccountPlan
  status: AccountStatus
  seats: number
  /** What one seat costs a month on this plan, in cents. */
  seatCents: number
  mrrCents: number
  /** When the subscription renews, if it has one that is not cancelled. */
  renewsAt?: Date
}

/** What the island asks to change. */
export type SeatChange = { id: string; seats: number }

/** What a saved change sends back: the account's new seats and what it now pays. */
export type SeatSaved = { id: string; company: string; seats: number; mrrCents: number; previousSeats: number; previousMrrCents: number }

/**
 * A seat's monthly price on each plan, read off the accounts that pay: every
 * paying account on a plan pays the same rate per seat, so the rate is the
 * one its paying accounts share.
 */
function seatPrices(): Record<AccountPlan, number> {
  const prices: Record<AccountPlan, number> = { free: 0, starter: 0, team: 0, enterprise: 0 }
  for (const customer of db.customers.all()) {
    if (customer.status === "active" && customer.mrrCents > 0 && customer.seats > 0 && prices[customer.plan] === 0)
      prices[customer.plan] = Math.round(customer.mrrCents / customer.seats)
  }
  return prices
}

/** The manager's accounts, A to Z, each with its plan's seat price and its renewal. */
export function seatAccounts(): SeatAccount[] {
  const manager = db.members.all().find((member) => member.name === ACCOUNT_MANAGER)
  if (!manager) throw new Error(`tables-03 shows the accounts of "${ACCOUNT_MANAGER}", who is not a member`)
  const prices = seatPrices()
  // A cancelled subscription has nothing left to renew.
  const renewals = new Map(
    db.subscriptions
      .all()
      .filter((subscription) => subscription.status !== "cancelled")
      .map((subscription) => [subscription.customerId, subscription.renewsAt])
  )
  return db.customers
    .all()
    .filter((customer) => customer.owner === manager.id)
    .sort((a, b) => a.company.localeCompare(b.company))
    .map((customer) => ({
      id: customer.id,
      company: customer.company,
      contact: customer.name,
      avatarUrl: customer.avatarUrl,
      plan: customer.plan,
      status: customer.status,
      seats: customer.seats,
      seatCents: prices[customer.plan],
      mrrCents: customer.mrrCents,
      renewsAt: renewals.get(customer.id),
    }))
}

const refuse = (code: string, message: string): Result<never> => ({ ok: false, error: { code, message, field: "seats" } })

/**
 * Resizes an account. Everything but the number asked for is read off the
 * stored row — its plan, its status, what a seat costs — never taken from the
 * caller. A suspended or churned account keeps its seats; a Free workspace
 * stops at three; a trial pays nothing until it converts, so its bill stays
 * at zero. The subscription is resized with the account, so the two agree.
 */
export async function changeSeats(sent: SeatChange): Promise<Result<SeatSaved>> {
  const change = fields(sent)
  const account = typeof change.id === "string" ? await db.customers.get(change.id) : undefined
  if (!account) return refuse("not_found", "That account no longer exists, so nothing was changed.")
  const seats = change.seats
  if (!isWhole(seats, 1, MAX_SEATS))
    return refuse("invalid", `Seats have to be a whole number from 1 to ${MAX_SEATS}.`)
  if (account.status === "suspended")
    return refuse("suspended", `${account.company} is suspended, so its seats are frozen. Reactivate the account first.`)
  if (account.status === "churned")
    return refuse("churned", `${account.company} has cancelled, so there are no seats to change. Win the account back first.`)
  if (account.plan === "free" && seats > FREE_SEAT_LIMIT)
    return refuse(
      "plan_limit",
      `The Free plan stops at ${FREE_SEAT_LIMIT} seats. Move ${account.company} to Starter to give it ${seats}.`
    )

  const price = seatPrices()[account.plan]
  const mrrCents = account.status === "trial" ? 0 : seats * price
  const updated = await db.customers.update(account.id, { seats, mrrCents })
  if (!updated.ok) return updated
  const subscription = db.subscriptions.all().find((entry) => entry.customerId === account.id)
  if (subscription) await db.subscriptions.update(subscription.id, { seats, mrrCents })
  return {
    ok: true,
    data: {
      id: account.id,
      company: account.company,
      seats,
      mrrCents,
      previousSeats: account.seats,
      previousMrrCents: account.mrrCents,
    },
  }
}