<script>
  import { onMount } from 'svelte';
  import { getJSON } from '$lib/api.js';
  import { savedIds, toggleSave } from '$lib/auth.svelte.js';
  import { track } from '$lib/analytics.js';

  let { onclose } = $props();
  let items = $state([]);
  let loading = $state(true);

  onMount(async () => {
    try {
      items = (await getJSON('/api/saved')).items;
    } catch {
      /* not signed in / transient */
    } finally {
      loading = false;
    }
  });

  // Filter by the live saved set so an unsave removes it immediately.
  let shown = $derived(items.filter((a) => savedIds.has(a.id)));

  function onkey(e) {
    if (e.key === 'Escape') onclose?.();
  }
</script>

<svelte:window onkeydown={onkey} />

<!-- 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="drawer" role="dialog" aria-modal="true" aria-label="Saved articles" tabindex="-1">
    <div class="head">
      <h2>Saved</h2>
      <button class="x" onclick={onclose} aria-label="Close">×</button>
    </div>

    {#if loading}
      <p class="muted">Loading…</p>
    {:else if shown.length}
      <ul>
        {#each shown as a (a.id)}
          <li>
            <a class="t" href={a.url} target="_blank" rel="noopener" onclick={() => track('open', a.id)}>{a.title}</a>
            <div class="meta">
              <span class="src">{a.source}</span>
              <button class="rm" onclick={() => toggleSave(a.id)}>Remove</button>
            </div>
          </li>
        {/each}
      </ul>
      <a class="all" href="/account?section=saved" onclick={onclose}>Open Saved in account →</a>
    {:else}
      <p class="muted">Nothing saved yet — tap <strong>Save</strong> on a story to keep it here.</p>
    {/if}
  </div>
</div>

<style>
  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 22, 38, 0.32);
    z-index: 50;
    display: flex;
    justify-content: flex-end;
  }
  .drawer {
    background: var(--surface);
    width: min(380px, 100%);
    height: 100%;
    box-shadow: -10px 0 30px rgba(40, 38, 28, 0.12);
    padding: 20px 22px;
    overflow-y: auto;
    animation: slide 0.2s ease both;
  }
  @keyframes slide { from { transform: translateX(20px); opacity: 0.4; } to { transform: none; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }
  .head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
  .head h2 { font-size: 1.4rem; }
  .x { background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; }
  .muted { color: var(--muted); }
  ul { list-style: none; margin: 0; padding: 0; }
  li { padding: 12px 0; border-bottom: 1px solid var(--line); }
  li:last-of-type { border-bottom: none; }
  .t { color: var(--ink); font-weight: 600; font-size: 0.95rem; display: block; }
  .t:hover { color: var(--accent-deep); }
  .meta { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
  .src { color: var(--muted); font-size: 0.78rem; }
  .rm { background: none; border: none; color: var(--muted); font-size: 0.78rem; text-decoration: underline; cursor: pointer; }
  .rm:hover { color: var(--accent-deep); }
  .all { display: inline-block; margin-top: 16px; color: var(--accent-deep); font-size: 0.88rem; }
</style>
