import type { GameSliceSession } from "../types";
import { SLICE_BELT } from "../sliceWorld";
import { metricLabel, slicePanel } from "./sliceStyles";
import { SliceProgressBar } from "./SliceProgressBar";
import { getCargoUsed } from "../sliceEconomy";

export function SliceMiningStage({ session, progress }: { session: GameSliceSession; progress: number }) {
  const operation = session.activeOperation?.kind === "mining" ? session.activeOperation : null;
  const cargoUsed = getCargoUsed(session);
  const projectedCargo = operation ? Math.min(session.cargoCapacity, cargoUsed + operation.quantity) : cargoUsed;
  return (
    <section className="slice-loop-panel" style={{ ...slicePanel, height: "100%", minHeight: 0, padding: 18, display: "grid", placeItems: "center", boxSizing: "border-box", overflow: "hidden", background: "radial-gradient(circle at 50% 35%, rgba(240,160,48,0.2), transparent 36%), rgba(9,15,27,0.88)" }}>
      <div style={{ width: "min(620px, 100%)", textAlign: "center" }}>
        <div style={metricLabel}>Mining Operation</div>
        <h1 style={{ margin: "8px 0", color: "#f8fafc", fontSize: 30, letterSpacing: 0 }}>{operation?.targetName ?? SLICE_BELT.name}</h1>
        <p style={{ margin: "0 0 18px", color: "#94a3b8" }}>
          Mining laser cycle active. Repeating cycles continue while cargo space remains; stop mining from the action palette.
        </p>
        <SliceProgressBar value={progress} color="#22c55e" />
        <div style={{ marginTop: 12, color: "#f0a030", fontFamily: "var(--font-mono)", fontSize: 12, display: "grid", gap: 4 }}>
          <span>{operation ? `${Math.round(progress * 100)}% · ${operation.quantity.toLocaleString()} ${operation.ore}` : `${session.cargo.length} cargo stacks`}</span>
          <span style={{ color: "#94a3b8" }}>{operation?.repeat ? "AUTO-CYCLE ENABLED" : "SINGLE CYCLE"} · Cargo {projectedCargo.toLocaleString()} / {session.cargoCapacity.toLocaleString()}</span>
        </div>
      </div>
    </section>
  );
}
