import { t } from "../../lib/console-text";
import type { MachineView } from "../../../machines";
import { DEFAULT_SESSION_USAGE_LIMIT_LABELS } from "../../../usage";
import type { NewSessionSelectionHistory, Rig } from "@opengeni/sdk";
import {
  BoxIcon,
  GaugeIcon,
  InfinityIcon,
  LaptopIcon,
  LockIcon,
  MessageSquareIcon,
  ServerIcon,
  UsersIcon,
} from "lucide-react";
import { useEffect, useId, useRef, type ReactNode } from "react";

import { Button } from "../../../ui/button";
import { ComposerMenuHeader } from "../../../ui/composer-menu";
import { DropdownMenuItem } from "../../../ui/dropdown-menu";
import {
  RadioGroup,
  RadioRow,
  useFocusCheckedRow,
  type MenuBodyPresentation,
} from "./composer-menu-radio";
export type { MenuBodyPresentation } from "./composer-menu-radio";
import { HelpTip } from "../../../ui/inline-help";
import { Input } from "../../../ui/input";
import { Notice } from "../../../ui/notice";
import { MENU_LABEL_CLASS, MENU_NOTE_CLASS, MENU_SEPARATOR_CLASS } from "../../../ui/menu-styles";
import { isMachineComputeSelectable } from "../../lib/machine-selectability";
import {
  rememberedMachineFolder,
  workspaceDefaultRigOptionLabel,
  type SessionDraft,
} from "../../lib/session-create";
import {
  parseSessionUsageLimitDraft,
  type SessionUsageLimitDraft,
} from "../../lib/session-usage-limit";
import { cn } from "../../lib/utils";

/*
 * Per-session settings of a new chat, as drill-ins of the composer's "+" menu:
 * where it runs (managed sandbox and its environment, or a connected machine
 * and its folder) and who can see it. The composer bar keeps only +, voice,
 * the model and Send.
 *
 * Inside the "+" dropdown the rows are Radix radio items, so arrow keys reach
 * them (a Radix menu traps Tab and roves only over its own items). When the
 * "+" menu presents a drill-in as a dialog, there is no menu to rove in, so
 * the rows are plain radio buttons that Tab reaches.
 */

function machineStateMeta(machine: MachineView): string {
  if (machine.state === "offline") return "Offline";
  if (machine.state === "reconnecting") return "Reconnecting";
  if (!isMachineComputeSelectable(machine.state)) return "Unavailable";
  return machine.os ? `${machine.os}/${machine.arch}` : "";
}

export type RunsOnChoices = {
  draft: SessionDraft;
  machines: MachineView[];
  rigs: Rig[];
  workspaceDefaultRigId: string | null;
  /** The deployment runs sessions only on connected machines. */
  selfhostedPrimary: boolean;
  /**
   * The deployment has no managed sandbox backend. A chat that does not run on
   * a connected machine has no computer at all, so the choice reads as chat
   * only and Sandbox Environments do not apply.
   */
  noManagedSandbox?: boolean | undefined;
  fleetLoadFailed: boolean;
  selectedChannelId: string | null;
  selectionHistory: NewSessionSelectionHistory;
};

/** Whether "Runs on" has anything to choose; otherwise the + menu omits it. */
export function hasRunsOnChoices(
  choices: Pick<
    RunsOnChoices,
    "machines" | "rigs" | "selfhostedPrimary" | "noManagedSandbox" | "fleetLoadFailed" | "draft"
  >,
): boolean {
  return (
    choices.draft.compute.kind === "machine" ||
    choices.selfhostedPrimary ||
    choices.fleetLoadFailed ||
    choices.machines.length > 0 ||
    (!choices.noManagedSandbox && choices.rigs.length > 0)
  );
}

/** The right-aligned value of the "Runs on" row: environment or machine. */
export function runsOnSummary(choices: RunsOnChoices): string {
  const { draft } = choices;
  if (draft.compute.kind === "machine") {
    const sandboxId = draft.compute.sandboxId;
    return (
      choices.machines.find((machine) => machine.sandboxId === sandboxId)?.name ??
      (sandboxId ? "Machine unavailable" : "Choose a machine")
    );
  }
  if (choices.noManagedSandbox) return NO_COMPUTER_LABEL;
  if (draft.rigId) {
    return choices.rigs.find((rig) => rig.id === draft.rigId)?.name ?? "Managed sandbox";
  }
  const fallback = choices.rigs.find((rig) => rig.id === choices.workspaceDefaultRigId);
  return fallback ? fallback.name : "Managed sandbox";
}

