<script setup lang="ts">
import { onBeforeUnmount, onMounted } from "vue";

import DialogHost from "../../shared/components/DialogHost.vue";
import ToastHost from "../../shared/components/ToastHost.vue";
import { useUiStore } from "../../shared/stores/ui";
import { useMarketStore } from "../../shared/stores/market";
import DesktopSidebar from "./DesktopSidebar.vue";
import MarketStrip from "./MarketStrip.vue";
import MobileNav from "./MobileNav.vue";
import MobileWorkspaceSwitch from "./MobileWorkspaceSwitch.vue";
import StatusBar from "./StatusBar.vue";
import TopBar from "./TopBar.vue";

const ui = useUiStore();
const market = useMarketStore();

function globalShortcut(event: KeyboardEvent): void {
  if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== "k") return;
  if (event.defaultPrevented) {
    ui.showToast("Ctrl+K 已被其他功能占用");
    return;
  }
  event.preventDefault();
  ui.openDialog("search");
}

onMounted(() => {
  window.addEventListener("keydown", globalShortcut);
  void market.load();
});
onBeforeUnmount(() => window.removeEventListener("keydown", globalShortcut));
</script>

<template>
  <div class="app-shell">
    <a class="skip-link" href="#main-content">跳到主要内容</a>
    <DesktopSidebar />
    <div class="shell-main">
      <TopBar />
      <MarketStrip />
      <MobileWorkspaceSwitch />
      <div id="main-content" class="shell-content" tabindex="-1"><RouterView /></div>
    </div>
    <StatusBar />
    <MobileNav />
    <DialogHost />
    <ToastHost />
  </div>
</template>
