<template>
  <div
    :class="['right-panel', { 'right-panel--collapsed': collapsed }]"
    :style="{ width: collapsed ? '36px' : '320px' }"
  >
    <button
      class="right-panel__toggle"
      :title="collapsed ? '展开右侧面板' : '收起右侧面板'"
      :aria-label="collapsed ? '展开右侧面板' : '收起右侧面板'"
      @click="toggle"
    >
      <RightOutlined v-if="!collapsed" />
      <LeftOutlined v-else />
    </button>

    <div v-if="!collapsed" class="right-panel__content">
      <SystemMonitorPanel />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
import SystemMonitorPanel from './SystemMonitorPanel.vue'

const STORAGE_KEY = 'right-panel-collapsed'
const collapsed = ref(localStorage.getItem(STORAGE_KEY) === 'true')

watch(collapsed, (val) => {
  localStorage.setItem(STORAGE_KEY, String(val))
})

function toggle(): void {
  collapsed.value = !collapsed.value
}

defineExpose({ toggle, collapsed })
</script>

<style scoped>
.right-panel {
  display: flex;
  flex-shrink: 0;
  height: 100%;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  overflow: hidden;
  transition: width var(--transition-normal);
}

.right-panel__toggle {
  width: 36px;
  min-width: 36px;
  align-self: stretch;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 12px;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.right-panel__toggle:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.right-panel__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
</style>
