@use "sass:math";
@use "sass:map";
@use "sass:list";

// Configuration du système de couleurs
// Ces variables peuvent être override par eva.config.cjs
$auto-theme-switch: false !default;     // true = changement automatique sur prefers-color-scheme, false = changement manuel avec .toggle-theme
$theme-name: 'eva' !default;             // Nom du thème (défini par eva.config.cjs)
$theme-colors: () !default;              // Couleurs du thème depuis config
$light-mode-lightness: 96.4% !default;   // Lightness en mode clair
$light-mode-darkness: 6.4% !default;     // Darkness en mode clair
$dark-mode-lightness: 5% !default;       // Lightness en mode sombre
$dark-mode-darkness: 95% !default;       // Darkness en mode sombre

:root {

  --current-lightness: #{$light-mode-lightness};
  --current-darkness: #{$light-mode-darkness};

  --brand-lightness: 80%;
  --brand-chroma: 0;
  --brand-hue: 0;

  --accent-lightness: 70%;
  --accent-chroma: 0;
  --accent-hue: 0;

  --extra-lightness: 60%;
  --extra-chroma: 0;
  --extra-hue: 0;

  --dark-lightness: var(--current-darkness);
  --dark-chroma: 0.05;
  --dark-hue: var(--brand-hue);

  --light-lightness: var(--current-lightness);
  --light-chroma: 0.1;
  --light-hue: var(--brand-hue);

  --darker: -5%;
  --brighter: 10%;
  --darker_: -15%;
  --brighter_: 30%;

}

// =====================================================================
// VARIABLES DE BASE - Source unique de vérité
// =====================================================================

// Noms des couleurs de base (utilisés partout)
$base-colors: "brand", "accent", "extra", "dark", "light";

// Variations fade (opacité)
$fade-variations: "_", "__", "___";
$fade-values: 65%, 35%, 15% !default;

// Variations brightness (luminosité)
$brightness-variations: "-d", "-b", "-d_", "-b_";
$brightness-values: var(--darker), var(--brighter), var(--darker_), var(--brighter_);

// =====================================================================
// MAPS GÉNÉRÉES À PARTIR DES VARIABLES DE BASE
// =====================================================================

// Map des couleurs principales
$color-map: (
  "brand": var(--brand-lightness) var(--brand-chroma) var(--brand-hue),
  "accent": var(--accent-lightness) var(--accent-chroma) var(--accent-hue),
  "extra": var(--extra-lightness) var(--extra-chroma) var(--extra-hue),
  "dark": var(--dark-lightness) var(--dark-chroma) var(--dark-hue),
  "light": var(--light-lightness) var(--light-chroma) var(--light-hue)
);

// Map des variations fade (générée dynamiquement)
$fade-map: ();
@for $i from 1 through list.length($fade-variations) {
  $variation: list.nth($fade-variations, $i);
  $value: list.nth($fade-values, $i);
  $fade-map: map.merge($fade-map, ($variation: $value));
}

// Map des variations brightness (générée dynamiquement)
$darkbright-map: ();
@for $i from 1 through list.length($brightness-variations) {
  $variation: list.nth($brightness-variations, $i);
  $value: list.nth($brightness-values, $i);
  $darkbright-map: map.merge($darkbright-map, ($variation: $value));
}

// Variables partagées consolidées
$gradients: $base-colors;
$gradients-darkbright: $brightness-variations;
$all-variations: list.join(list.join(("",), $fade-variations), $brightness-variations);



// Génération des variables CSS avec les bons suffixes
.current-theme {
  @each $color-name, $color-value in $color-map {
    --root-#{$color-name}: #{$color-value};
    --#{$color-name}: oklch(var(--root-#{$color-name}));

    @each $suffix, $fade-value in $fade-map {
      --#{$color-name}#{$suffix}: oklch(var(--root-#{$color-name}) / #{$fade-value});
    }

    @each $suffix, $darkbright-value in $darkbright-map {
      --#{$color-name}#{$suffix}: oklch(calc(var(--#{$color-name}-lightness) + #{$darkbright-value}) var(--#{$color-name}-chroma) var(--#{$color-name}-hue));
    }
  }

}

// Génération du thème depuis eva.config.cjs
@if list.length($theme-colors) > 0 {
  .theme-#{$theme-name} {
    @each $color-name, $color-values in $theme-colors {
      --#{$color-name}-lightness: #{list.nth($color-values, 1)};
      --#{$color-name}-chroma: #{list.nth($color-values, 2)};
      --#{$color-name}-hue: #{list.nth($color-values, 3)};
    }

    --current-lightness: #{$light-mode-lightness};
    --current-darkness: #{$light-mode-darkness};
  }

  @if $auto-theme-switch {
    @media (prefers-color-scheme: dark) {
      .theme-#{$theme-name} {
        --current-lightness: #{$dark-mode-lightness};
        --current-darkness: #{$dark-mode-darkness};
      }
    }
  } @else {
    .theme-#{$theme-name}.toggle-theme {
      --current-lightness: #{$dark-mode-lightness};
      --current-darkness: #{$dark-mode-darkness};
    }
  }
}



$suffix: "_";
$colors-class: $base-colors;
$fades: $fade-variations;
$shades: $brightness-variations;

$colors: (
  c: color,
  bg: background,
  bc: border-color,
  f: fill,
  s: stroke,
);

@mixin getAllColors($prop, $key) {
  @each $class in $colors-class {
    .#{$suffix}#{$key}-#{$class} {
      --current-#{$key}-color: var(--#{$class});

      @each $fade in $fades {
        &#{$fade} {
          --current-#{$key}-color: var(--#{$class}#{$fade});
        }
      }
      @each $shade in $shades {
        &#{$shade} {
          --current-#{$key}-color: var(--#{$class}#{$shade});
        }
      }
    }
  }

  @if ($key == "f") {
    [class*="#{$suffix}#{$key}"] path,
    [class*="#{$suffix}#{$key}"] {
      #{$prop}: var(--current-#{$key}-color);
    }
  } @else {
    [class*="#{$suffix}#{$key}"] {
      #{$prop}: var(--current-#{$key}-color);
    }
  }
}

// Variable pour contrôler la génération des classes de couleurs
$build-color-classes: true !default;

@if $build-color-classes {
  @each $key, $prop in $colors {
    @include getAllColors($prop, $key);
  }
}

// Gestion du changement de thème
@if $auto-theme-switch {
  // Mode automatique basé sur prefers-color-scheme
  @media (prefers-color-scheme: dark) {
    .current-theme {
      --darker: 10%;
      --brighter: -5%;
      --darker_: 30%;
      --brighter_: -15%;


      --current-lightness: #{$dark-mode-lightness};
      --current-darkness: #{$dark-mode-darkness};

      --dark-lightness: var(--current-darkness) !important;
      --light-lightness: var(--current-lightness) !important;


    }
  }
} @else {
  // Mode manuel avec classe .toggle-theme
  .current-theme.toggle-theme {
    --darker: 10%;
    --brighter: -5%;
    --darker_: 30%;
    --brighter_: -15%;


    --current-lightness: #{$dark-mode-lightness};
    --current-darkness: #{$dark-mode-darkness};

    --dark-lightness: var(--current-darkness) !important;
    --light-lightness: var(--current-lightness) !important;

  }
}