<template>
  <div class="worship-management">
    <h2>Gottesdienst Verwaltung</h2>
    <form @submit.prevent="saveWorship">
      <label for="eventPlaceId">Veranstaltungsort:</label>
      <multiselect v-model="selectedEventPlace" :options="eventPlaces" label="name" track-by="id"
        placeholder="Veranstaltungsort wählen"></multiselect>

      <label for="date">Datum:</label>
      <input type="date" id="date" v-model="worshipData.date" required @change="updateDayNameFromDate">

      <label for="dayName">Name des Tags:</label>
      <div class="liturgical-day-section">
        <multiselect 
          v-model="selectedDayName" 
          :options="dayNameOptions" 
          :multiple="false"
          :taggable="true"
          @tag="addDayNameTag"
          placeholder="Tag-Name wählen oder eingeben"
          label="name"
          track-by="name">
        </multiselect>
        <div class="liturgical-loader">
          <select v-model="selectedYear" class="year-select">
            <option v-for="year in availableYears" :key="year" :value="year">{{ year }}</option>
          </select>
          <button type="button" @click="loadLiturgicalYear" class="load-year-button" :disabled="isLoading">
            {{ isLoading ? 'Lade...' : 'Kirchenjahr laden' }}
          </button>
        </div>
      </div>

      <label for="time">Uhrzeit:</label>
      <input type="time" id="time" v-model="worshipData.time" required>

      <label for="title">Titel:</label>
      <input type="text" id="title" v-model="worshipData.title" required>

      <label for="organizer">Gestalter:</label>
      <multiselect 
        v-model="selectedOrganizers" 
        :options="organizerOptions" 
        :multiple="true"
        :taggable="true"
        @tag="addOrganizerTag"
        placeholder="Gestalter wählen oder neu eingeben"
        label="name"
        track-by="name">
      </multiselect>

      <label for="sacristanService">Küsterdienst:</label>
      <multiselect 
        v-model="selectedSacristans" 
        :options="sacristanOptions" 
        :multiple="true"
        :taggable="true"
        @tag="addSacristanTag"
        placeholder="Küsterdienst wählen oder neu eingeben"
        label="name"
        track-by="name">
      </multiselect>

      <label for="collection">Kollekte:</label>
      <input type="text" id="collection" v-model="worshipData.collection">

      <label for="address">Adresse:</label>
      <input type="text" id="address" v-model="worshipData.address">

      <label for="selfInformation">Selbstinformation:</label>
      <input type="checkbox" id="selfInformation" v-model="worshipData.selfInformation">

      <label for="highlightTime">Uhrzeit hervorheben:</label>
      <input type="checkbox" id="highlightTime" v-model="worshipData.highlightTime">

      <label for="neighborInvitation">Einladung zum Nachbarschaftsraum:</label>
      <input type="checkbox" id="neighborInvitation" v-model="worshipData.neighborInvitation">

      <label for="introLine">Einleitungszeile:</label>
      <input type="text" id="introLine" v-model="worshipData.introLine">

      <button type="submit">Speichern</button>
      <button type="button" @click="resetForm">Neuer Gottesdienst</button>
    </form>

    <div class="filter-section">
      <input 
        v-model="searchDate" 
        type="date" 
        class="search-input"
        placeholder="Nach Datum suchen..."
      />
      <label class="checkbox-label">
        <input 
          v-model="showPastWorships" 
          type="checkbox"
        />
        Vergangene Gottesdienste anzeigen
      </label>
      <button v-if="searchDate" @click="clearSearch" type="button" class="clear-button">
        Suche zurücksetzen
      </button>
    </div>

    <ul>
      <li v-for="worship in filteredWorships" :key="worship.id" :class="dateIsLowerCurrentDate(worship.date) ? 'old-items' : ''">
        <span>{{ worship.title }} - {{ formatDate(worship.date) }}, {{ formatTime(worship.time) }}</span>
        <button @click="editWorship(worship)">Bearbeiten</button>
        <button @click="deleteWorship(worship.id)">Löschen</button>
        <div class="tooltip">{{ getEventPlaceName(worship.eventPlaceId) }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import Multiselect from 'vue-multiselect';
import { formatTime, formatDate } from '../../utils/strings'; // Importieren der Methode

export default {
  name: 'WorshipManagement',
  components: { Multiselect },
  data() {
    const currentYear = new Date().getFullYear();
    return {
      worships: [],
      eventPlaces: [],
      organizerOptions: [],
      sacristanOptions: [],
      selectedOrganizers: [],
      selectedSacristans: [],
      dayNameOptions: [],
      liturgicalDays: [],
      selectedDayName: null,
      selectedYear: currentYear,
      availableYears: [currentYear, currentYear + 1, currentYear + 2],
      isLoading: false,
      isUpdatingFromDate: false,
      worshipData: {
        eventPlaceId: null,
        date: '',
        time: '',
        title: '',
        organizer: '',
        collection: '',
        address: '',
        selfInformation: false,
        highlightTime: false,
        neighborInvitation: false,
        introLine: '',
        sacristanService: '',
        website: '',
        dayName: '',
      },
      selectedEventPlace: null,
      editMode: false,
      editId: null,
      searchDate: '',
      showPastWorships: false,
    };
  },
  computed: {
    filteredWorships() {
      let filtered = this.worships;

      // Filter vergangene Gottesdienste aus
      if (!this.showPastWorships) {
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        
        filtered = filtered.filter(worship => {
          if (worship.date) {
            const worshipDate = new Date(worship.date);
            worshipDate.setHours(0, 0, 0, 0);
            return worshipDate >= today;
          }
          return true;
        });
      }

      // Datumsfilter anwenden
      if (this.searchDate) {
        const searchDateObj = new Date(this.searchDate);
        searchDateObj.setHours(0, 0, 0, 0);
        
        filtered = filtered.filter(worship => {
          if (worship.date) {
            const worshipDate = new Date(worship.date);
            worshipDate.setHours(0, 0, 0, 0);
            return worshipDate.getTime() === searchDateObj.getTime();
          }
          return false;
        });
      }

      return filtered;
    }
  },
  watch: {
    selectedDayName(newValue, oldValue) {
      // Nur wenn sich der Wert wirklich ändert und nicht beim initialen Laden
      if (newValue && newValue !== oldValue && !this.isUpdatingFromDate) {
        this.updateDateFromDayName();
      }
    }
  },
  async created() {
    await this.fetchEventPlaces();
    await this.fetchWorships();
    await this.fetchWorshipOptions();
    await this.fetchLiturgicalDays();
  },
  methods: {
    formatTime,
    formatDate,
    async fetchWorships() {
      try {
        const response = await axios.get('/worships');
        this.worships = response.data;
      } catch (error) {
        console.error('Fehler beim Abrufen der Gottesdienste:', error);
      }
    },
    async fetchEventPlaces() {
      try {
        const response = await axios.get('/event-places');
        this.eventPlaces = response.data;
      } catch (error) {
        console.error('Fehler beim Abrufen der Veranstaltungsorte:', error);
      }
    },
    async fetchWorshipOptions() {
      try {
        const response = await axios.get('/worships/options');
        this.organizerOptions = response.data.organizers.map(org => ({ name: org }));
        this.sacristanOptions = response.data.sacristanServices.map(sac => ({ name: sac }));
      } catch (error) {
        console.error('Fehler beim Abrufen der Worship-Optionen:', error);
      }
    },
    async fetchLiturgicalDays() {
      try {
        const response = await axios.get('/liturgical-days');
        this.liturgicalDays = response.data;
        
        // Erstelle Optionen für Multiselect
        const uniqueNames = [...new Set(response.data.map(day => day.dayName))];
        this.dayNameOptions = uniqueNames.sort().map(name => ({ name }));
      } catch (error) {
        console.error('Fehler beim Abrufen der liturgischen Tage:', error);
      }
    },
    async loadLiturgicalYear() {
      if (!this.selectedYear) {
        alert('Bitte wählen Sie ein Jahr aus');
        return;
      }
      
      this.isLoading = true;
      try {
        const response = await axios.post('/liturgical-days/load-year', {
          year: this.selectedYear
        });
        alert(response.data.message);
        await this.fetchLiturgicalDays();
      } catch (error) {
        console.error('Fehler beim Laden des Kirchenjahres:', error);
        if (error.response && error.response.data && error.response.data.message) {
          alert('Fehler: ' + error.response.data.message);
        } else {
          alert('Fehler beim Laden des Kirchenjahres');
        }
      } finally {
        this.isLoading = false;
      }
    },
    updateDayNameFromDate() {
      if (!this.worshipData.date) {
        return;
      }
      
      // Setze Flag, um Endlosschleife zu vermeiden
      this.isUpdatingFromDate = true;
      
      // Normalisiere das Datum (HTML input gibt YYYY-MM-DD zurück)
      const selectedDate = this.worshipData.date;
      
      // Finde liturgischen Tag für das gewählte Datum
      const liturgicalDay = this.liturgicalDays.find(day => {
        // Vergleiche nur das Datum (ignoriere mögliche Zeitstempel)
        const dayDate = typeof day.date === 'string' ? day.date : day.date.split('T')[0];
        return dayDate === selectedDate;
      });
      
      if (liturgicalDay) {
        this.selectedDayName = { name: liturgicalDay.dayName };
        this.worshipData.dayName = liturgicalDay.dayName;
        console.log('Liturgischer Tag gefunden:', liturgicalDay.dayName);
      } else {
        console.log('Kein liturgischer Tag gefunden für:', selectedDate);
      }
      
      // Reset Flag nach kurzer Verzögerung
      this.$nextTick(() => {
        this.isUpdatingFromDate = false;
      });
    },
    updateDateFromDayName() {
      if (!this.selectedDayName || !this.selectedDayName.name) {
        return;
      }
      
      // Finde liturgischen Tag mit diesem Namen
      // Wenn es mehrere gibt (z.B. mehrere Sonntage), nimm den nächsten in der Zukunft
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      
      const matchingDays = this.liturgicalDays.filter(day => 
        day.dayName === this.selectedDayName.name
      );
      
      if (matchingDays.length > 0) {
        // Sortiere nach Datum
        matchingDays.sort((a, b) => new Date(a.date) - new Date(b.date));
        
        // Finde den nächsten Tag in der Zukunft oder heute
        let selectedDay = matchingDays.find(day => {
          const dayDate = new Date(day.date);
          dayDate.setHours(0, 0, 0, 0);
          return dayDate >= today;
        });
        
        // Wenn keiner in der Zukunft, nimm den letzten vergangenen
        if (!selectedDay) {
          selectedDay = matchingDays[matchingDays.length - 1];
        }
        
        // Setze das Datum
        const dayDate = typeof selectedDay.date === 'string' 
          ? selectedDay.date 
          : selectedDay.date.split('T')[0];
        
        this.worshipData.date = dayDate;
        this.worshipData.dayName = selectedDay.dayName;
        console.log('Datum gesetzt auf:', dayDate, 'für', selectedDay.dayName);
      } else {
        console.log('Kein Datum gefunden für Tag:', this.selectedDayName.name);
      }
    },
    async saveWorship() {
      try {
        const payload = {
          ...this.worshipData,
          eventPlaceId: this.selectedEventPlace ? this.selectedEventPlace.id : null,
          organizer: this.selectedOrganizers.map(org => org.name).join(', '),
          sacristanService: this.selectedSacristans.map(sac => sac.name).join(', '),
          dayName: this.selectedDayName ? this.selectedDayName.name : ''
        };

        if (this.editMode) {
          await axios.put(`/worships/${this.editId}`, payload);
        } else {
          await axios.post('/worships', payload);
        }

        this.resetForm();
        await this.fetchWorships();
        await this.fetchWorshipOptions();
      } catch (error) {
        console.error('Fehler beim Speichern des Gottesdienstes:', error);
      }
    },
    editWorship(worship) {
      this.worshipData = { ...worship };
      this.worshipData.date = formatDate(worship.date).split(".").reverse().join("-");
      this.worshipData.time = formatTime(worship.time);
      console.log(this.worshipData);
      this.selectedEventPlace = this.eventPlaces.find(ep => ep.id === worship.eventPlaceId);
      
      // Konvertiere kommaseparierte Strings zu Arrays für Multiselect
      this.selectedOrganizers = worship.organizer 
        ? worship.organizer.split(',').map(org => ({ name: org.trim() }))
        : [];
      this.selectedSacristans = worship.sacristanService 
        ? worship.sacristanService.split(',').map(sac => ({ name: sac.trim() }))
        : [];
      
      // Setze dayName
      this.selectedDayName = worship.dayName ? { name: worship.dayName } : null;
      
      this.editMode = true;
      this.editId = worship.id;
    },
    async deleteWorship(id) {
      try {
        await axios.delete(`/worships/${id}`);
        await this.fetchWorships();
      } catch (error) {
        console.error('Fehler beim Löschen des Gottesdienstes:', error);
      }
    },
    resetForm() {
      this.worshipData = {
        eventPlaceId: null,
        date: '',
        time: '',
        title: '',
        organizer: '',
        collection: '',
        address: '',
        selfInformation: false,
        highlightTime: false,
        neighborInvitation: false,
        introLine: '',
        dayName: ''
      };
      this.selectedEventPlace = null;
      this.selectedOrganizers = [];
      this.selectedSacristans = [];
      this.selectedDayName = null;
      this.editMode = false;
      this.editId = null;
    },
    getEventPlaceName(eventPlaceId) {
      const place = this.eventPlaces.find(place => place.id === eventPlaceId);
      return place ? place.name : 'Unbekannter Ort';
    },
    dateIsLowerCurrentDate(date) {
      const currentDate = new Date();
      const inputDate = new Date(date);
      return inputDate < currentDate;
    },
    clearSearch() {
      this.searchDate = '';
    },
    addOrganizerTag(newTag) {
      const tag = { name: newTag };
      this.organizerOptions.push(tag);
      this.selectedOrganizers.push(tag);
    },
    addSacristanTag(newTag) {
      const tag = { name: newTag };
      this.sacristanOptions.push(tag);
      this.selectedSacristans.push(tag);
    },
    addDayNameTag(newTag) {
      const tag = { name: newTag };
      this.dayNameOptions.push(tag);
      this.selectedDayName = tag;
    }
  }
};
</script>

<style scoped>
@import 'vue-multiselect/dist/vue-multiselect.css';

.worship-management {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

form {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 15px 20px;
  align-items: start;
}

form > label {
  margin: 0;
  padding-top: 8px;
  text-align: right;
  font-weight: 500;
}

form > input[type="text"],
form > input[type="date"],
form > input[type="time"],
form > .multiselect,
form > .liturgical-day-section {
  width: 100%;
  max-width: 500px;
}

form > input[type="checkbox"] {
  justify-self: start;
  margin-top: 8px;
}

form > button {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 10px;
}

.filter-section {
  margin: 30px 0 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 8px;
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid #ddd;
}

.search-input {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
}

.search-input:focus {
  outline: none;
  border-color: #4CAF50;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.checkbox-label input[type="checkbox"] {
  cursor: pointer;
}

.clear-button {
  padding: 8px 16px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 0;
}

.clear-button:hover {
  background-color: #d32f2f;
}

.liturgical-day-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 500px;
}

.liturgical-loader {
  display: flex;
  gap: 10px;
  align-items: center;
}

.year-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
  cursor: pointer;
}

.year-select:focus {
  outline: none;
  border-color: #4CAF50;
}

.load-year-button {
  padding: 8px 16px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
}

.load-year-button:hover:not(:disabled) {
  background-color: #1976D2;
}

.load-year-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

ul {
  margin-top: 20px;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid rgba(224, 224, 224, 0.9);
  position: relative;
}

button {
  margin-left: 10px;
}

.tooltip {
  visibility: hidden;
  width: auto;
  background-color: rgba(224, 224, 224, 0.6);
  color: #000;
  text-align: center;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 75%;
  left: 50%;
  margin-left: -100px;
  padding: 5px;
  border: 1px solid #000;
  opacity: 0;
  transition: opacity 0.2s;
}

li:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

li > span {
  flex: 1;
}

.old-items {
  color: #aaa;
}
</style>
