"use client";
import * as React from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useVirtualizer } from "@tanstack/react-virtual";
import { Check, ChevronDown, ChevronRight, GitCompareArrows, Info, KeyRound, MoreHorizontal, Search, Sparkles, Star, Tag, X } from "lucide-react";
import { AUTO_MODEL_KEY, useApp } from "@/components/app/store";
import type { PolyModel, ProviderId } from "@/lib/client/types";
import { PROVIDERS, PROVIDER_ORDER } from "@/lib/client/providers";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Kbd } from "@/components/ui/misc";
import { Segmented } from "@/components/ui/segmented";
import { ActionSheet, ResponsiveDialog, type ActionSheetItem } from "@/components/ui/sheet";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { PromptDialog } from "@/components/common/prompt-dialog";
import { ModelProfile } from "@/components/models/model-profile";
import { CapabilityGlyphs, ModelBadges, StatusBadge, useBadgeContext } from "./model-badges";
import { useDebounced, useIsMobile, useLocalStorage, useLongPress } from "@/lib/client/hooks";
import { ROUTER_MODES, explainRoute, type RouterMode } from "@/lib/client/router";
import { buildSelectorSections, recommendedModels, type Section } from "@/lib/models/sections";
import { parseSearchQuery, searchModels, isEmptyIntent } from "@/lib/models/search";
import { sortWeightOf, type BadgeContext } from "@/lib/models/badges";
import { formatPrice } from "@/lib/models/format";
import { cn, formatTokens } from "@/lib/utils";

export const ROUTER_MODE_KEY = "polyllm:router-mode";

export interface ModelSelectorProps {
  /** Register the global ⌘/ toggle (disable on hidden/secondary instances). */
  hotkey?: boolean;
  value: string | null;
  onChange?: (key: string) => void;
  className?: string;
  size?: "sm" | "md";
  /** List models whose provider has no key (rendered as Unavailable). */
  allowDisconnected?: boolean;
  multiple?: boolean;
  selected?: Set<string>;
  onToggle?: (key: string) => void;
  buttonLabel?: string;
  /** Show the Smart Router "Auto" entry (selects `AUTO_MODEL_KEY`). */
  showAuto?: boolean;
  /** Custom trigger element (wrapped; click opens the picker). */
  trigger?: React.ReactNode;
  /** Current composer draft — powers the "Recommended" section. */
  draft?: string;
}

type Item =
  | { type: "auto" }
  | { type: "header"; key: string; label: string; hint?: string; total: number; shown: number; expandable: boolean; expanded: boolean }
  | { type: "row"; model: PolyModel; section: string; why?: string[] }
  | { type: "provider"; provider: ProviderId; count: number };

const ROW_H = 56;

