"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { ChevronDown, Cpu } from "lucide-react";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { cn } from "@open-mercato/shared/lib/utils";
import { Button } from "../primitives/button.js";
function ModelPicker({
  agentId,
  value,
  onChange,
  availableProviders,
  disabled,
  compact = false,
  defaultLabel,
  className
}) {
  const t = useT();
  const [open, setOpen] = React.useState(false);
  const containerRef = React.useRef(null);
  const triggerRef = React.useRef(null);
  const selectedLabel = React.useMemo(() => {
    if (!value) {
      return defaultLabel ? t("ai_assistant.modelPicker.defaultWithModelLabel", "Default: {{model}}").replace("{{model}}", defaultLabel) : t("ai_assistant.modelPicker.defaultLabel", "Model: Default");
    }
    const provider = availableProviders.find((p) => p.id === value.providerId);
    const model = provider?.models.find((m) => m.id === value.modelId);
    const modelLabel = model?.name ?? value.modelId;
    const providerLabel = provider?.name ?? value.providerId;
    return `${providerLabel} / ${modelLabel}`;
  }, [value, availableProviders, defaultLabel, t]);
  const handleToggle = React.useCallback(() => {
    if (disabled) return;
    setOpen((prev) => !prev);
  }, [disabled]);
  const handleSelect = React.useCallback(
    (providerId, modelId) => {
      onChange({ providerId, modelId });
      setOpen(false);
      triggerRef.current?.focus();
    },
    [onChange]
  );
  const handleClearDefault = React.useCallback(() => {
    onChange(null);
    setOpen(false);
    triggerRef.current?.focus();
  }, [onChange]);
  React.useEffect(() => {
    if (!open) return;
    const handleKeyDown = (event) => {
      if (event.key === "Escape") {
        setOpen(false);
        triggerRef.current?.focus();
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [open]);
  React.useEffect(() => {
    if (!open) return;
    const handleClickOutside = (event) => {
      if (containerRef.current && !containerRef.current.contains(event.target)) {
        setOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [open]);
  if (availableProviders.length === 0) return null;
  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative", className), "data-ai-model-picker": agentId, children: [
    /* @__PURE__ */ jsxs(
      Button,
      {
        ref: triggerRef,
        type: "button",
        variant: "outline",
        size: "sm",
        disabled,
        onClick: handleToggle,
        "aria-haspopup": "listbox",
        "aria-expanded": open,
        "aria-label": t("ai_assistant.modelPicker.triggerAriaLabel", "Select AI model"),
        title: selectedLabel,
        "data-ai-model-picker-trigger": true,
        className: cn(
          "font-normal",
          compact ? "w-8 gap-0 px-0" : "gap-1.5 px-2.5"
        ),
        children: [
          /* @__PURE__ */ jsx(Cpu, { className: "size-3.5 shrink-0", "aria-hidden": true }),
          !compact ? /* @__PURE__ */ jsx("span", { className: "max-w-36 truncate text-xs", children: selectedLabel }) : null,
          /* @__PURE__ */ jsx(
            ChevronDown,
            {
              className: cn(
                "size-3 shrink-0 transition-transform",
                compact && "hidden",
                open && "rotate-180"
              ),
              "aria-hidden": true
            }
          )
        ]
      }
    ),
    open ? /* @__PURE__ */ jsxs(
      "div",
      {
        role: "listbox",
        "aria-label": t("ai_assistant.modelPicker.listAriaLabel", "Available models"),
        className: cn(
          "absolute bottom-full left-0 z-50 mb-1 max-h-72 min-w-56 overflow-y-auto",
          "rounded-md border border-border bg-popover shadow-md"
        ),
        "data-ai-model-picker-dropdown": true,
        children: [
          /* @__PURE__ */ jsxs(
            "div",
            {
              role: "option",
              "aria-selected": value === null,
              tabIndex: 0,
              className: cn(
                "cursor-pointer px-3 py-2 text-xs hover:bg-accent hover:text-accent-foreground",
                "flex items-center gap-2",
                value === null && "bg-accent/50"
              ),
              onClick: handleClearDefault,
              onKeyDown: (event) => {
                if (event.key === "Enter" || event.key === " ") {
                  event.preventDefault();
                  handleClearDefault();
                }
              },
              "data-ai-model-picker-default-option": true,
              children: [
                /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultLabel ? t("ai_assistant.modelPicker.useDefaultWithModel", "Use agent default: {{model}}").replace("{{model}}", defaultLabel) : t("ai_assistant.modelPicker.useDefault", "Use agent default") }),
                value === null ? /* @__PURE__ */ jsx("span", { className: "rounded bg-primary/10 px-1 py-0.5 text-overline font-medium text-primary", children: t("ai_assistant.modelPicker.activeBadge", "active") }) : null
              ]
            }
          ),
          availableProviders.map((provider) => /* @__PURE__ */ jsxs("div", { "data-ai-model-picker-provider": provider.id, children: [
            /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-overline font-semibold uppercase tracking-wider text-muted-foreground", children: provider.name }),
            provider.models.map((model) => {
              const isSelected = value?.providerId === provider.id && value?.modelId === model.id;
              return /* @__PURE__ */ jsxs(
                "div",
                {
                  role: "option",
                  "aria-selected": isSelected,
                  tabIndex: 0,
                  className: cn(
                    "cursor-pointer px-3 py-2 text-xs hover:bg-accent hover:text-accent-foreground",
                    "flex items-center gap-2 pl-5",
                    isSelected && "bg-accent/50"
                  ),
                  onClick: () => handleSelect(provider.id, model.id),
                  onKeyDown: (event) => {
                    if (event.key === "Enter" || event.key === " ") {
                      event.preventDefault();
                      handleSelect(provider.id, model.id);
                    }
                  },
                  "data-ai-model-picker-model": `${provider.id}:${model.id}`,
                  children: [
                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: model.name }),
                    model.isDefault ? /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded bg-muted px-1 py-0.5 text-overline text-muted-foreground", children: t("ai_assistant.modelPicker.defaultBadge", "default") }) : null,
                    isSelected ? /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded bg-primary/10 px-1 py-0.5 text-overline font-medium text-primary", children: t("ai_assistant.modelPicker.activeBadge", "active") }) : null
                  ]
                },
                model.id
              );
            })
          ] }, provider.id))
        ]
      }
    ) : null
  ] });
}
var ModelPicker_default = ModelPicker;
export {
  ModelPicker,
  ModelPicker_default as default
};
//# sourceMappingURL=ModelPicker.js.map
