import { lazy, Suspense, useState } from "react";
import { qk } from "../lib/queryKeys";
import { useTranslation } from "react-i18next";
import { useQuery } from "@tanstack/react-query";
import {
  ClipboardPaste,
  Download,
  Pause,
  Play,
  PlayCircle,
  Plus,
  RefreshCw,
  Settings2,
  Share2,
  UploadCloud,
} from "lucide-react";
import Tabs from "./ui/Tabs";
import { PageToolbar } from "./ui/PageShell";
import { LoadingState, StateMessage } from "./ui/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 UploadDialog = lazy(() => import("./UploadDialog"));
const ProfileEditor = lazy(() => import("./ProfileEditor"));
const VideoEditor = lazy(() => import("./VideoEditor"));
const ShareDialog = lazy(() => import("./ShareDialog"));
const LibraryPlayer = lazy(() => import("./LibraryPlayer"));
import { useLiveQuery } from "../lib/useLiveQuery";
import { useMe } from "../lib/useMe";
import { api, type DownloadJob } from "../lib/api";
import { libraryRowActions, sharedRowActions } from "../lib/downloadActions";
import { Button } from "./ui/Button";
import { IconButton } from "./ui/IconButton";
import { DownloadRow, IconBtn, UsageBar } from "./downloadRow";
import { MetaEditModal, ErrorModal } from "./downloadModals";
import { AdminSystem } from "./downloadAdmin";
import NavGrid from "./ui/NavGrid";
import { Input } from "./ui/Input";
import { IconLink } from "./ui/LinkButton";
import { useContextMenu } from "./ui/useContextMenu";
import { ContextMenu } from "./ui/ContextMenu";
import { MoreButton } from "./ui/MoreButton";
import { useDownloadActions, type DownloadTab } from "./useDownloadActions";

const jobKey = (job: DownloadJob) => job.id;

