/**
 * @file BackgroundJobsDock.tsx
 * @description The one bottom-right stack of background work, rendered once
 * by `Layout`: a chip per background clone (`lib/cloneJobs.ts`, kept by the
 * server, so it is back after F5 or a server restart) and per File Explorer
 * upload (`lib/uploadJobs.ts`). A clone chip shows its queue place, then
 * git's progress, with **Stop** (click twice) while it runs; once finished,
 * **Open workspace** (done), the reason plus **Retry** (failed, interrupted,
 * stopped) — an inline login form when the host wants one, a link to
 * Settings → Git when it refused the SSH key — and × to dismiss. An upload
 * chip shows its progress with **Stop**; one a reload cut short says how far
 * it got. Several chips collapse to one small pill.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useEffect, useRef, useState, type ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { Link, useNavigate } from "react-router-dom";
import { ChevronDown, FolderGit2, Square, Upload, X } from "lucide-react";
import type { CloneJob } from "../lib/api";
import {
  cancelCloneJob,
  cloneJobError,
  dismissCloneJob,
  ensureCloneJobs,
  isActiveJob,
  retryCloneJob,
  useCloneJobs,
} from "../lib/cloneJobs";
import { dismissUpload, stopUpload, useUploadJobs, type UploadJob } from "../lib/uploadJobs";
import { useArmed } from "../hooks/useArmed";
import { CloneProgress } from "./lanes/CloneProgress";

const chipClass =
  "pointer-events-auto w-full space-y-1.5 rounded-lg border border-border bg-surface-1 p-2.5 text-xs shadow-xl shadow-black/40";

function IconButton({
  label,
  onClick,
  children,
  danger,
  testId,
}: {
  label: string;
  onClick: () => void;
  children: ReactNode;
  danger?: boolean;
  testId?: string;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      title={label}
      aria-label={label}
      data-testid={testId}
      className={`-m-0.5 shrink-0 rounded p-1 hover:bg-surface-2 ${
        danger ? "text-status-danger" : "text-fg-muted hover:text-fg-primary"
      }`}
    >
      {children}
    </button>
  );
}

function CloneJobChip({ job }: { job: CloneJob }) {
  const { t } = useTranslation("lanes");
  const navigate = useNavigate();
  const { arm, isArmed, disarm } = useArmed();
  const [login, setLogin] = useState({ username: "", token: "", remember: true });
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const active = isActiveJob(job);
  const code = job.error?.code;
  const laneId = job.kind === "workspace" ? (job.result?.laneId ?? null) : job.laneId;
  const title =
    job.state === "done"
      ? t("cloneJobs.done", { name: job.name })
      : job.state === "cancelled"
        ? t("cloneJobs.cancelledTitle", { name: job.name })
        : active
          ? t("cloneJobs.cloning", { name: job.name })
          : t("cloneJobs.failedTitle", { name: job.name });

  const retry = async (withLogin: boolean) => {
    if (busy) return;
    setBusy(true);
    setError(null);
    try {
      await retryCloneJob(
        job.id,
        withLogin
          ? { username: login.username.trim(), password: login.token, remember: login.remember }
          : undefined
      );
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
      setBusy(false);
    }
  };

  const stop = () => {
    if (!isArmed("stop")) return arm("stop");
    disarm();
    void cancelCloneJob(job.id);
  };

  return (
    <div className={chipClass} data-testid="clone-job" data-state={job.state} title={job.target}>
      <div className="flex items-center gap-2">
        <FolderGit2 className="h-3.5 w-3.5 shrink-0 text-fg-muted" />
        <span className="min-w-0 flex-1 truncate font-medium text-fg-primary">{title}</span>
        {active ? (
          <IconButton
            label={isArmed("stop") ? t("cloneJobs.stopConfirm") : t("cloneJobs.stop")}
            onClick={stop}
            danger={isArmed("stop")}
            testId="clone-job-stop"
          >
            <Square className="h-3 w-3" />
          </IconButton>
        ) : (
          <IconButton
            label={t("cloneJobs.dismiss")}
            onClick={() => void dismissCloneJob(job.id)}
            testId="clone-job-dismiss"
          >
            <X className="h-3.5 w-3.5" />
          </IconButton>
        )}
      </div>
      {active && isArmed("stop") && (
        <p className="text-[11px] text-status-danger">{t("cloneJobs.stopConfirm")}</p>
      )}
      {active && <CloneProgress view={job} />}
      {job.state === "done" && (
        <div className="flex items-center justify-between gap-2">
          <span className="min-w-0 truncate font-mono text-[10px] text-fg-muted">
            {job.result?.path || job.target}
          </span>
          {laneId !== null && (
            <button
              type="button"
              className="shrink-0 text-accent hover:underline"
              onClick={() => {
                navigate(`/workspace?lane=${laneId}`);
                void dismissCloneJob(job.id);
              }}
            >
              {job.kind === "workspace" ? t("cloneJobs.openWorkspace") : t("cloneJobs.open")}
            </button>
          )}
        </div>
      )}
      {!active && job.state !== "done" && (
        <>
          <p
            role={job.state === "cancelled" ? undefined : "alert"}
            className={`text-[11px] [overflow-wrap:anywhere] ${
              job.state === "cancelled" ? "text-fg-secondary" : "text-status-danger"
            }`}
          >
            {cloneJobError(job)}{" "}
            {code === "ESSHAUTH" && (
              // A router link: a plain <a href> reloaded the whole app.
              <Link to="/settings/git#git-identity" className="underline">
                {t("clone.sshSettings")}
              </Link>
            )}
          </p>
          {code === "ECREDENTIALS" && job.state === "failed" ? (
            <form
              data-testid="clone-job-login"
              className="space-y-1.5"
              onSubmit={(e) => {
                e.preventDefault();
                void retry(true);
              }}
            >
              <input
                aria-label={t("clone.username")}
                placeholder={t("clone.username")}
                autoComplete="username"
                value={login.username}
                onChange={(e) => setLogin({ ...login, username: e.target.value })}
                className="input w-full text-xs"
              />
              <input
                type="password"
                aria-label={t("clone.token")}
                placeholder={t("clone.token")}
                autoComplete="current-password"
                value={login.token}
                onChange={(e) => setLogin({ ...login, token: e.target.value })}
                className="input w-full text-xs"
              />
              <div className="flex items-center justify-between gap-2">
                <label className="flex items-center gap-1.5 text-[11px] text-fg-secondary">
                  <input
                    type="checkbox"
                    checked={login.remember}
                    onChange={(e) => setLogin({ ...login, remember: e.target.checked })}
                  />
                  {t("clone.remember")}
                </label>
                <button
                  type="submit"
                  disabled={busy || !login.username.trim() || !login.token}
                  className="btn-primary text-xs"
                >
                  {t("cloneJobs.retryLogin")}
                </button>
              </div>
            </form>
          ) : (
            code !== "ESSHAUTH" && (
              <div className="flex justify-end">
                <button
                  type="button"
                  disabled={busy}
                  onClick={() => void retry(false)}
                  className="btn-ghost text-xs"
                >
                  {t("cloneJobs.retry")}
                </button>
              </div>
            )
          )}
          {error && (
            <p role="alert" className="text-[11px] text-status-danger [overflow-wrap:anywhere]">
              {error}
            </p>
          )}
        </>
      )}
    </div>
  );
}

function UploadChip({ job }: { job: UploadJob }) {
  const { t } = useTranslation("lanes");
  const { arm, isArmed, disarm } = useArmed();
  if (job.state === "interrupted") {
    return (
      <div className={chipClass} data-testid="upload-job" data-state="interrupted">
        <div className="flex items-start gap-2">
          <Upload className="mt-0.5 h-3.5 w-3.5 shrink-0 text-fg-muted" />
          <p className="min-w-0 flex-1 text-[11px] text-fg-secondary [overflow-wrap:anywhere]">
            {t("uploads.interrupted", {
              total: job.total,
              folder: job.folder,
              done: job.done,
            })}
          </p>
          <IconButton label={t("cloneJobs.dismiss")} onClick={() => dismissUpload(job.id)}>
            <X className="h-3.5 w-3.5" />
          </IconButton>
        </div>
      </div>
    );
  }
  const stopping = job.state === "stopping";
  return (
    <div className={chipClass} data-testid="fx-progress" data-state={job.state}>
      <div className="flex items-center gap-2">
        <Upload className="h-3.5 w-3.5 shrink-0 text-fg-muted" />
        <span className="min-w-0 flex-1 truncate font-medium text-fg-primary">
          {stopping
            ? t("uploads.stopping")
            : t("fx.uploading", { done: Math.min(job.done + 1, job.total), total: job.total })}
        </span>
        {!stopping && (
          <IconButton
            label={isArmed("stop") ? t("uploads.stopConfirm") : t("uploads.stop")}
            danger={isArmed("stop")}
            testId="upload-job-stop"
            onClick={() => {
              if (!isArmed("stop")) return arm("stop");
              disarm();
              stopUpload(job.id);
            }}
          >
            <Square className="h-3 w-3" />
          </IconButton>
        )}
      </div>
      {isArmed("stop") && !stopping && (
        <p className="text-[11px] text-status-danger">{t("uploads.stopConfirm")}</p>
      )}
      {job.waiting && !stopping && (
        <p className="text-[11px] text-status-warning" role="status" data-testid="upload-waiting">
          {t("uploads.waiting")}
        </p>
      )}
      <p className="truncate text-[11px] text-fg-muted" title={job.folder}>
        {job.folder}
        {job.name ? ` · ${job.name}` : ""}
      </p>
      <div className="h-1.5 overflow-hidden rounded bg-surface-3">
        <div
          className="h-full bg-accent-solid transition-[width]"
          style={{ width: `${Math.min(100, (job.sent / Math.max(1, job.bytes)) * 100)}%` }}
        />
      </div>
    </div>
  );
}

export function BackgroundJobsDock() {
  const { t } = useTranslation("lanes");
  const jobs = useCloneJobs();
  const uploads = useUploadJobs();
  const [collapsed, setCollapsed] = useState(false);
  const dockRef = useRef<HTMLDivElement>(null);
  useEffect(() => ensureCloneJobs(), []);

  const count = jobs.length + uploads.length;
  // Toasts stack ABOVE the dock (Toaster reads --jobs-dock-h): they used to
  // sit on the same corner and cover a chip's × / Retry / Stop.
  useEffect(() => {
    const root = document.documentElement;
    const el = dockRef.current;
    if (!count || !el) {
      root.style.removeProperty("--jobs-dock-h");
      return;
    }
    const set = () => root.style.setProperty("--jobs-dock-h", `${el.offsetHeight + 8}px`);
    set();
    const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(set);
    ro?.observe(el);
    return () => {
      ro?.disconnect();
      root.style.removeProperty("--jobs-dock-h");
    };
  }, [count, collapsed]);
  if (!count) return null;
  const running =
    jobs.filter(isActiveJob).length + uploads.filter((u) => u.state !== "interrupted").length;

  return (
    <div
      ref={dockRef}
      role="region"
      aria-label={t("jobs.dock")}
      data-testid="jobs-dock"
      className="pointer-events-none fixed bottom-10 right-4 z-[60] flex max-h-[70vh] w-[min(20rem,calc(100vw-2rem))] flex-col items-end gap-2 overflow-y-auto"
    >
      {count > 1 && collapsed ? (
        <button
          type="button"
          data-testid="jobs-dock-pill"
          onClick={() => setCollapsed(false)}
          title={t("jobs.expand")}
          className="pointer-events-auto flex items-center gap-1.5 rounded-full border border-border bg-surface-1 px-3 py-1 text-xs text-fg-primary shadow-lg shadow-black/40 hover:bg-surface-2"
        >
          <FolderGit2 className="h-3.5 w-3.5 text-fg-muted" />
          {t("jobs.count", { count })}
          {running > 0 && (
            <span className="text-fg-muted">· {t("jobs.running", { count: running })}</span>
          )}
        </button>
      ) : (
        <>
          {count > 1 && (
            <button
              type="button"
              data-testid="jobs-dock-collapse"
              onClick={() => setCollapsed(true)}
              className="pointer-events-auto flex items-center gap-1 rounded-full border border-border bg-surface-1 px-2 py-0.5 text-[11px] text-fg-secondary shadow hover:bg-surface-2"
            >
              {t("jobs.count", { count })}
              <ChevronDown className="h-3 w-3" />
            </button>
          )}
          {uploads.map((u) => (
            <UploadChip key={u.id} job={u} />
          ))}
          {jobs.map((j) => (
            <CloneJobChip key={j.id} job={j} />
          ))}
        </>
      )}
    </div>
  );
}