"use client";
import * as React from "react";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel } from "@/components/ui/select";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { useApp } from "@/components/app/store";
import { PROVIDERS, PROVIDER_ORDER } from "@/lib/client/providers";
import type { PolyModel, ProviderId } from "@/lib/client/types";

const NONE = "__none__";

export interface ModelSelectProps {
  value: string | null;
  onChange: (key: string | null) => void;
  /** Only list models whose provider has a valid key (default true). */
  connectedOnly?: boolean;
  includeDeprecated?: boolean;
  allowNone?: boolean;
  noneLabel?: string;
  placeholder?: string;
  disabled?: boolean;
  id?: string;
  className?: string;
}

/** Model picker grouped by provider, with provider glyphs. Shows a disabled hint when nothing is connected. */
export function ModelSelect({ value, onChange, connectedOnly = true, includeDeprecated = false, allowNone, noneLabel = "None", placeholder = "Choose a model", disabled, id, className }: ModelSelectProps) {
  const { models, modelsByKey, connectedProviders } = useApp();

  const groups = React.useMemo(() => {
    const out: { provider: ProviderId; models: PolyModel[] }[] = [];
    for (const p of PROVIDER_ORDER) {
      if (connectedOnly && !connectedProviders.has(p)) continue;
      const list = models.filter((m) => m.provider === p && (includeDeprecated || m.status !== "deprecated"));
      if (list.length) out.push({ provider: p, models: list });
    }
    return out;
  }, [models, connectedProviders, connectedOnly, includeDeprecated]);

  const selected = value ? modelsByKey.get(value) : undefined;
  const empty = groups.length === 0;
  // Keep a stale/unknown selection visible so the user understands what is stored.
  const unknownSelected = value && !selected;

  return (
    <Select value={value ?? (allowNone ? NONE : undefined)} onValueChange={(v) => onChange(v === NONE ? null : v)} disabled={disabled || (empty && !allowNone)}>
      <SelectTrigger id={id} className={className} aria-label="Model">
        <SelectValue placeholder={empty ? "Connect a provider first" : placeholder}>
          {selected ? (
            <span className="flex items-center gap-2">
              <ProviderIcon provider={selected.provider} size={14} />
              <span className="truncate">{selected.displayName}</span>
              <span className="truncate font-mono text-[11px] text-fg-subtle">{selected.id}</span>
            </span>
          ) : unknownSelected ? (
            <span className="flex items-center gap-2 text-fg-muted">
              <ProviderIcon provider={value?.split("/")[0]} size={14} />
              <span className="truncate font-mono text-xs">{value}</span>
            </span>
          ) : allowNone && !value ? (
            <span className="text-fg-muted">{noneLabel}</span>
          ) : undefined}
        </SelectValue>
      </SelectTrigger>
      <SelectContent className="max-h-80">
        {allowNone ? <SelectItem value={NONE}>{noneLabel}</SelectItem> : null}
        {unknownSelected ? (
          <SelectItem value={value!} className="font-mono text-xs text-fg-muted">
            {value} (not available)
          </SelectItem>
        ) : null}
        {groups.map((g) => (
          <SelectGroup key={g.provider}>
            <SelectLabel className="flex items-center gap-1.5">
              <ProviderIcon provider={g.provider} size={12} /> {PROVIDERS[g.provider].name}
            </SelectLabel>
            {g.models.map((m) => (
              <SelectItem key={m.key} value={m.key}>
                <span className="flex items-center gap-2">
                  <span>{m.displayName}</span>
                  {m.status === "preview" ? <span className="rounded bg-info-soft px-1 text-[10px] font-medium text-info">preview</span> : null}
                  {m.status === "deprecated" ? <span className="rounded bg-warning-soft px-1 text-[10px] font-medium text-warning">deprecated</span> : null}
                </span>
              </SelectItem>
            ))}
          </SelectGroup>
        ))}
        {empty && !allowNone ? <div className="px-2 py-3 text-center text-xs text-fg-subtle">No connected providers. Add a key in Settings → Providers.</div> : null}
      </SelectContent>
    </Select>
  );
}