/**
 * 环境徽标：取环境名首字的彩色单字标（颜色按 id 稳定分配）。
 * 左栏列表、顶栏切换器、环境弹窗共用，帮助一眼识别当前环境。
 */
import type { CSSProperties } from "react";

const PALETTE = [
  "#3b82f6", // blue
  "#8b5cf6", // violet
  "#10b981", // emerald
  "#f59e0b", // amber
  "#f43f5e", // rose
  "#06b6d4", // cyan
  "#ec4899", // pink
  "#84cc16", // lime
];

function hashColor(id: string): string {
  let h = 0;
  for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) >>> 0;
  return PALETTE[h % PALETTE.length];
}

function firstChar(name: string): string {
  const trimmed = (name || "").trim();
  if (!trimmed) return "环";
  // 取第一个字符（含中文）；英文取大写
  const ch = Array.from(trimmed)[0];
  return /[a-z]/.test(ch) ? ch.toUpperCase() : ch;
}

export function EnvBadge({
  envId,
  name,
  size = 24,
  style,
}: {
  envId: string;
  name: string;
  size?: number;
  style?: CSSProperties;
}) {
  const color = hashColor(envId);
  return (
    <span
      className="env-badge"
      style={{
        width: size,
        height: size,
        fontSize: Math.round(size * 0.46),
        background: `color-mix(in srgb, ${color} 16%, transparent)`,
        color,
        borderColor: `color-mix(in srgb, ${color} 40%, transparent)`,
        ...style,
      }}
      aria-hidden="true"
    >
      {firstChar(name)}
    </span>
  );
}