// Bookmarks page — paginated table view (default) + list view toggle.
// 50 rows per page in table; list view is the original card-style.

const PAGE_SIZE = 50;

function BookmarksPage({ onOpenBookmark, collectionFilter, layoutVariant }) {
  const [view, setView] = React.useState('table');     // 'table' | 'list'
  const [mediaFilter, setMediaFilter] = React.useState('all');
  const [selected, setSelected] = React.useState(new Set());
  const [sortBy, setSortBy] = React.useState('Recently added');
  const [page, setPage] = React.useState(1);

  // Reset selection + page when filter changes
  React.useEffect(() => { setSelected(new Set()); setPage(1); }, [collectionFilter, mediaFilter]);

  // Pull bookmarks (descend into nested collections if a collection is filtered)
  const all = collectionFilter
    ? SAMPLE.bookmarksInCollectionTree(collectionFilter)
    : SAMPLE.bookmarks;

  const filtered = mediaFilter === 'all' ? all : all.filter(b => b.type === mediaFilter);

  const counts = {
    all: all.length,
    article: all.filter(b => b.type === 'article').length,
    video: all.filter(b => b.type === 'video').length,
    pdf: all.filter(b => b.type === 'pdf').length,
    tweet: all.filter(b => b.type === 'tweet').length,
  };

  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
  const currentPage = Math.min(page, totalPages);
  const start = (currentPage - 1) * PAGE_SIZE;
  const pageRows = filtered.slice(start, start + PAGE_SIZE);

  const toggle = (id) => {
    const s = new Set(selected);
    s.has(id) ? s.delete(id) : s.add(id);
    setSelected(s);
  };
  const toggleAllOnPage = () => {
    const allSelected = pageRows.every(b => selected.has(b.id));
    const s = new Set(selected);
    if (allSelected) pageRows.forEach(b => s.delete(b.id));
    else pageRows.forEach(b => s.add(b.id));
    setSelected(s);
  };

  const collection = collectionFilter ? SAMPLE.collections.find(c => c.id === collectionFilter) : null;
  const path = collectionFilter ? SAMPLE.collectionPath(collectionFilter) : [];

  return (
    <div className="main-inner">
      <div className="page-head">
        <div>
          {path.length > 1 && (
            <div style={{display:'flex', alignItems:'center', gap:6, fontSize:11, color:'var(--text-4)', marginBottom:4}}>
              {path.slice(0, -1).map((p, i) => (
                <React.Fragment key={p.id}>
                  <a style={{cursor:'pointer'}} onMouseEnter={e=>e.currentTarget.style.color='var(--text-2)'} onMouseLeave={e=>e.currentTarget.style.color=''}>{p.name}</a>
                  <I.ChevronRight className="icon icon-xs" style={{color:'var(--text-4)'}} />
                </React.Fragment>
              ))}
            </div>
          )}
          <h1 className="page-title">
            {collection ? (
              <span style={{display:'inline-flex', alignItems:'center', gap:10}}>
                <span className="dot" style={{background: collection.color, width:14, height:14, borderRadius:4}}></span>
                {collection.name}
              </span>
            ) : 'All bookmarks'}
          </h1>
          <p className="page-subtitle">
            {filtered.length.toLocaleString()} {filtered.length === 1 ? 'item' : 'items'}
            {collection ? ` · last added 2h ago` : ' · 14 added this week'}
          </p>
        </div>
        <div className="page-actions">
          <ViewToggle view={view} onChange={setView} />
          <button className="btn btn-ghost btn-sm"><I.Upload className="icon icon-sm" /> Bulk import</button>
          <button className="btn btn-primary btn-sm"><I.Plus className="icon icon-sm" /> Add</button>
        </div>
      </div>

      <MediaTabs active={mediaFilter} onChange={setMediaFilter} counts={counts} />

      <div className="list-toolbar">
        <div className="search">
          <I.Search />
          <input placeholder={`Search in ${collection ? collection.name : 'all bookmarks'}…`} />
        </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" /> {sortBy}</button>
        <div className="grow" />
        <button className="btn btn-ghost btn-sm"><I.Sparkle className="icon icon-sm" /> AI summarize page</button>
      </div>

      {filtered.length === 0 ? (
        <div className="bookmark-list" style={{minHeight:300}}>
          <div className="empty">
            <div className="empty-icon"><I.Bookmark /></div>
            <h3 className="empty-title">Nothing here yet</h3>
            <p className="empty-sub">Drop a URL with ⌘K or paste anywhere on this page.</p>
            <button className="btn btn-primary"><I.Plus className="icon icon-sm" /> Add first bookmark</button>
          </div>
        </div>
      ) : view === 'table' ? (
        <BookmarksTable
          rows={pageRows}
          selected={selected}
          onToggle={toggle}
          onToggleAll={toggleAllOnPage}
          onOpenBookmark={onOpenBookmark}
        />
      ) : (
        <div className="bookmark-list">
          {pageRows.map((b, i) => (
            <BookmarkRow
              key={b.id}
              b={b}
              idx={i}
              selected={selected.has(b.id)}
              onSelect={() => toggle(b.id)}
              onClick={() => onOpenBookmark(b.id)}
            />
          ))}
        </div>
      )}

      {filtered.length > 0 && (
        <Pagination
          currentPage={currentPage}
          totalPages={totalPages}
          totalItems={filtered.length}
          pageSize={PAGE_SIZE}
          onPage={setPage}
        />
      )}

      <div style={{height:80}} />

      {selected.size > 0 && <BulkBar count={selected.size} onClear={() => setSelected(new Set())} />}
    </div>
  );
}

