<template>
  <div class="left-panel">
    <TabSwitcher v-model="activeTab" :tabs="tabs">
      <!-- Placeholder components for each tab -->
      <div v-if="activeTab === 'world'" class="tab-placeholder">
        <h3>World Info</h3>
        <p>世界书管理页面（待实现）</p>
      </div>
      <div v-if="activeTab === 'api'" class="tab-placeholder">
        <h3>API Configuration</h3>
        <p>API 配置页面（待实现）</p>
      </div>
      <div v-if="activeTab === 'presets'" class="tab-placeholder">
        <h3>Presets</h3>
        <p>预设管理页面（待实现）</p>
      </div>
      <div v-if="activeTab === 'gallery'" class="tab-placeholder">
        <h3>Gallery</h3>
        <p>画廊页面（待实现）</p>
      </div>
      <div v-if="activeTab === 'characters'" class="tab-placeholder">
        <h3>AI Character Cards</h3>
        <p>AI 角色卡管理页面（待实现）</p>
      </div>
    </TabSwitcher>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import TabSwitcher from '@/components/common/TabSwitcher/TabSwitcher.vue';

const activeTab = ref('world');

const tabs = [
  { id: 'world', label: 'World' },
  { id: 'api', label: 'API' },
  { id: 'presets', label: 'Presets' },
  { id: 'gallery', label: 'Gallery' },
  { id: 'characters', label: 'Characters' }
];
</script>

<style scoped>
.left-panel {
  flex: 0 0 20%;
  min-width: 0;
  max-width: none;
  background-color: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-normal);
}

.tab-placeholder {
  padding: var(--spacing-lg);
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-muted);
}

.tab-placeholder h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.tab-placeholder p {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Custom scrollbar for webkit browsers */
.left-panel::-webkit-scrollbar {
  width: 6px;
}

.left-panel::-webkit-scrollbar-track {
  background: transparent;
}

.left-panel::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: var(--radius-full);
}

.left-panel::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-muted);
}
</style>
