<template>
  <div>
    <div class="row justify-content-center">
      <div class="col-12 col-lg-9 col-md-11 col-sm-12 col-xl-8">
        <!-- Header Section -->
        <div class="row">
          <div class="col-12">
            <h1 class="h3 fw-bold text-center pt-3">
              {{ t('Account') }}
            </h1>
          </div>
        </div>

        <!-- Account Details -->
        <div class="border-bottom row flex-column flex-sm-row mx-0 pt-4">
          <div class="col-6">
            <p class="fw-bold text-start">
              {{ t('First Name') }}
            </p>
          </div>
          <div class="col-6">
            <p class="fw-bold text-sm-end text-muted">
              {{ user.first_name }}
            </p>
          </div>
        </div>

        <div class="border-bottom row flex-column flex-sm-row mx-0 pt-4">
          <div class="col-6">
            <p class="fw-bold text-start">
              {{ t('Last Name') }}
            </p>
          </div>
          <div class="col-6">
            <p class="fw-bold text-sm-end text-muted">
              {{ user.surname }}
            </p>
          </div>
        </div>

        <div class="border-bottom row flex-column flex-sm-row mx-0 pt-4">
          <div class="col-6">
            <p class="fw-bold text-start">
              {{ t('Language') }}
            </p>
          </div>
          <div class="col-6">
            <p class="fw-bold text-sm-end text-muted">
              {{ user.language == 'de' ? 'German' : 'English' }}
            </p>
          </div>
        </div>

        <div class="border-bottom row flex-column flex-sm-row mx-0 pt-4">
          <div class="col-6">
            <p class="fw-bold text-start">
              {{ t('Email') }}
            </p>
          </div>
          <div class="col-6">
            <p class="fw-bold text-sm-end text-muted">
              {{ user.email }}
            </p>
          </div>
        </div>

        <div class="border-bottom row flex-column flex-sm-row mx-0 pt-4">
          <div class="col-6">
            <p class="fw-bold text-start">
              {{ t('Password') }}
            </p>
          </div>
          <div class="col-6">
            <p class="fw-bold text-sm-end text-muted">•••••••••</p>
          </div>
        </div>

        <!-- Conditional Manager Details -->
        <div v-if="user.inviter" class="border-bottom row flex-column flex-sm-row mx-0 pt-4">
          <div class="col-6">
            <p class="fw-bold text-start">
              {{ t('Manager Name') }}
            </p>
          </div>
          <div class="col-6">
            <p class="fw-bold text-sm-end text-muted">
              {{ user.inviter.first_name ?? '' }} {{ user.inviter.surname ?? '' }}
            </p>
          </div>
        </div>

        <div v-if="user.inviter" class="border-bottom row flex-column flex-sm-row mx-0 pt-4">
          <div class="col-6">
            <p class="fw-bold text-start">
              {{ t('Manager Email') }}
            </p>
          </div>
          <div class="col-6">
            <p class="fw-bold text-sm-end text-muted">
              {{ user.inviter.email ?? '' }}
            </p>
          </div>
        </div>

        <div v-if="user.inviter" class="row flex-column flex-sm-row pt-4">
          <div class="col-6">
            <p class="fw-bold text-start">
              {{ t('Current Package') }}
            </p>
          </div>
          <div class="col-6">
            <p class="fw-bold text-sm-end text-muted">
              {{ showManagerPlan() }}
            </p>
          </div>
        </div>

        <!-- Logout Button -->
        <div class="account-buttons d-flex justify-content-center pt-5">
          <nuxt-link
            :to="localePath('/settings/editaccount')"
            class="btn btn-primary-custom text-decoration-none"
          >
            {{ t('Edit_') }}
          </nuxt-link>
          <button class="btn fw-bold btn-outline-dark" @click="logoutNow">
            {{ t("Log Out") }}
          </button>
        </div>
      </div>
    </div>
    <div class="row">
      <button type="button" class="btn btn-link position-absolute bottom-0 start-50 translate-middle-x mb-3" @click="showModal = true">
        {{ t("Delete Account") }}
      </button>
    </div>
    <div
      class="modal fade"
      tabindex="-1"
      :class="{ show: showModal }"
      :style="showModal ? 'display: block;' : 'display: none;'"
      aria-modal="true"
      role="dialog"
      @click.self="closeModal"
    >
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">{{ t("Delete Account") }}</h5>
            <button type="button" class="btn-close" @click="closeModal" />
          </div>
          <div class="modal-body">
            <p>{{ t('Delete Account Text') }}</p>
          </div>
          <div class="modal-footer">
            <button class="btn btn-dark-custom" @click="closeModal">{{ t('Cancel') }}</button>
            <button class="btn btn-primary-custom" @click="deleteAccount">{{ t('Delete Account') }}</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Hintergrund-Overlay -->
    <div v-if="showModal" class="modal-backdrop fade show" />
  </div>
</template>
<script>

import { mapActions, mapState } from 'pinia'
import { useI18n } from 'vue-i18n'
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

export default {
  name: 'Account',
  setup () {
    const { t } = useI18n()
    const localePath = useLocalePath()
    const userStore = useUserStore()
    const user = useUserStore().user
    const router = useRouter()

    return { t, localePath, router, user, userStore }
  },
  data () {
    return {
      showModal: false,
      loading: false
    }
  },
  methods: {
    async logoutNow () {
      await this.userStore.logout()
      try {
        await this.$axios.post('/api/logout')
      } catch (error) {
        // Handle the error if needed
      }
      this.$router.push(this.localePath('/auth/login'))
    },
    closeModal () {
      this.showModal = false
    },
    async deleteAccount () {
      this.loading = true
      try {
        await this.$axios.post('/api/account/delete')
        await this.userStore.logout()
        this.$router.push(this.localePath('/auth/login'))
        this.$toast.success('Account gelöscht. Du wurdest ausgeloggt.')
      } catch (error) {
        this.$toast.error('Fehler beim Löschen: ' + (error.response?.data?.message || 'Unbekannter Fehler'))
      } finally {
        this.loading = false
        this.closeModal()
      }
    },
    showManagerPlan () {
      if (user.value.inviter.current_subscription_plan === 1) {
        return 'Basic'
      } else if (user.value.inviter.current_subscription_plan === 2) {
        return 'Team'
      } else if (user.value.inviter.current_subscription_plan === 3) {
        return 'Enterprise'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-primary-custom {
    background-color: #e9c046;
    border-color: #e9c046;
    color: white;
    font-weight: 700;
}

.btn-primary-custom:hover, .btn-primary-custom:focus{
    background-color: transparent;
    border-color: #e9c046;
    color: #e9c046;
}

.account-buttons {
  gap: 1.5em;
}

@media only screen and (max-width: 576px) {
  .account-buttons {
    flex-direction: column;
    gap: 0.75em;
  }
}

.modal {
  z-index: 1050;
}
.modal-backdrop {
  z-index: 1040;
}
.btn-link {
  color: black;
  transition: 250ms ease-in-out;

  &:hover, &:focus {
    color: #e9c046;
  }
}
</style>
