<script lang="ts">
  // App Store — lists the installable-app catalog (web/src/lib/app-store/catalog.ts),
  // shows install state, and installs/uninstalls. Installing persists the
  // manifest id (localStorage) and the registry's reactive `apps` store
  // immediately renders the new app's desktop icon — no reload. Uninstalling
  // removes the icon and (via WindowLayer's reactive orphan-close effect)
  // closes any open window for that app.
  //
  // Phase 3 scope: local bundles only (apps that ship with the build,
  // discovered via the catalog). Phase 4 will swap the catalog for a
  // fetched `/api/v1/apps` endpoint + remote bundle loading with
  // sandboxing; the install/uninstall lifecycle here is the mechanism that
  // generalizes.
  import { CATALOG } from '$lib/app-store/catalog'
  import { installApp, uninstallApp, installedAppIds } from '$lib/apps'
  import CheckCircleIcon from '@lucide/svelte/icons/circle-check-big'
  import DownloadIcon from '@lucide/svelte/icons/download'
  import TrashIcon from '@lucide/svelte/icons/trash'
  import ShieldIcon from '@lucide/svelte/icons/shield'

  // Reactive membership test — re-renders when the installed set changes.
  const installedSet = $derived(new Set($installedAppIds))
</script>

<div class="flex h-full min-h-0 flex-col">
  <header class="shrink-0 border-b px-4 py-3">
    <h1 class="text-base font-semibold">App Store</h1>
    <p class="mt-0.5 text-xs text-muted-foreground">
      Installable apps. Local bundles for now — a remote catalog + sandboxing is Phase 4.
    </p>
  </header>

  <div class="min-h-0 flex-1 overflow-auto p-4">
    {#if CATALOG.length === 0}
      <p class="text-sm text-muted-foreground">No apps available yet.</p>
    {:else}
      <ul class="flex flex-col gap-3">
        {#each CATALOG as entry (entry.manifest.id)}
          {@const m = entry.manifest}
          {@const isOn = installedSet.has(m.id)}
          <li class="flex items-start gap-3 rounded-lg border p-3">
            <div
              class="flex size-10 shrink-0 items-center justify-center rounded-md border bg-muted/40"
            >
              <entry.icon class="size-5" />
            </div>
            <div class="min-w-0 flex-1">
              <div class="flex items-center gap-2">
                <h2 class="truncate text-sm font-medium">{m.title}</h2>
                <span class="shrink-0 text-[10px] font-mono text-muted-foreground"
                  >v{m.version}</span
                >
                {#if m.author}<span class="shrink-0 text-[10px] text-muted-foreground"
                    >by {m.author}</span
                  >{/if}
              </div>
              <p class="mt-0.5 line-clamp-2 text-xs text-muted-foreground">{m.description}</p>
              <div class="mt-1.5 flex items-center gap-1 text-[10px] text-muted-foreground">
                <ShieldIcon class="size-3" />
                <span>
                  {#if m.permissions.length}{m.permissions.join(', ')}{:else}no permissions
                    requested{/if}
                </span>
              </div>
            </div>
            <div class="shrink-0">
              {#if isOn}
                <button
                  type="button"
                  class="flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-destructive/10 hover:text-destructive hover:border-destructive/50"
                  onclick={() => uninstallApp(m.id)}
                >
                  <TrashIcon class="size-3.5" /> Uninstall
                </button>
              {:else}
                <button
                  type="button"
                  class="flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90"
                  onclick={() => installApp(m.id)}
                >
                  <DownloadIcon class="size-3.5" /> Install
                </button>
              {/if}
            </div>
          </li>
        {/each}
      </ul>
    {/if}

    <div class="mt-6 rounded-md border border-dashed p-3 text-xs text-muted-foreground">
      <p class="flex items-center gap-1.5">
        <CheckCircleIcon class="size-3.5" />
        Installed apps appear on the desktop immediately. Uninstalling closes any open window for that
        app.
      </p>
    </div>
  </div>
</div>
