Chat

import * as React from "react"

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

import { signOut } from "./actions"
import { ChatView } from "./components/chat-view"
import { chatRows, chatSummary, currentUser, messageRows, people, shellNotifications } from "./data"
import { NAV, ROUTES } from "@/lib/dashboards/projects/nav"

/**
 * The chat. The page is a server component: it reads every chat and every
 * line through `db`, works out who is in each, and hands them to one client
 * island. The island reads `?chat=` to know which thread is open, so it sits
 * inside a Suspense boundary — a prerendered page that calls `useSearchParams`
 * outside one fails the build.
 */
export default function ChatPage() {
  const rows = chatRows()
  const user = currentUser()
  const unread = rows.reduce((total, chat) => total + chat.unread, 0)

  return (
    <AppShell
      nav={NAV}
      activeHref={ROUTES.chat}
      user={user}
      notifications={shellNotifications()}
      now={REFERENCE_DATE}
      onSignOut={signOut}
    >
      <PageHeader
        title="Chat"
        description="Direct messages and groups across the workspace, newest first."
        badge={unread > 0 ? <Badge variant="secondary">{unread} unread</Badge> : undefined}
        meta={chatSummary()}
      />

      <React.Suspense fallback={<Skeleton className="h-[32rem] w-full rounded-xl" />}>
        <ChatView
          chats={rows}
          messages={messageRows()}
          people={people()}
          me={{ id: user.id, name: user.name, initials: user.initials }}
          now={REFERENCE_DATE}
        />
      </React.Suspense>
    </AppShell>
  )
}

/**
 * What this page reads. Every chat comes from `db.chats`, every line from
 * `db.messages`, and every name from `db.members`; the signed-in member is the
 * first member row, the way the entity was generated. Presence has no row to
 * read, so it is drawn once from `seeded("chat-app")` per member. The client
 * island imports only the types below — the formatters it draws with live
 * beside it in `components/chat-vocabulary.ts`, so nothing that reaches `db`
 * is ever pulled into the browser.
 */
import { getInitials } from "@/lib/format"
import { db, seeded, type Chat, type Member, type Message } from "@/lib/sample-data"

export type Presence = "online" | "away" | "offline"
export type MessageStatus = Message["status"]

export type ChatMember = { id: string; name: string; initials: string; avatarUrl?: string; presence: Presence }

export type ChatRow = {
  id: string
  kind: Chat["kind"]
  name: string
  /** Everyone in the chat but the reader. */
  members: ChatMember[]
  unread: number
  lastMessageAt: Date
  muted: boolean
  /** A dm's other person, so the row and the header can show them. */
  presence: Presence | null
  lastMessage: { text: string; fromMe: boolean; status: MessageStatus } | null
}

export type MessageRow = {
  id: string
  chatId: string
  fromId: string
  fromName: string
  fromInitials: string
  fromAvatar?: string
  fromMe: boolean
  text: string
  at: Date
  status: MessageStatus
}

/** Someone the reader can start a chat with, and the dm they already share if there is one. */
export type Person = { id: string; name: string; chatId?: string }

/** Who is who, read per call: the reader and the rest of the team as they are now. */
type Directory = {
  /** The reader: the first member of the workspace, as the chats were generated around. */
  me: Member
  members: Map<string, Member>
}

function directory(): Directory {
  const members = db.members.all()
  return { me: members[0], members: new Map(members.map((member) => [member.id, member])) }
}

let presence: Map<string, Presence> | undefined

// A seeded rule, not a row: presence is drawn once per member and stays put,
// so a face that is online in the list is online in the header too. Drawn when
// a page first asks, never when the module loads; a member who joins after
// that reads as offline.
function presenceOf(id: string): Presence {
  if (!presence) {
    const rand = seeded("chat-app")
    presence = new Map()
    for (const member of db.members.all()) {
      const draw = rand()
      presence.set(member.id, draw < 0.45 ? "online" : draw < 0.7 ? "away" : "offline")
    }
  }
  return presence.get(id) ?? "offline"
}

function toMember(id: string, { members }: Directory): ChatMember {
  const member = members.get(id)
  const name = member?.name ?? "Former teammate"
  return { id, name, initials: getInitials(name), avatarUrl: member?.avatarUrl, presence: presenceOf(id) }
}

/** One message as the thread draws it. Exported because the actions return one. */
export function toMessageRow(message: Message, team = directory()): MessageRow {
  const from = toMember(message.fromId, team)
  return {
    id: message.id,
    chatId: message.chatId,
    fromId: message.fromId,
    fromName: from.name,
    fromInitials: from.initials,
    fromAvatar: from.avatarUrl,
    fromMe: message.fromId === team.me.id,
    text: message.text,
    at: message.at,
    status: message.status,
  }
}

