<template>
  <div class="profile-page">
    <h1>{{ $t('profile.title') }}</h1>

    <!-- Onglets -->
    <div role="tablist" aria-label="Profil utilisateur" class="tabs">
      <button
        :class="['tab', activeTab === 'general' ? 'active' : '']"
        role="tab"
        :aria-selected="activeTab === 'general'"
        aria-controls="tab-general"
        id="tab-button-general"
        @click="activeTab = 'general'; authStore.user.sudo_token = null"
      >
        {{ $t('profile.tabGeneral') }}
      </button>

      <button
        :class="['tab', activeTab === 'redzone' ? 'active' : '']"
        class='redzone'
        role="tab"
        :aria-selected="activeTab === 'redzone'"
        aria-controls="tab-redzone"
        id="tab-button-redzone"
        @click="activeTab = 'redzone'; authStore.user.sudo_token = null"
      >
        {{ $t('profile.tabRedZone')}}
      </button>
    </div>

    <!-- Contenu des onglets -->
    <div class="tab-panels">
      <!-- Onglet Général -->
      <section
        v-show="activeTab === 'general'"
        role="tabpanel"
        aria-labelledby="tab-button-general"
        id="tab-general"
      >
        <ProfileGeneral />
      </section>

      <!-- Onglet RED ZONE -->
      <section
        v-show="activeTab === 'redzone'"
        role="tabpanel"
        aria-labelledby="tab-button-redzone"
        id="tab-redzone"
      >
        <ProfileRedZone />
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
const authStore = useAuthStore()
// Onglet actif (TypeScript infère automatiquement le type string)
const activeTab = ref('general')

</script>

<style scoped lang="scss">
/* Onglets */
.tabs {
  display: flex;
  gap: 1rem;

  margin-bottom: 1.5rem;
}

.tab {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
}
// 
.tab:hover {
  background-color: #f5f5f5;
}

.tab.active {
  border-bottom-color: blueviolet;
  color: blueviolet; 
}
button.redzone{
  color:red;
  &.active{
    border-bottom-color: red;
    color:red;
  
  }
}
  
/* Contenu onglet */
.tab-panels section {
  animation: fadeIn 0.3s ease;
}

/* Animation simple */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>
