cube.js

// Rubik's Cube Interactive Web App
// ================================

class RubiksCube {
  constructor(container, options = {}) {
    this.container = container;
    this.options = {
      size: options.size || 3,
      cubeSize: options.cubeSize || 1,
      gap: options.gap || 0.05,
      rotationSpeed: options.rotationSpeed || 300,
      enableUI: options.enableUI !== false,
      ...options,
    };

    // Face colors (standard Rubik's cube colors)
    this.colors = {
      R: 0xf44336, // Red - Right
      L: 0xff5722, // Orange - Left
      U: 0xffffff, // White - Up
      D: 0xffeb3b, // Yellow - Down
      F: 0x4caf50, // Green - Front
      B: 0x2196f3, // Blue - Back
    };

    // Track the color state of each face position
    this.faceState = this.createInitialFaceState();

    this.cubies = [];
    this.isAnimating = false;
    this.moveQueue = [];
    this.moveHistory = [];
    this.redoQueue = [];
    this.scrambleMoves = [];
    this.moveCount = 0;
    this.timerInterval = null;
    this.startTime = null;
    this.isSolved = true;
    this.hasBeenScrambled = false;
    this.idleTimer = null;
    this.currentTheme = 'classic';
    this.themes = {
      classic: { bg: 0x000000, opacity: 1, transparent: false, edgeColor: 0x000000 },
      neon: { bg: 0x111111, opacity: 1, transparent: false, edgeColor: 0xffffff, emissive: 0x222222 },
      glass: { bg: 0x222233, opacity: 0.6, transparent: true, edgeColor: 0x888888 },
      stickerless: { bg: 0xeeeeee, opacity: 1, transparent: false, edgeColor: 0x333333 }
    };

    this.init();
    this.resetIdleTimer();
  }

  createInitialFaceState() {
    const state = {};
    const faces = ["R", "L", "U", "D", "F", "B"];
    faces.forEach((face) => {
      state[face] = [];
      for (let i = 0; i < 9; i++) {
        state[face][i] = face;
      }
    });
    return state;
  }

  init() {
    this.setupScene();
    this.createCube();
    this.setupControls();
    this.setupInteraction();
    this.animate();
    
    // Init Cube JS Solver if available
    if (typeof Cube !== 'undefined') {
      try { Cube.initSolver(); } catch(e) { console.warn("Cube solver init error", e); }
    }
  }

  setupScene() {
    const width = this.container.clientWidth;
    const height = this.container.clientHeight;

    this.scene = new THREE.Scene();

    this.camera = new THREE.PerspectiveCamera(40, width / height, 0.1, 1000);
    this.camera.position.set(7, 5.5, 7);
    this.camera.lookAt(0, 0, 0);

    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    this.renderer.setSize(width, height);
    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    this.renderer.setClearColor(0x000000, 0);
    this.container.appendChild(this.renderer.domElement);

    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
    this.scene.add(ambientLight);

    const directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight1.position.set(5, 10, 7);
    this.scene.add(directionalLight1);

    const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.4);
    directionalLight2.position.set(-5, -5, -5);
    this.scene.add(directionalLight2);

