/**
 * View Component: Sidebar
 * Left rail with search, book filters, date filters, tag filters.
 *
 * Props:
 *   filters: { search, book, date, tag, angle, source, onlyFavorites }
 *   bookList: [{ name, count }]
 *   dateList: [{ date, count }]
 *   tagList:  [{ name, count }]
 *   angleList: [{ name, count }]
 *   sourceList: [{ name, count }]
 *   onFilterChange: (key, value) => void
 *   onClear: () => void
 */

function SearchIcon() {
  return (
    <svg className="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="11" cy="11" r="8"></circle>
      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    </svg>
  );
}

function Sidebar({ filters, bookList, dateList, hotspotList, tagList, angleList, sourceList, batchList, onFilterChange, onClear }) {
  const hasActiveFilter = filters.search || filters.book || filters.date || filters.hotspot || filters.tag || filters.angle || filters.source || filters.batch || filters.onlyFavorites;

  return (
    <aside className="app-sidebar">
      {/* Search */}
      <div className="search-box">
        <SearchIcon />
        <input
          type="text"
          placeholder="搜索标题 / 书名 / 标签..."
          value={filters.search}
          onChange={(e) => onFilterChange('search', e.target.value)}
        />
      </div>

      {/* Favorite toggle */}
      <div className="sidebar-section">
        <div className="sidebar-section-title">选材状态</div>
        <div className="chip-list">
          <button
            className={`chip ${filters.onlyFavorites ? 'active' : ''}`}
            onClick={() => onFilterChange('onlyFavorites', !filters.onlyFavorites)}
          >
            ♥ 只看已选
          </button>
        </div>
      </div>

      {/* Batch */}
      {batchList && batchList.length > 0 && (
        <div className="sidebar-section">
          <div className="sidebar-section-title">按批次</div>
          <div className="chip-list">
            {batchList.map(({ name, count }) => (
              <button
                key={name}
                className={`chip ${filters.batch === name ? 'active' : ''}`}
                onClick={() => onFilterChange('batch', filters.batch === name ? '' : name)}
                title={`${name} (${count}篇)`}
              >
                {name}
                <span style={{ opacity: 0.6, marginLeft: 4, fontSize: 11 }}>{count}</span>
              </button>
            ))}
          </div>
        </div>
      )}

      {/* Books */}
      <div className="sidebar-section">
        <div className="sidebar-section-title">按书籍</div>
        <div className="chip-list">
          {bookList.map(({ name, count }) => (
            <button
              key={name || '未分类'}
              className={`chip book-chip ${filters.book === name ? 'active' : ''}`}
              onClick={() => onFilterChange('book', filters.book === name ? '' : name)}
              title={`${name || '未分类'} (${count}篇)`}
            >
              {name || '未分类'}
              <span style={{ opacity: 0.6, marginLeft: 4, fontSize: 11 }}>{count}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Hotspots */}
      <div className="sidebar-section">
        <div className="sidebar-section-title">按热点</div>
        <div className="chip-list">
          {hotspotList.map(({ name, count }) => (
            <button
              key={name}
              className={`chip ${filters.hotspot === name ? 'active' : ''}`}
              onClick={() => onFilterChange('hotspot', filters.hotspot === name ? '' : name)}
              title={`${name} (${count}篇)`}
            >
              {name.length > 10 ? name.slice(0, 10) + '…' : name}
              <span style={{ opacity: 0.6, marginLeft: 4, fontSize: 11 }}>{count}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Source */}
      <div className="sidebar-section">
        <div className="sidebar-section-title">按来源</div>
        <div className="chip-list">
          {sourceList.map(({ name, count }) => (
            <button
              key={name}
              className={`chip source-chip ${filters.source === name ? 'active' : ''}`}
              onClick={() => onFilterChange('source', filters.source === name ? '' : name)}
              title={`${name} (${count}篇)`}
            >
              {name === 'txt' ? '新版 TXT' : '旧版 MD'}
              <span style={{ opacity: 0.6, marginLeft: 4, fontSize: 11 }}>{count}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Angle */}
      <div className="sidebar-section">
        <div className="sidebar-section-title">按角度</div>
        <div className="chip-list">
          {angleList.map(({ name, count }) => (
            <button
              key={name}
              className={`chip angle-chip ${filters.angle === name ? 'active' : ''}`}
              onClick={() => onFilterChange('angle', filters.angle === name ? '' : name)}
              title={`${name} (${count}篇)`}
            >
              {name}
              <span style={{ opacity: 0.6, marginLeft: 4, fontSize: 11 }}>{count}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Dates */}
      <div className="sidebar-section">
        <div className="sidebar-section-title">按日期</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {dateList.map(({ date, count }) => (
            <button
              key={date}
              className={`date-item ${filters.date === date ? 'active' : ''}`}
              onClick={() => onFilterChange('date', filters.date === date ? '' : date)}
            >
              <span>{ContentService.formatDate(date)}</span>
              <span className="date-item-count">{count}篇</span>
            </button>
          ))}
        </div>
      </div>

      {/* Tags */}
      <div className="sidebar-section">
        <div className="sidebar-section-title">热门标签</div>
        <div className="chip-list">
          {tagList.map(({ name, count }) => (
            <button
              key={name}
              className={`chip ${filters.tag === name ? 'active' : ''}`}
              onClick={() => onFilterChange('tag', filters.tag === name ? '' : name)}
              title={`${name} (${count}篇)`}
            >
              {name}
            </button>
          ))}
        </div>
      </div>

      {/* Clear filters */}
      {hasActiveFilter && (
        <button className="clear-filters" onClick={onClear}>
          清除全部筛选
        </button>
      )}
    </aside>
  );
}

window.Sidebar = Sidebar;