import { memo, useEffect, useRef, useState, type ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { useNavigationActions } from "./navigationContext";
import {
  Bookmark,
  Check,
  CheckCheck,
  Clock,
  Play,
  Radio,
  // Aliased: `Video` is this app's own domain type (lib/api), and it wins the name.
  Video as VideoIcon,
} from "lucide-react";
import Avatar from "./ui/Avatar";
import AddToPlaylist from "./AddToPlaylist";
import { navItemAttrs } from "../lib/listNav";
import clsx from "clsx";
import type { Video, VideoStatus } from "../lib/api";
import { FEED_VIEW_SPEC, type FeedView } from "../lib/feedView";
import { formatDate, formatDuration, formatNumber, formatViews, relativeTime } from "../lib/format";
import { isPlainLeftClick } from "../lib/nav";
import { endsTextSelection } from "../lib/textSelection";
import ChannelNameLink from "./ChannelNameLink";
import { IconButton } from "./ui/IconButton";
import { SURFACE } from "./ui/surfaces";
import { MoreButton } from "./ui/MoreButton";
import { HOVER_REVEAL, HOVER_YIELD } from "./ui/reveal";
import {
  MEDIA_BADGE,
  MEDIA_BAR,
  MEDIA_HOVER_LAYER,
  MEDIA_IMG,
  MEDIA_PICTURE,
  mediaTitleClass,
} from "./ui/mediaCardStyles";
import { MediaCard, MediaProgress } from "./ui/MediaCard";
import { MediaResumeButtons } from "./MediaResumeButtons";
import { RelativeTime } from "./ui/RelativeTime";

/** The "…" that opens the video's action list, and whether its menu is the open one. */
type More = { props: Record<string, unknown>; open: boolean };

// E28 C1: the card keeps its state and the everyday toggles — watched, save, add to playlist — and
// a "…" for everything else (download, details, copy, hide, reset, pin), which is the list's ONE
// menu (useVideoActions). On a mouse the row shows on hover or keyboard focus; on touch the toggles
// are gone (the "…" and the long-press are the way in) and only the "…" stays.
/** The card's hover row (watched, save, add, "…"); Home's hero docks the same row on its picture. */
export function VideoHoverActions({
  video,
  onState,
  onToggleSave,
  more,
  media = false,
  dense = false,
}: {
  video: Video;
  onState: (id: string, status: VideoStatus) => void;
  onToggleSave: (id: string, saved: boolean) => void;
  more?: More;
  /** On the thumbnail: the round, dark `media` face (A2). */
  media?: boolean;
  /** Tighter gap for the small card, whose column bottoms out at 180px. */
  dense?: boolean;
}) {
  const { t } = useTranslation();
  const toggleWatched = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    onState(video.id, video.status === "watched" ? "new" : "watched");
  };
  const toggleSave = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    onToggleSave(video.id, !video.saved);
  };
  const variant = media ? "media" : "ghost";
  // Four 28px buttons: 4 × 28 + 3 × 4 = 124, which fits the small card's 180px thumbnail; the
  // one-line row floats three of them (no "…": its own stays put) over its date on hover.
  return (
    <div className={clsx("flex", dense ? "gap-0.5" : "gap-1")}>
      <IconButton
        variant={variant}
        onClick={toggleWatched}
        pressed={video.status === "watched"}
        label={video.status === "watched" ? t("card.watchedUnmark") : t("card.markWatched")}
        className="reveal-hover"
      >
        {video.status === "watched" ? <CheckCheck /> : <Check />}
      </IconButton>
      <IconButton
        variant={variant}
        onClick={toggleSave}
        pressed={!!video.saved}
        label={video.saved ? t("card.savedRemove") : t("card.saveForLater")}
        className="reveal-hover"
      >
        <Bookmark className={clsx(video.saved && "fill-current")} />
      </IconButton>
      <span className="reveal-hover flex">
        <AddToPlaylist videoId={video.id} variant={variant} />
      </span>
      {more && (
        <MoreButton
          variant={variant}
          label={t("card.menu.more")}
          expanded={more.open}
          menuProps={more.props}
        />
      )}
    </div>
  );
}

