Social posts

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

import { formatNumber, getInitials } from "@/lib/format"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { BarChart } from "@/components/ui/bar-chart"
import { buttonVariants } from "@/components/ui/button"
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { EmptyState } from "@/components/ui/empty-state"

import { ChartThread } from "./social-posts-01.client"
import { FEED_HREF, WINDOW_DAYS, chartPost, tagHref, viewer, type ChartPost } from "./social-posts-01.data"

/** Who wrote the post and when, its words with their tags, and the figure it shares. */
function PostBody({ post, nameId, timeId }: { post: ChartPost; nameId: string; timeId: string }) {
  const { weeks, label, through } = post.chart
  return (
    <>
      <header className="flex items-center gap-3">
        <Avatar size="lg" aria-hidden="true">
          <AvatarImage src={post.author.avatarUrl} alt="" />
          <AvatarFallback>{getInitials(post.author.name)}</AvatarFallback>
        </Avatar>
        <div className="flex min-w-0 flex-col">
          <p id={nameId} className="truncate text-sm font-semibold">
            {post.author.name}
          </p>
          <p className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
            <span className="truncate font-mono">@{post.author.handle}</span>
            <span aria-hidden="true">·</span>
            <Link href={post.href} className="shrink-0 rounded-sm tabular-nums hover:underline focus-ring">
              <time id={timeId} dateTime={post.at.iso}>
                <span aria-hidden="true">{post.at.short}</span>
                <span className="sr-only">{post.at.full}</span>
              </time>
            </Link>
          </p>
        </div>
      </header>
      <p className="text-md text-pretty">
        {post.text.map((part, index) =>
          part.tag ? (
            <Link key={index} href={tagHref(part.tag)} className="rounded-sm font-medium text-brand hover:underline focus-ring">
              {part.text}
            </Link>
          ) : (
            <React.Fragment key={index}>{part.text}</React.Fragment>
          )
        )}
      </p>
      <figure className="flex flex-col gap-2">
        <BarChart
          data={weeks}
          index="week"
          series={[{ key: "value", label }]}
          height={200}
          showLegend={false}
        />
        <figcaption className="text-xs text-muted-foreground tabular-nums">
          {label}, the {weeks.length} weeks to the week of {through}: {formatNumber(weeks[0].value)} to{" "}
          {formatNumber(weeks[weeks.length - 1].value)}.
        </figcaption>
      </figure>
    </>
  )
}

/**
 * A post as the team feed shows it, opened: the most liked figure anyone
 * shared over the last fortnight — who wrote it and when, the words, the
 * weekly figures as a chart — with its reactions under it and its comments
 * beside it. The post is drawn here; the island holds the like, the
 * comments and the reply field.
 *
 * A server component: it reads the post through `./social-posts-01.data`,
 * every time already written in UTC, and hands the island plain values.
 */
export function SocialPosts01() {
  const titleId = React.useId()
  const nameId = React.useId()
  const timeId = React.useId()
  const post = chartPost()

  return (
    <section
      data-section="social-posts-01"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>From the team feed</h2>
            </CardTitle>
            <CardDescription>The most liked figure shared in the last {WINDOW_DAYS} days, with its comments</CardDescription>
            <CardAction>
              <Link href={FEED_HREF} className={buttonVariants({ variant: "outline", size: "sm" })}>
                Open the feed
              </Link>
            </CardAction>
          </CardHeader>
          {post ? (
            <ChartThread
              post={<PostBody post={post} nameId={nameId} timeId={timeId} />}
              labelledBy={`${nameId} ${timeId}`}
              author={post.author.name}
              likes={post.likes}
              liked={post.liked}
              shares={post.shares}
              replies={post.replies}
              reader={viewer()}
            />
          ) : (
            <CardContent>
              <EmptyState
                size="sm"
                title="No figures shared lately"
                description={`Nobody has posted a chart to the team feed in the last ${WINDOW_DAYS} days.`}
              />
            </CardContent>
          )}
        </Card>
      </div>
    </section>
  )
}

export default SocialPosts01

"use client"

import * as React from "react"
import { HeartIcon, MessageCircleIcon } from "lucide-react"

import { formatNumber, getInitials } from "@/lib/format"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { CardContent } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"

import type { Person, Reply } from "./social-posts-01.data"

/** A reply as the thread holds it; the reader's own, written just now, has no stamp from the store. */
type ThreadReply = Omit<Reply, "at"> & { at: Reply["at"] | null }

export type ChartThreadProps = {
  /** The post itself — who, when, what and its chart — drawn on the server. */
  post: React.ReactNode
  /** The ids of the author's name and the post's time, which name the article. */
  labelledBy: string
  author: string
  likes: number
  liked: boolean
  shares: number
  replies: Reply[]
  reader: Person
  /** How many of the newest replies show before "Show earlier comments". */
  shown?: number
}

const count = (value: number, one: string, many: string) => `${formatNumber(value)} ${value === 1 ? one : many}`

/**
 * A post and its thread, side by side from `lg`: the post with its like
 * toggle and a Comment button on the left, the comments and a reply field on
 * the right. The like is a pressed button and the count follows it; Comment
 * takes the reader to the reply field; a reply joins the thread and the
 * count. What changed is read out in a status line.
 */
