/**
 * `ModelServerSelect` (F35.2) — a dropdown to bind an OpenCode profile to one of
 * the declared local model servers, or to none ("external endpoint"). Replaces
 * the free-text `localModelServerId` input posed in F36. Presentational: the
 * server list and the current value are passed in.
 */

import type { LocalModelServerConfig } from "@/domain";
import { cn } from "@/shared";

/** The sentinel option value standing for "no managed server". */
const NONE = "";

export interface ModelServerSelectProps {
  /** The declared servers to choose from. */
  servers: LocalModelServerConfig[];
  /** The currently-bound server id, or `undefined` for none. */
  value?: string;
  /** Called with the new server id, or `undefined` when "none" is chosen. */
  onChange: (serverId: string | undefined) => void;
  /** Accessible label (defaults to a generic one). */
  ariaLabel?: string;
}

export function ModelServerSelect({
  servers,
  value,
  onChange,
  ariaLabel = "local model server",
}: ModelServerSelectProps) {
  // A previously-bound server that no longer exists (deleted): keep it visible
  // so the binding isn't silently dropped from the UI.
  const missing =
    value !== undefined && !servers.some((s) => s.id === value);

  return (
    <select
      aria-label={ariaLabel}
      value={value ?? NONE}
      onChange={(e) => onChange(e.target.value === NONE ? undefined : e.target.value)}
      className={cn(
        "h-8 rounded-md bg-raised px-2 text-xs text-content",
        "border border-border outline-none focus:border-primary",
      )}
    >
      <option value={NONE}>None (external endpoint)</option>
      {servers.map((s) => (
        <option key={s.id} value={s.id}>
          {s.name} — {s.servedModelName}
        </option>
      ))}
      {missing && (
        <option value={value}>{value} (unknown / removed)</option>
      )}
    </select>
  );
}