// Plain left-click opens the in-app player (the experiment); Ctrl/Cmd/middle-click
// keep the native "open youtube.com in a new tab" behavior via the underlying href.
function openInApp(
  e: React.MouseEvent,
  video: Video,
  onOpen?: (v: Video, startAt?: number | null) => void,
): void {
  if (!onOpen || !isPlainLeftClick(e)) return;
  e.preventDefault();
  // The click that ends selecting the title's words (to copy them) neither plays nor follows the
  // link (docs/DESIGN.md "Text stays selectable").
  if (endsTextSelection(e)) return;
  onOpen(video);
}

// A non-zero saved position on an unfinished video = "in progress": offer Continue / Restart
// instead of a plain Play. Note this is TRUE even with no known duration — in which case there is
// no percentage to draw, so the two are deliberately separate predicates.
function isInProgress(video: Video): boolean {
  return video.position_seconds > 0 && video.status !== "watched";
}
/** Resume position as 0-100, or 0 when there's nothing to draw. Shared by Thumb and the
 * thumbnail-less row, which has no image to draw the bar on but still owes you the state. */
function resumePct(video: Video): number {
  return isInProgress(video) && video.duration_seconds
    ? Math.min(99, Math.max(2, (video.position_seconds / video.duration_seconds) * 100))
    : 0;
}

// Thumb overlays duration / live state / saved ON the image. The one-line row has no image, so it
// renders the same FACTS as columns of its own — deliberately not shared with Thumb's badges:
// floating chips over artwork and a table cell are different presentations, and forcing one
// component to do both would be a variant-flag knot for no reuse.
// The cost is real though: the rules below (duration, live/upcoming, was_live, saved) are ALSO in
// Thumb, so a change to them must land in both. If they ever do change, share the decision — a
// videoBadges(video) -> Badge[] — and keep only the markup separate.
//
// A fixed GRID, not a flex row: each datum has to hold its own x across rows or the column stops
// reading as a column. The flex row this replaces let a "36:36" and a "3:31:09" push the marker
// beside them to different places, and pulled it left again whenever the duration was absent
// (live/upcoming) — visible as a ragged edge down the page.
function RowMetaCells({ video }: { video: Video }) {
  const { t } = useTranslation();
  // Icons, not the labelled chips the thumbnail uses: at a glance this is the least important thing
  // in the row, so it gets about a letter's worth of width. Icons rather than a coloured dot
  // because the three states must stay apart by SHAPE — in the youtube scheme --accent is red, so a
  // "live" dot and a "stream" dot would be the same dot.
  const status =
    video.live_status === "live"
      ? // the broadcast red, not --danger: "live" is not an error
        { Icon: Radio, cls: "text-live", label: t("card.live") }
      : video.live_status === "upcoming"
        ? { Icon: Clock, cls: "", label: t("card.upcoming") }
        : video.live_status === "was_live"
          ? { Icon: VideoIcon, cls: "text-accent", label: t("card.stream") }
          : null;
  const StatusIcon = status?.Icon;
  // 4rem + 1rem + 1rem + two 4px gaps = 104px, which the one-line row's width tally counts on —
  // widen a slot and the title column silently pays for it. rem, not px, so the whole cell tracks
  // the text-size setting the same way its contents do.
  return (
    <div className="shrink-0 grid grid-cols-[4rem_1rem_1rem] gap-1 items-center text-sm text-muted">
      {/* Right-aligned: a duration is a number, so the digits line up on their own edge (30px for
          "1:52" up to 59px for an 11-hour stream — 4rem holds the longest). */}
      <span className="text-right tabular-nums">
        {video.duration_seconds != null ? formatDuration(video.duration_seconds) : ""}
      </span>
      {/* role="img" + aria-label names each marker ONCE and reliably; `title` alone wouldn't (a
          bare span has no role, and screen readers don't dependably surface title on one), while a
          title plus an sr-only twin gets it announced twice. These are indicators, NOT the controls
          in VideoHoverActions — the label must not tell anyone to click something that doesn't respond. */}
      <span>
        {StatusIcon && (
          <span role="img" aria-label={status.label} title={status.label}>
            <StatusIcon className={clsx("w-3.5 h-3.5", status.cls)} />
          </span>
        )}
      </span>
      <span>
        {video.saved && (
          <span role="img" aria-label={t("card.savedMark")} title={t("card.savedMark")}>
            <Bookmark className="w-3.5 h-3.5 text-accent fill-current" />
          </span>
        )}
      </span>
    </div>
  );
}

