<script lang="ts">
  import { onMount } from 'svelte';
  import { preloadSymbolImages } from '$lib/symbols.js';
  import Toolbar from '../components/Toolbar.svelte';
  import VisibilityBar from '../components/VisibilityBar.svelte';
  import Canvas from '../components/Canvas.svelte';
  import DeviceDock from '../components/DeviceDock.svelte';

  let ready = $state(false);

  onMount(async () => {
    await preloadSymbolImages();
    ready = true;
  });
</script>

<svelte:head>
  <title>SCADA Device Layout Tool</title>
</svelte:head>

{#if ready}
  <div class="app">
    <Toolbar />
    <div class="main-area">
      <VisibilityBar />
      <Canvas />
    </div>
    <DeviceDock />
  </div>
{:else}
  <div class="loading">
    <div class="spinner"></div>
    <p>Loading symbols...</p>
  </div>
{/if}

<style>
  .app {
    display: flex;
    height: 100vh;
    overflow: hidden;
  }

  .main-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  .loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #1a1a2e;
    color: #e0e0e0;
    gap: 16px;
  }

  .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #0f3460;
    border-top-color: #e94560;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>
