<template>
  <div class="settings-view">
    <GnPageHeader title="Settings" compact class="settings-header">
      <template #actions>
        <GnIconButton
          icon="ph ph-list"
          label="Toggle sidebar"
          class="settings-sidebar-toggle"
          @click="emit('toggle-sidebar')"
        />
      </template>
    </GnPageHeader>
    <div class="settings-body">
      <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>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { GnIconButton, GnPageHeader, 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">
.settings-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.settings-header {
  flex-shrink: 0;
  width: 100%;
  max-width: 1200px;
  margin: 12px auto 0;
}

.settings-sidebar-toggle {
  display: none;
  @media (max-width: 1279.98px) {
    display: flex;
  }
}

.settings-body {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.settings-tabs {
  max-width: 100%;
}

.settings-tabs :deep(.tabs-panels) {
  margin-top: 12px;
}

// Keep each section's scroll area tall enough for the sticky page header.
.settings-tabs :deep(.tab-panel) {
  min-height: 0;
  padding: 0;
}
</style>