"use client";
import * as React from "react";
import { ModelSelector } from "./model-selector";
import { Button, type ButtonProps } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/**
 * Opens the shared `ModelSelector` picker from any control (menu item, error card, router card…)
 * while only relying on its public props: the real trigger is rendered visually hidden and clicked.
 *
 */
export interface ModelPickerLauncherHandle {
  open(): void;
}

export const ModelPickerLauncher = React.forwardRef<ModelPickerLauncherHandle, { value?: string | null; onChange: (key: string) => void; label?: React.ReactNode; className?: string; variant?: ButtonProps["variant"]; size?: ButtonProps["size"]; icon?: React.ReactNode; hiddenTrigger?: boolean }>(function ModelPickerLauncher({ value = null, onChange, label, className, variant = "outline", size = "md", icon, hiddenTrigger }, ref) {
  const holder = React.useRef<HTMLSpanElement>(null);
  const open = React.useCallback(() => {
    holder.current?.querySelector("button")?.click();
  }, []);
  React.useImperativeHandle(ref, () => ({ open }), [open]);
  return (
    <>
      <span ref={holder} className="hidden" aria-hidden>
        <ModelSelector value={value} onChange={onChange} size="sm" hotkey={false} />
      </span>
      {hiddenTrigger ? null : (
        <Button type="button" variant={variant} size={size} className={cn(className)} onClick={open}>
          {icon}
          {label ?? "Choose a model"}
        </Button>
      )}
    </>
  );
});