'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AlertTriangle, Loader2, RefreshCw } from 'lucide-react';
import { useId } from 'react';
import { CapabilityBadges } from './CapabilityBadges.js';
const INPUT_CLASS = 'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60';
const LABEL_CLASS = 'mb-1 flex items-center gap-2 text-sm font-medium text-foreground';
function priceLabel(model) {
    const p = model.pricing;
    if (!p)
        return null;
    if (typeof p.inputPerMillion === 'number' && typeof p.outputPerMillion === 'number') {
        return `$${p.inputPerMillion}/$${p.outputPerMillion} per 1M tokens`;
    }
    if (typeof p.inputPerMillion === 'number')
        return `$${p.inputPerMillion} per 1M tokens`;
    if (typeof p.image === 'number')
        return `$${p.image} per image`;
    return null;
}
export function ModelSelector({ models, value, onChange, onRefresh, refreshing, disabled, noModelsHint, }) {
    const selectId = useId();
    const selected = models.find((m) => m.id === value || m.providerModelId === value);
    // The configured model is no longer in the catalog — keep the choice, warn.
    const selectedUnavailable = Boolean(value) && !selected;
    const price = selected ? priceLabel(selected) : null;
    return (_jsxs("div", { children: [_jsx("label", { htmlFor: selectId, className: LABEL_CLASS, children: "Default model" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("select", { id: selectId, value: value, disabled: disabled, onChange: (e) => onChange(e.target.value), className: INPUT_CLASS, children: [_jsx("option", { value: "", children: "Select a model\u2026" }), selectedUnavailable && _jsxs("option", { value: value, children: [value, " (unavailable)"] }), models.map((m) => (_jsxs("option", { value: m.id, disabled: m.status === 'unavailable', children: [m.displayName, m.status === 'deprecated' ? ' (deprecated)' : '', m.status === 'unavailable' ? ' (unavailable)' : ''] }, m.id)))] }), _jsxs("button", { type: "button", onClick: onRefresh, disabled: disabled || refreshing, "aria-label": "Refresh models", className: "border-border text-foreground hover:bg-accent inline-flex shrink-0 items-center gap-2 rounded-md border px-3 py-2 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-60", children: [refreshing ? (_jsx(Loader2, { size: 16, className: "animate-spin", "aria-hidden": "true" })) : (_jsx(RefreshCw, { size: 16, "aria-hidden": "true" })), _jsx("span", { className: "sr-only sm:not-sr-only", children: "Refresh models" })] })] }), models.length === 0 && (_jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: noModelsHint ?? 'No models available yet. Connect a provider and refresh.' })), selectedUnavailable && (_jsxs("p", { className: "text-warning mt-2 flex items-start gap-1.5 text-sm", role: "status", children: [_jsx(AlertTriangle, { size: 14, className: "mt-0.5 shrink-0", "aria-hidden": "true" }), "The selected model is no longer offered by the provider. Pick another or refresh the list."] })), selected && (_jsxs("div", { className: "mt-2 space-y-1.5", children: [_jsx(CapabilityBadges, { capabilities: selected.capabilities }), _jsxs("div", { className: "text-muted-foreground flex flex-wrap gap-x-4 gap-y-1 text-sm", children: [typeof selected.contextWindow === 'number' && (_jsxs("span", { children: [selected.contextWindow.toLocaleString(), " token context"] })), price && _jsx("span", { children: price }), selected.status === 'deprecated' && (_jsx("span", { className: "text-warning", children: "Deprecated by provider" }))] })] }))] }));
}
//# sourceMappingURL=ModelSelector.js.map