/**
 * Why "Runs on" keeps Send disabled, if it does. The choice lives behind "+",
 * so the page says what is missing and where to fix it.
 */
export type RunsOnAttention =
  | "fleet-load-failed"
  | "connect-machine"
  | "pick-machine"
  | "machine-unavailable"
  | null;

export function runsOnAttention(
  choices: Pick<RunsOnChoices, "draft" | "machines" | "fleetLoadFailed"> & {
    fleetLoading: boolean;
  },
): RunsOnAttention {
  // A failed load can hide the machine this chat should run on: always say so.
  if (choices.fleetLoadFailed) return "fleet-load-failed";
  if (choices.fleetLoading) return null;
  const compute = choices.draft.compute;
  if (compute.kind !== "machine") return null;
  if (compute.sandboxId !== null)
    return choices.machines.some(
      (item) => item.sandboxId === compute.sandboxId && isMachineComputeSelectable(item.state),
    )
      ? null
      : "machine-unavailable";
  return choices.machines.length === 0 ? "connect-machine" : "pick-machine";
}

/** A short note under the new-chat composer for what {@link runsOnAttention} found. */
export function RunsOnNotice(props: {
  attention: RunsOnAttention;
  machines: MachineView[];
  disabled?: boolean | undefined;
  onRetryMachines: () => void;
  /** Where to connect a machine (a link to the Machines page). */
  connectAction?: ReactNode | undefined;
}) {
  if (!props.attention) return null;
  if (props.attention === "fleet-load-failed") {
    return (
      <Notice
        tone="muted"
        live="polite"
        action={
          <Button
            type="button"
            variant="outline"
            size="sm"
            disabled={props.disabled}
            onClick={props.onRetryMachines}
          >
            Retry
          </Button>
        }
      >
        Couldn't load your connected machines.
      </Notice>
    );
  }
  if (props.attention === "machine-unavailable")
    return (
      <Notice tone="waiting" live="polite">
        Machine unavailable. Reconnect it or choose another under + &gt; Runs on.
      </Notice>
    );
  if (props.attention === "connect-machine") {
    return (
      <Notice tone="waiting" live="polite" action={props.connectAction}>
        Chats here run on a connected machine. Connect one to send.
      </Notice>
    );
  }
  const anyAvailable = props.machines.some((machine) => isMachineComputeSelectable(machine.state));
  return (
    <Notice tone="waiting" live="polite">
      {anyAvailable
        ? "Pick a machine under + > Runs on to send."
        : "Your connected machines are offline. Pick one under + > Runs on once it's back."}
    </Notice>
  );
}

const SANDBOX_VALUE = "sandbox";
const NO_COMPUTER_LABEL = "No computer";
const machineValue = (sandboxId: string) => `machine:${sandboxId}`;

/**
 * The checked "Sandbox environment" row. An empty rigId follows the workspace
 * default, and so does a restored draft that names the default explicitly:
 * the default isn't listed again, so its row is "Workspace default".
 */
export function checkedRigValue(draft: SessionDraft, workspaceDefaultRigId: string | null): string {
  if (!draft.rigId) return "";
  return draft.rigId === workspaceDefaultRigId ? "" : draft.rigId;
}

