<script setup>
import { onMounted } from 'vue';
import { store, initProto, logout } from './store/controllerStore';
import LoginPanel from './components/LoginPanel.vue';
import ConnectionPanel from './components/ConnectionPanel.vue';
import RemoteScreen from './components/RemoteScreen.vue';
import ControlBar from './components/ControlBar.vue';
import StatsBar from './components/StatsBar.vue';

onMounted(async () => {
  await initProto();
});

async function onLogout() {
  await logout();
}
</script>

<template>
  <div class="app">
    <LoginPanel v-if="!store.loggedIn" />

    <template v-else>
      <header class="topbar">
        <div class="brand">WebRTC 网页远程控制</div>
        <div class="user">
          <span class="user-name">{{ store.username || '已登录' }}</span>
          <button class="btn ghost" @click="onLogout">退出</button>
        </div>
        <div class="status" :class="{ ok: store.rtcConnected }">{{ store.statusText }}</div>
        <div class="badges">
          <span class="badge" :class="{ on: store.signalingConnected }">信令</span>
          <span class="badge" :class="{ on: store.registered }">注册</span>
          <span class="badge" :class="{ on: store.rtcConnected }">P2P</span>
          <span class="badge" :class="{ on: store.dataChannelOpen }">通道</span>
        </div>
      </header>

      <main class="layout">
        <aside class="sidebar">
          <ConnectionPanel />
        </aside>
        <section class="stage">
          <RemoteScreen />
          <ControlBar />
        </section>
      </main>

      <footer class="footer">
        <StatsBar />
      </footer>
    </template>
  </div>
</template>
