<script>
  // pool: { pinned, default, groups:[{name, lanes:[{key,label,description,count?}]}] }
  // selected: array of currently-pinned lane keys (excludes the always-on 'today')
  // onsave(keys): called on every change — selection persists immediately, so the
  //   nav rail updates live behind the modal and the account panel needs no "save".
  // inline: render as a bare panel (account page) instead of a modal overlay.
  let { pool, selected, onsave, onclose, inline = false } = $props();

  let chosen = $derived(new Set(selected ?? []));
  // The pool's natural order, so the rail always reads predictably.
  let order = $derived((pool?.groups ?? []).flatMap((g) => g.lanes.map((l) => l.key)));

  function toggle(key) {
    const next = new Set(chosen);
    if (next.has(key)) next.delete(key);
    else next.add(key);
    onsave?.(order.filter((k) => next.has(k)));
  }
  function resetDefault() {
    onsave?.([...(pool?.default ?? [])]);
  }
  function onkey(e) {
    if (e.key === 'Escape') onclose?.();
  }
</script>

{#snippet body()}
  <h2>Your lanes</h2>
  <p class="sub"><strong>Highlights</strong> and <strong>Latest</strong> always stay — choose the rest. Changes apply right away.</p>

  <div class="pinned-row">
    {#each pool?.pinned ?? [] as p (p.key)}
      <span class="chip pinned" title="Always shown">{p.label} <span class="lock">📌</span></span>
    {/each}
  </div>

  {#each pool?.groups ?? [] as g (g.name)}
    {#if g.lanes.length}
      <div class="group">
        <span class="label">{g.name}</span>
        <div class="chips">
          {#each g.lanes as l (l.key)}
            <button
              type="button"
              class="chip"
              class:on={chosen.has(l.key)}
              title={l.description ?? ''}
              onclick={() => toggle(l.key)}
            >
              {l.label}{#if l.count > 0}<small>{l.count}</small>{/if}
            </button>
          {/each}
        </div>
      </div>
    {/if}
  {/each}

  <div class="actions">
    <button class="reset" onclick={resetDefault}>Reset to default</button>
    {#if !inline}<button class="primary" onclick={onclose}>Done</button>{/if}
  </div>
{/snippet}

<svelte:window onkeydown={onkey} />

{#if inline}
  <section class="panel rise">{@render body()}</section>
{:else}
  <!-- Backdrop: clicking it closes; keyboard users close with Escape (window). -->
  <!-- svelte-ignore a11y_click_events_have_key_events -->
  <div class="overlay" role="presentation" onclick={(e) => e.target === e.currentTarget && onclose?.()}>
    <div class="sheet rise" role="dialog" aria-modal="true" aria-label="Customize lanes" tabindex="-1">
      <button class="x" onclick={onclose} aria-label="Close">×</button>
      {@render body()}
    </div>
  </div>
{/if}

<style>
  .overlay {
    position: fixed; inset: 0; background: rgba(10, 22, 38, 0.32);
    display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 60;
  }
  .sheet {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); width: 100%; max-width: 480px; padding: 26px 24px 20px;
    position: relative; max-height: 86vh; overflow-y: auto;
  }
  .panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 22px 22px 18px;
  }
  .x { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; }
  h2 { font-size: 1.4rem; margin: 0 0 6px; }
  .sub { margin: 0 0 16px; color: var(--muted); font-size: 0.92rem; }
  .pinned-row { margin-bottom: 14px; }
  .group { margin-bottom: 16px; }
  .label {
    display: block; font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--muted); margin-bottom: 9px; font-weight: 600;
  }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink);
    border-radius: 999px; padding: 6px 14px; font-size: 0.88rem; cursor: pointer;
    transition: all 0.14s ease;
  }
  .chip:hover { border-color: var(--accent); }
  .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
  .chip small { font-size: 0.72rem; opacity: 0.7; }
  .chip.pinned { background: var(--accent-soft); color: var(--accent-deep); cursor: default; border-color: transparent; }
  .chip .lock { font-size: 0.8rem; }
  .actions { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
  .reset { background: none; border: none; color: var(--muted); font-size: 0.82rem; text-decoration: underline; cursor: pointer; }
  .primary {
    font: inherit; font-weight: 600; background: var(--accent); color: #fff; border: none;
    border-radius: 999px; padding: 10px 22px; cursor: pointer;
  }
  .primary:hover { background: var(--accent-deep); }
</style>
