var hackRunning = false;

// --- Panel container ---
var panel = document.createElement("div");
panel.style = `
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 6px 10px;
  margin: 4px 0;
  font-family: 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
`;

// Row 1: title + depth slider + value + button
var controlRow = document.createElement("div");
controlRow.style = `display:flex;align-items:center;gap:8px;`;

var panelTitle = document.createElement("span");
panelTitle.textContent = "Chess Assist";
panelTitle.style = `font-size:11px;font-weight:600;color:#64748b;white-space:nowrap;`;

var depthSlider = document.createElement("input");
depthSlider.type = "range";
depthSlider.min = "5"; depthSlider.max = "30"; depthSlider.value = globalDepth;
depthSlider.style = `flex:1;accent-color:#3b82f6;cursor:pointer;height:4px;`;

var depthValue = document.createElement("span");
depthValue.textContent = globalDepth;
depthValue.style = `font-size:11px;color:#64748b;min-width:16px;font-family:monospace;`;

depthSlider.addEventListener("input", function() {
  globalDepth = parseInt(this.value);
  depthValue.textContent = this.value;
});

var actionBtn = document.createElement("button");
actionBtn.id = "hack_button";
actionBtn.textContent = "Start";
actionBtn.style = `
  padding: 4px 12px;
  border: none;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: #22c55e;
  color: #fff;
  white-space: nowrap;
  transition: opacity 0.2s;
`;
actionBtn.onmouseenter = () => { if (!actionBtn.disabled) actionBtn.style.opacity = "0.8"; };
actionBtn.onmouseleave = () => { actionBtn.style.opacity = "1"; };

controlRow.appendChild(panelTitle);
controlRow.appendChild(depthSlider);
controlRow.appendChild(depthValue);
controlRow.appendChild(actionBtn);
panel.appendChild(controlRow);

// Row 2: best move + eval bar (hidden until running)
var infoRow = document.createElement("div");
infoRow.style = `display:none;align-items:center;gap:8px;`;

var bestMoveDisplay = document.createElement("span");
bestMoveDisplay.id = "best-move";
bestMoveDisplay.style = `font-size:11px;color:#94a3b8;font-family:monospace;white-space:nowrap;`;
bestMoveDisplay.textContent = "Calculating...";

infoRow.appendChild(bestMoveDisplay);
infoRow.appendChild(evalLabel);
infoRow.appendChild(evalTrack);
infoRow.appendChild(evalPercent);
panel.appendChild(infoRow);

// --- State machine ---
function setIdleState() {
  hackRunning = false;
  actionBtn.textContent = "Start";
  actionBtn.style.background = "#22c55e";
  actionBtn.disabled = false;
  infoRow.style.display = "none";
  depthSlider.disabled = false;
  depthSlider.style.opacity = "1";
}

function setRunningState() {
  actionBtn.textContent = "Stop";
  actionBtn.style.background = "#ef4444";
  actionBtn.disabled = false;
  infoRow.style.display = "flex";
  depthSlider.disabled = true;
  depthSlider.style.opacity = "0.4";
}

function startHack() {
  if (hackRunning) return;
  hackRunning = true;
  actionBtn.textContent = "...";
  actionBtn.style.background = "#475569";
  actionBtn.disabled = true;
  startEngines(getPlayerColour());
  setRunningState();
}

function stopHack() {
  stopEngines();
  setIdleState();
}

actionBtn.onclick = () => {
  if (!hackRunning) startHack();
  else stopHack();
};