<template>
  <div class="settings-view">
    <!-- Literally the chat header: same global .chat-header bar -->
    <div class="chat-header">
      <GnIconButton
        icon="ph ph-sidebar"
        label="Menu"
        class="btn-sidebar-toggle"
        @click="emit('toggle-sidebar')"
      />
      <div class="chat-header-info">
        <span class="chat-header-title">Settings</span>
      </div>
    </div>

    <GnTabs ref="tabsRoot" v-model="activeTab" :items="tabs" class="settings-tabs" ariaLabel="Settings sections">
      <template #account>
        <ApiKeysPanel v-if="activeTab === 'account'" />
      </template>
      <template #notifications>
        <NotificationSettingsPanel v-if="activeTab === 'notifications'" />
      </template>
      <template #synapse>
        <SynapseReactionsPanel v-if="activeTab === 'synapse'" />
        <SynapseTargetsPanel v-if="activeTab === 'synapse'" />
      </template>
      <template #mcp>
        <McpKeysPanel v-if="activeTab === 'mcp'" />
        <!-- Same tab, admins only: the reload rewrites the toolset of the
             whole server, not just this user's MCP keys. -->
        <AdminToolsPanel v-if="activeTab === 'mcp' && authStore.isAdmin" />
      </template>
    </GnTabs>
  </div>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'
import { GnIconButton, GnTabs } from 'gnexus-ui-kit/vue'
import { useAuthStore } from '@/stores/auth.js'
import ApiKeysPanel from './ApiKeysPanel.vue'
import NotificationSettingsPanel from './NotificationSettingsPanel.vue'
import SynapseReactionsPanel from './SynapseReactionsPanel.vue'
import SynapseTargetsPanel from './SynapseTargetsPanel.vue'
import McpKeysPanel from './McpKeysPanel.vue'
import AdminToolsPanel from './AdminToolsPanel.vue'

const emit = defineEmits(['toggle-sidebar'])

const authStore = useAuthStore()

const tabs = [
  { id: 'account', label: 'Account', icon: 'ph ph-user-circle' },
  { id: 'notifications', label: 'Notifications', icon: 'ph ph-bell' },
  { id: 'synapse', label: 'Synapse', icon: 'ph ph-network' },
  { id: 'mcp', label: 'MCP', icon: 'ph ph-plugs-connected' },
]

const activeTab = ref('account')

// On narrow screens the kit tab strip scrolls horizontally, but nothing
// reveals the active button after a switch — pull it into view.
const tabsRoot = ref(null)
watch(activeTab, () => {
  nextTick(() => {
    const list = tabsRoot.value?.$el
    const active = list?.querySelector?.('[role="tab"][aria-selected="true"]')
    active?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
  })
})
</script>

<style scoped lang="scss">
@use 'kit-deps' as *;

$bp-mobile: 767px;

// Matches .chat-area: fills .app-main, no scroll of its own — the single
// scroll region lives inside the active tab panel below.
.settings-view {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

// Tab strip is fixed; the scroll region is the active panel below.
// Kit's .tabs is a wrapping row flex — straighten it into a column so the
// panels can claim the leftover height. nowrap + stretch: without them the
// column wrap pushes the panels block (and with it the tab strip, via the
// kit's centering) off-screen to the right on narrow phones.
.settings-tabs {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  max-width: 1200px;
  flex: 1 1 0;
  min-height: 0;
  padding: $space-sm $space-md 0;
  margin-bottom: 0;

  :deep(.tabs-list) {
    width: 100%;
    max-width: none;
  }

  // The single scroll region: full-bleed, scrollbar against the app-main edge
  :deep(.tabs-panels) {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: $space-md $space-md $space-xl;

    @media (max-width: $bp-mobile) {
      padding: $space-sm $space-sm $space-lg;
    }
  }
}

@media (max-width: $bp-mobile) {
  .settings-tabs {
    padding-left: $space-sm;
    padding-right: $space-sm;
  }
}
</style>