export function ChartThread({ post, labelledBy, author, likes, liked, shares, replies, reader, shown = 3 }: ChartThreadProps) {
  const threadTitleId = React.useId()
  const listId = React.useId()
  const fieldId = React.useId()
  const field = React.useRef<HTMLTextAreaElement>(null)
  const [like, setLike] = React.useState({ on: liked, count: likes })
  const [thread, setThread] = React.useState<ThreadReply[]>(replies)
  const [expanded, setExpanded] = React.useState(false)
  const [draft, setDraft] = React.useState("")
  const [message, setMessage] = React.useState("")

  const earlier = expanded ? 0 : Math.max(0, thread.length - shown)
  const visible = thread.slice(earlier)

  function toggleLike() {
    const next = { on: !like.on, count: like.count + (like.on ? -1 : 1) }
    setLike(next)
    setMessage(`${next.on ? "Liked" : "Like removed"}. ${count(next.count, "like", "likes")}.`)
  }

  function reply(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    const text = draft.trim()
    if (!text) return
    const next = [...thread, { id: `${fieldId}-${thread.length}`, author: reader, text, at: null }]
    setThread(next)
    setDraft("")
    setMessage(`Comment posted. ${count(next.length, "comment", "comments")}.`)
    // The button empties with the field and turns off: keep the focus in the field, ready for another.
    field.current?.focus()
  }

  return (
    <CardContent className="p-0">
      <div className="grid lg:grid-cols-[minmax(0,1fr)_24rem]">
        <article aria-labelledby={labelledBy} className="flex min-w-0 flex-col gap-4 p-5 md:p-6">
          {post}
          <p className="text-xs text-muted-foreground tabular-nums">
            {count(like.count, "like", "likes")} · {count(thread.length, "comment", "comments")} · {count(shares, "share", "shares")}
          </p>
          <div role="group" aria-label="Reactions" className="-mx-1 flex items-center gap-1 border-t border-border pt-2">
            <Button
              type="button"
              variant="ghost"
              size="sm"
              aria-pressed={like.on}
              onClick={toggleLike}
              className="aria-pressed:bg-brand-muted aria-pressed:text-foreground"
            >
              <HeartIcon aria-hidden="true" data-icon="inline-start" className={like.on ? "fill-current" : undefined} />
              Like
            </Button>
            <Button type="button" variant="ghost" size="sm" onClick={() => field.current?.focus()}>
              <MessageCircleIcon aria-hidden="true" data-icon="inline-start" />
              Comment
            </Button>
          </div>
          {/* Always mounted, so each change is read out rather than a node appearing. */}
          <p role="status" aria-live="polite" className="sr-only">
            {message}
          </p>
        </article>

        <section
          aria-labelledby={threadTitleId}
          className="flex min-w-0 flex-col gap-4 border-t border-border p-5 md:p-6 lg:border-t-0 lg:border-s"
        >
          <h3 id={threadTitleId} className="flex items-baseline gap-2 text-sm font-semibold">
            Comments
            <span className="text-xs font-normal text-muted-foreground tabular-nums">{formatNumber(thread.length)}</span>
          </h3>
          {thread.length > shown ? (
            <Button
              type="button"
              variant="link"
              size="sm"
              aria-expanded={expanded}
              aria-controls={listId}
              onClick={() => setExpanded((open) => !open)}
              className="h-auto self-start px-0"
            >
              {expanded ? "Show the latest only" : `Show ${count(thread.length - shown, "earlier comment", "earlier comments")}`}
            </Button>
          ) : null}
          <ol id={listId} className="flex flex-col gap-4">
            {visible.map((entry) => (
              <li key={entry.id} className="flex gap-2.5">
                <Avatar size="sm" aria-hidden="true" className="mt-0.5">
                  <AvatarImage src={entry.author.avatarUrl} alt="" />
                  <AvatarFallback>{getInitials(entry.author.name)}</AvatarFallback>
                </Avatar>
                <div className="flex min-w-0 flex-col gap-0.5">
                  <p className="flex flex-wrap items-baseline gap-x-1.5 text-xs">
                    <span className="font-medium text-foreground">{entry.author.name}</span>
                    {entry.at ? (
                      <time dateTime={entry.at.iso} className="text-muted-foreground tabular-nums">
                        <span aria-hidden="true">{entry.at.short}</span>
                        <span className="sr-only">{entry.at.full}</span>
                      </time>
                    ) : (
                      <span className="text-muted-foreground">Just now</span>
                    )}
                  </p>
                  <p className="text-sm text-pretty">{entry.text}</p>
                </div>
              </li>
            ))}
          </ol>
          <form onSubmit={reply} className="mt-auto flex flex-col gap-2">
            <label htmlFor={fieldId} className="sr-only">
              Comment on {author}&rsquo;s post
            </label>
            <Textarea
              ref={field}
              id={fieldId}
              rows={2}
              value={draft}
              onChange={(event) => setDraft(event.target.value)}
              placeholder="Write a comment"
              className="min-h-16 resize-none"
            />
            <Button type="submit" size="sm" disabled={!draft.trim()} className="self-end">
              Post comment
            </Button>
          </form>
        </section>
      </div>
    </CardContent>
  )
}

/**
 * What `social-posts-01` reads: the most liked post on the team feed that
 * carries a figure, over the last `WINDOW_DAYS`, with every reply to it. The
 * post is a `db.posts` row, its replies `db.comments` rows, and the reader —
 * the one who likes and replies — comes from `team-projects`, which also
 * says every time the way the feed does, in UTC, so the island never reads a
 * clock.
 *
 * A stat post carries a quarter of weekly figures whose last point is the
 * one its text quotes ("312 signups last week"), so the weeks are counted
 * back from the week before the post's own.
 *
 * Selectors only, reading `db` inside functions and run on the server.
 */
import {
  FEED_HREF,
  dayLabel,
  moment,
  person,
  postHref,
  segments,
  tagHref,
  viewer,
  type Moment,
  type Person,
  type TextPart,
} from "@/lib/dashboards/projects/team"
import { REFERENCE_DATE, db, type Post } from "@/lib/sample-data"

export { FEED_HREF, tagHref, viewer }
export type { Moment, Person, TextPart }

/** How far back the band looks for its post, in days. */
export const WINDOW_DAYS = 14