function Thumb({
  video,
  className,
  onOpen,
  small = false,
  bar,
}: {
  video: Video;
  className?: string;
  onOpen?: (v: Video, startAt?: number | null) => void;
  /** A row/tile thumbnail (~160-176px): the hover controls go icon-only, since the labelled
   * Continue / Restart buttons are sized for the card's full-width image and get clipped here. */
  small?: boolean;
  /** The card's hover action row, docked on the picture's bottom-right (the C1 reference). A
   *  SIBLING of the link, not inside it: a click in the playlists panel it opens would otherwise
   *  bubble (through the portal, along the React tree) into the link and start playback. */
  bar?: ReactNode;
}) {
  const { t } = useTranslation();
  const inProgress = isInProgress(video);
  const pct = resumePct(video);

  // Open in the in-app player at an explicit position (null = resume from saved).
  const open = (startAt: number | null) => (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    onOpen?.(video, startAt);
  };

  return (
    // min-h-0: the caller's aspect box must hold its ratio before the image arrives — an aspect-ratio
    // box otherwise grows to its content, and an off-screen, not-yet-loaded thumbnail measured 338px
    // tall, which stretched a whole Home shelf to it (ui/mediaCardStyles `mediaPictureBox`).
    <div className={clsx("relative min-h-0", className)}>
      {/* Named by the title: its only text is the duration badge, so a screen reader heard the first
        Tab stop of every card as "44:10" (E28 S3d4). */}
      <a
        href={video.watch_url}
        target="_blank"
        rel="noreferrer"
        aria-label={video.title ?? undefined}
        onClick={(e) => openInApp(e, video, onOpen)}
        className={MEDIA_PICTURE}
      >
        {video.thumbnail_url ? (
          <img
            src={video.thumbnail_url}
            alt=""
            loading="lazy"
            decoding="async"
            width={1280}
            height={720}
            className={MEDIA_IMG}
          />
        ) : (
          <div className="w-full h-full" />
        )}
        {video.duration_seconds != null ? (
          <span
            className={clsx(
              MEDIA_BADGE,
              "bottom-1.5 right-1.5",
              // The hover row takes this corner; the duration steps aside while it shows.
              bar && HOVER_YIELD,
            )}
          >
            {formatDuration(video.duration_seconds)}
          </span>
        ) : video.live_status === "live" || video.live_status === "upcoming" ? (
          <span
            className={`absolute bottom-1.5 right-1.5 text-3xs font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded ${
              video.live_status === "live" ? "bg-live text-live-fg" : "bg-black/80 text-white"
            }`}
          >
            {t(`card.${video.live_status}`)}
          </span>
        ) : null}
        {video.live_status === "was_live" && (
          <span className="absolute top-1.5 left-1.5 bg-accent text-accent-fg text-3xs font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded-sm">
            {t("card.stream")}
          </span>
        )}
        {video.saved && (
          <span className="absolute top-1.5 right-1.5 bg-accent text-accent-fg rounded-full p-1">
            <Bookmark className="w-3.5 h-3.5" />
          </span>
        )}
        {/* Hover overlay: Play everywhere; Continue + Restart once the video is in progress. Mouse-only:
          reveal on hover AND on keyboard focus-within (else a Tab-focused button is invisible), and
          `reveal-hover` drops it entirely on touch — the card tap already plays/resumes there, so a
          permanent dark scrim over every mobile thumbnail (and an invisible tap target) is not wanted. */}
        {onOpen && (
          <div className={MEDIA_HOVER_LAYER}>
            {inProgress ? (
              <MediaResumeButtons small={small} onContinue={open(null)} onRestart={open(0)} />
            ) : (
              <IconButton
                variant="media"
                size={small ? "md" : "lg"}
                onClick={open(null)}
                label={t("card.play")}
              >
                <Play className="translate-x-px fill-current" />
              </IconButton>
            )}
          </div>
        )}
        {/* Resume progress bar (sits at the very bottom, under the duration badge). */}
        <MediaProgress pct={pct} />
      </a>
      {bar && <div className={MEDIA_BAR}>{bar}</div>}
    </div>
  );
}

