siftlode/frontend/src/components/DownloadDialog.tsx

import { lazy, Suspense, useState } from "react";
import { qk } from "../lib/queryKeys";
import { useTranslation } from "react-i18next";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import Modal, { ModalFooter } from "./ui/Modal";
import { Button } from "./ui/Button";
import { api } from "../lib/api";
import { invalidateDownloads } from "../lib/downloads";

// Lazy: the full profile editor only opens from the dialog's "manage presets" affordance.
const ProfileEditor = lazy(() => import("./ProfileEditor"));
import { notify } from "../lib/notifications";
import { notifyActionError } from "../lib/actionErrors";
import { showInTray } from "../lib/downloadQueue";
import { profileName } from "../lib/vocab";
import { LS } from "../lib/storage";
import { usePref } from "../lib/usePref";
import FilterSelect from "./ui/FilterSelect";
import { Input } from "./ui/Input";

// Preset picker shown when the user hits Download on a card / in the player, or brings a link (the
// Files link box, a paste anywhere). Enqueues via the API; its notice's "View" opens the tray on it.
// It opens on the format used last (per account): a pasted link is then one Enter away.
const parseProfile = (v: unknown): number | null => (typeof v === "number" ? v : null);

export default function DownloadDialog({
  source,
  title,
  onClose,
}: {
  source: string;
  title?: string | null;
  onClose: () => void;
}) {
  const { t } = useTranslation();
  const qc = useQueryClient();
  const profilesQ = useQuery({ queryKey: qk.downloadProfiles(), queryFn: api.downloadProfiles });
  const [profileId, setProfileId] = useState<number | null>(null);
  const [name, setName] = useState("");
  const [busy, setBusy] = useState(false);
  const [manage, setManage] = useState(false);

  const profiles = profilesQ.data ?? [];
  const [lastProfile, setLastProfile] = usePref<number | null>("downloadProfile", null, {
    localKey: LS.downloadProfile,
    parse: parseProfile,
  });
  // The one used last, while it still exists (a deleted format falls back to the first).
  const remembered = profiles.some((p) => p.id === lastProfile) ? lastProfile : null;
  const chosen = profileId ?? remembered ?? profiles[0]?.id ?? null;

  const submit = async () => {
    if (!chosen || busy) return;
    setBusy(true);
    const displayName = name.trim() || undefined;
    try {
      const job = await api.enqueueDownload({
        source,
        profile_id: chosen,
        display_name: displayName,
      });
      invalidateDownloads(qc);
      setLastProfile(chosen);
      notify({
        level: "success",
        message: t("downloads.dialog.added"),
        action: { label: t("downloads.dialog.view"), onClick: () => showInTray(job.id) },
      });
      onClose();
    } catch (e) {
      // A quota or validation refusal (422/409) is already in the global error dialog, which the
      // reporter skips; a 403/404/429 or a lost connection is not, and used to leave the dialog
      // open with nothing said.
      notifyActionError(e, t("errors.writeFailed.enqueueDownload"));
      setBusy(false);
    }
  };

  return (
    <Modal initialFocus="field" title={t("downloads.dialog.title")} onClose={onClose}>
      {title && <p className="text-sm text-muted mb-4 line-clamp-2">{title}</p>}

      <span className="block text-sm font-medium mb-1" aria-hidden="true">
        {t("downloads.dialog.profile")}
      </span>
      {/* The user's own list, of any length: a menu, not a segmented bar (owner's pick, 2026-09-19). */}
      <FilterSelect
        label={t("downloads.dialog.profile")}
        hideLabel
        selected={chosen == null ? [] : [String(chosen)]}
        onChange={([v]) => v && setProfileId(Number(v))}
        options={profiles.map((p) => ({ value: String(p.id), label: profileName(t, p) }))}
      />
      <Button variant="link" onClick={() => setManage(true)} className="text-xs mt-1 mb-4">
        {t("downloads.dialog.manage")}
      </Button>

      <label className="block text-sm font-medium mb-1">{t("downloads.dialog.nameLabel")}</label>
      <Input
        className="w-full"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder={t("downloads.dialog.namePlaceholder")}
      />

      <ModalFooter>
        <Button variant="ghost" size="sm" onClick={onClose}>
          {t("downloads.actions.cancel")}
        </Button>
        <Button variant="primary" size="sm" onClick={submit} disabled={busy || !chosen}>
          {t("downloads.dialog.submit")}
        </Button>
      </ModalFooter>

      {manage && (
        <Suspense fallback={null}>
          <ProfileEditor
            onClose={() => {
              setManage(false);
              void profilesQ.refetch();
            }}
          />
        </Suspense>
      )}
    </Modal>
  );
}