// Catch Up v2 — Magazine grid variant with redesigned sidebar.
// Rendered as a standalone artboard, doesn't modify Editorial.

// ─── Sidebar v2: Collections at top, no Library section, collapsible ───
function SidebarV2({ activePage, onPage, activeCollection, onCollection, collapsed, onToggleCollapse }) {
  if (collapsed) {
    return (
      <aside className="sidebar sidebar-collapsed" style={{width:52, padding:'12px 6px', alignItems:'center', gap:8}}>
        <button className="btn-icon" onClick={onToggleCollapse} style={{marginBottom:8}}>
          <I.ChevronRight className="icon icon-sm" />
        </button>
        <button className={`btn-icon ${activePage === 'catchup' ? 'active-icon' : ''}`} onClick={() => onPage('catchup')} style={{color: activePage==='catchup' ? 'var(--blue)' : 'var(--text-3)'}}>
          <I.Sparkle className="icon icon-sm" />
        </button>
        <button className={`btn-icon ${activePage === 'bookmarks' ? 'active-icon' : ''}`} onClick={() => onPage('bookmarks')} style={{color: activePage==='bookmarks' ? 'var(--blue)' : 'var(--text-3)'}}>
          <I.Bookmark className="icon icon-sm" />
        </button>
        <div style={{flex:1}} />
        {SAMPLE.collections.filter(c => !c.parentId && c.id !== 'inbox').slice(0, 5).map(c => (
          <button key={c.id} className="btn-icon tooltip-host" data-tip={c.name} onClick={() => onCollection(c.id)}>
            <span style={{width:8, height:8, borderRadius:2, background: c.color, display:'block'}} />
          </button>
        ))}
        <div style={{flex:1}} />
        <button className="btn-icon" style={{color:'var(--text-4)'}}><I.Archive className="icon icon-sm" /></button>
        <button className="btn-icon" style={{color:'var(--text-4)'}}><I.Upload className="icon icon-sm" /></button>
      </aside>
    );
  }

  return (
    <aside className="sidebar">
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'0 8px 8px 12px'}}>
        <span style={{fontSize:10, fontWeight:700, color:'var(--text-4)', letterSpacing:'0.08em', textTransform:'uppercase'}}>Navigate</span>
        <button className="btn-icon" onClick={onToggleCollapse} style={{width:24, height:24}}>
          <I.ChevronRight className="icon icon-xs" style={{transform:'rotate(180deg)'}} />
        </button>
      </div>

      <div className="sb-section">
        <a className={`sb-item ${activePage === 'catchup' && !activeCollection ? 'active' : ''}`} onClick={() => onPage('catchup')}>
          <I.Sparkle className="icon icon-sm" /> Catch Up
        </a>
        <a className={`sb-item ${activePage === 'bookmarks' && !activeCollection ? 'active' : ''}`} onClick={() => onPage('bookmarks')}>
          <I.Bookmark className="icon icon-sm" /> All Bookmarks <span className="count">{SAMPLE.bookmarks.length}</span>
        </a>
      </div>

      <div className="sb-section" style={{flex:1}}>
        <div className="sb-label">
          <span>Collections</span>
          <button className="add-btn tooltip-host" data-tip="New collection"><I.PlusSm /></button>
        </div>
        <SidebarCollections activeCollection={activeCollection} onCollection={onCollection} />
      </div>

      <div className="sb-footer">
        <a className="sb-item" onClick={() => onPage('archive')}>
          <I.Archive className="icon icon-sm" style={{width:12, height:12}} /> Archive
        </a>
        <a className="sb-item"><I.Upload className="icon icon-sm" style={{width:12, height:12}} /> Bulk Upload</a>
        <a className="sb-item">Reading Log</a>
        <a className="sb-item">About</a>
      </div>
    </aside>
  );
}

