Comments Moderation

"use client";

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

type Status = "pending" | "approved" | "spam" | "trash";

type FlagKey = "links" | "new-account" | "reported" | "duplicate" | "keyword";

type Flag = {
  key: FlagKey;
  label: string;
  tone: "amber" | "rose" | "sky";
};

type Comment = {
  id: string;
  author: string;
  initials: string;
  handle: string;
  posted: string;
  onPost: string;
  body: string;
  status: Status;
  flags: Flag[];
  spamScore: number;
  accent: "indigo" | "violet" | "emerald" | "sky" | "rose" | "amber";
};

const FLAGS: Record<FlagKey, Flag> = {
  links: { key: "links", label: "4 outbound links", tone: "amber" },
  "new-account": { key: "new-account", label: "Account 2 days old", tone: "amber" },
  reported: { key: "reported", label: "Reported by 3 readers", tone: "rose" },
  duplicate: { key: "duplicate", label: "Duplicate of 6 comments", tone: "rose" },
  keyword: { key: "keyword", label: "Blocklist term hit", tone: "sky" },
};

const SEED: readonly Comment[] = [
  {
    id: "m1",
    author: "Priya Raghavan",
    initials: "PR",
    handle: "@praghavan",
    posted: "18 minutes ago",
    onPost: "Why your LCP got worse after the redesign",
    body: "The hero font swap is doing more damage than the image here. We had the exact same profile — 2.1s LCP that jumped to 3.4s — and it turned out `font-display: block` was holding the paint for the whole 3s block period. Switching to `optional` plus a size-adjusted fallback took 900ms off before we touched a single image.",
    status: "pending",
    flags: [],
    spamScore: 0.02,
    accent: "indigo",
  },
  {
    id: "m2",
    author: "crypto signals daily",
    initials: "CS",
    handle: "@csd_official_2",
    posted: "22 minutes ago",
    onPost: "Why your LCP got worse after the redesign",
    body: "GREAT POST!! I made $14,320 last week with this method, check my profile bio for the free telegram group, limited spots only >>> link1.example / link2.example / link3.example / link4.example",
    status: "pending",
    flags: [FLAGS.links, FLAGS["new-account"], FLAGS.duplicate],
    spamScore: 0.97,
    accent: "rose",
  },
  {
    id: "m3",
    author: "Tomás Berger",
    initials: "TB",
    handle: "@tberger",
    posted: "1 hour ago",
    onPost: "A honest look at edge rendering costs",
    body: "Respectfully, the cost table skips egress. At 4TB/month our edge bill was 3x what this math predicts, and that's the number that actually killed the migration for us. Would love a follow-up that includes it — the rest of the breakdown is the clearest I've read.",
    status: "pending",
    flags: [FLAGS.reported],
    spamScore: 0.11,
    accent: "violet",
  },
  {
    id: "m4",
    author: "Ari Lindqvist",
    initials: "AL",
    handle: "@arilind",
    posted: "3 hours ago",
    onPost: "A honest look at edge rendering costs",
    body: "Bookmarking this for the next architecture review. One correction: the cold-start figure in paragraph four is from the 2024 runtime — it's roughly 40% lower now.",
    status: "pending",
    flags: [FLAGS.keyword],
    spamScore: 0.08,
    accent: "sky",
  },
  {
    id: "m5",
    author: "Dana Whitfield",
    initials: "DW",
    handle: "@dwhitfield",
    posted: "Yesterday",
    onPost: "Why your LCP got worse after the redesign",
    body: "Ran your checklist on a 40-page marketing site this morning. Six of the eight items were already fine; the two that weren't accounted for almost all of the regression. Efficient read.",
    status: "approved",
    flags: [],
    spamScore: 0.01,
    accent: "emerald",
  },
  {
    id: "m6",
    author: "seo backlinks pro",
    initials: "SB",
    handle: "@backlinks_pro",
    posted: "Yesterday",
    onPost: "A honest look at edge rendering costs",
    body: "Nice article. We sell high DA 90+ dofollow backlinks, guaranteed page 1 in 30 days or money back. Contact us on the site in my name field.",
    status: "spam",
    flags: [FLAGS.links, FLAGS.duplicate],
    spamScore: 0.99,
    accent: "rose",
  },
  {
    id: "m7",
    author: "Marcus Oyelaran",
    initials: "MO",
    handle: "@moyelaran",
    posted: "2 days ago",
    onPost: "Why your LCP got worse after the redesign",
    body: "Deleted my own comment — I had the wrong post open and the point didn't apply here. Sorry for the noise.",
    status: "trash",
    flags: [],
    spamScore: 0.03,
    accent: "amber",
  },
];

