Comments Live

"use client";

import type { FormEvent, KeyboardEvent } from "react";
import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";

type Accent = "indigo" | "violet" | "emerald" | "rose" | "amber" | "sky";
type Kind = "chat" | "question" | "highlight";
type FilterKey = "all" | "question" | "highlight";

type Message = {
  id: string;
  author: string;
  initials: string;
  accent: Accent;
  kind: Kind;
  body: string;
  createdAt: number;
  likes: number;
  liked: boolean;
  mine: boolean;
};

type Seed = Omit<Message, "id" | "createdAt" | "liked" | "mine">;

const AVATAR: Record<Accent, string> = {
  indigo:
    "bg-indigo-100 text-indigo-700 ring-indigo-200 dark:bg-indigo-500/15 dark:text-indigo-300 dark:ring-indigo-400/25",
  violet:
    "bg-violet-100 text-violet-700 ring-violet-200 dark:bg-violet-500/15 dark:text-violet-300 dark:ring-violet-400/25",
  emerald:
    "bg-emerald-100 text-emerald-700 ring-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-300 dark:ring-emerald-400/25",
  rose: "bg-rose-100 text-rose-700 ring-rose-200 dark:bg-rose-500/15 dark:text-rose-300 dark:ring-rose-400/25",
  amber:
    "bg-amber-100 text-amber-800 ring-amber-200 dark:bg-amber-500/15 dark:text-amber-300 dark:ring-amber-400/25",
  sky: "bg-sky-100 text-sky-700 ring-sky-200 dark:bg-sky-500/15 dark:text-sky-300 dark:ring-sky-400/25",
};

const POOL: readonly Seed[] = [
  {
    author: "Ben Kowalczyk",
    initials: "BK",
    accent: "sky",
    kind: "question",
    body: "What's the retention default on the free tier — is it still 7 days, or does the new storage tier change that?",
    likes: 11,
  },
  {
    author: "Rhea Chandran",
    initials: "RC",
    accent: "violet",
    kind: "chat",
    body: "Dark mode in the new console is genuinely good. Whoever fixed the contrast on the chart axes, thank you.",
    likes: 19,
  },
  {
    author: "Dana Whitfield",
    initials: "DW",
    accent: "emerald",
    kind: "highlight",
    body: "Pinned: ordering is strict per key, best-effort across partitions. Section 4.2 of the migration guide covers the edge cases.",
    likes: 63,
  },
  {
    author: "Miles Oduya",
    initials: "MO",
    accent: "rose",
    kind: "question",
    body: "Any plan for a self-hosted collector? We're under a contract that says raw events can't leave our own VPC.",
    likes: 27,
  },
  {
    author: "Sofia Brenner",
    initials: "SB",
    accent: "indigo",
    kind: "chat",
    body: "Migration guide worked first try on a Rails 7 app. One gotcha: bump the SDK before you flip the flag, not after.",
    likes: 8,
  },
  {
    author: "Kenji Watanabe",
    initials: "KW",
    accent: "amber",
    kind: "chat",
    body: "Watching from Osaka at 2am and it was worth staying up for.",
    likes: 34,
  },
  {
    author: "Owen Baptiste",
    initials: "OB",
    accent: "sky",
    kind: "question",
    body: "Will the query language stay backwards compatible with OQL 2, or do we rewrite our saved dashboards?",
    likes: 15,
  },
  {
    author: "Priya Raghavan",
    initials: "PR",
    accent: "violet",
    kind: "chat",
    body: "Our p99 went from 480ms to 96ms once the index rebuild finished. It takes about 40 minutes — don't panic at minute 10.",
    likes: 41,
  },
  {
    author: "Lena Fitzgerald",
    initials: "LF",
    accent: "emerald",
    kind: "highlight",
    body: "Pinned: pricing changes go live when this session ends. Existing plans keep 2025 rates for a full 12 months.",
    likes: 52,
  },
  {
    author: "Aisha Nkemelu",
    initials: "AN",
    accent: "rose",
    kind: "chat",
    body: "+1 to the ordering question. That single guarantee is the blocker for our billing team, everything else we can work around.",
    likes: 6,
  },
];

