<script setup>
import { ref, computed, watch } from 'vue'
import { renderMarkdownInline } from '../markdown.js'

const props = defineProps({ karten: { type: Array, default: () => [] } })

const offen = ref(false)
const reihenfolge = ref([])
const pos = ref(0)
const flipped = ref(false)

function reset() {
  reihenfolge.value = props.karten.map((_, i) => i)
  pos.value = 0
  flipped.value = false
}
watch(() => props.karten, reset, { immediate: true })

const aktuelle = computed(() => props.karten[reihenfolge.value[pos.value]] || null)
const zaehler = computed(() => `${Math.min(pos.value + 1, reihenfolge.value.length)} / ${reihenfolge.value.length}`)

function weiter(gewusst) {
  if (gewusst) {
    pos.value++
  } else {
    // „Nochmal" → Karte ans Ende der Runde schieben (leichtes Spacing).
    const [k] = reihenfolge.value.splice(pos.value, 1)
    reihenfolge.value.push(k)
  }
  if (pos.value >= reihenfolge.value.length) pos.value = 0
  flipped.value = false
}
</script>

<template>
  <div v-if="karten.length" class="flashcards">
    <button class="art-head" @click="offen = !offen">
      <span class="art-icon">🃏</span> Karteikarten
      <span class="art-count">{{ karten.length }}</span>
      <span class="art-toggle">{{ offen ? '▾' : '▸' }}</span>
    </button>
    <div v-if="offen && aktuelle" class="fc-body">
      <div class="fc-card" :class="{ flipped }" @click="flipped = !flipped">
        <div class="fc-zaehler">{{ zaehler }}</div>
        <div v-if="!flipped" class="fc-seite">
          <span class="fc-label">Frage</span>
          <div class="fc-text" v-html="renderMarkdownInline(aktuelle.frage)"></div>
          <span class="fc-hint">Klick zum Umdrehen</span>
        </div>
        <div v-else class="fc-seite">
          <span class="fc-label">Antwort</span>
          <div class="fc-text" v-html="renderMarkdownInline(aktuelle.antwort)"></div>
        </div>
      </div>
      <div v-if="flipped" class="fc-aktionen">
        <button class="fc-btn nochmal" @click="weiter(false)">Nochmal</button>
        <button class="fc-btn gewusst" @click="weiter(true)">Gewusst</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.flashcards { margin-top: 0.75rem; }
.art-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; cursor: pointer; padding: 0.35rem 0;
  font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
}
.art-icon { font-size: 0.95rem; }
.art-count {
  background: var(--panel-soft); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 0.45rem; font-size: 0.72rem;
}
.art-toggle { margin-left: auto; color: var(--text-faint); }

.fc-body { margin-top: 0.5rem; }
.fc-card {
  position: relative; min-height: 120px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem 1.1rem; background: var(--panel-soft);
  display: flex; align-items: center; justify-content: center; text-align: center;
  transition: border-color 0.15s;
}
.fc-card.flipped { border-color: var(--accent); }
.fc-zaehler {
  position: absolute; top: 6px; right: 10px;
  font-size: 0.68rem; color: var(--text-faint);
}
.fc-seite { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; }
.fc-label {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint); font-weight: 700;
}
.fc-text { font-size: 0.98rem; line-height: 1.45; }
.fc-hint { font-size: 0.7rem; color: var(--text-faint); margin-top: 0.2rem; }

.fc-aktionen { display: flex; gap: 8px; margin-top: 0.5rem; }
.fc-btn {
  flex: 1; padding: 0.5rem; border-radius: 8px; cursor: pointer;
  font-size: 0.82rem; font-weight: 600; border: 1px solid var(--border-strong);
  background: var(--panel);
}
.fc-btn.gewusst { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.fc-btn.nochmal { color: var(--text-muted); }
</style>
