<script lang="ts">
  import { LayoutGrid } from 'lucide-svelte';
  import { onMount } from 'svelte';

  import { tooltip } from '$lib/actions/tooltip';
  import type { ComponentType } from 'svelte';

  export type WorkspaceFabItem = {
    href: string;
    label: string;
    icon: ComponentType;
  };

  let {
    items,
    open = $bindable(false)
  }: {
    items: WorkspaceFabItem[];
    open?: boolean;
  } = $props();

  let root = $state<HTMLElement | null>(null);

  function close() {
    open = false;
  }

  function toggle() {
    open = !open;
  }

  onMount(() => {
    const handlePointerDown = (event: PointerEvent) => {
      if (!open || !root || root.contains(event.target as Node)) {
        return;
      }
      close();
    };

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        close();
      }
    };

    window.addEventListener('pointerdown', handlePointerDown);
    window.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('pointerdown', handlePointerDown);
      window.removeEventListener('keydown', handleKeyDown);
    };
  });
</script>

{#if items.length}
  <div class="apps-fab-wrap" bind:this={root}>
    {#if open}
      <div class="apps-panel" role="menu" aria-label="Quick access apps">
        {#each items as item (item.href)}
          <a href={item.href} class="apps-link" role="menuitem" onclick={close}>
            <span class="apps-link-icon" aria-hidden="true">
              <item.icon size={16} strokeWidth={2} />
            </span>
            <span>{item.label}</span>
          </a>
        {/each}
      </div>
    {/if}

    <button
      type="button"
      class="apps-fab"
      aria-expanded={open}
      aria-label="Open app launcher"
      use:tooltip={{ label: 'Quickly access apps', placement: 'top' }}
      onclick={toggle}
    >
      <LayoutGrid size={20} strokeWidth={2.2} />
    </button>
  </div>
{/if}

<style>
  .apps-fab-wrap {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 46;
    display: grid;
    justify-items: end;
    gap: 0.7rem;
  }

  .apps-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-brand);
    color: var(--color-on-brand);
    box-shadow: 0 20px 36px -22px color-mix(in srgb, var(--color-brand) 75%, transparent);
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
  }

  .apps-fab:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--color-brand) 92%, black);
    box-shadow: 0 24px 44px -24px color-mix(in srgb, var(--color-brand) 78%, transparent);
  }

  .apps-fab:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-brand) 24%, white);
    outline-offset: 2px;
  }

  .apps-panel {
    min-width: 15rem;
    display: grid;
    gap: 0.24rem;
    padding: 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-bg-elevated);
    box-shadow: 0 24px 48px -28px rgba(15, 23, 42, 0.32);
  }

  .apps-link {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    padding: 0.8rem 0.82rem;
    border-radius: 0.82rem;
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: 600;
  }

  .apps-link:hover {
    background: var(--panel-soft);
  }

  .apps-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
    color: var(--color-brand);
    flex-shrink: 0;
  }

  @media (max-width: 1180px) {
    .apps-fab-wrap {
      bottom: calc(max(0.8rem, env(safe-area-inset-bottom)) + 5.9rem);
    }
  }
 </style>
