// BookmarkRow + helpers

function TypeIcon({ type }) {
  const map = { article: I.Article, video: I.Video, pdf: I.Pdf, tweet: I.Tweet, podcast: I.MsgCircle };
  const Comp = map[type] || I.Globe;
  return <Comp className="icon icon-xs" />;
}

function StatusPill({ status }) {
  const meta = {
    unread: { label: 'Unread', cls: 'pill-unread' },
    read: { label: 'Read', cls: 'pill-read' },
    'in-progress': { label: 'In Progress', cls: 'pill-progress' },
    archived: { label: 'Archived', cls: 'pill-archived' },
  }[status] || { label: status, cls: 'pill-archived' };
  return <span className={`pill ${meta.cls}`}>{meta.label}</span>;
}

function BookmarkRow({ b, idx, selected, onSelect, onClick }) {
  const collection = SAMPLE.collections.find(c => c.id === b.collection);
  return (
    <div
      className={`bookmark-row ${selected ? 'selected' : ''}`}
      style={{animationDelay: `${idx * 0.03}s`}}
      onClick={onClick}
    >
      <div
        className={`b-checkbox ${selected ? 'checked' : ''}`}
        onClick={(e) => { e.stopPropagation(); onSelect(); }}
      >
        {selected && <svg viewBox="0 0 24 24"><path d="m5 12 5 5L20 7" fill="none"/></svg>}
      </div>

      <div className="b-thumb" style={{background: b.thumbColor + '22', color: b.thumbColor}}>
        {b.thumb}
      </div>

      <div className="b-content">
        <div className="b-title-row">
          <span className="b-title">{b.title}</span>
        </div>
        <div className="b-desc">{b.desc}</div>
        <div className="b-meta">
          <TypeIcon type={b.type} />
          <span className="b-domain">{b.domain}</span>
          <span className="b-meta-sep">·</span>
          <StatusPill status={b.status} />
          {collection && (
            <span className="collection-chip">
              <I.Folder /> {collection.name}
            </span>
          )}
          {b.tags.slice(0, 2).map(t => (
            <span key={t} className="tag">#{t}</span>
          ))}
          {b.tags.length > 2 && <span className="tag">+{b.tags.length - 2}</span>}
        </div>
      </div>

      <div className="b-side">
        <span className="b-time">{b.time}</span>
        <div className="b-actions">
          <button className="b-action tooltip-host" data-tip="Open" onClick={(e)=>e.stopPropagation()}><I.External className="icon icon-sm" /></button>
          <button className="b-action tooltip-host" data-tip="Mark read" onClick={(e)=>e.stopPropagation()}><I.Check className="icon icon-sm" /></button>
          <button className="b-action tooltip-host" data-tip="Archive" onClick={(e)=>e.stopPropagation()}><I.Archive className="icon icon-sm" /></button>
          <button className="b-action danger tooltip-host" data-tip="Delete" onClick={(e)=>e.stopPropagation()}><I.Trash className="icon icon-sm" /></button>
        </div>
      </div>
    </div>
  );
}

function MediaTabs({ active, onChange, counts }) {
  const tabs = [
    { id: 'all', label: 'All', icon: I.Globe },
    { id: 'article', label: 'Articles', icon: I.Article },
    { id: 'video', label: 'Videos', icon: I.Video },
    { id: 'pdf', label: 'PDFs', icon: I.Pdf },
    { id: 'tweet', label: 'Tweets', icon: I.Tweet },
  ];
  return (
    <div className="media-tabs">
      {tabs.map(t => {
        const Icon = t.icon;
        return (
          <a key={t.id} className={`media-tab ${active === t.id ? 'active' : ''}`} onClick={() => onChange(t.id)}>
            <Icon className="icon icon-sm" />
            {t.label}
            <span className="badge">{counts[t.id] || 0}</span>
          </a>
        );
      })}
    </div>
  );
}

function BulkBar({ count, onClear }) {
  return (
    <div className="bulk-bar">
      <span className="count">{count} selected</span>
      <div className="vdiv" />
      <button className="bk-btn"><I.Folder className="icon icon-sm" /> Move</button>
      <button className="bk-btn"><I.Tag className="icon icon-sm" /> Tag</button>
      <button className="bk-btn"><I.Check className="icon icon-sm" /> Mark read</button>
      <button className="bk-btn"><I.Archive className="icon icon-sm" /> Archive</button>
      <button className="bk-btn danger"><I.Trash className="icon icon-sm" /> Delete</button>
      <div className="vdiv" />
      <button className="bk-btn" onClick={onClear}><I.Close className="icon icon-sm" /></button>
    </div>
  );
}

window.BookmarkRow = BookmarkRow;
window.MediaTabs = MediaTabs;
window.BulkBar = BulkBar;
window.StatusPill = StatusPill;
window.TypeIcon = TypeIcon;