(() => {
  window.MamoruApp = window.MamoruApp || {};

  const { useEffect, useState } = React;
  const { C, NS, PRODUCTS, PRODUCT_KINDS, CATEGORIES, Wrap, SectionHeader, ProductCard, useIsMobile } = window.MamoruApp;

  window.MamoruApp.ProductsPage = function ProductsPage({ setPage, initialKind = "all" }) {
    const mobile = useIsMobile();
    const [activeKind, setActiveKind] = useState(initialKind);
    const [activeCat, setActiveCat] = useState("all");

    useEffect(() => {
      setActiveKind(initialKind);
    }, [initialKind]);

    const filtered = PRODUCTS.filter(
      (p) => (activeKind === "all" || p.kind === activeKind) && (activeCat === "all" || p.cat === activeCat)
    );
    const catMap = CATEGORIES.reduce((acc, cat) => ({ ...acc, [cat.key]: cat }), {});

    const FilterButton = ({ active, onClick, children }) => (
      <button onClick={onClick} className={`filter-pill${active ? " is-active" : ""}`}>
        {children}
      </button>
    );

    const FilterGroup = ({ title, note, children }) => (
      <div className="filter-group">
        <div className="filter-group__head">
          <div className="filter-group__title">{title}</div>
          <div className="filter-group__note">{note}</div>
        </div>
        <div className="filter-pills">{children}</div>
      </div>
    );

    return (
      <div className="page-shell">
      <Wrap className="page-wrap">
        <button onClick={() => setPage("home")} className="page-back-link" style={{ marginBottom: mobile ? 22 : 28 }}>
          ← トップへ戻る
        </button>

        <section className="page-hero-card" style={{ marginBottom: mobile ? 22 : 28 }}>
          <SectionHeader
            eyebrow="Goods List"
            title="防犯グッズを比べて選ぶ"
            body="夜道の備えに絞って、防犯ブザー、防犯スプレー、小型ライト、GPSタグの見た目、持ち歩きやすさ、機能の違いを落ち着いて比べられます。"
            maxWidth={620}
            action={
              <div style={{ fontSize: 13, fontFamily: NS, color: C.muted, lineHeight: 1.7, textAlign: mobile ? "left" : "right" }}>
                表示中 <strong style={{ color: C.navy, fontSize: 18 }}>{filtered.length}</strong> 件
              </div>
            }
          />
        </section>

        <section className="filter-panel" style={{ marginBottom: mobile ? 22 : 28 }}>
          <div className="filter-panel__grid" style={mobile ? { gap: 18 } : undefined}>
            <FilterGroup title="製品種類" note="まずは持ち歩く種類から絞る">
              <FilterButton active={activeKind === "all"} onClick={() => setActiveKind("all")}>すべて</FilterButton>
              {PRODUCT_KINDS.map((kind) => (
                <FilterButton key={kind.key} active={activeKind === kind.key} onClick={() => setActiveKind(kind.key)}>
                  {kind.label}
                </FilterButton>
              ))}
            </FilterGroup>
            <FilterGroup title="機能別" note="グッズの役割で探す">
              <FilterButton active={activeCat === "all"} onClick={() => setActiveCat("all")}>すべて</FilterButton>
              {CATEGORIES.map((c) => (
                <FilterButton key={c.key} active={activeCat === c.key} onClick={() => setActiveCat(c.key)}>
                  {c.key} / {c.label}
                </FilterButton>
              ))}
            </FilterGroup>
          </div>
        </section>

        <div className="catalog-grid">
          {filtered.map((p) => {
            const cat = catMap[p.cat] || {};
            return <ProductCard key={p.id} product={p} categoryLabel={cat.label} setPage={setPage} />;
          })}
        </div>

        <section className="info-note-grid" style={{ marginTop: mobile ? 34 : 44 }}>
          <div className="info-note-card">
            <div className="info-note-card__title">選び方メモ</div>
            <p className="info-note-card__body">
              夜道だけで考えるなら、まずは防犯ブザー、防犯スプレー、小型ライト、GPSタグのどれを持つか決め、そのあとに見た目、取り出しやすさ、持ち歩きやすさを比べると選びやすくなります。
            </p>
          </div>
          <div className="info-note-card info-note-card--tint">
            <div className="info-note-card__title">確認ポイント</div>
            <p className="info-note-card__body" style={{ fontSize: 12 }}>
              携帯や使用に条件がある商品もあります。購入前に商品の説明、自治体や店舗の案内、使用場所のルールを確認してください。
            </p>
          </div>
        </section>
      </Wrap>
      </div>
    );
  };
})();