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

  // ── Types ──
  interface Feed { name: string; count: number; id?: number; }
  interface FeedCategory { name: string; feeds: Feed[]; expanded: boolean; id?: number; }
  interface Article {
    id: number; title: string; feed: string; timeAgo: string; readingTime: string;
    content: string; thumbnail?: string; starred: boolean; read: boolean;
    author?: string; url?: string;
  }

  // ── State ──
  let navItems = $state([
    { label: 'Today', count: 0, icon: 'calendar' },
    { label: 'Starred', count: 0, icon: 'star' },
    { label: 'History', count: 0, icon: 'clock' }
  ]);
  let feedCategories = $state<FeedCategory[]>([]);
  let articles = $state<Article[]>([]);
  let activeNav = $state('Today');
  let activeFeedId = $state<number | null>(null);
  let selectedArticle = $state<Article | null>(null);
  let filterMode = $state<'unread' | 'all'>('unread');
  let sidebarOpen = $state(false);
  let autoScrollActive = $state(false);
  let autoScrollSpeed = $state(1.5);
  let articleListEl: HTMLDivElement;
  let scrollRAF: number | null = null;
  let loading = $state(true);
  let loadingMore = $state(false);
  let hasMore = $state(true);
  let totalUnread = $state(0);

  const LIMIT = 50;
  let feedCounters: Record<string, number> = {};

  // ── Helpers ──
  function timeAgo(dateStr: string): string {
    const mins = Math.floor((Date.now() - new Date(dateStr).getTime()) / 60000);
    if (mins < 1) return 'now';
    if (mins < 60) return `${mins}m ago`;
    const hrs = Math.floor(mins / 60);
    if (hrs < 24) return `${hrs}h ago`;
    const days = Math.floor(hrs / 24);
    return `${days}d ago`;
  }

  function extractThumb(html: string): string | null {
    const match = html?.match(/<img[^>]+src=["']([^"']+)["']/i);
    if (!match) return null;
    return match[1].replace(/&amp;/g, '&');
  }

  function stripHtml(html: string): string {
    if (!html) return '';
    return html.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ').replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/\s+/g, ' ').trim();
  }

  function mapEntry(e: any): Article {
    return {
      id: e.id, title: e.title, feed: e.feed?.title || '', url: e.url,
      timeAgo: timeAgo(e.published_at), readingTime: `${e.reading_time || 1} min`,
      content: e.content || '', thumbnail: extractThumb(e.content),
      starred: e.starred || false, read: e.status === 'read',
      author: e.author || ''
    };
  }

  // ── API ──
  async function api(path: string, opts: RequestInit = {}) {
    const res = await fetch(`/api/reader${path}`, { credentials: 'include', ...opts });
    if (!res.ok) throw new Error(`${res.status}`);
    return res.json();
  }

  async function loadSidebar() {
    try {
      const [cats, feeds, counters] = await Promise.all([
        api('/categories'), api('/feeds'), api('/feeds/counters')
      ]);
      feedCounters = counters.unreads || {};
      totalUnread = Object.values(feedCounters).reduce((s: number, c: any) => s + (c as number), 0);

      feedCategories = cats.map((c: any) => ({
        id: c.id, name: c.title,
        expanded: false,
        feeds: feeds
          .filter((f: any) => f.category.id === c.id)
          .map((f: any) => ({ id: f.id, name: f.title, count: feedCounters[String(f.id)] || 0 }))
      })).filter((c: FeedCategory) => c.feeds.length > 0);

      // Expand first category
      if (feedCategories.length > 0) feedCategories[0].expanded = true;

      // Update nav counts
      navItems[0].count = totalUnread;
      try {
        const [starred, history] = await Promise.all([
          api('/entries?starred=true&limit=1'),
          api('/entries?status=read&limit=1')
        ]);
        navItems[1].count = starred.total || 0;
        navItems[2].count = history.total || 0;
      } catch { /* silent */ }
    } catch { /* silent */ }
  }

  async function loadEntries(append = false) {
    if (loadingMore) return;
    if (!append) { loading = true; articles = []; hasMore = true; }
    else loadingMore = true;

    try {
      let params = `limit=${LIMIT}&direction=desc&order=published_at`;
      if (!append) params += '&offset=0';
      else params += `&offset=${articles.length}`;

      if (activeFeedId) {
        params += `&feed_id=${activeFeedId}`;
      }

      if (activeNav === 'Today') {
        params += '&status=unread';
      } else if (activeNav === 'Starred') {
        params += '&starred=true';
      } else if (activeNav === 'History') {
        params += '&status=read';
      }

      const data = await api(`/entries?${params}`);
      const mapped = (data.entries || []).map(mapEntry);

      if (append) {
        articles = [...articles, ...mapped];
      } else {
        articles = mapped;
      }
      hasMore = mapped.length === LIMIT;
    } catch { /* silent */ }
    finally { loading = false; loadingMore = false; }
  }

  async function markEntryRead(id: number) {
    try {
      await api('/entries', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ entry_ids: [id], status: 'read' })
      });
    } catch { /* silent */ }
  }

  async function markEntryUnread(id: number) {
    try {
      await api('/entries', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ entry_ids: [id], status: 'unread' })
      });
    } catch { /* silent */ }
  }

  async function toggleStarAPI(id: number) {
    try {
      await api(`/entries/${id}/bookmark`, { method: 'PUT' });
    } catch { /* silent */ }
  }

  async function markAllReadAPI() {
    const ids = articles.filter(a => !a.read).map(a => a.id);
    if (!ids.length) return;
    try {
      await api('/entries', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ entry_ids: ids, status: 'read' })
      });
    } catch { /* silent */ }
  }

  // ── Karakeep ──
  let karakeepIds = $state<Record<number, string>>({});
  let savingToKarakeep = $state<Set<number>>(new Set());

  async function toggleKarakeep(article: Article, e?: Event) {
    e?.stopPropagation();
    e?.preventDefault();
    if (savingToKarakeep.has(article.id)) return;
    const articleUrl = article.url || '';
    console.log('Karakeep: saving', article.id, articleUrl);
    if (!articleUrl && !karakeepIds[article.id]) {
      console.log('Karakeep: no URL, skipping');
      return;
    }
    savingToKarakeep = new Set([...savingToKarakeep, article.id]);
    try {
      if (karakeepIds[article.id]) {
        const res = await fetch('/api/karakeep/delete', {
          method: 'POST', credentials: 'include',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id: karakeepIds[article.id] })
        });
        console.log('Karakeep delete:', res.status);
        const next = { ...karakeepIds };
        delete next[article.id];
        karakeepIds = next;
      } else {
        const res = await fetch('/api/karakeep/save', {
          method: 'POST', credentials: 'include',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ url: articleUrl })
        });
        const text = await res.text();
        console.log('Karakeep save:', res.status, text);
        try {
          const data = JSON.parse(text);
          if (res.ok && data.ok) {
            karakeepIds = { ...karakeepIds, [article.id]: data.id };
            console.log('Karakeep: saved as', data.id);
          }
        } catch { console.error('Karakeep: bad JSON response'); }
      }
    } catch (err) {
      console.error('Karakeep error:', err);
    } finally {
      const next = new Set(savingToKarakeep);
      next.delete(article.id);
      savingToKarakeep = next;
    }
  }

  // ── Touch to stop auto-scroll ──
  function handleScrollInterrupt() {
    if (autoScrollActive) stopAutoScroll();
  }

  // ── Event handlers ──
  function decrementUnread(count = 1) {
    totalUnread = Math.max(0, totalUnread - count);
    navItems[0].count = totalUnread;
    navItems = [...navItems];
  }

  const filteredArticles = $derived(articles);

  const currentIndex = $derived(
    selectedArticle ? filteredArticles.findIndex(a => a.id === selectedArticle!.id) : -1
  );

  function selectArticle(article: Article) {
    selectedArticle = article;
    if (!article.read) {
      article.read = true;
      articles = [...articles];
      markEntryRead(article.id);
      decrementUnread();
    }
  }

  function closeArticle() { selectedArticle = null; }

  function toggleStar(article: Article, e?: Event) {
    e?.stopPropagation();
    article.starred = !article.starred;
    articles = [...articles];
    toggleStarAPI(article.id);
  }

  function toggleRead(article: Article) {
    const wasRead = article.read;
    article.read = !article.read;
    articles = [...articles];
    if (article.read) { markEntryRead(article.id); decrementUnread(); }
    else { markEntryUnread(article.id); totalUnread++; navItems[0].count = totalUnread; navItems = [...navItems]; }
  }

  function markAllRead() {
    const unreadCount = articles.filter(a => !a.read).length;
    markAllReadAPI();
    articles = articles.map(a => ({ ...a, read: true }));
    decrementUnread(unreadCount);
  }

  function goNext() {
    if (currentIndex < filteredArticles.length - 1) selectArticle(filteredArticles[currentIndex + 1]);
  }
  function goPrev() {
    if (currentIndex > 0) selectArticle(filteredArticles[currentIndex - 1]);
  }

  function toggleCategory(index: number) {
    feedCategories[index].expanded = !feedCategories[index].expanded;
  }

  function selectFeed(feedId: number) {
    activeFeedId = feedId;
    activeNav = '';
    sidebarOpen = false;
    loadEntries();
  }

  function selectNav(label: string) {
    activeNav = label;
    activeFeedId = null;
    sidebarOpen = false;
    loadEntries();
  }

  // ── Auto-scroll (requestAnimationFrame for smoothness) ──
  function startAutoScroll() {
    if (scrollRAF) cancelAnimationFrame(scrollRAF);
    if (!articleListEl) return;
    autoScrollActive = true;
    function step() {
      if (!autoScrollActive || !articleListEl) return;
      articleListEl.scrollTop += autoScrollSpeed;
      scrollRAF = requestAnimationFrame(step);
    }
    scrollRAF = requestAnimationFrame(step);
  }
  function stopAutoScroll() {
    autoScrollActive = false;
    if (scrollRAF) { cancelAnimationFrame(scrollRAF); scrollRAF = null; }
  }
  function toggleAutoScroll() {
    if (autoScrollActive) stopAutoScroll();
    else startAutoScroll();
  }
  function adjustSpeed(delta: number) {
    autoScrollSpeed = Math.max(0.5, Math.min(5, +(autoScrollSpeed + delta).toFixed(1)));
  }

  function handleKeydown(e: KeyboardEvent) {
    if (e.key === 'j' || e.key === 'ArrowDown') { e.preventDefault(); goNext(); }
    if (e.key === 'k' || e.key === 'ArrowUp') { e.preventDefault(); goPrev(); }
    if (e.key === 'Escape' && selectedArticle) { closeArticle(); }
    if (e.key === 's' && selectedArticle) { toggleStar(selectedArticle); }
    if (e.key === 'm' && selectedArticle) { toggleRead(selectedArticle); }
  }

  // ── Mark-as-read on scroll (throttled to avoid jitter) ──
  let pendingReadIds: number[] = [];
  let flushTimer: ReturnType<typeof setTimeout> | null = null;
  let scrollCheckTimer: ReturnType<typeof setTimeout> | null = null;

  function handleListScroll() {
    // Throttle: only check every 400ms
    if (scrollCheckTimer) return;
    scrollCheckTimer = setTimeout(() => {
      scrollCheckTimer = null;
      checkScrolledCards();
    }, 400);
  }

  function checkScrolledCards() {
    if (!articleListEl) return;

    // Infinite scroll — load more when near bottom
    const { scrollTop, scrollHeight, clientHeight } = articleListEl;
    if (hasMore && !loadingMore && scrollHeight - scrollTop - clientHeight < 300) {
      loadEntries(true);
    }

    const listTop = articleListEl.getBoundingClientRect().top;
    const cards = articleListEl.querySelectorAll('[data-entry-id]');
    let newlyRead = 0;

    cards.forEach(card => {
      if (card.getBoundingClientRect().bottom < listTop + 20) {
        const id = Number(card.getAttribute('data-entry-id'));
        if (!id) return;
        const article = articles.find(a => a.id === id);
        if (article && !article.read) {
          article.read = true;
          pendingReadIds.push(id);
          newlyRead++;
        }
      }
    });

    if (newlyRead > 0) {
      articles = [...articles];
      decrementUnread(newlyRead);
      if (flushTimer) clearTimeout(flushTimer);
      flushTimer = setTimeout(flushPendingReads, 1000);
    }
  }

  async function flushPendingReads() {
    if (!pendingReadIds.length) return;
    const ids = [...pendingReadIds];
    pendingReadIds = [];
    try {
      await api('/entries', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ entry_ids: ids, status: 'read' })
      });
    } catch { /* silent */ }
  }

  // ── Init ──
  onMount(() => {
    loadSidebar();
    loadEntries();
    return () => {
      if (flushTimer) clearTimeout(flushTimer);
    };
  });
