// ============================================================
// Husky Paths — FilterBar
// Unified top filter rail above the map: search + segmented
// path-type + "Open to Connect" toggle + live count.
// ============================================================

const FilterBar = ({
  total,
  filteredCount,
  query, setQuery,
  activeType, setActiveType,
  openOnly, setOpenOnly,
  activeYear, setActiveYear,
  clearFilters,
  tweaks,
}) => {
  const hasFilter = !!query || !!activeType || openOnly || activeYear != null;

  // Active filter chip list for the secondary row
  const activeChips = [];
  if (query) activeChips.push({ key: "q", label: `"${query}"`, clear: () => setQuery("") });
  if (activeType) {
    const pt = PATH_TYPES.find((x) => x.id === activeType);
    activeChips.push({ key: "type", label: t(pt?.en || activeType, pt?.zh), clear: () => setActiveType(null) });
  }
  if (openOnly) activeChips.push({ key: "open", label: t("Open to connect", "开放联系"), clear: () => setOpenOnly(false) });
  if (activeYear != null) activeChips.push({ key: "year", label: t(`Class of '${String(activeYear).slice(-2)}`, `${activeYear}届`), clear: () => setActiveYear(null) });

  return (
    <div className="hp-filterbar">
      <div className="hp-filterbar-main">
        {/* Search */}
        <div className="hp-fb-search">
          <HPIcons.Search />
          <input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder={t("Search name, major, company…", "搜索姓名、专业、公司…")}
          />
          {query && (
            <button onClick={() => setQuery("")} className="hp-search-clear" title="Clear">
              <HPIcons.X />
            </button>
          )}
        </div>

        {/* Segmented path-type — single-select with explicit ALL */}
        <div className="hp-fb-seg">
          <button
            className={`hp-fb-seg-btn ${!activeType ? "is-active" : ""}`}
            onClick={() => setActiveType(null)}
          >
            {t("All", "全部")}
          </button>
          {PATH_TYPES.map((pt) => (
            <button
              key={pt.id}
              className={`hp-fb-seg-btn ${activeType === pt.id ? "is-active" : ""}`}
              onClick={() => setActiveType(activeType === pt.id ? null : pt.id)}
              title={`${pt.en} · ${pt.zh}`}
            >
              <span className="hp-fb-seg-glyph">{pt.glyph}</span>
              <span>{t(pt.en, pt.zh)}</span>
            </button>
          ))}
        </div>

        {/* Open-to-connect toggle */}
        <button
          className={`hp-fb-toggle ${openOnly ? "is-on" : ""}`}
          onClick={() => setOpenOnly(!openOnly)}
          title="Show only Huskies open to connect · 仅显示开放联系的"
        >
          <span className={`hp-fb-toggle-track ${openOnly ? "is-on" : ""}`}>
            <span className="hp-fb-toggle-thumb" />
          </span>
          <span className="hp-fb-toggle-label">
            <span>{t("Open to connect", "开放联系")}</span>
          </span>
        </button>

        {/* Count */}
        <div className="hp-fb-count">
          <div className="hp-fb-count-big">
            {filteredCount}
            <span className="hp-fb-count-of">/{total}</span>
          </div>
          <div className="hp-fb-count-label">
            <Overline en="Paths shown" zh="路径" />
          </div>
        </div>
      </div>

      {/* Active filter chip row (only when something is on) */}
      {activeChips.length > 0 && (
        <div className="hp-filterbar-chips">
          <span className="hp-overline" style={{ fontSize: 10, color: "var(--accent-coral)" }}>
            {t("ACTIVE", "当前筛选")}
          </span>
          <div className="hp-fb-chip-row">
            {activeChips.map((c) => (
              <button key={c.key} className="hp-fb-active-chip" onClick={c.clear}>
                <span className="hp-fb-active-chip-body">
                  <span>{c.label}</span>
                </span>
                <span className="hp-fb-active-chip-x"><HPIcons.X /></span>
              </button>
            ))}
            <button className="hp-link-btn" onClick={clearFilters}>{t("Clear all", "全部清除")}</button>
          </div>
        </div>
      )}
    </div>
  );
};

window.FilterBar = FilterBar;