const DAY_MS = 86_400_000
const WEEK_MS = 7 * DAY_MS

export type Reply = { id: string; author: Person; text: string; at: Moment }

export type ChartPost = {
  id: string
  href: string
  author: Person
  at: Moment
  text: TextPart[]
  chart: {
    label: string
    /** One bar a week, oldest first, each named by the Monday it starts on. */
    weeks: { week: string; value: number }[]
    /** The Monday of the last week, the one the text quotes. */
    through: string
  }
  likes: number
  liked: boolean
  shares: number
  replies: Reply[]
}

/** Midnight UTC on the Monday of the week `at` falls in. */
function mondayOf(at: Date): number {
  const day = Date.UTC(at.getUTCFullYear(), at.getUTCMonth(), at.getUTCDate())
  return day - ((at.getUTCDay() + 6) % 7) * DAY_MS
}

function repliesTo(postId: string): Reply[] {
  return db.comments
    .all()
    .filter((comment) => comment.postId === postId)
    .sort((a, b) => a.at.getTime() - b.at.getTime())
    .map((comment) => ({ id: comment.id, author: person(comment.author.name), text: comment.text, at: moment(comment.at) }))
}

/**
 * The most liked post of the last `WINDOW_DAYS` that carries a figure — a
 * tie goes to the newer — shaped for the band, with its replies oldest
 * first; null when nobody shared a figure in the window.
 */
export function chartPost(): ChartPost | null {
  const from = REFERENCE_DATE.getTime() - WINDOW_DAYS * DAY_MS
  const post = db.posts
    .all()
    .filter((row): row is Post & { media: Extract<Post["media"], { kind: "stat" }> } => row.media?.kind === "stat")
    .filter((row) => row.at.getTime() >= from)
    .sort((a, b) => b.likes - a.likes || b.at.getTime() - a.at.getTime())[0]
  if (!post) return null
  const { label, values } = post.media
  const lastWeek = mondayOf(post.at) - WEEK_MS
  const weeks = values.map((value, index) => ({
    week: dayLabel(new Date(lastWeek - (values.length - 1 - index) * WEEK_MS)),
    value,
  }))
  return {
    id: post.id,
    href: postHref(post.id),
    author: person(post.author.name),
    at: moment(post.at),
    text: segments(post.text),
    chart: { label, weeks, through: weeks.at(-1)?.week ?? "" },
    likes: post.likes,
    liked: post.liked,
    shares: post.shares,
    replies: repliesTo(post.id),
  }
}

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

import { formatCurrency, formatNumber, getInitials } from "@/lib/format"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { buttonVariants } from "@/components/ui/button"
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { EmptyState } from "@/components/ui/empty-state"
import { ProductArt } from "@/components/ui/product-art"
import { Sparkline } from "@/components/ui/sparkline"

import { PostActions } from "./social-posts-02.client"
import {
  FEED_HREF,
  WINDOW_DAYS,
  latestPosts,
  tagHref,
  topPosters,
  trendingTopics,
  viewer,
  type FeedPost,
  type Person,
} from "./social-posts-02.data"

/** A post's media: a product from the store, drawn; or a figure, with its weeks as bars. */
function Media({ media }: { media: NonNullable<FeedPost["media"]> }) {
  if (media.kind === "product") {
    return (
      <Link
        href={media.href}
        className="panel group/product flex w-full items-center gap-4 overflow-hidden p-2 pe-4 focus-ring sm:max-w-sm"
      >
        <ProductArt name={media.name} category={media.category} className="w-20 shrink-0 rounded-md" />
        <span className="flex min-w-0 flex-col gap-0.5">
          <span className="text-xs text-muted-foreground">{media.category}</span>
          <span className="truncate text-sm font-medium group-hover/product:underline">{media.name}</span>
          <span className="text-sm tabular-nums">{formatCurrency(media.priceCents / 100)}</span>
        </span>
      </Link>
    )
  }
  const first = media.values[0]
  const last = media.values[media.values.length - 1]
  return (
    <figure className="flex w-full items-end justify-between gap-6 sm:max-w-sm">
      <div className="flex flex-col gap-0.5">
        <figcaption className="text-xs text-muted-foreground">
          {media.label}, last {media.values.length} weeks
        </figcaption>
        <span className="type-numeral text-2xl">{formatNumber(last)}</span>
        <span className="text-xs text-muted-foreground tabular-nums">from {formatNumber(first)}</span>
      </div>
      <Sparkline data={media.values} type="bar" height={48} className="w-40 shrink-0" />
    </figure>
  )
}

/** One post in the column: who and when, the words and their tags, its media, its reactions. */
function FeedItem({ post, reader }: { post: FeedPost; reader: Person }) {
  const nameId = React.useId()
  const timeId = React.useId()
  return (
    <li className="px-5 py-5 md:px-6">
      <article aria-labelledby={`${nameId} ${timeId}`} className="flex flex-col gap-3">
        <header className="flex items-center gap-3">
          <Avatar aria-hidden="true">
            <AvatarImage src={post.author.avatarUrl} alt="" />
            <AvatarFallback>{getInitials(post.author.name)}</AvatarFallback>
          </Avatar>
          <div className="flex min-w-0 flex-col">
            <p id={nameId} className="truncate text-sm font-semibold">
              {post.author.name}
            </p>
            <p className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
              <span className="truncate font-mono">@{post.author.handle}</span>
              <span aria-hidden="true">·</span>
              <Link href={post.href} className="shrink-0 rounded-sm tabular-nums hover:underline focus-ring">
                <time id={timeId} dateTime={post.at.iso}>
                  <span aria-hidden="true">{post.at.short}</span>
                  <span className="sr-only">{post.at.full}</span>
                </time>
              </Link>
            </p>
          </div>
        </header>
        <p className="text-sm text-pretty">
          {post.text.map((part, index) =>
            part.tag ? (
              <Link key={index} href={tagHref(part.tag)} className="rounded-sm font-medium text-brand hover:underline focus-ring">
                {part.text}
              </Link>
            ) : (
              <React.Fragment key={index}>{part.text}</React.Fragment>
            )
          )}
        </p>
        {post.media ? <Media media={post.media} /> : null}
        <PostActions
          author={post.author.name}
          likes={post.likes}
          liked={post.liked}
          comments={post.comments}
          shares={post.shares}
          reader={reader}
        />
      </article>
    </li>
  )
}

