// Stock Levels page

function StockLevelsPage({ rows, deltaIds = [], highlightItemId }) {
  // Group rows by item
  const byItem = {};
  rows.forEach(r => { (byItem[r.itemId] = byItem[r.itemId] || []).push(r); });

  return (
    <main className="px-8 py-6 space-y-4">
      <BiPageHeader title="Stock Levels" subtitle="Live SUM(delta) across all locations" actions={<Button size="sm" variant="primary"><Icon name="plus" size={13}/>New Adjustment</Button>}/>
      {/* Toolbar */}
      <div className="flex items-center gap-3">
        <div className="flex items-center gap-1 p-0.5 rounded-md bg-[var(--sunken)] border border-[var(--hairline)]">
          {["All Locations", "MUM-1", "MUM-2", "PUN-1", "SHOP"].map((l, i) => (
            <button key={l} className={cn(
              "h-7 px-2.5 rounded text-[12px] font-medium transition-colors",
              i === 0 ? "bg-[var(--surface)] text-[var(--ink)] shadow-[var(--elev-1)]" : "text-[var(--ink-3)] hover:text-[var(--ink)]"
            )}>{l}</button>
          ))}
        </div>
        <div className="flex-1"/>
        <button className="flex items-center gap-2 h-9 px-3 rounded-md border border-[var(--hairline)] bg-[var(--surface)] text-[12.5px] text-[var(--ink-2)] hover:bg-[var(--sunken)]">
          <Icon name="filter" size={13}/>Filters <Pill kind="accent" className="!h-[18px] !text-[10px]">2</Pill>
        </button>
        <button className="flex items-center gap-2 h-9 px-3 rounded-md border border-[var(--hairline)] bg-[var(--surface)] text-[12.5px] text-[var(--ink-2)] hover:bg-[var(--sunken)]">
          <Icon name="download" size={13}/>Export
        </button>
      </div>

      <Card className="overflow-hidden" dataId="stock-table">
        <table className="w-full">
          <thead>
            <tr className="border-b border-[var(--hairline-2)] bg-[var(--canvas)]">
              <th className="type-table-head text-left px-5 py-3" style={{ width: 320 }}>Item</th>
              <th className="type-table-head text-left px-3 py-3">SKU</th>
              <th className="type-table-head text-left px-3 py-3">Location</th>
              <th className="type-table-head text-right px-3 py-3">On Hand</th>
              <th className="type-table-head text-right px-3 py-3">Reorder</th>
              <th className="type-table-head text-right px-3 py-3">Value</th>
              <th className="type-table-head text-left px-3 py-3">Status</th>
              <th className="type-table-head text-right px-5 py-3"></th>
            </tr>
          </thead>
          <tbody>
            {Object.entries(byItem).map(([itemId, locRows]) => {
              const item = itemById(itemId);
              return locRows.map((r, idx) => {
                const loc = locById(r.locId);
                const isLow = r.qty < item.reorder;
                const value = r.qty * item.cost;
                const isDelta = deltaIds.includes(`${itemId}-${r.locId}`);
                const highlighted = highlightItemId === itemId;
                return (
                  <tr key={`${itemId}-${r.locId}`}
                    data-id={`stock-row-${itemId}-${r.locId}`}
                    className={cn(
                      "border-b border-[var(--hairline)] last:border-0 transition-colors",
                      highlighted ? "bg-[var(--accent-1-wash)]" : "hover:bg-[var(--sunken)]"
                    )}>
                    <td className="px-5 py-3">
                      {idx === 0 ? (
                        <div className="flex items-center gap-2.5">
                          <div className="w-8 h-8 rounded-md grid place-items-center" style={{ background: "var(--sunken)", color: "var(--ink-3)" }}>
                            <Icon name="package" size={14}/>
                          </div>
                          <div>
                            <div className="text-[13.5px] font-semibold text-[var(--ink)]">{item.name}</div>
                            <div className="text-[11.5px] text-[var(--ink-3)]">{item.unit}{item.altUnit ? ` · ${item.altUnit}` : ""} · GST {item.gst}%</div>
                          </div>
                        </div>
                      ) : (
                        <div className="pl-[44px] text-[12px] text-[var(--ink-4)]">↳</div>
                      )}
                    </td>
                    <td className="px-3 py-3 text-[12.5px] text-[var(--ink-2)] mono">{idx === 0 ? item.sku : ""}</td>
                    <td className="px-3 py-3">
                      <div className="flex items-center gap-2 text-[13px] text-[var(--ink-2)]">
                        <Icon name="map-pin" size={12} className="text-[var(--ink-4)]"/>
                        <span>{loc.code}</span>
                        <span className="text-[var(--ink-4)]">·</span>
                        <span className="text-[var(--ink-3)] text-[12px]">{loc.name}</span>
                      </div>
                    </td>
                    <td className="px-3 py-3 text-right">
                      <div className={cn("text-[14px] font-semibold tabular-nums transition-colors", isDelta && "text-[var(--positive-text)]")}>
                        <CountUp value={r.qty}/>
                        {isDelta && <span className="ml-1.5 text-[11px] font-medium opacity-80">▲</span>}
                      </div>
                      <div className="text-[11px] text-[var(--ink-3)]">{item.unit}</div>
                    </td>
                    <td className="px-3 py-3 text-right text-[13px] text-[var(--ink-3)] tabular-nums">{item.reorder.toLocaleString("en-IN")}</td>
                    <td className="px-3 py-3 text-right text-[13px] text-[var(--ink)] tabular-nums font-medium">{fmtINR(value)}</td>
                    <td className="px-3 py-3">
                      {isLow
                        ? <Pill kind="caution"><Icon name="alert-triangle" size={11}/>Low</Pill>
                        : <StatusBadge status="open" label="In stock"/>}
                    </td>
                    <td className="px-5 py-3 text-right">
                      <button className="w-7 h-7 rounded-md grid place-items-center text-[var(--ink-3)] hover:bg-[var(--sunken)] hover:text-[var(--ink)]">
                        <Icon name="ellipsis" size={14}/>
                      </button>
                    </td>
                  </tr>
                );
              });
            })}
          </tbody>
        </table>
        {/* footer */}
        <div className="flex items-center justify-between px-5 py-3 border-t border-[var(--hairline)] text-[12px] text-[var(--ink-3)]">
          <span>{rows.length} of {rows.length} rows</span>
          <span className="flex items-center gap-2">
            <span>Live · <span className="tabular-nums text-[var(--ink-2)]">SUM(delta) over append-only ledger</span></span>
            <span className="w-1.5 h-1.5 rounded-full bg-[var(--positive)] animate-pulse"/>
          </span>
        </div>
      </Card>
    </main>
  );
}

Object.assign(window, { StockLevelsPage });