export function RunsOnMenuBody(
  props: RunsOnChoices & {
    leading?: ReactNode | undefined;
    presentation?: MenuBodyPresentation | undefined;
    disabled: boolean;
    onChange: (draft: SessionDraft) => void;
    onComputeChange: (draft: SessionDraft) => void;
    onRetryMachines: () => void;
  },
) {
  const { draft } = props;
  const compute = draft.compute;
  const presentation = props.presentation ?? "menu";
  const bodyRef = useRef<HTMLDivElement>(null);
  useFocusCheckedRow(bodyRef, presentation);
  const customPathRowRef = useRef<HTMLElement>(null);
  const customPathInputRef = useRef<HTMLInputElement>(null);
  const focusCustomPath = useRef(false);
  useEffect(() => {
    if (focusCustomPath.current && customPathInputRef.current) {
      focusCustomPath.current = false;
      customPathInputRef.current.focus({ preventScroll: true });
    }
  }, [compute]);
  const personalRigs = props.rigs.filter((rig) => rig.scope === "user");
  const workspaceRigs = props.rigs.filter((rig) => rig.scope !== "user");
  const showWhere =
    compute.kind === "machine" ||
    props.selfhostedPrimary ||
    props.machines.length > 0 ||
    props.fleetLoadFailed;
  const whereValue =
    compute.kind === "sandbox"
      ? props.selfhostedPrimary
        ? null
        : SANDBOX_VALUE
      : compute.sandboxId
        ? machineValue(compute.sandboxId)
        : null;

  const selectSandbox = () => {
    if (compute.kind === "sandbox") return;
    props.onComputeChange({
      ...draft,
      compute: { kind: "sandbox", backend: "" },
    });
  };
  const selectMachine = (machine: MachineView) => {
    if (compute.kind === "machine" && compute.sandboxId === machine.sandboxId) return;
    props.onComputeChange({
      ...draft,
      compute: {
        kind: "machine",
        sandboxId: machine.sandboxId,
        folder: rememberedMachineFolder(
          props.selectionHistory,
          props.selectedChannelId,
          machine.sandboxId,
        ),
      },
    });
  };
  const rigRow = (rig: Rig) => (
    <RadioRow
      key={rig.id}
      value={rig.id}
      disabled={props.disabled}
      label={rig.name}
      meta={rig.activeVersion ? `v${rig.activeVersion.version}` : undefined}
      onSelect={() => props.onChange({ ...draft, rigId: rig.id })}
    />
  );
  const retry =
    presentation === "menu" ? (
      <DropdownMenuItem
        className="min-h-0 w-auto shrink-0 cursor-pointer px-1 py-0 text-xs font-medium text-fg underline underline-offset-2 pointer-coarse:min-h-0"
        onSelect={(event) => {
          event.preventDefault();
          props.onRetryMachines();
        }}
      >
        Try again
      </DropdownMenuItem>
    ) : (
      <button
        type="button"
        className="text-xs font-medium text-fg underline underline-offset-2"
        onClick={props.onRetryMachines}
      >
        Try again
      </button>
    );

  return (
    <>
      <ComposerMenuHeader title="Runs on" leading={props.leading} />
      <div ref={bodyRef} className="min-h-0 overflow-y-auto overscroll-contain pb-1">
        {showWhere ? (
          <RadioGroup presentation={presentation} label="Where" value={whereValue}>
            <p className={MENU_LABEL_CLASS}>Where</p>
            {props.selfhostedPrimary ? null : (
              <RadioRow
                value={SANDBOX_VALUE}
                disabled={props.disabled}
                icon={props.noManagedSandbox ? <MessageSquareIcon /> : <BoxIcon />}
                label={props.noManagedSandbox ? NO_COMPUTER_LABEL : "Managed sandbox"}
                meta={props.noManagedSandbox ? "Chat only" : "Set up for you"}
                onSelect={selectSandbox}
              />
            )}
            {props.machines.map((machine) => (
              <RadioRow
                key={machine.sandboxId}
                value={machineValue(machine.sandboxId)}
                disabled={props.disabled || !isMachineComputeSelectable(machine.state)}
                icon={machine.os === "macos" ? <LaptopIcon /> : <ServerIcon />}
                label={machine.name}
                meta={machineStateMeta(machine)}
                onSelect={() => selectMachine(machine)}
              />
            ))}
            {props.fleetLoadFailed ? (
              <div className={cn(MENU_NOTE_CLASS, "flex items-center justify-between gap-3")}>
                <span>Couldn't load your connected machines.</span>
                {retry}
              </div>
            ) : props.machines.length === 0 && props.selfhostedPrimary ? (
              <p className={MENU_NOTE_CLASS}>Connect a machine to run sessions on it.</p>
            ) : null}
          </RadioGroup>
        ) : null}

        {compute.kind === "sandbox" && !props.noManagedSandbox && props.rigs.length > 0 ? (
          <RadioGroup
            presentation={presentation}
            label="Sandbox environment"
            value={checkedRigValue(draft, props.workspaceDefaultRigId)}
          >
            {showWhere ? <div className={MENU_SEPARATOR_CLASS} /> : null}
            <p className={MENU_LABEL_CLASS}>Sandbox environment</p>
            <RadioRow
              value=""
              disabled={props.disabled}
              label={workspaceDefaultRigOptionLabel(props.workspaceDefaultRigId, props.rigs)}
              onSelect={() => props.onChange({ ...draft, rigId: "" })}
            />
            {workspaceRigs.filter((rig) => rig.id !== props.workspaceDefaultRigId).map(rigRow)}
            {personalRigs.length > 0 ? (
              <>
                <p className={MENU_LABEL_CLASS}>Only me</p>
                {personalRigs.map(rigRow)}
              </>
            ) : null}
          </RadioGroup>
        ) : null}

        {compute.kind === "machine" && compute.sandboxId ? (
          <RadioGroup presentation={presentation} label="Folder" value={compute.folder.kind}>
            <div className={MENU_SEPARATOR_CLASS} />
            <p className={MENU_LABEL_CLASS}>Folder</p>
            <RadioRow
              value="root"
              disabled={props.disabled}
              label="Machine root"
              meta="Where the agent was started"
              onSelect={() =>
                props.onComputeChange({
                  ...draft,
                  compute: { ...compute, folder: { kind: "root" } },
                })
              }
            />
            <RadioRow
              value="path"
              ref={(node) => {
                customPathRowRef.current = node;
              }}
              disabled={props.disabled}
              label="Custom path"
              onSelect={() => {
                focusCustomPath.current = true;
                props.onComputeChange({
                  ...draft,
                  compute: {
                    ...compute,
                    folder: {
                      kind: "path",
                      path: compute.folder.kind === "path" ? compute.folder.path : "",
                    },
                  },
                });
              }}
            />
            {compute.folder.kind === "path" ? (
              <div className="px-2.5 pt-1 pb-1.5">
                <Input
                  ref={customPathInputRef}
                  value={compute.folder.path}
                  disabled={props.disabled}
                  onChange={(event) =>
                    props.onComputeChange({
                      ...draft,
                      compute: {
                        ...compute,
                        folder: { kind: "path", path: event.target.value },
                      },
                    })
                  }
                  onKeyDown={(event) => {
                    // Text editing must not trigger menu typeahead or roving focus.
                    event.stopPropagation();
                    if (
                      presentation === "menu" &&
                      !event.nativeEvent.isComposing &&
                      (event.key === "Tab" || event.key === "Enter")
                    ) {
                      event.preventDefault();
                      customPathRowRef.current?.focus({ preventScroll: true });
                    }
                  }}
                  placeholder="/home/me/repos/project or packages/runtime"
                  aria-label="Custom working directory"
                  className="h-8 text-sm"
                />
              </div>
            ) : null}
            <p className={cn(MENU_NOTE_CLASS, "text-xs leading-4.5")}>
              Uses this machine's checkout, git sign-in and environment. Repositories and variable
              sets aren't added.
            </p>
          </RadioGroup>
        ) : null}
      </div>
    </>
  );
}

