freezmo/components/chat/ModelPicker.tsx

"use client";

import { useEffect } from "react";

import { CheckCircleIcon } from "@/components/icons";
import { useI18n } from "@/lib/i18n";
import { useIsPhone } from "@/lib/use-phone";
import type { ChatModelChoice } from "@/lib/chat";
import { cn } from "@/lib/utils";

/**
 * Model chip picker: a bottom sheet on phones, a small dropdown on desktop.
 * The list is the server's CHAT_MODELS allowlist (from the health check) with
 * text/vision badges and availability; picking one remembers it.
 */
export function ModelPicker({
  open,
  onClose,
  models,
  value,
  onChange,
}: {
  open: boolean;
  onClose: () => void;
  models: ChatModelChoice[];
  value: string;
  onChange: (model: string) => void;
}) {
  const { t } = useI18n();
  const isPhone = useIsPhone();

  useEffect(() => {
    if (!open) return;
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  const badge = (model: ChatModelChoice) =>
    model.badge === "vision" ? t("chat.modelVision") : model.badge === "both" ? t("chat.modelBoth") : t("chat.modelText");

  const rows = (
    <ul className="max-h-[60dvh] space-y-1 overflow-y-auto overscroll-contain">
      {models.map((model) => {
        const selected = model.name === value;
        const unavailable = model.available === false;
        return (
          <li key={model.name}>
            <button
              type="button"
              disabled={unavailable}
              aria-pressed={selected}
              onClick={() => {
                onChange(model.name);
                onClose();
              }}
              className={cn(
                "flex w-full items-center gap-3 rounded-2xl border px-3 py-3 text-left transition",
                selected
                  ? "border-[var(--nav-active-border)] bg-[var(--nav-active-bg)]"
                  : "border-[var(--hairline-soft)] bg-[var(--surface-bg)] hover:bg-[var(--hover)]",
                unavailable && "opacity-55",
              )}
            >
              <span className="min-w-0 flex-1">
                <span className="block truncate text-[13.5px] font-semibold text-[var(--text)]">{model.name}</span>
                <span className="mt-0.5 flex items-center gap-2 text-[11.5px] text-[var(--text-subtle)]">
                  <span className="rounded-md border border-[var(--hairline-soft)] px-1.5 py-0.5">{badge(model)}</span>
                  {model.available === true ? (
                    <span className="text-emerald-600 dark:text-emerald-300">{t("chat.modelAvailable")}</span>
                  ) : model.available === false ? (
                    <span className="text-amber-600 dark:text-amber-300">{t("chat.modelUnavailable")}</span>
                  ) : null}
                </span>
              </span>
              {selected ? <CheckCircleIcon className="size-5 shrink-0 text-accent-500" /> : null}
            </button>
          </li>
        );
      })}
    </ul>
  );

  if (isPhone) {
    return (
      <div className="fixed inset-0 z-50" role="dialog" aria-modal="true" aria-label={t("chat.modelTitle")}>
        <button type="button" className="absolute inset-0 bg-black/45" aria-label={t("common.close")} onClick={onClose} />
        <div className="glass-panel absolute inset-x-0 bottom-0 max-h-[80dvh] rounded-b-none px-4 pb-safe pt-2">
          <div className="sheet-grabber mx-auto" aria-hidden />
          <h2 className="px-1 pb-3 pt-2 text-[15px] font-semibold text-[var(--text)]">{t("chat.modelTitle")}</h2>
          {rows}
          <p className="px-1 py-3 text-[11.5px] text-[var(--text-subtle)]">{t("chat.modelNote")}</p>
        </div>
      </div>
    );
  }

  return (
    <div
      className="glass-panel absolute bottom-full right-0 z-40 mb-2 w-80 p-3"
      role="dialog"
      aria-label={t("chat.modelTitle")}
    >
      <h2 className="px-1 pb-2 text-[13px] font-semibold uppercase tracking-wide text-[var(--text-subtle)]">
        {t("chat.modelTitle")}
      </h2>
      {rows}
      <p className="px-1 pt-2 text-[11.5px] text-[var(--text-subtle)]">{t("chat.modelNote")}</p>
    </div>
  );
}