<script lang="ts">
  /** Farbwerte aus global.css @theme – damit Paletten in Storybook garantiert sichtbar sind */
  const paletteHex: Record<string, Record<string, string>> = {
    wald: {
      '50': '#f0f5f1', '100': '#d9e8dc', '200': '#b3d1b9', '300': '#7fb58a',
      '400': '#4a9960', '500': '#2d7a45', '600': '#236335', '700': '#1a4d28',
      '800': '#12361c', '900': '#0a2011',
    },
    erde: {
      '50': '#faf6f1', '100': '#f0e6d6', '200': '#e0ccad', '300': '#c9a87a',
      '400': '#b08a52', '500': '#8b6d3f', '600': '#6e5530', '700': '#524023',
      '800': '#372b18', '900': '#1c160c',
    },
    himmel: {
      '50': '#f2f5f7', '100': '#dce4ea', '200': '#b8c9d4', '300': '#8aaabb',
      '400': '#5e8ba2', '500': '#436e85', '600': '#34576a', '700': '#264150',
      '800': '#1a2c36', '900': '#0e181e',
    },
    stein: {
      '0': '#ffffff', '50': '#f7f8f7', '100': '#eceeed', '200': '#d5d8d6',
      '300': '#b0b5b2', '400': '#868c89', '500': '#636966', '600': '#4a4f4c',
      '700': '#333735', '800': '#1f2221', '900': '#0f1110',
    },
  };

  const semanticHex = [
    { name: 'Success', main: '#2d7a45', subtle: '#f0f5f1' },
    { name: 'Warning', main: '#a6780a', subtle: '#fdf8ec' },
    { name: 'Error', main: '#b53629', subtle: '#fdf2f1' },
    { name: 'Info', main: '#436e85', subtle: '#f2f5f7' },
  ] as const;

  const palettes = [
    {
      name: 'Wald (Primary)',
      tokens: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
      prefix: 'wald',
    },
    {
      name: 'Erde (Secondary)',
      tokens: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
      prefix: 'erde',
    },
    {
      name: 'Himmel (Accent / Links)',
      tokens: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
      prefix: 'himmel',
    },
    {
      name: 'Stein (Neutrals)',
      tokens: ['0', '50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
      prefix: 'stein',
    },
  ] as const;

  const appColors = [
    { name: 'Text Primary', var: '--text-primary' },
    { name: 'Text Secondary', var: '--text-secondary' },
    { name: 'Text Tertiary', var: '--text-tertiary' },
    { name: 'Bg Primary', var: '--bg-primary' },
    { name: 'Bg Secondary', var: '--bg-secondary' },
    { name: 'Bg Tertiary', var: '--bg-tertiary' },
    { name: 'Accent', var: '--accent' },
    { name: 'Accent Hover', var: '--accent-hover' },
    { name: 'Link', var: '--link' },
    { name: 'Border Default', var: '--border-default' },
    { name: 'Border Strong', var: '--border-strong' },
    { name: 'Btn BG', var: '--color-btn-bg' },
    { name: 'Btn Hover BG', var: '--color-btn-hover-bg' },
    { name: 'Btn Text', var: '--color-btn-txt' },
    { name: 'Navigation', var: '--color-navigation' },
    { name: 'Font Highlight (Error)', var: '--color-font-highlight' },
    { name: 'Container Breakout', var: '--color-container-breakout' },
  ] as const;
</script>

<div class="space-y-10 text-stein-800">
  {#each palettes as palette}
    <section>
      <h3 class="mb-3 text-lg font-semibold">{palette.name}</h3>
      <div class="flex flex-wrap gap-2">
        {#each palette.tokens as t}
          {@const hex = paletteHex[palette.prefix]?.[t]}
          <div class="flex flex-col items-center gap-1">
            <div
              class="h-14 w-20 rounded-lg border border-stein-200 shadow-sm"
              style="background-color: {hex ?? 'transparent'}"
              title="--color-{palette.prefix}-{t}"
            ></div>
            <span class="text-xs text-stein-500">{t}</span>
          </div>
        {/each}
      </div>
    </section>
  {/each}

  <section>
    <h3 class="mb-3 text-lg font-semibold">Semantik (Success, Warning, Error, Info)</h3>
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
      {#each semanticHex as s}
        <div class="flex flex-col gap-2 rounded-lg border border-stein-200 p-3">
          <div
            class="h-12 rounded border border-stein-200"
            style="background-color: {s.main}"
            title="{s.name} main"
          ></div>
          <div
            class="h-8 rounded border border-stein-200"
            style="background-color: {s.subtle}"
            title="{s.name} subtle"
          ></div>
          <span class="text-sm font-medium">{s.name}</span>
          <span class="text-xs text-stein-500">+ subtle</span>
        </div>
      {/each}
    </div>
  </section>

  <section>
    <h3 class="mb-3 text-lg font-semibold">Semantik & App ( :root )</h3>
    <div class="grid grid-cols-2 gap-3 sm:grid-cols-4 md:grid-cols-5">
      {#each appColors as a}
        <div class="flex flex-col gap-1 rounded-lg border border-stein-200 p-2">
          <div
            class="h-10 w-full rounded border border-stein-200"
            style="background-color: var({a.var})"
            title="{a.var}"
          ></div>
          <span class="text-xs font-medium">{a.name}</span>
          <span class="truncate text-[0.65rem] text-stein-500" title="{a.var}">{a.var}</span>
        </div>
      {/each}
    </div>
  </section>
</div>
