import type { GameSliceSession } from "../types";
import { SLICE_OBJECTIVES } from "../sliceObjectives";
import { sliceButton, slicePanel } from "./sliceStyles";

const SYSTEM_NAMES: Record<string, string> = { sol: "Sol", amarr: "Amarr", heinoo: "Hek", rens: "Rens", dodixie: "Dodixie" };

export function SliceTopBar({ session, onReset }: { session: GameSliceSession; onReset: () => void }) {
  const objective = SLICE_OBJECTIVES.find((item) => item.id === session.activeObjectiveId);
  return (
    <div style={{ ...slicePanel, height: "100%", minWidth: 0, display: "flex", alignItems: "center", gap: 14, padding: "0 12px", boxSizing: "border-box", fontFamily: "var(--font-mono)", fontSize: 11, overflowX: "auto", overflowY: "hidden", whiteSpace: "nowrap" }}>
      <strong style={{ color: "#f0a030", letterSpacing: 0 }}>VOID::NAV</strong>
      <span>{SYSTEM_NAMES[session.currentSystemId] ?? session.currentSystemId}</span>
      <span>{session.dockedStationName ? `Docked: ${session.dockedStationName}` : "In space"}</span>
      <span>Mode: {session.mode.toUpperCase()}</span>
      <span style={{ color: "#22c55e", marginLeft: "auto" }}>ISK {session.wallet.toLocaleString()}</span>
      <span style={{ color: "#22d3ee" }}>{objective?.title ?? session.activeObjectiveId}</span>
      <button style={sliceButton} onClick={onReset}>Reset</button>
    </div>
  );
}
