Mail

import * as React from "react"

import { REFERENCE_DATE } from "@/lib/sample-data"
import { AppShell } from "@/components/ui/app-shell"
import { PageHeader } from "@/components/ui/page-header"
import { Skeleton } from "@/components/ui/skeleton"

import { signOut } from "./actions"
import { MailView } from "./components/mail-view"
import { contacts, currentUser, mailRows, shellNotifications } from "./data"
import { NAV, ROUTES } from "@/lib/dashboards/projects/nav"

/**
 * The mail app. The page is a server component: it reads the whole mailbox
 * through `db.mails`, names every address it can from `db.members` and
 * `db.customers`, and hands the rows to one client island that files them
 * into folders. The island reads `?folder=`, `?label=` and `?mail=` off the
 * URL, so it sits inside a Suspense boundary — a prerendered page that calls
 * useSearchParams outside one fails the build. What the boundary shows until
 * the island runs carries the page's title, so the prerendered page has its
 * h1 before the mailbox arrives.
 */
export default function MailPage() {
  const user = currentUser()

  return (
    <AppShell
      nav={NAV}
      activeHref={ROUTES.mail}
      user={user}
      notifications={shellNotifications()}
      now={REFERENCE_DATE}
      onSignOut={signOut}
    >
      <React.Suspense
        fallback={
          <div className="flex flex-col gap-3">
            <PageHeader title="Mail" description="Customers and teammates in one mailbox." />
            <Skeleton className="h-[36rem] w-full rounded-xl" />
          </div>
        }
      >
        <MailView mails={mailRows()} contacts={contacts()} address={user.email} />
      </React.Suspense>
    </AppShell>
  )
}

/**
 * What the mail app reads. Every mail comes from `db.mails`; a recipient is
 * named by looking the address up in `db.members` and `db.customers`, so a
 * To line reads as people rather than addresses. Dates are written into words
 * here, on the server, against `REFERENCE_DATE` and pinned to UTC, so the
 * island that draws the rows never needs a clock or the store — it renders
 * what it is handed and swaps in what the actions return.
 */
import { formatBytes, formatRelative, getInitials } from "@/lib/format"
import { avatarFor, db, REFERENCE_DATE, type Mail, type MailFolder, type MailLabel } from "@/lib/sample-data"

export type { MailFolder, MailLabel }

/** The signed-in member — the first member row — whose mailbox this is, read per call. */
const memberRow = () => db.members.all()[0]

/** Someone on a mail: a name for the address where the workspace knows one, and their face. */
export type MailContact = { name: string; email: string; avatarUrl?: string }

/** One mail as the list and the reader draw it. */
export type MailRow = {
  id: string
  folder: MailFolder
  from: MailContact
  to: MailContact[]
  subject: string
  /** The first line of the message itself, past the greeting. */
  snippet: string
  body: string[]
  at: Date
  /** "2h ago", or the day itself past a week. */
  when: string
  /** The full date the reader prints: "Thu, Sep 3, 2026, 9:14 AM". */
  date: string
  read: boolean
  starred: boolean
  labels: MailLabel[]
  attachments: { name: string; size: string }[]
  /** The reader wrote it: sent or drafted, wherever it has been filed since. */
  outgoing: boolean
}

const DAY_MS = 86_400_000

const shortDay = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" })
const fullDate = new Intl.DateTimeFormat("en-US", {
  weekday: "short",
  month: "short",
  day: "numeric",
  year: "numeric",
  hour: "numeric",
  minute: "2-digit",
  timeZone: "UTC",
})

/** "2h ago" against `REFERENCE_DATE`, and the date itself past a week. */
export function since(at: Date): string {
  const days = (REFERENCE_DATE.getTime() - at.getTime()) / DAY_MS
  return days < 7 ? formatRelative(at, REFERENCE_DATE) : shortDay.format(at)
}

/** Everyone the workspace knows by address: the team and every customer's contact. */
function directory(): Map<string, string> {
  return new Map([
    ...db.members.all().map((member) => [member.email, member.name] as const),
    ...db.customers.all().map((customer) => [customer.email, customer.name] as const),
  ])
}

/** An address as a person: named, with a face, when the workspace knows who it is. */
function contactFor(email: string, names: Map<string, string>): MailContact {
  const name = names.get(email)
  return name ? { name, email, avatarUrl: avatarFor(name) } : { name: email, email }
}

/** A greeting ends on a comma; the snippet is the first thing said after it. */
function snippetOf(body: string[]): string {
  return body.find((paragraph) => !paragraph.trim().endsWith(",")) ?? body[0] ?? ""
}

/** One mail shaped for the page; the actions return rows through it too, so a sent mail reads like a seeded one. */
export function toMailRow(mail: Mail, names: Map<string, string> = directory(), me = memberRow()): MailRow {
  return {
    id: mail.id,
    folder: mail.folder,
    from: mail.from,
    to: mail.to.map((email) => contactFor(email, names)),
    subject: mail.subject,
    snippet: snippetOf(mail.body),
    body: mail.body,
    at: mail.at,
    when: since(mail.at),
    date: fullDate.format(mail.at),
    read: mail.read,
    starred: mail.starred,
    labels: mail.labels,
    attachments: mail.attachments.map((file) => ({ name: file.name, size: formatBytes(file.sizeBytes, 1) })),
    outgoing: mail.from.email === me.email,
  }
}

/** Every mail in the mailbox, newest first; the island files them into folders. */
export function mailRows(): MailRow[] {
  const names = directory()
  const me = memberRow()
  return db.mails
    .all()
    .sort((a, b) => b.at.getTime() - a.at.getTime())
    .map((mail) => toMailRow(mail, names, me))
}

/**
 * Who the compose sheet offers as it is typed into: the team, then the
 * customers' contacts the reader has already written to or heard from.
 */