const INITIAL: readonly Message[] = [
  {
    id: "s1",
    author: "Dana Whitfield",
    initials: "DW",
    accent: "emerald",
    kind: "highlight",
    body: "Pinned: we're 18 minutes in. Drop questions in the stream — I'll take the most-liked ones at the half hour.",
    createdAt: -1080,
    likes: 88,
    liked: false,
    mine: false,
  },
  {
    id: "s2",
    author: "Tomás Iglesias",
    initials: "TI",
    accent: "indigo",
    kind: "chat",
    body: "Swapped our ingest job to the 3.0 pipeline on staging this morning — 14M events replayed in 3m12s. The old one took 22 minutes.",
    createdAt: -304,
    likes: 46,
    liked: false,
    mine: false,
  },
  {
    id: "s3",
    author: "Nadia Ferreira",
    initials: "NF",
    accent: "amber",
    kind: "question",
    body: "Does the streaming API keep ordering guarantees across partitions, or is it best-effort the way 2.4 was?",
    createdAt: -142,
    likes: 29,
    liked: true,
    mine: false,
  },
  {
    id: "s4",
    author: "Gabriel Lund",
    initials: "GL",
    accent: "sky",
    kind: "chat",
    body: "The replay CLI printing a real progress bar instead of six thousand log lines is a small thing that made my week.",
    createdAt: -37,
    likes: 12,
    liked: false,
    mine: false,
  },
];

const FILTERS: readonly { key: FilterKey; label: string }[] = [
  { key: "all", label: "All" },
  { key: "question", label: "Questions" },
  { key: "highlight", label: "Pinned" },
];

const MAX_CHARS = 240;
const MAX_STREAM = 60;

function ago(seconds: number): string {
  if (seconds < 5) return "now";
  if (seconds < 60) return `${seconds}s`;
  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
  return `${Math.floor(seconds / 3600)}h`;
}