</script>

<svelte:window onkeydown={handleKeydown} />

<div class="reader-layout">

  <!-- Left Sidebar -->
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <aside class="reader-sidebar" class:open={sidebarOpen}>
    <div class="sidebar-header">
      <svg class="rss-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
      <span class="sidebar-title">Reader</span>
    </div>

    <nav class="sidebar-nav">
      {#each navItems as item}
        <button
          class="nav-item"
          class:active={activeNav === item.label}
          onclick={() => selectNav(item.label)}
        >
          <div class="nav-icon">
            {#if item.icon === 'inbox'}
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
            {:else if item.icon === 'calendar'}
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            {:else if item.icon === 'star'}
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
            {:else}
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            {/if}
          </div>
          <span class="nav-label">{item.label}</span>
          {#if item.count > 0}
            <span class="nav-count">{item.count}</span>
          {/if}
        </button>
      {/each}
    </nav>

    <div class="sidebar-separator"></div>

    <div class="feeds-section">
      <div class="feeds-header">Feeds</div>
      {#each feedCategories as cat, i}
        <div class="feed-category">
          <button class="category-toggle" onclick={() => toggleCategory(i)}>
            <svg class="expand-icon" class:expanded={cat.expanded} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
            <span class="category-name">{cat.name}</span>
            <span class="category-count">{cat.feeds.reduce((s, f) => s + f.count, 0)}</span>
          </button>
          {#if cat.expanded}
            <div class="feed-list">
              {#each cat.feeds as feed}
                <button class="feed-item" onclick={() => selectFeed(feed.id || 0)}>
                  <span class="feed-name">{feed.name}</span>
                  {#if feed.count > 0}
                    <span class="feed-count">{feed.count}</span>
                  {/if}
                </button>
              {/each}
            </div>
          {/if}
        </div>
      {/each}
    </div>
  </aside>

  <!-- Sidebar overlay for mobile -->
  {#if sidebarOpen}
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <div class="sidebar-overlay" onclick={() => sidebarOpen = false}></div>
  {/if}

  <!-- Middle Panel: Article List -->
  <div class="reader-list">
    <div class="list-header">
      <div class="list-header-top">
        <button class="mobile-menu" onclick={() => sidebarOpen = !sidebarOpen} aria-label="Toggle sidebar">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
        </button>
        <div class="list-view-name">{activeFeedId ? feedCategories.flatMap(c => c.feeds).find(f => f.id === activeFeedId)?.name || 'Feed' : activeNav} <span class="list-count">{activeNav === 'Today' && !activeFeedId ? totalUnread : filteredArticles.length}</span></div>
        <div class="list-actions">
          <button class="btn-icon" title="Refresh">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
          </button>
          <button class="btn-icon" title="Mark all read" onclick={markAllRead}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
          </button>
          <button class="btn-icon" class:active-icon={autoScrollActive} onclick={toggleAutoScroll} title="Auto-scroll feed">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14"/><path d="M19 12l-7 7-7-7"/></svg>
          </button>
          {#if autoScrollActive}
            <div class="speed-control">
              <button class="speed-btn" onclick={() => adjustSpeed(-0.5)}>-</button>
              <span class="speed-value">{autoScrollSpeed}x</span>
              <button class="speed-btn" onclick={() => adjustSpeed(0.5)}>+</button>
            </div>
          {/if}
        </div>
      </div>
    </div>

    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <div class="article-list" bind:this={articleListEl} ontouchstart={handleScrollInterrupt} onwheel={handleScrollInterrupt} onscroll={handleListScroll}>
      {#each filteredArticles as article (article.id)}
        <!-- svelte-ignore a11y_no_static_element_interactions -->
        <div
          class="article-card"
          class:selected={selectedArticle?.id === article.id}
          class:is-read={article.read}
          data-entry-id={article.id}
          onclick={() => selectArticle(article)}
        >
          <!-- Card header: source + time + actions -->
          <div class="card-header">
            <div class="card-source">
              <svg class="card-rss" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
              <span class="card-feed-name">{article.feed}</span>
              {#if article.author}
                <span class="card-author">· {article.author}</span>
              {/if}
            </div>
            <div class="card-header-right">
              <button class="bookmark-btn" class:saved={!!karakeepIds[article.id]} onclick={(e) => toggleKarakeep(article, e)} title={karakeepIds[article.id] ? 'Saved to Karakeep' : 'Save to Karakeep'}>
                {#if savingToKarakeep.has(article.id)}
                  <svg class="spinning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
                {:else}
                  <svg viewBox="0 0 24 24" fill={karakeepIds[article.id] ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
                {/if}
              </button>
              <span class="card-time">{article.timeAgo}</span>
            </div>
          </div>

          <!-- Title -->
          <div class="card-title">{article.title}</div>

          <!-- Banner image -->
          {#if article.thumbnail}
            <div class="card-banner" style="background-image:url('{article.thumbnail}')"></div>
          {/if}

          <!-- Preview text -->
          <div class="card-preview">{stripHtml(article.content).slice(0, 200)}</div>

          <!-- Footer -->
          <div class="card-footer">
            <span class="card-reading-time">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
              {article.readingTime}
            </span>
          </div>
        </div>
      {/each}
      {#if filteredArticles.length === 0}
        <div class="list-empty">No articles to show</div>
      {/if}
    </div>
  </div>
</div>

<!-- Reading pane — slide-in overlay -->
{#if selectedArticle}
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <div class="pane-overlay" onclick={closeArticle}>
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <div class="pane-sheet" onclick={(e) => e.stopPropagation()}>
      <div class="pane-toolbar">
        <div class="pane-nav">
          <button class="pane-nav-btn" onclick={closeArticle} title="Close (Esc)">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
          <button class="pane-nav-btn" onclick={goPrev} disabled={currentIndex <= 0} title="Previous (k)">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
          </button>
          <span class="pane-nav-pos">{currentIndex + 1} / {filteredArticles.length}</span>
          <button class="pane-nav-btn" onclick={goNext} disabled={currentIndex >= filteredArticles.length - 1} title="Next (j)">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
          </button>
        </div>
        <div class="pane-actions">
          <button class="pane-action-btn" class:saved-karakeep={!!karakeepIds[selectedArticle.id]} onclick={() => toggleKarakeep(selectedArticle!)} title={karakeepIds[selectedArticle.id] ? 'Saved to Karakeep' : 'Save to Karakeep'}>
            {#if savingToKarakeep.has(selectedArticle.id)}
              <svg class="spinning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
            {:else}
              <svg viewBox="0 0 24 24" fill={karakeepIds[selectedArticle.id] ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
            {/if}
          </button>
          <button class="pane-action-btn" onclick={() => toggleRead(selectedArticle!)} title="Toggle read (m)">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
          </button>
          {#if selectedArticle.url}
            <a href={selectedArticle.url} target="_blank" rel="noopener" class="pane-action-btn" title="Open original">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
            </a>
          {/if}
        </div>
      </div>

      <div class="pane-scroll">
        <div class="pane-content">
          <h1 class="pane-title">{selectedArticle.title}</h1>
          <div class="pane-meta">
            <span class="pane-source">{selectedArticle.feed}</span>
            <span class="pane-dot"></span>
            <span>{selectedArticle.timeAgo}</span>
            <span class="pane-dot"></span>
            <span>{selectedArticle.readingTime} read</span>
            {#if selectedArticle.author}
              <span class="pane-dot"></span>
              <span class="pane-author">by {selectedArticle.author}</span>
            {/if}
          </div>
          <div class="pane-body">
            {@html selectedArticle.content}
          </div>
        </div>
      </div>
    </div>
  </div>
{/if}

<style>
  .reader-layout {
    display: flex; height: calc(100vh - 56px);
    overflow: hidden; position: relative;
  }

  /* ── Mobile menu ── */
  .mobile-menu {
    display: none; width: 30px; height: 30px; border-radius: var(--radius-sm);
    background: none; border: 1px solid var(--border);
    align-items: center; justify-content: center; cursor: pointer;
    flex-shrink: 0; transition: all var(--transition);
  }
  .mobile-menu:hover { background: var(--card-hover); }
  .mobile-menu svg { width: 16px; height: 16px; color: var(--text-3); }

  /* ── Sidebar ── */
  .reader-sidebar {
    width: 220px; flex-shrink: 0; background: var(--surface);
    border-right: 1px solid var(--border); display: flex;
    flex-direction: column; overflow-y: auto; padding: var(--sp-4) 0 var(--sp-3);
  }
  .sidebar-header { display: flex; align-items: center; gap: 7px; padding: 0 16px 12px; }
  .rss-icon { width: 16px; height: 16px; color: var(--accent); }
  .sidebar-title { font-size: var(--text-base); font-weight: 600; color: var(--text-1); }

  .sidebar-nav { display: flex; flex-direction: column; gap: var(--sp-0.5); padding: 0 10px; }
  .nav-item {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) 10px; border-radius: var(--radius-sm); background: none; border: none;
    font-size: var(--text-sm); color: var(--text-3); cursor: pointer;
    transition: all var(--transition); text-align: left; width: 100%; font-family: var(--font);
  }
  .nav-item:hover { background: var(--card-hover); color: var(--text-1); }
  .nav-item.active { background: none; color: var(--accent); font-weight: 600; border-left: 2px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-left: 8px; }
  .nav-icon { width: 15px; height: 15px; flex-shrink: 0; }
  .nav-icon svg { width: 15px; height: 15px; }
  .nav-label { flex: 1; }
  .nav-count { font-size: var(--text-xs); color: var(--text-4); font-family: var(--mono); }
  .nav-item.active .nav-count { color: var(--accent); opacity: 0.7; }

  .sidebar-separator { height: 1px; background: var(--border); margin: 10px 16px; }

  .feeds-section { padding: 0 10px; flex: 1; }
  .feeds-header { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-4); padding: 4px 10px 6px; }
  .feed-category { margin-bottom: 1px; }
  .category-toggle {
    display: flex; align-items: center; gap: 5px; width: 100%;
    padding: 5px 10px; background: none; border: none; font-size: var(--text-sm);
    font-weight: 500; color: var(--text-2); cursor: pointer; border-radius: var(--radius-sm);
    transition: all var(--transition); font-family: var(--font);
  }
  .category-toggle:hover { background: var(--card-hover); }
  .category-name { flex: 1; text-align: left; }
  .category-count { font-size: var(--text-xs); color: var(--text-4); font-family: var(--mono); }
  .expand-icon { width: 11px; height: 11px; transition: transform var(--transition); flex-shrink: 0; color: var(--text-4); }
  .expand-icon.expanded { transform: rotate(90deg); }

  .feed-list { padding-left: var(--sp-4); }
  .feed-item {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 4px 10px; background: none; border: none; font-size: var(--text-sm);
    color: var(--text-3); cursor: pointer; border-radius: var(--radius-sm);
    transition: all var(--transition); text-align: left; font-family: var(--font);
  }
  .feed-item:hover { background: var(--card-hover); color: var(--text-1); }
  .feed-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .feed-count { font-size: var(--text-xs); font-family: var(--mono); color: var(--text-4); flex-shrink: 0; margin-left: var(--sp-1.5); }

  .sidebar-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 39; }

  /* ── Feed list panel ── */
  .reader-list {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; background: var(--canvas);
  }
  .list-header { padding: 12px 20px 10px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .list-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
  .list-view-name { font-size: var(--text-base); font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: var(--sp-1.5); }
  .list-count { font-size: var(--text-xs); font-weight: 400; color: var(--text-4); font-family: var(--mono); }
  .list-actions { display: flex; gap: var(--sp-1); }
  .btn-icon { width: 30px; height: 30px; border-radius: var(--radius-sm); background: none; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-3); transition: all var(--transition); }
  .btn-icon:hover { color: var(--text-1); background: var(--card-hover); }
  .btn-icon.active-icon { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
  .btn-icon svg { width: 14px; height: 14px; }

  .list-filters { display: flex; gap: var(--sp-1); }
  .filter-btn {
    padding: 4px 10px 6px; border-radius: 0; background: none;
    border: none; border-bottom: 2px solid transparent; font-size: var(--text-sm); font-weight: 500;
    color: var(--text-3); cursor: pointer; transition: all var(--transition); font-family: var(--font);
    position: relative;
  }
  .filter-btn:hover { color: var(--text-2); }
  .filter-btn.active { color: var(--text-1); font-weight: 600; border-bottom-color: var(--accent); }

  .speed-control { display: flex; align-items: center; gap: var(--sp-0.5); margin-left: var(--sp-1); }
  .speed-btn {
    width: 22px; height: 22px; border-radius: var(--radius-xs); background: var(--card);
    border: 1px solid var(--border); font-size: var(--text-sm); font-weight: 600;
    color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .speed-btn:hover { color: var(--text-1); }
  .speed-value { font-size: var(--text-xs); font-family: var(--mono); color: var(--text-2); min-width: 24px; text-align: center; }

  /* ── Article cards (feed style) ── */
  .article-list { flex: 1; overflow-y: auto; padding: var(--sp-2) var(--sp-5) var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-2); }
  .article-card {
    padding: 14px 16px; border-radius: var(--radius);
    background: var(--card); border: none;
    box-shadow: var(--card-shadow-sm);
    cursor: pointer; transition: all var(--transition);
  }
  .article-card:hover { box-shadow: var(--card-shadow); transform: translateY(-1px); }
  .article-card.selected { box-shadow: 0 0 0 1.5px var(--accent); }
  .article-card.is-read { opacity: 0.6; }
  .article-card.is-read .card-title { color: var(--text-3); }
  .article-card.is-read .card-preview { color: var(--text-4); }
  .article-card.is-read:hover { opacity: 0.8; }

  .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
  .card-source { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); color: var(--text-3); font-weight: 500; min-width: 0; }
  .card-rss { width: 12px; height: 12px; color: var(--text-4); flex-shrink: 0; }
  .card-feed-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card-author { color: var(--text-4); font-weight: 400; white-space: nowrap; }
  .card-header-right { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
  .card-time { font-size: var(--text-xs); color: var(--text-4); }
  .star-btn {
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; color: var(--text-4); border-radius: var(--radius-sm);
    transition: all var(--transition); opacity: 0;
  }
  .article-card:hover .star-btn { opacity: 1; }
  .star-btn.starred { opacity: 1; color: #F59E0B; }
  .star-btn:hover { color: #F59E0B; }
  .star-btn svg { width: 13px; height: 13px; }

  .bookmark-btn {
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; color: var(--text-4); border-radius: var(--radius-sm);
    transition: all var(--transition); opacity: 0.5;
  }
  .article-card:hover .bookmark-btn { opacity: 0.8; }
  .bookmark-btn.saved { opacity: 1; color: #F59E0B; }
  .bookmark-btn:hover { opacity: 1; color: #F59E0B; }
  .bookmark-btn svg { width: 13px; height: 13px; }

  .spinning { animation: spin 0.8s linear infinite; }
  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  .card-title { font-size: var(--text-md); font-weight: 600; color: var(--text-1); line-height: 1.35; margin-bottom: var(--sp-1.5); }
  .card-banner { width: 100%; height: 160px; border-radius: var(--radius-md); background: var(--card-hover) center/cover no-repeat; margin-bottom: var(--sp-2); }
  .card-preview { font-size: var(--text-sm); color: var(--text-3); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--sp-1); }
  .card-footer { display: flex; align-items: center; gap: var(--sp-2); }
  .card-reading-time { display: flex; align-items: center; gap: 3px; font-size: var(--text-xs); color: var(--text-4); }
  .card-reading-time svg { width: 11px; height: 11px; }
  .list-empty { padding: var(--sp-10); text-align: center; color: var(--text-3); font-size: var(--text-sm); }

  /* ── Reading pane (slide-in sheet) ── */
  .pane-overlay {
    position: fixed; inset: 0; background: var(--overlay); z-index: 60;
    display: flex; justify-content: flex-end; animation: paneFadeIn 150ms ease;
  }
  @keyframes paneFadeIn { from { opacity: 0; } to { opacity: 1; } }
  .pane-sheet {
    width: 620px; max-width: 100%; height: 100%; background: var(--card);
    display: flex; flex-direction: column;
    border-left: 1px solid var(--border);
    box-shadow: -6px 0 28px rgba(0,0,0,0.08);
    animation: paneSlideIn 200ms ease;
  }
  @keyframes paneSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
  .pane-scroll { flex: 1; overflow-y: auto; }

  .pane-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); flex-shrink: 0;
  }
  .pane-nav { display: flex; align-items: center; gap: var(--sp-1); }
  .pane-nav-btn {
    width: 32px; height: 32px; border-radius: var(--radius-sm); background: none;
    border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-3); transition: all var(--transition);
  }
  .pane-nav-btn:hover { color: var(--text-1); background: var(--card-hover); }
  .pane-nav-btn:disabled { opacity: 0.25; cursor: default; }
  .pane-nav-btn svg { width: 14px; height: 14px; }
  .pane-nav-pos { font-size: var(--text-xs); color: var(--text-4); font-family: var(--mono); min-width: 44px; text-align: center; }

  .pane-actions { display: flex; align-items: center; gap: var(--sp-0.5); }
  .pane-action-btn {
    width: 32px; height: 32px; border-radius: var(--radius-sm); background: none;
    border: none; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-3); transition: all var(--transition); text-decoration: none;
  }
  .pane-action-btn:hover { color: var(--text-1); background: var(--card-hover); }
  .pane-action-btn.active { color: var(--accent); }
  .pane-action-btn.saved-karakeep { color: #F59E0B; }
  .pane-action-btn svg { width: 15px; height: 15px; }

  .pane-content { max-width: 640px; margin: 0 auto; padding: var(--sp-8) 36px var(--sp-20); }
  .pane-title { font-size: var(--text-xl); font-weight: 600; line-height: 1.3; color: var(--text-1); margin: 0 0 var(--sp-3); letter-spacing: -0.01em; }
  .pane-meta {
    display: flex; align-items: center; gap: var(--sp-1.5); flex-wrap: wrap;
    font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border);
  }
  .pane-source { font-weight: 500; color: var(--text-2); }
  .pane-author { font-style: italic; }
  .pane-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-4); }
  .pane-body { font-size: var(--text-md); line-height: 1.85; color: var(--text-3); }
  .pane-body :global(p) { margin-bottom: 18px; }
  .pane-body :global(img) { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--sp-3) 0; }
  .pane-body :global(a) { color: var(--accent); text-decoration: underline; }
  .pane-body :global(a:hover) { opacity: 0.8; }
  .pane-body :global(blockquote) { border-left: 3px solid var(--border); padding-left: var(--sp-4); margin: var(--sp-4) 0; color: var(--text-3); font-style: italic; }
  .pane-body :global(pre) { background: var(--surface-secondary); padding: 14px; border-radius: var(--radius-md); overflow-x: auto; font-size: var(--text-sm); font-family: var(--mono); margin: var(--sp-4) 0; }
  .pane-body :global(code) { font-family: var(--mono); font-size: 0.9em; }
  .pane-body :global(h1), .pane-body :global(h2), .pane-body :global(h3) { color: var(--text-1); margin: 20px 0 10px; }
  .pane-body :global(ul), .pane-body :global(ol) { padding-left: var(--sp-5); margin-bottom: var(--sp-4); }
  .pane-body :global(li) { margin-bottom: var(--sp-1.5); }

  /* ── Responsive ── */
  @media (max-width: 1024px) {
    .reader-sidebar { display: none; }
    .reader-sidebar.open { display: flex; position: fixed; left: 0; top: 56px; bottom: 0; z-index: 40; box-shadow: 8px 0 24px rgba(0,0,0,0.08); }
    .mobile-menu { display: flex; }
  }
  @media (max-width: 768px) {
    .reader-layout { height: calc(100vh - 56px); }
    .reader-sidebar { display: none; }
    .reader-sidebar.open { display: flex; position: fixed; left: 0; top: 56px; bottom: 0; z-index: 40; box-shadow: 8px 0 24px rgba(0,0,0,0.08); width: 260px; }
    .mobile-menu { display: flex; }
    .article-list { padding: var(--sp-1.5) var(--sp-3) var(--sp-20); gap: var(--sp-1.5); }
    .article-card { padding: 12px 14px; }
    .card-title { font-size: var(--text-base); }
    .card-banner { height: 130px; border-radius: var(--radius-sm); }
    .card-preview { -webkit-line-clamp: 2; }
    .pane-sheet { width: 100%; }
    .pane-content { padding: 20px 18px 80px; }
    .pane-title { font-size: var(--text-lg); }
    .pane-body { font-size: var(--text-md); line-height: 1.75; }
    .pane-toolbar { padding: 8px 14px; }
    .list-header { padding: 10px 14px 8px; }
  }
</style>