/** Whether "Visibility" is a real choice here (Only me is allowed). */
export function hasVisibilityChoice(props: {
  personalWorkspace: boolean;
  canCreatePrivate: boolean;
}): boolean {
  return !props.personalWorkspace && props.canCreatePrivate;
}

export function visibilitySummary(value: "private" | "workspace"): string {
  return value === "private" ? "Only me" : "Workspace";
}

export function VisibilityMenuBody(props: {
  leading?: ReactNode | undefined;
  presentation?: MenuBodyPresentation | undefined;
  value: "private" | "workspace";
  disabled: boolean;
  onChange: (visibility: "private" | "workspace") => void;
}) {
  const presentation = props.presentation ?? "menu";
  const bodyRef = useRef<HTMLDivElement>(null);
  useFocusCheckedRow(bodyRef, presentation);
  return (
    <>
      <ComposerMenuHeader title="Who can see this chat" leading={props.leading} />
      <div ref={bodyRef} className="min-h-0 overflow-y-auto overscroll-contain pb-1">
        <RadioGroup presentation={presentation} label="Who can see this chat" value={props.value}>
          <RadioRow
            value="workspace"
            disabled={props.disabled}
            icon={<UsersIcon />}
            label="Workspace"
            meta="People in this workspace"
            onSelect={() => props.onChange("workspace")}
          />
          <RadioRow
            value="private"
            disabled={props.disabled}
            icon={<LockIcon />}
            label="Only me"
            meta="Just you"
            onSelect={() => props.onChange("private")}
          />
        </RadioGroup>
      </div>
    </>
  );
}

