siftlode/frontend/src/components/downloadRow.tsx

import { useState, type ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { CalendarClock, File, Film, Link2, Music, Scissors } from "lucide-react";
import clsx from "clsx";
import { qk } from "../lib/queryKeys";
import { useLiveQuery } from "../lib/useLiveQuery";
import { api, type DownloadJob } from "../lib/api";
import {
  formatBytes,
  formatDateTime,
  formatDuration,
  formatEta,
  formatSpeed,
  relativeTime,
} from "../lib/format";
import { navItemAttrs } from "../lib/listNav";
import { failCopyKeys } from "../lib/downloadFailure";
import { displayUrl, hasOwnTitle, jobTitle } from "./downloadTitle";
import { IconButton } from "./ui/IconButton";
import { Pressable } from "./ui/Pressable";
import { SURFACE } from "./ui/surfaces";

// Download-row presentation + the small shared primitives (status pill, icon button, usage bar),
// split out of DownloadCenter (all purely prop-driven, no shared state). Rendered by the queue,
// library, shared, and admin tabs.

const STATUS_CLS: Record<string, string> = {
  queued: "text-muted",
  running: "text-accent",
  paused: "text-warn",
  done: "text-success",
  error: "text-danger",
  canceled: "text-muted",
};

// Byte-progress phases (show a % bar) vs ffmpeg post-steps (no %, indeterminate pulse).
// "editing" (the phase-2 editor) reports a real % from ffmpeg's out_time, so it gets a bar.
const DOWNLOAD_PHASES = ["video", "audio", "editing"];
const PHASE_KEYS = [
  "video",
  "audio",
  "editing",
  "merging",
  "audio_extract",
  "thumbnail",
  "sponsorblock",
  "metadata",
  "processing",
];

export function StatusPill({ job }: { job: DownloadJob }) {
  const { t } = useTranslation();
  // While downloading, show the concrete phase (video / audio / merging) so the user isn't
  // confused by the bar resetting between the separate video and audio streams.
  if (job.status === "running" && job.phase && PHASE_KEYS.includes(job.phase)) {
    return (
      <span className="text-sm font-medium text-accent">{t(`downloads.phase.${job.phase}`)}</span>
    );
  }
  const key = job.expired ? "expired" : job.status;
  return (
    <span className={clsx("text-sm font-medium", STATUS_CLS[job.status] ?? "text-muted")}>
      {t(`downloads.status.${key}`)}
    </span>
  );
}

// The row answers to its OWN width (a container query), not the window's: the same list sits in a
// phone, a split-screen tablet and a desktop column. Below 40rem the actions no longer leave the title
// column room for the meta line, so the row stacks (E28 S3f3, the owner's pick A): the picture beside a
// two-line title and the channel; the meta line across the whole row; then the source link and the
// actions on one wrapping line.
const THUMB_BOX =
  "w-28 @max-[40rem]/dlrow:w-24 aspect-video shrink-0 rounded-lg overflow-hidden bg-surface border border-border";

function Thumb({ job }: { job: DownloadJob }) {
  // Prefer OUR self-hosted poster: it's always present on disk, never expires, and is same-origin, so
  // a source-CDN signature expiry (Facebook's fbcdn URLs expire within days) or an ad-blocker/Shields
  // rule on the source domain can't break it. The source's remote thumbnail_url is only a fallback for
  // the rare poster-less asset (a thumbnail-less source whose ffmpeg frame-cut also failed).
  const remote = job.asset?.thumbnail_url ?? null;
  // `job.poster_url` only SIGNALS a poster exists; the actual <img> src must carry ?account= (see
  // api.posterImageUrl). A plain <img> can't send the X-Siftlode-Account header, so without it the
  // poster resolves to the session-default account and 404s for a per-tab account's download — which,
  // now that the poster is the primary image, reads as a blank Library thumbnail.
  const poster = job.poster_url ? api.posterImageUrl(job.id) : null;
  const primary = poster || remote;
  // On load failure (a genuinely missing poster file) fall back to the remote source thumbnail.
  // Remembered BY the URL that failed, not as a value an effect re-syncs: these rows are recycled
  // down a long virtualized list, so a boolean-style mirror painted the previous job's fallback
  // over the next one's poster for a frame. See ui/Avatar, which had the same defect.
  // …and forgotten once `primary` has moved off it, for the same reason ui/Avatar does: a poster
  // that 404'd because its file was still being written should be re-requested when the row comes
  // back, not written off for the life of the recycled slot. Convergent, so it belongs in render.
  const [failedPrimary, setFailedPrimary] = useState<string | null>(null);
  if (failedPrimary !== null && failedPrimary !== primary) setFailedPrimary(null);
  const src = failedPrimary && failedPrimary === primary ? remote : primary;
  // A generic uploaded file (media_kind='file') has no video frame to poster — it's a document/
  // archive, not playable media. Show a neutral file glyph instead of an (always-empty) thumbnail.
  if (job.asset?.media_kind === "file") {
    return (
      <div className={`${THUMB_BOX} flex items-center justify-center text-muted`}>
        <File className="w-8 h-8" aria-hidden="true" />
      </div>
    );
  }
  return (
    <div className={THUMB_BOX}>
      {src ? (
        <img
          src={src}
          alt=""
          loading="lazy"
          className="w-full h-full object-cover"
          onError={() => {
            if (src !== remote) setFailedPrimary(primary);
          }}
        />
      ) : (
        // No picture at all (a link that failed before its details, a poster that never came): a
        // quiet glyph of what it is, like the file glyph above — an empty box read as "still loading".
        <div className="flex h-full items-center justify-center text-muted">
          {job.asset?.media_kind === "audio" ? (
            <Music className="w-7 h-7" aria-hidden="true" />
          ) : (
            <Film className="w-7 h-7" aria-hidden="true" />
          )}
        </div>
      )}
    </div>
  );
}

// The channel to show under the title: a user override wins over the auto-extracted asset value.
// `url` is null for sources without a channel link (e.g. reddit) — then it renders as plain text. No
// channel known yet → no line: the ref it once fell back to repeated the title (the owner, 2026-09-27).
function jobChannel(job: DownloadJob): { name: string | null; url: string | null } {
  return {
    name: job.display_uploader || job.asset?.uploader || null,
    url: job.display_uploader_url || job.asset?.uploader_url || null,
  };
}

export function IconBtn({
  onClick,
  title,
  danger,
  open,
  children,
}: {
  onClick: () => void;
  title: string;
  danger?: boolean;
  /** The row's "open" action (play): Enter on a keyboard-walked row (lib/listNav) clicks it. */
  open?: boolean;
  children: ReactNode;
}) {
  return (
    <IconButton
      variant={danger ? "danger" : "ghost"}
      size="md"
      onClick={onClick}
      data-nav-open={open ? "" : undefined}
      label={title}
    >
      {children}
    </IconButton>
  );
}

// A link inside the row keeps the BROWSER's own right-click menu (open in a new tab, copy the
// address): the row's menu answers everywhere else on it (E28 C1).
const nativeMenu = { onContextMenu: (e: React.MouseEvent) => e.stopPropagation() };

// "Downloaded from" reference: opens the original page in a new tab. Its copy moved into the row's
// menu ("Copy link"); an extra link copies through the browser's own link menu.
function SourceRef({ url }: { url: string }) {
  const { t } = useTranslation();
  return (
    <div className="flex items-center gap-1 text-sm text-muted min-w-0">
      <Link2 className="w-3.5 h-3.5 shrink-0" />
      <a
        href={url}
        target="_blank"
        rel="noopener noreferrer"
        title={`${t("downloads.source.open")} — ${url}`}
        className="truncate leading-6 hover:text-accent hover:underline pointer-coarse:leading-(--touch-target)"
        {...nativeMenu}
      >
        {displayUrl(url)}
      </a>
    </div>
  );
}

// Channel under the title — a clickable link when a channel URL is known, plain text otherwise.
function ChannelLine({ job }: { job: DownloadJob }) {
  const { name, url } = jobChannel(job);
  if (!name) return null;
  if (url) {
    return (
      <div className="text-sm mt-0.5 truncate">
        <a
          href={url}
          target="_blank"
          rel="noopener noreferrer"
          title={url}
          className="text-muted hover:text-accent hover:underline"
          {...nativeMenu}
        >
          {name}
        </a>
      </div>
    );
  }
  return <div className="text-sm text-muted truncate mt-0.5">{name}</div>;
}

export function DownloadRow({
  job,
  onShowError,
  navIndex,
  rowProps,
  more,
  children,
}: {
  job: DownloadJob;
  onShowError?: (job: DownloadJob) => void;
  /** Its position in a keyboard-walkable list (lib/listNav). */
  navIndex?: number;
  /** The list's menu triggers (right-click, long-press, Shift+F10): `useContextMenu().triggerProps`. */
  rowProps?: Record<string, unknown>;
  /** The row's "…", last in its action strip (E28 C1). */
  more?: ReactNode;
  children?: ReactNode;
}) {
  const { t } = useTranslation();
  const running = job.status === "running";
  const linkTitle = !hasOwnTitle(job) && !!job.source_url;
  const sourceLink = linkTitle ? null : job.source_url;
  return (
    <div
      {...(navIndex !== undefined && navItemAttrs(navIndex, jobTitle(job)))}
      {...rowProps}
      className={`${SURFACE.card} @container/dlrow group p-2.5 glass-hover transition`}
    >
      <div
        className={`grid grid-cols-[auto_minmax(0,1fr)_auto] gap-x-3 gap-y-1 [grid-template-areas:'thumb_head_act''thumb_meta_act''thumb_src_act''thumb_prog_act'] @max-[40rem]/dlrow:grid-cols-[auto_minmax(0,1fr)] @max-[40rem]/dlrow:[grid-template-areas:'thumb_head''meta_meta''foot_foot''prog_prog']`}
      >
        <div className="[grid-area:thumb]">
          <Thumb job={job} />
        </div>
        <div className="[grid-area:head] min-w-0">
          <div
            className={`font-medium leading-snug break-words line-clamp-1 @max-[40rem]/dlrow:line-clamp-2`}
          >
            {job.job_kind === "edit" && (
              <span className="mr-1.5 inline-flex items-center gap-1 px-1.5 py-0.5 align-middle rounded-sm text-2xs font-semibold uppercase tracking-wide bg-accent/15 text-accent">
                <Scissors className="w-3 h-3" /> {t("downloads.clipBadge")}
              </span>
            )}
            {linkTitle ? (
              // No name yet: the title IS the link, so the link line below leaves it out (it said the
              // same URL a third time).
              <a
                href={job.source_url!}
                target="_blank"
                rel="noopener noreferrer"
                title={`${t("downloads.source.open")} — ${job.source_url}`}
                className="hover:text-accent hover:underline"
                {...nativeMenu}
              >
                {jobTitle(job)}
              </a>
            ) : (
              jobTitle(job)
            )}
          </div>
          <ChannelLine job={job} />
        </div>
        {/* The meta line never wraps (the owner, 2026-09-27: on the iPad its "18.9 / MB" pieces broke
            into a jumble). One line, cut at its end, so the least telling part (the age) goes first. */}
        <div data-dl-meta className="[grid-area:meta] min-w-0 truncate text-sm">
          <StatusPill job={job} />
          {job.asset?.container ? (
            // Concrete container (mp4 / m4a / webm …) — reads as the file format, and its audio-vs-video
            // extension is the video/audio distinction the running-only phase pill can't show at rest.
            <span className="text-muted uppercase"> · {job.asset.container}</span>
          ) : null}
          {job.asset?.size_bytes ? (
            <span className="text-muted"> · {formatBytes(job.asset.size_bytes)}</span>
          ) : null}
          {job.asset?.duration_s ? (
            <span className="text-muted"> · {formatDuration(job.asset.duration_s)}</span>
          ) : null}
          {job.status === "done" && job.created_at ? (
            <span className="text-muted" title={formatDateTime(job.created_at)}>
              {" · "}
              <CalendarClock className="inline w-3.5 h-3.5 align-[-0.15em]" />{" "}
              {relativeTime(job.created_at)}
            </span>
          ) : null}
          {job.status === "error" ? (
            <>
              {" "}
              <Pressable
                onClick={() => onShowError?.(job)}
                className="text-danger inline-block leading-6 min-h-6 touch-target pointer-coarse:leading-(--touch-target)"
                title={t("downloads.errors.fail.title")}
              >
                · {t(failCopyKeys(job, "short"))}{" "}
                <span className="text-muted underline">
                  {t("downloads.errors.fail.detailsLink")}
                </span>
              </Pressable>
            </>
          ) : null}
        </div>
        {/* Wide, this wrapper is `contents`: the source and the actions are grid items of their own
            (src under the meta, act down the right). Stacked, it is ONE wrapping line: the link and
            the actions side by side while they fit, the actions under the link only when they don't
            (at 375). On touch each is a 44px box, so separate lines stacked 44px gaps (the owner,
            2026-09-27: "what are those huge empty parts?"). */}
        <div className="contents @max-[40rem]/dlrow:[grid-area:foot] @max-[40rem]/dlrow:flex @max-[40rem]/dlrow:flex-wrap @max-[40rem]/dlrow:items-center @max-[40rem]/dlrow:gap-x-2">
          {(!!sourceLink || !!job.extra_links?.length) && (
            <div className="[grid-area:src] min-w-0 @max-[40rem]/dlrow:min-w-32 @max-[40rem]/dlrow:flex-1">
              {sourceLink && <SourceRef url={sourceLink} />}
              {job.extra_links?.map((url) => (
                <SourceRef key={url} url={url} />
              ))}
            </div>
          )}
          {/* The row's visible actions — its primary one and the save link — then its "…": the md
              rung here (the row stands alone), the sm rung in the modals, one IconBtn for both. */}
          <div className="[grid-area:act] flex items-start gap-1 shrink-0 @max-[40rem]/dlrow:ml-auto">
            {children}
            {more}
          </div>
        </div>
        {running && (
          <div className="[grid-area:prog] mt-0.5">
            {job.phase && !DOWNLOAD_PHASES.includes(job.phase) ? (
              // ffmpeg post-steps aren't byte-progress — show an indeterminate pulse, no %.
              <div className="h-1.5 rounded-full bg-surface overflow-hidden">
                <div className="h-full w-full bg-accent/60 animate-pulse" />
              </div>
            ) : (
              <>
                <div className="h-1.5 rounded-full bg-surface overflow-hidden">
                  <div
                    className="h-full bg-accent transition-all"
                    style={{ width: `${job.progress}%` }}
                  />
                </div>
                <div className="text-xs text-muted mt-0.5 flex gap-2">
                  <span>{job.progress}%</span>
                  {job.speed_bps ? <span>{formatSpeed(job.speed_bps)}</span> : null}
                  {job.eta_s ? <span>{formatEta(job.eta_s)}</span> : null}
                </div>
              </>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

export function UsageBar() {
  const { t } = useTranslation();
  // Poll live (like the library list) so the footprint updates the moment the worker finishes an
  // edit/download — enqueue only creates a queued job (0 bytes), the size lands asynchronously, so
  // a one-shot fetch at enqueue time would show a stale 0 B until a manual reload. The footprint
  // only moves while a job is in flight, so poll fast (2s) then and idle-back-off to 15s otherwise
  // (running_jobs counts queued+running — it flips back to 2s on the first poll after a new enqueue).
  const usage = useLiveQuery(qk.downloadUsage(), api.downloadUsage, {
    intervalMs: (u) => (u?.running_jobs ? 2000 : 15000),
  });
  const u = usage.data;
  if (!u) return null;
  const pct =
    u.unlimited || !u.max_bytes ? 0 : Math.min(100, (u.footprint_bytes / u.max_bytes) * 100);
  return (
    <div className={`${SURFACE.card} p-3 mb-4`}>
      <div className="flex justify-between text-sm mb-1.5">
        <span className="font-medium">{t("downloads.usage.title")}</span>
        <span className="text-muted">
          {formatBytes(u.footprint_bytes)}
          {u.unlimited ? "" : ` / ${formatBytes(u.max_bytes)}`} ·{" "}
          {u.unlimited
            ? t("downloads.usage.unlimited")
            : t("downloads.usage.items", { used: u.active_jobs, max: u.max_jobs })}
        </span>
      </div>
      {!u.unlimited && (
        <div className="h-2 rounded-full bg-surface overflow-hidden">
          <div
            className={clsx("h-full transition-all", pct > 90 ? "bg-danger" : "bg-accent")}
            style={{ width: `${pct}%` }}
          />
        </div>
      )}
    </div>
  );
}