// The one-line row's column widths at the DEFAULT text size, mirroring the Tailwind classes the
// boxes actually use. They have to be mirrored by hand — Tailwind can't take a runtime value, and
// the classes have to stay, because they're rem: Settings' text-size slider drives the root font
// (`html { font-size: calc(16px * var(--font-scale)) }`, 0.9–1.3), so the boxes must grow with
// their contents. Inline pixels froze them and a channel name at 130% wanted 152px in a 128px box.
// Keep this table and the classes in step; each number is measured against the worst case in the
// LIBRARY and in BOTH languages — see the row's own comment for where each comes from.
const ROW_COL = {
  more: 28, //    the "…" at the row's end (size-7); the quick actions float over the date on hover
  channel: 128, // w-32
  meta: 104, //   RowMetaCells' own grid: 4rem + 1rem + 1rem + two 4px gaps
  views: 64, //   w-16
  published: 192, // w-48
} as const;
const ROW_GAP = 12; // gap-3
const ROW_PAD = 26; // px-3 both sides, plus a rounding allowance
const ROW_TITLE_MIN = 120; // not a column: the floor below which a title isn't worth showing

// What the row must measure before each column earns its place — cumulative, so each appears only
// once everything to its left AND a readable title already fit. Calibrated at the default text
// size; at 130% the columns grow ~30% while these don't, so they read slightly eager — the title
// gets tighter there, but it can't vanish, since the last column standing down frees ~200px.
const ROW_BASE = ROW_PAD + ROW_TITLE_MIN + ROW_GAP + ROW_COL.more;
const ROW_FITS = {
  channel: ROW_BASE + ROW_GAP + ROW_COL.channel,
  meta: ROW_BASE + ROW_GAP + ROW_COL.channel + ROW_GAP + ROW_COL.meta,
  views: ROW_BASE + ROW_GAP + ROW_COL.channel + ROW_GAP + ROW_COL.meta + ROW_GAP + ROW_COL.views,
  published:
    ROW_BASE +
    ROW_GAP +
    ROW_COL.channel +
    ROW_GAP +
    ROW_COL.meta +
    ROW_GAP +
    ROW_COL.views +
    ROW_GAP +
    ROW_COL.published,
};

