"use client";

// Per-leaf colour swatch. Each leaf in the composite-search tree gets a
// deterministic hue derived from its `id`, so the same leaf renders the
// same colour in its editor card AND on every result hit it contributes.
// Hue space is mod 360 with fixed saturation/lightness for a consistent
// palette in both light and dark themes.

function hashStr(s: string): number {
  let h = 0;
  for (let i = 0; i < s.length; i++) {
    h = (h * 31 + s.charCodeAt(i)) | 0;
  }
  return h;
}

export function swatchHue(id: string): number {
  return Math.abs(hashStr(id)) % 360;
}

export function swatchBgStyle(id: string): React.CSSProperties {
  const h = swatchHue(id);
  return {
    backgroundColor: `hsl(${h} 70% 55%)`,
  };
}

export function swatchSoftBgStyle(id: string): React.CSSProperties {
  const h = swatchHue(id);
  return {
    backgroundColor: `hsl(${h} 70% 55% / 0.14)`,
    borderColor: `hsl(${h} 70% 55% / 0.45)`,
  };
}

export function LayerSwatch({
  leafId,
  size = "sm",
  className = "",
}: {
  leafId: string;
  size?: "xs" | "sm";
  className?: string;
}) {
  const dim = size === "xs" ? "h-2 w-2" : "h-2.5 w-2.5";
  return (
    <span
      className={`inline-block rounded-full ${dim} shrink-0 ${className}`}
      style={swatchBgStyle(leafId)}
      aria-hidden="true"
    />
  );
}