<script lang="ts">
  // Notes — a trivial installable app demoing the App Store lifecycle.
  // Installed from the App Store, gets a desktop icon, opens in a window,
  // has its own localStorage-backed state, and uninstalls cleanly. No
  // shell-internal imports — this is a self-contained app that could be
  // shipped as a standalone bundle (Phase 4 will load such bundles from
  // a URL; here it's bundled and discovered via the catalog).
  let { storageKey = 'oikos-app-notes' }: { storageKey?: string } = $props()

  let text = $state('')
  let saved = $state(false)

  function load(): string {
    if (typeof localStorage === 'undefined') return ''
    return localStorage.getItem(storageKey) ?? ''
  }
  function save(): void {
    if (typeof localStorage === 'undefined') return
    localStorage.setItem(storageKey, text)
    saved = true
    setTimeout(() => (saved = false), 1500)
  }

  function onKeydown(e: KeyboardEvent) {
    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
      e.preventDefault()
      save()
    }
  }

  text = load()
  $effect(() => {
    if (!text) return
    const t = setTimeout(() => save(), 2000)
    return () => clearTimeout(t)
  })
</script>

<div class="flex h-full min-h-0 flex-col gap-2 p-4">
  <div class="flex shrink-0 items-center justify-between">
    <h2 class="text-sm font-medium">Notes</h2>
    <span class="text-xs text-muted-foreground">
      {#if saved}saved{:else}unsaved{/if}
    </span>
  </div>
  <textarea
    bind:value={text}
    onkeydown={onKeydown}
    placeholder="Type here. Auto-saves 2s after you stop, or Cmd/Ctrl+S."
    class="min-h-0 flex-1 resize-none rounded-md border bg-background p-3 font-mono text-sm leading-relaxed focus-visible:outline-2 focus-visible:outline-ring"
  ></textarea>
  <p class="shrink-0 text-xs text-muted-foreground">
    A demo installable app — uninstall it from the App Store to remove its icon and window. Its
    notes persist in localStorage under
    <code class="font-mono">{storageKey}</code>.
  </p>
</div>
