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

function Bar({ label, value, color }: { label: string; value: number; color: string }) {
  return (
    <div style={{ display: "grid", gap: 4 }}>
      <div style={{ display: "flex", justifyContent: "space-between" }}><span style={metricLabel}>{label}</span><span style={{ ...metricLabel, color }}>{value}%</span></div>
      <div style={{ height: 6, background: "rgba(255,255,255,0.06)", borderRadius: 999, overflow: "hidden" }}>
        <div style={{ width: `${value}%`, height: "100%", background: color }} />
      </div>
    </div>
  );
}

export function SliceShipStatus({ session }: { session: GameSliceSession }) {
  const cargoUsed = getCargoUsed(session);
  return (
    <section style={{ ...slicePanel, padding: 12, minHeight: 190 }}>
      <strong style={{ color: "#22d3ee", fontSize: 12 }}>Ship Status</strong>
      <div style={{ display: "grid", gap: 9, marginTop: 10 }}>
        <Bar label="Shield" value={100} color="#22d3ee" />
        <Bar label="Armor" value={94} color="#f0a030" />
        <Bar label="Hull" value={100} color="#22c55e" />
        <Bar label="Cap" value={82} color="#a78bfa" />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 6, marginTop: 12, fontFamily: "var(--font-mono)", fontSize: 11 }}>
        <span style={{ color: "#94a3b8" }}>Cargo</span>
        <span>{cargoUsed.toLocaleString()} / {session.cargoCapacity.toLocaleString()}</span>
        <span style={{ color: "#94a3b8" }}>Modules</span>
        <span>{session.fittedModules.length}</span>
      </div>
    </section>
  );
}
