import { useState } from "react";
import { observer } from "mobx-react-lite";
import { apiStore } from "../api/ApiStore/store";

export const SimulationSettings = observer(() => {
  const [open, setOpen] = useState(false);

  return (
    <div style={{ position: "absolute", top: 12, right: 12, zIndex: 10010 }}>
      <button
        onClick={() => setOpen(!open)}
        style={{
          width: 36, height: 36, borderRadius: 6,
          border: "1px solid rgba(255,255,255,0.25)",
          background: open ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.5)",
          color: "white", cursor: "pointer", fontSize: 18,
        }}
      >
        ⚙
      </button>

      {open && (
        <div style={{
          marginTop: 6, background: "rgba(20,20,20,0.9)",
          border: "1px solid rgba(255,255,255,0.15)", borderRadius: 8,
          padding: "10px 12px", minWidth: 200, fontSize: 13,
        }}>
          {/* Пауза */}
          <Row>
            <span>Пауза</span>
            <Toggle
              on={apiStore.simulationPaused}
              onClick={apiStore.toggleSimulationPaused}
            />
          </Row>

          {/* Направление */}
          <Row>
            <span>Направление</span>
            <button onClick={apiStore.toggleSimulationDirection} style={btnStyle}>
              {apiStore.simulationDirection === 1 ? "→" : "←"}
            </button>
          </Row>

          {/* Скорость */}
          <Row>
            <span>Скорость</span>
            <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
              <button
                style={btnStyle}
                onClick={() => apiStore.setSimulationSpeed(apiStore.simulationSpeed - 0.25)}
              >
                −
              </button>
              <span style={{ minWidth: 32, textAlign: "center" }}>
                {apiStore.simulationSpeed}x
              </span>
              <button
                style={btnStyle}
                onClick={() => apiStore.setSimulationSpeed(apiStore.simulationSpeed + 0.25)}
              >
                +
              </button>
            </div>
          </Row>

          {/* Без анимации */}
          <Row>
            <span>Без анимации</span>
            <Toggle
              on={apiStore.simulationInstantMove}
              onClick={apiStore.toggleSimulationInstantMove}
            />
          </Row>
        </div>
      )}
    </div>
  );
});

function Row({ children }: { children: React.ReactNode }) {
  return (
    <div style={{
      display: "flex", justifyContent: "space-between",
      alignItems: "center", padding: "5px 0",
    }}>
      {children}
    </div>
  );
}

function Toggle({ on, onClick }: { on: boolean; onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      style={{
        width: 36, height: 20, borderRadius: 10, border: "none",
        background: on ? "#6366f1" : "rgba(255,255,255,0.2)",
        cursor: "pointer", position: "relative",
        transition: "background 0.15s",
      }}
    >
      <div style={{
        width: 16, height: 16, borderRadius: 8,
        background: "white", position: "absolute", top: 2,
        left: on ? 18 : 2, transition: "left 0.15s",
      }} />
    </button>
  );
}

const btnStyle: React.CSSProperties = {
  width: 28, height: 24, borderRadius: 4,
  border: "1px solid rgba(255,255,255,0.2)",
  background: "rgba(255,255,255,0.08)",
  color: "white", cursor: "pointer", fontSize: 14,
  display: "flex", alignItems: "center", justifyContent: "center",
};
