<template>
  <v-container fluid class="pt-2 pb-6 fc-subs-shell">
    <v-tabs
      v-model="tab"
      align-tabs="start"
      color="accent"
      density="compact"
      class="fc-subs-tabs"
    >
      <v-tab value="subscriptions">
        <v-icon start>mdi-account-multiple-check</v-icon>
        Subscriptions
      </v-tab>
      <v-tab value="downloads">
        <v-icon start>mdi-cloud-download</v-icon>
        Downloads
      </v-tab>
      <v-tab value="settings">
        <v-icon start>mdi-cog</v-icon>
        Settings
      </v-tab>
    </v-tabs>

    <v-window v-model="tab" class="mt-4 fc-subs-window">
      <v-window-item value="subscriptions">
        <SubscriptionsTab />
      </v-window-item>
      <v-window-item value="downloads">
        <DownloadsTab />
      </v-window-item>
      <v-window-item value="settings">
        <SettingsTab />
      </v-window-item>
    </v-window>
  </v-container>
</template>

<script setup>
import SubscriptionsTab from '../components/subscriptions/SubscriptionsTab.vue'
import DownloadsTab from '../components/subscriptions/DownloadsTab.vue'
import SettingsTab from '../components/subscriptions/SettingsTab.vue'
import { useTabQuery } from '../composables/useTabQuery.js'

const VALID_TABS = ['subscriptions', 'downloads', 'settings']

const { tab } = useTabQuery(VALID_TABS, 'subscriptions')
</script>

<style scoped>
/* Cap the dashboards at a centered 1600px so rows aren't a mile wide on
   wide/ultrawide monitors (operator-flagged 2026-05-28). */
.fc-subs-shell {
  max-width: 1600px;
  margin-inline: auto;
  /* Fixed-height hub: the tabs (and each tab's sticky control bar) stay
     put while ONLY the tab content scrolls — previously the whole view
     scrolled instead of just the subscription list (operator-flagged
     2026-05-28). 64px = the TopNav height (AppShell .fc-content pad-top). */
  height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fc-subs-tabs {
  flex: 0 0 auto;
  border-bottom: 1px solid rgb(var(--v-theme-on-surface-variant) / 0.18);
}
.fc-subs-window {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
</style>