/**
 * The team feed as a column of posts — the newest of each kind the band
 * draws: a product from the store, a figure as its line, a plain note — and
 * beside it, from `lg`, what the feed has been about: the topics tagged most
 * and who posted most over the last fortnight. Each post has its own like
 * toggle and a Comment button that opens a reply field in place.
 *
 * A server component: it reads the feed through `./social-posts-02.data`,
 * draws every post and its media here, and hands each post's reactions to
 * the island as plain values.
 */
export function SocialPosts02() {
  const titleId = React.useId()
  const railId = React.useId()
  const topicsId = React.useId()
  const postersId = React.useId()
  const posts = latestPosts()
  const topics = trendingTopics()
  const posters = topPosters()
  const me = viewer()

  return (
    <section
      data-section="social-posts-02"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Team feed</h2>
            </CardTitle>
            <CardDescription>The latest product, figure and note shared with the team</CardDescription>
            <CardAction>
              <Link href={FEED_HREF} className={buttonVariants({ variant: "outline", size: "sm" })}>
                Open the feed
              </Link>
            </CardAction>
          </CardHeader>
          {posts.length > 0 ? (
            <CardContent className="p-0">
              <div className="grid lg:grid-cols-[minmax(0,1fr)_18rem]">
                <ol aria-label="Posts" className="divide-y divide-border">
                  {posts.map((post) => (
                    <FeedItem key={post.id} post={post} reader={me} />
                  ))}
                </ol>
                <aside
                  aria-labelledby={railId}
                  className="flex flex-col gap-6 border-t border-border p-5 md:p-6 lg:border-t-0 lg:border-s"
                >
                  <h3 id={railId} className="sr-only">
                    The feed over the last {WINDOW_DAYS} days
                  </h3>
                  {topics.length || posters.length ? (
                    <>
                      {topics.length ? (
                        <div className="flex flex-col gap-3">
                          <h4 id={topicsId} className="type-eyebrow">
                            Trending, last {WINDOW_DAYS} days
                          </h4>
                          <ol aria-labelledby={topicsId} className="flex flex-col gap-1">
                            {topics.map((topic, index) => (
                              <li key={topic.tag}>
                                <Link
                                  href={topic.href}
                                  className="-mx-2 flex items-baseline justify-between gap-3 rounded-md px-2 py-1.5 text-sm hover:bg-muted/50 focus-ring"
                                >
                                  <span className="flex items-baseline gap-2">
                                    <span className="w-3 text-xs text-muted-foreground tabular-nums">{index + 1}</span>
                                    <span className="font-medium">#{topic.tag}</span>
                                  </span>
                                  <span className="text-xs text-muted-foreground tabular-nums">
                                    {topic.posts} {topic.posts === 1 ? "post" : "posts"}
                                  </span>
                                </Link>
                              </li>
                            ))}
                          </ol>
                        </div>
                      ) : null}
                      {posters.length ? (
                        <div className="flex flex-col gap-3">
                          <h4 id={postersId} className="type-eyebrow">
                            Posted most
                          </h4>
                          <ol aria-labelledby={postersId} className="flex flex-col gap-3">
                            {posters.map((poster) => (
                              <li key={poster.name} className="flex items-center gap-2.5">
                                <Avatar size="sm" aria-hidden="true">
                                  <AvatarImage src={poster.avatarUrl} alt="" />
                                  <AvatarFallback>{getInitials(poster.name)}</AvatarFallback>
                                </Avatar>
                                <span className="flex min-w-0 flex-1 flex-col leading-tight">
                                  <span className="truncate text-sm font-medium">{poster.name}</span>
                                  <span className="truncate font-mono text-xs text-muted-foreground">@{poster.handle}</span>
                                </span>
                                <span className="text-xs text-muted-foreground tabular-nums">
                                  {poster.posts} {poster.posts === 1 ? "post" : "posts"}
                                </span>
                              </li>
                            ))}
                          </ol>
                        </div>
                      ) : null}
                    </>
                  ) : (
                    // No headings over empty lists: posts older than the window say nothing about it.
                    <EmptyState
                      size="sm"
                      title={`Quiet for ${WINDOW_DAYS} days`}
                      description="The tags that are trending and the people posting most show here once the window has posts."
                    />
                  )}
                </aside>
              </div>
            </CardContent>
          ) : (
            <CardContent>
              <EmptyState
                size="sm"
                title="Nothing on the feed yet"
                description="Products, figures and notes the team shares show up here, newest first."
              />
            </CardContent>
          )}
        </Card>
      </div>
    </section>
  )
}

export default SocialPosts02

"use client"

import * as React from "react"
import { HeartIcon, MessageCircleIcon } from "lucide-react"

import { formatNumber, getInitials } from "@/lib/format"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

import type { Person } from "./social-posts-02.data"

export type PostActionsProps = {
  author: string
  likes: number
  liked: boolean
  comments: number
  shares: number
  reader: Person
}

const count = (value: number, one: string, many: string) => `${formatNumber(value)} ${value === 1 ? one : many}`

/**
 * One post's reactions: the counts, a Like toggle, and a Comment button that
 * opens a reply field under the post. A reply lands under the field, the
 * count goes up and the field closes, handing the focus back to Comment;
 * Escape closes it too. What changed is read out in a status line.
 */
