<template>
  <div class="toolbar-panel">
    <!-- 左侧工具组 -->
    <div class="toolbar-group">
      <button class="toolbar-btn" title="新建场景">
        📄
      </button>
      <button class="toolbar-btn" title="打开场景">
        📁
      </button>
      <button class="toolbar-btn" title="保存场景">
        💾
      </button>
      <div class="toolbar-separator"></div>
      <button class="toolbar-btn" title="撤销">
        ↶
      </button>
      <button class="toolbar-btn" title="重做">
        ↷
      </button>
    </div>

    <!-- 中间运行按钮 -->
    <div class="toolbar-group">
      <button class="toolbar-btn run-btn" title="运行场景">
        ▶️
      </button>
    </div>

    <!-- 右侧重置布局按钮 -->
    <div class="toolbar-group">
      <button 
        class="toolbar-btn" 
        @click="layoutStore.resetLayout"
        title="重置布局"
      >
        🔄
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useLayoutStore } from '@/stores/Layout'

// 使用布局store
const layoutStore = useLayoutStore()
</script>

<style scoped>
.toolbar-panel {
  height: 100%;
  background: #3c3c3c;
  border-bottom: 1px solid #4a4a4a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  color: #cccccc;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.toolbar-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #888;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.2s;
  min-width: 32px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolbar-btn:hover {
  background: #4a4a4a;
  border-color: #5a5a5a;
  color: #cccccc;
}

.toolbar-btn:active {
  background: #2d2d2d;
  border-color: #007acc;
}

.toolbar-btn.active {
  background: #007acc;
  border-color: #005a9e;
  color: #ffffff;
}

.run-btn {
  background: #28a745;
  border-color: #1e7e34;
  color: #ffffff;
  font-size: 16px;
  min-width: 48px;
  height: 32px;
}

.run-btn:hover {
  background: #218838;
  border-color: #1c7430;
}

.run-btn:active {
  background: #1e7e34;
  border-color: #1c7430;
}

.toolbar-separator {
  width: 1px;
  height: 20px;
  background: #4a4a4a;
  margin: 0 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .toolbar-panel {
    padding: 0 8px;
  }
  
  .toolbar-group {
    gap: 2px;
  }
  
  .toolbar-btn {
    padding: 4px 6px;
    min-width: 28px;
    height: 24px;
    font-size: 12px;
  }
  
  .run-btn {
    min-width: 40px;
    height: 28px;
    font-size: 14px;
  }
}
</style>
  