// ShopScreen — browsable grid with Age, Theme, and Price filters.
const SS = window.TheLittleScoopDesignSystem_cee583;

function FilterGroup({ label, children }) {
  return (
    <div style={{ marginBottom: "var(--space-4)" }}>
      <div style={{ fontFamily: "var(--font-body)", fontWeight: 800, fontSize: "var(--text-xs)", letterSpacing: "0.06em",
        textTransform: "uppercase", color: "var(--text-muted)", marginBottom: "var(--space-2)" }}>{label}</div>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>{children}</div>
    </div>
  );
}

function ShopScreen({ category, onAdd, onOpen, mobile }) {
  const { FilterChip, Select, ProductCard, Button } = SS;
  const data = window.SCOOP_DATA;
  const CAT_LABELS = {
    "scoop-kits": "Scoop & Pour Kits", "filler-bags": "Scoop & Pour Filler Bags",
    "masterpiece": "Masterpiece Box Kit", "playpack": "Playpack Bag Kit",
    "little-wonder": "Little Wonder Kit", "treasure-jars": "Treasure Jars", "dough-jars": "Dough Jars",
  };
  const [theme, setTheme] = React.useState(null);
  const [catFilter, setCatFilter] = React.useState(null);
  const [price, setPrice] = React.useState(null); // 'lt9' | '9to11' | 'gt11'
  const [sort, setSort] = React.useState("loved");
  const CAT_OPTIONS = [
    { id: "scoop-kits", label: "Scoop & Pour Kits" },
    { id: "filler-bags", label: "Scoop & Pour Filler Bags" },
    { id: "masterpiece", label: "Masterpiece Box Kit" },
    { id: "playpack", label: "Playpack Bag Kit" },
    { id: "little-wonder", label: "Little Wonder Kit" },
    { id: "treasure-jars", label: "Treasure Jars" },
    { id: "dough-jars", label: "Dough Jars" },
  ];

  const priceBands = [
    { id: "lt9", label: "Under $9", test: (p) => p.price < 9 },
    { id: "9to11", label: "$9 – $11", test: (p) => p.price >= 9 && p.price <= 11 },
    { id: "gt11", label: "$12 +", test: (p) => p.price > 11 },
  ];

  let list = data.products.filter((p) =>
    (!category || p.collection === category) &&
    (!catFilter || p.collection === catFilter) &&
    (!theme || p.theme === theme) &&
    (!price || priceBands.find((b) => b.id === price).test(p))
  );
  if (sort === "low") list = [...list].sort((a, b) => a.price - b.price);
  if (sort === "high") list = [...list].sort((a, b) => b.price - a.price);

  const activeCount = [catFilter, theme, price].filter(Boolean).length;

  const Filters = (
    <div>
      {!category && (
        <FilterGroup label="Category">
          {CAT_OPTIONS.map((c) => <FilterChip key={c.id} selected={catFilter === c.id} onClick={() => setCatFilter(catFilter === c.id ? null : c.id)}>{c.label}</FilterChip>)}
        </FilterGroup>
      )}
      <FilterGroup label="Theme">
        {data.themes.map((t) => <FilterChip key={t.id} swatch={t.color} selected={theme === t.id} onClick={() => setTheme(theme === t.id ? null : t.id)}>{t.label}</FilterChip>)}
      </FilterGroup>
      <FilterGroup label="Price">
        {priceBands.map((b) => <FilterChip key={b.id} selected={price === b.id} onClick={() => setPrice(price === b.id ? null : b.id)}>{b.label}</FilterChip>)}
      </FilterGroup>
      {activeCount > 0 && (
        <button onClick={() => { setCatFilter(null); setTheme(null); setPrice(null); }}
          style={{ border: "none", background: "none", cursor: "pointer", color: "var(--brand-primary)", fontFamily: "var(--font-body)", fontWeight: 800, fontSize: "var(--text-sm)", padding: "4px 0" }}>
          Clear filters ({activeCount})
        </button>
      )}
    </div>
  );

  return (
    <div style={{ background: "#fff" }}>
    <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "var(--space-6) var(--container-pad)" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: "var(--space-3)", marginBottom: "var(--space-5)" }}>
        <div>
          <h1 style={{ margin: "0 0 4px", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--text-3xl)", color: "var(--text-strong)" }}>{category ? CAT_LABELS[category] || "Shop" : "Shop all bins"}</h1>
          <p style={{ margin: 0, color: "var(--text-body)", fontSize: "var(--text-md)" }}>{list.length} {list.length === 1 ? "bin" : "bins"} ready to scoop</p>
        </div>
        <Select value={sort} onChange={setSort} options={[
          { value: "loved", label: "Sort: Most loved" },
          { value: "low", label: "Price: low to high" },
          { value: "high", label: "Price: high to low" },
        ]} />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "240px 1fr", gap: "var(--space-6)" }}>
        {mobile ? (
          <div style={{ background: "var(--white)", border: "2px solid var(--border-soft)", borderRadius: "var(--radius-xl)", padding: "var(--space-4)" }}>{Filters}</div>
        ) : (
          <aside style={{ position: "sticky", top: 92, alignSelf: "start", background: "var(--white)", border: "2px solid var(--border-soft)", borderRadius: "var(--radius-xl)", padding: "var(--space-5)" }}>{Filters}</aside>
        )}
        <div>
          {list.length === 0 ? (
            <div style={{ textAlign: "center", padding: "var(--space-8)", color: "var(--text-muted)" }}>
              <p style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-xl)", color: "var(--text-strong)" }}>No bins match just yet</p>
              <p>Try clearing a filter to see more.</p>
            </div>
          ) : (
            <div style={{ display: "grid", gridTemplateColumns: `repeat(${mobile ? 2 : 3}, 1fr)`, gap: "var(--space-5)" }}>
              {list.map((p) => (
                <ProductCard key={p.id} title={p.title} price={typeof p.priceNoBin === "number" ? p.priceNoBin : p.price} from={typeof p.priceNoBin === "number"} ages={p.ages} theme={p.theme} badge={p.badge} image={p.image}
                  onAdd={() => onAdd(p)} onClick={() => onOpen(p)} />
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
    </div>
  );
}

Object.assign(window, { ShopScreen });