<script lang="ts">
  import { onMount } from "svelte";
  import Header from "$lib/components/Header.svelte";
  import StatusBar from "$lib/components/StatusBar.svelte";
  import Controls from "$lib/components/Controls.svelte";
  import TranscriptionDisplay from "$lib/components/TranscriptionDisplay.svelte";
  import Settings from "$lib/components/Settings.svelte";
  import { backendStore } from "$lib/stores/backend";
  import { configStore } from "$lib/stores/config";

  let showSettings = $state(false);

  let obsDisplayUrl = $derived(backendStore.obsUrl);
  let syncDisplayUrl = $derived(backendStore.syncUrl);

  function openSettings() {
    showSettings = true;
  }

  function closeSettings() {
    showSettings = false;
  }

  onMount(() => {
    backendStore.connect();
    configStore.loadConfig();

    return () => {
      backendStore.disconnect();
    };
  });
</script>

<div class="app-shell">
  <Header onSettingsClick={openSettings} />
  <StatusBar />

  <div class="display-links">
    <span class="link-label">OBS:</span>
    <a href={obsDisplayUrl} target="_blank" rel="noopener">{obsDisplayUrl}</a>
    {#if syncDisplayUrl}
      <span class="link-separator">|</span>
      <span class="link-label">Sync:</span>
      <a href={syncDisplayUrl} target="_blank" rel="noopener"
        >{syncDisplayUrl}</a
      >
    {/if}
  </div>

  <TranscriptionDisplay />
  <Controls />

  <div class="version-label">v{backendStore.version}</div>
</div>

{#if showSettings}
  <Settings onClose={closeSettings} />
{/if}

<style>
  .app-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: var(--bg-primary);
  }

  .display-links {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 20px;
    font-size: 12px;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
  }

  .link-label {
    color: var(--text-secondary);
    font-weight: 500;
  }

  .link-separator {
    color: var(--text-muted);
    margin: 0 4px;
  }

  .version-label {
    position: fixed;
    bottom: 6px;
    right: 12px;
    font-size: 11px;
    color: var(--text-muted);
    pointer-events: none;
    z-index: 10;
  }
</style>
