"use client";
import * as React from "react";
import { Trophy } from "lucide-react";
import { ProviderIcon } from "@/components/brand/provider-icon";
import type { ColumnStatus } from "./types";
import { StatusDot } from "./metrics-strip";
import { BlindAvatar } from "./blind";
import { cn } from "@/lib/utils";

export interface ModelTabItem {
  key: string;
  name: string;
  provider: string | null;
  status: ColumnStatus;
  tokensPerSecond: number | null;
  isWinner?: boolean;
  /** Blind: identity hidden. */
  hidden?: boolean;
  blindIndex: number;
}

/**
 * Sticky model tab bar for the phone carousel (Segmented-like): provider icon (or blind letter),
 * status dot, name and live tok/s. Selecting a tab scrolls the carousel; swiping updates the tab.
 */
export function ModelTabs({ items, active, onSelect, className }: { items: ModelTabItem[]; active: number; onSelect: (index: number) => void; className?: string }) {
  const ref = React.useRef<HTMLDivElement>(null);
  // Keep the active tab in view while swiping.
  React.useEffect(() => {
    const el = ref.current?.children[active] as HTMLElement | undefined;
    el?.scrollIntoView({ block: "nearest", inline: "center", behavior: "smooth" });
  }, [active]);
  const onKey = (e: React.KeyboardEvent) => {
    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
    e.preventDefault();
    const next = (active + (e.key === "ArrowLeft" ? -1 : 1) + items.length) % items.length;
    onSelect(next);
    (ref.current?.children[next] as HTMLElement | undefined)?.focus();
  };
  return (
    <div ref={ref} role="tablist" aria-label="Models" onKeyDown={onKey} className={cn("flex h-11 w-full items-center gap-0.5 overflow-x-auto rounded-lg bg-bg-muted p-1 scrollbar-none", className)}>
      {items.map((it, i) => {
        const on = i === active;
        return (
          <button
            key={it.key}
            role="tab"
            type="button"
            aria-selected={on}
            tabIndex={on ? 0 : -1}
            onClick={() => onSelect(i)}
            className={cn(
              "inline-flex h-9 min-w-0 flex-1 shrink-0 basis-[44%] items-center justify-center gap-1.5 rounded-md px-2 text-[12.5px] font-medium transition-[background-color,color,box-shadow] duration-150 sm:basis-auto",
              on ? "bg-bg-elevated text-fg shadow-xs" : "text-fg-muted",
            )}
          >
            {it.hidden ? <BlindAvatar index={it.blindIndex} size={16} /> : <ProviderIcon provider={it.provider} size={13} />}
            <span className="truncate">{it.name}</span>
            <StatusDot status={it.status} />
            {it.tokensPerSecond ? <span className="hidden shrink-0 text-[10.5px] tabular-nums text-fg-subtle min-[400px]:inline">{it.tokensPerSecond}/s</span> : null}
            {it.isWinner ? <Trophy className="size-3 shrink-0 text-accent" aria-label="Winner" /> : null}
          </button>
        );
      })}
    </div>
  );
}