import { useEffect, useId, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { UploadCloud, File as FileIcon } from "lucide-react";
import Modal, { ModalFooter } from "../../components/ui/Modal";
import { Button } from "../../components/ui/Button";
import { api } from "../../lib/api";
import { qk } from "../../lib/queryKeys";
import { isAborted } from "../../lib/api/core";
import { notifyActionError } from "../../lib/actionErrors";
import { invalidateDownloads } from "../../lib/downloads";
import { notify } from "../../lib/notifications";
import { showInTray, uploadEnded, uploadStarted } from "../../lib/downloadQueue";
import type { DownloadJob } from "../../lib/api";
import { useFilesActions } from "./filesContext";
import { formatBytes } from "../../lib/format";
import { DISPLAY_NAME_MAX } from "../../lib/api/downloads";
import { DropZone } from "../../components/ui/DropZone";
import { Input } from "../../components/ui/Input";

// Local-file ingest. A general upload — ANY file type, no format list: media
// (video/audio) joins the library with the full function set, a generic file is download-only. The
// file is streamed to the server via XHR so this dialog can show real upload progress. On success it
// lands in the library (Files) as an already-`done` job — or, for media no phone could play as it is (an
// iPhone's HEVC, a webm, an mkv), as a `queued` job the worker converts first — so we invalidate,
// say which, and point the user there.
// Out here, not inline in the upload handler: a `?:` inside its `try` makes the React Compiler
// skip the whole dialog.
const uploadedKey = (status: string) =>
  status === "done" ? "downloads.upload.added" : "downloads.upload.addedConverting";
// The job the upload's own notice announces (a done one), for the queue not to say it again.
const announces = (job: { id: number; status: string }) => (job.status === "done" ? job.id : null);
export default function UploadDialog({
  folderId = null,
  initialFile = null,
  onClose,
}: {
  /** The library folder the file goes into (an own folder, or the Uploads folder); null = Uploads. */
  folderId?: number | null;
  /** A file already chosen — dropped on the Files page — so the dialog opens ready to send it. */
  initialFile?: File | null;
  onClose: () => void;
}) {
  const { t, i18n } = useTranslation();
  const lang = i18n.language;
  const qc = useQueryClient();
  const [file, setFile] = useState<File | null>(initialFile);
  const [name, setName] = useState("");
  const [pct, setPct] = useState<number | null>(null); // null = idle; 0–100 while uploading
  const abortRef = useRef<AbortController | null>(null);
  const busy = pct !== null;
  // The per-file cap, so an over-cap file is refused HERE instead of after the user has pushed it up
  // the wire. Both server-side caps are still the boundary — this is only the pleasant half of it.
  // On a default install the one that answers is the edge ceiling (`bodylimit`), whose refusal
  // carries no number, so without this the user would be told "too large" and not what the limit is.
  // A cap that has not loaded yet blocks nothing — the server still refuses, honestly.
  const cap = useQuery({ queryKey: qk.storageUsage(), queryFn: api.filesUsage }).data
    ?.upload_max_bytes;
  const tooBig = !!file && !!cap && file.size > cap;
  const refusalId = useId();
  // Every pick gets a new number, so the refusal below REMOUNTS rather than being reconciled. Two
  // over-cap picks in a row leave the node and its text identical — the message names the cap, not
  // the file — and a live region that is not touched is not announced, so the second refusal was
  // silent to a screen reader. `SetupWizard` and `Welcome` both key their alerts for the
  // same reason, and `formAlerts.dom.test.tsx` is the test that exists because of it.
  const [pickSeq, setPickSeq] = useState(0);
  const { openFile } = useFilesActions();
  // A done file is in Files, opened on it; one the worker still converts is in the tray until it is.
  const openUploaded = (job: DownloadJob) => {
    if (job.status === "done") openFile(job.id, job.folder_id ?? null);
    else showInTray(job.id);
  };
  const pick_ = (f: File) => {
    setFile(f);
    setName("");
    setPickSeq((n) => n + 1);
  };

  // Closing the dialog mid-upload (X / ESC / backdrop / browser Back all unmount us) must abort the
  // in-flight XHR — otherwise it keeps streaming in the background and still toasts success. Only the
  // footer Cancel wired the abort; this covers every other dismissal.
  useEffect(() => () => abortRef.current?.abort(), []);

  const submit = async () => {
    // `tooBig` here is belt and braces, NOT the mechanism: `ui/Button` is focus-safe, so while the
    // button holds focus it swallows the activation itself, and while it does not it is natively
    // disabled. Measured — deleting this term breaks nothing, which is exactly why it must not be
    // described as the guard. It is here for the next caller of `submit`, not for the only one.
    if (!file || busy || tooBig) return;
    const ac = new AbortController();
    abortRef.current = ac;
    setPct(0);
    const displayName = name.trim() || undefined;
    uploadStarted();
    try {
      const job = await api.uploadFile(file, {
        displayName,
        folderId,
        onProgress: setPct,
        signal: ac.signal,
      });
      // Said here, so the queue does not say it again; one the worker still converts is the tray's
      // to announce when it is done.
      uploadEnded(announces(job));
      invalidateDownloads(qc);
      notify({
        level: "success",
        message: t(uploadedKey(job.status)),
        action: {
          label: t("downloads.dialog.view"),
          onClick: () => openUploaded(job),
        },
      });
      onClose();
    } catch (e) {
      // Everything except the user's own Cancel is said out loud. `uploadReq` shares `reportFailure`
      // with `req`, which deliberately leaves 403/404/429 to the caller and answers a 502/503/504
      // with only the transient "connection lost" notice — so this empty catch meant a proxy 502 on
      // a long upload, or an nginx 413, snapped the dialog back to its pre-upload state with nothing
      // named and no job in the list. The comment here claimed the global error modal had it; it
      // had not since the shared `reportFailure` landed.
      uploadEnded(null);
      if (!isAborted(e)) notifyActionError(e, t("downloads.upload.failed"));
      // Re-arm the form so the user can retry or pick again.
      setPct(null);
      abortRef.current = null;
    }
  };

  return (
    <Modal initialFocus="field" title={t("downloads.upload.title")} onClose={onClose}>
      <p className="text-sm text-muted mb-4">{t("downloads.upload.hint")}</p>

      {/* Drop zone doubles as the picker trigger — a click anywhere opens the native file dialog.
          With a file picked, its label shows the file's name rather than `dropActive`, so the
          zone's drag border is the only feedback that it will take a replacement. */}
      <DropZone
        className="px-4 py-8"
        onFiles={([f]) => pick_(f)}
        disabled={busy}
        invalid={tooBig}
        describedBy={tooBig ? refusalId : undefined}
      >
        {(dragOver) =>
          file ? (
            <>
              <FileIcon className="w-6 h-6 text-muted" />
              <span className="text-sm font-medium break-all">{file.name}</span>
              <span className="text-xs text-muted">{formatBytes(file.size, lang)}</span>
            </>
          ) : (
            <>
              <UploadCloud className="w-7 h-7 text-muted" />
              <span className="text-sm text-muted">
                {dragOver ? t("downloads.upload.dropActive") : t("downloads.upload.drop")}
              </span>
            </>
          )
        }
      </DropZone>

      {tooBig && (
        <p key={pickSeq} id={refusalId} className="text-xs text-danger mt-2" role="alert">
          {t("downloads.errors.upload.tooLarge", { size: formatBytes(cap ?? 0, lang) })}
        </p>
      )}

      <label htmlFor="upload-display-name" className="block text-sm font-medium mt-4 mb-1">
        {t("downloads.upload.nameLabel")}
      </label>
      <Input
        className="w-full"
        id="upload-display-name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder={t("downloads.upload.namePlaceholder")}
        disabled={busy}
        // The column behind it is varchar(255) and the name rides in a REQUEST HEADER, where
        // nothing else bounds it; the server truncates to the same number. The number is not a
        // third copy: `downloads.contract.test.ts` holds DISPLAY_NAME_MAX against the backend's
        // own DISPLAY_TEXT_MAX.
        maxLength={DISPLAY_NAME_MAX}
      />

      {busy && (
        <div className="mt-5" aria-live="polite">
          <div
            className="h-2 rounded-full bg-surface overflow-hidden"
            role="progressbar"
            aria-valuenow={pct ?? 0}
            aria-valuemin={0}
            aria-valuemax={100}
            // A STABLE descriptor as the name; the live percentage rides aria-valuenow (and the visible
            // <p> below re-announces it via the aria-live wrapper) — don't bake the value into the name.
            aria-label={t("downloads.upload.uploadProgress")}
          >
            <div
              className="h-full bg-accent transition-[width] duration-150"
              style={{ width: `${pct ?? 0}%` }}
            />
          </div>
          <p className="text-xs text-muted mt-1.5 text-center">
            {t("downloads.upload.uploading", { pct: pct ?? 0 })}
          </p>
        </div>
      )}

      <ModalFooter>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => (busy ? abortRef.current?.abort() : onClose())}
        >
          {t("downloads.actions.cancel")}
        </Button>
        {/* Plain `disabled` — `ui/Button` is a FocusSafeButton, which already expresses it as
            `aria-disabled` + a click guard for as long as the button HOLDS focus, so this cannot
            strand a keyboard user on <body> when the cap arrives late or a second file is dropped.
            `submit` refuses independently, which is what that soft state relies on. The REASON is
            reachable from the drop zone (aria-invalid + aria-describedby above) rather than from
            here, because a natively disabled button is not in the tab order to be asked. */}
        <Button
          variant="primary"
          size="sm"
          onClick={submit}
          disabled={!file || busy || tooBig}
          aria-describedby={tooBig ? refusalId : undefined}
        >
          {t("downloads.upload.submit")}
        </Button>
      </ModalFooter>
    </Modal>
  );
}