/* global window, React */

window.Products = function Products({ ctx }) {
  const Icon = window.Icon;
  const cats = ["all", ...Array.from(new Set(window.REVENUE_BY_PRODUCT.map(p => p.category)))];
  const [cat, setCat] = React.useState("all");
  const list = cat === "all" ? window.REVENUE_BY_PRODUCT : window.REVENUE_BY_PRODUCT.filter(p => p.category === cat);
  const totalRev = list.reduce((a, b) => a + b.revenue, 0);

  return (
    <window.Screen
      title="Katalog Produk"
      back={true}
      onBack={() => ctx.go("profile")}
      right={<button className="icon-btn" onClick={() => ctx.notify("Search SKU")}><Icon.Search size={18} /></button>}
    >
      {/* Summary */}
      <div className="m-card" style={{ marginBottom: 12 }}>
        <div className="between">
          <div>
            <div className="label-tiny">Total revenue {cat === "all" ? "semua kategori" : cat}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700, marginTop: 2 }}>
              {window.fmtShort(totalRev)}
            </div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div className="label-tiny">SKU</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700, marginTop: 2 }}>{list.length}</div>
          </div>
        </div>
      </div>

      {/* Category chips */}
      <div className="chip-row">
        {cats.map(c => (
          <window.Chip key={c} label={c === "all" ? "Semua" : c} active={cat === c} onClick={() => setCat(c)} />
        ))}
      </div>

      {/* Product list */}
      {list.map((p, i) => (
        <div key={i} className="prod-card" onClick={() => ctx.notify(`Detail ${p.sku}`)}>
          <div className="pi"><Icon.Package size={18} /></div>
          <div className="pb">
            <div className="pn">{p.sku}</div>
            <div className="pc">{p.category} · Margin {p.margin}%</div>
          </div>
          <div className="pr">
            <div className="pv">{window.fmtShort(p.revenue)}</div>
            <div className={`pg ${p.growth >= 0 ? "up" : "down"}`}>{p.growth >= 0 ? "+" : ""}{p.growth}%</div>
          </div>
        </div>
      ))}
    </window.Screen>
  );
};