<template>
  <div>
    <div class="page-header">
      <h1>Network</h1>
    </div>
    <div class="hub-tabs">
      <button
        v-for="tab in tabs"
        :key="tab.key"
        class="hub-tab"
        :class="{ active: active === tab.key }"
        @click="setTab(tab.key)"
      >{{ tab.label }}</button>
    </div>
    <component :is="current" />
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import NetworkDevicesList from './NetworkDevicesList.vue'
import SubnetsBrowse from './SubnetsBrowse.vue'

const route = useRoute()
const router = useRouter()

// VLANs are a layer under a subnet (each Networks row shows its VLAN); VLAN
// naming lives in Settings, so the hub is just Devices + Networks.
const tabs = [
  { key: 'devices', label: 'Devices', comp: NetworkDevicesList },
  { key: 'networks', label: 'Networks', comp: SubnetsBrowse },
]

const active = ref(tabs.some(t => t.key === route.query.tab) ? route.query.tab : 'devices')
const current = computed(() => (tabs.find(t => t.key === active.value) || tabs[0]).comp)

function setTab(key) {
  active.value = key
  router.replace({ query: { ...route.query, tab: key } })
}

watch(() => route.query.tab, (value) => {
  if (value && value !== active.value && tabs.some(t => t.key === value)) {
    active.value = value
  }
})
</script>

<style scoped>
.hub-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}
.hub-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.6rem 1rem;
  cursor: pointer;
  color: var(--text-light);
  font-size: 0.95rem;
  font-weight: 500;
}
.hub-tab:hover { color: var(--text); }
.hub-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
</style>
