<script setup lang="ts">
import type { HomeCategoryListItem, HomeNomineeListItem } from './homeModalTypes'

const props = defineProps<{
  catList: HomeCategoryListItem[]
  activeCatName: string
  noms: HomeNomineeListItem[]
  voteCount: number
  totalCats: number
  canSubmitVote: boolean
  submitVote: () => Promise<void> | void
  submitting: boolean
}>()
</script>

<template>
  <div class="home-vote-picker">
    <aside class="home-vote-picker__rail">
      <div class="home-vote-picker__rail-label">Kategorien</div>
      <template v-for="(cat, __idx) in props.catList" :key="cat.idx ?? __idx">
        <button class="home-vote-picker__category-button" @click="cat.onClick" :style="cat.rowStyle">
          <span :style="cat.iconStyle">{{ cat.icon }}</span>
          <span>{{ cat.name }}</span>
          <span :style="cat.checkStyle">✓</span>
        </button>
      </template>
    </aside>

    <section class="home-vote-picker__content">
      <header class="home-vote-picker__category-header">
        <div>
          <p class="home-vote-picker__eyebrow">Kategorie</p>
          <h4>{{ props.activeCatName }}</h4>
        </div>
        <span class="home-vote-picker__hint">Nominee ansehen, Clip prüfen, Favorit:in wählen.</span>
      </header>

      <div class="home-vote-picker__cards">
        <template v-for="(nom, __idx) in props.noms" :key="nom.idx ?? __idx">
          <article class="home-vote-card" :class="{ 'home-vote-card--selected': nom.selected, 'home-vote-card--missing-clip': !nom.hasClip }">
            <div class="home-vote-card__identity">
              <div class="home-vote-card__avatar">{{ nom.initials || '✦' }}</div>
              <div class="home-vote-card__name-block">
                <div class="home-vote-card__name-row">
                  <h5>{{ nom.name }}</h5>
                  <span>{{ nom.platform }}</span>
                </div>
                <p>{{ nom.handle }}</p>
              </div>
            </div>

            <div class="home-vote-card__clip" @click.stop>
              <div class="home-vote-card__clip-header">
                <span class="home-vote-card__clip-platform">{{ nom.clipPlatform }}</span>
                <a
                  v-if="nom.clipUrl"
                  :href="nom.clipUrl"
                  target="_blank"
                  rel="noopener noreferrer"
                  referrerpolicy="no-referrer"
                >
                  {{ nom.clipTitle }}
                </a>
                <span v-else>Kein geprüfter Clip für diese Kategorie hinterlegt.</span>
              </div>

              <iframe
                v-if="nom.clipEmbedUrl"
                class="home-vote-card__clip-player"
                :src="nom.clipEmbedUrl"
                :title="nom.clipEmbedTitle"
                loading="lazy"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture; web-share"
                allowfullscreen
                referrerpolicy="strict-origin-when-cross-origin"
              />

              <p v-else-if="nom.clipUrl" class="home-vote-card__clip-fallback">
                Dieser Clip kann nicht eingebettet werden, ist aber über den Link erreichbar.
              </p>
            </div>

            <template v-if="nom.showPick">
              <button class="home-vote-card__pick" :class="{ 'home-vote-card__pick--selected': nom.selected }" @click="nom.onPick">
                {{ nom.btnLabel }}
              </button>
            </template>
          </article>
        </template>

        <div v-if="props.noms.length === 0" class="home-vote-picker__empty">
          Für diese Kategorie sind noch keine Kandidat:innen freigegeben.
        </div>
      </div>
    </section>
  </div>

  <div class="home-modal__vote-footer home-vote-picker__footer">
    <div><span>{{ props.voteCount }}</span> / {{ props.totalCats }} Kategorien gewählt</div>
    <button
      @click="props.submitVote"
      :disabled="props.submitting || !props.canSubmitVote"
      :class="{ 'home-vote-picker__submit--disabled': !props.canSubmitVote }"
    >
      {{ props.submitting ? 'Speichert ...' : props.canSubmitVote ? 'Stimmen absenden ✩' : 'Erst Favorit:in wählen' }}
    </button>
  </div>
</template>