export function contacts(): MailContact[] {
  const me = memberRow()
  const team = db.members
    .all()
    .filter((member) => member.status === "active" && member.id !== me.id)
    .map((member) => ({ name: member.name, email: member.email }))
  const known = new Set(team.map((person) => person.email))
  const names = directory()
  const correspondents = new Map<string, MailContact>()
  for (const mail of db.mails.all()) {
    for (const email of [mail.from.email, ...mail.to]) {
      if (email === me.email || known.has(email) || correspondents.has(email)) continue
      const { name } = contactFor(email, names)
      correspondents.set(email, { name, email })
    }
  }
  const byName = (a: MailContact, b: MailContact) => a.name.localeCompare(b.name)
  return [...team.sort(byName), ...[...correspondents.values()].sort(byName)]
}

/** The person looking at the page: the member whose mailbox this is. */
export function currentUser() {
  const member = memberRow()
  return { name: member.name, email: member.email, initials: getInitials(member.name), avatarUrl: member.avatarUrl }
}

/** The bell's contents: the newest notifications. */
export function shellNotifications() {
  return db.notifications
    .all()
    .sort((a, b) => b.at.getTime() - a.at.getTime())
    .slice(0, 6)
    .map(({ id, title, description, at, read, href }) => ({ id, title, description, at, read, href }))
}

"use server"

import { mockAuthAdapter } from "@/lib/auth-adapter"
import { avatarFor, db, REFERENCE_DATE, type Mail, type Result } from "@/lib/sample-data"
import { isEmail } from "@/lib/validation"

import { toMailRow, type MailRow } from "./data"

/**
 * What the mail app changes. Server actions, so the page stays a server
 * component and still hands its island something to call; `Result`, so every
 * caller reads one shape — a refusal says what was refused and why, and the
 * island prints it where the reader was looking. Every action looks the mail
 * up again and trusts only the stored row: whose mailbox it is, which folder
 * it is in and who is sending are decided here, never by a field the browser
 * sent.
 */

export async function signOut(): Promise<Result<{ signedOut: true }>> {
  await mockAuthAdapter.signOut()
  return { ok: true, data: { signedOut: true } }
}

/** The signed-in member — the first member row — whose mailbox the sample holds. */
function member() {
  return db.members.all()[0]
}

type Found = { ok: true; mail: Mail } | { ok: false; error: { code: string; message: string } }

async function find(id: string): Promise<Found> {
  const mail = await db.mails.get(id)
  if (!mail) return { ok: false, error: { code: "not_found", message: "That mail is no longer in the mailbox." } }
  return { ok: true, mail }
}

async function save(id: string, patch: Partial<Mail>): Promise<Result<MailRow>> {
  const updated = await db.mails.update(id, patch)
  if (!updated.ok) return updated
  return { ok: true, data: toMailRow(updated.data) }
}

/** Stars a mail, or takes the star off one. */
export async function toggleStar(id: string): Promise<Result<MailRow>> {
  const found = await find(id)
  if (!found.ok) return found
  return save(id, { starred: !found.mail.starred })
}

/** Marks a mail read or unread — opening one does the first. */
export async function setRead(id: string, read: boolean): Promise<Result<MailRow>> {
  if (typeof read !== "boolean") {
    return { ok: false, error: { code: "invalid", message: "Say whether the mail is read or unread." } }
  }
  const found = await find(id)
  if (!found.ok) return found
  return save(id, { read })
}

/** Files a mail away. A mail already in the archive, or in the trash, stays where it is. */
export async function archiveMail(id: string): Promise<Result<MailRow>> {
  const found = await find(id)
  if (!found.ok) return found
  const { mail } = found
  if (mail.folder === "archive") {
    return { ok: false, error: { code: "conflict", message: `“${mail.subject}” is already in the archive.` } }
  }
  if (mail.folder === "trash") {
    return {
      ok: false,
      error: { code: "conflict", message: `“${mail.subject}” is in the trash, so it cannot be archived.` },
    }
  }
  return save(id, { folder: "archive" })
}

/** Moves a mail to the trash, unless it is there already. */
export async function trashMail(id: string): Promise<Result<MailRow>> {
  const found = await find(id)
  if (!found.ok) return found
  if (found.mail.folder === "trash") {
    return { ok: false, error: { code: "conflict", message: `“${found.mail.subject}” is already in the trash.` } }
  }
  return save(id, { folder: "trash" })
}

export type OutgoingMail = { to: string; subject: string; body: string }

const MAX_SUBJECT = 200
const MAX_BODY = 20_000

/**
 * Sends a mail as the reader and files it in Sent. The recipients are split on
 * commas, semicolons or spaces; every one has to be an address. A subject or a
 * message is enough on its own — a mail with neither is refused.
 */
export async function sendMail(input: OutgoingMail): Promise<Result<MailRow>> {
  const to = String(input?.to ?? "")
    .split(/[,;\s]+/)
    .map((address) => address.trim())
    .filter(Boolean)
  const subject = String(input?.subject ?? "").trim()
  const body = String(input?.body ?? "").trim()

  if (to.length === 0) {
    return { ok: false, error: { code: "required", message: "Add a recipient before sending.", field: "to" } }
  }
  const malformed = to.find((address) => !isEmail(address))
  if (malformed) {
    return {
      ok: false,
      error: { code: "invalid", message: `“${malformed}” is not an email address.`, field: "to" },
    }
  }
  if (!subject && !body) {
    return {
      ok: false,
      error: { code: "required", message: "Write a subject or a message before sending.", field: "subject" },
    }
  }
  if (subject.length > MAX_SUBJECT) {
    return {
      ok: false,
      error: { code: "invalid", message: `Keep the subject under ${MAX_SUBJECT} characters.`, field: "subject" },
    }
  }
  if (body.length > MAX_BODY) {
    return { ok: false, error: { code: "invalid", message: "That message is too long to send.", field: "body" } }
  }

  const sender = member()
  const created = await db.mails.create({
    folder: "sent",
    from: { name: sender.name, email: sender.email, avatarUrl: avatarFor(sender.name) },
    to: [...new Set(to.map((address) => address.toLowerCase()))],
    subject: subject || "(no subject)",
    body: body ? body.split(/\n\s*\n/).map((paragraph) => paragraph.trim()).filter(Boolean) : [],
    at: REFERENCE_DATE,
    read: true,
    starred: false,
    labels: [],
    attachments: [],
  })
  if (!created.ok) return created
  return { ok: true, data: toMailRow(created.data) }
}

