<script setup lang="ts">
import { ref, onMounted, onErrorCaptured, defineAsyncComponent } from "vue";
import { useAppStore } from "@/stores/app.store";
import UnlockLayout from "@/layouts/UnlockLayout.vue";

const MainLayout = defineAsyncComponent({
  loader: () => import("@/layouts/MainLayout.vue"),
  onError(error) { console.error("[App] MainLayout load failed:", error); },
});
const ToolWindow = defineAsyncComponent({
  loader: () => import("@/components/tools/ToolWindow.vue"),
  onError(error) { console.error("[App] ToolWindow load failed:", error); },
});
const DetachedSession = defineAsyncComponent({
  loader: () => import("@/components/session/DetachedSession.vue"),
  onError(error) { console.error("[App] DetachedSession load failed:", error); },
});

const app = useAppStore();
const appError = ref<string | null>(null);

// Tool window mode — detected from URL hash: #/tool/network-scanner?sessionId=abc
const isToolMode = ref(false);
const isDetachedMode = ref(false);
const toolName = ref("");
const toolSessionId = ref("");

onErrorCaptured((err) => {
  appError.value = err instanceof Error ? err.message : String(err);
  console.error("[App] Uncaught error:", err);
  return false;
});

onMounted(async () => {
  const hash = window.location.hash;
  if (hash.startsWith("#/tool/")) {
    isToolMode.value = true;
    const rest = hash.substring(7); // after "#/tool/"
    const [name, query] = rest.split("?");
    toolName.value = name;
    toolSessionId.value = new URLSearchParams(query || "").get("sessionId") || "";
  } else if (hash.startsWith("#/detached-session")) {
    isDetachedMode.value = true;
  } else {
    await app.checkVaultState();
  }
});
</script>

<template>
  <!-- Error display for debugging -->
  <div v-if="appError" class="fixed inset-0 z-50 flex items-center justify-center bg-[#0d1117] text-red-400 p-8 text-sm font-mono whitespace-pre-wrap">
    {{ appError }}
  </div>
  <!-- Detached session window mode -->
  <DetachedSession v-else-if="isDetachedMode" />
  <!-- Tool popup window mode -->
  <ToolWindow v-else-if="isToolMode" :tool="toolName" :session-id="toolSessionId" />
  <!-- Normal app mode -->
  <div v-else class="app-root">
    <UnlockLayout v-if="!app.isUnlocked" />
    <MainLayout v-else />
  </div>
</template>

<style scoped>
.app-root {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
