/* OrchEcomm — Modules marketplace: installed modules + full catalog grouped by category. */
function ModulesScreen({ modules, onToggleModule, onNavigate, onToast }) {
  const I = window.OcIcons;
  const { Card, Badge, Button, StatusDot, Switch } = window.OrchEcommDesignSystem_091be6;
  const catalog = window.OcData.moduleCatalog;
  const [filter, setFilter] = React.useState("All");

  const allItems = catalog.flatMap((g) => g.items);
  const counts = {
    active: allItems.filter((i) => i.status === "active").length,
    awaiting: allItems.filter((i) => i.status === "awaiting").length,
    available: allItems.filter((i) => i.status === "available").length,
  };
  const cats = ["All", "Active", "Awaiting approval", "Available", "Beta", "Coming soon"];
  const statusMatch = { "Active": "active", "Awaiting approval": "awaiting", "Available": "available", "Beta": "beta", "Coming soon": "soon" };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
      {/* Hero */}
      <div style={{ background: "linear-gradient(120deg, var(--green-800), var(--green-900))", borderRadius: "var(--radius-md)", padding: "20px 24px", color: "#fff", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, opacity: 0.4, backgroundImage: "radial-gradient(circle at 1px 1px, rgba(255,255,255,0.12) 1px, transparent 0)", backgroundSize: "24px 24px" }} />
        <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 18 }}>
          <span style={{ width: 48, height: 48, borderRadius: "var(--radius-md)", background: "rgba(255,255,255,0.12)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#fff", flexShrink: 0 }}><I.Puzzle size={26} /></span>
          <div style={{ flex: 1 }}>
            <div style={{ font: "var(--type-section)", color: "#fff" }}>The more modules you connect, the more OrchEcomm does for you</div>
            <div style={{ font: "var(--type-body)", color: "var(--green-200)", marginTop: 4, maxWidth: 600 }}>Every module shares one data layer and reacts to the others' events — a price change can trigger a new banner, no manual wiring.</div>
          </div>
          <div style={{ display: "flex", gap: 22, textAlign: "center" }}>
            <span><div style={{ font: "var(--type-metric)", color: "#fff" }}>{counts.active}</div><div style={{ fontSize: 11, color: "var(--green-200)" }}>active</div></span>
            <span><div style={{ font: "var(--type-metric)", color: "var(--green-300)" }}>{counts.awaiting}</div><div style={{ fontSize: 11, color: "var(--green-200)" }}>awaiting</div></span>
            <span><div style={{ font: "var(--type-metric)", color: "var(--green-300)" }}>{counts.available}</div><div style={{ fontSize: 11, color: "var(--green-200)" }}>available</div></span>
          </div>
        </div>
      </div>

      {/* Filter chips */}
      <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", position: "sticky", top: "calc(var(--topbar-height))", zIndex: 5 }}>
        {cats.map((c) => (
          <button key={c} onClick={() => setFilter(c)}
            style={{ height: 32, padding: "0 14px", borderRadius: "var(--radius-full)", border: "1px solid " + (filter === c ? "var(--green-700)" : "var(--border-default)"), background: filter === c ? "var(--green-800)" : "var(--surface-card)", color: filter === c ? "#fff" : "var(--text-secondary)", font: "var(--type-body)", fontWeight: 500, cursor: "pointer", transition: "all var(--transition-fast)" }}>{c}</button>
        ))}
      </div>

      {/* Catalog by category */}
      {catalog.map((g) => {
        const items = filter === "All" ? g.items : g.items.filter((it) => it.status === statusMatch[filter]);
        if (!items.length) return null;
        const GIcon = I[g.icon] || I.Puzzle;
        return (
          <div key={g.group}>
            <div style={{ display: "flex", alignItems: "center", gap: 9, margin: "6px 0 12px" }}>
              <span style={{ width: 26, height: 26, borderRadius: "var(--radius-sm)", background: "var(--green-100)", color: "var(--green-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><GIcon size={15} /></span>
              <span style={{ font: "var(--type-section)", color: "var(--text-primary)" }}>{g.group}</span>
              <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{items.length}</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--gap-grid)" }}>
              {items.map((it) => <CatalogCard key={it.name} it={it} onToast={onToast} onNavigate={onNavigate} />)}
            </div>
          </div>
        );
      })}
    </div>
  );
}

const STATUS_META = {
  active: { label: "Active", tone: "success", dot: true },
  awaiting: { label: "Awaiting approval", tone: "warning", dot: true },
  available: { label: "Available", tone: "neutral", dot: false },
  beta: { label: "Beta", tone: "brand", dot: false },
  soon: { label: "Coming soon", tone: "neutral", dot: false },
};

function CatalogCard({ it, onToast, onNavigate }) {
  const I = window.OcIcons;
  const { Card, Badge, Button, StatusDot } = window.OrchEcommDesignSystem_091be6;
  const [hover, setHover] = React.useState(false);
  const Icon = I[it.icon] || I.Puzzle;
  const meta = STATUS_META[it.status];
  const on = it.status === "active";

  const action = () => {
    if (it.core) return onNavigate("visual");
    if (it.status === "available") return onToast("Installing " + it.name + "…");
    if (it.status === "awaiting") return onToast(it.name + " — approval requested");
    if (it.status === "beta") return onToast("Joined beta · " + it.name);
    if (it.status === "soon") return onToast("We'll notify you when " + it.name + " is ready");
    return onToast(it.name);
  };
  const cta = it.core ? "Open" : it.status === "active" ? "Manage" : it.status === "available" ? "Install" : it.status === "awaiting" ? "Review" : it.status === "beta" ? "Try beta" : "Notify me";

  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "flex", flexDirection: "column", gap: 10, background: "var(--surface-card)", border: "1px solid " + (on ? "var(--green-300)" : "var(--border-default)"), borderRadius: "var(--radius-md)", padding: 16, boxShadow: hover ? "var(--shadow-md)" : "var(--shadow-xs)", transform: hover ? "translateY(-1px)" : "none", transition: "box-shadow var(--transition-base), transform var(--transition-base)" }}>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 10 }}>
        <span style={{ width: 40, height: 40, borderRadius: "var(--radius-md)", background: on ? "var(--green-100)" : "var(--ink-100)", color: on ? "var(--green-700)" : "var(--text-secondary)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon size={20} /></span>
        <Badge tone={meta.tone} dot={meta.dot}>{meta.label}</Badge>
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ font: "var(--type-card-title)", color: "var(--text-primary)", display: "flex", alignItems: "center", gap: 6 }}>
          {it.name}
          {it.core ? <span style={{ fontSize: 10, fontWeight: 700, color: "var(--green-800)", background: "var(--green-200)", borderRadius: "var(--radius-full)", padding: "1px 6px" }}>CORE</span> : null}
        </div>
        <p style={{ font: "var(--type-caption)", color: "var(--text-secondary)", lineHeight: "var(--leading-normal)", margin: "5px 0 0" }}>{it.desc}</p>
      </div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: "auto", paddingTop: 6 }}>
        {on ? <StatusDot status="active" pulse withLabel label="Running" /> : it.status === "awaiting" ? <span style={{ font: "var(--type-caption)", color: "var(--color-warning-fg)", display: "inline-flex", alignItems: "center", gap: 5 }}><I.Bell size={12} /> Pending review</span> : <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{it.status === "soon" ? "In development" : "Not installed"}</span>}
        <Button variant={on || it.core ? "secondary" : it.status === "available" ? "primary" : "ghost"} size="sm" onClick={action} disabled={it.status === "soon"}>{cta}</Button>
      </div>
    </div>
  );
}

window.ModulesScreen = ModulesScreen;