"use client"

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

import { AsyncButton } from "@/components/ui/async-button"
import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
import { Textarea } from "@/components/ui/textarea"

import { type OutgoingMail } from "../actions"
import { type MailContact } from "../data"

type Field = "to" | "subject" | "body"

export type MailComposeProps = {
  /** Who the To field suggests as it is typed into. */
  contacts: MailContact[]
  /** Sends the mail; a refusal comes back with the field it is about. */
  onSend: (mail: OutgoingMail) => Promise<{ ok: true } | { ok: false; message: string; field?: string }>
}

const EMPTY: OutgoingMail = { to: "", subject: "", body: "" }

/**
 * The Compose button and the sheet it opens: To, Subject and the message, and
 * Send. The server decides what goes out; a refusal is printed inside the
 * sheet, above the button that asked, and marks the field it is about, while
 * a mail that went closes the sheet and is announced by the page's status
 * line. The To field suggests the team and the people the reader already
 * writes to.
 */
export function MailCompose({ contacts, onSend }: MailComposeProps) {
  const [open, setOpen] = React.useState(false)
  const [draft, setDraft] = React.useState<OutgoingMail>(EMPTY)
  const [refusal, setRefusal] = React.useState<{ message: string; field?: Field } | null>(null)
  const [sending, setSending] = React.useState(false)
  const listId = React.useId()
  const errorId = React.useId()

  // Closing the sheet — Escape, the overlay, the cross — keeps the draft, on a
  // page with a Drafts folder; Discard and a mail that went empty it.
  function change(open: boolean) {
    setOpen(open)
    if (!open) setRefusal(null)
  }

  function discard() {
    setDraft(EMPTY)
    change(false)
  }

  async function send() {
    if (sending) return
    setRefusal(null)
    setSending(true)
    const result = await onSend(draft)
    setSending(false)
    if (!result.ok) {
      setRefusal({ message: result.message, field: result.field as Field | undefined })
      return
    }
    discard()
  }

  const invalid = (field: Field) =>
    refusal?.field === field ? { "aria-invalid": true as const, "aria-describedby": errorId } : {}
  const edit = (field: Field) => (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
    setDraft((current) => ({ ...current, [field]: event.target.value }))

  return (
    <Sheet open={open} onOpenChange={change}>
      <SheetTrigger render={<Button />}>
        <SquarePenIcon data-icon="inline-start" />
        Compose
      </SheetTrigger>
      <SheetContent side="right" className="w-full gap-4 overflow-y-auto p-4 sm:max-w-md">
        <SheetHeader className="p-0">
          <SheetTitle>New mail</SheetTitle>
          <SheetDescription>It goes out from your address and lands in Sent.</SheetDescription>
        </SheetHeader>

        <form
          className="flex flex-1 flex-col gap-4"
          onSubmit={(event) => {
            event.preventDefault()
            void send()
          }}
        >
          <div className="flex flex-col gap-1.5">
            <Label htmlFor={`${listId}-to`}>To</Label>
            <Input
              id={`${listId}-to`}
              type="text"
              inputMode="email"
              autoComplete="off"
              list={listId}
              placeholder="name@example.com, …"
              // The suggestions open as the address is typed; Chrome's arrow
              // for them would read as a select.
              className="[&::-webkit-calendar-picker-indicator]:hidden"
              value={draft.to}
              onChange={edit("to")}
              {...invalid("to")}
            />
            <datalist id={listId}>
              {contacts.map((person) => (
                <option key={person.email} value={person.email}>
                  {person.name}
                </option>
              ))}
            </datalist>
          </div>
          <div className="flex flex-col gap-1.5">
            <Label htmlFor={`${listId}-subject`}>Subject</Label>
            <Input id={`${listId}-subject`} value={draft.subject} onChange={edit("subject")} {...invalid("subject")} />
          </div>
          <div className="flex flex-1 flex-col gap-1.5">
            <Label htmlFor={`${listId}-body`}>Message</Label>
            <Textarea
              id={`${listId}-body`}
              rows={10}
              value={draft.body}
              onChange={edit("body")}
              className="min-h-48 flex-1"
              {...invalid("body")}
            />
          </div>

          {refusal ? (
            <Callout id={errorId} variant="danger" role="alert">
              {refusal.message}
            </Callout>
          ) : null}

          <SheetFooter className="mt-auto flex-row justify-end p-0">
            <Button type="button" variant="outline" onClick={discard}>
              Discard
            </Button>
            <AsyncButton type="submit" loading={sending}>
              Send
            </AsyncButton>
          </SheetFooter>
        </form>
      </SheetContent>
    </Sheet>
  )
}

"use client"

import * as React from "react"
import Link from "next/link"

import { cn } from "@/lib/utils"

import { type MailLabel } from "../data"
import { LABELS, VIEWS, type MailView } from "./mail-vocabulary"

export type MailFoldersProps = {
  view: MailView
  label: MailLabel | null
  /** Unread mail in each view. */
  unread: Record<MailView, number>
  /** How many mails of the open view carry each label. */
  labelCounts: Record<MailLabel, number>
  hrefFor: (view: MailView) => string
  /** Opens a view in place — what a plain click on a folder does. */
  onOpen: (view: MailView) => void
  onLabelChange: (label: MailLabel | null) => void
}

const ROW =
  "flex h-8 w-full items-center gap-2 rounded-md px-2 text-sm text-foreground transition-colors duration-(--duration-fast) ease-(--ease-standard) focus-ring hover:bg-muted"

/**
 * The folders and the labels. A folder is a place, so it is a link to its
 * own `?folder=` — the current one marked with `aria-current` and the brand's
 * muted plane — and a plain click opens it in place. A label narrows the open
 * folder, so it is a toggle; each dot takes its label's chart colour, and the
 * name beside it carries the meaning.
 */
export function MailFolders({ view, label, unread, labelCounts, hrefFor, onOpen, onLabelChange }: MailFoldersProps) {
  return (
    <div data-slot="mail-folders" className="flex flex-col gap-4">
      <nav aria-label="Folders">
        <ul className="flex flex-col gap-0.5">
          {VIEWS.map((entry) => {
            const Icon = entry.icon
            const count = unread[entry.value]
            const current = entry.value === view
            return (
              <li key={entry.value}>
                <Link
                  href={hrefFor(entry.value)}
                  scroll={false}
                  aria-current={current ? "page" : undefined}
                  onClick={(event) => {
                    // A plain click switches in place; a modified one keeps
                    // the browser's own behaviour (a new tab, a new window).
                    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) return
                    event.preventDefault()
                    onOpen(entry.value)
                  }}
                  className={cn(ROW, "aria-[current=page]:bg-brand-muted aria-[current=page]:font-medium")}
                >
                  <Icon aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
                  <span className="truncate">{entry.label}</span>{" "}
                  {count > 0 ? (
                    <span className="ml-auto pl-2 text-xs tabular-nums text-muted-foreground">
                      {/* The space sits outside the hidden word: a leading space inside it is dropped from the name. */}
                      {count}{" "}
                      <span className="sr-only">unread</span>
                    </span>
                  ) : null}
                </Link>
              </li>
            )
          })}
        </ul>
      </nav>

      <div className="flex flex-col gap-1 border-t pt-3">
        <p className="type-eyebrow px-2">Labels</p>
        <ul className="flex flex-col gap-0.5">
          {LABELS.map((entry) => {
            const on = entry.value === label
            return (
              <li key={entry.value}>
                <button
                  type="button"
                  aria-pressed={on}
                  onClick={() => onLabelChange(on ? null : entry.value)}
                  className={cn(ROW, "aria-pressed:bg-brand-muted aria-pressed:font-medium")}
                >
                  <span aria-hidden="true" className={cn("size-2 shrink-0 rounded-full", entry.dot)} />
                  <span className="truncate">{entry.label}</span>{" "}
                  <span className="ml-auto pl-2 text-xs tabular-nums text-muted-foreground">
                    {labelCounts[entry.value]}{" "}
                    <span className="sr-only">{labelCounts[entry.value] === 1 ? "mail" : "mails"}</span>
                  </span>
                </button>
              </li>
            )
          })}
        </ul>
      </div>
    </div>
  )
}

