<template>
  <div class="worship-leader-admin">
    <h1>Gestalter (Kürzel)</h1>

    <h2>{{ formTitle }}</h2>
    <form @submit.prevent="saveLeader">
      <label for="code">Kürzel (z.B. "Eif"):</label>
      <input id="code" v-model="currentLeader.code" required />

      <label for="name">Name (wird als Gestalter gespeichert):</label>
      <input id="name" v-model="currentLeader.name" required />

      <label for="aliases">Aliase (kommagetrennt):</label>
      <input id="aliases" v-model="currentLeader.aliases" />

      <div class="row">
        <label for="active">Aktiv:</label>
        <input id="active" v-model="currentLeader.active" type="checkbox" />
      </div>

      <button type="submit">{{ isCreating ? 'Erstellen' : 'Aktualisieren' }}</button>
      <button v-if="!isCreating" type="button" @click="resetForm">Abbrechen</button>
    </form>

    <div class="list">
      <h2>Vorhandene Kürzel</h2>
      <div class="tools">
        <label><input type="checkbox" v-model="includeInactive" @change="fetchLeaders" /> Inaktive anzeigen</label>
      </div>
      <ul v-if="leaders.length">
        <li v-for="leader in leaders" :key="leader.id" class="item">
          <button type="button" class="link" @click="editLeader(leader)">
            <strong>{{ leader.code }}</strong> – {{ leader.name }}
            <span v-if="leader.aliases"> ({{ leader.aliases }})</span>
            <span v-if="!leader.active"> [inaktiv]</span>
          </button>
          <button type="button" class="danger" @click="deleteLeader(leader)">Löschen</button>
        </li>
      </ul>
      <p v-else>Keine Einträge.</p>
    </div>
  </div>
</template>

<script>
import axios from '@/axios';

export default {
  name: 'WorshipLeaderAdministration',
  data() {
    return {
      leaders: [],
      includeInactive: false,
      currentLeader: {
        code: '',
        name: '',
        aliases: '',
        active: true,
      },
      isCreating: true,
    };
  },
  computed: {
    formTitle() {
      return this.isCreating ? 'Kürzel anlegen' : 'Kürzel bearbeiten';
    },
  },
  methods: {
    async fetchLeaders() {
      try {
        const response = await axios.get('/worship-leaders', {
          params: { includeInactive: this.includeInactive ? 1 : 0 },
        });
        this.leaders = response.data || [];
      } catch (error) {
        console.error('Fehler beim Abrufen der Kürzel:', error);
      }
    },
    async saveLeader() {
      try {
        if (this.isCreating) {
          await axios.post('/worship-leaders', this.currentLeader);
        } else {
          await axios.put(`/worship-leaders/${this.currentLeader.id}`, this.currentLeader);
        }
        this.resetForm();
        await this.fetchLeaders();
      } catch (error) {
        const msg = error.response?.data?.message || error.message;
        alert(`Fehler: ${msg}`);
      }
    },
    editLeader(leader) {
      this.currentLeader = { ...leader };
      this.isCreating = false;
    },
    async deleteLeader(leader) {
      if (!confirm(`Kürzel "${leader.code}" wirklich löschen?`)) return;
      try {
        await axios.delete(`/worship-leaders/${leader.id}`);
        await this.fetchLeaders();
      } catch (error) {
        console.error('Fehler beim Löschen:', error);
      }
    },
    resetForm() {
      this.currentLeader = { code: '', name: '', aliases: '', active: true };
      this.isCreating = true;
    },
  },
  mounted() {
    this.fetchLeaders();
  },
};
</script>

<style scoped>
.worship-leader-admin { padding: 20px; }
form { display: grid; gap: 8px; max-width: 520px; }
.row { display: flex; align-items: center; gap: 10px; }
.list { margin-top: 18px; }
.tools { margin: 8px 0; }
.item { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.link { background: none; border: none; padding: 0; color: #1a73e8; cursor: pointer; text-align: left; }
.danger { background: #c62828; color: #fff; border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; }
</style>