    this.resizeHandler = () => this.onResize();
    window.addEventListener("resize", this.resizeHandler);
  }

  createCubie(x, y, z) {
    const size = this.options.cubeSize;
    const geometry = new THREE.BoxGeometry(size, size, size);

    const materials = [];
    const faceOrder = ["R", "L", "U", "D", "F", "B"];

    for (let i = 0; i < 6; i++) {
      const face = faceOrder[i];
      let color = 0x1a1a1a;

      if (face === "R" && x === 1) color = this.colors.R;
      if (face === "L" && x === -1) color = this.colors.L;
      if (face === "U" && y === 1) color = this.colors.U;
      if (face === "D" && y === -1) color = this.colors.D;
      if (face === "F" && z === 1) color = this.colors.F;
      if (face === "B" && z === -1) color = this.colors.B;

      materials.push(
        new THREE.MeshStandardMaterial({
          color: color,
          roughness: 0.3,
          metalness: 0.1,
        }),
      );
    }

    const cubie = new THREE.Mesh(geometry, materials);
    cubie.position.set(
      x * (size + this.options.gap),
      y * (size + this.options.gap),
      z * (size + this.options.gap),
    );

    cubie.userData = {
      originalPosition: { x, y, z },
      currentPosition: { x, y, z },
    };

    const edgesGeometry = new THREE.EdgesGeometry(geometry);
    const edgesMaterial = new THREE.LineBasicMaterial({
      color: 0x000000,
      linewidth: 2,
    });
    const edges = new THREE.LineSegments(edgesGeometry, edgesMaterial);
    cubie.add(edges);

    return cubie;
  }

  createCube() {
    this.cubeGroup = new THREE.Group();

    for (let x = -1; x <= 1; x++) {
      for (let y = -1; y <= 1; y++) {
        for (let z = -1; z <= 1; z++) {
          if (x === 0 && y === 0 && z === 0) continue;

          const cubie = this.createCubie(x, y, z);
          this.cubies.push(cubie);
          this.cubeGroup.add(cubie);
        }
      }
    }

    this.scene.add(this.cubeGroup);
  }

  setupControls() {
    this.orbitControls = new THREE.OrbitControls(
      this.camera,
      this.renderer.domElement,
    );
    this.orbitControls.enableDamping = true;
    this.orbitControls.dampingFactor = 0.05;
    this.orbitControls.enablePan = false;
    this.orbitControls.minDistance = 8;
    this.orbitControls.maxDistance = 20;
    this.orbitControls.enabled = true;
  }

  setupInteraction() {
    this.raycaster = new THREE.Raycaster();
    this.mouse = new THREE.Vector2();
    this.interactionState = "idle";
    this.dragStart = null;
    this.selectedCubie = null;
    this.selectedFaceNormal = null;

    this.renderer.domElement.addEventListener("mousedown", (e) =>
      this.onPointerDown(e),
    );
    this.renderer.domElement.addEventListener("mousemove", (e) =>
      this.onPointerMove(e),
    );
    this.renderer.domElement.addEventListener("mouseup", (e) =>
      this.onPointerUp(e),
    );
    this.renderer.domElement.addEventListener("mouseleave", (e) =>
      this.onPointerUp(e),
    );

    this.renderer.domElement.addEventListener(
      "touchstart",
      (e) => this.onTouchStart(e),
      { passive: false },
    );
    this.renderer.domElement.addEventListener(
      "touchmove",
      (e) => this.onTouchMove(e),
      { passive: false },
    );
    this.renderer.domElement.addEventListener("touchend", (e) =>
      this.onTouchEnd(e),
    );
    this.renderer.domElement.addEventListener("touchcancel", (e) =>
      this.onTouchEnd(e),
    );
  }

  getPointerPosition(event) {
    const rect = this.renderer.domElement.getBoundingClientRect();
    return {
      x: ((event.clientX - rect.left) / rect.width) * 2 - 1,
      y: -((event.clientY - rect.top) / rect.height) * 2 + 1,
      clientX: event.clientX,
      clientY: event.clientY,
    };
  }

  onPointerDown(event) {
    if (this.isAnimating) return;

    const pos = this.getPointerPosition(event);
    this.mouse.set(pos.x, pos.y);

    this.raycaster.setFromCamera(this.mouse, this.camera);
    const intersects = this.raycaster.intersectObjects(this.cubies);

    if (intersects.length > 0) {
      this.interactionState = "potential-rotate";
      this.orbitControls.enabled = false;
      this.dragStart = { x: pos.clientX, y: pos.clientY };
      this.selectedCubie = intersects[0].object;
      this.selectedFaceNormal = intersects[0].face.normal.clone();
      this.selectedFaceNormal.transformDirection(
        this.selectedCubie.matrixWorld,
      );
    } else {
      this.interactionState = "idle";
      this.orbitControls.enabled = true;
    }
  }

  onPointerMove(event) {
    if (this.interactionState !== "potential-rotate" || this.isAnimating)
      return;

    const deltaX = event.clientX - this.dragStart.x;
    const deltaY = event.clientY - this.dragStart.y;
    const threshold = 25;

    if (Math.abs(deltaX) > threshold || Math.abs(deltaY) > threshold) {
      const move = this.determineMoveFromDrag(deltaX, deltaY);
      if (move) {
        this.interactionState = "rotating-face";
        this.executeMove(move.face, move.direction);
      }
      this.interactionState = "idle";
      this.orbitControls.enabled = true;
    }
  }

  onPointerUp(event) {
    this.interactionState = "idle";
    this.orbitControls.enabled = true;
    this.selectedCubie = null;
    this.selectedFaceNormal = null;
  }

  onTouchStart(event) {
    if (event.touches.length === 1) {
      event.preventDefault();
      const touch = event.touches[0];
      this.onPointerDown({ clientX: touch.clientX, clientY: touch.clientY });
    }
  }

  onTouchMove(event) {
    if (
      event.touches.length === 1 &&
      this.interactionState === "potential-rotate"
    ) {
      event.preventDefault();
      const touch = event.touches[0];
      this.onPointerMove({ clientX: touch.clientX, clientY: touch.clientY });
    }
  }

  onTouchEnd(event) {
    this.onPointerUp({});
  }

  determineMoveFromDrag(deltaX, deltaY) {
    if (!this.selectedCubie || !this.selectedFaceNormal) return null;

    const cubie = this.selectedCubie;
    const normal = this.selectedFaceNormal;
    const pos = cubie.userData.currentPosition;

    let clickedFace = "";
    if (Math.abs(normal.x) > 0.5) clickedFace = normal.x > 0 ? "R" : "L";
    else if (Math.abs(normal.y) > 0.5) clickedFace = normal.y > 0 ? "U" : "D";
    else if (Math.abs(normal.z) > 0.5) clickedFace = normal.z > 0 ? "F" : "B";

    const isHorizontal = Math.abs(deltaX) > Math.abs(deltaY);
    let face, direction;

    if (clickedFace === "F" || clickedFace === "B") {
      if (isHorizontal) {
        face = pos.y === 1 ? "U" : pos.y === -1 ? "D" : null;
        direction =
          clickedFace === "F" ? (deltaX > 0 ? 1 : -1) : deltaX > 0 ? -1 : 1;
      } else {
        face = pos.x === 1 ? "R" : pos.x === -1 ? "L" : null;
        direction =
          clickedFace === "F" ? (deltaY > 0 ? 1 : -1) : deltaY > 0 ? -1 : 1;
      }
    } else if (clickedFace === "R" || clickedFace === "L") {
      if (isHorizontal) {
        face = pos.y === 1 ? "U" : pos.y === -1 ? "D" : null;
        direction =
          clickedFace === "R" ? (deltaX > 0 ? -1 : 1) : deltaX > 0 ? 1 : -1;
      } else {
        face = pos.z === 1 ? "F" : pos.z === -1 ? "B" : null;
        direction =
          clickedFace === "R" ? (deltaY > 0 ? -1 : 1) : deltaY > 0 ? 1 : -1;
      }
    } else if (clickedFace === "U" || clickedFace === "D") {
      if (isHorizontal) {
        face = pos.z === 1 ? "F" : pos.z === -1 ? "B" : null;
        direction =
          clickedFace === "U" ? (deltaX > 0 ? 1 : -1) : deltaX > 0 ? -1 : 1;
      } else {
        face = pos.x === 1 ? "R" : pos.x === -1 ? "L" : null;
        direction =
          clickedFace === "U" ? (deltaY > 0 ? 1 : -1) : deltaY > 0 ? -1 : 1;
      }
    }

    if (!face) {
      face = clickedFace;
      if (clickedFace === "F" || clickedFace === "B") {
        direction = isHorizontal ? (deltaX > 0 ? 1 : -1) : deltaY < 0 ? 1 : -1;
      } else if (clickedFace === "R" || clickedFace === "L") {
        direction = isHorizontal ? (deltaX < 0 ? 1 : -1) : deltaY < 0 ? 1 : -1;
      } else {
        direction = isHorizontal ? (deltaX > 0 ? 1 : -1) : deltaY > 0 ? 1 : -1;
      }
    }

    return face ? { face, direction } : null;
  }

  getCubiesOnFace(face) {
    return this.cubies.filter((cubie) => {
      const pos = cubie.userData.currentPosition;
      switch (face) {
        case "R":
          return pos.x === 1;
        case "L":
          return pos.x === -1;
        case "U":
          return pos.y === 1;
        case "D":
          return pos.y === -1;
        case "F":
          return pos.z === 1;
        case "B":
          return pos.z === -1;
        default:
          return false;
      }
    });
  }

  getRotationAxis(face) {
    switch (face) {
      case "R":
        return new THREE.Vector3(1, 0, 0);
      case "L":
        return new THREE.Vector3(1, 0, 0);
      case "U":
        return new THREE.Vector3(0, 1, 0);
      case "D":
        return new THREE.Vector3(0, 1, 0);
      case "F":
        return new THREE.Vector3(0, 0, 1);
      case "B":
        return new THREE.Vector3(0, 0, 1);
      default:
        return new THREE.Vector3(0, 1, 0);
    }
  }

  getRotationDirection(face, direction) {
    // For L, D, B faces, invert the direction to match standard notation
    if (face === "L" || face === "D" || face === "B") {
      return -direction;
    }
    return direction;
  }

  updateFaceState(face, direction) {
    const state = this.faceState[face];
    const newState = [...state];

    if (direction === 1) {
      newState[0] = state[6];
      newState[1] = state[3];
      newState[2] = state[0];
      newState[3] = state[7];
      newState[4] = state[4];
      newState[5] = state[1];
      newState[6] = state[8];
      newState[7] = state[5];
      newState[8] = state[2];
    } else {
      newState[0] = state[2];
      newState[1] = state[5];
      newState[2] = state[8];
      newState[3] = state[1];
      newState[4] = state[4];
      newState[5] = state[7];
      newState[6] = state[0];
      newState[7] = state[3];
      newState[8] = state[6];
    }

    this.faceState[face] = newState;
    this.updateAdjacentEdges(face, direction);
  }

  updateAdjacentEdges(face, direction) {
    const temp = [];

    if (face === "U") {
      if (direction === 1) {
        temp[0] = this.faceState.F[0];
        temp[1] = this.faceState.F[1];
        temp[2] = this.faceState.F[2];
        this.faceState.F[0] = this.faceState.R[0];
        this.faceState.F[1] = this.faceState.R[1];
        this.faceState.F[2] = this.faceState.R[2];
        this.faceState.R[0] = this.faceState.B[0];
        this.faceState.R[1] = this.faceState.B[1];
        this.faceState.R[2] = this.faceState.B[2];
        this.faceState.B[0] = this.faceState.L[0];
        this.faceState.B[1] = this.faceState.L[1];
        this.faceState.B[2] = this.faceState.L[2];
        this.faceState.L[0] = temp[0];
        this.faceState.L[1] = temp[1];
        this.faceState.L[2] = temp[2];
      } else {
        temp[0] = this.faceState.F[0];
        temp[1] = this.faceState.F[1];
        temp[2] = this.faceState.F[2];
        this.faceState.F[0] = this.faceState.L[0];
        this.faceState.F[1] = this.faceState.L[1];
        this.faceState.F[2] = this.faceState.L[2];
        this.faceState.L[0] = this.faceState.B[0];
        this.faceState.L[1] = this.faceState.B[1];
        this.faceState.L[2] = this.faceState.B[2];
        this.faceState.B[0] = this.faceState.R[0];
        this.faceState.B[1] = this.faceState.R[1];
        this.faceState.B[2] = this.faceState.R[2];
        this.faceState.R[0] = temp[0];
        this.faceState.R[1] = temp[1];
        this.faceState.R[2] = temp[2];
      }
    } else if (face === "D") {
      if (direction === 1) {
        temp[0] = this.faceState.F[6];
        temp[1] = this.faceState.F[7];
        temp[2] = this.faceState.F[8];
        this.faceState.F[6] = this.faceState.L[6];
        this.faceState.F[7] = this.faceState.L[7];
        this.faceState.F[8] = this.faceState.L[8];
        this.faceState.L[6] = this.faceState.B[6];
        this.faceState.L[7] = this.faceState.B[7];
        this.faceState.L[8] = this.faceState.B[8];
        this.faceState.B[6] = this.faceState.R[6];
        this.faceState.B[7] = this.faceState.R[7];
        this.faceState.B[8] = this.faceState.R[8];
        this.faceState.R[6] = temp[0];
        this.faceState.R[7] = temp[1];
        this.faceState.R[8] = temp[2];
      } else {
        temp[0] = this.faceState.F[6];
        temp[1] = this.faceState.F[7];
        temp[2] = this.faceState.F[8];
        this.faceState.F[6] = this.faceState.R[6];
        this.faceState.F[7] = this.faceState.R[7];
        this.faceState.F[8] = this.faceState.R[8];
        this.faceState.R[6] = this.faceState.B[6];
        this.faceState.R[7] = this.faceState.B[7];
        this.faceState.R[8] = this.faceState.B[8];
        this.faceState.B[6] = this.faceState.L[6];
        this.faceState.B[7] = this.faceState.L[7];
        this.faceState.B[8] = this.faceState.L[8];
        this.faceState.L[6] = temp[0];
        this.faceState.L[7] = temp[1];
        this.faceState.L[8] = temp[2];
      }
    } else if (face === "F") {
      if (direction === 1) {
        temp[0] = this.faceState.U[6];
        temp[1] = this.faceState.U[7];
        temp[2] = this.faceState.U[8];
        this.faceState.U[6] = this.faceState.L[8];
        this.faceState.U[7] = this.faceState.L[5];
        this.faceState.U[8] = this.faceState.L[2];
        this.faceState.L[2] = this.faceState.D[0];
        this.faceState.L[5] = this.faceState.D[1];
        this.faceState.L[8] = this.faceState.D[2];
        this.faceState.D[0] = this.faceState.R[6];
        this.faceState.D[1] = this.faceState.R[3];
        this.faceState.D[2] = this.faceState.R[0];
        this.faceState.R[0] = temp[0];
        this.faceState.R[3] = temp[1];
        this.faceState.R[6] = temp[2];
      } else {
        temp[0] = this.faceState.U[6];
        temp[1] = this.faceState.U[7];
        temp[2] = this.faceState.U[8];
        this.faceState.U[6] = this.faceState.R[0];
        this.faceState.U[7] = this.faceState.R[3];
        this.faceState.U[8] = this.faceState.R[6];
        this.faceState.R[0] = this.faceState.D[2];
        this.faceState.R[3] = this.faceState.D[1];
        this.faceState.R[6] = this.faceState.D[0];
        this.faceState.D[0] = this.faceState.L[2];
        this.faceState.D[1] = this.faceState.L[5];
        this.faceState.D[2] = this.faceState.L[8];
        this.faceState.L[2] = temp[2];
        this.faceState.L[5] = temp[1];
        this.faceState.L[8] = temp[0];
      }
    } else if (face === "B") {
      if (direction === 1) {
        temp[0] = this.faceState.U[0];
        temp[1] = this.faceState.U[1];
        temp[2] = this.faceState.U[2];
        this.faceState.U[0] = this.faceState.R[2];
        this.faceState.U[1] = this.faceState.R[5];
        this.faceState.U[2] = this.faceState.R[8];
        this.faceState.R[2] = this.faceState.D[8];
        this.faceState.R[5] = this.faceState.D[7];
        this.faceState.R[8] = this.faceState.D[6];
        this.faceState.D[6] = this.faceState.L[0];
        this.faceState.D[7] = this.faceState.L[3];
        this.faceState.D[8] = this.faceState.L[6];
        this.faceState.L[0] = temp[2];
        this.faceState.L[3] = temp[1];
        this.faceState.L[6] = temp[0];
      } else {
        temp[0] = this.faceState.U[0];
        temp[1] = this.faceState.U[1];
        temp[2] = this.faceState.U[2];
        this.faceState.U[0] = this.faceState.L[6];
        this.faceState.U[1] = this.faceState.L[3];
        this.faceState.U[2] = this.faceState.L[0];
        this.faceState.L[0] = this.faceState.D[6];
        this.faceState.L[3] = this.faceState.D[7];
        this.faceState.L[6] = this.faceState.D[8];
        this.faceState.D[6] = this.faceState.R[8];
        this.faceState.D[7] = this.faceState.R[5];
        this.faceState.D[8] = this.faceState.R[2];
        this.faceState.R[2] = temp[0];
        this.faceState.R[5] = temp[1];
        this.faceState.R[8] = temp[2];
      }
    } else if (face === "R") {
      if (direction === 1) {
        temp[0] = this.faceState.U[2];
        temp[1] = this.faceState.U[5];
        temp[2] = this.faceState.U[8];
        this.faceState.U[2] = this.faceState.F[2];
        this.faceState.U[5] = this.faceState.F[5];
        this.faceState.U[8] = this.faceState.F[8];
        this.faceState.F[2] = this.faceState.D[2];
        this.faceState.F[5] = this.faceState.D[5];
        this.faceState.F[8] = this.faceState.D[8];
        this.faceState.D[2] = this.faceState.B[6];
        this.faceState.D[5] = this.faceState.B[3];
        this.faceState.D[8] = this.faceState.B[0];
        this.faceState.B[0] = temp[2];
        this.faceState.B[3] = temp[1];
        this.faceState.B[6] = temp[0];
      } else {
        temp[0] = this.faceState.U[2];
        temp[1] = this.faceState.U[5];
        temp[2] = this.faceState.U[8];
        this.faceState.U[2] = this.faceState.B[6];
        this.faceState.U[5] = this.faceState.B[3];
        this.faceState.U[8] = this.faceState.B[0];
        this.faceState.B[0] = this.faceState.D[8];
        this.faceState.B[3] = this.faceState.D[5];
        this.faceState.B[6] = this.faceState.D[2];
        this.faceState.D[2] = this.faceState.F[2];
        this.faceState.D[5] = this.faceState.F[5];
        this.faceState.D[8] = this.faceState.F[8];
        this.faceState.F[2] = temp[0];
        this.faceState.F[5] = temp[1];
        this.faceState.F[8] = temp[2];
      }
    } else if (face === "L") {
      if (direction === 1) {
        temp[0] = this.faceState.U[0];
        temp[1] = this.faceState.U[3];
        temp[2] = this.faceState.U[6];
        this.faceState.U[0] = this.faceState.B[8];
        this.faceState.U[3] = this.faceState.B[5];
        this.faceState.U[6] = this.faceState.B[2];
        this.faceState.B[2] = this.faceState.D[6];
        this.faceState.B[5] = this.faceState.D[3];
        this.faceState.B[8] = this.faceState.D[0];
        this.faceState.D[0] = this.faceState.F[0];
        this.faceState.D[3] = this.faceState.F[3];
        this.faceState.D[6] = this.faceState.F[6];
        this.faceState.F[0] = temp[0];
        this.faceState.F[3] = temp[1];
        this.faceState.F[6] = temp[2];
      } else {
        temp[0] = this.faceState.U[0];
        temp[1] = this.faceState.U[3];
        temp[2] = this.faceState.U[6];
        this.faceState.U[0] = this.faceState.F[0];
        this.faceState.U[3] = this.faceState.F[3];
        this.faceState.U[6] = this.faceState.F[6];
        this.faceState.F[0] = this.faceState.D[0];
        this.faceState.F[3] = this.faceState.D[3];
        this.faceState.F[6] = this.faceState.D[6];
        this.faceState.D[0] = this.faceState.B[8];
        this.faceState.D[3] = this.faceState.B[5];
        this.faceState.D[6] = this.faceState.B[2];
        this.faceState.B[2] = temp[2];
        this.faceState.B[5] = temp[1];
        this.faceState.B[8] = temp[0];
      }
    }
  }

  async undo() {
    if (this.moveHistory.length === 0 || this.isAnimating) return;
    const lastMove = this.moveHistory.pop();
    this.moveCount--;
    this.redoQueue.push(lastMove);
    this.updateUI();
    await this.executeMove(lastMove.face, -lastMove.direction, false);
  }

  async redo() {
    if (this.redoQueue.length === 0 || this.isAnimating) return;
    const nextMove = this.redoQueue.pop();
    this.moveHistory.push(nextMove);
    this.moveCount++;
    this.updateUI();
    await this.executeMove(nextMove.face, nextMove.direction, false);
  }

  resetIdleTimer() {
    if (this.idleTimer) clearTimeout(this.idleTimer);
    if (!this.options.enableUI) return;
    document.querySelectorAll('.face-hint-highlight').forEach(el => el.classList.remove('face-hint-highlight'));
    this.idleTimer = setTimeout(() => this.showHint(), 10000);
  }

  showHint() {
    if (this.isSolved || !this.options.enableUI) return;
    document.querySelectorAll('.face-hint-highlight').forEach(el => el.classList.remove('face-hint-highlight'));
    
    if (typeof Cube !== 'undefined') {
      try {
        const stateStr = ['U', 'R', 'F', 'D', 'L', 'B'].map(f => this.faceState[f].join('')).join('');
        const cube = Cube.fromString(stateStr);
        const solution = cube.solve();
        if (solution) {
          const moves = solution.trim().split(' ');
          if (moves.length > 0 && moves[0]) {
            const firstMove = moves[0];
            const face = firstMove[0];
            const isPrime = firstMove.includes("'");
            const dir = isPrime ? -1 : 1;
            const btn = document.querySelector(`.face-btn[data-face="${face}"][data-dir="${dir}"]`);
            if (btn) btn.classList.add('face-hint-highlight');
            if (firstMove.includes("2")) {
                const btn2 = document.querySelector(`.face-btn[data-face="${face}"][data-dir="${-dir}"]`);
                if (btn2) btn2.classList.add('face-hint-highlight');
            }
            return;
          }
        }
      } catch (e) {
        console.warn("Solver not ready or error:", e);
      }
    }
    
    // Fallback to reversing last move
    let hintMove = null;
    if (this.moveHistory.length > 0) hintMove = this.moveHistory[this.moveHistory.length-1];
    else if (this.scrambleMoves.length > 0) hintMove = this.scrambleMoves[this.scrambleMoves.length-1];
    
    if (hintMove) {
       const btn = document.querySelector(`.face-btn[data-face="${hintMove.face}"][data-dir="${-hintMove.direction}"]`);
       if (btn) btn.classList.add('face-hint-highlight');
    }
  }

  applyTheme(themeName) {
    const theme = this.themes[themeName];
    if (!theme) return;
    this.currentTheme = themeName;
    
    // this.renderer.setClearColor(theme.bg, theme.transparent ? 0 : 1);
    
    this.cubies.forEach(cubie => {
       const edges = cubie.children[0];
       if (edges) edges.material.color.setHex(theme.edgeColor);
       
       cubie.material.forEach((mat) => {
           mat.transparent = theme.transparent;
           mat.opacity = theme.opacity;
           if (themeName === 'neon') {
               mat.emissive.setHex(mat.color.getHex());
               mat.emissiveIntensity = 0.5;
           } else {
               mat.emissive.setHex(0x000000);
               mat.emissiveIntensity = 0;
           }
       });
    });
  }

  async applyPattern(pattern) {
      this.reset();
      this.options.rotationSpeed = 80;
      let moves = [];
      if (pattern === 'checkerboard') {
          moves = ["U2","D2","F2","B2","L2","R2"];
      } else if (pattern === 'superflip') {
          moves = ["U","R2","F","B","R","B2","R","U2","L","B2","R","U'","D'","R2","F","R'","L","B2","U2","F2"];
      } else if (pattern === 'cubeincube') {
          moves = ["F","L","F","U'","R","U","F2","L2","U'","L'","B","D'","B'","L2","U"];
      }
      for (const move of moves) {
          const face = move[0];
          const dir = move.includes("'") ? -1 : 1;
          const isDouble = move.includes("2");
          await this.executeMove(face, dir, true);
          if(isDouble) await this.executeMove(face, dir, true);
      }
      this.options.rotationSpeed = 300;
  }


  async executeMove(face, direction, recordHistory = true) {
    if (this.isAnimating) {
      this.moveQueue.push({ face, direction, recordHistory });
      return;
    }

    this.isAnimating = true;

    const cubies = this.getCubiesOnFace(face);
    const axis = this.getRotationAxis(face);
    const rotDir = this.getRotationDirection(face, direction);
    const angle = (Math.PI / 2) * rotDir;

    const rotationGroup = new THREE.Group();
    this.cubeGroup.add(rotationGroup);

    cubies.forEach((cubie) => {
      rotationGroup.attach(cubie);
    });

    const duration = this.options.rotationSpeed;
    const startTime = Date.now();

    await new Promise((resolve) => {
      const animateRotation = () => {
        const elapsed = Date.now() - startTime;
        const progress = duration <= 0 ? 1 : Math.min(elapsed / duration, 1);
        const eased = 1 - Math.pow(1 - progress, 3);

        rotationGroup.setRotationFromAxisAngle(axis, angle * eased);

        if (progress < 1) {
          requestAnimationFrame(animateRotation);
        } else {
          resolve();
        }
      };
      animateRotation();
    });

    cubies.forEach((cubie) => {
      this.cubeGroup.attach(cubie);

      const localPos = cubie.position;
      const size = this.options.cubeSize + this.options.gap;
      cubie.userData.currentPosition = {
        x: Math.round(localPos.x / size),
        y: Math.round(localPos.y / size),
        z: Math.round(localPos.z / size),
      };
    });

    this.cubeGroup.remove(rotationGroup);
    this.updateFaceState(face, direction);

    if (recordHistory) {
      const notation = face + (direction === -1 ? "'" : "");
      this.moveHistory.push({ face, direction, notation });
      this.moveCount++;
      this.redoQueue = [];

      // Record for Ghost Mode PB saving
      if (this.hasBeenScrambled) {
        if (!this.solveRecord) this.solveRecord = [];
        const elapsed = this.startTime ? (Date.now() - this.startTime) : 0;
        this.solveRecord.push({ face, direction, elapsed });
      }

      this.updateUI();

      if (this.moveCount === 1 && !this.timerInterval) {
        this.startTimer();
      }
    }
    
    this.resetIdleTimer();

    this.isAnimating = false;

    if (this.hasBeenScrambled) {
      this.isSolved = this.checkSolved();
      if (this.isSolved && recordHistory) {
        this.onSolved();
      }
    }

    if (this.moveQueue.length > 0) {
      const nextMove = this.moveQueue.shift();
      this.executeMove(
        nextMove.face,
        nextMove.direction,
        nextMove.recordHistory,
      );
    }
  }

  checkSolved() {
    const faces = ["R", "L", "U", "D", "F", "B"];
    for (const face of faces) {
      const faceColors = new Set(this.faceState[face]);
      if (faceColors.size > 1) return false;
    }
    return true;
  }

  onSolved() {
    this.stopTimer();
    this.showCelebration();
    
    if (this.hasBeenScrambled && window.onMainCubeSolved) {
      const elapsedMs = this.startTime ? (Date.now() - this.startTime) : 0;
      window.onMainCubeSolved(elapsedMs / 1000, this.scrambleMoves, this.solveRecord || []);
    }
  }

  showCelebration() {
    this.createConfetti();
    document.querySelector(".solved-celebration")?.remove();

    setTimeout(() => {
      const celebration = document.createElement("div");
      celebration.className = "solved-celebration";
      celebration.innerHTML = `
        <div class="celebration-icon">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="8" r="6"/>
            <path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/>
          </svg>
        </div>
        <h2>Congratulations!</h2>
        <p>Solved in ${this.moveCount} moves</p>
        <p class="time-display">${document.getElementById("timer")?.textContent || "0:00"}</p>
        <button class="btn btn-primary" onclick="this.parentElement.remove()">Continue</button>
      `;
      document.body.appendChild(celebration);
    }, 500);
  }

  createConfetti() {
    document.getElementById("confetti-container")?.remove();

    const container = document.createElement("div");
    container.id = "confetti-container";
    document.body.appendChild(container);

    const colors = [
      "#f44336",
      "#ff5722",
      "#ffeb3b",
      "#4caf50",
      "#2196f3",
      "#ffffff",
    ];

    for (let i = 0; i < 100; i++) {
      setTimeout(() => {
        const confetti = document.createElement("div");
        confetti.className = "confetti";
        confetti.style.left = Math.random() * 100 + "vw";
        confetti.style.top = "-10px";
        confetti.style.backgroundColor =
          colors[Math.floor(Math.random() * colors.length)];
        confetti.style.animationDuration = Math.random() * 2 + 2 + "s";
        confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
        container.appendChild(confetti);

        setTimeout(() => confetti.remove(), 4000);
      }, i * 20);
    }

    setTimeout(() => container.remove(), 5000);
  }

  async scramble(moves = 20) {
    this.reset();

    const faces = ["R", "L", "U", "D", "F", "B"];
    let scrambleSequence = [];
    
    if (window.nextScrambleOverride) {
      scrambleSequence = window.nextScrambleOverride;
    } else {
      let lastFace = "";
      for (let i = 0; i < moves; i++) {
        let face;
        do {
          face = faces[Math.floor(Math.random() * faces.length)];
        } while (face === lastFace);

        const direction = Math.random() > 0.5 ? 1 : -1;
        scrambleSequence.push({ face, direction });
        lastFace = face;
      }
    }

    const originalSpeed = this.options.rotationSpeed;
    this.options.rotationSpeed = 80;

    for (const move of scrambleSequence) {
      await this.executeMove(move.face, move.direction, false);
    }

    this.options.rotationSpeed = originalSpeed;
    this.scrambleMoves = scrambleSequence;
    this.moveHistory = [];
    this.moveCount = 0;
    this.isSolved = false;
    this.hasBeenScrambled = true;
    this.solveRecord = [];
    this.updateUI();
    
    if (window.onGhostScrambleComplete) {
      window.onGhostScrambleComplete();
    }
    
    this.startTimer();
  }

  async solve() {
    // Combine user moves and scramble moves - reverse user moves first, then scramble
    const allMoves = [...this.moveHistory, ...this.scrambleMoves];

    if (allMoves.length === 0) return;

    const originalSpeed = this.options.rotationSpeed;
    this.options.rotationSpeed = Math.max(80, originalSpeed * 0.3);

    // Clear current history before solving
    this.moveHistory = [];
    this.moveCount = 0;
    this.updateUI();

    const solveMoves = [...allMoves].reverse();

    for (const move of solveMoves) {
      // Record solve moves to show in history (with inverted direction for notation)
      const solveDirection = -move.direction;
      const notation = move.face + (solveDirection === -1 ? "'" : "");
      this.moveHistory.push({
        face: move.face,
        direction: solveDirection,
        notation,
      });
      this.moveCount++;
      this.updateUI();

      await this.executeMove(move.face, -move.direction, false);
    }

    this.options.rotationSpeed = originalSpeed;
    this.scrambleMoves = [];
    this.stopTimer();
    this.isSolved = true;
    this.hasBeenScrambled = false;
  }

  reset() {
    this.cubies.forEach((cubie) => this.cubeGroup.remove(cubie));
    this.cubies = [];

    for (let x = -1; x <= 1; x++) {
      for (let y = -1; y <= 1; y++) {
        for (let z = -1; z <= 1; z++) {
          if (x === 0 && y === 0 && z === 0) continue;
          const cubie = this.createCubie(x, y, z);
          this.cubies.push(cubie);
          this.cubeGroup.add(cubie);
        }
      }
    }

    this.faceState = this.createInitialFaceState();
    this.scrambleMoves = [];
    this.moveHistory = [];
    this.redoQueue = [];
    this.moveCount = 0;
    this.isSolved = true;
    this.hasBeenScrambled = false;
    this.stopTimer();
    this.resetTimer();
    this.updateUI();
  }

  startTimer() {
    if (this.timerInterval) return;
    this.startTime = Date.now();
    this.timerInterval = setInterval(() => {
      if (!this.options.enableUI) return;
      const elapsed = Math.floor((Date.now() - this.startTime) / 1000);
      const minutes = Math.floor(elapsed / 60);
      const seconds = elapsed % 60;
      const timerElement = document.getElementById("timer");
      if (timerElement) {
        timerElement.textContent = `${minutes}:${seconds.toString().padStart(2, "0")}`;
      }
    }, 100);
  }

  stopTimer() {
    if (this.timerInterval) {
      clearInterval(this.timerInterval);
      this.timerInterval = null;
    }
  }

  resetTimer() {
    const timerElement = document.getElementById("timer");
    if (timerElement && this.options.enableUI) {
      timerElement.textContent = "0:00";
    }
  }

  updateUI() {
    if (!this.options.enableUI) return;

    const moveCountElement = document.getElementById("move-count");
    if (moveCountElement) {
      moveCountElement.textContent = this.moveCount;
    }

    const historyElement = document.getElementById("history-display");
    if (historyElement) {
      historyElement.innerHTML = this.moveHistory
        .map((m) => `<span class="move-badge">${m.notation}</span>`)
        .join("");
    }
    
    const undoBtn = document.getElementById("undo-btn");
    if (undoBtn) undoBtn.disabled = this.moveHistory.length === 0;
    
    const redoBtn = document.getElementById("redo-btn");
    if (redoBtn) redoBtn.disabled = this.redoQueue.length === 0;
    
    const timeline = document.getElementById("timeline-slider");
    if (timeline) {
      const totalMoves = this.moveHistory.length + this.redoQueue.length;
      timeline.max = totalMoves;
      timeline.value = this.moveHistory.length;
      timeline.disabled = totalMoves === 0;
    }
    
    this.updateOptimalSolveCount();
    
    if (window.dispatchEvent) {
      window.dispatchEvent(new CustomEvent('cubeStateChanged'));
    }
  }

  updateOptimalSolveCount() {
    const el = document.getElementById("optimal-solve-count");
    if (!el || !this.options.enableUI) return;
    
    if (this.checkSolved()) {
      el.textContent = "Solved";
      return;
    }
    
    if (typeof Cube !== 'undefined') {
      try {
        const stateStr = ['U', 'R', 'F', 'D', 'L', 'B'].map(f => this.faceState[f].join('')).join('');
        const cube = Cube.fromString(stateStr);
        const solution = cube.solve();
        if (solution) {
          const count = solution.trim().split(/\s+/).filter(Boolean).length;
          el.textContent = `${count} moves`;
        } else {
          el.textContent = "-";
        }
      } catch (e) {
        el.textContent = "error";
      }
    } else {
      el.textContent = "Loading...";
    }
  }

  onResize() {
    const width = this.container.clientWidth;
    const height = this.container.clientHeight;

    this.camera.aspect = width / height;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(width, height);
  }

  animate() {
    requestAnimationFrame(() => this.animate());
    this.orbitControls.update();
    this.renderer.render(this.scene, this.camera);
  }

  setSpeed(speed) {
    this.options.rotationSpeed = speed;
  }

  destroy() {
    window.removeEventListener("resize", this.resizeHandler);
    this.stopTimer();
  }
}

