<template>
  <div class="tab-container">
    <!-- Tab Headers -->
    <div class="tab-headers">
      <button
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['tab-header', { active: activeTab === index }]"
          @click="setActiveTab(index)"
      >
        {{ tab.title }}
      </button>
    </div>

    <!-- Tab Content with CSS Animations -->
    <div class="tab-content">
      <div
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['tab-pane', {
            active: activeTab === index,
            'slide-in': activeTab === index && hasChanged,
            'slide-out': activeTab !== index && hasChanged
          }]"
          v-show="activeTab === index"
      >
        <!-- Render component if provided -->
        <component
            v-if="tab.component"
            :is="tab.component"
            v-bind="tab.props || {}"
        />
        <!-- Render slot content if provided -->
        <div v-else-if="tab.slot">
          <slot :name="tab.slot"></slot>
        </div>
        <!-- Render HTML content if provided -->
        <div v-else-if="tab.content" v-html="tab.content"></div>
        <!-- Fallback text content -->
        <div v-else>{{ tab.text || 'No content provided' }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabContainer',
  props: {
    tabs: {
      type: Array,
      required: true,
      validator(tabs) {
        return tabs.every(tab => tab.title && typeof tab.title === 'string');
      }
    },
    defaultTab: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeTab: this.defaultTab,
      hasChanged: false
    };
  },
  methods: {
    setActiveTab(index) {

      if (index >= 0 && index < this.tabs.length) {

        this.hasChanged = true;
        this.activeTab = index;
        this.$emit('tab-changed', {
          index,
          tab: this.tabs[index]
        });

        // Reset animation flag
        setTimeout(() => {
          this.hasChanged = false;
        }, 400);
      }
    }
  },
  mounted() {
    // Emit initial tab
    this.$emit('tab-changed', {
      index: this.activeTab,
      tab: this.tabs[this.activeTab]
    });
  }
};
</script>

<style scoped>
.tab-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tab-headers {
  display: flex;
  border-bottom: 1px solid rgba(107, 134, 156, 0.2);
  background-color: transparent;
  position: relative;
  flex-shrink: 0; /* Don't let headers shrink */
}

.tab-header {
  padding: 12px 20px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 500;
  font-family: inherit;
  color: #6b7280;
  border-bottom: 3px solid transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
}

.tab-header:hover {
  background-color: rgba(107, 134, 156, 0.05);
  color: #6b7280;
}

.tab-header.active {
  color: #002F54;
  border-bottom-color: #5AF0B4;
  background-color: white;
}

.tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.tab-pane {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.tab-pane.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.tab-pane.slide-in {
  animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.tab-pane.slide-out {
  animation: slideOutUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Keyframe Animations */
@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutUp {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(30px);
  }
}
</style>