import { clsx, type ClassValue } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

/**
 * tailwind-merge ne lit pas le CSS : il ignore les tokens declares dans le
 * bloc `@theme` de `src/app/globals.css` et range tout `text-*` inconnu dans
 * son groupe `text-color`, dont le scale accepte n'importe quelle valeur.
 * Consequence mesuree : `cn("text-background text-label")` supprimait
 * `text-background` — le CTA « Inquire » s'ecrivait dans la couleur de son
 * propre fond — et les liens de nav perdaient `text-label-md`. Meme mecanique,
 * plus discrete, sur les autres namespaces : `px-cta-x` n'ecrasait pas `px-4`,
 * `lg:pt-header-lg` n'ecrasait pas `pt-8`, etc.
 *
 * On redeclare donc ici les namespaces Tailwind v4 utilises par le `@theme`.
 * Toute nouvelle variable `--text-*`, `--tracking-*`, `--leading-*`,
 * `--spacing-*`, `--container-*`, `--blur-*` ou `--shadow-*` ajoutee au
 * `@theme` doit etre reportee dans la liste correspondante.
 *
 * `--color-*` (gold-text, gold-bright, scrim, surface-container-low…) n'a pas
 * besoin d'etre declare : le scale couleur par defaut accepte deja toute
 * valeur, donc `bg-scrim` et `text-gold-text` fusionnent correctement.
 */
const twMerge = extendTailwindMerge<"shell">({
  extend: {
    /**
     * `@utility shell` (globals.css) pose `mx-auto max-w-editorial px-6 lg:px-16`.
     * Une classe = un seul groupe chez tailwind-merge : on ne peut declarer
     * qu'un sens de conflit. On choisit celui qui correspond a l'intention —
     * `shell` arrivant apres un `mx-*` / `px-*` / `max-w-*` les remplace.
     * L'inverse (surcharger une gouttiere par `cn("shell", "px-8")`) reste
     * arbitre par l'ordre du CSS, comme avant ce commit.
     */
    classGroups: { shell: ["shell"] },
    conflictingClassGroups: { shell: ["mx", "px", "max-w"] },
    theme: {
      // `--text-*` → `text-<name>` (taille de police, pas couleur).
      text: [
        "micro",
        "label",
        "label-md",
        "label-lg",
        "wordmark",
        "wordmark-sub",
        "lead",
        "card-title",
        "h3",
        "h2",
        "display-sm",
        "display-lg",
        "stat",
        "stat-md",
        "stat-lg",
        "watermark",
      ],
      // `--tracking-*` → `tracking-<name>`.
      tracking: ["caps", "caps-wide"],
      // `--leading-*` → `leading-<name>`.
      leading: ["body"],
      // `--spacing-*` → `p-`, `m-`, `gap-`, `h-`, `min-h-`, `size-`…
      spacing: [
        "header",
        "header-lg",
        "header-y",
        "header-y-lg",
        "section",
        "section-sm",
        "cta-x",
        "monogram-lg",
        "hero",
      ],
      // `--container-*` → `max-w-<name>`, `w-<name>`, `basis-<name>`.
      container: ["editorial", "lead"],
      // `--blur-*` → `blur-<name>`, `backdrop-blur-<name>`.
      blur: ["header", "header-compact"],
      // `--shadow-*` → `shadow-<name>`.
      shadow: ["header"],
    },
  },
});

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}