<template>
  <LoginOverlay v-if="!isAuthenticated" />

  <div v-else class="app" ref="appRef">
    <AppHeader v-if="!focusMode" />

    <div v-if="notice.text" class="global-notice" :class="notice.type">
      {{ notice.text }}
    </div>

    <button class="focus-floating" type="button" @click="toggleFocus">
      {{ focusMode ? "□" : "⊡" }}
    </button>

    <MobileFab v-if="!focusMode" />

    <main class="main-full" :class="{ 'focus-main': focusMode }">
      <SessionSidebar v-if="!focusMode && showSidebar && sessions.length" />
      <TerminalPanel />
      <PanelOverlay v-if="!focusMode && activePanel" />
    </main>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount } from "vue";
import { useAuth }     from "./composables/useAuth";
import { useNotice }   from "./composables/useNotice";
import { useUI }       from "./composables/useUI";
import { useSessions } from "./composables/useSessions";
import { useSSH }      from "./composables/useSSH";
import { useCommands } from "./composables/useCommands";
import { useScripts }  from "./composables/useScripts";
import { useViewport } from "./composables/useViewport";
import { useClipboard } from "./composables/useClipboard";

import LoginOverlay   from "./components/LoginOverlay.vue";
import AppHeader      from "./components/AppHeader.vue";
import MobileFab      from "./components/MobileFab.vue";
import SessionSidebar from "./components/SessionSidebar.vue";
import TerminalPanel  from "./components/TerminalPanel.vue";
import PanelOverlay   from "./components/PanelOverlay.vue";

const { isAuthenticated, checkAuth }          = useAuth();
const { notice }                              = useNotice();
const { focusMode, showSidebar, activePanel, toggleFocus } = useUI();
const { sessions, handleWindowResize }        = useSessions();
const { loadSSH }                             = useSSH();
const { loadCommands }                        = useCommands();
const { loadScripts }                         = useScripts();
const { appRef, setupViewport, teardownViewport, hideSplashScreen } = useViewport();
const { setupClipboard, teardownClipboard }   = useClipboard();

onMounted(async () => {
  window.addEventListener("resize", handleWindowResize);
  setupViewport();
  setupClipboard();

  await checkAuth();

  if (isAuthenticated.value) {
    Promise.allSettled([loadSSH(), loadCommands(), loadScripts()])
      .finally(hideSplashScreen);
  } else {
    hideSplashScreen();
  }
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", handleWindowResize);
  teardownViewport();
  teardownClipboard();
  sessions.value.forEach((s) => { s.ws?.close(); s.term?.dispose(); });
});
</script>

<style scoped>
.app {
  height: 100svh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg-1);
  color: var(--text-1);
}

.global-notice {
  position: fixed;
  top: 52px;
  right: 16px;
  z-index: 200;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  max-width: calc(100vw - 32px);
}
.global-notice.success { border-color: var(--border-hi); color: #56d364; }
.global-notice.warning { border-color: rgba(210, 153, 34, 0.5); color: #e3b341; }
.global-notice.error   { border-color: rgba(248, 81, 73, 0.5);  color: #ff7b72; }

.focus-floating {
  position: fixed;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.focus-floating:hover { border-color: var(--accent); color: var(--accent); }

.main-full {
  flex: 1;
  display: flex;
  position: relative;
  padding: 8px;
  gap: 8px;
  min-height: 0;
}
.focus-main { padding: 0; gap: 0; }

@media (max-width: 768px) {
  .main-full { padding: 4px; gap: 4px; }
  .global-notice {
    top: auto;
    bottom: 72px;
    right: 8px;
    left: 8px;
    text-align: center;
  }
  .focus-floating { display: none; }
}
</style>