// ─── Magazine Catch Up page ───
function CatchUpMagazine({ onOpenBookmark, onPage }) {
  const [mediaTab, setMediaTab] = React.useState('all');

  const mediaTabs = [
    { id: 'all',    label: 'All' },
    { id: 'read',   label: 'Read' },
    { id: 'watch',  label: 'Watch' },
    { id: 'listen', label: 'Listen' },
    { id: 'other',  label: 'Other' },
  ];

  const allBookmarks = SAMPLE.bookmarks.filter(b => b.status === 'unread' || b.status === 'in-progress');
  const filtered = mediaTab === 'all' ? allBookmarks
    : mediaTab === 'watch' ? allBookmarks.filter(b => b.type === 'video')
    : mediaTab === 'read' ? allBookmarks.filter(b => b.type === 'article' || b.type === 'pdf')
    : mediaTab === 'listen' ? [] // placeholder
    : allBookmarks.filter(b => b.type === 'tweet');

  const hero = filtered[0];
  const rest = filtered.slice(1, 7);
  const remaining = filtered.slice(7);

  return (
    <div className="main-inner" style={{maxWidth:1000}}>
      {/* Header — greeting + actions inline */}
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:24, gap:16}}>
        <h1 className="page-title" style={{margin:0}}>Good afternoon, Bilal</h1>
        <div style={{display:'flex', alignItems:'center', gap:8}}>
          <button className="btn btn-ghost btn-sm"><I.Sparkle className="icon icon-sm" /> Daily digest</button>
          <button className="btn btn-primary btn-sm"><I.Plus className="icon icon-sm" /> Add bookmark</button>
        </div>
      </div>

      {/* Media tabs */}
      <div className="media-tabs" style={{marginBottom:20}}>
        {mediaTabs.map(t => (
          <a
            key={t.id}
            className={`media-tab ${mediaTab === t.id ? 'active' : ''}`}
            onClick={() => setMediaTab(t.id)}
          >
            {t.label}
          </a>
        ))}
      </div>

      {/* Magazine grid: hero (2/3 width) + 2 stacked (1/3 width) */}
      {hero && (
        <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:12, marginBottom:20}}>
          {/* Hero card */}
          <MagCard bookmark={hero} size="hero" onClick={() => onOpenBookmark(hero.id)} />
          {/* Two stacked */}
          <div style={{display:'flex', flexDirection:'column', gap:12}}>
            {rest.slice(0, 2).map(b => (
              <MagCard key={b.id} bookmark={b} size="small" onClick={() => onOpenBookmark(b.id)} />
            ))}
          </div>
        </div>
      )}

      {/* Second row — 3 equal cards */}
      {rest.length > 2 && (
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:12, marginBottom:20}}>
          {rest.slice(2, 5).map(b => (
            <MagCard key={b.id} bookmark={b} size="medium" onClick={() => onOpenBookmark(b.id)} />
          ))}
        </div>
      )}

      {/* Third row — 2 wide cards */}
      {rest.length > 5 && (
        <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:12, marginBottom:24}}>
          {rest.slice(5).map(b => (
            <MagCard key={b.id} bookmark={b} size="wide" onClick={() => onOpenBookmark(b.id)} />
          ))}
        </div>
      )}

      {/* Continue reading — compact list */}
      {remaining.length > 0 && (
        <>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12}}>
            <div style={{fontSize:11, fontWeight:700, color:'var(--text-4)', letterSpacing:'0.08em', textTransform:'uppercase'}}>More to catch up on</div>
            <button className="btn btn-bare btn-sm" onClick={()=>onPage('bookmarks')}>View all <I.ArrowRight className="icon icon-xs" /></button>
          </div>
          <div className="bookmark-list">
            {remaining.slice(0, 5).map((b, i) => (
              <BookmarkRow key={b.id} b={b} idx={i} selected={false} onSelect={()=>{}} onClick={() => onOpenBookmark(b.id)} />
            ))}
          </div>
        </>
      )}

      <div style={{height:48}} />
    </div>
  );
}

