<!-- SPEC: PJ2026-010405 云端控制台. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->

<script setup lang="ts">
import {
  BadgeCheck,
  Bot,
  Bug,
  ChartBar,
  CircleHelp,
  CircuitBoard,
  Code2,
  Cpu,
  CreditCard,
  FolderKanban,
  Gauge,
  KeyRound,
  LayoutDashboard,
  ListChecks,
  LockKeyhole,
  Monitor,
  PackageOpen,
  Settings,
  ShieldCheck,
  Users
} from "lucide-vue-next";
import { computed, defineComponent, h, type Component, type PropType } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAppStore } from "@/stores/app";
import { useAuthStore } from "@/stores/auth";

const props = withDefaults(defineProps<{ collapsed?: boolean }>(), {
  collapsed: false,
});
const emit = defineEmits<{ navigate: [] }>();
const route = useRoute();
const router = useRouter();
const app = useAppStore();
const auth = useAuthStore();

const NavIcon = defineComponent({
  name: "NavIcon",
  props: {
    icon: {
      type: [Object, Function] as PropType<Component>,
      required: true,
    },
  },
  setup(props) {
    return () => h(props.icon, { size: 18 });
  },
});

interface NavItem {
  name: string;
  label: string;
  path: string;
  icon: Component;
  navId: string;
}

interface NavSection {
  title: string;
  items: NavItem[];
}

const navSections = [
  {
    title: "工作入口",
    items: [
      {
        name: "CodeWorkbench",
        label: "Code 工作台",
        path: "/workbench",
        icon: Monitor,
        navId: "workbench.code",
      },
      {
        name: "AgentRuns",
        label: "智能体运行",
        path: "/agents/runs",
        icon: Bot,
        navId: "workbench.code",
      },
      {
        name: "CaseRun",
        label: "CaseRun",
        path: "/caserun",
        icon: CircuitBoard,
        navId: "workbench.code",
      },
      {
        name: "WorkbenchDebug",
        label: "调试",
        path: "/workbench/debug",
        icon: Bug,
        navId: "workbench.debug",
      },
      {
        name: "OpenCode",
        label: "OpenCode",
        path: "/opencode",
        icon: Code2,
        navId: "opencode.root",
      },
      {
        name: "Dashboard",
        label: "平台概览",
        path: "/dashboard",
        icon: LayoutDashboard,
        navId: "user.dashboard",
      },
    ],
  },
  {
    title: "项目",
    items: [
      {
        name: "Projects",
        label: "项目",
        path: "/projects",
        icon: FolderKanban,
        navId: "project.overview",
      },
      {
        name: "ProjectMdtodo",
        label: "MDTODO",
        path: "/projects/mdtodo",
        icon: ListChecks,
        navId: "project.mdtodo",
      },
      {
        name: "TaskTree",
        label: "TaskTree",
        path: "/projects/tasktree",
        icon: ChartBar,
        navId: "project.tasktree",
      },
    ],
  },
  {
    title: "用户与运营",
    items: [
      {
        name: "ApiKeys",
        label: "API Keys",
        path: "/api-keys",
        icon: KeyRound,
        navId: "user.apiKeys",
      },
      {
        name: "Usage",
        label: "用量",
        path: "/usage",
        icon: ChartBar,
        navId: "user.usage",
      },
      {
        name: "Billing",
        label: "充值与订阅",
        path: "/billing",
        icon: CreditCard,
        navId: "user.billing",
      },
    ],
  },
  {
    title: "管理",
    items: [
      {
        name: "Access",
        label: "授权",
        path: "/admin/access",
        icon: ShieldCheck,
        navId: "admin.access",
      },
      {
        name: "AdminSecrets",
        label: "密钥",
        path: "/admin/secrets",
        icon: LockKeyhole,
        navId: "admin.secrets",
      },
      {
        name: "Users",
        label: "用户",
        path: "/admin/users",
        icon: Users,
        navId: "admin.users",
      },
      {
        name: "AdminBilling",
        label: "账务",
        path: "/admin/billing",
        icon: CreditCard,
        navId: "admin.billing",
      },
      {
        name: "HwpodGroups",
        label: "HWPOD",
        path: "/admin/hwpod-groups",
        icon: CircuitBoard,
        navId: "admin.hwpodGroups",
      },
      {
        name: "ProviderProfiles",
        label: "Provider Profiles",
        path: "/admin/provider-profiles",
        icon: Cpu,
        navId: "admin.providerProfiles",
      },
    ],
  },
  {
    title: "系统",
    items: [
      {
        name: "Gate",
        label: "内部复核",
        path: "/gate",
        icon: BadgeCheck,
        navId: "system.gate",
      },
      {
        name: "Performance",
        label: "性能",
        path: "/performance",
        icon: Gauge,
        navId: "system.performance",
      },
      {
        name: "Skills",
        label: "Skills",
        path: "/skills",
        icon: PackageOpen,
        navId: "system.skills",
      },
      {
        name: "Settings",
        label: "设置",
        path: "/settings",
        icon: Settings,
        navId: "system.settings",
      },
      {
        name: "Help",
        label: "帮助",
        path: "/help",
        icon: CircleHelp,
        navId: "system.help",
      },
    ],
  },
] satisfies NavSection[];

const visibleSections = computed(() =>
  navSections
    .map((section) => ({
      ...section,
      items: section.items.filter((item) => auth.canAccessNav(item.navId)),
    }))
    .filter((section) => section.items.length > 0),
);

async function go(item: NavItem): Promise<void> {
  emit("navigate");
  if (route.path === item.path) return;
  app.setLoading(true);
  try {
    await router.push(item.path);
  } finally {
    window.setTimeout(() => app.setLoading(false), 120);
  }
}

function isActive(item: NavItem): boolean {
  return (
    route.name === item.name ||
    route.meta.navParent === item.name ||
    (item.name === "CodeWorkbench" && route.meta.section === "workbench")
  );
}
</script>

<template>
  <div
    class="brand-lockup"
    :data-collapsed="props.collapsed ? 'true' : 'false'"
  >
    <span class="brand-mark" aria-hidden="true">HW</span>
    <div class="brand-copy">
      <strong>HWLAB</strong>
      <small>Cloud Console · v0.3</small>
    </div>
  </div>
  <nav class="nav-groups" aria-label="主导航">
    <section
      v-for="section in visibleSections"
      :key="section.title"
      class="nav-section"
    >
      <h2>{{ section.title }}</h2>
      <button
        v-for="item in section.items"
        :key="item.name"
        class="nav-item"
        :data-active="isActive(item) ? 'true' : 'false'"
        type="button"
        :title="item.label"
        :aria-label="item.label"
        :aria-current="isActive(item) ? 'page' : undefined"
        @click="go(item)"
      >
        <span class="nav-icon" aria-hidden="true">
          <NavIcon :icon="item.icon" />
        </span>
        <span class="nav-label">{{ item.label }}</span>
      </button>
    </section>
  </nav>
</template>
