<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 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'" />
      </template>
    </GnTabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { GnIconButton, GnTabs } from 'gnexus-ui-kit/vue'
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'

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

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-diagram-project' },
  { id: 'mcp', label: 'MCP', icon: 'ph ph-plugs-connected' },
]

const activeTab = ref('account')
</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.
.settings-tabs {
  flex-direction: column;
  width: 100%;
  max-width: none;
  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>