/**
 * View Component: MobileBottomNav
 * Mobile bottom navigation bar with filter/sort/home/fav buttons.
 * Opens bottom sheet filter drawer on filter tap.
 *
 * Props:
 *   onOpenFilter: () => void
 *   onBackToTop: () => void
 *   onToggleFav: () => void
 *   onlyFavorites: boolean
 *   activeTab: 'home' | 'favorites'
 *   onTabChange: (tab) => void
 */

function HomeIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
      <polyline points="9 22 9 12 15 12 15 22"></polyline>
    </svg>
  );
}

function FilterIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
    </svg>
  );
}

function HeartIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
    </svg>
  );
}

function SearchIconMobile() {
  return (
    <svg 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 MobileBottomNav({ onOpenFilter, activeTab, onTabChange, favCount }) {
  return (
    <nav className="mobile-bottom-nav">
      <button
        className={`mobile-nav-item ${activeTab === 'home' ? 'active' : ''}`}
        onClick={() => onTabChange('home')}
      >
        <HomeIcon />
        <span>首页</span>
      </button>
      <button className="mobile-nav-item" onClick={onOpenFilter}>
        <FilterIcon />
        <span>筛选</span>
      </button>
      <button
        className={`mobile-nav-item ${activeTab === 'favorites' ? 'active' : ''}`}
        onClick={() => onTabChange('favorites')}
      >
        <HeartIcon />
        <span>已选{favCount > 0 ? ` ${favCount}` : ''}</span>
      </button>
    </nav>
  );
}

window.MobileBottomNav = MobileBottomNav;