<template>
  <div class="wc">
    <div class="wc-header">
      <h2>{{ $t('nav.customers') }}</h2>
      <el-button-group class="wc-tabs">
        <el-button
          v-for="tab in tabs" :key="tab.key"
          :type="activeTab === tab.key ? 'primary' : 'default'"
          size="small"
          @click="activeTab = tab.key"
        >
          <el-icon :size="14"><component :is="tab.icon" /></el-icon>
          {{ tab.label }}
        </el-button>
      </el-button-group>
    </div>

    <!-- Tab: Customer List -->
    <div v-show="activeTab === 'list'" class="wc-panel">
      <Customers ref="customersRef" />
    </div>

    <!-- Tab: Discovery -->
    <div v-show="activeTab === 'discovery'" class="wc-panel">
      <Discovery ref="discoveryRef" />
    </div>

    <!-- Tab: Followups -->
    <div v-show="activeTab === 'followup'" class="wc-panel">
      <Followup ref="followupRef" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import Customers from '@/views/Customers.vue'
import Discovery from '@/views/Discovery.vue'
import Followup from '@/views/Followup.vue'

const { t } = useI18n()
const activeTab = ref('list')

const tabs = [
  { key: 'list', label: t('nav.customerList'), icon: 'User' },
  { key: 'discovery', label: t('nav.discovery'), icon: 'Search' },
  { key: 'followup', label: t('nav.followup'), icon: 'AlarmClock' },
]
</script>

<style scoped>
.wc { height: 100%; display: flex; flex-direction: column; }
.wc-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; flex-shrink: 0; flex-wrap: wrap;
}
.wc-header h2 { margin: 0; font-size: 18px; font-weight: 600; color: #303133; white-space: nowrap; }
.wc-panel { flex: 1; min-height: 0; }

/* Tabs: scrollable on narrow screens, wrap on tablets */
.wc-tabs { flex-wrap: wrap; }

@media (max-width: 768px) {
  .wc-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .wc-header h2 { font-size: 16px; }
  .wc-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 4px; }
  .wc-tabs::-webkit-scrollbar { display: none; }
  .wc-tabs .el-button { flex-shrink: 0; }
  .wc-panel { margin: 0 -12px; /* span full bleed on mobile */ }
}
</style>