/** One chat as the list draws it, with the line it ended on. */
export function toChatRow(chat: Chat, team = directory()): ChatRow {
  const others = chat.memberIds.filter((id) => id !== team.me.id).map((id) => toMember(id, team))
  const last = db.messages
    .all()
    .filter((message) => message.chatId === chat.id)
    .sort((a, b) => b.at.getTime() - a.at.getTime())[0]
  return {
    id: chat.id,
    kind: chat.kind,
    name: chat.name,
    members: others,
    unread: chat.unread,
    lastMessageAt: chat.lastMessageAt,
    muted: chat.muted,
    presence: chat.kind === "dm" ? (others[0]?.presence ?? "offline") : null,
    lastMessage: last
      ? { text: last.text, fromMe: last.fromId === team.me.id, status: last.status }
      : null,
  }
}

/** Every chat the reader is in, the most recently active first. */
export function chatRows(): ChatRow[] {
  const team = directory()
  return db.chats
    .all()
    .map((chat) => toChatRow(chat, team))
    .sort((a, b) => b.lastMessageAt.getTime() - a.lastMessageAt.getTime())
}

/** Every message, oldest first; the island files them by chat. */
export function messageRows(): MessageRow[] {
  const team = directory()
  return db.messages
    .all()
    .map((message) => toMessageRow(message, team))
    .sort((a, b) => a.at.getTime() - b.at.getTime())
}

/** Everyone still in the workspace, with the dm they already share with the reader. */
export function people(): Person[] {
  const { me } = directory()
  const dms = new Map(
    db.chats
      .all()
      .filter((chat) => chat.kind === "dm")
      .map((chat) => [chat.memberIds.find((id) => id !== me.id) ?? "", chat.id])
  )
  return db.members
    .all()
    .filter((member) => member.status === "active" && member.id !== me.id)
    .map((member) => ({ id: member.id, name: member.name, ...(dms.has(member.id) ? { chatId: dms.get(member.id) } : {}) }))
    .sort((a, b) => a.name.localeCompare(b.name))
}

/** The line under the title: how many threads, and how many still have something unread. */
export function chatSummary(): string {
  const rows = db.chats.all()
  const unread = rows.filter((chat) => chat.unread > 0).length
  return `${rows.length} chats · ${unread} with unread messages`
}

/** The bell's contents: the newest notifications, unread first in the panel. */
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 }))
}

/** The person looking at the page — the member every chat was generated around. */
export function currentUser() {
  const { me } = directory()
  return { id: me.id, name: me.name, email: me.email, initials: getInitials(me.name), avatarUrl: me.avatarUrl }
}

"use server"

import { mockAuthAdapter } from "@/lib/auth-adapter"
import { REFERENCE_DATE, asString, db, type Result } from "@/lib/sample-data"

import { toMessageRow, type MessageRow } from "./data"

/**
 * What this page changes. Server actions, so the page can stay a server
 * component and still hand its island something to call, and `Result` so every
 * caller reads one success-or-error shape. Who is writing is decided here —
 * the signed-in member, never a field the browser sent.
 */

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

const MAX_LENGTH = 2_000

/** The reader, as every chat was generated around: the first member row. */
function me() {
  return db.members.all()[0]
}

/** Appends a line to a chat as the signed-in member, and marks the thread caught up. */
export async function sendMessage(chatId: string, text: string): Promise<Result<MessageRow>> {
  const body = asString(text).trim()
  if (!body) {
    return { ok: false, error: { code: "required", message: "Write a message before sending.", field: "text" } }
  }
  if (body.length > MAX_LENGTH) {
    return {
      ok: false,
      error: { code: "invalid", message: `Keep a message under ${MAX_LENGTH} characters.`, field: "text" },
    }
  }

  const chat = await db.chats.get(chatId)
  if (!chat) return { ok: false, error: { code: "not_found", message: `No chat with id "${chatId}".` } }

  const sender = me()
  if (!chat.memberIds.includes(sender.id)) {
    return { ok: false, error: { code: "not_allowed", message: `You are not in “${chat.name}”.` } }
  }

  const created = await db.messages.create({
    chatId: chat.id,
    fromId: sender.id,
    text: body,
    at: REFERENCE_DATE,
    status: "sent",
  })
  if (!created.ok) return created

  // Answering a thread is reading it: nothing in it is unread once you have
  // written back, and the list sorts it to the top.
  await db.chats.update(chat.id, { lastMessageAt: REFERENCE_DATE, unread: 0 })

  return { ok: true, data: toMessageRow(created.data) }
}