// Hero Animation Cube
class HeroCube extends RubiksCube {
  constructor(container) {
    super(container, {
      rotationSpeed: 180,
      enableUI: false,
    });
    this.autoRotate = true;
    this.isRunning = true;
    this.startHeroAnimation();
  }

  async startHeroAnimation() {
    while (this.isRunning) {
      await this.scrambleHero(12);
      await this.delay(800);
      await this.solveHero();
      await this.delay(1500);
    }
  }

  async scrambleHero(moves) {
    const faces = ["R", "L", "U", "D", "F", "B"];
    let lastFace = "";

    for (let i = 0; i < moves && this.isRunning; i++) {
      let face;
      do {
        face = faces[Math.floor(Math.random() * faces.length)];
      } while (face === lastFace);

      const direction = Math.random() > 0.5 ? 1 : -1;
      this.moveHistory.push({ face, direction });
      await this.executeMove(face, direction, false);
      lastFace = face;
    }
  }

  async solveHero() {
    const solveMoves = [...this.moveHistory].reverse();
    this.moveHistory = [];

    for (const move of solveMoves) {
      if (!this.isRunning) break;
      await this.executeMove(move.face, -move.direction, false);
    }
  }

  delay(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

  onSolved() {}
  showCelebration() {}
  createConfetti() {}
  updateUI() {}
  startTimer() {}
  stopTimer() {}

  animate() {
    requestAnimationFrame(() => this.animate());

    if (this.autoRotate && !this.isAnimating) {
      this.cubeGroup.rotation.y += 0.002;
    }

    this.orbitControls.update();
    this.renderer.render(this.scene, this.camera);
  }

  destroy() {
    this.isRunning = false;
    super.destroy();
  }
}

// Initialize application
document.addEventListener("DOMContentLoaded", () => {
  const heroContainer = document.getElementById("hero-cube-container");
  let heroCube = null;
  if (heroContainer) {
    heroCube = new HeroCube(heroContainer);
    window.heroCube = heroCube;
  }

  const cubeContainer = document.getElementById("cube-container");
  let mainCube = null;
  if (cubeContainer) {
    mainCube = new RubiksCube(cubeContainer);
    window.mainCube = mainCube;
  }

  document.getElementById("scramble-btn")?.addEventListener("click", () => {
    mainCube?.scramble();
  });

  document.getElementById("solve-btn")?.addEventListener("click", () => {
    mainCube?.solve();
  });

  document.getElementById("reset-btn")?.addEventListener("click", () => {
    mainCube?.reset();
  });

  document.querySelectorAll(".face-btn").forEach((btn) => {
    btn.addEventListener("click", () => {
      const face = btn.dataset.face;
      const direction = parseInt(btn.dataset.dir);
      mainCube?.executeMove(face, direction);
    });
  });

  document.getElementById("speed-slider")?.addEventListener("input", (e) => {
    mainCube?.setSpeed(parseInt(e.target.value));
  });

  document.getElementById("skip-intro")?.addEventListener("click", () => {
    document
      .getElementById("playground")
      ?.scrollIntoView({ behavior: "smooth" });
  });

  const modal = document.getElementById("instructions-modal");
  document.getElementById("help-btn")?.addEventListener("click", () => {
    modal?.classList.add("active");
  });

  modal?.addEventListener("click", (e) => {
    if (e.target === modal || e.target.classList.contains("modal-close")) {
      modal.classList.remove("active");
    }
  });

  const solutionModal = document.getElementById("solution-modal");
  document.getElementById("solution-guide-btn")?.addEventListener("click", () => {
    solutionModal?.classList.add("active");
  });

  solutionModal?.addEventListener("click", (e) => {
    if (e.target === solutionModal || e.target.classList.contains("modal-close")) {
      solutionModal.classList.remove("active");
    }
  });

  document.addEventListener("keydown", (e) => {
    if (!mainCube || document.activeElement.tagName === "INPUT") return;

    const key = e.key.toUpperCase();
    const faces = ["U", "D", "F", "B", "L", "R"];

    if (faces.includes(key)) {
      const direction = e.shiftKey ? -1 : 1;
      mainCube.executeMove(key, direction);
    }

    if (e.key === "Escape") {
      modal?.classList.remove("active");
      solutionModal?.classList.remove("active");
    }
  });

  const playgroundSection = document.getElementById("playground");
  if (playgroundSection) {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            playgroundSection.classList.add("visible");
          }
        });
      },
      { threshold: 0.1 },
    );
    observer.observe(playgroundSection);
  }

  // Bind new features
  document.getElementById("undo-btn")?.addEventListener("click", () => mainCube?.undo());
  document.getElementById("redo-btn")?.addEventListener("click", () => mainCube?.redo());
  document.getElementById("hint-btn")?.addEventListener("click", () => mainCube?.showHint());
  
  document.getElementById("theme-select")?.addEventListener("change", (e) => {
    mainCube?.applyTheme(e.target.value);
  });
  
  document.querySelectorAll(".pattern-buttons .btn").forEach(btn => {
    btn.addEventListener("click", () => {
      mainCube?.applyPattern(btn.dataset.pattern);
    });
  });

  const timelineSlider = document.getElementById("timeline-slider");
  let isScrubbing = false;
  timelineSlider?.addEventListener("input", async (e) => {
    if (!mainCube || isScrubbing) return;
    isScrubbing = true;
    const target = parseInt(e.target.value);
    mainCube.setSpeed(50);
    
    while (mainCube.moveHistory.length > target) {
      await mainCube.undo();
    }
    while (mainCube.moveHistory.length < target) {
      await mainCube.redo();
    }
    
    mainCube.setSpeed(parseInt(document.getElementById("speed-slider")?.value || 300));
    isScrubbing = false;
  });
  
  // Preview PIP Logic
  const pip = document.getElementById("preview-pip");
  let previewCube = null;
  document.getElementById("preview-btn")?.addEventListener("click", () => {
    pip?.classList.toggle("hidden");
    if (!pip?.classList.contains("hidden")) {
      if (!previewCube) {
        previewCube = new RubiksCube(document.getElementById("preview-canvas-container"), { 
          enableUI: false, rotationSpeed: 0, gap: 0.05 
        });
      }
      syncPreviewCube();
    }
  });
  
  document.getElementById("pip-close")?.addEventListener("click", () => {
    pip?.classList.add("hidden");
  });
  
  window.addEventListener('cubeStateChanged', () => {
    if (!pip?.classList.contains("hidden")) syncPreviewCube();
  });
  
  async function syncPreviewCube() {
    if (!previewCube || !mainCube) return;
    previewCube.reset();
    previewCube.setSpeed(0);
    const allMoves = [...mainCube.scrambleMoves, ...mainCube.moveHistory];
    for (let m of allMoves) {
      await previewCube.executeMove(m.face, m.direction, false);
    }
    applyPreviewSequence();
  }
  
  document.getElementById("preview-input")?.addEventListener("input", () => {
    syncPreviewCube();
  });
  
  async function applyPreviewSequence() {
    if (!previewCube) return;
    const val = document.getElementById("preview-input")?.value.toUpperCase() || "";
    const moves = val.split(" ").filter(m => m.trim().length > 0);
    previewCube.setSpeed(0);
    for (let move of moves) {
      const face = move[0];
      const faces = ["U","D","F","B","L","R"];
      if (!faces.includes(face)) continue;
      const dir = move.includes("'") ? -1 : 1;
      const isDouble = move.includes("2");
      await previewCube.executeMove(face, dir, false);
      if (isDouble) await previewCube.executeMove(face, dir, false);
    }
  }

  // Preview PAD & Actions
  document.querySelectorAll(".preview-pad-btn").forEach(btn => {
    btn.addEventListener("click", () => {
      const input = document.getElementById("preview-input");
      if (input) {
        const move = btn.dataset.move;
        const currentVal = input.value.trim();
        input.value = currentVal ? `${currentVal} ${move}` : move;
        syncPreviewCube();
      }
    });
  });

  document.getElementById("preview-clear-btn")?.addEventListener("click", () => {
    const input = document.getElementById("preview-input");
    if (input) {
      input.value = "";
      syncPreviewCube();
    }
  });

  let isPlayingPreview = false;
  document.getElementById("preview-play-btn")?.addEventListener("click", async () => {
    if (!previewCube || !mainCube || isPlayingPreview) return;
    isPlayingPreview = true;
    const playBtn = document.getElementById("preview-play-btn");
    if (playBtn) playBtn.disabled = true;

    // Reset preview cube to match main cube's current state
    previewCube.reset();
    previewCube.setSpeed(0);
    const allMoves = [...mainCube.scrambleMoves, ...mainCube.moveHistory];
    for (let m of allMoves) {
      await previewCube.executeMove(m.face, m.direction, false);
    }

    // Play preview moves
    const val = document.getElementById("preview-input")?.value.toUpperCase() || "";
    const moves = val.split(" ").filter(m => m.trim().length > 0);
    previewCube.setSpeed(250);
    for (let move of moves) {
      const face = move[0];
      const faces = ["U","D","F","B","L","R"];
      if (!faces.includes(face)) continue;
      const dir = move.includes("'") ? -1 : 1;
      const isDouble = move.includes("2");
      await previewCube.executeMove(face, dir, false);
      if (isDouble) await previewCube.executeMove(face, dir, false);
    }

    isPlayingPreview = false;
    if (playBtn) playBtn.disabled = false;
  });

  document.getElementById("preview-apply-btn")?.addEventListener("click", async () => {
    if (!previewCube || !mainCube || isPlayingPreview) return;
    const input = document.getElementById("preview-input");
    const val = input?.value.toUpperCase() || "";
    const moves = val.split(" ").filter(m => m.trim().length > 0);
    if (moves.length === 0) return;

    if (input) input.value = "";
    pip?.classList.add("hidden");

    for (let move of moves) {
      const face = move[0];
      const faces = ["U","D","F","B","L","R"];
      if (!faces.includes(face)) continue;
      const dir = move.includes("'") ? -1 : 1;
      const isDouble = move.includes("2");
      await mainCube.executeMove(face, dir, true);
      if (isDouble) await mainCube.executeMove(face, dir, true);
    }
  });

  // Ghost Mode Logic
  const ghostPip = document.getElementById("ghost-pip");
  let ghostCube = null;
  let currentGhostData = null;
  let isGhostPlaybackActive = false;
  let ghostMoveIndex = 0;

  const defaultGhostData = {
    time: 6.0,
    scramble: [
      { face: "R", direction: 1 },
      { face: "U", direction: 1 },
      { face: "F", direction: 1 }
    ],
    solve: [
      { face: "F", direction: -1, elapsed: 1500 },
      { face: "U", direction: -1, elapsed: 3500 },
      { face: "R", direction: -1, elapsed: 5500 }
    ]
  };

  function loadGhostData() {
    const saved = localStorage.getItem("rubiks_cube_pb");
    if (saved) {
      try {
        currentGhostData = JSON.parse(saved);
        document.getElementById("ghost-pb-val").textContent = `${currentGhostData.time.toFixed(1)}s`;
      } catch (e) {
        console.warn("Error parsing PB from storage, using default", e);
        currentGhostData = defaultGhostData;
        document.getElementById("ghost-pb-val").textContent = "6.0s (Def)";
      }
    } else {
      currentGhostData = defaultGhostData;
      document.getElementById("ghost-pb-val").textContent = "6.0s (Def)";
    }
  }

  function syncGhostScramble() {
    if (!ghostCube || !currentGhostData) return;
    ghostCube.reset();
    ghostCube.setSpeed(0);
    for (let m of currentGhostData.scramble) {
      ghostCube.executeMove(m.face, m.direction, false);
    }
  }

  document.getElementById("ghost-btn")?.addEventListener("click", () => {
    ghostPip?.classList.toggle("hidden");
    const active = !ghostPip?.classList.contains("hidden");
    if (active) {
      if (!ghostCube) {
        ghostCube = new RubiksCube(document.getElementById("ghost-canvas-container"), {
          enableUI: false, rotationSpeed: 200, gap: 0.05
        });
      }
      loadGhostData();
      syncGhostScramble();
      window.nextScrambleOverride = currentGhostData.scramble;
    } else {
      window.nextScrambleOverride = null;
      isGhostPlaybackActive = false;
    }
  });

  document.getElementById("ghost-close")?.addEventListener("click", () => {
    ghostPip?.classList.add("hidden");
    window.nextScrambleOverride = null;
    isGhostPlaybackActive = false;
  });

  window.onGhostScrambleComplete = function() {
    if (ghostPip?.classList.contains("hidden") || !ghostCube) return;
    isGhostPlaybackActive = false;
    ghostMoveIndex = 0;
    syncGhostScramble();

    // Reset HUD display
    document.getElementById("ghost-time-delta").textContent = "--";
    document.getElementById("ghost-time-delta").style.color = "";
    document.getElementById("ghost-move-delta").textContent = "--";
    document.getElementById("ghost-move-delta").style.color = "";
  };

  window.onMainTimerTick = function(elapsedMs) {
    if (ghostPip?.classList.contains("hidden") || !ghostCube || !currentGhostData) return;

    // Start playback on first move of play phase
    if (!isGhostPlaybackActive && mainCube && mainCube.moveCount > 0) {
      isGhostPlaybackActive = true;
      ghostMoveIndex = 0;
      ghostCube.setSpeed(200);
    }

    if (isGhostPlaybackActive) {
      // Execute ghost moves when due
      while (ghostMoveIndex < currentGhostData.solve.length && currentGhostData.solve[ghostMoveIndex].elapsed <= elapsedMs) {
        const move = currentGhostData.solve[ghostMoveIndex];
        ghostCube.executeMove(move.face, move.direction, false);
        ghostMoveIndex++;
      }

      // 1. Move Delta
      const userMoves = mainCube.moveHistory.length;
      const ghostMoves = ghostMoveIndex;
      const moveDelta = userMoves - ghostMoves;
      const mDeltaEl = document.getElementById("ghost-move-delta");
      if (mDeltaEl) {
        mDeltaEl.textContent = moveDelta > 0 ? `+${moveDelta}` : `${moveDelta}`;
        mDeltaEl.style.color = moveDelta > 0 ? "#f44336" : moveDelta < 0 ? "#4caf50" : "#a0a0b0";
      }

      // 2. Time Delta
      const tDeltaEl = document.getElementById("ghost-time-delta");
      if (tDeltaEl && userMoves > 0) {
        const targetGhostMove = currentGhostData.solve[Math.min(userMoves - 1, currentGhostData.solve.length - 1)];
        if (targetGhostMove) {
          const deltaSec = ((elapsedMs - targetGhostMove.elapsed) / 1000).toFixed(1);
          tDeltaEl.textContent = deltaSec > 0 ? `+${deltaSec}s` : `${deltaSec}s`;
          tDeltaEl.style.color = deltaSec > 0 ? "#f44336" : "#4caf50";
        }
      }
    }
  };

  window.onMainCubeSolved = function(timeSeconds, scrambleMoves, solveRecord) {
    isGhostPlaybackActive = false;
    
    // Check if new PB
    const existing = localStorage.getItem("rubiks_cube_pb");
    let isNewPB = true;
    if (existing) {
      try {
        const pb = JSON.parse(existing);
        if (timeSeconds >= pb.time) {
          isNewPB = false;
        }
      } catch (e) {}
    }

    if (isNewPB) {
      localStorage.setItem("rubiks_cube_pb", JSON.stringify({
        time: timeSeconds,
        scramble: scrambleMoves,
        solve: solveRecord
      }));
      
      // Update HUD
      document.getElementById("ghost-pb-val").textContent = `${timeSeconds.toFixed(1)}s`;
      
      // Show mini banner or log
      console.log("New PB Saved:", timeSeconds);
      
      // Show message in celebration dialog if present
      setTimeout(() => {
        const title = document.querySelector(".solved-celebration h2");
        if (title) {
          title.innerHTML = "New Personal Best! 🎉";
        }
      }, 600);
    }
  };
});