import type { GameSliceSession } from "../types";
import type { SliceFacts } from "../sliceController";
import { SLICE_STATION } from "../sliceWorld";
import { metricLabel, sliceButton, slicePanel } from "./sliceStyles";

export function SliceStationStage({
  session,
  facts,
  onOpenService,
}: {
  session: GameSliceSession;
  facts: SliceFacts;
  onOpenService: (service: "refining" | "fitting" | "market") => void;
}) {
  return (
    <section className="slice-loop-panel" style={{ ...slicePanel, height: "100%", minHeight: 0, padding: 18, display: "grid", gridTemplateRows: "auto 1fr auto", gap: 16, boxSizing: "border-box", overflow: "auto" }}>
      <div>
        <div style={metricLabel}>Docked Facility</div>
        <h1 className="slice-loop-title" style={{ margin: "6px 0 0", color: "#f8fafc", fontSize: 28, letterSpacing: 0 }}>{session.dockedStationName ?? SLICE_STATION.name}</h1>
        <p className="slice-loop-copy" style={{ margin: "8px 0 0", color: "#94a3b8", maxWidth: 720 }}>
          Station services are available while docked. Use them in any order that matches your cargo and fitting needs, or undock back into local space.
        </p>
      </div>

      <div className="slice-loop-state" style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: 10, alignContent: "center" }}>
        {[
          ["LOCATION", facts.activePoiName],
          ["CARGO", `${facts.cargoUsed.toLocaleString()} / ${session.cargoCapacity.toLocaleString()}`],
          ["WALLET", `${session.wallet.toLocaleString()} ISK`],
        ].map(([label, value]) => (
          <div key={label} style={{ border: "1px solid rgba(34,211,238,0.16)", borderRadius: 8, padding: 14, background: "rgba(15,23,42,0.45)", minWidth: 0 }}>
            <div style={metricLabel}>{label}</div>
            <div style={{ marginTop: 8, color: "#f8fafc", fontSize: 18, overflowWrap: "anywhere" }}>{value}</div>
          </div>
        ))}
      </div>

      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "center" }}>
        <button style={sliceButton} disabled={!facts.hasRefinableOre} title={facts.hasRefinableOre ? undefined : "Refining needs at least 333 Veldspar."} onClick={() => onOpenService("refining")}>Refining</button>
        <button style={sliceButton} onClick={() => onOpenService("fitting")}>Fitting</button>
        <button style={sliceButton} disabled={!facts.hasSellableCargo} title={facts.hasSellableCargo ? undefined : "No sellable cargo is available."} onClick={() => onOpenService("market")}>Market</button>
      </div>
    </section>
  );
}
