<script setup lang="ts">
import { computed } from 'vue'

export interface HomeCategoryProgressRailItem {
  id: string | number
  name: string
  groupName?: string
  icon: string
  status: string
  tone: 'empty' | 'active' | 'done' | 'error'
}

const props = defineProps<{
  items: HomeCategoryProgressRailItem[]
  activeId: string | number
  label: string
  onSelect: (id: string | number) => void
}>()

const groupedItems = computed(() => {
  const groups: Array<{ name: string; items: HomeCategoryProgressRailItem[] }> = []
  for (const item of props.items) {
    const groupName = item.groupName?.trim() || 'Weitere Kategorien'
    const current = groups.at(-1)
    if (current?.name === groupName) {
      current.items.push(item)
    } else {
      groups.push({ name: groupName, items: [item] })
    }
  }
  return groups
})
</script>

<template>
  <aside class="home-wizard-rail">
    <div class="home-wizard-rail__label">{{ props.label }}</div>
    <section v-for="group in groupedItems" :key="group.name" class="home-wizard-rail__group">
      <div class="home-wizard-rail__group-label">{{ group.name }}</div>
      <button
        v-for="item in group.items"
        :key="item.id"
        type="button"
        class="home-wizard-rail__button"
        :class="[
          `home-wizard-rail__button--${item.tone}`,
          { 'home-wizard-rail__button--selected': item.id === props.activeId },
        ]"
        @click="props.onSelect(item.id)"
      >
        <span class="home-wizard-rail__icon">{{ item.icon }}</span>
        <span class="home-wizard-rail__name">{{ item.name }}</span>
        <span class="home-wizard-rail__status">{{ item.status }}</span>
      </button>
    </section>
  </aside>
</template>
