Comments Chat Style

"use client";

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

type ToneKey = "indigo" | "emerald" | "amber" | "sky";

type Person = {
  id: string;
  name: string;
  initials: string;
  role: string;
  tone: ToneKey;
};

type QuotedRef = {
  author: string;
  excerpt: string;
};

type Message = {
  id: string;
  senderId: string;
  body: string;
  at: string;
  day: string;
  likes: number;
  liked: boolean;
  quoted?: QuotedRef;
};

const AVATAR_TONE: Record<ToneKey, 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",
  emerald:
    "bg-emerald-100 text-emerald-700 ring-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-300 dark:ring-emerald-400/25",
  amber:
    "bg-amber-100 text-amber-700 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 PEOPLE: Record<string, Person> = {
  me: {
    id: "me",
    name: "You",
    initials: "YO",
    role: "Engineering manager",
    tone: "indigo",
  },
  priya: {
    id: "priya",
    name: "Priya Raghavan",
    initials: "PR",
    role: "Payments backend",
    tone: "emerald",
  },
  marcus: {
    id: "marcus",
    name: "Marcus Oyelaran",
    initials: "MO",
    role: "Design systems",
    tone: "amber",
  },
  dana: {
    id: "dana",
    name: "Dana Whitlock",
    initials: "DW",
    role: "QA & accessibility",
    tone: "sky",
  },
};

const SEED: readonly Message[] = [
  {
    id: "m1",
    senderId: "priya",
    body: "Pushed the idempotency key change to staging at 14:02. Every retry inside a 60-second window now collapses into one charge attempt, so the duplicate-charge bug from the February incident should be dead.",
    at: "14:06",
    day: "Yesterday",
    likes: 3,
    liked: false,
  },
  {
    id: "m2",
    senderId: "priya",
    body: "Load test runs until about 18:00 if anyone wants to watch it burn.",
    at: "14:07",
    day: "Yesterday",
    likes: 0,
    liked: false,
  },
  {
    id: "m3",
    senderId: "marcus",
    body: "Watched the whole thing. 12k concurrent, p95 held at 340ms. The only part that wobbled was address autocomplete — it spikes past 900ms whenever the postcode lookup misses cache.",
    at: "18:24",
    day: "Yesterday",
    likes: 2,
    liked: true,
  },
  {
    id: "m4",
    senderId: "dana",
    body: "I can reproduce that reliably. It's every postcode starting with a letter pair we never pre-warmed — roughly 4% of UK traffic, and it fails silently instead of falling back.",
    at: "09:12",
    day: "Today",
    likes: 4,
    liked: false,
    quoted: {
      author: "Marcus Oyelaran",
      excerpt: "address autocomplete — it spikes past 900ms whenever the postcode lookup misses cache.",
    },
  },
  {
    id: "m5",
    senderId: "me",
    body: "Can we ship Thursday without the autocomplete fix and treat it as a fast follow? I'd rather not hold the whole release for 4%.",
    at: "09:20",
    day: "Today",
    likes: 1,
    liked: false,
  },
  {
    id: "m6",
    senderId: "marcus",
    body: "Fine by me, as long as the manual address field stays keyboard-first. Last time we tucked it behind the dropdown and screen reader users lost the plot entirely.",
    at: "09:23",
    day: "Today",
    likes: 5,
    liked: false,
  },
];

const SCRIPTED_REPLIES: readonly { senderId: string; body: string }[] = [
  {
    senderId: "priya",
    body: "Agreed. I'll keep the manual field mounted at all times and let suggestions render underneath it rather than replacing it.",
  },
  {
    senderId: "dana",
    body: "Then I'll re-run the axe sweep tonight and drop the diff in here before standup. If tab order survives, I'm happy to sign off.",
  },
  {
    senderId: "marcus",
    body: "Works. I'll freeze the tokens branch at 17:00 so nothing shifts under QA while they're testing.",
  },
  {
    senderId: "priya",
    body: "One more thing — the February incident doc still describes the old retry behaviour. I'll rewrite that section today so it isn't lying to the next on-call.",
  },
];

