import type { EnvironmentId, ServerSelfUpdateCapability } from "@t3tools/contracts";
import type { ServerUpdateState } from "@t3tools/client-runtime/state/server";
import {
  isAtomCommandInterrupted,
  squashAtomCommandFailure,
} from "@t3tools/client-runtime/state/runtime";
import { CheckIcon } from "lucide-react";

import { useCopyToClipboard } from "~/hooks/useCopyToClipboard";
import { cn } from "~/lib/utils";
import { serverEnvironment } from "~/state/server";
import { useAtomCommand } from "~/state/use-atom-command";
import { manualServerUpdateCommand } from "~/versionSkew";
import { Button } from "./ui/button";
import { toastManager } from "./ui/toast";

const UPDATE_STEPS = [
  { stage: "downloading", label: "Download", activeLabel: "Downloading" },
  { stage: "installing", label: "Install", activeLabel: "Installing" },
  { stage: "resuming", label: "Resume", activeLabel: "Resuming" },
] as const;
const pendingUpdateEnvironmentIds = new Set<EnvironmentId>();

function updateFailureMessage(error: unknown): string {
  return error instanceof Error ? error.message : "Server update failed.";
}

/**
 * Monochrome step rail for an in-flight server update. The update is a
 * wait, not a warning: done steps recede to gray, the active step is the
 * only bright element and pulses. Failure keeps the rail but surfaces the
 * error below it.
 */
export function ServerUpdateProgress({
  fromVersion,
  state,
}: {
  readonly fromVersion: string;
  readonly state: Exclude<ServerUpdateState, { status: "idle" }>;
}) {
  const currentIndex = UPDATE_STEPS.findIndex(({ stage }) => stage === state.stage);

  return (
    <div className="mt-1 min-w-0 space-y-2.5">
      <p className="text-xs text-muted-foreground/70">
        {fromVersion} <span aria-hidden="true">→</span> {state.targetVersion}
      </p>
      <ol className="flex min-w-0 items-center" aria-label="Server update progress">
        {UPDATE_STEPS.map((step, index) => {
          const complete = index < currentIndex;
          const current = index === currentIndex;
          const failed = current && state.status === "failed";
          const running = current && state.status === "running";
          return (
            <li
              key={step.stage}
              className={cn(
                "flex min-w-0 items-center text-xs font-medium",
                index < UPDATE_STEPS.length - 1 ? "flex-1" : null,
                complete
                  ? "text-muted-foreground"
                  : failed
                    ? "text-destructive"
                    : running
                      ? "animate-status-pulse text-foreground"
                      : "text-muted-foreground/50",
              )}
              aria-current={running ? "step" : undefined}
            >
              {complete ? (
                <CheckIcon
                  className="size-3.5 shrink-0 opacity-70"
                  strokeWidth={2.5}
                  aria-hidden="true"
                />
              ) : (
                <span
                  className={cn(
                    "size-1.5 shrink-0 rounded-full",
                    failed
                      ? "bg-destructive"
                      : running
                        ? "bg-foreground"
                        : "border border-muted-foreground/40",
                  )}
                  aria-hidden="true"
                />
              )}
              <span className="ml-1.5 truncate">{running ? step.activeLabel : step.label}</span>
              {index < UPDATE_STEPS.length - 1 ? (
                <span
                  className={cn(
                    "mx-2 h-px min-w-3 flex-1",
                    complete ? "bg-muted-foreground/40" : "bg-border",
                  )}
                  aria-hidden="true"
                />
              ) : null}
            </li>
          );
        })}
      </ol>
      {state.status === "failed" ? (
        <p className="text-xs text-destructive" role="alert">
          {state.message}
        </p>
      ) : null}
    </div>
  );
}

/**
 * Offers the update path advertised by a version-skewed server. Self-updates
 * delegate their full lifecycle to client-runtime so this component can
 * unmount during reconnect without losing operation state.
 */
export function ServerUpdateAction({
  environmentId,
  serverLabel,
  selfUpdate,
  targetVersion,
  label = "Update server",
}: {
  readonly environmentId: EnvironmentId;
  readonly serverLabel: string;
  readonly selfUpdate: ServerSelfUpdateCapability | null;
  readonly targetVersion: string;
  readonly label?: string;
}) {
  const updateServer = useAtomCommand(serverEnvironment.updateServer, {
    reportFailure: false,
  });
  const { copyToClipboard } = useCopyToClipboard<{ command: string }>({
    target: "update command",
    onCopy: ({ command }) => {
      toastManager.add({
        type: "success",
        title: "Update command copied",
        description: `Run \`${command}\` on ${serverLabel} to update it.`,
      });
    },
    onError: (error) => {
      toastManager.add({
        type: "error",
        title: "Could not copy update command",
        description: error.message,
      });
    },
  });

  const handleUpdate = async () => {
    if (pendingUpdateEnvironmentIds.has(environmentId)) {
      return;
    }
    pendingUpdateEnvironmentIds.add(environmentId);
    try {
      const result = await updateServer({
        environmentId,
        input: { targetVersion },
      });
      if (result._tag === "Failure") {
        if (isAtomCommandInterrupted(result)) {
          return;
        }
        toastManager.add({
          type: "error",
          title: "Server update failed",
          description: updateFailureMessage(squashAtomCommandFailure(result)),
        });
        return;
      }
      toastManager.add({
        type: "success",
        title: `${serverLabel} updated`,
        description: `Reconnected on t3@${result.value.targetVersion}.`,
      });
    } finally {
      pendingUpdateEnvironmentIds.delete(environmentId);
    }
  };

  if (selfUpdate === "desktop-managed") {
    return (
      <span className="text-muted-foreground text-xs">
        Update the desktop app on that machine to update this server.
      </span>
    );
  }

  if (selfUpdate === null) {
    const command = manualServerUpdateCommand(targetVersion);
    return (
      <Button size="xs" variant="outline" onClick={() => copyToClipboard(command, { command })}>
        Copy update command
      </Button>
    );
  }

  return (
    <Button size="xs" onClick={() => void handleUpdate()}>
      {label}
    </Button>
  );
}