export function PostActions({ author, likes, liked, comments, shares, reader }: PostActionsProps) {
  const fieldId = React.useId()
  const formId = React.useId()
  const field = React.useRef<HTMLTextAreaElement>(null)
  const trigger = React.useRef<HTMLButtonElement>(null)
  const [like, setLike] = React.useState({ on: liked, count: likes })
  const [open, setOpen] = React.useState(false)
  const [draft, setDraft] = React.useState("")
  const [posted, setPosted] = React.useState<string[]>([])
  const [message, setMessage] = React.useState("")
  const total = comments + posted.length

  React.useEffect(() => {
    if (open) field.current?.focus()
  }, [open])

  function toggleLike() {
    const next = { on: !like.on, count: like.count + (like.on ? -1 : 1) }
    setLike(next)
    setMessage(`${next.on ? "Liked" : "Like removed"}. ${count(next.count, "like", "likes")}.`)
  }

  function close() {
    setOpen(false)
    trigger.current?.focus()
  }

  function send(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    const text = draft.trim()
    if (!text) return
    setPosted((list) => [...list, text])
    setDraft("")
    setMessage(`Comment posted. ${count(total + 1, "comment", "comments")}.`)
    close()
  }

  return (
    <div className="flex flex-col gap-2">
      <p className="text-xs text-muted-foreground tabular-nums">
        {count(like.count, "like", "likes")} · {count(total, "comment", "comments")} · {count(shares, "share", "shares")}
      </p>
      <div role="group" aria-label="Reactions" className="-mx-1 flex items-center gap-1">
        <Button
          type="button"
          variant="ghost"
          size="sm"
          aria-pressed={like.on}
          onClick={toggleLike}
          className="aria-pressed:bg-brand-muted aria-pressed:text-foreground"
        >
          <HeartIcon aria-hidden="true" data-icon="inline-start" className={like.on ? "fill-current" : undefined} />
          Like
        </Button>
        <Button
          ref={trigger}
          type="button"
          variant="ghost"
          size="sm"
          aria-expanded={open}
          aria-controls={open ? formId : undefined}
          onClick={() => (open ? close() : setOpen(true))}
        >
          <MessageCircleIcon aria-hidden="true" data-icon="inline-start" />
          Comment
        </Button>
      </div>
      {posted.length > 0 ? (
        <ul aria-label="Your comments" className="flex flex-col gap-2">
          {posted.map((text, index) => (
            <li key={index} className="flex gap-2.5 text-sm">
              <Avatar size="sm" aria-hidden="true" className="mt-0.5">
                <AvatarImage src={reader.avatarUrl} alt="" />
                <AvatarFallback>{getInitials(reader.name)}</AvatarFallback>
              </Avatar>
              <p className="min-w-0 text-pretty">
                <span className="block text-xs font-medium">
                  {reader.name} <span className="font-normal text-muted-foreground">· Just now</span>
                </span>
                {text}
              </p>
            </li>
          ))}
        </ul>
      ) : null}
      {open ? (
        <form
          id={formId}
          onSubmit={send}
          onKeyDown={(event) => {
            if (event.key === "Escape") close()
          }}
          className="flex flex-col gap-2"
        >
          <label htmlFor={fieldId} className="sr-only">
            Comment on {author}&rsquo;s post
          </label>
          <Textarea
            ref={field}
            id={fieldId}
            rows={2}
            value={draft}
            onChange={(event) => setDraft(event.target.value)}
            placeholder="Write a comment"
            className="min-h-16 resize-none"
          />
          <div className="flex justify-end gap-2">
            <Button type="button" variant="ghost" size="sm" onClick={close}>
              Cancel
            </Button>
            <Button type="submit" size="sm" disabled={!draft.trim()}>
              Post comment
            </Button>
          </div>
        </form>
      ) : null}
      {/* Always mounted, so each change is read out rather than a node appearing. */}
      <p role="status" aria-live="polite" className="sr-only">
        {message}
      </p>
    </div>
  )
}

/**
 * What `social-posts-02` reads: the team feed as a column of posts — the
 * newest post of each kind the band draws, a product, a figure and a plain
 * note — and beside it what the feed has been about: the topics tagged most
 * over the last `WINDOW_DAYS`, and who posted most. Posts are `db.posts`
 * rows, their comment counts `db.comments`, a product's name and price
 * `db.products`; the reader, and the way the feed says a time, a tag and a
 * handle, come from `team-projects`, every time in UTC.
 *
 * Selectors only, reading `db` inside functions and run on the server.
 */
import {
  FEED_HREF,
  moment,
  person,
  postHref,
  segments,
  tagHref,
  viewer,
  type Moment,
  type Person,
  type TextPart,
} from "@/lib/dashboards/projects/team"
import { REFERENCE_DATE, db, type Post } from "@/lib/sample-data"

export { FEED_HREF, tagHref, viewer }
export type { Moment, Person, TextPart }

/** How far back the topics and the posters are counted, in days. */
export const WINDOW_DAYS = 14

const DAY_MS = 86_400_000

export type FeedMedia =
  | { kind: "product"; name: string; category: string; priceCents: number; href: string }
  | { kind: "stat"; label: string; values: number[] }

export type FeedPost = {
  id: string
  href: string
  author: Person
  at: Moment
  text: TextPart[]
  media: FeedMedia | null
  likes: number
  liked: boolean
  comments: number
  shares: number
}

export type Topic = { tag: string; posts: number; href: string }
export type Poster = Person & { posts: number }

/** The kinds of post the column shows, one of each, in this order of preference. */
export const KINDS = ["product", "stat", "note"] as const

