<script lang="ts">
  // @ts-nocheck
  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";

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

  const prefs = getPreferences();

  // Keep transcript-editor theme sync trick: legacy settings → preferences
  $effect(() => {
    const legacyTheme = settings.theme;
    const mapped = legacyTheme === "Light" ? "light" : legacyTheme === "Dark" ? "dark" : "system";
    if (prefs.theme !== mapped) {
      updatePreferences({ theme: mapped });
    }
  });

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

  onMount(async () => {
    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 closes the preview without destroying it — the next dictation
  // reopens it instantly via open_preview_window.
  function handleKeydown(event) {
    if (event.key === "Escape") {
      getCurrentWindow().hide().catch(() => {});
    }
  }
</script>

<svelte:window onkeydown={handleKeydown} />

<div class="h-screen w-screen overflow-hidden grain border border-border shadow-xl flex flex-col">
  <div class="flex-1 min-h-0 overflow-hidden">
    {@render children()}
  </div>
</div>
