// Catch Up (dashboard) page

function CatchUp({ onOpenBookmark, onPage }) {
  // Brand logo icon components
  const LinkedInIcon = (p) =>
  <svg viewBox="0 0 24 24" className={`icon ${p.className || ''}`} {...p} fill="currentColor" stroke="none">
      <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z" style={{ fill: "rgb(10, 102, 194)", strokeWidth: "1px" }} />
    </svg>;

  const XIcon = (p) =>
  <svg viewBox="0 0 24 24" className={`icon ${p.className || ''}`} {...p} fill="currentColor" stroke="none">
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" style={{ fill: "rgb(83, 100, 113)", strokeWidth: "1px" }} />
    </svg>;

  const SubstackIcon = (p) =>
  <svg viewBox="0 0 24 24" className={`icon ${p.className || ''}`} {...p} fill="none" stroke="none">
      {/* Three equal-width bars: top, middle, bottom — all spanning x 1.46→22.54 */}
      <rect x="1.46" y="0"     width="21.08" height="2.836" fill="rgb(255, 103, 25)" rx="0.3" />
      <rect x="1.46" y="5.406" width="21.08" height="2.836" fill="rgb(255, 103, 25)" rx="0.3" />
      <path d="M1.46 10.812V24l10.54-5.39L22.54 24V10.812H1.46z" fill="rgb(255, 103, 25)" />
    </svg>;

  const EmailIcon = (p) =>
  <svg viewBox="0 0 24 24" className={`icon ${p.className || ''}`} {...p} fill="none" stroke="rgb(220, 38, 38)" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
    <rect x="2" y="4" width="20" height="16" rx="2" />
    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
  </svg>;


  const stats = [
  { label: "Posts Synced", num: 85, color: "#0A66C2", bg: "#EFF6FF", icon: LinkedInIcon },
  { label: "Bookmarks Synced", num: 62, color: "#536471", bg: "#F3F4F6", icon: XIcon },
  { label: "Bookmarks Synced", num: 22, color: "#FF6719", bg: "#FFF7ED", icon: SubstackIcon },
  { label: "Saved from Email", num: 16, color: "#DC2626", bg: "#FEF2F2", icon: EmailIcon }];


  const [mediaTab, setMediaTab] = React.useState('all');
  const [addPopupOpen, setAddPopupOpen] = React.useState(false);

  const mediaTabs = [
    { id: 'all',    label: 'All',    icon: I.Grid },
    { id: 'read',   label: 'Read',   icon: I.Article },
    { id: 'watch',  label: 'Watch',  icon: I.Video },
    { id: 'listen', label: 'Listen', icon: I.Podcast || ((p) => <svg viewBox="0 0 24 24" className={`icon ${p.className||''}`} {...p}><path d="M12 1a7 7 0 0 0-7 7v4a7 7 0 0 0 14 0V8a7 7 0 0 0-7-7z"/><path d="M5 10v2a7 7 0 0 0 14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>) },
    { id: 'other',  label: 'Other',  icon: I.More },
  ];

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

  const aiPicks = (mediaTab === 'all' ? SAMPLE.bookmarks : tabBookmarks).slice(0, 3);
  const inProgress = (mediaTab === 'all' ? SAMPLE.bookmarks : tabBookmarks).filter((b) => b.status === "in-progress");

  return (
    <div className="main-inner">
      <div className="page-head">
        <div>
          <span className="page-section-chip chip-primary">
            <I.Sparkle className="icon icon-xs" style={{width:10,height:10}} /> Catch Up
          </span>
          <h1 className="page-title">Good afternoon</h1>
          <p className="page-subtitle">12 new pieces of content saved this week</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost btn-sm"><I.Sparkle className="icon icon-sm" /> Daily digest</button>
          <button className="btn btn-primary btn-sm" onClick={(e) => { e.stopPropagation(); setAddPopupOpen(v => !v); }}>
            <I.Plus className="icon icon-sm" /> Add bookmark
          </button>
        </div>
        {addPopupOpen && <AddBookmarkPopup onClose={() => setAddPopupOpen(false)} />}
      </div>

      <div className="stats-row">
        {stats.map((s, i) => {
          const Icon = s.icon;
          return (
            <div key={i} className="stat fade-up" style={{ animationDelay: `${i * 0.04}s` }}>
              <div className="stat-icon" style={{ background: s.bg, color: s.color, width: 40, height: 40, borderRadius: 10 }}>
                <Icon className="icon" style={{ width: 20, height: 20 }} />
              </div>
              <div>
                <div className="stat-num">{s.num}</div>
                <div className="stat-label">{s.label}</div>
              </div>
            </div>);

        })}
      </div>

      {/* Media tabs */}
      <div className="catchup-tabs-bar" style={{ display:'flex', gap:0, borderBottom:'1.5px solid var(--border-sub)', marginBottom:20, marginTop:4 }}>
        {mediaTabs.map(t => {
          const TabIcon = t.icon;
          return (
            <button
              key={t.id}
              onClick={() => setMediaTab(t.id)}
              style={{
                display:'inline-flex', alignItems:'center', gap:5,
                padding:'10px 16px', border:'none', background:'none', cursor:'pointer',
                fontSize:13, fontWeight: mediaTab === t.id ? 600 : 400, fontFamily:'inherit',
                color: mediaTab === t.id ? 'var(--blue)' : 'var(--text-3)',
                borderBottom: mediaTab === t.id ? '2px solid var(--blue)' : '2px solid transparent',
                marginBottom:'-1.5px', transition:'all 150ms ease',
              }}
            >
              <TabIcon className="icon icon-xs" style={{ width:14, height:14 }} />
              {t.label}
            </button>
          );
        })}
      </div>

      {/* AI Picks panel */}
      <div className="card" style={{ padding: 0, marginBottom: 20, overflow: 'hidden' }}>
        <div style={{ padding: '14px 18px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '0.5px solid var(--border-sub)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 24, height: 24, borderRadius: 7, background: 'var(--blue-bg)', color: 'var(--blue)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <I.Sparkle className="icon icon-sm" />
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-1)' }}>Today's picks for you</div>
              <div style={{ fontSize: 11, color: 'var(--text-4)' }}>Curated from your unread queue · refreshed 14m ago</div>
            </div>
          </div>
          <button className="btn btn-bare btn-sm">View all <I.ArrowRight className="icon icon-xs" /></button>
        </div>
        <div>
          {aiPicks.map((b, i) =>
          <div key={b.id} className="pick-row" onClick={() => onOpenBookmark(b.id)}
          style={{
            display: 'flex', gap: 14, padding: '14px 18px',
            borderBottom: i < aiPicks.length - 1 ? '0.5px solid var(--border-sub)' : 'none',
            cursor: 'pointer', transition: 'background-color var(--t-fast)',
            animation: 'fadeUp var(--t-base) var(--ease) both', animationDelay: `${0.1 + i * 0.04}s`
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = 'var(--surface-2)'}
          onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
            
              <div className="b-thumb" style={{ background: b.thumbColor + '22', color: b.thumbColor, width: 48, height: 48 }}>{b.thumb}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-1)', letterSpacing: '-0.01em' }}>{b.title}</span>
                </div>
                <div style={{ fontSize: 12, color: 'var(--text-3)', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden', lineHeight: 1.5, marginBottom: 6 }}>
                  {b.ai_summary || b.desc}
                </div>
                <div className="b-meta">
                  <span className="b-domain">{b.domain}</span>
                  <span className="b-meta-sep">·</span>
                  <span className="collection-chip"><I.Folder /> {SAMPLE.collections.find((c) => c.id === b.collection)?.name}</span>
                </div>
              </div>
              <button className="btn-icon" onClick={(e) => {e.stopPropagation();onOpenBookmark(b.id);}}>
                <I.ArrowRight className="icon icon-sm" />
              </button>
            </div>
          )}
        </div>
      </div>

      {/* Continue reading */}
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10, marginTop: 32 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-4)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Continue reading</div>
        </div>
        <button className="btn btn-bare btn-sm" onClick={() => onPage('bookmarks')}>All bookmarks <I.ArrowRight className="icon icon-xs" /></button>
      </div>

      <div className="list-toolbar" style={{ marginBottom: 8 }}>
        <div className="search" style={{ maxWidth: 280 }}>
          <I.Search />
          <input placeholder="Search in progress…" />
        </div>
        <button className="btn btn-ghost btn-sm"><I.Filter className="icon icon-sm" /> Filter</button>
        <button className="btn btn-ghost btn-sm"><I.Sort className="icon icon-sm" /> Recently added</button>
        <div className="grow" />
        <button className="btn btn-ghost btn-sm list-select-all" onClick={() => {}}><span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-3)' }}>Select all</span></button>
      </div>

      <div className="bookmark-list">
        {inProgress.map((b, i) =>
        <BookmarkRow key={b.id} b={b} idx={i} selected={false} onSelect={() => {}} onClick={() => onOpenBookmark(b.id)} />
        )}
      </div>

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

}

window.CatchUp = CatchUp;