const FILTERS: readonly { key: Status; label: string }[] = [
  { key: "pending", label: "Pending" },
  { key: "approved", label: "Approved" },
  { key: "spam", label: "Spam" },
  { key: "trash", label: "Trash" },
];

const AVATAR_RING: Record<Comment["accent"], string> = {
  indigo: "bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300",
  violet: "bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300",
  emerald: "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300",
  sky: "bg-sky-100 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300",
  rose: "bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300",
  amber: "bg-amber-100 text-amber-800 dark:bg-amber-500/15 dark:text-amber-300",
};

const FLAG_TONE: Record<Flag["tone"], string> = {
  amber:
    "border-amber-300/70 bg-amber-50 text-amber-800 dark:border-amber-400/25 dark:bg-amber-400/10 dark:text-amber-200",
  rose: "border-rose-300/70 bg-rose-50 text-rose-700 dark:border-rose-400/25 dark:bg-rose-400/10 dark:text-rose-200",
  sky: "border-sky-300/70 bg-sky-50 text-sky-700 dark:border-sky-400/25 dark:bg-sky-400/10 dark:text-sky-200",
};

const STATUS_BADGE: Record<Status, string> = {
  pending:
    "border-amber-300/70 bg-amber-50 text-amber-800 dark:border-amber-400/25 dark:bg-amber-400/10 dark:text-amber-200",
  approved:
    "border-emerald-300/70 bg-emerald-50 text-emerald-700 dark:border-emerald-400/25 dark:bg-emerald-400/10 dark:text-emerald-200",
  spam: "border-rose-300/70 bg-rose-50 text-rose-700 dark:border-rose-400/25 dark:bg-rose-400/10 dark:text-rose-200",
  trash:
    "border-zinc-300 bg-zinc-100 text-zinc-600 dark:border-zinc-600/50 dark:bg-zinc-700/30 dark:text-zinc-300",
};

const FOCUS_RING =
  "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-zinc-950";