export default function DownloadCenter() {
  const me = useMe();
  const { t } = useTranslation();
  // 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 [upload, setUpload] = useState(false);
  const [manage, setManage] = useState(false);
  const [metaJob, setMetaJob] = useState<DownloadJob | null>(null);
  const [shareJob, setShareJob] = useState<DownloadJob | null>(null);
  const [playJob, setPlayJob] = useState<DownloadJob | null>(null);
  const [editJob, setEditJob] = useState<DownloadJob | null>(null);
  const [errorJob, setErrorJob] = useState<DownloadJob | null>(null);

  // Poll fast (2s) while work is actually in flight; back off to 15s once the queue is settled
  // (only done/error/paused rows left, which don't advance on their own) so an idle Download Center
  // isn't hitting the API — and adding to the shared box's load — every 2s for nothing.
  const jobsQ = useLiveQuery(qk.downloads(), api.downloads, {
    intervalMs: (data) =>
      data?.some((j) => j.status === "queued" || j.status === "running") ? 2000 : 15000,
  });
  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");

  // --- The rows' ONE menu (E28 C1) -------------------------------------------------------------
  // Keyed by the job's id: the queue polls every 2 s while a job runs, replacing the object under an
  // open menu, and its "…" must still close it. The tab is the one on screen.
  const rowMenu = useContextMenu<DownloadJob>({ keyOf: jobKey });
  const actions = useDownloadActions({
    onPlay: setPlayJob,
    onEdit: setEditJob,
    onEditDetails: setMetaJob,
    onManageShares: setShareJob,
  });
  const menuTarget = rowMenu.target;
  const listTab: DownloadTab | null =
    tab === "queue" || tab === "done" || tab === "shared" ? tab : null;
  const menuItems = menuTarget && listTab ? actions.items(menuTarget, listTab) : [];
  // The row's menu triggers and its "…".
  const rowMenuProps = (job: DownloadJob) => {
    const mine = rowMenu.open && rowMenu.target?.id === job.id;
    return {
      rowProps: rowMenu.triggerProps(job),
      more: (
        <MoreButton
          label={t("downloads.rowMenu")}
          size="md"
          expanded={mine}
          menuProps={rowMenu.buttonProps(job)}
          className={mine ? undefined : "reveal"}
        />
      ),
    };
  };

  // 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.
  // Adjusted during render rather than from an effect: as an effect the blank page it exists to
  // prevent was committed and painted first. `setTab` is this component's own state (persisted per
  // account), so a render-phase write is allowed, and it converges — "queue" is always in the list.
  if (!tabs.some((tb) => tb.id === tab)) setTab("queue");

  const saveBtn = (job: DownloadJob) => (
    <IconLink href={api.downloadFileUrl(job.id)} label={t("downloads.actions.download")} size="md">
      <Download />
    </IconLink>
  );

  return (
    <>
      {/* The tabs are the page's band (B4); the tab content scrolls under them. No visible title: the
          nav rail and the tab title name the page, the shell's hidden h1 names it to a screen reader. */}
      <PageToolbar>
        <div className="px-4 pt-2 pb-2 max-w-4xl w-full mx-auto flex flex-wrap items-center justify-between gap-2">
          <Tabs tabs={tabs} active={tab} onChange={setTab} className="flex flex-wrap gap-1" />
          <Button
            variant="ghost"
            size="sm"
            icon={<Settings2 />}
            onClick={() => setManage(true)}
            className="shrink-0"
          >
            {t("downloads.page.manage")}
          </Button>
        </div>
      </PageToolbar>

      <div className="px-4 pb-4 pt-3 max-w-4xl w-full mx-auto">
        {tab === "queue" && (
          <>
            {/* The field takes the whole line when the buttons would squeeze it (at 375 it had 57px). */}
            <div className="flex flex-wrap gap-2 mb-4">
              <Input
                className="min-w-0 flex-[1_1_16rem]"
                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")}
              />
              <IconButton
                label={t("downloads.page.paste")}
                size="sm"
                variant="ghost"
                onClick={() => pasteFromClipboard(true)}
              >
                <ClipboardPaste className="w-4 h-4" />
              </IconButton>
              <Button
                variant="primary"
                size="sm"
                icon={<Plus className="w-4 h-4" />}
                onClick={() => addUrl.trim() && setAddSource(addUrl.trim())}
                className="shrink-0"
              >
                {t("downloads.page.add")}
              </Button>
              {/* Local upload is a peer to "add a URL": a general file → the same library (E7 S5c). */}
              <Button
                variant="outline"
                size="sm"
                icon={<UploadCloud className="w-4 h-4" />}
                onClick={() => setUpload(true)}
                className="shrink-0"
              >
                {t("downloads.page.upload")}
              </Button>
            </div>
            <NavGrid className="space-y-2">
              {queue.map((job, i) => (
                <DownloadRow
                  key={job.id}
                  job={job}
                  navIndex={i}
                  onShowError={setErrorJob}
                  {...rowMenuProps(job)}
                >
                  {/* The queue's primary action stays in sight; cancel moved into the "…". */}
                  {job.status === "queued" || job.status === "running" ? (
                    <IconBtn
                      onClick={() => actions.run(job, "pause")}
                      title={t("downloads.actions.pause")}
                    >
                      <Pause className="w-4 h-4" />
                    </IconBtn>
                  ) : (
                    <IconBtn
                      onClick={() => actions.run(job, "resume")}
                      title={t(
                        job.status === "error"
                          ? "downloads.actions.retry"
                          : "downloads.actions.resume",
                      )}
                    >
                      {/* Retry is "do it again", not playback: the Play glyph promised a video. */}
                      {job.status === "error" ? (
                        <RefreshCw className="w-4 h-4" />
                      ) : (
                        <Play 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 shape="list" />
                ) : (
                  <div className="text-sm text-muted py-10 text-center">
                    {t("downloads.empty.queue")}
                  </div>
                ))}
            </NavGrid>
          </>
        )}

        {tab === "done" && (
          <>
            <UsageBar />
            <NavGrid className="space-y-2">
              {library.map((job, i) => (
                <DownloadRow key={job.id} job={job} navIndex={i} {...rowMenuProps(job)}>
                  {libraryRowActions(job).play && (
                    <IconBtn
                      open
                      onClick={() => setPlayJob(job)}
                      title={t("downloads.actions.play")}
                    >
                      <PlayCircle className="w-4 h-4" />
                    </IconBtn>
                  )}
                  {/* Sharing the link is the library's main errand: in sight, ahead of save. */}
                  <IconBtn onClick={() => actions.share(job)} title={t("downloads.actions.share")}>
                    <Share2 className="w-4 h-4" />
                  </IconBtn>
                  {saveBtn(job)}
                </DownloadRow>
              ))}
              {library.length === 0 &&
                (jobsQ.isError && !jobsQ.data ? (
                  <StateMessage tone="error" onRetry={() => jobsQ.refetch()}>
                    {t("common.loadError")}
                  </StateMessage>
                ) : jobsQ.isLoading ? (
                  <LoadingState shape="list" />
                ) : (
                  <div className="text-sm text-muted py-10 text-center">
                    {t("downloads.empty.done")}
                  </div>
                ))}
            </NavGrid>
          </>
        )}

        {tab === "shared" && (
          <NavGrid className="space-y-2">
            {(sharedQ.data ?? []).map((job, i) => {
              // Same media_kind + can_download gate as the library, via the shared helper (S5b).
              const a = sharedRowActions(job);
              return (
                <DownloadRow key={job.id} job={job} navIndex={i} {...rowMenuProps(job)}>
                  {a.play && (
                    <IconBtn
                      open
                      onClick={() => setPlayJob(job)}
                      title={t("downloads.actions.play")}
                    >
                      <PlayCircle className="w-4 h-4" />
                    </IconBtn>
                  )}
                  {a.save && saveBtn(job)}
                </DownloadRow>
              );
            })}
            {(sharedQ.data ?? []).length === 0 &&
              (sharedQ.isError && !sharedQ.data ? (
                <StateMessage tone="error" onRetry={() => sharedQ.refetch()}>
                  {t("common.loadError")}
                </StateMessage>
              ) : sharedQ.isLoading ? (
                <LoadingState shape="list" />
              ) : (
                <div className="text-sm text-muted py-10 text-center">
                  {t("downloads.empty.shared")}
                </div>
              ))}
          </NavGrid>
        )}

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

        <ContextMenu menu={rowMenu} ariaLabel={t("downloads.rowMenu")} items={menuItems} />

        <Suspense fallback={null}>
          {addSource && (
            <DownloadDialog
              source={addSource}
              onClose={() => {
                setAddSource(null);
                setAddUrl("");
              }}
            />
          )}
          {upload && <UploadDialog onClose={() => setUpload(false)} />}
          {manage && <ProfileEditor onClose={() => setManage(false)} />}
          {metaJob && <MetaEditModal job={metaJob} onClose={() => setMetaJob(null)} />}
          {shareJob && <ShareDialog job={shareJob} onClose={() => setShareJob(null)} />}
          {playJob && <LibraryPlayer job={playJob} onClose={() => setPlayJob(null)} />}
          {editJob && <VideoEditor job={editJob} onClose={() => setEditJob(null)} />}
          {errorJob && (
            <ErrorModal
              job={errorJob}
              onRetry={() => actions.run(errorJob, "resume")}
              onClose={() => setErrorJob(null)}
            />
          )}
        </Suspense>
      </div>
    </>
  );
}