siftlode/frontend/src/components/DownloadCenter.tsx

import { lazy, Suspense, useEffect, useState } from "react";
import { qk } from "../lib/queryKeys";
import { useTranslation } from "react-i18next";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  Ban,
  ClipboardPaste,
  Download,
  Pause,
  Play,
  Plus,
  RotateCcw,
  Scissors,
  Settings2,
  Share2,
  Pencil,
  Trash2,
} from "lucide-react";
import Tabs from "./Tabs";
import { PageToolbar } from "./PageShell";
import { LoadingState, StateMessage } from "./QueryState";
// Lazy: these dialogs/editors open on demand, so they stay out of the Downloads page chunk until
// used (the video editor in particular is heavy — filmstrip + scrubber).
const DownloadDialog = lazy(() => import("./DownloadDialog"));
const ProfileEditor = lazy(() => import("./ProfileEditor"));
const VideoEditor = lazy(() => import("./VideoEditor"));
const ShareDialog = lazy(() => import("./ShareDialog"));
import { useConfirm } from "./ConfirmProvider";
import { useLiveQuery } from "../lib/useLiveQuery";
import { useMe } from "../lib/useMe";
import { api, type DownloadJob } from "../lib/api";
import { invalidateDownloads } from "../lib/downloads";
import { inputCls } from "./ui/form";
import { DownloadRow, IconBtn, UsageBar } from "./downloadRow";
import { MetaEditModal, ErrorModal } from "./downloadModals";
import { AdminSystem } from "./downloadAdmin";