/** Opening a chat is what marks it read: the count clears, and the other side's lines are read. */
export async function markChatRead(chatId: string): Promise<Result<{ chatId: string; unread: 0 }>> {
  const chat = await db.chats.get(chatId)
  if (!chat) return { ok: false, error: { code: "not_found", message: `No chat with id "${chatId}".` } }

  const reader = me()
  const pending = db.messages
    .all()
    .filter((message) => message.chatId === chat.id && message.fromId !== reader.id && message.status !== "read")
  for (const message of pending) await db.messages.update(message.id, { status: "read" })
  if (chat.unread > 0) await db.chats.update(chat.id, { unread: 0 })

  return { ok: true, data: { chatId: chat.id, unread: 0 } }
}

"use client"

import * as React from "react"
import { PaperclipIcon, SendIcon } from "lucide-react"

import { AsyncButton } from "@/components/ui/async-button"
import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { Textarea } from "@/components/ui/textarea"

export type ChatComposerProps = {
  /** Who the message goes to; the placeholder names them. */
  to: string
  /** Which thread the draft belongs to: a new one starts blank. */
  chatId: string
  error: string | null
  notice: string | null
  sending: boolean
  /** Resolves true when the message was accepted; the draft only clears then. */
  onSend: (text: string) => Promise<boolean>
  onNotice: (message: string) => void
}

/**
 * The box under the thread. Enter sends and Shift+Enter breaks a line, the way
 * every chat client reads; the draft survives a refusal so it can be fixed and
 * sent, and a refusal is a callout right above the box that asked.
 */
export function ChatComposer({ to, chatId, error, notice, sending, onSend, onNotice }: ChatComposerProps) {
  const [draft, setDraft] = React.useState("")

  // A new thread is a new conversation: the half-written line to the last one
  // does not belong in it.
  const [lastId, setLastId] = React.useState(chatId)
  if (chatId !== lastId) {
    setLastId(chatId)
    setDraft("")
  }

  // One draft, once: Enter and the button both come through here, and a send
  // still in flight swallows the second press rather than sending twice.
  async function submit() {
    if (sending) return
    if (await onSend(draft)) setDraft("")
  }

  return (
    <form
      className="flex shrink-0 flex-col gap-2 border-t p-3"
      onSubmit={(event) => {
        event.preventDefault()
        void submit()
      }}
    >
      {error ? (
        <Callout variant="danger" role="alert" title="Not sent">
          {error}
        </Callout>
      ) : null}
      <div className="flex items-end gap-2">
        <Button
          type="button"
          variant="ghost"
          size="icon"
          aria-label="Attach a file"
          className="shrink-0 text-muted-foreground"
          onClick={() => onNotice("Attachments need a file store; none is wired up in the sample.")}
        >
          <PaperclipIcon aria-hidden="true" />
        </Button>
        <Textarea
          aria-label="Message"
          rows={2}
          value={draft}
          placeholder={`Message ${to}…`}
          onChange={(event) => setDraft(event.target.value)}
          onKeyDown={(event) => {
            if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
              event.preventDefault()
              void submit()
            }
          }}
          className="min-h-9 flex-1 resize-none"
        />
        <AsyncButton type="submit" size="sm" loading={sending} loadingText="Sending" className="shrink-0">
          <SendIcon data-icon="inline-start" aria-hidden="true" />
          Send
        </AsyncButton>
      </div>
      <div className="flex flex-wrap items-center justify-between gap-2 text-xs text-muted-foreground">
        <p>Enter to send · Shift+Enter for a new line</p>
        <p role="status" aria-live="polite" className="min-h-4 text-xs text-muted-foreground">
          {notice}
        </p>
      </div>
    </form>
  )
}

"use client"

