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

export function SliceRefiningService({
  session,
  onRefine,
}: {
  session: GameSliceSession;
  onRefine: (quantity: number) => void;
}) {
  const ore = getCargoItem(session, "Veldspar");
  const maxBatches = Math.floor((ore?.quantity ?? 0) / 333);
  const inputQuantity = maxBatches * 333;
  const output = inputQuantity > 0 ? refineVeldspar(inputQuantity) : [];

  return (
    <div style={{ display: "grid", gap: 12 }}>
      <div>
        <div style={metricLabel}>Reprocessing Plant</div>
        <h2 style={{ margin: "6px 0 0", color: "#f8fafc", fontSize: 20, letterSpacing: 0 }}>Refining</h2>
      </div>
      <div 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>Veldspar</span>
          <span style={{ fontFamily: "var(--font-mono)", color: "#f0a030" }}>{(ore?.quantity ?? 0).toLocaleString()}</span>
        </div>
        <div style={{ marginTop: 8, color: "#94a3b8", fontSize: 12 }}>
          {maxBatches > 0 ? `${maxBatches} batch${maxBatches === 1 ? "" : "es"} ready · ${inputQuantity.toLocaleString()} units` : "Needs at least 333 units."}
        </div>
      </div>
      <div style={{ display: "grid", gap: 8 }}>
        {output.map((item) => (
          <div key={item.item} style={{ display: "flex", justifyContent: "space-between", color: "#d4dce8" }}>
            <span>{item.item}</span>
            <span style={{ fontFamily: "var(--font-mono)", color: "#22c55e" }}>{item.quantity.toLocaleString()}</span>
          </div>
        ))}
      </div>
      <button style={inputQuantity > 0 ? slicePrimaryButton : sliceButton} disabled={inputQuantity <= 0} onClick={() => onRefine(inputQuantity)}>
        Refine Batch
      </button>
    </div>
  );
}
