<script setup>
import { ref } from 'vue'
import { projektEntfernen, starteScan } from '../api.js'

const props = defineProps({ projekt: { type: Object, required: true } })
const emit = defineEmits(['oeffne', 'aktualisiert'])
const meldung = ref('')

async function scan(art) {
  meldung.value = ''
  try {
    await starteScan(props.projekt.name, art)
    emit('aktualisiert')
  } catch (e) {
    meldung.value = e.message // 409: dirty tree, Rolle unkonfiguriert, …
  }
}

async function entfernen() {
  const ok = confirm(
    `„${props.projekt.name}" aus der Projektliste entfernen?\n.planer/ im Repo bleibt erhalten.`)
  if (!ok) return
  meldung.value = ''
  try {
    await projektEntfernen(props.projekt.name)
    emit('aktualisiert')
  } catch (e) {
    meldung.value = e.message
  }
}

function zeit(ts) {
  if (!ts) return 'nie gescannt'
  return new Date(ts).toLocaleString('de-DE', { dateStyle: 'short', timeStyle: 'short' })
}
</script>

<template>
  <div class="karte" :class="{ tot: projekt.fehler }">
    <div class="zeile">
      <a v-if="!projekt.fehler && projekt.hat_planer" href="#" class="name"
         @click.prevent="$emit('oeffne')">{{ projekt.name }}</a>
      <span v-else class="name">{{ projekt.name }}</span>
      <span v-if="projekt.scan_laeuft" class="badge gelb">läuft</span>
      <span v-else-if="projekt.fehler" class="badge rot">Fehler</span>
      <span v-else-if="!projekt.hat_planer" class="badge gelb">ungescannt</span>
      <span v-else-if="projekt.drift?.length" class="badge gelb">Drift: {{ projekt.drift.length }}</span>
      <span v-else class="badge gruen">aktuell</span>
    </div>
    <p class="detail" v-if="projekt.fehler">{{ projekt.fehler }}</p>
    <p class="detail" v-else>
      {{ projekt.pfad }} · letzter Scan: {{ zeit(projekt.letzter_scan_ts) }}
    </p>
    <p class="detail drift" v-if="projekt.drift?.length">veraltet: {{ projekt.drift.join(', ') }}</p>
    <div class="aktionen">
      <template v-if="!projekt.fehler">
        <button v-if="!projekt.hat_planer" class="primaer" :disabled="projekt.scan_laeuft"
                @click="scan('scan')">Scannen</button>
        <button v-else :disabled="projekt.scan_laeuft" @click="scan('rescan')">Re-Scan</button>
      </template>
      <button class="entfernen" :disabled="projekt.scan_laeuft" @click="entfernen"
              title=".planer/ im Repo bleibt erhalten">Entfernen</button>
    </div>
    <p v-if="meldung" class="meldung">{{ meldung }}</p>
  </div>
</template>

<style scoped>
.karte {
  background: var(--panel);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 1rem 1.2rem;
}
.karte.tot { opacity: 0.7; }
.zeile { display: flex; align-items: baseline; gap: 0.6rem; }
.name { font-weight: 600; color: var(--text); text-decoration: none; }
a.name:hover { color: var(--akzent); }
.detail { color: var(--dezent); font-size: 0.85rem; margin: 0.3rem 0 0; overflow-wrap: anywhere; }
.drift { color: var(--gelb); }
.aktionen { margin-top: 0.7rem; display: flex; gap: 0.5rem; }
.entfernen { margin-left: auto; color: var(--dezent); }
.entfernen:hover:not(:disabled) { color: var(--rot); border-color: var(--rot); }
.meldung { color: var(--rot); font-size: 0.85rem; margin: 0.5rem 0 0; }
</style>