import * as React from "react"
import Link from "next/link"
import { BellOffIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { AvatarGroup } from "@/components/ui/avatar-group"
import { Badge } from "@/components/ui/badge"
import { DataList, DataListItem } from "@/components/ui/data-list"
import { EmptyState } from "@/components/ui/empty-state"
import { SearchInput } from "@/components/ui/search-input"

import { type ChatRow, type Person } from "../data"
import { PRESENCE_DOT, PRESENCE_LABEL, since } from "./chat-vocabulary"
import { NewChat } from "./new-chat"
import { Receipt } from "./receipt"

export type ChatListProps = {
  chats: ChatRow[]
  people: Person[]
  selectedId: string | null
  now: Date
  hrefFor: (chatId: string) => string
  onOpen: (chatId: string) => void
}

/** The master pane: the heading and the new-chat control, the search, then every chat that matches it. */
export function ChatList({ chats, people, selectedId, now, hrefFor, onOpen }: ChatListProps) {
  const [query, setQuery] = React.useState("")
  const needle = query.trim().toLowerCase()
  const visible = needle ? chats.filter((chat) => chat.name.toLowerCase().includes(needle)) : chats

  return (
    <section aria-label="Chats" className="flex h-full min-h-0 flex-col">
      <div className="flex shrink-0 flex-col gap-2 border-b p-3">
        <div className="flex items-center justify-between gap-2">
          <h2 className="text-base leading-6 font-semibold">Chats</h2>
          <NewChat people={people} onOpen={onOpen} />
        </div>
        <SearchInput
          size="sm"
          aria-label="Search chats"
          placeholder="Search chats"
          value={query}
          onValueChange={setQuery}
          debounce={150}
        />
      </div>

      <div className="min-h-0 flex-1 overflow-y-auto">
        {visible.length === 0 ? (
          <EmptyState size="sm" title="No chat matches" description="Try another name." />
        ) : (
          <DataList divided>
            {visible.map((chat) => (
              <DataListItem
                key={chat.id}
                href={hrefFor(chat.id)}
                renderLink={(href, linkProps) => <Link {...linkProps} href={href} scroll={false} />}
                selected={chat.id === selectedId}
                className="items-center py-2.5"
                leading={
                  chat.kind === "group" ? (
                    <AvatarGroup size="sm" max={3} users={chat.members.map((member) => ({ name: member.name, src: member.avatarUrl }))} />
                  ) : (
                    <Avatar>
                      {chat.members[0]?.avatarUrl ? <AvatarImage src={chat.members[0].avatarUrl} alt="" /> : null}
                      <AvatarFallback className="text-xs">{chat.members[0]?.initials ?? "?"}</AvatarFallback>
                      {chat.presence ? (
                        <AvatarBadge aria-hidden="true" className={PRESENCE_DOT[chat.presence]} />
                      ) : null}
                    </Avatar>
                  )
                }
                title={
                  <span className="flex items-center gap-1.5">
                    <span className={cn("truncate", chat.unread === 0 && "font-normal")}>{chat.name}</span>
                    {chat.presence ? <span className="sr-only">, {PRESENCE_LABEL[chat.presence]}</span> : null}
                    {chat.muted ? (
                      <>
                        <BellOffIcon aria-hidden="true" className="size-3 shrink-0 text-faint-foreground" />
                        <span className="sr-only">, muted</span>
                      </>
                    ) : null}
                  </span>
                }
                description={
                  chat.lastMessage ? (
                    <span className="flex items-center gap-1">
                      {chat.lastMessage.fromMe ? <Receipt status={chat.lastMessage.status} /> : null}
                      <span className="truncate">
                        {chat.lastMessage.fromMe ? "You: " : ""}
                        {chat.lastMessage.text}
                      </span>
                    </span>
                  ) : (
                    "No messages yet"
                  )
                }
                meta={
                  <span className="flex flex-col items-end gap-1">
                    <span className={cn(chat.unread > 0 && "font-medium text-foreground")}>
                      {since(chat.lastMessageAt, now)}
                    </span>
                    {chat.unread > 0 ? (
                      <Badge className="h-4.5 min-w-4.5 px-1.5 text-2xs tabular-nums">
                        <span aria-hidden="true">{chat.unread}</span>
                        <span className="sr-only">{chat.unread} unread</span>
                      </Badge>
                    ) : null}
                  </span>
                }
              />
            ))}
          </DataList>
        )}
      </div>
    </section>
  )
}

"use client"

import * as React from "react"
import { InfoIcon, PhoneIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { AvatarGroup } from "@/components/ui/avatar-group"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { Button } from "@/components/ui/button"
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageHeader,
} from "@/components/ui/message"
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/ui/message-scroller"

import { type ChatRow, type MessageRow } from "../data"
import { PRESENCE_DOT, PRESENCE_LABEL, RECEIPT_LABEL, clockTime, dayLabel, dayOf } from "./chat-vocabulary"
import { Receipt } from "./receipt"

export type ChatThreadProps = {
  chat: ChatRow
  messages: MessageRow[]
  now: Date
  onNotice: (message: string) => void
  /** The composer, which the island owns because it owns the send. */
  composer: React.ReactNode
}

/** The thread's lines, filed under the day each was written on. */
function byDay(messages: MessageRow[]): { day: number; messages: MessageRow[] }[] {
  const groups: { day: number; messages: MessageRow[] }[] = []
  for (const message of messages) {
    const day = dayOf(message.at)
    const last = groups[groups.length - 1]
    if (last && last.day === day) last.messages.push(message)
    else groups.push({ day, messages: [message] })
  }
  return groups
}

/**
 * The detail pane: who the thread is with, what was said day by day, and the
 * box that answers it. Each line is the kit's Bubble inside the kit's Message:
 * ours sit on the right in the accent, theirs on the left on the muted plane,
 * and a receipt under each of ours says how far it got.
 */
export function ChatThread({ chat, messages, now, onNotice, composer }: ChatThreadProps) {
  const [details, setDetails] = React.useState(false)
  const isGroup = chat.kind === "group"

  return (
    <div className="flex h-full min-h-0 flex-col">
      <header className="flex shrink-0 flex-col gap-2 border-b p-3">
        <div className="flex items-center gap-3">
          {isGroup ? (
            <AvatarGroup size="sm" max={3} users={chat.members.map((member) => ({ name: member.name, src: member.avatarUrl }))} />
          ) : (
            <Avatar>
              {chat.members[0]?.avatarUrl ? <AvatarImage src={chat.members[0].avatarUrl} alt="" /> : null}
              <AvatarFallback className="text-xs">{chat.members[0]?.initials ?? "?"}</AvatarFallback>
              {chat.presence ? <AvatarBadge aria-hidden="true" className={PRESENCE_DOT[chat.presence]} /> : null}
            </Avatar>
          )}
          <div className="flex min-w-0 flex-1 flex-col">
            <h2 className="truncate text-sm leading-5 font-semibold">{chat.name}</h2>
            <p className="truncate text-xs text-muted-foreground">
              {isGroup
                ? `${chat.members.length + 1} members`
                : chat.presence
                  ? PRESENCE_LABEL[chat.presence]
                  : "Direct message"}
            </p>
          </div>
          <div className="flex shrink-0 items-center gap-1">
            <Button
              type="button"
              variant="ghost"
              size="icon-sm"
              aria-label="Call"
              onClick={() => onNotice("Calls need a telephony provider; none is wired up in the sample.")}
            >
              <PhoneIcon aria-hidden="true" />
            </Button>
            <Button
              type="button"
              variant="ghost"
              size="icon-sm"
              aria-label="Details"
              aria-pressed={details}
              onClick={() => setDetails((current) => !current)}
            >
              <InfoIcon aria-hidden="true" />
            </Button>
          </div>
        </div>
        {details ? (
          <dl className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 text-xs">
            <dt className="text-muted-foreground">Members</dt>
            <dd className="flex flex-wrap gap-x-3 gap-y-1">
              {chat.members.map((member) => (
                <span key={member.id} className="inline-flex items-center gap-1.5">
                  <span aria-hidden="true" className={cn("size-1.5 rounded-full", PRESENCE_DOT[member.presence])} />
                  {member.name}
                  <span className="sr-only">, {PRESENCE_LABEL[member.presence]}</span>
                </span>
              ))}
            </dd>
            <dt className="text-muted-foreground">Notifications</dt>
            <dd>{chat.muted ? "Muted" : "On"}</dd>
            <dt className="text-muted-foreground">Times</dt>
            <dd>UTC</dd>
          </dl>
        ) : null}
      </header>

      <MessageScrollerProvider defaultScrollPosition="end">
        <MessageScroller className="min-h-0 flex-1">
          <MessageScrollerViewport aria-label={`Messages with ${chat.name}`} className="px-3">
            <MessageScrollerContent aria-label={`Conversation with ${chat.name}`} className="gap-3 py-3">
              {byDay(messages).map((group) => (
                <React.Fragment key={group.day}>
                  <div
                    role="separator"
                    aria-label={dayLabel(group.day, now)}
                    className="flex items-center gap-3 py-1 text-2xs font-medium text-faint-foreground"
                  >
                    <span aria-hidden="true" className="h-px flex-1 bg-border" />
                    {dayLabel(group.day, now)}
                    <span aria-hidden="true" className="h-px flex-1 bg-border" />
                  </div>
                  {group.messages.map((message) => (
                    <MessageScrollerItem key={message.id} messageId={message.id}>
                      <Message align={message.fromMe ? "end" : "start"}>
                        {!message.fromMe && isGroup ? (
                          <MessageAvatar className="min-w-7">
                            <Avatar size="sm">
                              {message.fromAvatar ? <AvatarImage src={message.fromAvatar} alt="" /> : null}
                              <AvatarFallback className="text-2xs">{message.fromInitials}</AvatarFallback>
                            </Avatar>
                          </MessageAvatar>
                        ) : null}
                        <MessageContent className="gap-1">
                          {!message.fromMe && isGroup ? (
                            <MessageHeader>{message.fromName}</MessageHeader>
                          ) : null}
                          <Bubble
                            variant={message.fromMe ? "default" : "muted"}
                            align={message.fromMe ? "end" : "start"}
                          >
                            <BubbleContent>{message.text}</BubbleContent>
                          </Bubble>
                          <MessageFooter className="gap-1 font-normal">
                            <time dateTime={message.at.toISOString()} className="tabular-nums">
                              {clockTime.format(message.at)}
                            </time>
                            {message.fromMe ? (
                              <>
                                <Receipt status={message.status} />
                                <span className="sr-only">{RECEIPT_LABEL[message.status]}</span>
                              </>
                            ) : null}
                          </MessageFooter>
                        </MessageContent>
                      </Message>
                    </MessageScrollerItem>
                  ))}
                </React.Fragment>
              ))}
            </MessageScrollerContent>
          </MessageScrollerViewport>
          <MessageScrollerButton />
        </MessageScroller>
      </MessageScrollerProvider>

      {composer}
    </div>
  )
}

"use client"

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

import { EmptyState } from "@/components/ui/empty-state"
import { SplitView } from "@/components/ui/split-view"

import { markChatRead, sendMessage } from "../actions"
import { type ChatRow, type MessageRow, type Person } from "../data"
import { ChatComposer } from "./chat-composer"
import { ChatList } from "./chat-list"
import { ChatThread } from "./chat-thread"
import { NewChat } from "./new-chat"

export type ChatViewProps = {
  chats: ChatRow[]
  messages: MessageRow[]
  people: Person[]
  me: { id: string; name: string; initials: string; avatarUrl?: string }
  /** The page's reference instant, which every "today" and "3d" is measured against. */
  now: Date
}

/**
 * The chat. The open thread lives in the URL — `?chat=` — so a link lands on
 * a conversation and a preview can deep-link one; the list rows are links to
 * it, and the small-screen Back control writes it back out. Opening a thread
 * marks it read. Sending is optimistic: the line lands in the thread at once,
 * the action writes behind it, and a refusal takes the line back and says why
 * above the box that asked.
 */
export function ChatView({ chats, messages, people, me, now }: ChatViewProps) {
  const router = useRouter()
  const pathname = usePathname()
  const params = useSearchParams()
  const chatId = params.get("chat")

  const [rows, setRows] = React.useState(chats)
  const [lines, setLines] = React.useState(messages)
  const [error, setError] = React.useState<string | null>(null)
  const [notice, setNotice] = React.useState<string | null>(null)
  const [sending, setSending] = React.useState(false)

  // A refusal or a receipt was written under one chat's composer and belongs
  // to it: the rows are links, so the thread changes under the island without
  // open() being called, and the state is cleared against the id it was
  // written for rather than in an effect — a "Sent to Priya" must never sit
  // under Marcus's box, not even for a frame.
  const [noticedFor, setNoticedFor] = React.useState(chatId)
  if (noticedFor !== chatId) {
    setNoticedFor(chatId)
    setError(null)
    setNotice(null)
  }

  const selected = rows.find((chat) => chat.id === chatId) ?? null
  const thread = selected ? lines.filter((line) => line.chatId === selected.id) : []

  // The current query with `chat` swapped, so a preview's own settings — the
  // mode, the palette — ride along with the thread that is opened.
  const hrefFor = React.useCallback(
    (id: string | null) => {
      const query = new URLSearchParams(params.toString())
      if (id) query.set("chat", id)
      else query.delete("chat")
      const search = query.toString()
      return search ? `${pathname}?${search}` : pathname
    },
    [params, pathname]
  )

  const open = React.useCallback(
    (id: string | null) => router.replace(hrefFor(id), { scroll: false }),
    [router, hrefFor]
  )

  // Opening a thread is what marks it read: the count clears in the list, and
  // the store agrees, so a reload does not bring the badge back.
  const selectedId = selected?.id ?? null
  const selectedUnread = selected?.unread ?? 0
  React.useEffect(() => {
    if (!selectedId || selectedUnread === 0) return
    let cancelled = false
    void markChatRead(selectedId).then((result) => {
      if (cancelled) return
      if (!result.ok) {
        // Nothing the reader did, but rule 9 still holds: the refusal lands in
        // the composer's callout, where the reader is looking.
        setNotice(null)
        setError(result.error.message)
        return
      }
      setRows((current) =>
        current.map((chat) => (chat.id === result.data.chatId ? { ...chat, unread: 0 } : chat))
      )
      setLines((current) =>
        current.map((line) =>
          line.chatId === result.data.chatId && !line.fromMe && line.status !== "read"
            ? { ...line, status: "read" }
            : line
        )
      )
    })
    return () => {
      cancelled = true
    }
  }, [selectedId, selectedUnread])

  async function send(text: string): Promise<boolean> {
    if (!selected || sending) return false
    const body = text.trim()
    if (!body) {
      setNotice(null)
      setError("Write a message before sending.")
      return false
    }

    // The line lands at once, timed by the thread it joins until the action
    // says when it was accepted; a refusal takes it back.
    const pendingId = `pending-${selected.id}-${thread.length + 1}`
    const pending: MessageRow = {
      id: pendingId,
      chatId: selected.id,
      fromId: me.id,
      fromName: me.name,
      fromInitials: me.initials,
      fromAvatar: me.avatarUrl,
      fromMe: true,
      text: body,
      at: selected.lastMessageAt,
      status: "sent",
    }
    setError(null)
    setNotice(null)
    setSending(true)
    setLines((current) => [...current, pending])

    const result = await sendMessage(selected.id, body)
    setSending(false)

    if (!result.ok) {
      setLines((current) => current.filter((line) => line.id !== pendingId))
      setError(result.error.message)
      return false
    }

    setLines((current) => current.map((line) => (line.id === pendingId ? result.data : line)))
    setRows((current) =>
      current
        .map((chat) =>
          chat.id === result.data.chatId
            ? {
                ...chat,
                unread: 0,
                lastMessageAt: result.data.at,
                lastMessage: { text: result.data.text, fromMe: true, status: result.data.status },
              }
            : chat
        )
        .sort((a, b) => b.lastMessageAt.getTime() - a.lastMessageAt.getTime())
    )
    setNotice(`Sent to ${selected.name}.`)
    return true
  }

  function noticed(message: string) {
    setError(null)
    setNotice(message)
  }

  return (
    // A fixed frame rather than a growing one: the two panes scroll inside the
    // page, the way a chat client does, instead of the page scrolling.
    <div className="h-[calc(100svh-15rem)] min-h-[32rem] overflow-hidden panel">
      <SplitView
        defaultSize={34}
        minSize={26}
        maxSize={48}
        showDetail={selected !== null}
        onBack={() => open(null)}
        list={
          <ChatList
            chats={rows}
            people={people}
            selectedId={selectedId}
            now={now}
            hrefFor={hrefFor}
            onOpen={open}
          />
        }
        detail={
          selected ? (
            <ChatThread
              chat={selected}
              messages={thread}
              now={now}
              onNotice={noticed}
              composer={
                <ChatComposer
                  to={selected.name}
                  chatId={selected.id}
                  error={error}
                  notice={notice}
                  sending={sending}
                  onSend={send}
                  onNotice={noticed}
                />
              }
            />
          ) : (
            <div className="flex h-full items-center justify-center p-6">
              <EmptyState
                icon={<MessageCircleIcon />}
                title="No chat selected"
                description="Pick a conversation on the left to read it and reply, or start a new one with someone in the workspace."
                action={<NewChat people={people} onOpen={open} variant="primary" />}
              />
            </div>
          )
        }
      />
    </div>
  )
}

import { type MessageStatus, type Presence } from "../data"

/**
 * How the chat is drawn, as the reader sees it: the words and tones for
 * presence, the receipts, and the formatters. Vocabulary, not data — it lives
 * beside the island rather than in `data.ts`, which reads `db` and must never
 * reach the browser.
 */
export const PRESENCE_LABEL: Record<Presence, string> = {
  online: "Online",
  away: "Away",
  offline: "Offline",
}

/** The dot on an avatar, in the presence's tone. */
export const PRESENCE_DOT: Record<Presence, string> = {
  online: "bg-success",
  away: "bg-warning",
  offline: "bg-muted-foreground",
}

/** What a receipt says under one of the reader's own messages. */
export const RECEIPT_LABEL: Record<MessageStatus, string> = {
  sent: "Sent",
  delivered: "Delivered",
  read: "Read",
}

const DAY_MS = 86_400_000

/**
 * Every timestamp on this page is an instant, pinned to UTC: a message sent
 * late in the day would otherwise be dated differently either side of
 * Greenwich, and the list and the thread could disagree about which day it was.
 */
export const clockTime = new Intl.DateTimeFormat("en-US", {
  hour: "numeric",
  minute: "2-digit",
  timeZone: "UTC",
})

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

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

/** Midnight UTC on the day an instant falls on. */
export function dayOf(at: Date): number {
  return Date.UTC(at.getUTCFullYear(), at.getUTCMonth(), at.getUTCDate())
}

/**
 * When a thread last moved, measured against `now` — the page's reference
 * instant, never a clock: a time today, a weekday word this week, a date
 * beyond it.
 */
export function since(at: Date, now: Date): string {
  const days = (dayOf(now) - dayOf(at)) / DAY_MS
  if (days === 0) return clockTime.format(at)
  if (days === 1) return "Yesterday"
  if (days < 7) return `${days}d`
  return shortDay.format(at)
}

/** The divider a day of messages sits under: Today, Yesterday, or the date. */
export function dayLabel(day: number, now: Date): string {
  const days = (dayOf(now) - day) / DAY_MS
  if (days === 0) return "Today"
  if (days === 1) return "Yesterday"
  return longDay.format(new Date(day))
}

"use client"

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

import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

import { type Person } from "../data"

export type NewChatProps = {
  people: Person[]
  /** Opens the chat with this id: the island writes it to the URL. */
  onOpen: (chatId: string) => void
  /** The empty state's primary button, in place of the list's icon button. */
  variant?: "icon" | "primary"
}

/**
 * "New chat" is a pick, not a form: the workspace is who the reader can write
 * to, and the dm they already share is where the conversation goes. The sample
 * store opens threads but does not create them, so a person with no thread yet
 * is answered where the pick was made rather than with a chat that would
 * vanish on reload.
 */
export function NewChat({ people, onOpen, variant = "icon" }: NewChatProps) {
  const [open, setOpen] = React.useState(false)
  const [refusal, setRefusal] = React.useState<string | null>(null)

  function pick(person: Person) {
    if (person.chatId) {
      setRefusal(null)
      setOpen(false)
      onOpen(person.chatId)
      return
    }
    setRefusal(
      `No thread with ${person.name} yet. The sample opens the chats it has; creating one needs a store behind createChat.`
    )
  }

  return (
    <Popover
      open={open}
      onOpenChange={(next) => {
        setOpen(next)
        if (!next) setRefusal(null)
      }}
    >
      <PopoverTrigger
        render={
          variant === "primary" ? (
            <Button>
              <MessageSquarePlusIcon data-icon="inline-start" aria-hidden="true" />
              Start new chat
            </Button>
          ) : (
            <Button variant="outline" size="icon-sm" aria-label="New chat">
              <MessageSquarePlusIcon aria-hidden="true" />
            </Button>
          )
        }
      />
      <PopoverContent align={variant === "primary" ? "center" : "end"} className="w-72 gap-0 p-0">
        <Command>
          <CommandInput placeholder="Message someone…" />
          <CommandList aria-label="People">
            <CommandEmpty>Nobody by that name.</CommandEmpty>
            <CommandGroup heading="Workspace">
              {people.map((person) => (
                <CommandItem key={person.id} value={person.name} onSelect={() => pick(person)}>
                  <span className="truncate">{person.name}</span>
                  {/* A hint for the eye; the pick itself says why when it cannot open. */}
                  {person.chatId ? null : (
                    <span aria-hidden="true" className="ml-auto text-2xs text-faint-foreground">
                      no thread
                    </span>
                  )}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
        {refusal ? (
          <div className="border-t p-2">
            <Callout variant="danger" role="alert" className="text-xs">
              {refusal}
            </Callout>
          </div>
        ) : null}
      </PopoverContent>
    </Popover>
  )
}

import { CheckCheckIcon, CheckIcon } from "lucide-react"

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

import { type MessageStatus } from "../data"

/**
 * The tick or ticks under a line the reader wrote: one for sent, two for
 * delivered, two in ink for read. Decorative — the word travels beside it as
 * sr-only text in both panes — so the list and the thread draw one receipt.
 */
export function Receipt({ status, className }: { status: MessageStatus; className?: string }) {
  const Icon = status === "sent" ? CheckIcon : CheckCheckIcon
  return (
    <Icon
      data-slot="receipt"
      data-status={status}
      aria-hidden="true"
      className={cn("size-3.5 shrink-0", status === "read" ? "text-info" : "text-muted-foreground", className)}
    />
  )
}