import type { SliceAction, SliceActionId } from "../sliceController";
import type { GameSliceSession } from "../types";
import { metricLabel, sliceButton, slicePanel, slicePrimaryButton } from "./sliceStyles";

const toneStyle = (action: SliceAction) => {
  if (action.tone === "primary") return action.enabled ? slicePrimaryButton : sliceButton;
  if (action.tone === "danger") return { ...sliceButton, border: "1px solid rgba(239,68,68,0.72)", color: action.enabled ? "#fca5a5" : "#64748b" };
  if (action.tone === "debug") return { ...sliceButton, border: "1px dashed rgba(148,163,184,0.42)", color: action.enabled ? "#94a3b8" : "#64748b" };
  return sliceButton;
};

export function SliceActionRail({
  session,
  actions,
  onAction,
}: {
  session: GameSliceSession;
  actions: SliceAction[];
  onAction: (actionId: SliceActionId) => void;
}) {
  const selected = session.selectedTarget;
  const disabledReasons = actions.filter((action) => !action.enabled && action.reason).map((action) => `${action.label}: ${action.reason}`);
  return (
    <section className="slice-action-palette" style={{ ...slicePanel, height: "100%", minHeight: 0, padding: 12, display: "grid", gridTemplateColumns: "minmax(160px, 0.8fr) minmax(180px, 1.2fr)", gap: 10, alignItems: "center", boxSizing: "border-box", overflow: "auto" }}>
      <div style={{ minWidth: 0 }}>
        <div style={metricLabel}>Selected Target</div>
        <div style={{ marginTop: 4, color: selected ? "#f8fafc" : "#94a3b8", fontSize: 13, overflowWrap: "anywhere" }}>
          {selected ? selected.name : "None selected"}
        </div>
        {session.navigationMessage && <div style={{ marginTop: 4, color: "#64748b", fontSize: 10, fontFamily: "var(--font-mono)", overflowWrap: "anywhere" }}>{session.navigationMessage}</div>}
      </div>
      <div style={{ minWidth: 0, display: "flex", gap: 8, alignItems: "center", justifyContent: "center", flexWrap: "wrap" }}>
        {actions.map((action) => (
          <button key={action.id} data-slice-action={action.id} style={toneStyle(action)} disabled={!action.enabled} title={action.reason ?? undefined} onClick={() => onAction(action.id)}>
            {action.label}
          </button>
        ))}
        {disabledReasons.length > 0 && (
          <span style={{ flexBasis: "100%", color: "#94a3b8", fontSize: 10, fontFamily: "var(--font-mono)", textAlign: "center", overflowWrap: "anywhere" }}>
            {disabledReasons[0]}
          </span>
        )}
      </div>
    </section>
  );
}