// Dropdown view picker — used on Bookmarks AND Collections pages.
// `options` is an array of { id, label, icon, desc? }
function ViewToggle({ view, onChange, options }) {
  const opts = options || [
    { id: 'table', label: 'Table', icon: I.Sort, desc: 'Spreadsheet rows' },
    { id: 'list',  label: 'List',  icon: I.List, desc: 'Card-style rows' },
  ];
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  const current = opts.find(o => o.id === view) || opts[0];
  const Icon = current.icon;

  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);

  return (
    <div className="view-dropdown" ref={ref}>
      <button
        className="btn btn-ghost btn-sm view-dropdown-trigger"
        onClick={() => setOpen(o => !o)}
        aria-haspopup="menu"
        aria-expanded={open}
      >
        <Icon className="icon icon-sm" />
        <span>{current.label}</span>
        <I.ChevronDown className="icon icon-xs" style={{marginLeft: 1, opacity: 0.6}} />
      </button>
      {open && (
        <div className="view-dropdown-menu">
          <div className="view-dropdown-label">View as</div>
          {opts.map(opt => {
            const OIcon = opt.icon;
            const isActive = view === opt.id;
            return (
              <button
                key={opt.id}
                className={`view-dropdown-item ${isActive ? 'active' : ''}`}
                onClick={() => { onChange(opt.id); setOpen(false); }}
              >
                <OIcon className="icon icon-sm" />
                <div className="vdi-stack">
                  <div className="vdi-label">{opt.label}</div>
                  {opt.desc && <div className="vdi-desc">{opt.desc}</div>}
                </div>
                {isActive && <I.Check className="icon icon-xs" style={{marginLeft:'auto', color:'var(--blue)'}} />}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

function BookmarksTable({ rows, selected, onToggle, onToggleAll, onOpenBookmark }) {
  const allChecked = rows.length > 0 && rows.every(b => selected.has(b.id));
  const someChecked = !allChecked && rows.some(b => selected.has(b.id));

  return (
    <div className="bk-table-wrap">
      <table className="bk-table">
        <thead>
          <tr>
            <th className="bk-th-check">
              <div
                className={`b-checkbox always-visible ${allChecked ? 'checked' : ''} ${someChecked ? 'indeterminate' : ''}`}
                onClick={onToggleAll}
              >
                {allChecked && <svg viewBox="0 0 24 24"><path d="m5 12 5 5L20 7" fill="none"/></svg>}
                {someChecked && <span className="dash" />}
              </div>
            </th>
            <th className="bk-th-title">Title</th>
            <th className="bk-th-type">Type</th>
            <th className="bk-th-coll">Collection</th>
            <th className="bk-th-tags">Tags</th>
            <th className="bk-th-status">Status</th>
            <th className="bk-th-date">Saved</th>
            <th className="bk-th-actions"></th>
          </tr>
        </thead>
        <tbody>
          {rows.map((b, i) => {
            const isSel = selected.has(b.id);
            const collection = SAMPLE.collections.find(c => c.id === b.collection);
            return (
              <tr
                key={b.id}
                className={`bk-tr ${isSel ? 'selected' : ''}`}
                style={{animationDelay: `${i * 0.012}s`}}
                onClick={() => onOpenBookmark(b.id)}
              >
                <td className="bk-td-check" onClick={(e) => { e.stopPropagation(); onToggle(b.id); }}>
                  <div className={`b-checkbox ${isSel ? 'checked always-visible' : ''}`}>
                    {isSel && <svg viewBox="0 0 24 24"><path d="m5 12 5 5L20 7" fill="none"/></svg>}
                  </div>
                </td>
                <td className="bk-td-title">
                  <div className="bk-title-cell">
                    <div className="b-thumb bk-table-thumb" style={{background: b.thumbColor + '22', color: b.thumbColor}}>
                      {b.thumb}
                    </div>
                    <div className="bk-title-stack">
                      <div className="bk-title-text">{b.title}</div>
                      <div className="bk-domain-text">{b.domain}</div>
                    </div>
                  </div>
                </td>
                <td className="bk-td-type">
                  <span className="bk-type-chip">
                    <TypeIcon type={b.type} />
                    <span>{b.type === 'tweet' ? 'Tweet' : b.type === 'pdf' ? 'PDF' : b.type[0].toUpperCase() + b.type.slice(1)}</span>
                  </span>
                </td>
                <td className="bk-td-coll">
                  {collection && (
                    <span className="collection-chip" style={{background: collection.color + '1A', color: collection.color}}>
                      <I.Folder /> {collection.name}
                    </span>
                  )}
                </td>
                <td className="bk-td-tags">
                  <div className="bk-tag-row">
                    {b.tags.slice(0, 2).map(t => <span key={t} className="tag">#{t}</span>)}
                    {b.tags.length > 2 && <span className="tag tag-more">+{b.tags.length - 2}</span>}
                  </div>
                </td>
                <td className="bk-td-status"><StatusPill status={b.status} /></td>
                <td className="bk-td-date">{b.time} ago</td>
                <td className="bk-td-actions" onClick={(e) => e.stopPropagation()}>
                  <div className="bk-row-actions">
                    <button className="b-action tooltip-host" data-tip="Open"><I.External className="icon icon-sm" /></button>
                    <button className="b-action tooltip-host" data-tip="Mark read"><I.Check className="icon icon-sm" /></button>
                    <button className="b-action tooltip-host" data-tip="More"><I.More className="icon icon-sm" /></button>
                  </div>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

function Pagination({ currentPage, totalPages, totalItems, pageSize, onPage }) {
  const start = (currentPage - 1) * pageSize + 1;
  const end = Math.min(currentPage * pageSize, totalItems);

  // Build a compact page-number list with ellipses
  const buildPages = () => {
    if (totalPages <= 7) return Array.from({length: totalPages}, (_, i) => i + 1);
    const pages = [1];
    if (currentPage > 3) pages.push('…');
    for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) pages.push(i);
    if (currentPage < totalPages - 2) pages.push('…');
    pages.push(totalPages);
    return pages;
  };

  return (
    <div className="bk-pagination">
      <div className="bk-pagination-info">
        Showing <strong>{start}–{end}</strong> of <strong>{totalItems.toLocaleString()}</strong>
      </div>
      <div className="bk-pagination-controls">
        <button
          className="pg-btn"
          disabled={currentPage === 1}
          onClick={() => onPage(currentPage - 1)}
        >
          ← Prev
        </button>
        {buildPages().map((p, i) => (
          p === '…'
            ? <span key={`e${i}`} className="pg-ellipsis">…</span>
            : <button
                key={p}
                className={`pg-num ${p === currentPage ? 'active' : ''}`}
                onClick={() => onPage(p)}
              >{p}</button>
        ))}
        <button
          className="pg-btn"
          disabled={currentPage === totalPages}
          onClick={() => onPage(currentPage + 1)}
        >
          Next →
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { BookmarksPage, BookmarksTable, ViewToggle, Pagination });