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

const props = defineProps({
  topic: { type: String, required: true },
  steps: { type: Array, default: () => [] },        // feine Teilschritte {label, phase, state}
  generating: { type: Boolean, default: false },
  progress: { type: String, default: null },
  ready: { type: Boolean, default: false },
  partial: { type: Boolean, default: false },
})
const emit = defineEmits(['close', 'restartFrom', 'resetFrom', 'restartAll', 'removeAll', 'cancel'])

// Teilschritte nach Phase gruppieren, globalen Index für den Re-Run mitführen.
const phasenGruppen = computed(() => {
  const out = []
  props.steps.forEach((s, i) => {
    const last = out[out.length - 1]
    if (last && last.phase === s.phase) last.schritte.push({ ...s, idx: i })
    else out.push({ phase: s.phase, schritte: [{ ...s, idx: i }] })
  })
  return out
})

const gewaehlt = ref(null)   // markierter Startpunkt (Schritt-Index)
const confirm = ref(null)    // welche destruktive Aktion gerade „Sicher?" zeigt
const gewaehltLabel = computed(() => props.steps[gewaehlt.value]?.label || '')

function stepKlick(idx) {
  if (props.generating) return
  gewaehlt.value = gewaehlt.value === idx ? null : idx
  confirm.value = null
}
// 2-Klick-Bestätigung für destruktive Aktionen: erster Klick „armt", zweiter führt aus.
function arm(aktion, fn) {
  if (confirm.value === aktion) { confirm.value = null; fn() }
  else confirm.value = aktion
}
function neuAbHier() { const i = gewaehlt.value; gewaehlt.value = null; confirm.value = null; emit('restartFrom', i) }
function loeschAbHier() { const i = gewaehlt.value; gewaehlt.value = null; confirm.value = null; emit('resetFrom', i) }

const items = ref([])
const loading = ref(true)
const error = ref(null)

// Lernpfad-Stufen: Reihenfolge + Label (Farbe via CSS-Klasse st-<key>).
const STUFEN = [
  { key: 'anfaenger', label: 'Anfänger' },
  { key: 'fortgeschritten', label: 'Fortgeschritten' },
  { key: 'experte', label: 'Experte' },
]
// Alt-Themen tragen noch einfach/mittel/schwer → auf die neuen Keys mappen.
const ALT_STUFE = { einfach: 'anfaenger', mittel: 'fortgeschritten', schwer: 'experte' }

watch(() => props.topic, load, { immediate: true })

async function load() {
  loading.value = true
  error.value = null
  items.value = []
  try {
    items.value = await fetchBausteineUebersicht(props.topic)
  } catch (e) {
    error.value = 'Übersicht nicht verfügbar — bitte erst Bausteine erstellen.'
  } finally {
    loading.value = false
  }
}

// Baustein relevant = hat ≥1 relevanten Subbaustein (gleiche Regel wie der Guide).
// Ohne Relevanz-Daten (Alt-Themen) nicht dimmen.
function relevant(b) {
  const mitRelevanz = (b.subbausteine || []).filter((s) => s.relevanz)
  return !mitRelevanz.length || mitRelevanz.some((s) => s.relevanz === 'relevant')
}

// Nur nicht-leere Stufen-Gruppen je Baustein (v-if + v-for nicht auf einem Element)
function gruppen(b) {
  return STUFEN
    .map((st) => ({ ...st, subs: (b.subbausteine || []).filter((s) => (ALT_STUFE[s.stufe] || s.stufe) === st.key) }))
    .filter((g) => g.subs.length)
}

const subTotal = computed(() => items.value.reduce((n, b) => n + (b.subbausteine?.length || 0), 0))
</script>

