import { lazy, Suspense, useState } from "react";
import { useTranslation } from "react-i18next";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import Modal from "./Modal";
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 { navigateTo } from "../lib/nav";

const inputCls =
  "w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40";

// Preset picker shown when the user hits Download on a card / in the player, or adds a URL from
// the Download Center. Enqueues via the API and points the user at the Download Center.
export default function DownloadDialog({
  source,
  title,
  onClose,
}: {
  source: string;
  title?: string | null;
  onClose: () => void;
}) {
  const { t } = useTranslation();
  const qc = useQueryClient();
  const profilesQ = useQuery({ queryKey: ["download-profiles"], 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 chosen = profileId ?? profiles[0]?.id ?? null;

  const submit = async () => {
    if (!chosen || busy) return;
    setBusy(true);
    try {
      await api.enqueueDownload({
        source,
        profile_id: chosen,
        display_name: name.trim() || undefined,
      });
      invalidateDownloads(qc);
      notify({
        level: "success",
        message: t("downloads.dialog.added"),
        action: { label: t("downloads.dialog.view"), onClick: () => navigateTo("downloads") },
      });
      onClose();
    } catch {
      // Non-quiet request: the global error dialog already surfaced the reason (e.g. quota).
      setBusy(false);
    }
  };

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

      <label className="block text-sm font-medium mb-1">{t("downloads.dialog.profile")}</label>
      <select
        value={chosen ?? ""}
        onChange={(e) => setProfileId(Number(e.target.value))}
        className={inputCls}
      >
        {profiles.map((p) => (
          <option key={p.id} value={p.id}>
            {p.name}
          </option>
        ))}
      </select>
      <button
        type="button"
        onClick={() => setManage(true)}
        className="text-xs text-accent hover:underline mt-1 mb-4"
      >
        {t("downloads.dialog.manage")}
      </button>

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

      <div className="flex justify-end gap-2">
        <button
          onClick={onClose}
          className="px-3 py-1.5 rounded-lg text-sm text-muted hover:text-fg hover:bg-surface transition"
        >
          {t("downloads.actions.cancel")}
        </button>
        <button
          onClick={submit}
          disabled={busy || !chosen}
          className="px-3 py-1.5 rounded-lg text-sm font-medium bg-accent text-accent-fg hover:opacity-90 disabled:opacity-50 transition"
        >
          {t("downloads.dialog.submit")}
        </button>
      </div>

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