/**
 * The new chat's usage limit: none (the default), or pause at a dollar amount
 * of API-equivalent model usage. Local to this composer, never remembered
 * across chats; sent on create only when the server offers limits.
 *
 * It holds a text field, so "+" always opens it as a dialog (a menu may only
 * contain menu items): a radio group and a labelled input with ordinary Tab
 * order, Escape to close and focus back on "+".
 */
export function UsageLimitMenuBody(props: {
  leading?: ReactNode | undefined;
  /** Accepted for the shared drill-in contract; this body is always a dialog. */
  presentation?: MenuBodyPresentation | undefined;
  value: SessionUsageLimitDraft;
  disabled: boolean;
  /** A Send was blocked by this amount: show "enter an amount" even when empty. */
  showRequiredError?: boolean | undefined;
  onChange: (value: SessionUsageLimitDraft) => void;
}) {
  const bodyRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const focusInput = useRef(false);
  const inputId = useId();
  const errorId = `${inputId}-error`;
  const helpId = `${inputId}-help`;
  const value = props.value;
  // Open on the checked choice (the dialog would otherwise focus Back).
  useEffect(() => {
    const body = bodyRef.current;
    if (!body || body.contains(document.activeElement)) return;
    body
      .querySelector<HTMLElement>('[role="radio"][aria-checked="true"]:not(:disabled)')
      ?.focus({ preventScroll: true });
  }, []);
  useEffect(() => {
    if (focusInput.current && inputRef.current) {
      focusInput.current = false;
      inputRef.current.focus({ preventScroll: true });
    }
  }, [value.kind]);
  const parsed = parseSessionUsageLimitDraft(value);
  const error =
    value.kind === "limit" && !parsed.ok && (value.text.trim() || props.showRequiredError)
      ? parsed.error
      : null;
  const labels = DEFAULT_SESSION_USAGE_LIMIT_LABELS(t);
  return (
    <>
      <ComposerMenuHeader title={labels.title} leading={props.leading} />
      <div
        ref={bodyRef}
        data-usage-limit-menu
        className="min-h-0 overflow-y-auto overscroll-contain pb-1"
      >
        <RadioGroup presentation="dialog" label={labels.title} value={value.kind}>
          <RadioRow
            value="none"
            disabled={props.disabled}
            icon={<InfinityIcon />}
            label={labels.noLimit}
            onSelect={() => props.onChange({ kind: "none" })}
          />
          <RadioRow
            value="limit"
            disabled={props.disabled}
            icon={<GaugeIcon />}
            label="Pause at an amount"
            onSelect={() => {
              if (value.kind === "limit") {
                inputRef.current?.focus({ preventScroll: true });
                return;
              }
              focusInput.current = true;
              props.onChange({ kind: "limit", text: "" });
            }}
          />
        </RadioGroup>
        {value.kind === "limit" ? (
          <div className="px-2.5 pt-1 pb-1.5">
            <label htmlFor={inputId} className="mb-1 block text-xs leading-4.5 text-fg-muted">
              Limit in US dollars
            </label>
            <div className="relative">
              <span
                aria-hidden="true"
                className="pointer-events-none absolute inset-y-0 left-3 flex items-center text-sm text-fg-muted"
              >
                $
              </span>
              <Input
                id={inputId}
                ref={inputRef}
                value={value.text}
                disabled={props.disabled}
                inputMode="decimal"
                autoComplete="off"
                placeholder="25.00"
                aria-invalid={error ? true : undefined}
                aria-describedby={error ? `${errorId} ${helpId}` : helpId}
                onChange={(event) => props.onChange({ kind: "limit", text: event.target.value })}
                onKeyDown={(event) => {
                  // The value applies as typed; Enter must not submit anything.
                  if (event.key === "Enter" && !event.nativeEvent.isComposing) {
                    event.preventDefault();
                  }
                }}
                className="h-8 pl-6 text-sm pointer-coarse:h-11"
              />
            </div>
            {error ? (
              <p id={errorId} className="mt-1.5 text-xs leading-4.5 text-danger">
                {error}
              </p>
            ) : null}
          </div>
        ) : null}
        <p
          id={helpId}
          className={cn(MENU_NOTE_CLASS, "flex items-start gap-1.5 text-xs leading-4.5")}
        >
          <span className="min-w-0 flex-1">{labels.explanation}</span>
          <HelpTip label="About usage limits">{labels.notYourBill}</HelpTip>
        </p>
      </div>
    </>
  );
}