/** A post's topic tags: `#store`, each once, without the hash. */
export function tagsOf(text: string): string[] {
  return [...new Set((text.match(/#[a-z][a-z-]*/g) ?? []).map((tag) => tag.slice(1)))]
}

function kindOf(post: Post): (typeof KINDS)[number] | "other" {
  if (!post.media) return "note"
  return post.media.kind === "product" || post.media.kind === "stat" ? post.media.kind : "other"
}

/** The newest post of each kind in `KINDS`, the whole column newest first. */
export function latestPosts(): FeedPost[] {
  const newest = [...db.posts.all()].sort((a, b) => b.at.getTime() - a.at.getTime())
  const products = new Map(db.products.all().map((product) => [product.id, product]))
  const comments = new Map<string, number>()
  for (const comment of db.comments.all()) comments.set(comment.postId, (comments.get(comment.postId) ?? 0) + 1)

  return KINDS.flatMap((kind) => newest.find((post) => kindOf(post) === kind) ?? [])
    .sort((a, b) => b.at.getTime() - a.at.getTime())
    .map((post) => {
      let media: FeedMedia | null = null
      if (post.media?.kind === "product") {
        const product = products.get(post.media.productId)
        if (product)
          media = { kind: "product", name: product.name, category: product.category, priceCents: product.priceCents, href: `/products/${product.id}` }
      } else if (post.media?.kind === "stat") {
        media = { kind: "stat", label: post.media.label, values: post.media.values }
      }
      return {
        id: post.id,
        href: postHref(post.id),
        author: person(post.author.name),
        at: moment(post.at),
        text: segments(post.text),
        media,
        likes: post.likes,
        liked: post.liked,
        comments: comments.get(post.id) ?? 0,
        shares: post.shares,
      }
    })
}

function recent(): Post[] {
  const from = REFERENCE_DATE.getTime() - WINDOW_DAYS * DAY_MS
  return db.posts.all().filter((post) => post.at.getTime() >= from)
}

/** The topics tagged on most posts over the window, most first; a tie goes to the name. */
export function trendingTopics(count = 5): Topic[] {
  const tally = new Map<string, number>()
  for (const post of recent()) for (const tag of tagsOf(post.text)) tally.set(tag, (tally.get(tag) ?? 0) + 1)
  return [...tally]
    .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
    .slice(0, count)
    .map(([tag, posts]) => ({ tag, posts, href: tagHref(tag) }))
}

/** Who posted most over the window, most first; a tie goes to the name. */
export function topPosters(count = 3): Poster[] {
  const tally = new Map<string, number>()
  for (const post of recent()) tally.set(post.author.name, (tally.get(post.author.name) ?? 0) + 1)
  return [...tally]
    .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
    .slice(0, count)
    .map(([name, posts]) => ({ ...person(name), posts }))
}

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

import { formatCurrency, formatNumber, getInitials } from "@/lib/format"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { buttonVariants } from "@/components/ui/button"
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { EmptyState } from "@/components/ui/empty-state"
import { ProductArt } from "@/components/ui/product-art"

import { PostActions } from "./social-posts-03.client"
import { FEED_HREF, quotePost, tagHref, viewer, type Moment, type Person, type QuotedPost } from "./social-posts-03.data"

/** A face, a name and the handle in mono, and the time as a link to the post. */
function Byline({ person, at, href, nameId, timeId, size }: { person: Person; at: Moment; href: string; nameId: string; timeId: string; size: "sm" | "lg" }) {
  return (
    <div className="flex items-center gap-3">
      <Avatar size={size === "lg" ? "lg" : "sm"} aria-hidden="true">
        <AvatarImage src={person.avatarUrl} alt="" />
        <AvatarFallback>{getInitials(person.name)}</AvatarFallback>
      </Avatar>
      <div className="flex min-w-0 flex-col">
        <p id={nameId} className="truncate text-sm font-semibold">
          {person.name}
        </p>
        <p className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
          <span className="truncate font-mono">@{person.handle}</span>
          <span aria-hidden="true">·</span>
          <Link href={href} className="shrink-0 rounded-sm tabular-nums hover:underline focus-ring">
            <time id={timeId} dateTime={at.iso}>
              <span aria-hidden="true">{at.short}</span>
              <span className="sr-only">{at.full}</span>
            </time>
          </Link>
        </p>
      </div>
    </div>
  )
}

/** The post being quoted, whole: who, when, the words and the product it shows. */
function Quoted({ post }: { post: QuotedPost }) {
  const nameId = React.useId()
  const timeId = React.useId()
  return (
    <article
      aria-labelledby={`${nameId} ${timeId}`}
      className="panel grid gap-3 p-4 sm:grid-cols-[minmax(0,1fr)_10rem] sm:gap-x-5"
    >
      <div className="flex min-w-0 flex-col gap-3">
        <Byline person={post.author} at={post.at} href={post.href} nameId={nameId} timeId={timeId} size="sm" />
        <p className="text-sm text-pretty">
          {post.text.map((part, index) =>
            part.tag ? (
              <Link key={index} href={tagHref(part.tag)} className="rounded-sm font-medium text-brand hover:underline focus-ring">
                {part.text}
              </Link>
            ) : (
              <React.Fragment key={index}>{part.text}</React.Fragment>
            )
          )}
        </p>
        {post.product ? (
          <Link
            href={post.product.href}
            className="flex items-baseline justify-between gap-3 rounded-sm text-sm hover:underline focus-ring sm:justify-start"
          >
            <span className="truncate font-medium">{post.product.name}</span>
            <span className="shrink-0 text-muted-foreground tabular-nums">{formatCurrency(post.product.priceCents / 100)}</span>
          </Link>
        ) : null}
        <p className="mt-auto text-xs text-muted-foreground tabular-nums">
          Shared {formatNumber(post.shares)} {post.shares === 1 ? "time" : "times"}
        </p>
      </div>
      {post.product ? (
        // The product's picture: the link beside it names it, so the drawing is decoration.
        <ProductArt
          name={post.product.name}
          category={post.product.category}
          className="row-start-1 aspect-[2/1] [&>svg]:h-auto [&>svg]:w-[36%] sm:col-start-2 sm:aspect-square sm:[&>svg]:w-[72%]"
        />
      ) : null}
    </article>
  )
}

/**
 * A quote: someone passing a post on with a line of their own. What they
 * said sits on the left with its reactions under it; the post they quoted
 * sits beside it, whole — its author, its words and the product it shows —
 * so the two read together. On a phone the quoted post comes between the
 * line and the reactions, where a feed puts it.
 *
 * A server component: it reads the quote through `./social-posts-03.data`,
 * draws both posts here, and hands the quote's reactions to the island.
 */
export function SocialPosts03() {
  const titleId = React.useId()
  const nameId = React.useId()
  const timeId = React.useId()
  const quote = quotePost()

  return (
    <section
      data-section="social-posts-03"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Quoted on the feed</h2>
            </CardTitle>
            <CardDescription>The week&rsquo;s most shared post, quoted by a teammate</CardDescription>
            <CardAction>
              <Link href={FEED_HREF} className={buttonVariants({ variant: "outline", size: "sm" })}>
                Open the feed
              </Link>
            </CardAction>
          </CardHeader>
          <CardContent className="p-5 md:p-6">
            {quote ? (
              <article
                aria-labelledby={`${nameId} ${timeId}`}
                className="grid gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] lg:grid-rows-[auto_auto_1fr] lg:gap-x-8"
              >
                <Byline person={quote.author} at={quote.at} href={quote.href} nameId={nameId} timeId={timeId} size="lg" />
                <p className="text-md text-pretty lg:col-start-1">{quote.text}</p>
                <div className="lg:col-start-2 lg:row-span-3 lg:row-start-1">
                  <Quoted post={quote.quoted} />
                </div>
                <div className="lg:col-start-1 lg:row-start-3 lg:self-end">
                  <PostActions
                    author={quote.author.name}
                    likes={quote.likes}
                    liked={false}
                    comments={quote.comments}
                    shares={quote.shares}
                    reader={viewer()}
                  />
                </div>
              </article>
            ) : (
              <EmptyState
                size="sm"
                title="Nothing quoted yet"
                description="When a teammate answers someone else’s post, the most shared one is quoted here."
              />
            )}
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default SocialPosts03

"use client"

import * as React from "react"
import { HeartIcon, MessageCircleIcon, Repeat2Icon } from "lucide-react"

import { formatNumber, getInitials } from "@/lib/format"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

import type { Person } from "./social-posts-03.data"

export type PostActionsProps = {
  author: string
  likes: number
  liked: boolean
  comments: number
  shares: number
  /** Whether the reader has reposted it already. */
  reposted?: boolean
  reader: Person
}

const count = (value: number, one: string, many: string) => `${formatNumber(value)} ${value === 1 ? one : many}`

/**
 * A quote's reactions: the counts, a Like toggle, a Comment button that
 * opens a reply field under the post, and a Repost toggle that passes the
 * quote on. A reply lands under the field, the count goes up and the field
 * closes, handing the focus back to Comment; Escape closes it too. What
 * changed is read out in a status line.
 */
export function PostActions({ author, likes, liked, comments, shares, reposted = false, reader }: PostActionsProps) {
  const fieldId = React.useId()
  const formId = React.useId()
  const field = React.useRef<HTMLTextAreaElement>(null)
  const trigger = React.useRef<HTMLButtonElement>(null)
  const [like, setLike] = React.useState({ on: liked, count: likes })
  const [repost, setRepost] = React.useState({ on: reposted, count: shares })
  const [open, setOpen] = React.useState(false)
  const [draft, setDraft] = React.useState("")
  const [posted, setPosted] = React.useState<string[]>([])
  const [message, setMessage] = React.useState("")
  const total = comments + posted.length

  React.useEffect(() => {
    if (open) field.current?.focus()
  }, [open])

  function toggleLike() {
    const next = { on: !like.on, count: like.count + (like.on ? -1 : 1) }
    setLike(next)
    setMessage(`${next.on ? "Liked" : "Like removed"}. ${count(next.count, "like", "likes")}.`)
  }

  function toggleRepost() {
    const next = { on: !repost.on, count: repost.count + (repost.on ? -1 : 1) }
    setRepost(next)
    setMessage(`${next.on ? "Reposted to the team feed" : "Repost undone"}. ${count(next.count, "repost", "reposts")}.`)
  }

  function close() {
    setOpen(false)
    trigger.current?.focus()
  }

  function send(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    const text = draft.trim()
    if (!text) return
    setPosted((list) => [...list, text])
    setDraft("")
    setMessage(`Comment posted. ${count(total + 1, "comment", "comments")}.`)
    close()
  }

  return (
    <div className="flex flex-col gap-2">
      <p className="text-xs text-muted-foreground tabular-nums">
        {count(like.count, "like", "likes")} · {count(total, "comment", "comments")} · {count(repost.count, "repost", "reposts")}
      </p>
      <div role="group" aria-label="Reactions" className="-mx-1 flex items-center gap-1">
        <Button
          type="button"
          variant="ghost"
          size="sm"
          aria-pressed={like.on}
          onClick={toggleLike}
          className="aria-pressed:bg-brand-muted aria-pressed:text-foreground"
        >
          <HeartIcon aria-hidden="true" data-icon="inline-start" className={like.on ? "fill-current" : undefined} />
          Like
        </Button>
        <Button
          ref={trigger}
          type="button"
          variant="ghost"
          size="sm"
          aria-expanded={open}
          aria-controls={open ? formId : undefined}
          onClick={() => (open ? close() : setOpen(true))}
        >
          <MessageCircleIcon aria-hidden="true" data-icon="inline-start" />
          Comment
        </Button>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          aria-pressed={repost.on}
          onClick={toggleRepost}
          className="aria-pressed:bg-brand-muted aria-pressed:text-foreground"
        >
          <Repeat2Icon aria-hidden="true" data-icon="inline-start" />
          Repost
        </Button>
      </div>
      {posted.length > 0 ? (
        <ul aria-label="Your comments" className="flex flex-col gap-2">
          {posted.map((text, index) => (
            <li key={index} className="flex gap-2.5 text-sm">
              <Avatar size="sm" aria-hidden="true" className="mt-0.5">
                <AvatarImage src={reader.avatarUrl} alt="" />
                <AvatarFallback>{getInitials(reader.name)}</AvatarFallback>
              </Avatar>
              <p className="min-w-0 text-pretty">
                <span className="block text-xs font-medium">
                  {reader.name} <span className="font-normal text-muted-foreground">· Just now</span>
                </span>
                {text}
              </p>
            </li>
          ))}
        </ul>
      ) : null}
      {open ? (
        <form
          id={formId}
          onSubmit={send}
          onKeyDown={(event) => {
            if (event.key === "Escape") close()
          }}
          className="flex flex-col gap-2"
        >
          <label htmlFor={fieldId} className="sr-only">
            Comment on {author}&rsquo;s post
          </label>
          <Textarea
            ref={field}
            id={fieldId}
            rows={2}
            value={draft}
            onChange={(event) => setDraft(event.target.value)}
            placeholder="Write a comment"
            className="min-h-16 resize-none"
          />
          <div className="flex justify-end gap-2">
            <Button type="button" variant="ghost" size="sm" onClick={close}>
              Cancel
            </Button>
            <Button type="submit" size="sm" disabled={!draft.trim()}>
              Post comment
            </Button>
          </div>
        </form>
      ) : null}
      {/* Always mounted, so each change is read out rather than a node appearing. */}
      <p role="status" aria-live="polite" className="sr-only">
        {message}
      </p>
    </div>
  )
}

/**
 * What `social-posts-03` reads: a post that quotes another. The feed records
 * how often a post was shared (`shares`) but not the shares themselves, so a
 * quote is a rule over the rows it does record: the most shared post of the
 * last `WINDOW_DAYS` — polls aside, which are answered rather than quoted —
 * that someone other than its author replied to, quoted by the first of
 * them, with their reply as what they said. Posts are `db.posts` rows,
 * replies `db.comments`, a product's name and price `db.products`.
 *
 * A share has no likes of its own in the store either, so its count is
 * drawn once from `seeded("social-posts-03")`; its comments start at none.
 * The reader, and the way the feed says a time, a tag and a handle, come
 * from `team-projects`, every time against `REFERENCE_DATE` in UTC.
 *
 * Selectors only, reading `db` inside functions and run on the server.
 */
import {
  FEED_HREF,
  moment,
  person,
  postHref,
  segments,
  tagHref,
  viewer,
  type Moment,
  type Person,
  type TextPart,
} from "@/lib/dashboards/projects/team"
import { REFERENCE_DATE, db, intBetween, seeded } from "@/lib/sample-data"

export { FEED_HREF, tagHref, viewer }
export type { Moment, Person, TextPart }

/** How far back the band looks for the post it quotes, in days. */
export const WINDOW_DAYS = 7

const DAY_MS = 86_400_000

export type QuotedPost = {
  id: string
  href: string
  author: Person
  at: Moment
  text: TextPart[]
  product: { name: string; category: string; priceCents: number; href: string } | null
  shares: number
}

export type QuotePost = {
  id: string
  href: string
  author: Person
  at: Moment
  text: string
  quoted: QuotedPost
  likes: number
  comments: number
  shares: number
}

/**
 * The quote and the post it quotes, by the rule above. The most shared
 * post wins, a tie goes to the newer, and a post nobody else answered is
 * passed over for the next; a window with none looks back over the whole
 * feed. `null` when nobody has answered anyone on the feed yet: the band
 * then says so instead of quoting.
 */
export function quotePost(): QuotePost | null {
  const from = REFERENCE_DATE.getTime() - WINDOW_DAYS * DAY_MS
  const replies = [...db.comments.all()].sort((a, b) => a.at.getTime() - b.at.getTime())
  const quotable = db.posts
    .all()
    .filter((post) => post.media?.kind !== "poll")
    .sort((a, b) => b.shares - a.shares || b.at.getTime() - a.at.getTime())
  // The window first; a quiet week falls back on the whole feed.
  const candidates = [...quotable.filter((post) => post.at.getTime() >= from), ...quotable]

  for (const post of candidates) {
    const quote = replies.find((reply) => reply.postId === post.id && reply.author.name !== post.author.name)
    if (!quote) continue
    const product =
      post.media?.kind === "product" ? db.products.all().find((row) => row.id === (post.media as { productId: string }).productId) : undefined
    const rand = seeded("social-posts-03")
    return {
      id: quote.id,
      href: `${postHref(post.id)}&comment=${quote.id}`,
      author: person(quote.author.name),
      at: moment(quote.at),
      text: quote.text,
      quoted: {
        id: post.id,
        href: postHref(post.id),
        author: person(post.author.name),
        at: moment(post.at),
        text: segments(post.text),
        product: product
          ? { name: product.name, category: product.category, priceCents: product.priceCents, href: `/products/${product.id}` }
          : null,
        shares: post.shares,
      },
      likes: intBetween(rand, 3, 18),
      comments: 0,
      shares: 0,
    }
  }
  return null
}