export default function CommentLive() {
  const reduce = useReducedMotion();
  const composerId = useId();
  const counterId = `${composerId}-count`;

  const [stream, setStream] = useState<Message[]>(() => INITIAL.map((m) => ({ ...m })));
  const [live, setLive] = useState(true);
  const [filter, setFilter] = useState<FilterKey>("all");
  const [draft, setDraft] = useState("");
  const [asQuestion, setAsQuestion] = useState(false);
  const [unread, setUnread] = useState(0);
  const [pinnedToBottom, setPinnedToBottom] = useState(true);
  const [tick, setTick] = useState(0);
  const [viewers, setViewers] = useState(1284);
  const [announcement, setAnnouncement] = useState("");

  const scrollRef = useRef<HTMLDivElement | null>(null);
  const bottomRef = useRef<HTMLDivElement | null>(null);
  const filterRefs = useRef<(HTMLButtonElement | null)[]>([]);
  const tickRef = useRef(0);
  const poolRef = useRef(0);
  const idRef = useRef(0);
  const pinnedRef = useRef(true);
  const forceScrollRef = useRef(false);

  useEffect(() => {
    const id = window.setInterval(() => {
      tickRef.current += 1;
      setTick(tickRef.current);
      if (tickRef.current % 3 === 0) {
        setViewers((v) => Math.min(2400, Math.max(900, v + Math.round(Math.random() * 14) - 5)));
      }
    }, 1000);
    return () => window.clearInterval(id);
  }, []);

  useEffect(() => {
    const root = scrollRef.current;
    const target = bottomRef.current;
    if (!root || !target) return;
    const io = new IntersectionObserver(
      (entries) => {
        const entry = entries[0];
        if (!entry) return;
        pinnedRef.current = entry.isIntersecting;
        setPinnedToBottom(entry.isIntersecting);
        if (entry.isIntersecting) setUnread(0);
      },
      { root, threshold: 1, rootMargin: "0px 0px 32px 0px" },
    );
    io.observe(target);
    return () => io.disconnect();
  }, []);

  useEffect(() => {
    if (!live) return;
    const id = window.setInterval(() => {
      const seed = POOL[poolRef.current % POOL.length];
      poolRef.current += 1;
      idRef.current += 1;
      const next: Message = {
        ...seed,
        id: `live-${idRef.current}`,
        createdAt: tickRef.current,
        liked: false,
        mine: false,
      };
      setStream((prev) => [...prev, next].slice(-MAX_STREAM));
      setAnnouncement(`New message from ${seed.author}`);
      if (!pinnedRef.current) setUnread((u) => u + 1);
    }, 3800);
    return () => window.clearInterval(id);
  }, [live]);

  useEffect(() => {
    if (!pinnedRef.current && !forceScrollRef.current) return;
    forceScrollRef.current = false;
    bottomRef.current?.scrollIntoView({
      block: "end",
      behavior: reduce ? "auto" : "smooth",
    });
  }, [stream.length, filter, reduce]);

  const visible = useMemo(
    () => (filter === "all" ? stream : stream.filter((m) => m.kind === filter)),
    [stream, filter],
  );

  const questionCount = useMemo(() => stream.filter((m) => m.kind === "question").length, [stream]);

  const jumpToLatest = useCallback(() => {
    forceScrollRef.current = true;
    bottomRef.current?.scrollIntoView({ block: "end", behavior: reduce ? "auto" : "smooth" });
    setUnread(0);
  }, [reduce]);

  const toggleLike = useCallback((id: string) => {
    setStream((prev) =>
      prev.map((m) =>
        m.id === id ? { ...m, liked: !m.liked, likes: m.likes + (m.liked ? -1 : 1) } : m,
      ),
    );
  }, []);

  const submit = useCallback(
    (event?: FormEvent<HTMLFormElement>) => {
      event?.preventDefault();
      const body = draft.trim();
      if (!body || body.length > MAX_CHARS) return;
      idRef.current += 1;
      const mine: Message = {
        id: `me-${idRef.current}`,
        author: "You",
        initials: "YO",
        accent: "violet",
        kind: asQuestion ? "question" : "chat",
        body,
        createdAt: tickRef.current,
        likes: 0,
        liked: false,
        mine: true,
      };
      setStream((prev) => [...prev, mine].slice(-MAX_STREAM));
      setFilter(asQuestion ? "question" : "all");
      setDraft("");
      setAsQuestion(false);
      setUnread(0);
      setAnnouncement(asQuestion ? "Your question was posted" : "Your message was posted");
      forceScrollRef.current = true;
    },
    [asQuestion, draft],
  );

  const onComposerKeyDown = useCallback(
    (event: KeyboardEvent<HTMLTextAreaElement>) => {
      if (event.key === "Enter" && !event.shiftKey) {
        event.preventDefault();
        submit();
      }
    },
    [submit],
  );

  const onFilterKeyDown = useCallback(
    (event: KeyboardEvent<HTMLButtonElement>, index: number) => {
      const last = FILTERS.length - 1;
      let next = -1;
      if (event.key === "ArrowRight" || event.key === "ArrowDown") next = index === last ? 0 : index + 1;
      else if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = index === 0 ? last : index - 1;
      else if (event.key === "Home") next = 0;
      else if (event.key === "End") next = last;
      if (next < 0) return;
      event.preventDefault();
      const target = FILTERS[next];
      setFilter(target.key);
      filterRefs.current[next]?.focus();
    },
    [],
  );

  const overBudget = draft.length > MAX_CHARS;
  const ring =
    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-indigo-400 dark:focus-visible:ring-offset-slate-950";

  return (
    <section className="relative w-full overflow-hidden bg-slate-50 px-4 py-20 text-slate-900 sm:px-6 sm:py-24 dark:bg-slate-950 dark:text-slate-100">
      <style>{`
        @keyframes clv-eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
        @keyframes clv-ping { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
        @keyframes clv-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
        .clv-eq-bar { transform-origin: bottom; animation: clv-eq 900ms ease-in-out infinite; }
        .clv-dot-ping { animation: clv-ping 1900ms cubic-bezier(0, 0, 0.2, 1) infinite; }
        .clv-sweep { animation: clv-sweep 2600ms linear infinite; }
        .clv-scroll { scroll-behavior: smooth; }
        @media (prefers-reduced-motion: reduce) {
          .clv-scroll { scroll-behavior: auto; }
          .clv-eq-bar, .clv-dot-ping, .clv-sweep { animation: none !important; }
          .clv-eq-bar { transform: scaleY(0.65); }
          .clv-dot-ping { opacity: 0; }
          .clv-sweep { opacity: 0; }
        }
      `}</style>

      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-x-0 top-0 h-64 bg-[radial-gradient(60%_100%_at_50%_0%,rgba(99,102,241,0.14),transparent_70%)] dark:bg-[radial-gradient(60%_100%_at_50%_0%,rgba(129,140,248,0.16),transparent_70%)]"
      />

      <div className="relative mx-auto w-full max-w-6xl">
        <header className="mx-auto max-w-2xl text-center">
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400">
            Live session
          </p>
          <h2 className="mt-3 text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl dark:text-white">
            Orbit 3.0 launch, unfiltered
          </h2>
          <p className="mt-3 text-base leading-relaxed text-slate-600 dark:text-slate-400">
            The room is talking while Dana walks through the migration path. Pause the stream to read,
            like the questions you want answered, or add your own.
          </p>
        </header>

        <div className="mt-12 grid gap-6 lg:grid-cols-[minmax(0,1fr)_18rem]">
          <div className="relative flex flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <div className="flex flex-wrap items-center gap-3 border-b border-slate-200 px-4 py-3 sm:px-5 dark:border-slate-800">
              <span
                className={`inline-flex items-center gap-2 rounded-full px-2.5 py-1 text-xs font-semibold ${
                  live
                    ? "bg-rose-50 text-rose-700 dark:bg-rose-500/10 dark:text-rose-300"
                    : "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400"
                }`}
              >
                <span className="relative flex h-2 w-2 items-center justify-center">
                  {live ? (
                    <span className="clv-dot-ping absolute inline-flex h-2 w-2 rounded-full bg-rose-500" />
                  ) : null}
                  <span
                    className={`relative inline-flex h-2 w-2 rounded-full ${
                      live ? "bg-rose-500" : "bg-slate-400 dark:bg-slate-500"
                    }`}
                  />
                </span>
                {live ? "Live" : "Paused"}
              </span>

              <span className="flex h-4 items-end gap-[3px]" aria-hidden="true">
                {[0, 1, 2, 3].map((i) => (
                  <span
                    key={i}
                    className={`clv-eq-bar w-[3px] rounded-sm ${
                      live ? "bg-indigo-500 dark:bg-indigo-400" : "bg-slate-300 dark:bg-slate-700"
                    }`}
                    style={{
                      height: "100%",
                      animationDelay: `${i * 130}ms`,
                      animationPlayState: live ? "running" : "paused",
                    }}
                  />
                ))}
              </span>

              <p className="text-sm tabular-nums text-slate-500 dark:text-slate-400">
                <span className="font-semibold text-slate-800 dark:text-slate-200">
                  {viewers.toLocaleString("en-US")}
                </span>{" "}
                watching
              </p>

              <div className="ml-auto flex items-center gap-3">
                <div
                  role="radiogroup"
                  aria-label="Filter the stream"
                  className="flex items-center gap-1 rounded-lg bg-slate-100 p-1 dark:bg-slate-800"
                >
                  {FILTERS.map((f, i) => {
                    const active = filter === f.key;
                    return (
                      <button
                        key={f.key}
                        ref={(node) => {
                          filterRefs.current[i] = node;
                        }}
                        type="button"
                        role="radio"
                        aria-checked={active}
                        tabIndex={active ? 0 : -1}
                        onClick={() => setFilter(f.key)}
                        onKeyDown={(event) => onFilterKeyDown(event, i)}
                        className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${ring} ${
                          active
                            ? "bg-white text-slate-900 shadow-sm dark:bg-slate-700 dark:text-white"
                            : "text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200"
                        }`}
                      >
                        {f.label}
                      </button>
                    );
                  })}
                </div>

                <button
                  type="button"
                  role="switch"
                  aria-checked={live}
                  aria-label="Live stream"
                  onClick={() => setLive((v) => !v)}
                  className={`inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition-colors ${ring} ${
                    live
                      ? "border-indigo-600 bg-indigo-600 dark:border-indigo-500 dark:bg-indigo-500"
                      : "border-slate-300 bg-slate-200 dark:border-slate-600 dark:bg-slate-700"
                  }`}
                >
                  <span
                    className={`ml-0.5 inline-block h-5 w-5 rounded-full bg-white shadow-sm transition-transform dark:bg-slate-100 ${
                      live ? "translate-x-[19px]" : "translate-x-0"
                    }`}
                  />
                </button>
              </div>
            </div>

            <div className="relative h-1 overflow-hidden bg-slate-100 dark:bg-slate-800" aria-hidden="true">
              {live ? (
                <span className="clv-sweep absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent dark:via-indigo-400" />
              ) : null}
            </div>

            <div className="relative">
              <div
                ref={scrollRef}
                tabIndex={0}
                role="log"
                aria-label="Live comment stream"
                aria-busy={live}
                className={`clv-scroll h-[26rem] overflow-y-auto px-4 py-4 sm:px-5 ${ring}`}
              >
                <ul className="flex flex-col gap-3">
                  <AnimatePresence initial={false}>
                    {visible.map((m) => (
                      <motion.li
                        key={m.id}
                        initial={reduce ? false : { opacity: 0, y: 12 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={reduce ? { opacity: 0 } : { opacity: 0, y: -8 }}
                        transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
                        className={`flex gap-3 rounded-xl border p-3 ${
                          m.kind === "highlight"
                            ? "border-emerald-200 bg-emerald-50/70 dark:border-emerald-400/25 dark:bg-emerald-500/10"
                            : m.mine
                              ? "border-violet-200 bg-violet-50/70 dark:border-violet-400/25 dark:bg-violet-500/10"
                              : "border-transparent bg-slate-50/80 dark:bg-slate-800/50"
                        }`}
                      >
                        <span
                          aria-hidden="true"
                          className={`mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-full text-[11px] font-bold ring-1 ${AVATAR[m.accent]}`}
                        >
                          {m.initials}
                        </span>

                        <div className="min-w-0 flex-1">
                          <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
                            <span className="text-sm font-semibold text-slate-900 dark:text-slate-100">
                              {m.author}
                            </span>
                            {m.kind === "highlight" ? (
                              <span className="rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-emerald-700 ring-1 ring-emerald-300 dark:text-emerald-300 dark:ring-emerald-400/30">
                                Host
                              </span>
                            ) : null}
                            {m.kind === "question" ? (
                              <span className="rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-700 ring-1 ring-amber-300 dark:text-amber-300 dark:ring-amber-400/30">
                                Question
                              </span>
                            ) : null}
                            <span className="text-xs tabular-nums text-slate-400 dark:text-slate-500">
                              {ago(Math.max(0, tick - m.createdAt))}
                            </span>
                          </div>

                          <p className="mt-1 break-words text-sm leading-relaxed text-slate-700 dark:text-slate-300">
                            {m.body}
                          </p>

                          <button
                            type="button"
                            aria-pressed={m.liked}
                            aria-label={`Like the message from ${m.author}`}
                            onClick={() => toggleLike(m.id)}
                            className={`mt-2 inline-flex items-center gap-1.5 rounded-full border px-2 py-1 text-xs font-medium transition-colors ${ring} ${
                              m.liked
                                ? "border-rose-300 bg-rose-50 text-rose-700 dark:border-rose-400/30 dark:bg-rose-500/10 dark:text-rose-300"
                                : "border-slate-200 text-slate-500 hover:border-slate-300 hover:text-slate-800 dark:border-slate-700 dark:text-slate-400 dark:hover:border-slate-600 dark:hover:text-slate-200"
                            }`}
                          >
                            <svg viewBox="0 0 20 20" className="h-3.5 w-3.5" aria-hidden="true">
                              <path
                                d="M10 16.5s-6-3.7-6-8a3.4 3.4 0 0 1 6-2.2A3.4 3.4 0 0 1 16 8.5c0 4.3-6 8-6 8Z"
                                fill={m.liked ? "currentColor" : "none"}
                                stroke="currentColor"
                                strokeWidth="1.5"
                                strokeLinejoin="round"
                              />
                            </svg>
                            <span className="tabular-nums">{m.likes}</span>
                          </button>
                        </div>
                      </motion.li>
                    ))}
                  </AnimatePresence>
                </ul>

                {visible.length === 0 ? (
                  <p className="py-16 text-center text-sm text-slate-500 dark:text-slate-400">
                    Nothing here yet. Questions land in this tab the moment someone asks one.
                  </p>
                ) : null}

                <div ref={bottomRef} aria-hidden="true" className="h-px w-full" />
              </div>

              <AnimatePresence>
                {!pinnedToBottom ? (
                  <motion.div
                    initial={reduce ? false : { opacity: 0, y: 8 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={reduce ? { opacity: 0 } : { opacity: 0, y: 8 }}
                    transition={{ duration: 0.2 }}
                    className="pointer-events-none absolute inset-x-0 bottom-3 flex justify-center"
                  >
                    <button
                      type="button"
                      onClick={jumpToLatest}
                      className={`pointer-events-auto inline-flex items-center gap-2 rounded-full bg-slate-900 px-3.5 py-1.5 text-xs font-semibold text-white shadow-lg transition-colors hover:bg-slate-800 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200 ${ring}`}
                    >
                      <svg viewBox="0 0 20 20" className="h-3.5 w-3.5" aria-hidden="true">
                        <path
                          d="M10 4v11m0 0 4.5-4.5M10 15l-4.5-4.5"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="1.6"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                      {unread > 0 ? `${unread} new message${unread === 1 ? "" : "s"}` : "Jump to latest"}
                    </button>
                  </motion.div>
                ) : null}
              </AnimatePresence>
            </div>

            <form
              onSubmit={submit}
              className="border-t border-slate-200 px-4 py-3 sm:px-5 dark:border-slate-800"
            >
              <label htmlFor={composerId} className="sr-only">
                Add to the stream
              </label>
              <textarea
                id={composerId}
                rows={2}
                value={draft}
                onChange={(event) => setDraft(event.target.value)}
                onKeyDown={onComposerKeyDown}
                aria-describedby={counterId}
                aria-invalid={overBudget}
                placeholder="Say something to the room — Enter to send, Shift + Enter for a new line"
                className={`w-full resize-none rounded-lg border bg-white px-3 py-2 text-sm leading-relaxed text-slate-900 placeholder:text-slate-400 dark:bg-slate-950 dark:text-slate-100 dark:placeholder:text-slate-500 ${ring} ${
                  overBudget
                    ? "border-rose-400 dark:border-rose-500/60"
                    : "border-slate-200 dark:border-slate-700"
                }`}
              />
              <div className="mt-2 flex flex-wrap items-center gap-3">
                <button
                  type="button"
                  aria-pressed={asQuestion}
                  onClick={() => setAsQuestion((v) => !v)}
                  className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors ${ring} ${
                    asQuestion
                      ? "border-amber-300 bg-amber-50 text-amber-800 dark:border-amber-400/30 dark:bg-amber-500/10 dark:text-amber-300"
                      : "border-slate-200 text-slate-500 hover:text-slate-800 dark:border-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
                  }`}
                >
                  <svg viewBox="0 0 20 20" className="h-3.5 w-3.5" aria-hidden="true">
                    <path
                      d="M7.4 7.3a2.7 2.7 0 1 1 3.4 2.6c-.5.2-.8.6-.8 1.1v.6M10 14.6h.01"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.6"
                      strokeLinecap="round"
                    />
                    <circle cx="10" cy="10" r="7.2" fill="none" stroke="currentColor" strokeWidth="1.3" />
                  </svg>
                  Ask as question
                </button>

                <p
                  id={counterId}
                  className={`ml-auto text-xs tabular-nums ${
                    overBudget ? "text-rose-600 dark:text-rose-400" : "text-slate-400 dark:text-slate-500"
                  }`}
                >
                  {draft.length}/{MAX_CHARS}
                </p>

                <button
                  type="submit"
                  disabled={draft.trim().length === 0 || overBudget}
                  className={`inline-flex items-center gap-1.5 rounded-lg bg-indigo-600 px-3.5 py-1.5 text-sm font-semibold text-white transition-colors hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-indigo-500 dark:hover:bg-indigo-400 ${ring}`}
                >
                  Send
                  <svg viewBox="0 0 20 20" className="h-3.5 w-3.5" aria-hidden="true">
                    <path
                      d="m3.4 10 13.2-5.6-5.2 13-2-5.4-6-2Z"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinejoin="round"
                    />
                  </svg>
                </button>
              </div>
            </form>
          </div>

          <aside className="flex flex-col gap-4">
            <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
              <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">
                Migration deep dive
              </h3>
              <p className="mt-1 text-xs leading-relaxed text-slate-500 dark:text-slate-400">
                Hosted by Dana Whitfield, Head of Platform. Started 18 minutes ago, running about 45.
              </p>
              <dl className="mt-4 grid grid-cols-3 gap-2 text-center">
                {[
                  { label: "Watching", value: viewers.toLocaleString("en-US") },
                  { label: "Messages", value: String(stream.length) },
                  { label: "Questions", value: String(questionCount) },
                ].map((stat) => (
                  <div
                    key={stat.label}
                    className="rounded-lg bg-slate-50 px-2 py-2.5 dark:bg-slate-800/60"
                  >
                    <dt className="text-[10px] font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400">
                      {stat.label}
                    </dt>
                    <dd className="mt-0.5 text-sm font-semibold tabular-nums text-slate-900 dark:text-slate-100">
                      {stat.value}
                    </dd>
                  </div>
                ))}
              </dl>
            </div>

            <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
              <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">House rules</h3>
              <ul className="mt-3 space-y-2.5">
                {[
                  "Ask the question once. The room upvotes, Dana answers the top three at the half hour.",
                  "Version numbers and error strings help. Screenshots do not paste into a live stream.",
                  "Support tickets get answered faster than chat. This is for the things docs can't settle.",
                ].map((rule) => (
                  <li key={rule} className="flex gap-2 text-xs leading-relaxed text-slate-600 dark:text-slate-400">
                    <svg
                      viewBox="0 0 20 20"
                      className="mt-0.5 h-3.5 w-3.5 shrink-0 text-indigo-500 dark:text-indigo-400"
                      aria-hidden="true"
                    >
                      <path
                        d="m4.5 10.5 3.4 3.4 7.6-8.2"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="1.8"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                    {rule}
                  </li>
                ))}
              </ul>
            </div>
          </aside>
        </div>
      </div>

      <p aria-live="polite" aria-atomic="true" className="sr-only">
        {announcement}
      </p>
    </section>
  );
}