export function ModelSelector({ value, onChange, className, size = "md", allowDisconnected = false, multiple, selected, onToggle, buttonLabel, showAuto = false, trigger, draft, hotkey = true }: ModelSelectorProps) {
  const { models, modelsByKey, favorites, recents, labels, connectedProviders, toggleFavorite, setLabel, loadingModels } = useApp();
  const isMobile = useIsMobile();
  const router = useRouter();
  const ctx = useBadgeContext();
  const [open, setOpen] = React.useState(false);
  const [q, setQ] = React.useState("");
  const dq = useDebounced(q, 60);
  const [mode, setMode] = useLocalStorage<RouterMode>(ROUTER_MODE_KEY, "balanced");
  const [expanded, setExpanded] = React.useState<Set<string>>(() => new Set());
  const [active, setActive] = React.useState(0);
  const [menuModel, setMenuModel] = React.useState<PolyModel | null>(null);
  const [labelModel, setLabelModel] = React.useState<PolyModel | null>(null);
  const [profileModel, setProfileModel] = React.useState<PolyModel | null>(null);
  const inputRef = React.useRef<HTMLInputElement>(null);
  const scrollRef = React.useRef<HTMLDivElement>(null);
  // The list mounts only while the dialog is open: expose the element through state so the virtualizer re-subscribes.
  const [scrollEl, setScrollEl] = React.useState<HTMLDivElement | null>(null);
  const setScrollRef = React.useCallback((el: HTMLDivElement | null) => {
    scrollRef.current = el;
    setScrollEl(el);
  }, []);
  const current = value && value !== AUTO_MODEL_KEY ? modelsByKey.get(value) : undefined;
  const isAuto = value === AUTO_MODEL_KEY;

  React.useEffect(() => {
    if (!hotkey) return;
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "/") {
        e.preventDefault();
        setOpen((o) => !o);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [hotkey]);

  React.useEffect(() => {
    if (open) {
      if (!isMobile) setTimeout(() => inputRef.current?.focus(), 40);
    } else {
      setQ("");
      setExpanded(new Set());
    }
  }, [open, isMobile]);

  const usable = React.useMemo(() => models.filter((m) => (allowDisconnected || connectedProviders.has(m.provider)) && m.status !== "deprecated"), [models, connectedProviders, allowDisconnected]);

  const intent = React.useMemo(() => parseSearchQuery(dq), [dq]);
  const searching = dq.trim().length > 0 && !isEmptyIntent(intent);

  const results = React.useMemo(() => (searching ? searchModels(usable, intent, { ctx, favorites, recents, labels, providerNames: Object.fromEntries(PROVIDER_ORDER.map((p) => [p, PROVIDERS[p].name])) }) : null), [searching, usable, intent, ctx, favorites, recents, labels]);

  const sections = React.useMemo<Section[]>(() => (searching ? [] : buildSelectorSections(usable, { favorites, recents, ctx, mode, draft, perSection: 5 })), [searching, usable, favorites, recents, ctx, mode, draft]);

  const autoPick = React.useMemo(() => (showAuto && !multiple ? recommendedModels(usable, { favorites, mode, draft, limit: 1 }) : null), [showAuto, multiple, usable, favorites, mode, draft]);

  const items = React.useMemo<Item[]>(() => {
    const out: Item[] = [];
    if (searching && results) {
      out.push({ type: "header", key: "results", label: results.length ? `${results.length} result${results.length === 1 ? "" : "s"}` : "No matches", total: results.length, shown: results.length, expandable: false, expanded: true });
      for (const r of results) out.push({ type: "row", model: r.model, section: "results", why: r.matches });
      return out;
    }
    if (showAuto && !multiple) out.push({ type: "auto" });
    for (const s of sections) {
      const isOpen = expanded.has(s.key);
      const list = isOpen ? s.all : s.items;
      out.push({ type: "header", key: s.key, label: s.label, hint: s.hint, total: s.total, shown: list.length, expandable: s.total > s.items.length, expanded: isOpen });
      for (const m of list) out.push({ type: "row", model: m, section: s.key });
    }
    // Everything, grouped by provider
    const byProvider = PROVIDER_ORDER.map((p) => ({ p, list: usable.filter((m) => m.provider === p).sort((a, b) => sortWeightOf(b) - sortWeightOf(a) || a.displayName.localeCompare(b.displayName)) })).filter((g) => g.list.length);
    if (byProvider.length) {
      out.push({ type: "header", key: "all", label: "All models", hint: `${usable.length} across ${byProvider.length} provider${byProvider.length === 1 ? "" : "s"}`, total: usable.length, shown: usable.length, expandable: false, expanded: true });
      for (const g of byProvider) {
        out.push({ type: "provider", provider: g.p, count: g.list.length });
        for (const m of g.list) out.push({ type: "row", model: m, section: `all:${g.p}` });
      }
    }
    return out;
  }, [searching, results, showAuto, multiple, sections, expanded, usable]);

  const selectable = React.useMemo(() => items.map((it, i) => (it.type === "row" || it.type === "auto" ? i : -1)).filter((i) => i >= 0), [items]);

  // Reset the keyboard cursor when the list changes.
  React.useEffect(() => {
    setActive(selectable[0] ?? 0);
  }, [selectable]);

  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => scrollEl,
    estimateSize: (i) => {
      const it = items[i];
      return it.type === "row" ? ROW_H : it.type === "auto" ? 168 : it.type === "provider" ? 32 : 40;
    },
    overscan: 10,
    getItemKey: (i) => {
      const it = items[i];
      return it.type === "row" ? `${it.section}:${it.model.key}` : it.type === "header" ? `h:${it.key}` : it.type === "provider" ? `p:${it.provider}` : "auto";
    },
  });

  const pick = React.useCallback(
    (m: PolyModel) => {
      if (!allowDisconnected && !connectedProviders.has(m.provider)) return;
      if (multiple && onToggle) {
        onToggle(m.key);
        return;
      }
      onChange?.(m.key);
      setOpen(false);
    },
    [allowDisconnected, connectedProviders, multiple, onToggle, onChange],
  );

  const pickAuto = () => {
    onChange?.(AUTO_MODEL_KEY);
    setOpen(false);
  };

  const moveActive = (dir: 1 | -1) => {
    if (!selectable.length) return;
    const pos = selectable.indexOf(active);
    const next = selectable[Math.max(0, Math.min(selectable.length - 1, (pos < 0 ? (dir > 0 ? -1 : 0) : pos) + dir))];
    setActive(next);
    virtualizer.scrollToIndex(next, { align: "auto" });
  };

  const onKeyNav = (e: React.KeyboardEvent) => {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      moveActive(1);
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      moveActive(-1);
    } else if (e.key === "Enter") {
      const it = items[active];
      if (!it) return;
      e.preventDefault();
      if (it.type === "row") pick(it.model);
      else if (it.type === "auto") pickAuto();
    }
  };

  const openCompare = (m: PolyModel) => {
    const keys = [...new Set([current?.key, m.key].filter((k): k is string => Boolean(k)))];
    setOpen(false);
    router.push(`/app/models/compare?m=${encodeURIComponent(keys.join(","))}`);
  };

  const menuItems = (m: PolyModel): ActionSheetItem[] => {
    const fav = favorites.has(m.key);
    const items: ActionSheetItem[] = [
      { key: "fav", label: fav ? "Remove from favorites" : "Add to favorites", icon: <Star className={cn(fav && "fill-current text-warning")} />, onSelect: () => void toggleFavorite(m.key) },
      { key: "label", label: labels[m.key] ? "Change custom label" : "Set custom label", icon: <Tag />, hint: labels[m.key], onSelect: () => setLabelModel(m) },
    ];
    if (labels[m.key]) items.push({ key: "unlabel", label: "Remove custom label", icon: <X />, onSelect: () => void setLabel(m.key, null) });
    items.push({ key: "profile", label: "View profile", icon: <Info />, onSelect: () => setProfileModel(m) }, { key: "compare", label: current && current.key !== m.key ? `Compare with ${current.displayName}` : "Compare", icon: <GitCompareArrows />, onSelect: () => openCompare(m) });
    return items;
  };

  const toggleExpanded = (key: string) =>
    setExpanded((prev) => {
      const n = new Set(prev);
      if (n.has(key)) n.delete(key);
      else n.add(key);
      return n;
    });

  const noProviders = connectedProviders.size === 0 && !loadingModels;
  const triggerLabel = buttonLabel ? (
    <span className="truncate font-medium">{buttonLabel}</span>
  ) : isAuto ? (
    <>
      <Sparkles className="size-3.5 shrink-0 text-accent" />
      <span className="truncate font-medium">Auto</span>
      <span className="hidden truncate text-fg-subtle sm:inline">· {ROUTER_MODES.find((r) => r.value === mode)?.label}</span>
    </>
  ) : current ? (
    <>
      <ProviderIcon provider={current.provider} size={15} />
      <span className="truncate font-medium">{labels[current.key] ?? current.displayName}</span>
      {labels[current.key] ? <span className="hidden truncate text-fg-subtle sm:inline">{current.displayName}</span> : null}
    </>
  ) : (
    <span className="truncate text-fg-muted">{loadingModels ? "Loading models…" : noProviders ? "Connect a provider" : "Choose a model"}</span>
  );

  const header = (
    <div className="border-b border-border">
      <div className="flex items-center gap-2 px-3">
        <Search className="size-4 shrink-0 text-fg-subtle" />
        <input
          ref={inputRef}
          value={q}
          onChange={(e) => setQ(e.target.value)}
          onKeyDown={onKeyNav}
          placeholder={isMobile ? "Search models…" : "Search — try “cheap vision”, “1M context”, “under $1/M”, “fastest gemini”"}
          className="h-12 min-w-0 flex-1 bg-transparent text-[16px] outline-none placeholder:text-fg-subtle sm:text-[15px]"
          aria-label="Search models"
          role="combobox"
          aria-expanded
          aria-controls="model-selector-list"
          aria-activedescendant={items[active] ? `model-opt-${active}` : undefined}
          autoComplete="off"
          enterKeyHint="done"
        />
        {q ? (
          <button type="button" onClick={() => setQ("")} className="tap rounded-full bg-bg-muted p-1 text-fg-muted" aria-label="Clear search">
            <X className="size-3.5" />
          </button>
        ) : (
          <Kbd className="hidden sm:inline-flex">esc</Kbd>
        )}
        <button type="button" onClick={() => setOpen(false)} className="tap ml-1 rounded-md p-1.5 text-fg-subtle hover:bg-bg-muted hover:text-fg sm:hidden" aria-label="Close">
          <X className="size-4" />
        </button>
      </div>
      {searching && intent.chips.length ? (
        <div className="flex flex-wrap items-center gap-1 px-3 pb-2">
          <span className="text-[11px] text-fg-subtle">Understood:</span>
          {intent.chips.map((c) => (
            <Badge key={c} variant="accent">
              {c}
            </Badge>
          ))}
        </div>
      ) : null}
    </div>
  );

  const renderItem = (it: Item, index: number) => {
    switch (it.type) {
      case "auto":
        return <AutoCard selected={isAuto} active={active === index} mode={mode} onMode={setMode} onPick={pickAuto} pick={autoPick} id={`model-opt-${index}`} />;
      case "header":
        return (
          <div className={cn("flex items-end justify-between gap-2 px-3 pt-3 pb-1", it.key === "results" && "pt-2")}>
            <div className="min-w-0">
              <span className="text-[11px] font-semibold uppercase tracking-wide text-fg-subtle">{it.label}</span>
              {it.hint ? <span className="ml-2 hidden text-[11px] text-fg-subtle sm:inline">{it.hint}</span> : null}
            </div>
            {it.expandable ? (
              <button type="button" onClick={() => toggleExpanded(it.key)} className="tap inline-flex items-center gap-0.5 text-[11.5px] font-medium text-accent">
                {it.expanded ? "Show less" : `Show all ${it.total}`}
                <ChevronRight className={cn("size-3 transition-transform", it.expanded && "rotate-90")} />
              </button>
            ) : null}
          </div>
        );
      case "provider":
        return (
          <div className="flex items-center gap-1.5 px-3 pt-2 pb-0.5 text-[11px] font-medium text-fg-muted">
            <ProviderIcon provider={it.provider} size={12} /> {PROVIDERS[it.provider].name}
            <span className="text-fg-subtle">· {it.count}</span>
          </div>
        );
      case "row": {
        const m = it.model;
        return (
          <SelectorRow
            id={`model-opt-${index}`}
            model={m}
            ctx={ctx}
            label={labels[m.key]}
            fav={favorites.has(m.key)}
            connected={connectedProviders.has(m.provider)}
            selected={multiple ? Boolean(selected?.has(m.key)) : m.key === value}
            active={active === index}
            multiple={Boolean(multiple)}
            isMobile={isMobile}
            why={it.why}
            onPick={() => pick(m)}
            onFav={() => void toggleFavorite(m.key)}
            onMenu={() => setMenuModel(m)}
            onHover={() => setActive(index)}
            menuItems={() => menuItems(m)}
          />
        );
      }
    }
  };

  return (
    <>
      {trigger ? (
        <span className="contents" onClick={() => setOpen(true)}>
          {trigger}
        </span>
      ) : (
        <button
          type="button"
          onClick={() => setOpen(true)}
          className={cn(
            "inline-flex max-w-full items-center gap-2 rounded-lg border border-border bg-bg-elevated text-left transition-colors hover:border-border-strong hover:bg-bg-subtle",
            size === "sm" ? "h-8 px-2.5 text-[13px]" : "h-9 px-3 text-sm",
            className,
          )}
          aria-label="Select model"
          title="Select model (⌘/)"
        >
          {triggerLabel}
          <ChevronDown className="size-3.5 shrink-0 text-fg-subtle" />
        </button>
      )}

      <ResponsiveDialog
        open={open}
        onOpenChange={setOpen}
        title={multiple ? "Choose models" : "Choose a model"}
        hideTitle
        showClose={false}
        size="lg"
        snap="full"
        expandable={false}
        flush
        desktopFlush
        className="sm:h-[min(680px,86vh)]"
        bodyClassName="flex flex-col overflow-hidden"
        header={header}
        footer={
          multiple ? (
            <div className="flex items-center justify-between gap-3 text-[12.5px] text-fg-muted">
              <span>{selected?.size ?? 0} selected (max 4)</span>
              <Button size="sm" className="h-10 px-5 sm:h-8" onClick={() => setOpen(false)}>
                Done
              </Button>
            </div>
          ) : isMobile ? undefined : (
            <div className="flex items-center gap-3 text-[11px] text-fg-subtle">
              <span>
                <Kbd>↑↓</Kbd> navigate
              </span>
              <span>
                <Kbd>↵</Kbd> select
              </span>
              <span>
                <Kbd>⌘/</Kbd> toggle
              </span>
              <Badge variant="outline" className="ml-auto">
                {usable.length} models · {connectedProviders.size} provider{connectedProviders.size === 1 ? "" : "s"}
              </Badge>
            </div>
          )
        }
      >
        {noProviders ? (
          <div className="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center">
            <KeyRound className="size-6 text-fg-subtle" />
            <p className="text-sm font-medium">No provider connected yet</p>
            <p className="max-w-sm text-[13px] text-fg-muted">Add an API key from any supported provider to unlock its models. Keys are encrypted and never leave the server.</p>
            <Button asChild variant="accent" size="sm">
              <Link href="/app/settings/providers">Connect a provider</Link>
            </Button>
          </div>
        ) : (
          <div
            ref={setScrollRef}
            id="model-selector-list"
            role="listbox"
            aria-label="Models"
            tabIndex={-1}
            onKeyDown={onKeyNav}
            // The sheet's swipe-to-dismiss watches its own body (never scrolled here); only let it take over when our list is at the top.
            onPointerDown={(e) => {
              if ((scrollRef.current?.scrollTop ?? 0) > 0) e.stopPropagation();
            }}
            className="min-h-0 flex-1 overflow-y-auto pb-[max(12px,var(--sab))] scrollbar-thin contain-scroll" style={{ overflowAnchor: "none" }}>
            {searching && results && results.length === 0 ? (
              <div className="px-4 py-10 text-center">
                <p className="text-sm font-medium">No models match “{q}”</p>
                <p className="mt-1 text-[12.5px] text-fg-muted">Try a capability (“vision”, “reasoning”), a size (“1M context”), a price (“under $1/M”) or a provider (“gemini”).</p>
              </div>
            ) : (
              <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
                {virtualizer.getVirtualItems().map((v) => (
                  <div key={v.key} data-index={v.index} ref={virtualizer.measureElement} style={{ position: "absolute", top: 0, left: 0, width: "100%", transform: `translateY(${v.start}px)` }}>
                    {renderItem(items[v.index], v.index)}
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </ResponsiveDialog>

      <ActionSheet open={Boolean(menuModel) && isMobile} onOpenChange={(v) => (!v ? setMenuModel(null) : null)} title={menuModel?.displayName} description={menuModel ? `${PROVIDERS[menuModel.provider].name} · ${menuModel.id}` : undefined} items={menuModel ? menuItems(menuModel) : []} />

      <PromptDialog open={Boolean(labelModel)} onOpenChange={(v) => (!v ? setLabelModel(null) : null)} title="Custom label" description={labelModel ? `Shown next to ${labelModel.displayName} everywhere in PolyLLM.` : undefined} label="Label" placeholder="My research model" defaultValue={labelModel ? labels[labelModel.key] ?? "" : ""} maxLength={60} onSubmit={(v) => (labelModel ? setLabel(labelModel.key, v) : undefined)} />

      <ModelProfile model={profileModel} open={Boolean(profileModel)} onOpenChange={(v) => (!v ? setProfileModel(null) : null)} compareWith={current?.key ?? null} onUse={(m) => pick(m)} />
    </>
  );
}

/* ------------------------------------------------------------------------------------------------ */

function AutoCard({ selected, active, mode, onMode, onPick, pick, id }: { selected: boolean; active: boolean; mode: RouterMode; onMode: (m: RouterMode) => void; onPick: () => void; pick: ReturnType<typeof recommendedModels> | null; id: string }) {
  const top = pick?.route.recommended ?? null;
  return (
    <div className="px-2 pt-2">
      <div id={id} role="option" aria-selected={selected} className={cn("rounded-xl border p-3 transition-colors", selected ? "border-accent bg-accent-soft/40" : active ? "border-border-strong bg-bg-subtle" : "border-border")}>
        <button type="button" onClick={onPick} className="flex w-full items-start gap-3 text-left">
          <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent-soft text-accent">
            <Sparkles className="size-4" />
          </span>
          <span className="min-w-0 flex-1">
            <span className="flex items-center gap-2">
              <span className="text-[14px] font-semibold">Auto · Smart Router</span>
              {selected ? <Check className="size-4 text-accent" /> : null}
            </span>
            <span className="mt-0.5 block text-[12.5px] leading-4 text-fg-muted">Picks the best connected model for each prompt and shows you why before sending.</span>
          </span>
        </button>
        <Segmented size="sm" value={mode} onChange={onMode} ariaLabel="Router mode" options={ROUTER_MODES.map((r) => ({ value: r.value, label: r.label }))} className="mt-3 w-full" />
        <p className="mt-2 truncate text-[11.5px] text-fg-subtle">
          {top ? (
            <>
              Right now → <span className="font-medium text-fg-muted">{top.model.displayName}</span> · {explainRoute(top)}
            </>
          ) : (
            "Connect a provider to enable routing."
          )}
        </p>
      </div>
    </div>
  );
}

interface RowProps {
  id: string;
  model: PolyModel;
  ctx: BadgeContext;
  label?: string;
  fav: boolean;
  connected: boolean;
  selected: boolean;
  active: boolean;
  multiple: boolean;
  isMobile: boolean;
  why?: string[];
  onPick: () => void;
  onFav: () => void;
  onMenu: () => void;
  onHover: () => void;
  menuItems: () => ActionSheetItem[];
}

const stop = (e: React.SyntheticEvent) => e.stopPropagation();

const SelectorRow = React.memo(function SelectorRow({ id, model: m, ctx, label, fav, connected, selected, active, multiple, isMobile, why, onPick, onFav, onMenu, onHover, menuItems }: RowProps) {
  const press = useLongPress({ onLongPress: onMenu, onClick: onPick, disabled: !isMobile });
  const disabled = !connected;
  return (
    <div
      id={id}
      role="option"
      aria-selected={selected}
      aria-disabled={disabled || undefined}
      tabIndex={-1}
      onMouseEnter={onHover}
      onClick={isMobile ? undefined : onPick}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          onPick();
        }
      }}
      {...press}
      className={cn("group mx-2 flex h-14 select-none items-center gap-2.5 rounded-lg px-2 transition-colors", active && !selected && "bg-bg-subtle", selected && "bg-accent-soft/50", disabled ? "cursor-default opacity-60" : "cursor-pointer")}
    >
      <ProviderIcon provider={m.provider} size={18} className="shrink-0" />
      <div className="min-w-0 flex-1">
        <div className="flex min-w-0 items-center gap-1.5">
          <span className="truncate text-[14px] font-medium leading-5">{m.displayName}</span>
          {label ? <span className="truncate text-[12px] font-medium text-accent">{label}</span> : null}
          <StatusBadge model={m} connected={connected} ctx={ctx} className="hidden min-[400px]:inline-flex" />
          <ModelBadges model={m} ctx={ctx} max={isMobile ? 1 : 3} size="xs" className="hidden min-[400px]:inline-flex" />
        </div>
        <div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-[11.5px] tabular-nums text-fg-subtle">
          {m.limits?.contextTokens ? <span className="shrink-0">{formatTokens(m.limits.contextTokens)} ctx</span> : null}
          {m.pricing && (m.pricing.inputPerMillion !== undefined || m.pricing.outputPerMillion !== undefined) ? (
            <span className="shrink-0" title="USD per 1M tokens — input / output">
              · {formatPrice(m.pricing.inputPerMillion)} / {formatPrice(m.pricing.outputPerMillion)}
            </span>
          ) : null}
          <CapabilityGlyphs model={m} max={6} className="ml-1" />
          {why?.length ? <span className="hidden truncate text-accent/80 md:inline">· {why.join(", ")}</span> : null}
        </div>
      </div>
      {multiple && selected ? <Check className="size-4 shrink-0 text-accent" /> : null}
      <span className="flex shrink-0 items-center" onPointerDown={stop} onPointerUp={stop} onClick={stop}>
        <button
          type="button"
          onClick={onFav}
          aria-pressed={fav}
          aria-label={fav ? `Remove ${m.displayName} from favorites` : `Add ${m.displayName} to favorites`}
          className={cn("tap flex size-8 items-center justify-center rounded-md transition-colors hover:bg-bg-muted", fav ? "text-warning" : "text-fg-subtle hover:text-fg", !fav && "hover-reveal")}
        >
          <Star key={fav ? "on" : "off"} className={cn("size-4", fav && "fill-current animate-pop")} />
        </button>
        {isMobile ? (
          <button type="button" onClick={onMenu} className="tap flex size-8 items-center justify-center rounded-md text-fg-subtle" aria-label={`More actions for ${m.displayName}`}>
            <MoreHorizontal className="size-4" />
          </button>
        ) : (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button type="button" className="hover-reveal flex size-8 items-center justify-center rounded-md text-fg-subtle hover:bg-bg-muted hover:text-fg data-[state=open]:opacity-100" aria-label={`More actions for ${m.displayName}`}>
                <MoreHorizontal className="size-4" />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" onClick={stop}>
              {menuItems().map((it) => (
                <React.Fragment key={it.key}>
                  {it.key === "profile" ? <DropdownMenuSeparator /> : null}
                  <DropdownMenuItem onSelect={it.onSelect}>
                    <span className="[&_svg]:size-3.5">{it.icon}</span> {it.label}
                  </DropdownMenuItem>
                </React.Fragment>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        )}
      </span>
    </div>
  );
});