// Collection detail — opens within the Collections tab when a collection is clicked.
// V1: solid-color hero banner (uses collection accent), nested-children chips,
// inline bookmarks table. Sharing/banner-image upgrades come next per user spec.

function CollectionDetail({ collectionId, onBack, onOpenBookmark, onOpenCollection }) {
  const collection = SAMPLE.collections.find(c => c.id === collectionId);
  if (!collection) return null;

  const path = SAMPLE.collectionPath(collectionId);
  const children = SAMPLE.childCollections(collectionId);
  const allBookmarks = SAMPLE.bookmarksInCollectionTree(collectionId);
  const directBookmarks = SAMPLE.bookmarks.filter(b => b.collection === collectionId);

  const [view, setView] = React.useState('table');
  const [scope, setScope] = React.useState('all'); // 'all' (incl. nested) | 'direct'
  const [selected, setSelected] = React.useState(new Set());
  const [page, setPage] = React.useState(1);

  React.useEffect(() => { setSelected(new Set()); setPage(1); }, [collectionId, scope]);

  const rowsAll = scope === 'direct' ? directBookmarks : allBookmarks;
  const PAGE_SIZE = 50;
  const totalPages = Math.max(1, Math.ceil(rowsAll.length / PAGE_SIZE));
  const currentPage = Math.min(page, totalPages);
  const start = (currentPage - 1) * PAGE_SIZE;
  const pageRows = rowsAll.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 viewOptions = [
    { id: 'table', label: 'Table', icon: I.Sort, desc: 'Spreadsheet rows' },
    { id: 'list',  label: 'List',  icon: I.List, desc: 'Card-style rows' },
  ];

  return (
    <div className="cd-wrap">
      {/* Banner — solid accent block. v2 will add cover-image upload. */}
      <div className="cd-banner" style={{
        background: `linear-gradient(135deg, ${collection.color} 0%, ${collection.color}CC 100%)`,
      }}>
        <div className="cd-banner-overlay" />
      </div>

      <div className="main-inner cd-content">
        {/* Breadcrumb */}
        <div className="cd-breadcrumb">
          <a className="cd-crumb" onClick={onBack}>
            <I.ChevronRight className="icon icon-xs" style={{transform:'rotate(180deg)'}} />
            All collections
          </a>
          {path.length > 1 && (
            <>
              <I.ChevronRight className="icon icon-xs" style={{color:'var(--text-4)'}} />
              {path.slice(0, -1).map((p, i) => (
                <React.Fragment key={p.id}>
                  <a className="cd-crumb" onClick={() => onOpenCollection(p.id)}>{p.name}</a>
                  {i < path.length - 2 && <I.ChevronRight className="icon icon-xs" style={{color:'var(--text-4)'}} />}
                </React.Fragment>
              ))}
            </>
          )}
        </div>

        {/* Header card overlapping banner */}
        <div className="cd-header card">
          <div className="cd-header-top">
            <div className="cd-folder" style={{background: collection.color + '22', color: collection.color}}>
              <I.Folder className="icon" />
            </div>
            <div className="cd-header-stack">
              <h1 className="cd-title">{collection.name}</h1>
              <div className="cd-meta">
                <span><strong>{directBookmarks.length}</strong> direct bookmarks</span>
                {children.length > 0 && (
                  <>
                    <span className="cd-meta-sep">·</span>
                    <span><strong>{children.length}</strong> nested · <strong>{allBookmarks.length}</strong> total</span>
                  </>
                )}
                <span className="cd-meta-sep">·</span>
                <span>Updated 2 days ago</span>
              </div>
            </div>
            <div className="cd-header-actions">
              <span className="cd-privacy-badge">
                <I.Eye className="icon icon-xs" /> Private
              </span>
              <button className="btn btn-ghost btn-sm"><I.Connect className="icon icon-sm" /> Share</button>
              <button className="btn btn-ghost btn-sm"><I.Sparkle className="icon icon-sm" /> AI summarize</button>
              <button className="btn btn-ghost btn-sm"><I.More className="icon icon-sm" /></button>
            </div>
          </div>

          {/* Description placeholder + tags */}
          <p className="cd-description">
            A working library of {allBookmarks.length} bookmarks {children.length ? `across ${children.length} nested collections` : ''}.
            Use AI to summarize trends or generate a reading playlist.
          </p>
        </div>

        {/* Nested children rail */}
        {children.length > 0 && (
          <div className="cd-children-section">
            <div className="cd-section-head">
              <h3 className="cd-section-title">Nested collections</h3>
              <button className="btn btn-ghost btn-sm"><I.Plus className="icon icon-sm" /> New nested</button>
            </div>
            <div className="cd-children-grid">
              {children.map(ch => {
                const chCount = SAMPLE.bookmarksInCollectionTree(ch.id).length;
                return (
                  <button
                    key={ch.id}
                    className="cd-child-card"
                    onClick={() => onOpenCollection(ch.id)}
                  >
                    <div className="cd-child-folder" style={{background: ch.color + '22', color: ch.color}}>
                      <I.Folder className="icon icon-sm" />
                    </div>
                    <div className="cd-child-stack">
                      <div className="cd-child-name">{ch.name}</div>
                      <div className="cd-child-meta">{chCount} bookmark{chCount === 1 ? '' : 's'}</div>
                    </div>
                    <I.ChevronRight className="icon icon-xs cd-child-arrow" />
                  </button>
                );
              })}
            </div>
          </div>
        )}

        {/* Bookmarks within this collection */}
        <div className="cd-bookmarks-section">
          <div className="cd-section-head">
            <h3 className="cd-section-title">Bookmarks</h3>
            <div className="cd-section-actions">
              {children.length > 0 && (
                <div className="cd-scope-toggle">
                  <button
                    className={`vt-btn ${scope === 'all' ? 'active' : ''}`}
                    onClick={() => setScope('all')}
                  >Including nested</button>
                  <button
                    className={`vt-btn ${scope === 'direct' ? 'active' : ''}`}
                    onClick={() => setScope('direct')}
                  >Direct only</button>
                </div>
              )}
              <ViewToggle view={view} onChange={setView} options={viewOptions} />
              <button className="btn btn-ghost btn-sm"><I.Filter className="icon icon-sm" /> Filter</button>
              <button className="btn btn-primary btn-sm"><I.Plus className="icon icon-sm" /> Add</button>
            </div>
          </div>

          {pageRows.length === 0 ? (
            <div className="card" style={{padding:32}}>
              <div className="empty">
                <div className="empty-icon"><I.Bookmark /></div>
                <h3 className="empty-title">No bookmarks 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>
          )}

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

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

window.CollectionDetail = CollectionDetail;