const MAX_CHARS = 500;

const TIME_FORMAT = new Intl.DateTimeFormat("en-GB", {
  hour: "2-digit",
  minute: "2-digit",
  hour12: false,
});

function excerptOf(body: string): string {
  return body.length > 96 ? `${body.slice(0, 96).trimEnd()}…` : body;
}

function ReplyIcon() {
  return (
    <svg viewBox="0 0 20 20" aria-hidden="true" className="h-3.5 w-3.5" fill="none">
      <path
        d="M8 5 3.5 9.5 8 14"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M3.5 9.5h6.75A5.75 5.75 0 0 1 16 15.25v.75"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function HeartIcon({ filled }: { filled: boolean }) {
  return (
    <svg viewBox="0 0 20 20" aria-hidden="true" className="h-3.5 w-3.5">
      <path
        d="M10 16.5s-5.9-3.6-5.9-7.6A3.4 3.4 0 0 1 10 6.6a3.4 3.4 0 0 1 5.9 2.3c0 4-5.9 7.6-5.9 7.6Z"
        fill={filled ? "currentColor" : "none"}
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function SendIcon() {
  return (
    <svg viewBox="0 0 20 20" aria-hidden="true" className="h-4 w-4">
      <path
        d="M3.4 10 16.6 4.2 11.8 17l-2.4-5.2L3.4 10Z"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function ArrowDownIcon() {
  return (
    <svg viewBox="0 0 20 20" aria-hidden="true" className="h-3.5 w-3.5">
      <path
        d="M10 4.5v11m0 0 4.2-4.2M10 15.5l-4.2-4.2"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function CloseIcon() {
  return (
    <svg viewBox="0 0 20 20" aria-hidden="true" className="h-3.5 w-3.5">
      <path
        d="m6 6 8 8M14 6l-8 8"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.7"
        strokeLinecap="round"
      />
    </svg>
  );
}

function Avatar({ person }: { person: Person }) {
  return (
    <span
      aria-hidden="true"
      className={`grid h-8 w-8 shrink-0 place-items-center rounded-full text-[11px] font-semibold tracking-wide ring-1 ${AVATAR_TONE[person.tone]}`}
    >
      {person.initials}
    </span>
  );
}

export default function CommentChatStyle() {
  const reduceMotion = useReducedMotion();
  const uid = useId();
  const composerId = `${uid}-composer`;
  const hintId = `${uid}-hint`;

  const [messages, setMessages] = useState<Message[]>(() => SEED.map((m) => ({ ...m })));
  const [draft, setDraft] = useState("");
  const [replyTo, setReplyTo] = useState<QuotedRef | null>(null);
  const [typingId, setTypingId] = useState<string | null>(null);
  const [atBottom, setAtBottom] = useState(true);

  const scrollRef = useRef<HTMLDivElement | null>(null);
  const sentinelRef = useRef<HTMLDivElement | null>(null);
  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
  const timersRef = useRef<number[]>([]);
  const seqRef = useRef(100);
  const replyCursorRef = useRef(0);

  useEffect(() => {
    const timers = timersRef.current;
    return () => {
      timers.forEach((t) => window.clearTimeout(t));
      timers.length = 0;
    };
  }, []);

  useEffect(() => {
    const root = scrollRef.current;
    const target = sentinelRef.current;
    if (!root || !target) return;
    const observer = new IntersectionObserver(
      (entries) => {
        const entry = entries[0];
        if (entry) setAtBottom(entry.isIntersecting);
      },
      { root, threshold: 0.9, rootMargin: "0px 0px 24px 0px" },
    );
    observer.observe(target);
    return () => observer.disconnect();
  }, []);

  const scrollToLatest = useCallback(
    (force: boolean) => {
      const root = scrollRef.current;
      if (!root) return;
      if (!force && !atBottom) return;
      root.scrollTo({
        top: root.scrollHeight,
        behavior: reduceMotion ? "auto" : "smooth",
      });
    },
    [atBottom, reduceMotion],
  );

  useEffect(() => {
    scrollToLatest(false);
  }, [messages, typingId, scrollToLatest]);

  useEffect(() => {
    const el = textareaRef.current;
    if (!el) return;
    el.style.height = "0px";
    el.style.height = `${Math.min(el.scrollHeight, 128)}px`;
  }, [draft]);

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

  const startReply = useCallback((message: Message) => {
    const author = PEOPLE[message.senderId]?.name ?? "Unknown";
    setReplyTo({ author, excerpt: excerptOf(message.body) });
    textareaRef.current?.focus();
  }, []);

  const queueScriptedReply = useCallback(() => {
    const next = SCRIPTED_REPLIES[replyCursorRef.current % SCRIPTED_REPLIES.length];
    replyCursorRef.current += 1;
    if (!next) return;

    const typingTimer = window.setTimeout(() => {
      setTypingId(next.senderId);
      const sendTimer = window.setTimeout(() => {
        setTypingId(null);
        seqRef.current += 1;
        setMessages((prev) => [
          ...prev,
          {
            id: `m${seqRef.current}`,
            senderId: next.senderId,
            body: next.body,
            at: TIME_FORMAT.format(new Date()),
            day: "Today",
            likes: 0,
            liked: false,
          },
        ]);
      }, 1900);
      timersRef.current.push(sendTimer);
    }, 700);
    timersRef.current.push(typingTimer);
  }, []);

  const send = useCallback(() => {
    const body = draft.trim();
    if (!body) return;
    seqRef.current += 1;
    const quoted = replyTo ?? undefined;
    setMessages((prev) => [
      ...prev,
      {
        id: `m${seqRef.current}`,
        senderId: "me",
        body,
        at: TIME_FORMAT.format(new Date()),
        day: "Today",
        likes: 0,
        liked: false,
        quoted,
      },
    ]);
    setDraft("");
    setReplyTo(null);
    window.setTimeout(() => scrollToLatest(true), 0);
    queueScriptedReply();
  }, [draft, replyTo, queueScriptedReply, scrollToLatest]);

  const onComposerKeyDown = useCallback(
    (event: KeyboardEvent<HTMLTextAreaElement>) => {
      if (event.key === "Enter" && !event.shiftKey) {
        event.preventDefault();
        send();
        return;
      }
      if (event.key === "Escape" && replyTo) {
        event.preventDefault();
        setReplyTo(null);
      }
    },
    [send, replyTo],
  );

  const onComposerChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
    setDraft(event.target.value.slice(0, MAX_CHARS));
  }, []);

  const remaining = MAX_CHARS - draft.length;
  const canSend = draft.trim().length > 0;
  const typingPerson = typingId ? PEOPLE[typingId] : undefined;

  const focusRing =
    "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-offset-slate-900";

  return (
    <section className="relative w-full overflow-hidden bg-slate-50 px-4 py-20 sm:py-28 dark:bg-slate-950">
      <style>{`
        @keyframes ccs-typing-dot {
          0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
          30% { transform: translateY(-3px); opacity: 1; }
        }
        @keyframes ccs-live-ping {
          0% { transform: scale(1); opacity: 0.55; }
          70% { transform: scale(2.4); opacity: 0; }
          100% { transform: scale(2.4); opacity: 0; }
        }
        .ccs-dot { animation: ccs-typing-dot 1.2s ease-in-out infinite; }
        .ccs-dot:nth-child(2) { animation-delay: 0.16s; }
        .ccs-dot:nth-child(3) { animation-delay: 0.32s; }
        .ccs-live-ring { animation: ccs-live-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite; }
        @media (prefers-reduced-motion: reduce) {
          .ccs-dot, .ccs-live-ring { animation: none !important; }
          .ccs-live-ring { opacity: 0.35; }
        }
      `}</style>

      <div
        aria-hidden="true"
        className="pointer-events-none absolute -top-24 left-1/2 h-72 w-[36rem] -translate-x-1/2 rounded-full bg-indigo-200/40 blur-3xl dark:bg-indigo-500/10"
      />

      <div className="relative mx-auto w-full max-w-3xl">
        <div className="mb-8 sm:mb-10">
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400">
            Release thread
          </p>
          <h2 className="mt-3 text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl dark:text-white">
            Ship review: checkout v3
          </h2>
          <p className="mt-3 max-w-xl text-sm leading-relaxed text-slate-600 dark:text-slate-400">
            Every decision on this release lives here, in order, with the person who made
            it attached. Press Enter to send, Shift + Enter for a new line.
          </p>
        </div>

        <div className="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl shadow-slate-900/5 dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/20">
          <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-4 py-3.5 sm:px-6 dark:border-slate-800">
            <div className="flex items-center gap-3">
              <div className="flex -space-x-2">
                {[PEOPLE.priya, PEOPLE.marcus, PEOPLE.dana].map((p) =>
                  p ? (
                    <span
                      key={p.id}
                      className="rounded-full ring-2 ring-white dark:ring-slate-900"
                    >
                      <Avatar person={p} />
                    </span>
                  ) : null,
                )}
              </div>
              <div className="leading-tight">
                <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
                  4 people in this thread
                </p>
                <p className="text-xs text-slate-500 dark:text-slate-400">
                  Payments, design systems, QA
                </p>
              </div>
            </div>

            <span className="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700 ring-1 ring-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-300 dark:ring-emerald-400/20">
              <span className="relative grid h-2 w-2 place-items-center">
                <span className="ccs-live-ring absolute inset-0 rounded-full bg-emerald-500" />
                <span className="relative h-2 w-2 rounded-full bg-emerald-500" />
              </span>
              Live
            </span>
          </div>

          <div className="relative">
            <div
              ref={scrollRef}
              role="log"
              aria-live="polite"
              aria-relevant="additions text"
              aria-label="Thread messages"
              tabIndex={0}
              className={`max-h-[28rem] overflow-y-auto px-4 py-5 sm:px-6 ${focusRing}`}
            >
              <ul role="list" className="space-y-2">
                {messages.map((message, index) => {
                  const person = PEOPLE[message.senderId];
                  if (!person) return null;
                  const previous = messages[index - 1];
                  const newDay = !previous || previous.day !== message.day;
                  const showHeader =
                    newDay || !previous || previous.senderId !== message.senderId;
                  const mine = message.senderId === "me";

                  return (
                    <li key={message.id} className="list-none">
                      {newDay ? (
                        <div
                          role="separator"
                          aria-label={message.day}
                          className="flex items-center gap-3 py-4"
                        >
                          <span className="h-px flex-1 bg-slate-200 dark:bg-slate-800" />
                          <span className="text-[11px] font-medium uppercase tracking-[0.14em] text-slate-400 dark:text-slate-500">
                            {message.day}
                          </span>
                          <span className="h-px flex-1 bg-slate-200 dark:bg-slate-800" />
                        </div>
                      ) : null}

                      <motion.div
                        initial={reduceMotion ? false : { opacity: 0, y: 8 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
                        className={`group flex gap-3 ${mine ? "flex-row-reverse" : "flex-row"} ${showHeader ? "mt-3" : "mt-1"}`}
                      >
                        <div className="w-8 shrink-0">
                          {showHeader ? <Avatar person={person} /> : null}
                        </div>

                        <div
                          className={`flex min-w-0 max-w-[85%] flex-col sm:max-w-[76%] ${mine ? "items-end" : "items-start"}`}
                        >
                          {showHeader ? (
                            <p
                              className={`mb-1 flex items-baseline gap-2 text-xs ${mine ? "flex-row-reverse" : ""}`}
                            >
                              <span className="font-semibold text-slate-900 dark:text-slate-100">
                                {person.name}
                              </span>
                              <span className="text-slate-400 dark:text-slate-500">
                                {person.role}
                              </span>
                            </p>
                          ) : null}

                          <div
                            className={`w-full rounded-2xl px-3.5 py-2.5 text-sm leading-relaxed ${
                              mine
                                ? "rounded-tr-sm bg-indigo-600 text-white dark:bg-indigo-500"
                                : "rounded-tl-sm bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-100"
                            }`}
                          >
                            {message.quoted ? (
                              <div
                                className={`mb-2 rounded-lg border-l-2 py-1 pl-2.5 text-xs leading-snug ${
                                  mine
                                    ? "border-indigo-300/70 bg-indigo-500/40 text-indigo-50 dark:border-indigo-300/60 dark:bg-indigo-400/25"
                                    : "border-slate-300 bg-white/70 text-slate-600 dark:border-slate-600 dark:bg-slate-900/50 dark:text-slate-300"
                                }`}
                              >
                                <span className="block font-semibold">
                                  {message.quoted.author}
                                </span>
                                <span className="block opacity-90">
                                  {message.quoted.excerpt}
                                </span>
                              </div>
                            ) : null}
                            <p className="whitespace-pre-wrap break-words">{message.body}</p>
                          </div>

                          <div
                            className={`mt-1 flex items-center gap-1 ${mine ? "flex-row-reverse" : ""}`}
                          >
                            <span className="px-1 text-[11px] tabular-nums text-slate-400 dark:text-slate-500">
                              {message.at}
                            </span>

                            <button
                              type="button"
                              onClick={() => toggleLike(message.id)}
                              aria-pressed={message.liked}
                              aria-label={`Like message from ${person.name}`}
                              className={`inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[11px] font-medium transition-colors ${focusRing} ${
                                message.liked
                                  ? "bg-rose-50 text-rose-600 dark:bg-rose-500/15 dark:text-rose-300"
                                  : "text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-300"
                              }`}
                            >
                              <HeartIcon filled={message.liked} />
                              {message.likes > 0 ? (
                                <span className="tabular-nums">{message.likes}</span>
                              ) : null}
                            </button>

                            <button
                              type="button"
                              onClick={() => startReply(message)}
                              aria-label={`Reply to ${person.name}`}
                              className={`inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-slate-400 opacity-0 transition hover:bg-slate-100 hover:text-slate-600 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-300 ${focusRing}`}
                            >
                              <ReplyIcon />
                              Reply
                            </button>
                          </div>
                        </div>
                      </motion.div>
                    </li>
                  );
                })}
              </ul>

              <AnimatePresence initial={false}>
                {typingPerson ? (
                  <motion.div
                    key="typing"
                    initial={reduceMotion ? false : { opacity: 0, y: 6 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={reduceMotion ? { opacity: 0 } : { opacity: 0, y: 6 }}
                    transition={{ duration: 0.22 }}
                    className="mt-3 flex items-center gap-3"
                  >
                    <Avatar person={typingPerson} />
                    <span className="inline-flex items-center gap-1.5 rounded-2xl rounded-tl-sm bg-slate-100 px-3.5 py-3 dark:bg-slate-800">
                      <span className="ccs-dot h-1.5 w-1.5 rounded-full bg-slate-400 dark:bg-slate-500" />
                      <span className="ccs-dot h-1.5 w-1.5 rounded-full bg-slate-400 dark:bg-slate-500" />
                      <span className="ccs-dot h-1.5 w-1.5 rounded-full bg-slate-400 dark:bg-slate-500" />
                    </span>
                    <span className="sr-only">{typingPerson.name} is typing</span>
                  </motion.div>
                ) : null}
              </AnimatePresence>

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

            <AnimatePresence>
              {!atBottom ? (
                <motion.button
                  key="jump"
                  type="button"
                  onClick={() => scrollToLatest(true)}
                  initial={reduceMotion ? false : { opacity: 0, y: 6 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={reduceMotion ? { opacity: 0 } : { opacity: 0, y: 6 }}
                  transition={{ duration: 0.18 }}
                  className={`absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 items-center gap-1.5 rounded-full border border-slate-200 bg-white/95 px-3 py-1.5 text-xs font-medium text-slate-700 shadow-lg backdrop-blur hover:bg-white dark:border-slate-700 dark:bg-slate-800/95 dark:text-slate-200 dark:hover:bg-slate-800 ${focusRing}`}
                >
                  <ArrowDownIcon />
                  Jump to latest
                </motion.button>
              ) : null}
            </AnimatePresence>
          </div>

          <div className="border-t border-slate-200 bg-slate-50/60 px-4 py-4 sm:px-6 dark:border-slate-800 dark:bg-slate-950/40">
            <AnimatePresence initial={false}>
              {replyTo ? (
                <motion.div
                  key="quote"
                  initial={reduceMotion ? false : { opacity: 0, height: 0 }}
                  animate={{ opacity: 1, height: "auto" }}
                  exit={reduceMotion ? { opacity: 0 } : { opacity: 0, height: 0 }}
                  transition={{ duration: 0.2 }}
                  className="overflow-hidden"
                >
                  <div className="mb-2.5 flex items-start gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 dark:border-slate-700 dark:bg-slate-900">
                    <span className="mt-0.5 text-indigo-500 dark:text-indigo-400">
                      <ReplyIcon />
                    </span>
                    <p className="min-w-0 flex-1 text-xs leading-snug text-slate-600 dark:text-slate-300">
                      <span className="font-semibold text-slate-900 dark:text-slate-100">
                        Replying to {replyTo.author}
                      </span>
                      <span className="mt-0.5 block truncate opacity-80">
                        {replyTo.excerpt}
                      </span>
                    </p>
                    <button
                      type="button"
                      onClick={() => setReplyTo(null)}
                      aria-label="Cancel reply"
                      className={`shrink-0 rounded-md p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-slate-800 dark:hover:text-slate-200 ${focusRing}`}
                    >
                      <CloseIcon />
                    </button>
                  </div>
                </motion.div>
              ) : null}
            </AnimatePresence>

            <div className="flex items-end gap-2.5">
              <Avatar person={PEOPLE.me as Person} />

              <div className="min-w-0 flex-1 rounded-2xl border border-slate-200 bg-white px-3 py-2 focus-within:border-indigo-400 focus-within:ring-2 focus-within:ring-indigo-500/20 dark:border-slate-700 dark:bg-slate-900 dark:focus-within:border-indigo-500">
                <label htmlFor={composerId} className="sr-only">
                  Write a message in the checkout v3 thread
                </label>
                <textarea
                  id={composerId}
                  ref={textareaRef}
                  rows={1}
                  value={draft}
                  onChange={onComposerChange}
                  onKeyDown={onComposerKeyDown}
                  aria-describedby={hintId}
                  placeholder="Write a message…"
                  className="block w-full resize-none bg-transparent text-sm leading-relaxed text-slate-900 placeholder:text-slate-400 focus:outline-none dark:text-slate-100 dark:placeholder:text-slate-500"
                />
                <div className="mt-1 flex items-center justify-between gap-3">
                  <p id={hintId} className="text-[11px] text-slate-400 dark:text-slate-500">
                    Enter to send · Shift + Enter for a new line
                  </p>
                  <span
                    aria-hidden="true"
                    className={`text-[11px] tabular-nums ${
                      remaining <= 40
                        ? "font-medium text-rose-500 dark:text-rose-400"
                        : "text-slate-400 dark:text-slate-500"
                    }`}
                  >
                    {remaining}
                  </span>
                </div>
              </div>

              <button
                type="button"
                onClick={send}
                disabled={!canSend}
                className={`inline-flex h-10 shrink-0 items-center gap-2 rounded-full bg-indigo-600 px-4 text-sm font-medium text-white transition hover:bg-indigo-500 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:text-slate-400 dark:disabled:bg-slate-800 dark:disabled:text-slate-600 ${focusRing}`}
              >
                <SendIcon />
                <span className="hidden sm:inline">Send</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}