// Products page — všechny produkty na jedné stránce s filtračními pilulkami
// (filtr na místě, bez načítání). Dropdown deep-linkuje konkrétní kategorii.
(function () {
  if (typeof React === "undefined") return;
  const Icon = window.VNIcon;

  const FILTERS = [
    { id: "vse", label: "Vše" },
    { id: "carnica", label: "Kraňka" },
    { id: "buckfast", label: "Buckfast" },
    { id: "inseminace", label: "Inseminované" },
    { id: "oddelky", label: "Oddělky a včelstva" },
  ];
  const matchFilter = (p, f) => f === "vse" ? true : p.cat === f;

  function Products({ go, catId, addToCart, onQuickView, onNotify, onPreorder }) {
    const D = window.SHOP_DATA;
    const norm = (id) => (!id || id === "all") ? "vse" : (FILTERS.some((f) => f.id === id) ? id : "vse");
    const [filter, setFilter] = React.useState(norm(catId));
    const [loading, setLoading] = React.useState(true);
    const [fading, setFading] = React.useState(false);

    // initial skeleton (once)
    React.useEffect(() => {
      const t = setTimeout(() => setLoading(false), 500);
      return () => clearTimeout(t);
    }, []);
    // deep-link: sync the active filter when the nav passes a category
    React.useEffect(() => { setFilter(norm(catId)); }, [catId]);

    const counts = React.useMemo(() => {
      const c = {};
      FILTERS.forEach((f) => { c[f.id] = D.products.filter((p) => matchFilter(p, f.id)).length; });
      return c;
    }, []);

    const items = D.products.filter((p) => matchFilter(p, filter)).sort((a, b) => b.reviews - a.reviews);

    const pick = (id) => {
      if (id === filter) return;
      setFading(true);
      setTimeout(() => { setFilter(id); setFading(false); }, 160);
    };

    const gridStyle = {
      opacity: fading ? 0 : 1,
      transform: fading ? "translateY(8px)" : "none",
      transition: "opacity 160ms ease, transform 160ms ease",
      paddingBottom: "var(--section-y)",
    };

    return (
      <main className="kit">
        <div className="kit-shell kit-cathead">
          <nav className="kit-breadcrumb">
            <a href="#" onClick={(e)=>{e.preventDefault();go("home");}}>Domů</a>
            <Icon name="chevronRight" size={13} /> <span>Nabídka</span>
          </nav>
          <h1>Naše nabídka</h1>
          <p>Kraňské a buckfast matky, inseminovaný chovný materiál, oddělky a včelstva — všechno na jednom místě. Sezónní nabídka, omezený počet kusů.</p>
        </div>

        <div className="kit-shell">
          <div className="kit-pfilter" role="tablist" aria-label="Filtr produktů">
            {FILTERS.map((f) => (
              <button
                key={f.id}
                role="tab"
                aria-selected={filter === f.id}
                className={"kit-pfilter__btn" + (filter === f.id ? " is-active" : "")}
                onClick={() => pick(f.id)}
              >
                {f.label}<span className="kit-pfilter__count">{counts[f.id]}</span>
              </button>
            ))}
          </div>

          <div className="kit-pgrid" style={gridStyle}>
            {loading && [0,1,2,3,4,5].map((i) => (
              <div className="vn-skel" key={"s"+i} aria-hidden="true">
                <div className="vn-skel__img" />
                <div className="vn-skel__body">
                  <div className="vn-skel__line vn-skel__line--sm" />
                  <div className="vn-skel__line vn-skel__line--lg" />
                  <div className="vn-skel__line vn-skel__line--sm" />
                </div>
              </div>
            ))}
            {!loading && items.length === 0 && (
              <div className="kit-pempty">
                <p className="kit-pempty__t">Brzy přidáme</p>
                <p>Tahle část nabídky se právě připravuje.</p>
              </div>
            )}
            {!loading && items.map((p) => (
              <window.VNProductCard key={p.id} product={p}
                onOpen={(pr) => go("product", pr.id)} onAdd={() => addToCart(p)}
                onQuickView={onQuickView} onNotify={onNotify} onPreorder={onPreorder} />
            ))}
          </div>
        </div>
      </main>
    );
  }

  window.VNCategory = Products;
})();