import type { GameSliceSession } from "../types";
import { sliceButton, slicePanel } from "./sliceStyles";
import { SliceRefiningService } from "./SliceRefiningService";
import { SliceFittingService } from "./SliceFittingService";
import { SliceMarketService } from "./SliceMarketService";

export function SliceServicesStage({
  session,
  onClose,
  onRefine,
  onUpdateFit,
  onSell,
}: {
  session: GameSliceSession;
  onClose: () => void;
  onRefine: (quantity: number) => void;
  onUpdateFit: Parameters<typeof SliceFittingService>[0]["onUpdate"];
  onSell: (item: string, quantity: number, unitPrice: number) => void;
}) {
  return (
    <section className="slice-loop-panel" style={{ ...slicePanel, height: "100%", minHeight: 0, padding: 18, boxSizing: "border-box", overflow: "auto" }}>
      <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "center", marginBottom: 16 }}>
        <strong style={{ color: "#f0a030" }}>{session.dockedStationName ?? "Station Services"}</strong>
        <button style={sliceButton} onClick={onClose}>Close Service</button>
      </div>
      {session.activeService === "refining" && <SliceRefiningService session={session} onRefine={onRefine} />}
      {session.activeService === "fitting" && <SliceFittingService session={session} onUpdate={onUpdateFit} />}
      {session.activeService === "market" && <SliceMarketService session={session} onSell={onSell} />}
      {!session.activeService && <p style={{ color: "#94a3b8" }}>Select a station service from the action rail.</p>}
    </section>
  );
}
