/**
 * View Component: MobileFilterDrawer
 * Bottom sheet filter panel for mobile.
 * Contains search + date + book + hotspot filters.
 *
 * Props:
 *   open: boolean
 *   filters: { search, book, date, hotspot, tag }
 *   bookList: [{ name, count }]
 *   dateList: [{ date, count }]
 *   hotspotList: [{ name, count }]
 *   onClose: () => void
 *   onFilterChange: (key, value) => void
 *   onClear: () => void
 */

function SearchIconMobile2() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--text-tertiary)' }}>
      <circle cx="11" cy="11" r="8"></circle>
      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    </svg>
  );
}

function CloseIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="18" y1="6" x2="6" y2="18"></line>
      <line x1="6" y1="6" x2="18" y2="18"></line>
    </svg>
  );
}

function MobileFilterDrawer({ open, filters, bookList, dateList, hotspotList, categoryList, batchList, onClose, onFilterChange, onClear }) {
  const hasActiveFilter = filters.search || filters.book || filters.date || filters.hotspot || filters.category || filters.version || filters.batch;

  return (
    <>
      <div
        className={`mobile-filter-overlay ${open ? 'open' : ''}`}
        onClick={onClose}
      ></div>
      <div
        className={`mobile-filter-drawer ${open ? 'open' : ''}`}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="mobile-filter-header">
          <span className="mobile-filter-title">筛选</span>
          <button className="mobile-filter-close" onClick={onClose}>
            <CloseIcon />
          </button>
        </div>

        <div className="mobile-filter-body">
          {/* Search */}
          <div>
            <div className="mobile-filter-section-title">搜索</div>
            <div className="mobile-search-box">
              <SearchIconMobile2 />
              <input
                type="text"
                placeholder="搜索标题、书名、标签..."
                value={filters.search}
                onChange={(e) => onFilterChange('search', e.target.value)}
              />
            </div>
          </div>

          {/* Version */}
          <div>
            <div className="mobile-filter-section-title">
              版本
              {filters.version && (
                <span style={{ color: 'var(--accent)', marginLeft: 8, fontSize: 12 }}>
                  · 已选 1 项
                </span>
              )}
            </div>
            <div className="mobile-filter-chips">
              <button
                className={`mobile-filter-chip ${filters.version === 'A' ? 'active' : ''}`}
                onClick={() => onFilterChange('version', filters.version === 'A' ? '' : 'A')}
              >
                A版 · 热点主导
              </button>
              <button
                className={`mobile-filter-chip ${filters.version === 'B' ? 'active' : ''}`}
                onClick={() => onFilterChange('version', filters.version === 'B' ? '' : 'B')}
              >
                B版 · 书籍点睛
              </button>
              <button
                className={`mobile-filter-chip ${filters.version === 'C' ? 'active' : ''}`}
                onClick={() => onFilterChange('version', filters.version === 'C' ? '' : 'C')}
              >
                C版 · 书籍主导
              </button>
            </div>
          </div>

          {/* Batch */}
          {batchList && batchList.length > 0 && (
            <div>
              <div className="mobile-filter-section-title">
                批次
                {filters.batch && (
                  <span style={{ color: 'var(--accent)', marginLeft: 8, fontSize: 12 }}>
                    · 已选 1 项
                  </span>
                )}
              </div>
              <div className="mobile-filter-chips">
                {batchList.map(({ name, count }) => (
                  <button
                    key={name}
                    className={`mobile-filter-chip ${filters.batch === name ? 'active' : ''}`}
                    onClick={() => onFilterChange('batch', filters.batch === name ? '' : name)}
                  >
                    {name}
                    <span style={{ opacity: 0.6, marginLeft: 4, fontSize: 11 }}>{count}</span>
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* Category */}
          {categoryList && categoryList.length > 0 && (
            <div>
              <div className="mobile-filter-section-title">
                分类
                {filters.category && (
                  <span style={{ color: 'var(--accent)', marginLeft: 8, fontSize: 12 }}>
                    · 已选 1 项
                  </span>
                )}
              </div>
              <div className="mobile-filter-chips">
                {categoryList.map(({ name, count }) => (
                  <button
                    key={name}
                    className={`mobile-filter-chip ${filters.category === name ? 'active' : ''}`}
                    onClick={() => onFilterChange('category', filters.category === name ? '' : name)}
                  >
                    {name}
                    <span style={{ opacity: 0.6, marginLeft: 4, fontSize: 11 }}>{count}</span>
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* Books */}
          <div>
            <div className="mobile-filter-section-title">
              书籍
              {filters.book && (
                <span style={{ color: 'var(--accent)', marginLeft: 8, fontSize: 12 }}>
                  · 已选 1 项
                </span>
              )}
            </div>
            <div className="mobile-filter-chips">
              {bookList.map(({ name, count }) => (
                <button
                  key={name || '未分类'}
                  className={`mobile-filter-chip ${filters.book === name ? 'active' : ''}`}
                  onClick={() => onFilterChange('book', filters.book === name ? '' : name)}
                >
                  {name || '未分类'}
                </button>
              ))}
            </div>
          </div>

          {/* Hotspots */}
          <div>
            <div className="mobile-filter-section-title">
              热点
              {filters.hotspot && (
                <span style={{ color: 'var(--accent)', marginLeft: 8, fontSize: 12 }}>
                  · 已选 1 项
                </span>
              )}
            </div>
            <div className="mobile-filter-chips">
              {hotspotList.map(({ name, count }) => (
                <button
                  key={name}
                  className={`mobile-filter-chip ${filters.hotspot === name ? 'active' : ''}`}
                  onClick={() => onFilterChange('hotspot', filters.hotspot === name ? '' : name)}
                  style={{ fontSize: 12 }}
                >
                  {name.length > 12 ? name.slice(0, 12) + '…' : name}
                </button>
              ))}
            </div>
          </div>

          {/* Dates */}
          <div>
            <div className="mobile-filter-section-title">
              日期
              {filters.date && (
                <span style={{ color: 'var(--accent)', marginLeft: 8, fontSize: 12 }}>
                  · 已选 1 项
                </span>
              )}
            </div>
            <div className="mobile-filter-chips">
              {dateList.map(({ date, count }) => (
                <button
                  key={date}
                  className={`mobile-filter-chip ${filters.date === date ? 'active' : ''}`}
                  onClick={() => onFilterChange('date', filters.date === date ? '' : date)}
                >
                  {ContentService.formatDate(date)}
                  <span style={{ opacity: 0.6, marginLeft: 4, fontSize: 11 }}>{count}篇</span>
                </button>
              ))}
            </div>
          </div>

          {/* Clear */}
          {hasActiveFilter && (
            <button
              className="clear-filters"
              style={{ width: '100%', marginTop: 8 }}
              onClick={onClear}
            >
              清除全部筛选
            </button>
          )}
        </div>
      </div>
    </>
  );
}

window.MobileFilterDrawer = MobileFilterDrawer;