function CheckIcon() {
  return (
    <svg viewBox="0 0 16 16" aria-hidden="true" className="h-3.5 w-3.5" fill="none">
      <path
        d="M3 8.5 6.2 11.7 13 4.9"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function ShieldIcon() {
  return (
    <svg viewBox="0 0 16 16" aria-hidden="true" className="h-3.5 w-3.5" fill="none">
      <path
        d="M8 1.8 2.9 3.6v4c0 3 2.1 5.6 5.1 6.6 3-1 5.1-3.6 5.1-6.6v-4L8 1.8Z"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinejoin="round"
      />
      <path d="M8 5.4v3.2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
      <circle cx="8" cy="10.9" r="0.85" fill="currentColor" />
    </svg>
  );
}

function TrashIcon() {
  return (
    <svg viewBox="0 0 16 16" aria-hidden="true" className="h-3.5 w-3.5" fill="none">
      <path
        d="M2.8 4.3h10.4M6.4 4.3V2.9h3.2v1.4M4.2 4.3l.6 8.2c0 .4.4.7.8.7h4.8c.4 0 .8-.3.8-.7l.6-8.2"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function RestoreIcon() {
  return (
    <svg viewBox="0 0 16 16" aria-hidden="true" className="h-3.5 w-3.5" fill="none">
      <path
        d="M3.1 6.6A5.2 5.2 0 1 1 2.9 9.6"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
      />
      <path
        d="M2.4 2.9v3.8h3.8"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function UndoIcon() {
  return (
    <svg viewBox="0 0 16 16" aria-hidden="true" className="h-3.5 w-3.5" fill="none">
      <path
        d="M5.6 3.4 2.4 6.6l3.2 3.2"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M2.4 6.6h6.3a4.3 4.3 0 0 1 0 8.6H6.1"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
      />
    </svg>
  );
}

type UndoState = { label: string; entries: { id: string; status: Status }[] } | null;

type ActionSpec = {
  key: string;
  label: string;
  next: Status;
  shortcut: string;
  icon: "check" | "shield" | "trash" | "restore";
  intent: "approve" | "spam" | "trash" | "restore";
};

function actionsFor(status: Status): ActionSpec[] {
  if (status === "pending") {
    return [
      { key: "approve", label: "Approve", next: "approved", shortcut: "A", icon: "check", intent: "approve" },
      { key: "spam", label: "Mark spam", next: "spam", shortcut: "S", icon: "shield", intent: "spam" },
      { key: "trash", label: "Trash", next: "trash", shortcut: "T", icon: "trash", intent: "trash" },
    ];
  }
  if (status === "approved") {
    return [
      { key: "unapprove", label: "Unapprove", next: "pending", shortcut: "R", icon: "restore", intent: "restore" },
      { key: "spam", label: "Mark spam", next: "spam", shortcut: "S", icon: "shield", intent: "spam" },
      { key: "trash", label: "Trash", next: "trash", shortcut: "T", icon: "trash", intent: "trash" },
    ];
  }
  if (status === "spam") {
    return [
      { key: "not-spam", label: "Not spam", next: "pending", shortcut: "R", icon: "restore", intent: "restore" },
      { key: "trash", label: "Trash", next: "trash", shortcut: "T", icon: "trash", intent: "trash" },
    ];
  }
  return [
    { key: "restore", label: "Restore", next: "pending", shortcut: "R", icon: "restore", intent: "restore" },
    { key: "spam", label: "Mark spam", next: "spam", shortcut: "S", icon: "shield", intent: "spam" },
  ];
}

const INTENT_CLASS: Record<ActionSpec["intent"], string> = {
  approve:
    "border-emerald-500/60 bg-emerald-600 text-white hover:bg-emerald-500 dark:border-emerald-400/40 dark:bg-emerald-500 dark:hover:bg-emerald-400 dark:text-emerald-950",
  spam: "border-rose-300 bg-white text-rose-700 hover:bg-rose-50 dark:border-rose-400/30 dark:bg-zinc-900 dark:text-rose-300 dark:hover:bg-rose-500/10",
  trash:
    "border-zinc-300 bg-white text-zinc-600 hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800",
  restore:
    "border-indigo-300 bg-white text-indigo-700 hover:bg-indigo-50 dark:border-indigo-400/30 dark:bg-zinc-900 dark:text-indigo-300 dark:hover:bg-indigo-500/10",
};

function ActionIcon({ name }: { name: ActionSpec["icon"] }) {
  if (name === "check") return <CheckIcon />;
  if (name === "shield") return <ShieldIcon />;
  if (name === "trash") return <TrashIcon />;
  return <RestoreIcon />;
}

export default function CommentModeration() {
  const uid = useId();
  const reduced = useReducedMotion();

  const [comments, setComments] = useState<Comment[]>(() => SEED.map((c) => ({ ...c })));
  const [filter, setFilter] = useState<Status>("pending");
  const [selected, setSelected] = useState<string[]>([]);
  const [undo, setUndo] = useState<UndoState>(null);
  const [announcement, setAnnouncement] = useState("");
  const [activeId, setActiveId] = useState<string | null>(null);

  const cardRefs = useRef<Record<string, HTMLDivElement | null>>({});
  const tabRefs = useRef<Record<string, HTMLButtonElement | null>>({});
  const pendingFocus = useRef<number | null>(null);
  const selectAllRef = useRef<HTMLInputElement | null>(null);

  const counts = useMemo(() => {
    const base: Record<Status, number> = { pending: 0, approved: 0, spam: 0, trash: 0 };
    for (const c of comments) base[c.status] += 1;
    return base;
  }, [comments]);

  const visible = useMemo(() => comments.filter((c) => c.status === filter), [comments, filter]);

  const visibleSelected = useMemo(
    () => visible.filter((c) => selected.includes(c.id)).map((c) => c.id),
    [visible, selected],
  );

  useEffect(() => {
    const el = selectAllRef.current;
    if (!el) return;
    el.indeterminate = visibleSelected.length > 0 && visibleSelected.length < visible.length;
  }, [visibleSelected.length, visible.length]);

  useEffect(() => {
    const idx = pendingFocus.current;
    if (idx === null) return;
    pendingFocus.current = null;
    if (visible.length === 0) return;
    const target = visible[Math.min(idx, visible.length - 1)];
    cardRefs.current[target.id]?.focus();
  }, [visible]);

  const applyStatus = useCallback(
    (ids: string[], next: Status, label: string, fromIndex?: number) => {
      if (ids.length === 0) return;
      const entries = comments
        .filter((c) => ids.includes(c.id))
        .map((c) => ({ id: c.id, status: c.status }));
      setComments((prev) => prev.map((c) => (ids.includes(c.id) ? { ...c, status: next } : c)));
      setUndo({ label, entries });
      setSelected((prev) => prev.filter((id) => !ids.includes(id)));
      setAnnouncement(`${label}. ${ids.length} comment${ids.length === 1 ? "" : "s"} moved to ${next}.`);
      if (typeof fromIndex === "number") pendingFocus.current = fromIndex;
    },
    [comments],
  );

  const runUndo = useCallback(() => {
    if (!undo) return;
    const map = new Map(undo.entries.map((e) => [e.id, e.status]));
    setComments((prev) => prev.map((c) => (map.has(c.id) ? { ...c, status: map.get(c.id) as Status } : c)));
    setAnnouncement(`Undone: ${undo.label}.`);
    setUndo(null);
  }, [undo]);

  const onTabKeyDown = useCallback((event: ReactKeyboardEvent<HTMLButtonElement>, index: number) => {
    if (event.key !== "ArrowRight" && event.key !== "ArrowLeft" && event.key !== "Home" && event.key !== "End")
      return;
    event.preventDefault();
    let nextIndex = index;
    if (event.key === "ArrowRight") nextIndex = (index + 1) % FILTERS.length;
    if (event.key === "ArrowLeft") nextIndex = (index - 1 + FILTERS.length) % FILTERS.length;
    if (event.key === "Home") nextIndex = 0;
    if (event.key === "End") nextIndex = FILTERS.length - 1;
    const nextKey = FILTERS[nextIndex].key;
    setFilter(nextKey);
    setSelected([]);
    tabRefs.current[nextKey]?.focus();
  }, []);

  const onCardKeyDown = useCallback(
    (event: ReactKeyboardEvent<HTMLDivElement>, comment: Comment, index: number) => {
      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
        event.preventDefault();
        const delta = event.key === "ArrowDown" ? 1 : -1;
        const nextIndex = Math.min(Math.max(index + delta, 0), visible.length - 1);
        cardRefs.current[visible[nextIndex].id]?.focus();
        return;
      }
      if (event.key === "u" || event.key === "U") {
        if (!undo) return;
        event.preventDefault();
        runUndo();
        return;
      }
      const spec = actionsFor(comment.status).find(
        (a) => a.shortcut.toLowerCase() === event.key.toLowerCase(),
      );
      if (!spec) return;
      event.preventDefault();
      applyStatus([comment.id], spec.next, `${spec.label} — ${comment.author}`, index);
    },
    [visible, undo, runUndo, applyStatus],
  );

  const toggleSelect = useCallback((id: string) => {
    setSelected((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
  }, []);

  const allSelected = visible.length > 0 && visibleSelected.length === visible.length;

  const rovingId = visible.some((c) => c.id === activeId) ? activeId : (visible[0]?.id ?? null);

  const listPanelId = `${uid}-panel`;

  return (
    <section
      className="relative w-full overflow-hidden bg-white px-5 py-20 text-zinc-900 sm:px-8 sm:py-24 dark:bg-zinc-950 dark:text-zinc-100"
      aria-labelledby={`${uid}-title`}
    >
      <style>{`
        @keyframes cmodq-drift {
          0% { transform: translate3d(-6%, 0, 0) scale(1); opacity: .55; }
          50% { transform: translate3d(6%, -4%, 0) scale(1.08); opacity: .8; }
          100% { transform: translate3d(-6%, 0, 0) scale(1); opacity: .55; }
        }
        @keyframes cmodq-blink {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: .35; transform: scale(.8); }
        }
        .cmodq-aurora { animation: cmodq-drift 18s ease-in-out infinite; }
        .cmodq-dot { animation: cmodq-blink 2.4s ease-in-out infinite; }
        @media (prefers-reduced-motion: reduce) {
          .cmodq-aurora, .cmodq-dot { animation: none !important; }
        }
      `}</style>

      <div
        aria-hidden="true"
        className="cmodq-aurora pointer-events-none absolute -top-40 left-1/2 h-80 w-[46rem] -translate-x-1/2 rounded-full bg-gradient-to-r from-indigo-300/40 via-violet-300/30 to-sky-300/40 blur-3xl dark:from-indigo-600/20 dark:via-violet-600/15 dark:to-sky-600/20"
      />

      <div className="relative mx-auto w-full max-w-4xl">
        <header className="mb-8">
          <p className="mb-3 inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white/70 px-3 py-1 text-xs font-medium text-zinc-600 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70 dark:text-zinc-400">
            <span className="cmodq-dot h-1.5 w-1.5 rounded-full bg-amber-500" />
            {counts.pending} awaiting review
          </p>
          <h2 id={`${uid}-title`} className="text-2xl font-semibold tracking-tight sm:text-3xl">
            Moderation queue
          </h2>
          <p className="mt-2 max-w-2xl text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
            Every comment posted in the last 48 hours, scored by the spam filter and held until someone
            decides. Actions apply instantly and can be undone.
          </p>
        </header>

        <div
          role="tablist"
          aria-label="Filter comments by status"
          className="flex flex-wrap gap-1.5 rounded-xl border border-zinc-200 bg-zinc-50 p-1.5 dark:border-zinc-800 dark:bg-zinc-900/60"
        >
          {FILTERS.map((f, i) => {
            const active = filter === f.key;
            return (
              <button
                key={f.key}
                ref={(el) => {
                  tabRefs.current[f.key] = el;
                }}
                type="button"
                role="tab"
                id={`${uid}-tab-${f.key}`}
                aria-selected={active}
                aria-controls={listPanelId}
                tabIndex={active ? 0 : -1}
                onClick={() => {
                  setFilter(f.key);
                  setSelected([]);
                }}
                onKeyDown={(e) => onTabKeyDown(e, i)}
                className={`${FOCUS_RING} relative inline-flex items-center gap-2 rounded-lg px-3.5 py-2 text-sm font-medium transition-colors ${
                  active
                    ? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200 dark:bg-zinc-800 dark:text-zinc-50 dark:ring-zinc-700"
                    : "text-zinc-600 hover:bg-white/70 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100"
                }`}
              >
                {f.label}
                <span
                  className={`rounded-full px-1.5 py-0.5 text-[11px] font-semibold tabular-nums ${
                    active
                      ? "bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300"
                      : "bg-zinc-200 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400"
                  }`}
                >
                  {counts[f.key]}
                </span>
              </button>
            );
          })}
        </div>

        <div className="mt-4 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-zinc-200 bg-white px-4 py-3 dark:border-zinc-800 dark:bg-zinc-900/40">
          <label className="inline-flex cursor-pointer items-center gap-2.5 text-sm text-zinc-700 dark:text-zinc-300">
            <input
              ref={selectAllRef}
              type="checkbox"
              checked={allSelected}
              disabled={visible.length === 0}
              onChange={() => setSelected(allSelected ? [] : visible.map((c) => c.id))}
              className={`${FOCUS_RING} h-4 w-4 cursor-pointer rounded border-zinc-300 accent-indigo-600 disabled:cursor-not-allowed disabled:opacity-40 dark:border-zinc-600 dark:accent-indigo-400`}
            />
            Select all in view
            {visibleSelected.length > 0 ? (
              <span className="font-medium text-indigo-600 dark:text-indigo-400">
                ({visibleSelected.length} selected)
              </span>
            ) : null}
          </label>

          <div className="flex flex-wrap items-center gap-2">
            {actionsFor(filter).map((spec) => {
              const disabled = visibleSelected.length === 0;
              return (
                <button
                  key={spec.key}
                  type="button"
                  disabled={disabled}
                  onClick={() =>
                    applyStatus(
                      visibleSelected,
                      spec.next,
                      `${spec.label} — ${visibleSelected.length} selected`,
                      0,
                    )
                  }
                  className={`${FOCUS_RING} inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-colors ${
                    disabled
                      ? "cursor-not-allowed border-zinc-200 bg-zinc-50 text-zinc-400 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-600"
                      : INTENT_CLASS[spec.intent]
                  }`}
                >
                  <ActionIcon name={spec.icon} />
                  {spec.label}
                </button>
              );
            })}
          </div>
        </div>

        <div
          role="tabpanel"
          id={listPanelId}
          aria-labelledby={`${uid}-tab-${filter}`}
          tabIndex={-1}
          className="mt-4"
        >
          {visible.length === 0 ? (
            <div className="rounded-2xl border border-dashed border-zinc-300 px-6 py-16 text-center dark:border-zinc-700">
              <p className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
                Nothing in {FILTERS.find((f) => f.key === filter)?.label.toLowerCase()}.
              </p>
              <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-500">
                {filter === "pending"
                  ? "The queue is clear. New comments land here within a minute of posting."
                  : "Move a comment here from another tab and it will show up."}
              </p>
            </div>
          ) : (
            <ul className="space-y-3">
              <AnimatePresence initial={false} mode="popLayout">
                {visible.map((c, index) => {
                  const isSelected = selected.includes(c.id);
                  const specs = actionsFor(c.status);
                  return (
                    <motion.li
                      key={c.id}
                      layout={reduced ? false : "position"}
                      initial={reduced ? false : { opacity: 0, y: 8 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={reduced ? { opacity: 0 } : { opacity: 0, x: -16, scale: 0.98 }}
                      transition={reduced ? { duration: 0 } : { type: "spring", stiffness: 420, damping: 34 }}
                    >
                      <div
                        ref={(el) => {
                          cardRefs.current[c.id] = el;
                        }}
                        tabIndex={c.id === rovingId ? 0 : -1}
                        onFocus={() => setActiveId(c.id)}
                        onKeyDown={(e) => onCardKeyDown(e, c, index)}
                        aria-label={`Comment by ${c.author}, ${c.status}. Press A to approve, S for spam, T to trash, R to restore.`}
                        className={`${FOCUS_RING} group rounded-2xl border bg-white p-4 transition-colors sm:p-5 dark:bg-zinc-900/50 ${
                          isSelected
                            ? "border-indigo-400 ring-1 ring-indigo-400/40 dark:border-indigo-400/60"
                            : "border-zinc-200 hover:border-zinc-300 dark:border-zinc-800 dark:hover:border-zinc-700"
                        }`}
                      >
                        <div className="flex items-start gap-3.5">
                          <input
                            type="checkbox"
                            checked={isSelected}
                            onChange={() => toggleSelect(c.id)}
                            aria-label={`Select comment by ${c.author}`}
                            className={`${FOCUS_RING} mt-2 h-4 w-4 shrink-0 cursor-pointer rounded border-zinc-300 accent-indigo-600 dark:border-zinc-600 dark:accent-indigo-400`}
                          />

                          <div
                            aria-hidden="true"
                            className={`grid h-10 w-10 shrink-0 place-items-center rounded-full text-xs font-semibold ${AVATAR_RING[c.accent]}`}
                          >
                            {c.initials}
                          </div>

                          <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-zinc-900 dark:text-zinc-50">
                                {c.author}
                              </span>
                              <span className="text-xs text-zinc-500 dark:text-zinc-500">{c.handle}</span>
                              <span aria-hidden="true" className="text-zinc-300 dark:text-zinc-700">
                                ·
                              </span>
                              <span className="text-xs text-zinc-500 dark:text-zinc-500">{c.posted}</span>
                              <span
                                className={`ml-auto rounded-full border px-2 py-0.5 text-[11px] font-medium capitalize ${STATUS_BADGE[c.status]}`}
                              >
                                {c.status}
                              </span>
                            </div>

                            <p className="mt-0.5 truncate text-xs text-zinc-500 dark:text-zinc-500">
                              on <span className="text-zinc-600 dark:text-zinc-400">{c.onPost}</span>
                            </p>

                            <p className="mt-2.5 text-sm leading-relaxed text-zinc-700 dark:text-zinc-300">
                              {c.body}
                            </p>

                            <div className="mt-3 flex flex-wrap items-center gap-2">
                              {c.flags.map((f) => (
                                <span
                                  key={f.key}
                                  className={`inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-[11px] font-medium ${FLAG_TONE[f.tone]}`}
                                >
                                  {f.label}
                                </span>
                              ))}
                              <span className="inline-flex items-center gap-1.5 text-[11px] font-medium text-zinc-500 dark:text-zinc-500">
                                Spam score
                                <span
                                  aria-hidden="true"
                                  className="h-1.5 w-16 overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800"
                                >
                                  <span
                                    className={`block h-full rounded-full ${
                                      c.spamScore > 0.6
                                        ? "bg-rose-500"
                                        : c.spamScore > 0.25
                                          ? "bg-amber-500"
                                          : "bg-emerald-500"
                                    }`}
                                    style={{ width: `${Math.round(c.spamScore * 100)}%` }}
                                  />
                                </span>
                                <span className="tabular-nums">{c.spamScore.toFixed(2)}</span>
                              </span>
                            </div>

                            <div className="mt-4 flex flex-wrap gap-2">
                              {specs.map((spec) => (
                                <button
                                  key={spec.key}
                                  type="button"
                                  onClick={() =>
                                    applyStatus([c.id], spec.next, `${spec.label} — ${c.author}`, index)
                                  }
                                  className={`${FOCUS_RING} inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors ${INTENT_CLASS[spec.intent]}`}
                                >
                                  <ActionIcon name={spec.icon} />
                                  {spec.label}
                                  <kbd className="ml-0.5 hidden rounded border border-current px-1 text-[10px] font-semibold opacity-50 sm:inline">
                                    {spec.shortcut}
                                  </kbd>
                                </button>
                              ))}
                            </div>
                          </div>
                        </div>
                      </div>
                    </motion.li>
                  );
                })}
              </AnimatePresence>
            </ul>
          )}
        </div>

        <p className="mt-6 flex flex-wrap items-center gap-x-3 gap-y-2 text-xs text-zinc-500 dark:text-zinc-500">
          <span className="font-medium text-zinc-600 dark:text-zinc-400">Keyboard:</span>
          <span>
            <kbd className="rounded border border-zinc-300 bg-zinc-50 px-1.5 py-0.5 font-sans dark:border-zinc-700 dark:bg-zinc-800">
              ↑
            </kbd>{" "}
            <kbd className="rounded border border-zinc-300 bg-zinc-50 px-1.5 py-0.5 font-sans dark:border-zinc-700 dark:bg-zinc-800">
              ↓
            </kbd>{" "}
            move
          </span>
          <span>
            <kbd className="rounded border border-zinc-300 bg-zinc-50 px-1.5 py-0.5 font-sans dark:border-zinc-700 dark:bg-zinc-800">
              A
            </kbd>{" "}
            approve
          </span>
          <span>
            <kbd className="rounded border border-zinc-300 bg-zinc-50 px-1.5 py-0.5 font-sans dark:border-zinc-700 dark:bg-zinc-800">
              S
            </kbd>{" "}
            spam
          </span>
          <span>
            <kbd className="rounded border border-zinc-300 bg-zinc-50 px-1.5 py-0.5 font-sans dark:border-zinc-700 dark:bg-zinc-800">
              T
            </kbd>{" "}
            trash
          </span>
          <span>
            <kbd className="rounded border border-zinc-300 bg-zinc-50 px-1.5 py-0.5 font-sans dark:border-zinc-700 dark:bg-zinc-800">
              R
            </kbd>{" "}
            restore
          </span>
          <span>
            <kbd className="rounded border border-zinc-300 bg-zinc-50 px-1.5 py-0.5 font-sans dark:border-zinc-700 dark:bg-zinc-800">
              U
            </kbd>{" "}
            undo
          </span>
        </p>

        <p aria-live="polite" className="sr-only">
          {announcement}
        </p>
      </div>

      <div className="pointer-events-none fixed inset-x-0 bottom-6 z-20 flex justify-center px-4">
        <AnimatePresence>
          {undo ? (
            <motion.div
              key="undo"
              initial={reduced ? { opacity: 0 } : { opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              exit={reduced ? { opacity: 0 } : { opacity: 0, y: 16 }}
              transition={reduced ? { duration: 0 } : { type: "spring", stiffness: 460, damping: 36 }}
              className="pointer-events-auto flex max-w-md items-center gap-3 rounded-xl border border-zinc-800 bg-zinc-900 px-4 py-2.5 text-sm text-zinc-100 shadow-lg dark:border-zinc-700"
            >
              <span className="truncate">{undo.label}</span>
              <button
                type="button"
                onClick={runUndo}
                className="inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-zinc-800 px-2.5 py-1 text-xs font-semibold text-indigo-300 outline-none transition-colors hover:bg-zinc-700 focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-900"
              >
                <UndoIcon />
                Undo
              </button>
              <button
                type="button"
                onClick={() => setUndo(null)}
                aria-label="Dismiss undo notice"
                className="shrink-0 rounded-md p-1 text-zinc-400 outline-none transition-colors hover:text-zinc-100 focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-900"
              >
                <svg viewBox="0 0 14 14" aria-hidden="true" className="h-3.5 w-3.5" fill="none">
                  <path
                    d="M3.5 3.5 10.5 10.5M10.5 3.5 3.5 10.5"
                    stroke="currentColor"
                    strokeWidth="1.6"
                    strokeLinecap="round"
                  />
                </svg>
              </button>
            </motion.div>
          ) : null}
        </AnimatePresence>
      </div>
    </section>
  );
}