"use client";
import * as React from "react";
import { Brain, Crown, X, Zap } from "lucide-react";
import { useApp } from "@/components/app/store";
import { ModelSelector } from "@/components/chat/model-selector";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { Tooltip } from "@/components/ui/tooltip";
import { toast } from "@/components/ui/toast";
import { cn } from "@/lib/utils";
import { MAX_MODELS, presetModels, type PresetId } from "./types";

const PRESETS: { id: PresetId; label: string; icon: React.ReactNode; hint: string }[] = [
  { id: "flagships", label: "Flagships", icon: <Crown className="size-3.5" />, hint: "The top model of each connected provider" },
  { id: "fast", label: "Fast", icon: <Zap className="size-3.5" />, hint: "Low-latency, low-cost tier" },
  { id: "reasoning", label: "Reasoning", icon: <Brain className="size-3.5" />, hint: "Models with extended thinking" },
];

/** Selected-model chips + "Add model" + quick presets. One scrollable row on phones, wraps from `md`. */
export function ArenaModelPicker({ selected, onChange, disabled, className }: { selected: string[]; onChange: (keys: string[]) => void; disabled?: boolean; className?: string }) {
  const { models, modelsByKey, connectedProviders } = useApp();
  const set = React.useMemo(() => new Set(selected), [selected]);

  const toggle = (key: string) => {
    if (set.has(key)) return onChange(selected.filter((k) => k !== key));
    if (selected.length >= MAX_MODELS) return toast.warning(`Up to ${MAX_MODELS} models`, "Remove one to add another.");
    onChange([...selected, key]);
  };

  const applyPreset = (id: PresetId) => {
    const keys = presetModels(id, models, connectedProviders);
    if (!keys.length) return toast.info("No matching models", "Connect a provider or pick models manually.");
    onChange(keys);
  };

  return (
    <div className={cn("flex items-center gap-2 overflow-x-auto scrollbar-none md:flex-wrap", disabled && "pointer-events-none opacity-60", className)} aria-disabled={disabled} data-no-edge-swipe>
      {selected.map((key, i) => {
        const m = modelsByKey.get(key);
        return (
          <span key={key} className="group inline-flex h-9 max-w-[220px] shrink-0 items-center gap-2 rounded-lg border border-border bg-bg-elevated pl-2.5 pr-1 text-[13px] shadow-xs animate-fade-up" style={{ animationDelay: `${i * 30}ms` }}>
            <ProviderIcon provider={m?.provider ?? key.split("/")[0]} size={14} />
            <span className="truncate font-medium">{m?.displayName ?? key}</span>
            <button type="button" onClick={() => toggle(key)} className="tap rounded p-1 text-fg-subtle transition-colors hover:bg-bg-muted hover:text-danger" aria-label={`Remove ${m?.displayName ?? key}`}>
              <X className="size-3.5" />
            </button>
          </span>
        );
      })}
      {selected.length < MAX_MODELS ? (
        <span className="shrink-0">
          <ModelSelector value={null} multiple selected={set} onToggle={toggle} buttonLabel={selected.length ? "Add model" : "Choose models"} size="md" />
        </span>
      ) : null}
      <span className="shrink-0 text-[12px] tabular-nums text-fg-subtle">
        {selected.length}/{MAX_MODELS}
      </span>
      <span className="hidden h-5 w-px shrink-0 bg-border sm:block" aria-hidden />
      <div className="flex min-w-0 items-center gap-1 overflow-x-auto scrollbar-none" role="group" aria-label="Quick presets">
        {PRESETS.map((p) => (
          <Tooltip key={p.id} content={p.hint}>
            <button type="button" onClick={() => applyPreset(p.id)} className="tap inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-[12.5px] font-medium text-fg-muted transition-colors hover:bg-bg-muted hover:text-fg">
              {p.icon}
              {p.label}
            </button>
          </Tooltip>
        ))}
      </div>
    </div>
  );
}