"use client"

import * as React from "react"
import Link from "next/link"
import { InboxIcon, PaperclipIcon, StarIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { 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 { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { EmptyState } from "@/components/ui/empty-state"
import { SearchInput } from "@/components/ui/search-input"
import { SegmentedControl } from "@/components/ui/segmented-control"

import { type MailRow } from "../data"
import { counterpart, isOutgoing, viewName, type MailView } from "./mail-vocabulary"

export type MailFilter = "all" | "unread"

const FILTERS = [
  { value: "all", label: "All" },
  { value: "unread", label: "Unread" },
]

export type MailListProps = {
  view: MailView
  /** Every row of the open view, the label applied; the filter and the search narrow them here. */
  rows: MailRow[]
  selectedId: string | null
  filter: MailFilter
  onFilterChange: (filter: MailFilter) => void
  query: string
  onQueryChange: (query: string) => void
  hrefFor: (id: string) => string
  onOpen: (id: string) => void
  onStar: (row: MailRow) => void
  /** The phone's way to the folders, which have no pane of their own there. */
  folders: React.ReactNode
  /** A refusal that came back from a star pressed in the list. */
  refusal?: string
  className?: string
}

/** The row's id in the document, so focus can be handed back to it. */
export const rowDomId = (id: string) => `mail-row-${id}`

/**
 * The list pane: the open folder's name and counts, All or Unread, a search,
 * and the rows — each a link to its own `?mail=`, the open one on the brand's
 * muted plane with the rail, an unread one in the heavier weight with a dot.
 * The star sits beside the link rather than inside it, so a row is one stop
 * to open and one to star.
 */
export function MailList({
  view,
  rows,
  selectedId,
  filter,
  onFilterChange,
  query,
  onQueryChange,
  hrefFor,
  onOpen,
  onStar,
  folders,
  refusal,
  className,
}: MailListProps) {
  const headingId = React.useId()
  const needle = query.trim().toLowerCase()
  const unread = rows.filter((row) => !row.read).length
  const visible = rows.filter((row) => {
    if (filter === "unread" && row.read) return false
    if (!needle) return true
    const person = counterpart(row)
    return [person.name, person.email, row.subject, row.snippet].some((text) => text.toLowerCase().includes(needle))
  })

  return (
    <Card data-slot="mail-list" aria-labelledby={headingId} role="region" className={cn("min-h-0", className)}>
      <CardHeader>
        <CardTitle>
          <h2 id={headingId}>{viewName(view)}</h2>
        </CardTitle>
        <CardDescription className="text-xs tabular-nums">
          {unread} unread of {rows.length}
        </CardDescription>
        <CardAction className="flex items-center gap-1">
          {folders}
          <SegmentedControl
            size="sm"
            aria-label="Show"
            options={FILTERS}
            value={filter}
            onValueChange={(next) => onFilterChange(next as MailFilter)}
          />
        </CardAction>
      </CardHeader>

      <CardContent className="flex min-h-0 flex-col p-0">
        <div className="shrink-0 border-b p-2">
          <SearchInput
            size="sm"
            aria-label="Search mail"
            placeholder="Search mail"
            value={query}
            onValueChange={onQueryChange}
          />
        </div>
        {refusal ? (
          <Callout variant="danger" role="alert" className="m-2">
            {refusal}
          </Callout>
        ) : null}

        {visible.length === 0 ? (
          <EmptyState
            size="sm"
            icon={<InboxIcon />}
            title={needle ? "No mail matches" : filter === "unread" ? "No unread mail" : "Nothing here"}
            description={needle ? `Nothing in ${viewName(view)} mentions “${query.trim()}”.` : "This folder is empty."}
            className="py-10"
          />
        ) : (
          <ul aria-label={`${viewName(view)} mail`} className="min-h-0 flex-1 divide-y overflow-y-auto">
            {visible.map((row) => (
              <MailListRow
                key={row.id}
                row={row}
                selected={row.id === selectedId}
                href={hrefFor(row.id)}
                onOpen={onOpen}
                onStar={onStar}
              />
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  )
}

function MailListRow({
  row,
  selected,
  href,
  onOpen,
  onStar,
}: {
  row: MailRow
  selected: boolean
  href: string
  onOpen: (id: string) => void
  onStar: (row: MailRow) => void
}) {
  const person = counterpart(row)
  const who = isOutgoing(row) ? `To ${person.name}` : person.name
  const files = row.attachments.length > 0
  const summary = `${row.read ? "" : "Unread. "}${who}: ${row.subject}. ${row.when}${files ? ". Has attachments" : ""}`

  return (
    <li className="relative">
      <Link
        id={rowDomId(row.id)}
        href={href}
        scroll={false}
        aria-label={summary}
        aria-current={selected ? "true" : undefined}
        data-unread={row.read ? undefined : ""}
        onClick={(event) => {
          if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) return
          event.preventDefault()
          onOpen(row.id)
        }}
        className="flex gap-3 px-3 py-2.5 text-sm transition-colors duration-(--duration-fast) ease-(--ease-standard) hover:bg-muted/50 focus-visible:bg-muted/50 focus-ring-inset aria-[current=true]:bg-brand-muted aria-[current=true]:shadow-[inset_2px_0_0_var(--brand)]"
      >
        <Avatar className="mt-0.5">
          {person.avatarUrl ? <AvatarImage src={person.avatarUrl} alt="" /> : null}
          <AvatarFallback className="text-xs">{getInitials(person.name)}</AvatarFallback>
        </Avatar>
        <span className="flex min-w-0 flex-1 flex-col gap-0.5">
          <span className="flex min-w-0 items-center gap-2">
            <span className={cn("truncate", row.read ? "text-muted-foreground" : "font-semibold text-foreground")}>
              {who}
            </span>
            {row.read ? null : <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-foreground" />}
            <time dateTime={row.at.toISOString()} className="ml-auto shrink-0 text-xs tabular-nums text-muted-foreground">
              {row.when}
            </time>
          </span>
          <span className={cn("truncate text-foreground", row.read ? "font-normal" : "font-semibold", selected && "font-medium")}>
            {row.subject}
          </span>
          <span className="flex min-w-0 items-center gap-1.5 pr-7 text-xs text-muted-foreground">
            <span className="truncate">{row.snippet || "No message"}</span>
            {files ? <PaperclipIcon aria-hidden="true" className="ml-auto size-3.5 shrink-0" /> : null}
          </span>
        </span>
      </Link>
      <Button
        type="button"
        variant="ghost"
        size="icon-xs"
        aria-pressed={row.starred}
        aria-label={`Star “${row.subject}”`}
        onClick={() => onStar(row)}
        className="absolute right-2 bottom-2 text-faint-foreground aria-pressed:text-foreground"
      >
        <StarIcon aria-hidden="true" className={cn(row.starred && "fill-current")} />
      </Button>
    </li>
  )
}

"use client"

import * as React from "react"
import {
  ArchiveIcon,
  ChevronLeftIcon,
  FileTextIcon,
  MailIcon,
  MailOpenIcon,
  ReplyIcon,
  StarIcon,
  Trash2Icon,
} from "lucide-react"

import { cn } from "@/lib/utils"
import { getInitials } from "@/lib/format"
import {
  Attachment,
  AttachmentContent,
  AttachmentDescription,
  AttachmentGroup,
  AttachmentMedia,
  AttachmentTitle,
} from "@/components/ui/attachment"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { EmptyState } from "@/components/ui/empty-state"
import { Toolbar } from "@/components/ui/toolbar"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"

import { type MailRow } from "../data"
import { FOLDER_NAMES, LABELS, counterpart } from "./mail-vocabulary"
import { QuickReply } from "./quick-reply"

export type MailReaderProps = {
  mail: MailRow | null
  /** The URL names a mail the mailbox does not hold: a stale link, or one to a mail since deleted. */
  missing?: boolean
  onBack: () => void
  onArchive: () => void
  onTrash: () => void
  onStar: () => void
  onMarkUnread: () => void
  onReply: (text: string) => Promise<string | null>
  /** An action on this mail is on its way to the server. */
  busy: boolean
  /** A refusal of something done to this mail, printed under the toolbar that asked. */
  refusal?: string
  className?: string
}

/** The DOM id of a mail's subject: it names the reader, and takes focus where the list gives way to the mail. */
export const mailSubjectId = (id: string) => `mail-subject-${id}`

/** One icon button of the toolbar: named for a screen reader, captioned for a pointer. */
function ToolbarButton({
  label,
  onClick,
  pressed,
  disabled,
  children,
  className,
}: {
  label: string
  onClick: () => void
  pressed?: boolean
  disabled?: boolean
  children: React.ReactNode
  className?: string
}) {
  return (
    <Tooltip>
      <TooltipTrigger
        render={
          <Button
            type="button"
            variant="ghost"
            size="icon-sm"
            aria-label={label}
            aria-pressed={pressed}
            // Busy but focusable, as AsyncButton is: a natively disabled button
            // drops the focus it was pressed with.
            disabled={disabled}
            focusableWhenDisabled
            aria-disabled={disabled || undefined}
            onClick={onClick}
            className={className}
          />
        }
      >
        {children}
      </TooltipTrigger>
      <TooltipContent>{label}</TooltipContent>
    </Tooltip>
  )
}

/**
 * The reader: a toolbar of named icon buttons on the strip — Back on a phone,
 * then reply, archive, delete, star and mark unread — and the mail on the
 * sheet: its subject as the pane's heading, who it is from and to, the full
 * date, the body paragraph by paragraph, the files it carries, and a reply
 * box that answers the other person on it.
 */
export function MailReader({
  mail,
  missing = false,
  onBack,
  onArchive,
  onTrash,
  onStar,
  onMarkUnread,
  onReply,
  busy,
  refusal,
  className,
}: MailReaderProps) {
  const replyRef = React.useRef<HTMLTextAreaElement>(null)

  if (!mail) {
    // The same strip as an open mail, its buttons resting, so the pane does
    // not change shape when a mail opens in it.
    return (
      <Card data-slot="mail-reader" className={cn("min-h-0", className)}>
        <CardHeader className="flex items-center gap-1">
          <CardTitle>Reading pane</CardTitle>
        </CardHeader>
        <CardContent className="flex items-center justify-center">
          {missing ? (
            <EmptyState
              icon={<MailOpenIcon />}
              title="That mail is no longer in the mailbox"
              description="It may have been deleted since the link was made. Pick another from the list."
            />
          ) : (
            <EmptyState
              icon={<MailOpenIcon />}
              title="No mail open"
              description="Pick a mail from the list to read it here."
            />
          )}
        </CardContent>
      </Card>
    )
  }

  const other = counterpart(mail)
  const headingId = mailSubjectId(mail.id)

  return (
    <Card data-slot="mail-reader" role="region" aria-labelledby={headingId} className={cn("min-h-0", className)}>
      <CardHeader className="flex items-center gap-1">
        <Button type="button" variant="ghost" size="sm" onClick={onBack} className="-ml-1 lg:hidden">
          <ChevronLeftIcon data-icon="inline-start" />
          Back
        </Button>
        {/* The kit's toolbar: one tab stop, the arrow keys between its buttons. */}
        <Toolbar aria-label="Mail actions" size="sm" className="ms-auto lg:ms-0">
          <ToolbarButton label="Reply" onClick={() => replyRef.current?.focus()}>
            <ReplyIcon aria-hidden="true" />
          </ToolbarButton>
          <ToolbarButton label="Archive" onClick={onArchive} disabled={busy}>
            <ArchiveIcon aria-hidden="true" />
          </ToolbarButton>
          <ToolbarButton label="Delete" onClick={onTrash} disabled={busy}>
            <Trash2Icon aria-hidden="true" />
          </ToolbarButton>
          <ToolbarButton label="Star" pressed={mail.starred} onClick={onStar} disabled={busy}>
            <StarIcon aria-hidden="true" className={cn(mail.starred && "fill-current")} />
          </ToolbarButton>
          <ToolbarButton label="Mark unread" onClick={onMarkUnread} disabled={busy}>
            <MailIcon aria-hidden="true" />
          </ToolbarButton>
        </Toolbar>
        <p className="ml-auto hidden text-xs text-muted-foreground tabular-nums lg:block">{mail.when}</p>
      </CardHeader>

      <CardContent className="flex min-h-0 flex-col gap-5 overflow-y-auto">
        {refusal ? (
          <Callout variant="danger" role="alert">
            {refusal}
          </Callout>
        ) : null}

        <div className="flex flex-col gap-2">
          <h2 id={headingId} tabIndex={-1} className="text-lg leading-7 font-semibold text-pretty text-foreground outline-none">
            {mail.subject}
          </h2>
          <div className="flex flex-wrap items-center gap-1.5">
            <Badge variant="outline">{FOLDER_NAMES[mail.folder]}</Badge>
            {mail.labels.map((value) => {
              const label = LABELS.find((entry) => entry.value === value)
              return (
                <Badge key={value} variant="outline" className="gap-1.5">
                  <span aria-hidden="true" className={cn("size-1.5 rounded-full", label?.dot)} />
                  {label?.label ?? value}
                </Badge>
              )
            })}
          </div>
        </div>

        <div className="flex items-start gap-3">
          <Avatar size="lg">
            {mail.from.avatarUrl ? <AvatarImage src={mail.from.avatarUrl} alt="" /> : null}
            <AvatarFallback>{getInitials(mail.from.name)}</AvatarFallback>
          </Avatar>
          <div className="flex min-w-0 flex-1 flex-col gap-0.5 text-sm">
            <p className="flex min-w-0 flex-wrap items-baseline gap-x-2">
              <span className="font-medium text-foreground">{mail.from.name}</span>
              <span className="truncate text-xs text-muted-foreground">{mail.from.email}</span>
            </p>
            <p className="text-xs text-muted-foreground">
              To {mail.to.map((person) => person.name).join(", ") || "no one yet"}
            </p>
            <p className="text-xs text-muted-foreground tabular-nums">
              <time dateTime={mail.at.toISOString()}>{mail.date}</time>
            </p>
          </div>
        </div>

        <div data-slot="mail-body" className="flex max-w-prose flex-col gap-3 text-sm leading-6 text-foreground">
          {mail.body.length > 0 ? (
            mail.body.map((paragraph, index) => <p key={index}>{paragraph}</p>)
          ) : (
            <p className="text-muted-foreground">No message.</p>
          )}
        </div>

        {mail.attachments.length > 0 ? (
          <section aria-label="Attachments" className="flex flex-col gap-2">
            <p className="type-eyebrow">
              {mail.attachments.length} {mail.attachments.length === 1 ? "file" : "files"}
            </p>
            <AttachmentGroup className="flex-wrap">
              {mail.attachments.map((file) => (
                <Attachment key={file.name} size="sm">
                  <AttachmentMedia>
                    <FileTextIcon aria-hidden="true" />
                  </AttachmentMedia>
                  <AttachmentContent>
                    <AttachmentTitle>{file.name}</AttachmentTitle>
                    <AttachmentDescription className="tabular-nums">{file.size}</AttachmentDescription>
                  </AttachmentContent>
                </Attachment>
              ))}
            </AttachmentGroup>
          </section>
        ) : null}

        {other.email ? (
          <QuickReply
            key={mail.id}
            ref={replyRef}
            to={other.name}
            onSend={onReply}
            className="mt-auto border-t pt-4"
          />
        ) : null}
      </CardContent>
    </Card>
  )
}

"use client"

import * as React from "react"
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { FolderIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import type { Result } from "@/lib/sample-data"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { PageHeader } from "@/components/ui/page-header"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"

import { archiveMail, sendMail, setRead, toggleStar, trashMail, type OutgoingMail } from "../actions"
import { type MailContact, type MailLabel, type MailRow } from "../data"
import { MailCompose } from "./mail-compose"
import { MailFolders } from "./mail-folders"
import { MailList, rowDomId, type MailFilter } from "./mail-list"
import { MailReader, mailSubjectId } from "./mail-reader"
import { LABELS, VIEWS, counterpart, inView, isLabel, isView, type MailView as View } from "./mail-vocabulary"

export type MailViewProps = {
  mails: MailRow[]
  contacts: MailContact[]
  /** The signed-in member's address: whose mailbox this is. */
  address: string
}

type Refusal = { where: "list" | "reader"; message: string }

/** "Re: …" once, however many times a thread is answered. */
const replySubject = (subject: string) => (/^re:/i.test(subject) ? subject : `Re: ${subject}`)

/**
 * The mail app. The folder, the label and the open mail live in the URL —
 * `?folder=`, `?label=`, `?mail=` — so a mail is a link a reader can send and
 * a preview can deep-link; every change is written back with `replace`, the
 * other keys on the query left as they were. At 1024px and up the three panes
 * sit side by side; below it one shows at a time — the list, or the mail with
 * a Back control — and the folders move into a sheet, and focus goes with the
 * pane: to the mail's subject as it opens, back to its row on Back. Opening a
 * mail is what reads it. A success is said once, in the status line under the
 * title; a refusal is printed in the pane that asked.
 */
export function MailView({ mails, contacts, address }: MailViewProps) {
  const router = useRouter()
  const pathname = usePathname()
  const params = useSearchParams()
  const folderParam = params.get("folder")
  const labelParam = params.get("label")
  const view: View = isView(folderParam) ? folderParam : "inbox"
  const label: MailLabel | null = isLabel(labelParam) ? labelParam : null
  const mailId = params.get("mail")

  const [rows, setRows] = React.useState(mails)
  const [filter, setFilter] = React.useState<MailFilter>("all")
  const [query, setQuery] = React.useState("")
  const [notice, setNotice] = React.useState("")
  const [refusal, setRefusal] = React.useState<Refusal | null>(null)
  const [busy, setBusy] = React.useState(false)
  const [foldersOpen, setFoldersOpen] = React.useState(false)
  // The row a closed mail hands focus back to, once the reader has gone.
  const refocus = React.useRef<string | null>(null)
  // The mail the reader has just opened from the list, which takes focus into
  // the reader where the list gives way to it.
  const opened = React.useRef<string | null>(null)
  // The mail open now, for an answer to check when it lands: one about a mail
  // the reader has since left changes that mail's row and nothing else.
  const open = React.useRef(mailId)
  React.useEffect(() => {
    open.current = mailId
  }, [mailId])
  // A mail the reader just marked unread stays unread while it is still open;
  // the hold lets go as soon as another mail, or none, is open.
  const [heldUnread, setHeldUnread] = React.useState<string | null>(null)
  if (heldUnread !== null && heldUnread !== mailId) setHeldUnread(null)

  // A refusal was about the mail that was open: another mail opens clean.
  const [refusedFor, setRefusedFor] = React.useState(mailId)
  if (refusedFor !== mailId) {
    setRefusedFor(mailId)
    setRefusal(null)
  }

  const selected = rows.find((row) => row.id === mailId) ?? null
  const inFolder = rows.filter((row) => inView(row, view))
  const listed = label ? inFolder.filter((row) => row.labels.includes(label)) : inFolder
  const unread = Object.fromEntries(
    VIEWS.map((entry) => [entry.value, rows.filter((row) => inView(row, entry.value) && !row.read).length])
  ) as Record<View, number>
  const labelCounts = Object.fromEntries(
    LABELS.map((entry) => [entry.value, inFolder.filter((row) => row.labels.includes(entry.value)).length])
  ) as Record<MailLabel, number>

  /** The current query with some keys changed, so a preview's own settings ride along. */
  const hrefWith = (patch: Record<string, string | null>) => {
    const next = new URLSearchParams(params.toString())
    for (const [key, value] of Object.entries(patch)) {
      if (value === null) next.delete(key)
      else next.set(key, value)
    }
    const search = next.toString()
    return search ? `${pathname}?${search}` : pathname
  }
  const go = (href: string) => router.replace(href, { scroll: false })
  const hrefForView = (next: View) => hrefWith({ folder: next === "inbox" ? null : next, label: null, mail: null })

  const replaceRow = React.useCallback(
    (row: MailRow) => setRows((current) => current.map((entry) => (entry.id === row.id ? row : entry))),
    []
  )

  // Opening a mail is what reads it: the dot goes in the list, and the store
  // agrees, so a reload does not bring it back. The answer is about its own
  // row, so it lands there even when the reader has opened another mail since;
  // a refusal is shown only while the mail it is about is still open.
  const selectedId = selected?.id ?? null
  const selectedUnread = selected !== null && !selected.read && heldUnread !== selected.id
  React.useEffect(() => {
    if (!selectedId || !selectedUnread) return
    let live = true
    void setRead(selectedId, true).then((result) => {
      if (result.ok) replaceRow(result.data)
      else if (live) setRefusal({ where: "reader", message: result.error.message })
    })
    return () => {
      live = false
    }
  }, [selectedId, selectedUnread, replaceRow])

  // Below 1024px the list gives way to the mail it opens, hiding the row that
  // had focus: focus goes to the mail's subject, where reading starts. From
  // 1024px up the row stays in view and keeps it.
  React.useEffect(() => {
    if (!selectedId || opened.current !== selectedId) return
    opened.current = null
    const wide = typeof window.matchMedia === "function" && window.matchMedia("(min-width: 64rem)").matches
    if (!wide) document.getElementById(mailSubjectId(selectedId))?.focus()
  }, [selectedId])

  // A mail closed by Back or marked unread hands focus back to its row in the list.
  React.useEffect(() => {
    const id = refocus.current
    if (!id || selectedId) return
    refocus.current = null
    document.getElementById(rowDomId(id))?.focus()
  }, [selectedId])

  async function change(where: Refusal["where"], act: () => Promise<Result<MailRow>>, say: (row: MailRow) => string) {
    const about = open.current
    setBusy(true)
    setRefusal(null)
    const result = await act()
    setBusy(false)
    if (!result.ok) {
      // A refusal is printed with the mail it is about; another mail opened
      // since reads clean.
      if (where === "reader" && open.current !== about) return null
      setNotice("")
      setRefusal({ where, message: result.error.message })
      return null
    }
    replaceRow(result.data)
    setNotice(say(result.data))
    return result.data
  }

  const star = (row: MailRow, where: Refusal["where"]) =>
    change(where, () => toggleStar(row.id), (next) =>
      next.starred ? `Starred “${next.subject}”.` : `Took the star off “${next.subject}”.`
    )

  async function send(mail: OutgoingMail, said: (row: MailRow) => string) {
    const result = await sendMail(mail)
    if (!result.ok) return result
    setRows((current) => [result.data, ...current])
    setNotice(said(result.data))
    return result
  }

  /** Sends a reply to the open mail; what the server refuses goes back to the box it was typed in. */
  async function reply(text: string): Promise<string | null> {
    if (!selected) return "There is no mail open to reply to."
    const other = counterpart(selected)
    if (!other.email) return "This mail has no one to reply to."
    const result = await send({ to: other.email, subject: replySubject(selected.subject), body: text }, () =>
      `Reply sent to ${other.name}.`
    )
    return result.ok ? null : result.error.message
  }

  async function compose(mail: OutgoingMail) {
    const result = await send(mail, (row) => `Sent to ${row.to.map((person) => person.name).join(", ")}.`)
    return result.ok ? { ok: true as const } : { ok: false as const, message: result.error.message, field: result.error.field }
  }

  const folders = (
    <MailFolders
      view={view}
      label={label}
      unread={unread}
      labelCounts={labelCounts}
      hrefFor={hrefForView}
      onOpen={(next) => {
        setFoldersOpen(false)
        go(hrefForView(next))
      }}
      onLabelChange={(next) => {
        setFoldersOpen(false)
        go(hrefWith({ label: next, mail: null }))
      }}
    />
  )

  return (
    <div data-slot="mail-view" className="flex flex-col gap-3">
      <PageHeader
        title="Mail"
        description="Customers and teammates in one mailbox."
        meta={`${unread.inbox} unread in the inbox`}
        actions={<MailCompose contacts={contacts} onSend={compose} />}
      />
      <p data-slot="mail-status" role="status" aria-live="polite" className="-mt-1 min-h-5 text-sm text-muted-foreground">
        {notice}
      </p>

      <div
        data-pane={selected ? "reader" : "list"}
        className="grid gap-3 lg:h-[calc(100svh-12.75rem)] lg:min-h-[34rem] lg:grid-cols-[9rem_15rem_minmax(0,1fr)] xl:grid-cols-[12rem_20rem_minmax(0,1fr)] 2xl:grid-cols-[13rem_24rem_minmax(0,1fr)]"
      >
        <Card data-slot="mail-mailbox" className="hidden min-h-0 lg:flex">
          <CardHeader>
            <CardTitle>Mailbox</CardTitle>
            <CardDescription className="truncate text-xs">{address}</CardDescription>
          </CardHeader>
          <CardContent className="overflow-y-auto p-2">{folders}</CardContent>
        </Card>

        <MailList
          className={cn(selected && "max-lg:hidden")}
          view={view}
          rows={listed}
          selectedId={selectedId}
          filter={filter}
          onFilterChange={setFilter}
          query={query}
          onQueryChange={setQuery}
          hrefFor={(id) => hrefWith({ mail: id })}
          onOpen={(id) => {
            opened.current = id
            go(hrefWith({ mail: id }))
          }}
          onStar={(row) => void star(row, "list")}
          refusal={refusal?.where === "list" ? refusal.message : undefined}
          folders={
            <Sheet open={foldersOpen} onOpenChange={setFoldersOpen}>
              <SheetTrigger render={<Button type="button" variant="outline" size="icon-sm" aria-label="Folders" className="lg:hidden" />}>
                <FolderIcon aria-hidden="true" />
              </SheetTrigger>
              <SheetContent side="left" className="w-72 gap-3 p-4">
                <SheetHeader className="p-0">
                  <SheetTitle>Mailbox</SheetTitle>
                </SheetHeader>
                {folders}
              </SheetContent>
            </Sheet>
          }
        />

        <MailReader
          className={cn(!selected && "max-lg:hidden")}
          mail={selected}
          missing={mailId !== null && !selected}
          busy={busy}
          refusal={refusal?.where === "reader" ? refusal.message : undefined}
          onBack={() => {
            if (selected) refocus.current = selected.id
            go(hrefWith({ mail: null }))
          }}
          onArchive={() =>
            selected && void change("reader", () => archiveMail(selected.id), (row) => `“${row.subject}” moved to the archive.`)
          }
          onTrash={() =>
            selected && void change("reader", () => trashMail(selected.id), (row) => `“${row.subject}” moved to the trash.`)
          }
          onStar={() => selected && void star(selected, "reader")}
          onMarkUnread={async () => {
            if (!selected) return
            const id = selected.id
            setHeldUnread(id)
            const row = await change("reader", () => setRead(id, false), (next) => `Marked “${next.subject}” unread.`)
            // Closing the mail and handing focus back belong to this mail: one
            // the reader has opened since stays open.
            if (!row || open.current !== id) return
            refocus.current = row.id
            go(hrefWith({ mail: null }))
          }}
          onReply={reply}
        />
      </div>
    </div>
  )
}