siftlode/frontend/src/components/VideoCard.tsx

import { memo } from "react";
import { Bookmark, Check, CheckCheck, Eye, EyeOff, ListFilter } from "lucide-react";
import Avatar from "./Avatar";
import clsx from "clsx";
import type { Video } from "../lib/api";
import { formatDuration, formatViews, relativeTime } from "../lib/format";

function Actions({
  video,
  onState,
  onChannelFilter,
}: {
  video: Video;
  onState: (id: string, status: string) => void;
  onChannelFilter?: (channelId: string, channelName: string) => void;
}) {
  const act = (status: string) => (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    onState(video.id, video.status === status ? "new" : status);
  };
  return (
    <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition">
      <button
        onClick={act("watched")}
        title={video.status === "watched" ? "Watched — click to unmark" : "Mark watched"}
        className={clsx(
          "p-1.5 rounded-md hover:bg-surface text-muted hover:text-fg",
          video.status === "watched" && "text-accent"
        )}
      >
        {video.status === "watched" ? (
          <CheckCheck className="w-4 h-4" />
        ) : (
          <Check className="w-4 h-4" />
        )}
      </button>
      <button
        onClick={act("saved")}
        title={video.status === "saved" ? "Saved — click to remove" : "Save for later"}
        className={clsx(
          "p-1.5 rounded-md hover:bg-surface text-muted hover:text-fg",
          video.status === "saved" && "fill-current text-accent"
        )}
      >
        <Bookmark className="w-4 h-4" />
      </button>
      <button
        onClick={act("hidden")}
        title={video.status === "hidden" ? "Unhide" : "Hide"}
        className={clsx(
          "p-1.5 rounded-md hover:bg-surface text-muted hover:text-fg",
          video.status === "hidden" && "text-accent"
        )}
      >
        {video.status === "hidden" ? (
          <Eye className="w-4 h-4" />
        ) : (
          <EyeOff className="w-4 h-4" />
        )}
      </button>
      {onChannelFilter && (
        <button
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
            onChannelFilter(video.channel_id, video.channel_title ?? "This channel");
          }}
          title="Only this channel"
          className="p-1.5 rounded-md hover:bg-surface text-muted hover:text-fg"
        >
          <ListFilter className="w-4 h-4" />
        </button>
      )}
    </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) => void
): void {
  if (!onOpen || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
  e.preventDefault();
  onOpen(video);
}

function Thumb({
  video,
  className,
  onOpen,
}: {
  video: Video;
  className?: string;
  onOpen?: (v: Video) => void;
}) {
  return (
    <a
      href={video.watch_url}
      target="_blank"
      rel="noreferrer"
      onClick={(e) => openInApp(e, video, onOpen)}
      className={clsx(
        "block relative rounded-xl overflow-hidden bg-surface border border-border shadow-md group-hover:shadow-2xl transition-shadow",
        className
      )}
    >
      {video.thumbnail_url ? (
        <img
          src={video.thumbnail_url}
          alt=""
          loading="lazy"
          className="w-full h-full object-cover"
        />
      ) : (
        <div className="w-full h-full" />
      )}
      {video.duration_seconds != null && (
        <span className="absolute bottom-1.5 right-1.5 bg-black/80 text-white text-[11px] font-medium px-1.5 py-0.5 rounded">
          {formatDuration(video.duration_seconds)}
        </span>
      )}
      {video.live_status === "was_live" && (
        <span className="absolute top-1.5 left-1.5 bg-accent text-accent-fg text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded">
          stream
        </span>
      )}
      {video.status === "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>
      )}
    </a>
  );
}

function VideoCard({
  video,
  view,
  onState,
  onChannelFilter,
  onOpen,
}: {
  video: Video;
  view: "grid" | "list";
  onState: (id: string, status: string) => void;
  onChannelFilter?: (channelId: string, channelName: string) => void;
  onOpen?: (v: Video) => void;
}) {
  const watched = video.status === "watched";
  const meta = (
    <>
      {video.view_count != null && <>{formatViews(video.view_count)} views · </>}
      {relativeTime(video.published_at)}
    </>
  );
  const title = (
    <a
      href={video.watch_url}
      target="_blank"
      rel="noreferrer"
      onClick={(e) => openInApp(e, video, onOpen)}
      className="font-medium leading-snug line-clamp-2 hover:text-accent"
    >
      {video.title}
    </a>
  );

  if (view === "list") {
    return (
      <div
        className={clsx(
          "cv-row group flex gap-3 p-2 rounded-xl hover:bg-card hover:shadow-lg transition",
          watched && "opacity-55"
        )}
      >
        <Thumb video={video} className="w-44 aspect-video shrink-0" onOpen={onOpen} />
        <div className="min-w-0 flex-1">
          {title}
          <a
            href={video.channel_url}
            target="_blank"
            rel="noreferrer"
            onClick={(e) => e.stopPropagation()}
            className="text-sm text-muted truncate mt-0.5 block w-fit max-w-full hover:text-fg"
          >
            {video.channel_title}
          </a>
          <div className="text-xs text-muted mt-0.5">{meta}</div>
        </div>
        <Actions video={video} onState={onState} onChannelFilter={onChannelFilter} />
      </div>
    );
  }

  return (
    <div
      className={clsx(
        "cv-card group glass-card glass-hover rounded-2xl p-2.5 transition-all duration-150 hover:-translate-y-1",
        watched && "opacity-55"
      )}
    >
      <Thumb video={video} className="aspect-video" onOpen={onOpen} />
      <div className="flex gap-3 mt-2.5 px-0.5 pb-0.5">
        <Avatar
          src={video.channel_thumbnail}
          fallback={video.channel_title ?? ""}
          className="w-9 h-9 rounded-full shrink-0 mt-0.5"
        />
        <div className="min-w-0 flex-1">
          {title}
          <a
            href={video.channel_url}
            target="_blank"
            rel="noreferrer"
            onClick={(e) => e.stopPropagation()}
            className="text-sm text-muted truncate mt-0.5 block w-fit max-w-full hover:text-fg"
          >
            {video.channel_title}
          </a>
          <div className="text-xs text-muted mt-0.5">{meta}</div>
          <Actions video={video} onState={onState} onChannelFilter={onChannelFilter} />
        </div>
      </div>
    </div>
  );
}

// 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);