import { SliceActionRail } from "./ui/SliceActionRail";
import { SliceCargoPanel } from "./ui/SliceCargoPanel";
import { SliceEventLog } from "./ui/SliceEventLog";
import { SliceModuleRack } from "./ui/SliceModuleRack";
import { SliceObjectiveTracker } from "./ui/SliceObjectiveTracker";
import { SliceShell } from "./ui/SliceShell";
import { SliceShipStatus } from "./ui/SliceShipStatus";
import { SliceStage } from "./ui/SliceStage";
import { SliceStationPanel } from "./ui/SliceStationPanel";
import { SliceTopBar } from "./ui/SliceTopBar";
import { slicePanel, slicePrimaryButton } from "./ui/sliceStyles";
import { useSliceController } from "./useSliceController";
import type { SliceActionId } from "./sliceController";

function LoadingSlice({ message, onReset }: { message: string; onReset: () => void }) {
  return (
    <div style={{ minHeight: "100vh", background: "#040810", color: "#d4dce8", display: "grid", placeItems: "center" }}>
      <div style={{ ...slicePanel, width: 420, padding: 18 }}>
        <h2 style={{ marginTop: 0, color: "#f0a030" }}>Playable Loop</h2>
        <p style={{ color: "#94a3b8" }}>{message}</p>
        <button style={slicePrimaryButton} onClick={onReset}>Start New Slice</button>
      </div>
    </div>
  );
}

export function SeamlessGameLoopSlice() {
  const controller = useSliceController();
  const {
    session,
    facts,
    contextualActions,
    operationProgress,
    reset,
    missingRequestedSession,
    startUndock,
    selectTarget,
    selectPoiTarget,
    selectSystemPoiTarget,
    selectManualTarget,
    approachSelectedTarget,
    approachTarget,
    dock,
    dockAtTarget,
    startMining,
    mineTarget,
    stopMining,
    openService,
    closeService,
    startCombat,
    refineVeldsparStack,
    updateFitting,
    sellStack,
    emit,
  } = controller;

  if (!session || !facts || !contextualActions) {
    return <LoadingSlice message={missingRequestedSession ? `Slice session ${missingRequestedSession} was not found.` : "Creating slice session..."} onReset={reset} />;
  }

  const runAction = (actionId: SliceActionId) => {
    const actions: Record<SliceActionId, () => void> = {
      undock: startUndock,
      approachTarget: approachSelectedTarget,
      dock,
      startMining,
      stopMining,
      openRefining: () => openService("refining"),
      openFitting: () => openService("fitting"),
      openMarket: () => openService("market"),
      startCombat,
    };
    actions[actionId]();
  };

  return (
    <SliceShell
      top={<SliceTopBar session={session} onReset={reset} />}
      left={<><SliceShipStatus session={session} /><SliceCargoPanel session={session} /><SliceStationPanel session={session} /></>}
      center={
        <SliceStage
          session={session}
          facts={facts}
          operationProgress={operationProgress}
          emit={emit}
          onOpenService={openService}
          onCloseService={closeService}
          onRefine={refineVeldsparStack}
          onUpdateFit={updateFitting}
          onSell={sellStack}
          onPoiTarget={selectPoiTarget}
          onSystemPoiTarget={selectSystemPoiTarget}
          onSelectTarget={selectTarget}
          onManualTarget={selectManualTarget}
          onApproachTarget={approachTarget}
          onDockAtTarget={dockAtTarget}
          onMineTarget={mineTarget}
        />
      }
      right={<><SliceObjectiveTracker session={session} /><SliceEventLog session={session} /></>}
      bottom={
        <div className="slice-bottom-content" style={{ height: "100%", minHeight: 0, display: "grid", gridTemplateColumns: "minmax(220px, 0.8fr) minmax(260px, 1.2fr)", gap: 8 }}>
          <SliceActionRail session={session} actions={contextualActions} onAction={runAction} />
          <SliceModuleRack session={session} />
        </div>
      }
    />
  );
}
