import type { GameSliceSession } from "../types";
import { sellableCargo } from "../sliceEconomy";
import { metricLabel, sliceButton } from "./sliceStyles";

export function SliceMarketService({
  session,
  onSell,
}: {
  session: GameSliceSession;
  onSell: (item: string, quantity: number, unitPrice: number) => void;
}) {
  const cargo = sellableCargo(session.cargo);
  return (
    <div style={{ display: "grid", gap: 12 }}>
      <div>
        <div style={metricLabel}>Commodities Exchange</div>
        <h2 style={{ margin: "6px 0 0", color: "#f8fafc", fontSize: 20, letterSpacing: 0 }}>Market</h2>
      </div>
      {cargo.length === 0 ? (
        <p style={{ color: "#94a3b8", margin: 0 }}>No sellable cargo is available.</p>
      ) : cargo.map((item) => (
        <div key={`${item.category}-${item.item}`} style={{ border: "1px solid rgba(148,163,184,0.16)", borderRadius: 8, padding: 12, background: "rgba(15,23,42,0.36)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
            <span>{item.item}</span>
            <span style={{ fontFamily: "var(--font-mono)", color: "#22c55e" }}>{(item.quantity * item.unitPrice).toLocaleString()} ISK</span>
          </div>
          <div style={{ marginTop: 8, display: "flex", justifyContent: "space-between", gap: 8, alignItems: "center" }}>
            <span style={{ color: "#94a3b8", fontSize: 12 }}>{item.quantity.toLocaleString()} units · {item.unitPrice} ISK/unit</span>
            <button style={sliceButton} onClick={() => onSell(item.item, item.quantity, item.unitPrice)}>Sell Stack</button>
          </div>
        </div>
      ))}
    </div>
  );
}