<template>
  <div class="bk-view">
    <header class="bk-head">
      <h1>{{ topic }}</h1>
      <span class="bk-sub">Bausteine-Übersicht</span>
      <span v-if="items.length" class="bk-count">{{ items.length }} Bausteine · {{ subTotal }} Subbausteine</span>
      <span class="bk-spacer"></span>
      <button class="bk-close" title="Schließen" @click="emit('close')">✕</button>
    </header>

    <section v-if="steps.length" class="bk-steps">
      <div class="bk-steps-top">
        <div v-if="progress" class="bk-progress"><span class="bk-progress-dot"></span>{{ progress }}</div>
        <div v-if="!generating" class="bk-global-actions">
          <button class="bk-act play" @click="emit('restartAll')">{{ partial ? 'Fortsetzen' : ready ? 'Neu generieren' : 'Generieren' }}</button>
          <button
            v-if="ready || partial"
            class="bk-act danger"
            :class="{ armed: confirm === 'remove' }"
            @click="arm('remove', () => emit('removeAll'))"
          >{{ confirm === 'remove' ? 'Sicher?' : 'Entfernen' }}</button>
        </div>
        <div v-else class="bk-global-actions">
          <button class="bk-act danger" @click="emit('cancel')">Abbrechen</button>
        </div>
      </div>
      <div class="bk-phasen">
        <div v-for="g in phasenGruppen" :key="g.phase" class="bk-phase">
          <span class="bk-phase-label">{{ g.phase }}</span>
          <div class="bk-schritte">
            <button
              v-for="s in g.schritte"
              :key="s.idx"
              class="bk-step"
              :class="[s.state, { sel: gewaehlt === s.idx }]"
              :disabled="generating"
              :title="`Startpunkt «${s.label}» wählen`"
              @click="stepKlick(s.idx)"
            >{{ s.label }}</button>
          </div>
        </div>
      </div>
      <div v-if="gewaehlt !== null && !generating" class="bk-step-actions">
        <span class="bk-step-actions-label">Ab «{{ gewaehltLabel }}»:</span>
        <button class="bk-act play" @click="neuAbHier">↻ neu generieren</button>
        <button class="bk-act danger" :class="{ armed: confirm === 'reset' }" @click="arm('reset', loeschAbHier)">{{ confirm === 'reset' ? 'Sicher?' : '✕ alles löschen' }}</button>
        <button class="bk-act ghost" @click="gewaehlt = null; confirm = null">Abbrechen</button>
      </div>
    </section>

    <div v-if="loading" class="bk-empty-state">Lade…</div>
    <div v-else-if="error" class="bk-empty-state">{{ error }}</div>
    <div v-else-if="!items.length" class="bk-empty-state">Noch keine Bausteine.</div>

    <div v-else class="bk-grid">
      <article
        v-for="b in items"
        :key="b.num"
        class="bk-card"
        :class="{ 'bk-irrelevant': !relevant(b) }"
        :title="relevant(b) ? null : 'Nicht relevant — kommt später in den „Rest“'"
      >
        <h3 class="bk-title"><span class="bk-num">{{ b.num }}</span>{{ b.titel }}</h3>
        <p v-if="b.beschreibung" class="bk-desc">{{ b.beschreibung }}</p>
        <div v-if="b.subbausteine && b.subbausteine.length" class="bk-stufen">
          <div v-for="g in gruppen(b)" :key="g.key" class="bk-stufe" :class="'st-' + g.key">
            <span class="bk-stufe-label">{{ g.label }}</span>
            <ul>
              <li v-for="s in g.subs" :key="s.titel" :class="{ rand: s.relevanz === 'rand' }">
                {{ s.titel }}<span v-if="s.relevanz === 'rand'" class="rand-tag" title="Randthema — kommt später in den „Rest“">Rand</span>
              </li>
            </ul>
          </div>
        </div>
        <p v-else class="bk-no-subs">Keine Subbausteine.</p>
      </article>
    </div>
  </div>
</template>

<style scoped>
.bk-view {
  flex: 1;
  min-width: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-preview);
}

.bk-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.bk-head h1 { font-size: 1.5rem; }
.bk-sub { color: var(--text-faint); font-size: 0.9rem; font-weight: 600; }
.bk-count { color: var(--text-muted); font-size: 0.82rem; }
.bk-spacer { flex: 1; }
.bk-close {
  align-self: center;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}
.bk-close:hover { border-color: var(--accent); }

/* Schritt-Übersicht über den Bausteinen */
.bk-steps {
  padding: 0.85rem 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel-soft);
}
.bk-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.7rem;
}
.bk-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: bk-pulse 1.2s ease-in-out infinite;
}
@keyframes bk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.bk-phasen { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.bk-phase { display: flex; flex-direction: column; gap: 0.3rem; }
.bk-phase-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.bk-schritte { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.bk-step {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text-muted);
  font-size: 0.74rem;
  padding: 0.22rem 0.5rem;
  cursor: pointer;
  white-space: nowrap;
}
.bk-step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bk-step:disabled { cursor: default; opacity: 0.7; }
.bk-step.done { border-color: var(--success-border); color: var(--success); }
.bk-step.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.bk-step.pending { color: var(--text-faint); }
.bk-step.sel { border-color: var(--accent); color: var(--on-accent); background: var(--accent); font-weight: 700; box-shadow: 0 0 0 2px var(--accent-soft); }

/* Kopf: Fortschritt links, globale Buttons rechts */
.bk-steps-top { display: flex; align-items: center; gap: 1rem; min-height: 1.9rem; margin-bottom: 0.7rem; }
.bk-steps-top .bk-progress { margin-bottom: 0; }
.bk-global-actions { margin-left: auto; display: flex; gap: 0.4rem; }

/* Aktions-Leiste bei gewähltem Startpunkt */
.bk-step-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border-strong);
}
.bk-step-actions-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }

.bk-act {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  font-weight: 600;
}
.bk-act:hover { border-color: var(--accent); }
.bk-act.play { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.bk-act.play:hover { background: var(--accent-hover); }
.bk-act.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.bk-act.danger.armed { background: var(--danger); color: #fff; }
.bk-act.ghost { color: var(--text-muted); }

.bk-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.bk-grid {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  align-content: start;
}

.bk-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent-border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
/* Nicht relevante Bausteine (kein relevanter Subbaustein) gedimmt */
.bk-card.bk-irrelevant { opacity: 0.5; }

.bk-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.bk-num {
  flex: 0 0 auto;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
}
.bk-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.45;
  margin-bottom: 0.7rem;
}

.bk-stufen { display: flex; flex-direction: column; gap: 0.55rem; }
.bk-stufe {
  border-left: 3px solid var(--st);
  padding-left: 0.6rem;
}
.bk-stufe.st-anfaenger { --st: var(--stufe-anfaenger); }
.bk-stufe.st-fortgeschritten { --st: var(--stufe-fortgeschritten); }
.bk-stufe.st-experte { --st: var(--stufe-experte); }

.bk-stufe-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--st);
}
.bk-stufe ul {
  list-style: disc;
  margin: 0.25rem 0 0;
  padding-left: 1.15rem;
}
.bk-stufe li {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 2px;
}
.bk-stufe li::marker { color: var(--text-faint); }
.bk-stufe li.rand { color: var(--text-faint); }
.rand-tag {
  margin-left: 0.4rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-faint);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 0 4px;
}

.bk-no-subs { color: var(--text-faint); font-size: 0.8rem; font-style: italic; }
</style>
