<template>
  <div class="h-screen w-screen flex flex-col overflow-hidden">
    <!-- Toolbar -->
    <div
      class="h-10 flex items-center justify-between px-4 bg-[var(--wraith-bg-secondary)] border-b border-[var(--wraith-border)] shrink-0"
      style="--wails-draggable: drag"
    >
      <span class="text-sm font-bold tracking-widest text-[var(--wraith-accent-blue)]">
        WRAITH
      </span>
      <div class="flex items-center gap-3 text-xs text-[var(--wraith-text-secondary)]">
        <span>{{ sessionStore.sessionCount }} session{{ sessionStore.sessionCount !== 1 ? "s" : "" }}</span>
        <button
          class="hover:text-[var(--wraith-text-primary)] transition-colors cursor-pointer"
          title="Lock vault"
          @click="appStore.lock()"
        >
          &#x1f512;
        </button>
        <button
          class="hover:text-[var(--wraith-text-primary)] transition-colors cursor-pointer"
          title="Settings"
        >
          &#x2699;
        </button>
      </div>
    </div>

    <!-- Main content area -->
    <div class="flex flex-1 min-h-0">
      <!-- Sidebar -->
      <div
        class="flex flex-col bg-[var(--wraith-bg-secondary)] border-r border-[var(--wraith-border)] shrink-0"
        :style="{ width: sidebarWidth + 'px' }"
      >
        <SidebarToggle />

        <!-- Search -->
        <div class="px-3 py-2">
          <input
            v-model="connectionStore.searchQuery"
            type="text"
            placeholder="Search connections..."
            class="w-full px-2.5 py-1.5 text-xs rounded bg-[var(--wraith-bg-tertiary)] border border-[var(--wraith-border)] text-[var(--wraith-text-primary)] placeholder-[var(--wraith-text-muted)] outline-none focus:border-[var(--wraith-accent-blue)] transition-colors"
          />
        </div>

        <!-- Connection tree -->
        <div class="flex-1 overflow-y-auto">
          <ConnectionTree />
        </div>
      </div>

      <!-- Content area -->
      <div class="flex-1 flex flex-col min-w-0">
        <!-- Tab bar -->
        <TabBar />

        <!-- Session area -->
        <SessionContainer />
      </div>
    </div>

    <!-- Status bar -->
    <StatusBar />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useAppStore } from "@/stores/app.store";
import { useConnectionStore } from "@/stores/connection.store";
import { useSessionStore } from "@/stores/session.store";
import SidebarToggle from "@/components/sidebar/SidebarToggle.vue";
import ConnectionTree from "@/components/sidebar/ConnectionTree.vue";
import TabBar from "@/components/session/TabBar.vue";
import SessionContainer from "@/components/session/SessionContainer.vue";
import StatusBar from "@/components/common/StatusBar.vue";

const appStore = useAppStore();
const connectionStore = useConnectionStore();
const sessionStore = useSessionStore();

const sidebarWidth = ref(240);
</script>
