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

export interface HomeNominationReviewItem {
  categoryIndex: number
  categoryName: string
  links: string[]
}

const props = defineProps<{
  items: HomeNominationReviewItem[]
  totalLinks: number
  totalCategories: number
  onEditCategory: (index: number) => void
}>()

const skippedCategoryCount = computed(() =>
  Math.max(0, props.totalCategories - props.items.length),
)

const reviewStats = computed(() => [
  {
    label: 'Links bereit',
    value: `${props.totalLinks}`,
  },
  {
    label: 'Kategorien gefuellt',
    value: `${props.items.length}/${props.totalCategories}`,
  },
  {
    label: 'Werden uebersprungen',
    value: `${skippedCategoryCount.value}`,
  },
])
</script>

<template>
  <section class="home-nomination-review">
    <div class="home-nomination-review__hero">
      <p class="home-vote-picker__eyebrow">Prüfen</p>
      <h4>Nominierungen einreichen?</h4>
      <p>
        Du reichst {{ props.totalLinks }} Links in {{ props.items.length }} von
        {{ props.totalCategories }} Kategorien ein. Leere Kategorien werden übersprungen.
      </p>

      <div class="home-nomination-review__stats">
        <div v-for="stat in reviewStats" :key="stat.label" class="home-nomination-review__stat">
          <span>{{ stat.label }}</span>
          <strong>{{ stat.value }}</strong>
        </div>
      </div>
    </div>

    <div v-if="props.items.length" class="home-nomination-review__list">
      <article v-for="item in props.items" :key="item.categoryName" class="home-nomination-review__item">
        <div class="home-nomination-review__item-header">
          <div class="home-nomination-review__item-copy">
            <p class="home-nomination-review__item-eyebrow">Kategorie</p>
            <h5>{{ item.categoryName }}</h5>
          </div>
          <span>{{ item.links.length }} Link{{ item.links.length === 1 ? '' : 's' }}</span>
        </div>
        <ul class="home-nomination-review__links">
          <li v-for="link in item.links" :key="link">
            <span class="home-nomination-review__link-dot" aria-hidden="true"></span>
            <span>{{ link }}</span>
          </li>
        </ul>
        <button class="home-nomination-review__edit" type="button" @click="props.onEditCategory(item.categoryIndex)">
          Bearbeiten
        </button>
      </article>
    </div>

    <div v-else class="home-nomination-review__empty">
      <div class="home-nomination-review__empty-icon" aria-hidden="true">✦</div>
      <div class="home-nomination-review__empty-copy">
        <p class="home-nomination-review__empty-eyebrow">Noch leer</p>
        <h5>Noch keine Links eingetragen.</h5>
        <p>Fülle links mindestens eine Kategorie aus, dann erscheint hier deine finale Einreichungsübersicht.</p>
      </div>
    </div>
  </section>
</template>
