siftlode/frontend/src/components/VideoInfoCard.tsx

import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useQuery } from "@tanstack/react-query";
import { Info } from "lucide-react";
import { qk } from "../lib/queryKeys";
import { api, type Video } from "../lib/api";
import { formatDate, formatDuration, formatViews } from "../lib/format";
import { linkify } from "../lib/linkify";
import Avatar from "./Avatar";
import { PopoverSurface, useAnchoredPopover } from "./AnchoredPopover";

// The feed card's "more than the card face" hover infobox (E8·S3, decision D3): full (un-clamped)
// title, channel, views·duration·date, a description snippet, and the channel's tags. It hangs off a
// small ⓘ button — a thumbnail-corner overlay in the four thumbnailed views, an inline button beside
// the actions in the one-line row (see the caller). It reveals only with the other hover controls on a
// mouse and is dropped entirely on touch (`.reveal-hover`), where a tap already plays/resumes and a
// hover card would only be an invisible trap. Hover mode also opens it on keyboard focus, so it stays
// reachable by Tab.
//
// The card face already carries title/channel/date/duration/views, so the box's real added value is
// the FULL title (the card clamps to 2 lines) plus the description + tags, which aren't in the feed
// list payload. Both are fetched ON DEMAND on open (like AboutCell): the description via
// `videoDetail`, the tags by resolving the channel's `tag_ids` (from `channelDetail`, shared with the
// channel page's cache) against the tag list. Until they land the header still shows from the Video
// we already have, so the box is never empty.
//
// The caller owns the trigger's placement + reveal via `className`: a thumbnail-corner overlay for the
// four thumbnailed views, an inline button beside the actions for the one-line row. The action ROW
// itself is budgeted to exactly six buttons (a seventh wraps in every view — see VideoCard's ROW_COL),
// so the trigger deliberately lives OUTSIDE it.
export default function VideoInfoCard({
  video,
  className,
}: {
  video: Video;
  /** Trigger-button classes (placement + hover-reveal + skin). The reveal/touch-suppression rules
   *  live here so each host can match its surface (overlay vs inline). */
  className?: string;
}) {
  const { t, i18n } = useTranslation();
  const [open, setOpen] = useState(false);

  const pop = useAnchoredPopover({
    open,
    onOpenChange: setOpen,
    mode: "hover",
    placement: "bottom-end",
    offset: 6,
    // A touch of open intent (so brushing past the button while reaching another control doesn't
    // pop it), a longer close grace so the cursor can travel into the interactive card.
    hoverDelay: { open: 140, close: 160 },
    fitHeight: true,
  });

  const { data: detail } = useQuery({
    queryKey: qk.videoDetail(video.id),
    queryFn: () => api.videoDetail(video.id),
    enabled: open,
    staleTime: 5 * 60_000,
  });
  const { data: channel } = useQuery({
    queryKey: qk.channel(video.channel_id),
    queryFn: () => api.channelDetail(video.channel_id),
    enabled: open && !!video.channel_id,
    staleTime: 5 * 60_000,
  });
  const { data: tags } = useQuery({
    queryKey: qk.tags(),
    queryFn: () => api.tags(),
    enabled: open,
    staleTime: 5 * 60_000,
  });

  // The channel's tags (`tag_ids`), in the channel's own id order, resolved to names via the tag list.
  // These are the channel-tags the channel actually carries; an unknown id (a just-deleted tag) drops.
  const tagNames =
    channel && tags
      ? channel.tag_ids
          .map((id) => tags.find((tg) => tg.id === id))
          .filter((tg): tg is NonNullable<typeof tg> => !!tg)
      : [];

  const description = detail?.description?.trim();
  const metaBits = [
    video.view_count != null ? `${formatViews(video.view_count)} ${t("card.views")}` : null,
    video.duration_seconds != null ? formatDuration(video.duration_seconds) : null,
    video.published_at ? formatDate(video.published_at, i18n.language) : null,
  ].filter(Boolean);

  return (
    <>
      <button
        type="button"
        ref={pop.refs.setReference}
        {...pop.getReferenceProps()}
        // The overlay trigger sits inside the thumbnail's <a> (like the play buttons), so a click must
        // both preventDefault (no navigation) and stopPropagation (no card open); harmless inline too.
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
        }}
        aria-label={t("card.info")}
        title={t("card.info")}
        className={className}
      >
        <Info className="w-4 h-4" />
      </button>
      <PopoverSurface
        popover={pop}
        ariaLabel={t("card.info")}
        className="glass w-[340px] max-w-[92vw] overflow-y-auto rounded-lg px-3.5 py-3 animate-[fadeIn_0.12s_ease]"
        style={{ maxHeight: "min(26rem, var(--fit-max-h, 26rem))" }}
      >
        <p className="text-sm font-medium leading-snug wrap-break-word">{video.title}</p>
        <div className="mt-2 flex items-center gap-2">
          <Avatar
            src={video.channel_thumbnail}
            fallback={video.channel_title ?? ""}
            className="w-6 h-6 rounded-full shrink-0"
          />
          <span className="text-xs text-muted truncate">{video.channel_title}</span>
        </div>
        {metaBits.length > 0 && <p className="mt-1.5 text-xs text-muted">{metaBits.join(" · ")}</p>}
        {description ? (
          <p className="mt-2.5 text-xs leading-relaxed text-muted line-clamp-5 wrap-break-word">
            {linkify(description)}
          </p>
        ) : detail ? (
          <p className="mt-2.5 text-xs italic text-muted">{t("card.noDescription")}</p>
        ) : null}
        {tagNames.length > 0 && (
          <div className="mt-3 flex flex-wrap gap-1.5">
            {tagNames.map((tg) => (
              <span key={tg.id} className="glass-card px-2 py-0.5 rounded-full text-2xs">
                {tg.name}
              </span>
            ))}
          </div>
        )}
      </PopoverSurface>
    </>
  );
}