function VideoCard({
  video,
  view,
  width,
  onState,
  onToggleSave,
  onOpen,
  menuProps,
  menuButtonProps,
  menuOpen = false,
  navIndex,
  shelf = false,
}: {
  video: Video;
  view: FeedView;
  /** Measured width of this card/row, from VirtualFeed. 0 until the first measure. */
  width: number;
  onState: (id: string, status: VideoStatus) => void;
  onToggleSave: (id: string, saved: boolean) => void;
  onOpen?: (v: Video, startAt?: number | null) => void;
  /** Right-click / long-press props for the LIST's one context menu (E28 C1: the video's actions).
   *  A FUNCTION, not the already-built props object: `useContextMenu.triggerProps` is stable across
   *  renders while its return value is a fresh object every call, and a fresh object prop would
   *  blow past this component's memo for every card in the virtualized feed on every parent
   *  render. The card calls it with the video it already has. */
  menuProps?: (v: Video) => Record<string, unknown>;
  /** The same menu's "…" button props (`useContextMenu.buttonProps`) — a function, for the same memo
   *  reason. Omitted, the card has no "…" (the menu is still a right-click away). */
  menuButtonProps?: (v: Video) => Record<string, unknown>;
  /** This card's menu is the open one (the "…" button's `aria-expanded`). */
  menuOpen?: boolean;
  /** Its position in a keyboard-navigable list (`lib/listNav`) — omit outside one (Home's rails). */
  navIndex?: number;
  /** On a shelf (a horizontal strip): a one-line title over the channel alone (ui/mediaCardStyles). */
  shelf?: boolean;
}) {
  const { t, i18n } = useTranslation();
  const { openChannel } = useNavigationActions();
  const spec = FEED_VIEW_SPEC[view];
  const watched = video.status === "watched";
  // The thumbnail-less row drops Thumb, and with it the duration / live state / saved marker that
  // Thumb overlays on the image. Those are metadata, not decoration, so fold them into the meta
  // line here rather than let the mode silently lose them.
  const noThumb = !spec.thumb;
  // Each datum on its own, so the one-line row can give each a column of its own while the stacked
  // layouts still run them together as one sentence. The count comes in two shapes from one span —
  // one span so the exact-count tooltip covers all of whatever is rendered: prose needs the word
  // ("1.5K views · 2 min ago"), the row's column doesn't, because a table doesn't repeat its unit
  // on every line and the tooltip carries the figure regardless.
  const viewsCell = (withWord: boolean) =>
    video.view_count != null && (
      <span title={`${formatNumber(video.view_count)} ${t("card.views")}`}>
        {formatViews(video.view_count)}
        {withWord && ` ${t("card.views")}`}
      </span>
    );
  const published = (
    <>
      {relativeTime(video.published_at)}
      {video.published_at && (
        <>
          {" · "}
          {formatDate(video.published_at, i18n.language)}
        </>
      )}
    </>
  );
  // Show the full text in a native tooltip only when it's actually cut off — vertically where the
  // title clamps to 2 lines, horizontally where a fixed column truncates it. Shared by the title
  // and the channel name: both truncate in some views and fit in others, and a tooltip that just
  // repeats what's already legible is noise.
  const titleRef = useRef<HTMLAnchorElement>(null);
  const channelRef = useRef<HTMLAnchorElement>(null);
  const [titleClamped, setTitleClamped] = useState(false);
  const [channelClamped, setChannelClamped] = useState(false);
  useEffect(() => {
    const cut = (el: HTMLElement) =>
      el.scrollHeight > el.clientHeight + 1 || el.scrollWidth > el.clientWidth + 1;
    const els: [HTMLElement | null, (v: boolean) => void][] = [
      [titleRef.current, setTitleClamped],
      [channelRef.current, setChannelClamped],
    ];
    const check = () => els.forEach(([el, set]) => el && set(cut(el)));
    check();
    const ro = new ResizeObserver(check);
    els.forEach(([el]) => el && ro.observe(el));
    return () => ro.disconnect();
    // `view` matters as much as the text: switching views returns a different branch, so React can
    // remount these nodes — without it the observer would be left watching detached ones.
  }, [video.title, video.channel_title, view]);
  const title = (
    <a
      ref={titleRef}
      href={video.watch_url}
      target="_blank"
      rel="noreferrer"
      onClick={(e) => openInApp(e, video, onOpen)}
      // A link is dragged, not selected: Chrome starts no selection on one even with the drag off,
      // until it is also `user-select: text` (select-text below) — measured in the S3e1 UAT.
      draggable={false}
      // Enter on a keyboard-selected card clicks THIS link (lib/listNav), so it opens exactly like a
      // click: the in-app player, resuming where the reader left off.
      data-nav-open=""
      title={titleClamped ? (video.title ?? undefined) : undefined}
      className={clsx(
        // min-h-6: a one-line title is still a 24 target (B1).
        "min-h-6 select-text hover:text-accent",
        noThumb ? "block truncate font-medium leading-snug" : mediaTitleClass(!!spec.dense, shelf),
      )}
    >
      {video.title}
    </a>
  );
  // A real link, like the title above it: a <button> here ignored middle-click and Ctrl/Cmd-click,
  // so the same card honoured the browser's gestures on its title and silently dropped them on its
  // channel name.
  const channelLink = (
    <ChannelNameLink
      ref={channelRef}
      data-testid="video-card-channel"
      channelId={video.channel_id}
      title={video.channel_title}
      onOpenInApp={() =>
        openChannel(video.channel_id, video.channel_title ?? t("card.thisChannel"))
      }
      stopPropagation
      tooltip={channelClamped ? (video.channel_title ?? undefined) : undefined}
      // leading-6: the one-line name is a 24 target (B1), not its 20px line of text.
      className="text-sm leading-6 text-muted truncate block w-fit max-w-full text-left hover:text-fg"
    />
  );
  const more = menuButtonProps && { props: menuButtonProps(video), open: menuOpen };
  // The rows' action block: shown on hover / focus on a mouse (`.reveal`), always on touch — where
  // the toggles inside it are gone and only the "…" is left.
  const actions = (
    <div className="reveal">
      <VideoHoverActions
        video={video}
        onState={onState}
        onToggleSave={onToggleSave}
        more={more}
        dense={spec.dense}
      />
    </div>
  );
  // A permanent container, not a hover-only fill. Rows used to be fully transparent at rest and
  // paint an opaque bg-card on hover — so running the pointer down the list kept covering and
  // re-revealing the ambient backdrop behind them, which reads as the background flickering. The
  // cards never did this because glass-card always paints. No hover lift here: a 900px-wide row
  // jumping as the pointer crosses it is a lot more restless than a card doing it.
  const rowShell = `cv-row group ${SURFACE.card} glass-hover relative transition`;

  if (spec.family === "row") {
    // A table without being one. Every column is a FIXED width, which is what makes the same datum
    // land on the same vertical line in every row. A grid can't align ACROSS rows here — VirtualFeed
    // renders each as its own subtree, so there's no shared parent to be the grid — but a grid is
    // still right WITHIN a cell (see RowMetaCells): fixed slots, so they line up across rows too.
    // Widths are measured, not chosen by eye — against the worst case in the LIBRARY and in BOTH
    // languages, since both have caught me out here:
    //   actions 188 (6 x 28 + 5 x 4)  ·  meta cells 104 (see RowMetaCells)  ·  views 48 (the bare
    //   "101.7K"; language-proof now the word is gone — with it, Hungarian's "megtekintés" needed
    //   139)  ·  published 183 ("11 months ago · Feb 28, 2026"; HU is shorter)  ·  channel 128,
    //   which is a deliberate cut rather than a fit: names run to 342px, the median is 87, and 12
    //   of 102 truncate here vs 5 at 160 — worth 32px to the title, since a clipped channel name
    //   still reads while a clipped view count loses the number.
    // Three ways this went wrong before: sizing off a PAGE of data (the badges came from 60 videos
    // whose longest was 2:00:58, then wrapped on the 11-hour one); measuring with a hand-built probe
    // instead of the real element (it read "101.7K megtekintés" as 122px where the live cell renders
    // 139); and checking that the COLUMNS aligned without checking the data inside them (the meta
    // cell was a flex row, so its contents slid about — see RowMetaCells).
    // The title takes what's left, which is constant per container width — so it aligns too.
    if (noThumb) {
      const pct = resumePct(video);
      const fits = (needs: number) => width === 0 || width >= needs;
      return (
        <div
          data-testid="video-card"
          data-video-id={video.id}
          {...menuProps?.(video)}
          {...(navIndex !== undefined && navItemAttrs(navIndex))}
          className={clsx(rowShell, "flex items-center gap-3 px-3 py-2", watched && "opacity-55")}
        >
          {/* The title leads (E28 S3h, the owner's pick B, 2026-09-26): the actions used to lead in a
              128px column that sat EMPTY at rest, a hole at the start of every row. Now the row's
              end holds a faint "…" (always there: the menu's door on every device), and on hover or
              keyboard focus the quick toggles float in beside it OVER the date, which steps aside —
              the Gmail row. On touch the toggles are gone (reveal-hover) and the "…" stays.
              Everything but the title is shrink-0, so the title is the only thing that can give —
              which means once the fixed columns outgrow the row, it gives ALL of it and vanishes.
              Columns drop from the right as the row narrows, least important first: a title with no
              date beats a date with no title. `width` is the ROW's own, so this holds whatever the
              rail and the filter panel are doing. Until the first measure lands (width 0) show
              everything: the row is off-screen for that frame anyway, and guessing narrow would
              flash. */}
          <div className="min-w-0 flex-1">{title}</div>
          {fits(ROW_FITS.channel) && <div className="shrink-0 w-32">{channelLink}</div>}
          {fits(ROW_FITS.meta) && (
            <div className={clsx(!fits(ROW_FITS.views) && HOVER_YIELD)}>
              <RowMetaCells video={video} />
            </div>
          )}
          {/* Right-aligned like the duration: it's a number, so the digits share an edge. 64px
              holds the widest bare form ("101.7K" at 48) in either language — dropping the word
              took this from 144 and handed the difference to the title. */}
          {fits(ROW_FITS.views) && (
            <div
              className={clsx(
                "shrink-0 w-16 text-sm text-muted text-right tabular-nums truncate",
                !fits(ROW_FITS.published) && HOVER_YIELD,
              )}
            >
              {viewsCell(false)}
            </div>
          )}
          {fits(ROW_FITS.published) && (
            <div className={clsx("shrink-0 w-48 text-sm text-muted truncate", HOVER_YIELD)}>
              {published}
            </div>
          )}
          <div className="relative shrink-0">
            <div
              className={clsx(HOVER_REVEAL, "absolute inset-y-0 right-full mr-1 flex items-center")}
            >
              <VideoHoverActions video={video} onState={onState} onToggleSave={onToggleSave} />
            </div>
            {more && (
              <MoreButton label={t("card.menu.more")} expanded={more.open} menuProps={more.props} />
            )}
          </div>
          {/* Thumb draws this over the image; with no image it goes on the row itself. */}
          {pct > 0 && (
            <div className="absolute bottom-0 left-2 right-2 h-1 rounded-full bg-black/40">
              <div className="h-full rounded-full bg-accent" style={{ width: `${pct}%` }} />
            </div>
          )}
        </div>
      );
    }
  }

  // Everything below is a STACKED layout — the card and the thumbnailed row. Only they run the
  // data together as one sentence; the one-line row above gives each datum its own column and has
  // already returned, so building this for it would be waste dressed up as shared code.
  const views = viewsCell(true);
  const textBlock = (
    <>
      {title}
      <div className="mt-0.5">{channelLink}</div>
      <div className="text-xs text-muted mt-0.5">
        {views}
        {views && " · "}
        {published}
      </div>
    </>
  );

  if (spec.family === "row") {
    return (
      <div
        data-testid="video-card"
        data-video-id={video.id}
        {...menuProps?.(video)}
        {...(navIndex !== undefined && navItemAttrs(navIndex))}
        className={clsx(rowShell, "flex gap-3 p-2", watched && "opacity-55")}
      >
        <Thumb
          video={video}
          className={clsx("aspect-video shrink-0", spec.actionsBelow ? "w-40" : "w-44")}
          onOpen={onOpen}
          small
        />
        <div className="min-w-0 flex-1 flex flex-col">
          {textBlock}
          {/* Tiles put the actions under the meta, in vertical space the thumbnail already
              reserves — which frees the ~168px the docked-right block used, so the block still
              works in a narrow column. mt-auto pins them to the tile's bottom edge (the flex row
              already stretches this column to full height), so they land in the same place
              whether the title above them ran to one line or three. */}
          {spec.actionsBelow && <div className="mt-auto pt-1">{actions}</div>}
        </div>
        {!spec.actionsBelow && actions}
      </div>
    );
  }

  // The card's action row sits on its picture (the C1 reference: shown on hover, never taking a line
  // of its own), and on touch its "…" sits beside the title as a 44px target. The frame, the pinned
  // meta line and the picture's pieces are the one media card's (ui/MediaCard), shared with Plex.
  // NOTE: do NOT add h-full here. A percentage height against the grid's content-derived height is
  // circular, and VirtualFeed measures each row with a ResizeObserver — the two together oscillate
  // by a pixel or two forever, which shows up as the whole page juddering. The grid stretches the
  // card to its row on its own, which is what the pinned meta line needs.
  return (
    <MediaCard
      rootProps={{
        "data-testid": "video-card",
        "data-video-id": video.id,
        ...menuProps?.(video),
        ...(navIndex !== undefined && navItemAttrs(navIndex)),
      }}
      className="cv-card"
      dense={spec.dense}
      dim={watched}
      // The small card's image is in the SAME size class as a row's (its column bottoms out at
      // 180px), so it needs the icon-only controls just as much — the labelled pair is 194px wide
      // and would spill straight out of it.
      picture={
        <Thumb
          video={video}
          className="aspect-video"
          onOpen={onOpen}
          small={spec.dense}
          bar={
            <VideoHoverActions
              video={video}
              onState={onState}
              onToggleSave={onToggleSave}
              more={more}
              media
            />
          }
        />
      }
      // The small card drops the channel avatar: at its ~180px column the 36px avatar plus the gap
      // would leave the title barely half the width. The channel name is still in the meta line.
      leading={
        !spec.dense && (
          <Avatar
            src={video.channel_thumbnail}
            fallback={video.channel_title ?? ""}
            className="w-9 h-9 rounded-full shrink-0 mt-0.5"
          />
        )
      }
      title={title}
      meta={
        shelf ? (
          channelLink
        ) : (
          <>
            {channelLink}
            <div className="text-xs text-muted mt-0.5">
              {views}
              {views && " · "}
              {/* The small card keeps the relative time and moves the date into its tooltip: at a
                shelf's width the full pair wrapped to a third meta line, and the tallest card sets
                the whole shelf's height (every card fills its slot). */}
              {spec.dense ? <RelativeTime at={video.published_at} /> : published}
            </div>
          </>
        )
      }
      more={more || undefined}
      moreLabel={t("card.menu.more")}
    />
  );
}

// Memoized so appending a feed page only renders the new cards, not every existing
// one (the callbacks from Feed are stable; non-overridden video objects keep their
// identity across renders).
export default memo(VideoCard);