import type { ClientModel, LatencyMode, ReasoningEffort } from "@opengeni/sdk";
import { ArrowRightIcon, CheckIcon, SearchIcon, ZapIcon } from "lucide-react";
import { useRef, useState, type RefObject, type CSSProperties } from "react";
import { Popover, RadioGroup } from "radix-ui";
import { containedPortal } from "../ui/portal-container";
import { cn } from "../lib/cn";
import {
  MENU_CHECK_CLASS,
  MENU_LABEL_CLASS,
  MENU_NOTE_CLASS,
  MENU_SURFACE_CLASS,
} from "../lib/menu-styles";
import { labelReasoningEffort, type PickerModelRow } from "../model-policy";
import {
  compactEffortLabel,
  groupPresentationFor,
  modelPickerChoice,
  modelPickerMenuView,
} from "../model-picker-model";
import {
  BillingClassMark,
  defaultModelPolicyPickerMessages,
  PickerNavRow,
  type ModelPolicyPickerProps,
} from "./model-policy-picker";
import { ModelMark } from "./model-mark";
import { useOpenGeniText, type OpenGeniText } from "../messages/runtime";

const PopoverContainedPortal = containedPortal(Popover.Portal);
type ClientPickerModelRow = PickerModelRow<ClientModel>;

/** Model selection stays flat; reasoning never becomes a navigation destination. */
export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
  const t = useOpenGeniText();
  const [query, setQuery] = useState("");
  const view = modelPickerMenuView(t, props, query);
  const { messages, rows, groups } = view;
  const selected = view.selected;
  const choose = (row: ClientPickerModelRow) => {
    if (props.disabled) return;
    const choice = modelPickerChoice(props, row);
    if (!choice) return;
    if (choice.model !== null) props.onModelChange(choice.model);
    // Hosts may commit the combined model/effort draft through this callback.
    props.onEffortChange(choice.effort);
    if (choice.latencyMode !== null) props.onLatencyModeChange(choice.latencyMode);
  };
  const modelRow = (row: ClientPickerModelRow) => (
    <PickerNavRow
      key={row.id}
      icon={
        props.collapseScopes === false ? undefined : (
          <ModelMark model={row.catalog} className="size-4 text-og-fg-muted" />
        )
      }
      label={row.label}
      hint={row.unavailableReason ?? row.fundingHint}
      disabled={props.disabled || !row.selectable}
      title={[row.label, row.unavailableReason ?? row.fundingHint].filter(Boolean).join(" · ")}
      active={row.selectable && row.id === props.model}
      showChevron={false}
      trailing={
        row.catalog.cost === "free" || row.id === props.model ? (
          <span className="flex items-center gap-2">
            {row.catalog.cost === "free" ? (
              <span className="rounded-full bg-og-surface-2 px-1.5 py-0.5 text-og-control text-og-fg-muted">
                {messages.free}
              </span>
            ) : null}
            {row.id === props.model ? (
              <CheckIcon className={MENU_CHECK_CLASS} aria-label={messages.selected} />
            ) : null}
          </span>
        ) : null
      }
      testId={`model-picker-choice-${row.id}`}
      onClick={() => choose(row)}
    />
  );
  return (
    <div
      data-testid="model-picker-menu"
      className="flex min-h-0 flex-col"
      onKeyDown={(event) => {
        if (
          !(event.target instanceof HTMLButtonElement) ||
          !["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)
        )
          return;
        const buttons = Array.from(
          event.currentTarget.querySelectorAll<HTMLButtonElement>(
            '[data-testid^="model-picker-choice-"]:not(:disabled)',
          ),
        );
        const index = buttons.indexOf(event.target);
        if (index < 0) return;
        event.preventDefault();
        const next =
          event.key === "Home"
            ? 0
            : event.key === "End"
              ? buttons.length - 1
              : (index + (event.key === "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length;
        buttons[next]?.focus();
      }}
    >
      {rows.some((row) => row.selectable) ? (
        <div className="border-b border-og-border py-1">
          <label className="og-model-policy-search flex items-center gap-2 px-2.5 py-0.5">
            <SearchIcon className="size-4 shrink-0 text-og-fg-subtle" aria-hidden />
            <input
              aria-label={messages.searchLabel}
              placeholder={messages.searchPlaceholder}
              value={query}
              onChange={(event) => setQuery(event.target.value)}
              onKeyDown={(event) => {
                if (event.key !== "Escape" && event.key !== "Tab") event.stopPropagation();
                if (event.key === "ArrowDown") {
                  event.preventDefault();
                  event.currentTarget
                    .closest('[data-testid="model-picker-menu"]')
                    ?.querySelector<HTMLButtonElement>("button:not(:disabled)")
                    ?.focus();
                }
              }}
              className="og-model-policy-search-input h-8 min-w-0 flex-1 bg-transparent text-og-menu text-og-fg outline-hidden placeholder:text-og-fg-subtle"
            />
          </label>
        </div>
      ) : null}
      {props.error ? (
        <p className={cn(MENU_NOTE_CLASS, "text-og-sm text-og-status-failed")} role="alert">
          {props.error}
        </p>
      ) : null}
      <div
        className="min-h-0 flex-1 overflow-y-auto overscroll-contain py-1"
        data-testid="model-picker-models"
      >
        {props.loading ? (
          // Rows at the menu's row height, never a sentence, so nothing jumps.
          <div role="status" aria-label={messages.loading}>
            {[58, 44, 66, 50].map((width) => (
              <div key={width} aria-hidden="true" className="flex h-8 items-center gap-3 px-2.5">
                <span className="size-4 shrink-0 animate-pulse rounded bg-og-surface-2" />
                <span
                  className="h-2.5 animate-pulse rounded bg-og-surface-2"
                  style={{ width: `${width}%` }}
                />
              </div>
            ))}
          </div>
        ) : rows.some((row) => row.selectable) ? (
          <>
            {groups.map((group) => (
              <section
                key={group.billingClass}
                aria-label={group.label}
                className="[&+section]:mt-1.5 [&+section]:border-t [&+section]:border-og-border [&+section]:pt-1.5"
              >
                <div className={cn(MENU_LABEL_CLASS, "flex items-center gap-2")}>
                  <BillingClassMark
                    billingClass={group.billingClass}
                    presentation={groupPresentationFor(props, group.billingClass)}
                    aria-label=""
                  />
                  <span className="min-w-0 break-words">{group.label}</span>
                </div>
                {group.description ? (
                  <p className="break-words px-2.5 pb-1 text-og-sm text-og-fg-muted">
                    {group.description}
                  </p>
                ) : null}
                {group.rows.map(modelRow)}
              </section>
            ))}
            {view.matchCount === 0 ? (
              <p className={MENU_NOTE_CLASS}>
                {view.searching ? messages.noMatches : messages.noModels}
              </p>
            ) : null}
          </>
        ) : props.connectModelsHref || rows.length > 0 ? (
          <ConnectModelsPanel href={props.connectModelsHref} messages={messages} />
        ) : (
          <p className={MENU_NOTE_CLASS}>{messages.noModels}</p>
        )}
      </div>
      {view.anySelectable &&
      selected &&
      (view.unsupportedAttachments || (props.allowModelOptions !== false && view.thinking)) ? (
        <div className="border-t border-og-border px-2.5 py-2.5">
          {view.unsupportedAttachments ? (
            <p className="pb-1.5 text-og-control leading-relaxed text-og-fg-subtle">
              {messages.unsupportedAttachments}
            </p>
          ) : null}
          {props.allowModelOptions !== false ? <ModelThinkingControls {...props} /> : null}
        </div>
      ) : null}
    </div>
  );
}

const CONNECT_MODEL_OPTIONS = (
  t: OpenGeniText,
): Array<{
  billingClass: "codex_subscription" | "supergrok_subscription" | "byok" | "external";
  title: string;
  detail: string;
}> => [
  {
    billingClass: "codex_subscription",
    title: t("modelPolicyPickerMenu.codex"),
    detail: "ChatGPT",
  },
  { billingClass: "supergrok_subscription", title: "SuperGrok", detail: "xAI" },
  {
    billingClass: "byok",
    title: t("modelPolicyPickerMenu.aiGateway"),
    detail: t("modelPolicyPickerMenu.vercel"),
  },
  { billingClass: "external", title: "OpenRouter", detail: t("modelPolicyPickerMenu.apiKey") },
];

function ConnectModelsPanel(props: {
  href: string | undefined;
  messages: ReturnType<typeof defaultModelPolicyPickerMessages>;
}) {
  const t = useOpenGeniText();
  return (
    <div className="px-1.5 pb-1.5 pt-2" data-testid="model-picker-connect">
      <div className="px-1.5 pb-3">
        <p className="text-og-menu font-medium tracking-tight text-og-fg">
          {props.messages.connectTitle}
        </p>
        <p className="mt-1 text-og-control leading-snug text-og-fg-subtle">
          {props.messages.connectBody}
        </p>
      </div>
      <div className="grid grid-cols-2 gap-1">
        {CONNECT_MODEL_OPTIONS(t).map((option) => {
          const content = (
            <>
              <span className="flex size-8 shrink-0 items-center justify-center rounded-og-md bg-og-surface-2 text-og-fg">
                <BillingClassMark
                  billingClass={option.billingClass}
                  aria-label=""
                  className="size-4 text-og-fg"
                />
              </span>
              <span className="min-w-0">
                <span className="block truncate text-og-control font-medium text-og-fg">
                  {option.title}
                </span>
                <span className="block truncate text-og-control text-og-fg-subtle">
                  {option.detail}
                </span>
              </span>
            </>
          );
          const className =
            "flex min-w-0 items-center gap-2 rounded-og-md px-1.5 py-1.5 outline-hidden transition-colors hover:bg-og-hover focus-visible:ring-2 focus-visible:ring-og-accent/40";
          return props.href ? (
            <a key={option.title} href={props.href} className={className}>
              {content}
            </a>
          ) : (
            <div key={option.title} className={className}>
              {content}
            </div>
          );
        })}
      </div>
      {props.href ? (
        <a
          href={props.href}
          className="mt-2 flex h-9 w-full items-center justify-center gap-1.5 rounded-og-md border border-og-primary-border bg-og-primary text-og-primary-fg hover:bg-og-primary-hover text-og-control font-medium outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-og-accent/40"
        >
          {props.messages.connectAction}
          <ArrowRightIcon className="size-3.5" aria-hidden />
        </a>
      ) : (
        <p className="px-1.5 pt-3 text-og-control text-og-fg-subtle">{props.messages.noModels}</p>
      )}
    </div>
  );
}

function ModelThinkingControls(props: ModelPolicyPickerProps) {
  const t = useOpenGeniText();
  const view = modelPickerMenuView(t, props, "");
  const thinking = view.thinking;
  if (!view.selected || !thinking) return null;
  const messages = view.messages;
  const efforts = thinking.efforts;
  const showThinking = thinking.showThinking;
  const showFast = thinking.showFast;
  const speeds = thinking.speeds;
  const selectedSpeed = speeds?.find((speed) => speed.id === props.latencyMode) ?? speeds?.[0];
  return (
    <div className="space-y-2 text-og-control" data-testid="model-picker-reasoning">
      {showThinking || showFast ? (
        <div className="flex min-h-7 items-center justify-between gap-3">
          {showThinking ? <span className="text-og-fg-subtle">{messages.thinking}</span> : <span />}
          {showFast ? (
            <button
              type="button"
              data-testid="model-picker-fast"
              disabled={props.disabled || thinking.disabled}
              aria-pressed={props.latencyMode === "fast"}
              title={messages.fast + " · " + messages.fastRateHint}
              onClick={() =>
                props.onLatencyModeChange(props.latencyMode === "fast" ? "standard" : "fast")
              }
              className="flex min-h-8 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-og-sm px-2 text-og-fg-muted hover:bg-og-hover focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:opacity-50"
            >
              <ZapIcon className={cn("size-3.5", props.latencyMode === "fast" && "fill-current")} />
              {messages.fast}
              <span className="text-og-fg-subtle">{messages.fastRateHint}</span>
            </button>
          ) : null}
        </div>
      ) : null}
      {showThinking ? (
        <RadioGroup.Root
          aria-label={messages.thinkingEffort}
          value={thinking.value}
          disabled={props.disabled || thinking.disabled}
          onValueChange={(value) => props.onEffortChange(value as ReasoningEffort)}
          orientation="horizontal"
          className="flex flex-wrap gap-0.5 rounded-og-md bg-og-surface-2 p-0.5"
        >
          {efforts.map((effort) => (
            <RadioGroup.Item
              key={effort}
              value={effort}
              aria-label={labelReasoningEffort(t, effort)}
              title={labelReasoningEffort(t, effort)}
              className="min-h-8 min-w-10 flex-1 cursor-pointer whitespace-nowrap rounded-og-sm px-1.5 text-og-control text-og-fg-muted outline-hidden transition-colors hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 data-[state=checked]:bg-og-surface-1 data-[state=checked]:text-og-fg data-[state=checked]:shadow-sm disabled:cursor-not-allowed disabled:opacity-50"
            >
              {compactEffortLabel(t, effort, labelReasoningEffort(t, effort))}
            </RadioGroup.Item>
          ))}
        </RadioGroup.Root>
      ) : null}
      {speeds && selectedSpeed ? (
        <div className="space-y-2 pt-1" data-testid="model-picker-speed">
          <div className="flex min-h-7 items-center justify-between gap-3">
            <span className="text-og-fg-subtle">{messages.speed}</span>
            {selectedSpeed.hint ? (
              <span className="text-og-fg-subtle">{selectedSpeed.hint}</span>
            ) : null}
          </div>
          <RadioGroup.Root
            aria-label={messages.speed}
            value={selectedSpeed.id}
            disabled={props.disabled || thinking.disabled}
            onValueChange={(value) => props.onLatencyModeChange(value as LatencyMode)}
            orientation="horizontal"
            className="flex flex-wrap gap-0.5 rounded-og-md bg-og-surface-2 p-0.5"
          >
            {speeds.map((speed) => (
              <RadioGroup.Item
                key={speed.id}
                value={speed.id}
                aria-label={speed.hint ? `${speed.label} · ${speed.hint}` : speed.label}
                title={speed.hint ? `${speed.label} · ${speed.hint}` : speed.label}
                className="flex min-h-8 min-w-10 flex-1 cursor-pointer items-center justify-center gap-1 whitespace-nowrap rounded-og-sm px-1.5 text-og-control text-og-fg-muted outline-hidden transition-colors hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 data-[state=checked]:bg-og-surface-1 data-[state=checked]:text-og-fg data-[state=checked]:shadow-sm disabled:cursor-not-allowed disabled:opacity-50"
              >
                {speed.id === "standard" ? null : (
                  <ZapIcon
                    aria-hidden
                    className={cn(
                      "size-3.5 shrink-0",
                      speed.id === selectedSpeed.id && "fill-current",
                    )}
                  />
                )}
                {speed.label}
              </RadioGroup.Item>
            ))}
          </RadioGroup.Root>
        </div>
      ) : null}
    </div>
  );
}

export function ModelPolicyPickerPopover(
  props: ModelPolicyPickerProps & {
    anchor: RefObject<HTMLButtonElement | null>;
    contentId: string;
    portalStyle: CSSProperties;
  },
) {
  const t = useOpenGeniText();
  const outside = useRef(false);
  const messages = { ...defaultModelPolicyPickerMessages(t), ...props.messages };
  return (
    <Popover.Root open onOpenChange={(open) => props.onOpenChange?.(open)}>
      <Popover.Anchor virtualRef={props.anchor} />
      <PopoverContainedPortal>
        <Popover.Content
          id={props.contentId}
          aria-label={messages.label}
          align="start"
          side={props.menuSide ?? "bottom"}
          sideOffset={8}
          collisionPadding={12}
          onInteractOutside={(event) => {
            if (props.anchor.current?.contains(event.target as Node)) event.preventDefault();
            else outside.current = true;
          }}
          onCloseAutoFocus={(event) => {
            event.preventDefault();
            if (!outside.current) props.anchor.current?.focus();
          }}
          className={cn(
            MENU_SURFACE_CLASS,
            "og-root og-model-policy-menu z-50 flex max-h-[min(32rem,var(--radix-popover-content-available-height))] w-[22rem] max-w-[calc(100vw-16px)] flex-col overflow-hidden p-[var(--og-model-picker-menu-padding)]",
            props.contentClassName,
          )}
          style={{ ...props.portalStyle, ...props.contentStyle }}
          data-testid="model-picker-content"
        >
          <ModelPolicyPickerMenu {...props} />
        </Popover.Content>
      </PopoverContainedPortal>
    </Popover.Root>
  );
}