export default function DownloadCenter() {
  const me = useMe();
  const { t } = useTranslation();
  const qc = useQueryClient();
  const confirm = useConfirm();
  // Always land on the queue tab (not a persisted last-tab) — the queue is where new work and
  // any failures are, so it's the useful default every visit.
  const [tab, setTab] = useState("queue");
  const [addUrl, setAddUrl] = useState("");
  const [addSource, setAddSource] = useState<string | null>(null);
  const [manage, setManage] = useState(false);
  const [metaJob, setMetaJob] = useState<DownloadJob | null>(null);
  const [shareJob, setShareJob] = useState<DownloadJob | null>(null);
  const [editJob, setEditJob] = useState<DownloadJob | null>(null);
  const [errorJob, setErrorJob] = useState<DownloadJob | null>(null);

  const jobsQ = useLiveQuery(qk.downloads(), api.downloads, { intervalMs: 2000 });
  const sharedQ = useQuery({
    queryKey: qk.downloadsShared(),
    queryFn: api.downloadsShared,
    enabled: tab === "shared",
  });
  const jobs = jobsQ.data ?? [];
  const queue = jobs.filter((j) => ["queued", "running", "paused", "error"].includes(j.status));
  const library = jobs.filter((j) => j.status === "done");

  const invalidate = () => invalidateDownloads(qc);
  const act = useMutation({
    mutationFn: ({
      id,
      op,
    }: {
      id: number;
      op: "pause" | "resume" | "cancel" | "delete" | "redownload";
    }) =>
      op === "pause"
        ? api.pauseDownload(id)
        : op === "resume"
          ? api.resumeDownload(id)
          : op === "cancel"
            ? api.cancelDownload(id)
            : op === "redownload"
              ? api.redownloadDownload(id)
              : api.deleteDownload(id),
    onSuccess: invalidate,
    // No onError: a failed job action returns 400/409/422/500, already surfaced by the global
    // error modal (api.ts req) with the backend's specific message — a caller toast would double it.
  });

  // Remove a shared-with-me item from your list (only your grant; the owner's file is untouched).
  const removeShared = useMutation({
    mutationFn: (id: number) => api.removeSharedDownload(id),
    onSuccess: () => qc.invalidateQueries({ queryKey: qk.downloadsShared() }),
  });

  const confirmThen = async (title: string, body: string, fn: () => void) => {
    if (await confirm({ title, message: body, confirmLabel: title, danger: true })) fn();
  };

  // Pull a link off the clipboard into the add-URL box. Clipboard reads need a secure context +
  // a user gesture/permission (iOS Safari/Brave are strict) — so this is best-effort: the paste
  // button is an explicit gesture (reliable), and the input's onFocus tries silently (ignored if
  // the browser refuses without a click). Only accept an http(s) URL, don't clobber existing text.
  const pasteFromClipboard = async (force = false) => {
    if (!force && addUrl.trim()) return;
    try {
      const text = (await navigator.clipboard?.readText())?.trim();
      if (text && /^https?:\/\/\S+$/i.test(text)) setAddUrl(text);
    } catch {
      /* permission denied or unsupported — the manual paste button still works on a click */
    }
  };

  const tabs = [
    { id: "queue", label: t("downloads.tabs.queue"), badge: queue.length },
    { id: "done", label: t("downloads.tabs.done"), badge: library.length },
    { id: "shared", label: t("downloads.tabs.shared") },
    ...(me.role === "admin" ? [{ id: "system", label: t("downloads.tabs.system") }] : []),
  ];
  // Guard against the active tab going away under us (e.g. admin on "system" gets demoted mid-session)
  // — that would render a blank page with no active tab. Fall back to the default.
  useEffect(() => {
    if (!tabs.some((tb) => tb.id === tab)) setTab("queue");
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tab, me.role]);

  const saveBtn = (job: DownloadJob) => (
    <a
      href={api.downloadFileUrl(job.id)}
      title={t("downloads.actions.download")}
      className="p-1.5 rounded-md hover:bg-surface text-muted hover:text-fg transition"
    >
      <Download className="w-4 h-4" />
    </a>
  );

  return (
    <>
      {/* Page title + subtitle + tabs are fixed chrome; the tab content scrolls under them. */}
      <PageToolbar>
        <div className="px-4 pt-2 max-w-4xl w-full mx-auto">
          <div className="flex items-center justify-between gap-3 mb-1">
            <h1 className="text-xl font-semibold">{t("downloads.page.title")}</h1>
            <button
              onClick={() => setManage(true)}
              className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-sm text-muted hover:text-fg hover:bg-surface transition"
            >
              <Settings2 className="w-4 h-4" /> {t("downloads.page.manage")}
            </button>
          </div>
          <p className="text-sm text-muted mb-4">{t("downloads.page.subtitle")}</p>

          <Tabs tabs={tabs} active={tab} onChange={setTab} />
        </div>
      </PageToolbar>

      <div className="px-4 pb-4 pt-3 max-w-4xl w-full mx-auto">
        {tab === "queue" && (
          <>
            <div className="flex gap-2 mb-4">
              <input
                value={addUrl}
                onChange={(e) => setAddUrl(e.target.value)}
                onFocus={() => pasteFromClipboard()}
                onKeyDown={(e) => e.key === "Enter" && addUrl.trim() && setAddSource(addUrl.trim())}
                placeholder={t("downloads.page.addUrl")}
                className={inputCls}
              />
              <button
                onClick={() => pasteFromClipboard(true)}
                title={t("downloads.page.paste")}
                aria-label={t("downloads.page.paste")}
                className="inline-flex items-center justify-center px-2.5 py-1.5 rounded-lg text-muted hover:text-fg hover:bg-surface transition shrink-0"
              >
                <ClipboardPaste className="w-4 h-4" />
              </button>
              <button
                onClick={() => addUrl.trim() && setAddSource(addUrl.trim())}
                className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium btn-primary transition shrink-0"
              >
                <Plus className="w-4 h-4" /> {t("downloads.page.add")}
              </button>
            </div>
            <div className="space-y-2">
              {queue.map((job) => (
                <DownloadRow key={job.id} job={job} onShowError={setErrorJob}>
                  {(job.status === "queued" || job.status === "running") && (
                    <IconBtn
                      onClick={() => act.mutate({ id: job.id, op: "pause" })}
                      title={t("downloads.actions.pause")}
                    >
                      <Pause className="w-4 h-4" />
                    </IconBtn>
                  )}
                  {(job.status === "paused" || job.status === "error") && (
                    <IconBtn
                      onClick={() => act.mutate({ id: job.id, op: "resume" })}
                      title={t(
                        job.status === "error"
                          ? "downloads.actions.retry"
                          : "downloads.actions.resume",
                      )}
                    >
                      <Play className="w-4 h-4" />
                    </IconBtn>
                  )}
                  <IconBtn
                    onClick={() =>
                      confirmThen(
                        t("downloads.confirm.cancelTitle"),
                        t("downloads.confirm.cancelBody"),
                        () => act.mutate({ id: job.id, op: "cancel" }),
                      )
                    }
                    title={t("downloads.actions.cancel")}
                    danger
                  >
                    <Ban className="w-4 h-4" />
                  </IconBtn>
                </DownloadRow>
              ))}
              {queue.length === 0 &&
                (jobsQ.isError && !jobsQ.data ? (
                  <StateMessage tone="error" onRetry={() => jobsQ.refetch()}>
                    {t("common.loadError")}
                  </StateMessage>
                ) : jobsQ.isLoading ? (
                  <LoadingState />
                ) : (
                  <div className="text-sm text-muted py-10 text-center">
                    {t("downloads.empty.queue")}
                  </div>
                ))}
            </div>
          </>
        )}

        {tab === "done" && (
          <>
            <UsageBar />
            <div className="space-y-2">
              {library.map((job) => (
                <DownloadRow key={job.id} job={job}>
                  {saveBtn(job)}
                  {job.can_download && (job.asset?.duration_s ?? 0) > 0 && (
                    <IconBtn onClick={() => setEditJob(job)} title={t("downloads.actions.edit")}>
                      <Scissors className="w-4 h-4" />
                    </IconBtn>
                  )}
                  <IconBtn
                    onClick={() => setMetaJob(job)}
                    title={t("downloads.actions.editDetails")}
                  >
                    <Pencil className="w-4 h-4" />
                  </IconBtn>
                  <IconBtn onClick={() => setShareJob(job)} title={t("downloads.actions.share")}>
                    <Share2 className="w-4 h-4" />
                  </IconBtn>
                  <IconBtn
                    onClick={() =>
                      confirmThen(
                        t("downloads.confirm.redownloadTitle"),
                        t("downloads.confirm.redownloadBody"),
                        () => act.mutate({ id: job.id, op: "redownload" }),
                      )
                    }
                    title={t("downloads.actions.redownload")}
                  >
                    <RotateCcw className="w-4 h-4" />
                  </IconBtn>
                  <IconBtn
                    onClick={() =>
                      confirmThen(
                        t("downloads.confirm.deleteTitle"),
                        t("downloads.confirm.deleteBody"),
                        () => act.mutate({ id: job.id, op: "delete" }),
                      )
                    }
                    title={t("downloads.actions.delete")}
                    danger
                  >
                    <Trash2 className="w-4 h-4" />
                  </IconBtn>
                </DownloadRow>
              ))}
              {library.length === 0 &&
                (jobsQ.isError && !jobsQ.data ? (
                  <StateMessage tone="error" onRetry={() => jobsQ.refetch()}>
                    {t("common.loadError")}
                  </StateMessage>
                ) : jobsQ.isLoading ? (
                  <LoadingState />
                ) : (
                  <div className="text-sm text-muted py-10 text-center">
                    {t("downloads.empty.done")}
                  </div>
                ))}
            </div>
          </>
        )}

        {tab === "shared" && (
          <div className="space-y-2">
            {(sharedQ.data ?? []).map((job) => (
              <DownloadRow key={job.id} job={job}>
                {job.can_download && saveBtn(job)}
                {job.can_download && (job.asset?.duration_s ?? 0) > 0 && (
                  <IconBtn onClick={() => setEditJob(job)} title={t("downloads.actions.edit")}>
                    <Scissors className="w-4 h-4" />
                  </IconBtn>
                )}
                <IconBtn
                  onClick={() =>
                    confirmThen(
                      t("downloads.confirm.removeSharedTitle"),
                      t("downloads.confirm.removeSharedBody"),
                      () => removeShared.mutate(job.id),
                    )
                  }
                  title={t("downloads.actions.removeShared")}
                  danger
                >
                  <Trash2 className="w-4 h-4" />
                </IconBtn>
              </DownloadRow>
            ))}
            {sharedQ.data && sharedQ.data.length === 0 && (
              <div className="text-sm text-muted py-10 text-center">
                {t("downloads.empty.shared")}
              </div>
            )}
          </div>
        )}

        {tab === "system" && me.role === "admin" && <AdminSystem />}

        <Suspense fallback={null}>
          {addSource && (
            <DownloadDialog
              source={addSource}
              onClose={() => {
                setAddSource(null);
                setAddUrl("");
              }}
            />
          )}
          {manage && <ProfileEditor onClose={() => setManage(false)} />}
          {metaJob && <MetaEditModal job={metaJob} onClose={() => setMetaJob(null)} />}
          {shareJob && <ShareDialog job={shareJob} onClose={() => setShareJob(null)} />}
          {editJob && <VideoEditor job={editJob} onClose={() => setEditJob(null)} />}
          {errorJob && (
            <ErrorModal
              job={errorJob}
              onRetry={() => act.mutate({ id: errorJob.id, op: "resume" })}
              onClose={() => setErrorJob(null)}
            />
          )}
        </Suspense>
      </div>
    </>
  );
}