<template>
  <div class="director-info">
    <h3>{{ $t('falukant.branch.director.title') }}</h3>
    <div v-if="!director || director === null">
      <button @click="openNewDirectorDialog">{{ $t('falukant.branch.director.actions.new') }}</button>
    </div>
    <div v-else class="director-info-container">
      <div>
        <table>
          <tr>
            <td>{{ $t('falukant.branch.director.name') }}</td>
            <td>
              {{ $t('falukant.titles.' + director.character.gender + '.' + director.character.title) }}
              {{ director.character.name }}
            </td>
          </tr>
          <tr>
            <td>{{ $t('falukant.branch.director.salary') }}</td>
            <td>{{ director.income }}</td>
          </tr>
          <tr>
            <td>{{ $t('falukant.branch.director.satisfaction') }}</td>
            <td>{{ director.satisfaction }} %</td>
          </tr>
        </table>
      </div>
      <div>
        <table>
          <tr>
            <td><button @click="fireDirector">{{ $t('falukant.branch.director.fire') }}</button></td>
          </tr>
          <tr>
            <td><button @click="teachDirector">{{ $t('falukant.branch.director.teach') }}</button></td>
          </tr>
          <tr>
            <td>
              <label>
                <input type="checkbox" v-model="director.mayProduce"
                  @change="saveSetting('mayProduce', director.mayProduce)">
                {{ $t('falukant.branch.director.produce') }}
              </label>
            </td>
          </tr>
          <!-- Ähnliche Checkboxen für maySell und mayStartTransport -->
        </table>
      </div>
    </div>
  </div>
  <NewDirectorDialog ref="newDirectorDialog" />
</template>

<script>
import apiClient from '@/utils/axios.js';
import NewDirectorDialog from '@/dialogues/falukant/NewDirectorDialog.vue';

export default {
  name: "DirectorInfo",
  props: { branchId: { type: Number, required: true } },
  components: {
    NewDirectorDialog
  },
  data() {
    return {
      director: null,
      showNewDirectorDialog: false,
    };
  },
  async mounted() {
    await this.loadDirector();
  },
  methods: {
    async refresh() {
      await this.loadDirector();
    },

    async loadDirector() {
      try {
        const response = await apiClient.get(`/api/falukant/director/${this.branchId}`);
        const data = response.data;
        if (
          !data ||
          (Array.isArray(data) && data.length === 0) ||
          typeof data.director === 'undefined' ||
          data.director === null
        ) {
          this.director = null;
        } else {
          this.director = data.director;
        }
      } catch (error) {
        console.error('Error loading director:', error);
        this.director = null;
      }
    },

    async saveSetting(settingKey, value) {
      if (!this.director) return;
      try {
        await apiClient.post(`/api/falukant/director/settings`, {
          branchId: this.branchId,
          directorId: this.director.id,
          settingKey,
          value,
        });
      } catch (error) {
        console.error(`Error saving setting ${settingKey}:`, error);
      }
    },

    openNewDirectorDialog() {
      console.log('openNewDirectorDialog');
      this.$refs.newDirectorDialog.open(this.branchId);
    },

    fireDirector() {
      alert(this.$t('falukant.branch.director.fireAlert'));
    },

    teachDirector() {
      alert(this.$t('falukant.branch.director.teachAlert'));
    },
  },
};
</script>

<style scoped>
.director-info {
  border: 1px solid #ccc;
  margin: 10px 0;
  border-radius: 4px;
  padding: 10px;
}

.director-info-container {
  display: flex;
}

.director-info-container>div {
  width: 100%;
}
</style>