// Xedap.vn category listing: filters rail + product grid.
const { ProductCard, Badge, Button, SearchField } = window.XedapVnDesignSystem_03b1c0;

function FilterGroup({ title, options, selected, onToggle }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10, paddingBottom: 20, borderBottom: "1px solid var(--border)", marginBottom: 20 }}>
      <h3 style={{ margin: 0, fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 600 }}>{title}</h3>
      {options.map((o) => (
        <label key={o} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14, color: "rgba(51,51,51,.8)", cursor: "pointer" }}>
          <span style={{ display: "flex", alignItems: "center", justifyContent: "center", width: 18, height: 18, borderRadius: 5, border: `1.5px solid ${selected.includes(o) ? "var(--primary)" : "var(--input)"}`, background: selected.includes(o) ? "var(--primary)" : "#fff" }}>
            {selected.includes(o) && <i className="ph ph-check" style={{ fontSize: 12, color: "#fff" }} />}
          </span>
          <input type="checkbox" checked={selected.includes(o)} onChange={() => onToggle(o)} style={{ display: "none" }} />
          {o}
        </label>
      ))}
    </div>
  );
}

function CategoryListing({ onAdd, onOpen }) {
  const { PRODUCTS, IMG } = window.KitData;
  const [cats, setCats] = React.useState([]);
  const toggle = (o) => setCats((s) => s.includes(o) ? s.filter((x) => x !== o) : [...s, o]);
  const shown = PRODUCTS.filter((p) => cats.length === 0 || cats.includes(p.category));
  const sorts = ["Phổ biến", "Giá thấp → cao", "Giá cao → thấp", "Mới nhất"];
  const [sort, setSort] = React.useState(0);
  return (
    <main>
      <div style={{ borderBottom: "1px solid var(--border)", background: "color-mix(in srgb, var(--secondary) 30%, #fff)" }}>
        <div style={{ maxWidth: 1440, margin: "0 auto", padding: "40px 24px" }}>
          <p style={{ margin: "0 0 8px", fontSize: 13, color: "var(--muted-foreground)" }}>Trang chủ · Cửa hàng</p>
          <h1 style={{ margin: 0, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 40, letterSpacing: "-0.02em" }}>Tất cả xe đạp</h1>
          <p style={{ margin: "8px 0 0", fontSize: 15, color: "var(--muted-foreground)" }}>{shown.length} sản phẩm · giao nhanh, bảo hành chính hãng</p>
        </div>
      </div>
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "40px 24px 80px", display: "grid", gridTemplateColumns: "260px 1fr", gap: 40, alignItems: "start" }}>
        <aside style={{ position: "sticky", top: 88 }}>
          <div style={{ marginBottom: 20 }}><SearchField placeholder="Lọc theo tên…" /></div>
          <FilterGroup title="Loại xe" options={window.KitData.CATEGORIES} selected={cats} onToggle={toggle} />
          <FilterGroup title="Thương hiệu" options={["Kova", "Trailix", "Veloce", "Skyline"]} selected={[]} onToggle={() => {}} />
          <FilterGroup title="Khoảng giá" options={["Dưới 5 triệu", "5 - 10 triệu", "Trên 10 triệu"]} selected={[]} onToggle={() => {}} />
        </aside>
        <div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24, gap: 12, flexWrap: "wrap" }}>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {cats.map((c) => <Badge key={c} variant="secondary"><i className="ph ph-x" style={{ cursor: "pointer" }} onClick={() => toggle(c)} /> {c}</Badge>)}
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              {sorts.map((s, i) => (
                <button key={s} onClick={() => setSort(i)} style={{ height: 36, padding: "0 14px", borderRadius: 5, border: "1px solid var(--border)", background: i === sort ? "var(--foreground)" : "#fff", color: i === sort ? "#fff" : "rgba(51,51,51,.7)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500, cursor: "pointer" }}>{s}</button>
              ))}
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 }}>
            {shown.map((p) => <ProductCard key={p.slug} product={{ ...p, image: IMG(p.seed) }} onAdd={onAdd} onClick={() => onOpen && onOpen(p)} />)}
          </div>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { CategoryListing });