<script setup>
import { onMounted } from 'vue';
import { store, initProto } from './store/controllerStore';
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 () => {
  if (!store.deviceId) store.deviceId = 'web-' + Math.random().toString(36).slice(2, 8);
  await initProto();
});
</script>

<template>
  <div class="app">
    <header class="topbar">
      <div class="brand">WebRTC 网页远程控制</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>
  </div>
</template>
