<template>
  <header class="app-header">
    <div class="brand">
      <button class="sidebar-toggle" type="button" @click="toggleSidebar">☰</button>
      <h1>萌芽SSH</h1>
    </div>
    <nav class="app-nav desktop-only">
      <button
        v-for="item in navItems"
        :key="item.panel"
        class="nav-btn"
        :class="{ active: activePanel === item.panel }"
        @click="openPanel(item.panel)"
      >
        <span class="nav-dot"></span>{{ item.label }}
      </button>
    </nav>
    <div class="header-right">
      <button class="icon-btn focus-toggle desktop-only" type="button" @click="toggleFocus">⊡</button>
    </div>
  </header>
</template>

<script setup>
import { useUI } from "../composables/useUI";

const { activePanel, openPanel, toggleSidebar, toggleFocus } = useUI();

const navItems = [
  { panel: "connect", label: "新建连接" },
  { panel: "ssh",     label: "SSH 配置" },
  { panel: "commands",label: "快捷命令" },
  { panel: "scripts", label: "脚本管理" },
];
</script>

<style scoped>
.app-header {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
  position: sticky;
  top: 0;
  z-index: 30;
  flex-shrink: 0;
}

.brand { display: flex; align-items: center; gap: 8px; }

.sidebar-toggle {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-toggle:hover { border-color: var(--accent); color: var(--accent); }

.brand h1 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-blue) 100%);
  -webkit-background-clip: text;
  color: transparent;
  margin: 0;
  white-space: nowrap;
}

.header-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.app-nav {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  margin-left: 4px;
}
.app-nav::-webkit-scrollbar { display: none; }

.nav-btn {
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  font-family: inherit;
}
.nav-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.nav-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
  flex-shrink: 0;
}

.icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 768px) {
  .app-header { height: 40px; padding: 0 10px; gap: 8px; }
  .brand h1 { font-size: 15px; }
}
</style>
