<template>
  <div class="right-panel">
    <DualTabSwitcher v-model="selectedTabs" :tabs="tabs">
      <div class="panel-content">
        <div 
          v-if="selectedTabs.includes('rag')" 
          class="panel-section"
          :class="{ 'has-divider': selectedTabs.length === 2 }"
        >
          <div class="tab-placeholder">
            <h3>RAG Information</h3>
            <p>RAG 信息页面（待实现）</p>
          </div>
        </div>
        <div 
          v-if="selectedTabs.includes('worldentries')" 
          class="panel-section"
          :class="{ 'has-divider': selectedTabs.length === 2 && selectedTabs.indexOf('worldentries') < selectedTabs.length - 1 }"
        >
          <div class="tab-placeholder">
            <h3>World Info Entries</h3>
            <p>世界书条目页面（待实现）</p>
          </div>
        </div>
        <div 
          v-if="selectedTabs.includes('dynamictable')" 
          class="panel-section"
          :class="{ 'has-divider': selectedTabs.length === 2 && selectedTabs.indexOf('dynamictable') < selectedTabs.length - 1 }"
        >
          <div class="tab-placeholder">
            <h3>Dynamic Table</h3>
            <p>动态表格页面（待实现）</p>
          </div>
        </div>
        <div 
          v-if="selectedTabs.includes('dice')" 
          class="panel-section"
        >
          <div class="tab-placeholder">
            <h3>Dice Roller</h3>
            <p>骰子页面（待实现）</p>
          </div>
        </div>
      </div>
    </DualTabSwitcher>
  </div>
</template>

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

// 默认选中两个页面
const selectedTabs = ref(['rag', 'worldentries']);

const tabs = [
  { id: 'rag', label: 'RAG' },
  { id: 'worldentries', label: 'World Entries' },
  { id: 'dynamictable', label: 'Dynamic Table' },
  { id: 'dice', label: 'Dice' }
];
</script>

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

.panel-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.panel-section {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* 当有两个页面时，第一个页面添加底部分隔线 */
.panel-section.has-divider {
  border-bottom: 1px solid var(--color-border-light);
}

/* 当只有一个页面选中时，占据全部空间 */
.panel-section:only-child {
  flex: 1;
}

.tab-placeholder {
  padding: var(--spacing-lg);
  height: 100%;
  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 */
.right-panel::-webkit-scrollbar {
  width: 6px;
}

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

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

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