<script setup lang="ts">
import { useUiStore } from '../../stores/ui'
import Sidebar from './Sidebar.vue'
import ChatArea from '../chat/ChatArea.vue'
import ConfigPanel from '../config/ConfigPanel.vue'
import DocumentTracking from '../tracking/DocumentTracking.vue'
import NotificationCenter from '../notifications/NotificationCenter.vue'

const ui = useUiStore()
</script>

<template>
  <div class="flex h-full">
    <Sidebar />
    <main class="flex-1 flex flex-col overflow-hidden">
      <!-- Top bar -->
      <header class="h-12 border-b border-dark-700 flex items-center justify-between px-4 bg-dark-900 shrink-0">
        <div class="flex items-center gap-3">
          <button @click="ui.toggleSidebar()" class="text-dark-400 hover:text-dark-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
            </svg>
          </button>
          <div class="flex gap-1">
            <button
              @click="ui.activeView = 'chat'"
              :class="['px-3 py-1 text-sm rounded-md transition-colors', ui.activeView === 'chat' ? 'bg-primary-600 text-white' : 'text-dark-400 hover:text-dark-200']"
            >Chat</button>
            <button
              @click="ui.activeView = 'tracking'"
              :class="['px-3 py-1 text-sm rounded-md transition-colors', ui.activeView === 'tracking' ? 'bg-primary-600 text-white' : 'text-dark-400 hover:text-dark-200']"
            >Tracking</button>
            <button
              @click="ui.activeView = 'notifications'"
              :class="['px-3 py-1 text-sm rounded-md transition-colors', ui.activeView === 'notifications' ? 'bg-primary-600 text-white' : 'text-dark-400 hover:text-dark-200']"
            >Notifications</button>
            <button
              @click="ui.activeView = 'config'"
              :class="['px-3 py-1 text-sm rounded-md transition-colors', ui.activeView === 'config' ? 'bg-primary-600 text-white' : 'text-dark-400 hover:text-dark-200']"
            >Config</button>
          </div>
        </div>
        <div class="flex items-center gap-2">
          <span class="text-xs text-dark-500">V3Q.AI</span>
        </div>
      </header>

      <!-- Content -->
      <div class="flex-1 overflow-hidden">
        <ChatArea v-if="ui.activeView === 'chat'" />
        <DocumentTracking v-else-if="ui.activeView === 'tracking'" />
        <NotificationCenter v-else-if="ui.activeView === 'notifications'" />
        <ConfigPanel v-else-if="ui.activeView === 'config'" />
      </div>
    </main>
  </div>
</template>
