<script>
  import "../../app.css";
  import { onDestroy, onMount } from "svelte";
  import { getCurrentWindow } from "@tauri-apps/api/window";
  import { listen } from "@tauri-apps/api/event";
  import { settings } from "$lib/stores/page.svelte.js";
  import {
    getPreferences,
    updatePreferences,
    applyExternalPreferences,
    PREFERENCES_CHANGED_EVENT,
  } from "$lib/stores/preferences.svelte.js";
  import Titlebar from "$lib/components/Titlebar.svelte";
  import { loadOsInfo, isLinux } from "$lib/utils/osInfo.js";

  let { children } = $props();
  let unlistenPrefs = null;
  let useCustomChrome = $state(false);

  const prefs = getPreferences();

  // Theme — sync legacy settings to preferences store
  $effect(() => {
    const legacyTheme = settings.theme;
    const mapped = legacyTheme === "Light" ? "light" : legacyTheme === "Dark" ? "dark" : "system";
    if (prefs.theme !== mapped) {
      updatePreferences({ theme: mapped });
    }
  });

  // Sync settings from main window
  if (typeof window !== "undefined") {
    window.addEventListener("storage", (e) => {
      if (e.key === "kon_settings" && e.newValue) {
        try { Object.assign(settings, JSON.parse(e.newValue)); } catch {}
      }
    });
  }

  onMount(async () => {
    loadOsInfo()
      .then(() => { useCustomChrome = !isLinux(); })
      .catch(() => {});
    try {
      let ownLabel = null;
      try { ownLabel = getCurrentWindow().label; } catch {}
      unlistenPrefs = await listen(PREFERENCES_CHANGED_EVENT, (event) => {
        const payload = event?.payload;
        if (!payload || payload.source === ownLabel) return;
        applyExternalPreferences(payload.prefs);
      });
    } catch {}
  });

  onDestroy(() => {
    if (unlistenPrefs) unlistenPrefs();
  });

  // Escape to close
  function handleKeydown(e) {
    if (e.key === "Escape") {
      getCurrentWindow().close();
    }
  }
</script>

<svelte:window onkeydown={handleKeydown} />

<div class="h-screen w-screen overflow-hidden grain border border-border shadow-xl animate-float-enter flex flex-col">
  {#if useCustomChrome}
    <Titlebar compact />
  {/if}
  <div class="flex-1 min-h-0 overflow-hidden">
    {@render children()}
  </div>
</div>
