// frontend/src/theme/density.ts
import type { RadiusSize, CardStyle, DensitySize, ContentWidth } from "@/types/spec";

export const RADIUS_MAP: Record<RadiusSize, string> = {
  none: "0px", sm: "4px", md: "8px", lg: "12px", full: "9999px",
};
export const DENSITY_MAP: Record<DensitySize, string> = {
  compact: "var(--z-space-2)", default: "var(--z-space-3)", comfortable: "var(--z-space-4)",
};
export const CONTENT_WIDTH_MAP: Record<ContentWidth, string> = {
  sm: "640px", md: "960px", lg: "1200px", full: "100%",
};
export const CARD_STYLE_MAP: Record<CardStyle, { border: string; shadow: string }> = {
  flat:     { border: "none", shadow: "var(--z-shadow-none)" },
  outlined: { border: "1px solid var(--z-border)", shadow: "var(--z-shadow-none)" },
  raised:   { border: "none", shadow: "var(--z-shadow-md)" },
};

export function applyDesignTokens(
  root: HTMLElement,
  radius: RadiusSize = "md",
  cardStyle: CardStyle = "outlined",
  density: DensitySize = "default",
  contentWidth: ContentWidth = "md",
): void {
  root.style.setProperty("--z-radius", RADIUS_MAP[radius]);
  root.style.setProperty("--z-radius-card", RADIUS_MAP[radius]);
  root.style.setProperty("--z-radius-button", RADIUS_MAP[radius]);
  root.style.setProperty("--z-radius-input", RADIUS_MAP[radius]);
  const cs = CARD_STYLE_MAP[cardStyle];
  root.style.setProperty("--z-card-border", cs.border);
  root.style.setProperty("--z-card-shadow", cs.shadow);
  root.style.setProperty("--z-density-padding", DENSITY_MAP[density]);
  root.style.setProperty("--z-content-width", CONTENT_WIDTH_MAP[contentWidth]);
}
