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

// Reine Flip-Karte: der Übungspool (PracticePanel) steuert Stapel und Leitner —
// die Karte zeigt nur Frage/Antwort und meldet die Bewertung nach oben.
const props = defineProps({ card: { type: Object, required: true } }) // { question, answer }
const emit = defineEmits(['answer']) // answer(correct: boolean)

const flipped = ref(false)
watch(() => props.card, () => { flipped.value = false })
</script>

<template>
  <div class="fc-body">
    <div class="fc-card" :class="{ flipped }" @click="flipped = !flipped">
      <div v-if="!flipped" class="fc-seite">
        <span class="fc-label">Frage</span>
        <div class="fc-text" v-html="renderMarkdownInline(card.question)"></div>
        <span class="fc-hint">Klicken zum Umdrehen</span>
      </div>
      <div v-else class="fc-seite">
        <span class="fc-label">Antwort</span>
        <div class="fc-text" v-html="renderMarkdownInline(card.answer)"></div>
      </div>
    </div>
    <div v-if="flipped" class="fc-aktionen">
      <button class="fc-btn nochmal" @click="emit('answer', false)">Nochmal</button>
      <button class="fc-btn gewusst" @click="emit('answer', true)">Gewusst</button>
    </div>
  </div>
</template>

<style scoped>
.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-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>