// ─── Magazine card component ───
function MagCard({ bookmark: b, size, onClick }) {
  const collection = SAMPLE.collections.find(c => c.id === b.collection);
  const isHero = size === 'hero';
  const isSmall = size === 'small';

  // Deterministic pattern background derived from thumbColor
  const patternBg = `linear-gradient(145deg, ${b.thumbColor}18 0%, ${b.thumbColor}08 50%, var(--surface-2) 100%)`;

  return (
    <div
      className="mag-card card"
      onClick={onClick}
      style={{
        cursor:'pointer',
        overflow:'hidden',
        display:'flex',
        flexDirection:'column',
        transition:'box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease)',
        minHeight: isHero ? 280 : isSmall ? 130 : 200,
      }}
      onMouseEnter={e => { e.currentTarget.style.boxShadow='var(--shadow-sm)'; e.currentTarget.style.transform='translateY(-2px)'; }}
      onMouseLeave={e => { e.currentTarget.style.boxShadow='none'; e.currentTarget.style.transform='translateY(0)'; }}
    >
      {/* Visual header area */}
      <div style={{
        background: patternBg,
        padding: isHero ? '28px 24px 18px' : isSmall ? '14px 16px 10px' : '20px 18px 14px',
        flex: isHero ? '0 0 auto' : isSmall ? '0 0 auto' : '0 0 auto',
        position:'relative',
      }}>
        <div style={{display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:8}}>
          <div className="b-thumb" style={{
            background: b.thumbColor + '33', color: b.thumbColor,
            width: isHero ? 44 : 32, height: isHero ? 44 : 32,
            fontSize: isHero ? 14 : 11,
            borderRadius: isHero ? 10 : 7,
          }}>{b.thumb}</div>
          <StatusPill status={b.status} />
        </div>
      </div>

      {/* Content */}
      <div style={{padding: isHero ? '14px 24px 20px' : isSmall ? '10px 16px 14px' : '12px 18px 16px', flex:1, display:'flex', flexDirection:'column', gap:6}}>
        <div style={{
          fontSize: isHero ? 18 : isSmall ? 13 : 14,
          fontWeight: 600,
          color: 'var(--text-1)',
          letterSpacing: '-0.01em',
          lineHeight: 1.3,
          display: '-webkit-box',
          WebkitLineClamp: isHero ? 3 : 2,
          WebkitBoxOrient: 'vertical',
          overflow: 'hidden',
        }}>{b.title}</div>

        {(isHero || size === 'medium' || size === 'wide') && b.ai_summary && (
          <div style={{
            fontSize: isHero ? 13 : 12,
            color: 'var(--text-3)',
            lineHeight: 1.5,
            display: '-webkit-box',
            WebkitLineClamp: isHero ? 3 : 2,
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden',
          }}>{b.ai_summary}</div>
        )}

        <div style={{marginTop:'auto', display:'flex', alignItems:'center', gap:6, flexWrap:'wrap', paddingTop:4}}>
          <TypeIcon type={b.type} />
          <span style={{fontSize:11, color:'var(--text-4)'}}>{b.domain}</span>
          {collection && (
            <>
              <span style={{fontSize:10, color:'var(--text-4)'}}>·</span>
              <span className="collection-chip"><I.Folder /> {collection.name}</span>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// ─── V2 App shell (uses SidebarV2 + CatchUpMagazine) ───
function TroveAppV2({ initialPage }) {
  const [page, setPage] = React.useState(initialPage || 'catchup');
  const [collection, setCollection] = React.useState(null);
  const [theme, setTheme] = React.useState('light');
  const [openBookmark, setOpenBookmark] = React.useState(null);
  const [cmdkOpen, setCmdkOpen] = React.useState(false);
  const [quickAddOpen, setQuickAddOpen] = React.useState(false);
  const [aiOpen, setAiOpen] = React.useState(false);
  const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);

  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault(); setCmdkOpen(o => !o);
      }
      if (e.key === 'Escape') { setCmdkOpen(false); setQuickAddOpen(false); setAiOpen(false); }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const onTab = (id) => { setPage(id); setCollection(null); setOpenBookmark(null); };
  const onSidebar = (id) => { setPage(id); setCollection(null); setOpenBookmark(null); };
  const onCol = (id) => { setPage('collections'); setCollection(id); setOpenBookmark(null); };

  let activeTab = page === 'bookmarks' ? 'bookmarks'
                : page === 'collections' ? 'collections'
                : 'catchup';

  return (
    <div className="app" data-theme={theme} style={{height:'100%'}}>
      <TopNav
        activeTab={activeTab}
        onTab={onTab}
        theme={theme}
        onTheme={() => setTheme(t => t === 'light' ? 'dark' : 'light')}
        onSearchClick={() => setCmdkOpen(true)}
        aiOpen={aiOpen}
        onToggleAI={() => setAiOpen(o => !o)}
      />
      <div className="body">
        <SidebarV2
          activePage={page}
          onPage={onSidebar}
          activeCollection={collection}
          onCollection={onCol}
          collapsed={sidebarCollapsed}
          onToggleCollapse={() => setSidebarCollapsed(c => !c)}
        />
        <main className="main">
          {page === 'catchup'
            ? <CatchUpMagazine onOpenBookmark={(id) => setOpenBookmark(id)} onPage={onSidebar} />
            : page === 'bookmarks'
              ? <BookmarksPage onOpenBookmark={(id) => setOpenBookmark(id)} collectionFilter={collection} />
              : page === 'collections'
                ? <CollectionsPage onOpenCollection={onCol} />
                : null
          }
        </main>
      </div>
      <CommandPalette open={cmdkOpen} onClose={() => setCmdkOpen(false)} onAction={(a) => {
        if (a === 'add') setQuickAddOpen(true);
        if (a === 'theme') setTheme(t => t === 'light' ? 'dark' : 'light');
      }} />
      <QuickAddModal open={quickAddOpen} onClose={() => setQuickAddOpen(false)} />
      {aiOpen && <TroveAIPanel onClose={() => setAiOpen(false)} />}
    </div>
  );
}

window.TroveAppV2 = TroveAppV2;
window.CatchUpMagazine = CatchUpMagazine;
window.SidebarV2 = SidebarV2;
window.MagCard = MagCard;