<script setup lang="ts">
import { useTelemetryStore } from "~/stores/telemetry";

const telemetry = useTelemetryStore();
const user = useSupabaseUser();

onMounted(() => {
  telemetry.connect();
});

onBeforeUnmount(() => {
  telemetry.disconnect();
});
</script>

<template>
  <div class="app-shell">
    <header class="app-shell__header">
      <span class="app-shell__brand">Continuum</span>
      <span class="app-shell__status" :class="telemetry.connected ? 'is-online' : 'is-offline'">
        {{ telemetry.connected ? "Live" : "Reconnecting…" }}
      </span>
      <span v-if="user" class="app-shell__user">{{ user.email }}</span>
    </header>
    <main class="app-shell__main">
      <NuxtPage />
    </main>
  </div>
</template>

<style>
:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, sans-serif;
}

body {
  margin: 0;
  background: #0b0d12;
  color: #e6e8ec;
}

.app-shell__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #1f232c;
}

.app-shell__brand {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.app-shell__status.is-online {
  color: #35d07f;
}

.app-shell__status.is-offline {
  color: #f2a33c;
}

.app-shell__user {
  margin-left: auto;
  opacity: 0.7;
  font-size: 0.875rem;
}

.app-shell__main {
  padding: 1.25rem;
}
</style>
