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: "fixed", top: 12, right: 12, zIndex: 2147483646 }}>
      <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",
          display: "flex", alignItems: "center", justifyContent: "center",
          padding: 0,
        }}
      >
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M12 15.5A3.5 3.5 0 0 1 8.5 12 3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.92c.04-.34.07-.69.07-1.08s-.03-.73-.07-1.08l2.33-1.82c.21-.16.27-.46.13-.7l-2.21-3.83a.55.55 0 0 0-.68-.22l-2.75 1.1a8.1 8.1 0 0 0-1.86-1.08l-.42-2.93A.545.545 0 0 0 14 2h-4c-.27 0-.5.2-.54.46l-.42 2.93c-.68.28-1.3.65-1.86 1.08L4.43 5.37a.543.543 0 0 0-.68.22L1.54 9.42c-.14.24-.08.54.13.7l2.33 1.82c-.04.35-.07.7-.07 1.08s.03.73.07 1.08L1.67 15.92c-.21.16-.27.46-.13.7l2.21 3.83c.14.24.43.31.68.22l2.75-1.1c.56.43 1.18.8 1.86 1.08l.42 2.93c.04.26.27.46.54.46h4c.27 0 .5-.2.54-.46l.42-2.93c.68-.28 1.3-.65 1.86-1.08l2.75 1.1c.25.09.54.02.68-.22l2.21-3.83c.14-.24.08-.54-.13-.7l-2.33-1.82Z"
            fill="white"
          />
        </svg>
      </button>

      {open && (
        <div style={{
          position: "absolute", top: 42, right: 0,
          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>

          {/* Хитбоксы */}
          <Row>
            <span>Хитбоксы</span>
            <Toggle
              on={apiStore.showHitboxes}
              onClick={apiStore.toggleShowHitboxes}
            />
          </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",
};
