// Inventory — multiple developments, unit grid / list, status legend.

function UnitCard({ u, onClick }) {
  return (
    <div className="rc-unitcard" onClick={onClick}>
      <div className="rc-unitcard-img">
        <span className="rc-unitcard-code">{u.code}</span>
        <Pill tone={u.status} size="sm">{u.status}</Pill>
      </div>
      <div className="rc-unitcard-body">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <div className="rc-unitcard-type">{u.type}</div>
          <div style={{ fontSize: 11.5, color: "var(--text-muted)", whiteSpace: "nowrap", flexShrink: 0 }}>Floor {u.floor}</div>
        </div>
        <div className="rc-unitcard-specs">
          <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><Icon name="bed" size={13} />{u.beds} bed</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><Icon name="ruler" size={13} />{u.size} m²</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><Icon name="eye" size={13} />{u.view}</span>
        </div>
        <div className="rc-unitcard-price">{money(u.price)}</div>
      </div>
    </div>
  );
}

function Inventory() {
  const toast = useToast();
  const [dev, setDev] = React.useState("marina");
  const [layout, setLayout] = React.useState("grid");
  const [statusFilter, setStatusFilter] = React.useState("all");
  const d = DEVELOPMENTS.find((x) => x.id === dev);
  let units = UNITS.filter((u) => u.dev === dev);
  if (statusFilter !== "all") units = units.filter((u) => u.status === statusFilter);

  const columns = [
    { key: "code", label: "Unit", sortable: true, render: (u) => <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12.5, fontWeight: 600 }}>{u.code}</span> },
    { key: "type", label: "Type", sortable: true },
    { key: "floor", label: "Floor", sortable: true, render: (u) => <span>Floor {u.floor}</span> },
    { key: "size", label: "Size", sortable: true, render: (u) => <span>{u.size} m²</span> },
    { key: "view", label: "View", sortable: true, render: (u) => <span style={{ color: "var(--text-muted)" }}>{u.view}</span> },
    { key: "status", label: "Status", sortable: true, render: (u) => <Pill tone={u.status} size="sm" dot>{u.status}</Pill> },
    { key: "price", label: "Price", sortable: true, align: "right", render: (u) => <span style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{money(u.price)}</span> },
  ];

  return (
    <div className="rc-page">
      <div className="rc-pagehead">
        <div>
          <h1 className="rc-h1">Inventory</h1>
          <div className="rc-sub">98 units across 3 developments · 35 available</div>
        </div>
        <div className="rc-head-cta">
          <div className="rc-segmented">
            <button className={`rc-segbtn ${layout === "grid" ? "is-active" : ""}`} onClick={() => setLayout("grid")}><Icon name="grid" size={13} /></button>
            <button className={`rc-segbtn ${layout === "list" ? "is-active" : ""}`} onClick={() => setLayout("list")}><Icon name="list" size={13} /></button>
          </div>
          <button className="rc-btn-primary" onClick={() => toast({ title: "Add unit (demo)" })}><Icon name="plus" size={14} />Add unit</button>
        </div>
      </div>

      {/* development selector */}
      <div className="rc-dev-tabs">
        {DEVELOPMENTS.map((x) => (
          <button key={x.id} className={`rc-dev-tab ${dev === x.id ? "is-active" : ""}`} onClick={() => { setDev(x.id); setStatusFilter("all"); }} style={{ flex: 1, minWidth: 200 }}>
            <div className="rc-unit-thumb" style={{ width: 42, height: 42 }}><Icon name="building" size={18} /></div>
            <div style={{ flex: 1 }}>
              <div className="rc-dev-tab-name">{x.name}</div>
              <div className="rc-dev-tab-meta">{x.city} · {x.available} available · from {moneyK(x.priceFrom)}</div>
            </div>
          </button>
        ))}
      </div>

      <div className="rc-card" style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", padding: "12px 18px", flexWrap: "wrap", gap: 12 }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>{d.name}</div>
          <div style={{ fontSize: 12.5, color: "var(--text-muted)", marginTop: 2 }}>{d.blurb}</div>
        </div>
        <div className="rc-unit-legend">
          {["all", "Available", "Reserved", "Sold"].map((s) => (
            <button key={s} className="rc-btn-ghost rc-btn-sm" style={{ color: statusFilter === s ? "var(--brand)" : "var(--text-muted)", fontWeight: statusFilter === s ? 700 : 500 }} onClick={() => setStatusFilter(s)}>
              {s !== "all" && <span className="rc-legend-dot" style={{ background: { Available: "#1f8a52", Reserved: "#f59e0b", Sold: "#9a958c" }[s] }} />}
              {s === "all" ? "All" : s}
            </button>
          ))}
        </div>
      </div>

      {layout === "grid" ? (
        <div className="rc-unit-grid">
          {units.map((u) => <UnitCard key={u.id} u={u} onClick={() => toast({ title: u.code, body: u.type + " · " + money(u.price) })} />)}
        </div>
      ) : (
        <RCDataTable data={units} columns={columns} searchKeys={["code", "type", "view"]} onRowClick={(u) => toast({ title: u.code, body: u.type + " · " + money(u.price) })} empty={{ title: "No units", body: "No units match this filter." }} />
      )}
    </div>
  );
}

Object.assign(window, { Inventory, UnitCard });