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

<script setup lang="ts">
import { Info, LogOut, Menu } from "lucide-vue-next";
import { computed, ref, watch } from "vue";
import { useRoute } from "vue-router";
import BaseDialog from "@/components/common/BaseDialog.vue";
import BaseDrawer from "@/components/common/BaseDrawer.vue";
import StatusBadge from "@/components/common/StatusBadge.vue";
import WorkbenchBuildSummary from "@/components/workbench/WorkbenchBuildSummary.vue";
import WorkbenchProbePanel from "@/components/workbench/WorkbenchProbePanel.vue";
import AppNavigation from "./AppNavigation.vue";
import { useAuthStore } from "@/stores/auth";
import { useAppStore } from "@/stores/app";
import { useWorkbenchStore } from "@/stores/workbench";

const route = useRoute();
const auth = useAuthStore();
const app = useAppStore();
const workbench = useWorkbenchStore();
const diagnosticsOpen = ref(false);

const shellless = computed(() => route.name === "Login" || route.name === "Register" || route.name === "NotFound");
const showWorkbenchDiagnostics = computed(() => route.meta.section === "workbench");

watch(() => route.fullPath, () => {
  app.mobileOpen = false;
});

watch(showWorkbenchDiagnostics, (visible) => {
  if (!visible) diagnosticsOpen.value = false;
});
</script>

<template>
  <main v-if="shellless" class="auth-main">
    <slot />
  </main>
  <main v-else class="platform-shell" :class="{ 'is-sidebar-collapsed': app.sidebarCollapsed }">
    <aside class="platform-sidebar" :data-collapsed="app.sidebarCollapsed">
      <AppNavigation :collapsed="app.sidebarCollapsed" />
    </aside>
    <section class="platform-main">
      <header class="platform-topbar">
        <button
          class="icon-button desktop-sidebar-toggle"
          type="button"
          :title="app.sidebarCollapsed ? '展开侧边栏' : '折叠侧边栏'"
          :aria-label="app.sidebarCollapsed ? '展开侧边栏' : '折叠侧边栏'"
          @click="app.sidebarCollapsed = !app.sidebarCollapsed"
        ><Menu aria-hidden="true" /></button>
        <button class="icon-button mobile-sidebar-toggle" type="button" title="打开主导航" aria-label="打开主导航" @click="app.mobileOpen = true"><Menu aria-hidden="true" /></button>
        <div class="topbar-status">
          <span v-if="app.loading" class="topbar-progress" aria-live="polite"><span aria-hidden="true" /></span>
          <span>同源 API</span>
          <strong>{{ auth.user?.displayName || auth.user?.username || auth.user?.name || "HWLAB 用户" }}</strong>
        </div>
        <div class="topbar-actions">
          <button v-if="showWorkbenchDiagnostics" id="workbench-diagnostics-toggle" class="workbench-diagnostics-toggle" type="button" aria-haspopup="dialog" @click="diagnosticsOpen = true">
            <Info :size="16" aria-hidden="true" />
            <StatusBadge :status="workbench.chatPending ? 'running' : 'pending'" :label="workbench.chatPending ? '处理中' : '诊断'" />
          </button>
          <button class="btn btn-secondary" type="button" @click="auth.logout"><LogOut :size="16" aria-hidden="true" />退出</button>
        </div>
      </header>
      <div class="platform-content" :class="{ 'is-bounded-layout': route.meta.boundedLayout === true }">
        <slot />
      </div>
      <BaseDialog :open="showWorkbenchDiagnostics && diagnosticsOpen" title="Workbench 诊断" description="Code Agent session、trace、HWPOD 诊断仍走 Cloud Web 同源 API。" wide @close="diagnosticsOpen = false">
          <div class="workbench-diagnostics-grid">
            <dl class="workbench-diagnostics-summary">
              <div><dt>Provider</dt><dd>{{ workbench.providerProfile }}</dd></div>
              <div><dt>Composer</dt><dd>{{ workbench.composer.submitMode }}{{ workbench.composer.targetTraceId ? ` ${workbench.composer.targetTraceId}` : '' }}</dd></div>
              <div><dt>Timeout</dt><dd>inactivity {{ Math.round(workbench.codeAgentTimeoutMs / 1000) }}s</dd></div>
              <div><dt>Session</dt><dd>{{ workbench.selectedSessionId || '未选择' }}</dd></div>
            </dl>
            <WorkbenchProbePanel :live="workbench.live" />
            <WorkbenchBuildSummary :live="workbench.live" />
          </div>
      </BaseDialog>
    </section>
    <BaseDrawer :open="app.mobileOpen" title="HWLAB 导航" placement="left" @close="app.mobileOpen = false">
      <AppNavigation @navigate="app.mobileOpen = false" />
    </BaseDrawer>
  </main>
</template>
