<script>
  import { onMount } from 'svelte';
  import LanPage from './pages/LanPage.svelte';
  import MainRelayPage from './pages/MainRelayPage.svelte';
  import ElevatorPage from './pages/ElevatorPage.svelte';
  import DevicePage from './pages/DevicePage.svelte';

  let currentPage = $state('lan');
  let mobileMenuOpen = $state(false);
</script>

<nav class="navbar is-light" role="navigation">
  <div class="container">
    <div class="navbar-brand">
      <a class="navbar-item has-text-weight-bold" href="#" onclick="event.preventDefault()">⚙️ 配置管理面板</a>
      <a role="button" class="navbar-burger" onclick={() => mobileMenuOpen = !mobileMenuOpen} aria-label="menu" data-target="mainNav">
        <span /><span /><span />
      </a>
    </div>
    <div id="mainNav" class="navbar-menu" class:is-active={$mobileMenuOpen}>
      <div class="navbar-start">
        {#each ['lan', 'main_relay', 'elevator', 'device'] as page}
          <a class="navbar-item" href="#" onclick="{() => { $currentPage = page; $mobileMenuOpen = false; }}" 
             class:list={[ 'is-active', $currentPage === page ]}>
            {#if page === 'lan'}🌐 LAN
            {:else if page === 'main_relay'}🔌 主继电器
            {:else if page === 'elevator'}🛗 电梯
            {:else}📟 设备{/if}
          </a>
        {/each}
      </div>
    </div>
  </div>
</nav>

<main class="section">
  <div class="container">
    {@switch $currentPage}
      {@case 'lan'}       <LanPage />       {@/case}
      {@case 'main_relay'}<MainRelayPage />{@/case}
      {@case 'elevator'}  <ElevatorPage />  {@/case}
      {@case 'device'}    <DevicePage />    {@/case}
    {/switch}
  </div>
</main>

<footer class="footer">
  <div class="content has-text-centered"><p style="color:#999;font-size:0.8rem;">© 2025 Config Panel — Mock Backend Active</p></div>
</footer>

<style>
  .is-active { color: #00d1b2 !important; font-weight: bold !important; }
  .navbar-burger span { display: block; width: 35px; height: 3px; background: #3273dc; margin: auto; }
  main section { padding-top: 30px; }
</style>
