#include <WiFi.h>

// -------- WIFI --------
const char* ssid = " YOUR_SSID "; // Replace with your Wifi username
const char* password = " YOUR_PASSWORD "; //Replace with your Wifi password

WiFiServer server(80);

// -------- MOTOR PINS --------
#define LF 18
#define LR 19
#define RF 25
#define RR 26

// -------- STATUS LED --------
#define STATUS_LED 2

// -------- SETUP --------
void setup() {

  Serial.begin(115200);

  ledcAttach(LF, 1000, 8);
  ledcAttach(LR, 1000, 8);
  ledcAttach(RF, 1000, 8);
  ledcAttach(RR, 1000, 8);

  pinMode(STATUS_LED, OUTPUT);
  digitalWrite(STATUS_LED, LOW);

  stopMotor();

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) delay(300);

  Serial.println(WiFi.localIP());
  server.begin();
}

// -------- LOOP --------
void loop() {

  WiFiClient client = server.available();
  if (!client) return;

  String request = client.readStringUntil('\r');

  if (request.indexOf("/forward") != -1) {
    digitalWrite(STATUS_LED, HIGH);
    forward();
  }
  else if (request.indexOf("/back") != -1) {
    digitalWrite(STATUS_LED, HIGH);
    backward();
  }
  else if (request.indexOf("/left") != -1) {
    digitalWrite(STATUS_LED, HIGH);
    left();
  }
  else if (request.indexOf("/right") != -1) {
    digitalWrite(STATUS_LED, HIGH);
    right();
  }
  else if (request.indexOf("/stop") != -1) {
    digitalWrite(STATUS_LED, LOW);
    stopMotor();
  }

  sendWebPage(client);
  client.stop();
}

// -------- MOTOR CONTROL --------

// staggered start for battery stability
void forward() {
  ledcWrite(LF, 255);
  delay(80);
  ledcWrite(RF, 255);
  delay(80);

  ledcWrite(LF, 220);
  ledcWrite(RF, 220);
  ledcWrite(LR, 0);
  ledcWrite(RR, 0);
}

void backward() {
  ledcWrite(LR, 255);
  delay(80);
  ledcWrite(RR, 255);
  delay(80);

  ledcWrite(LR, 220);
  ledcWrite(RR, 220);
  ledcWrite(LF, 0);
  ledcWrite(RF, 0);
}

void left() {
  ledcWrite(LF, 0);
  ledcWrite(LR, 200);
  ledcWrite(RF, 200);
  ledcWrite(RR, 0);
}

void right() {
  ledcWrite(LF, 200);
  ledcWrite(LR, 0);
  ledcWrite(RF, 0);
  ledcWrite(RR, 200);
}

void stopMotor() {
  ledcWrite(LF, 0);
  ledcWrite(LR, 0);
  ledcWrite(RF, 0);
  ledcWrite(RR, 0);
}

// -------- WEB PAGE --------
void sendWebPage(WiFiClient client) {

  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html; charset=UTF-8");
  client.println("Connection: close");
  client.println();

  client.println(R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP32 RC Car</title>

<style>

/* 🔒 Disable selection & highlight */
body{
font-family:sans-serif;
text-align:center;
background:#111;
color:white;

user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-webkit-touch-callout:none;
-webkit-tap-highlight-color: transparent;
}

.joystick{
width:220px;height:220px;background:#222;border-radius:50%;
position:relative;margin:40px auto;
}

.btn{
width:70px;height:70px;background:#444;border-radius:50%;
position:absolute;line-height:70px;font-size:18px;color:white;
transition:0.2s;

user-select:none;
-webkit-user-select:none;
-webkit-touch-callout:none;
-webkit-tap-highlight-color: transparent;
}

.btn.active{
background:#00ccff;
transform:scale(1.15);
}

#up{top:0;left:75px;}
#down{bottom:0;left:75px;}
#left{left:0;top:75px;}
#right{right:0;top:75px;}
#center{top:75px;left:75px;background:red;}

#status{
margin-top:20px;
font-size:20px;
color:#00ccff;
}

</style>
</head>

<body>

<h2>QUAD ROBOTICS</h2>
<p>Battery-Optimized RC Control</p>

<div class="joystick">
  <div class="btn" id="up"
       ontouchstart="press('forward',this,'FORWARD')"
       ontouchend="release()">UP</div>

  <div class="btn" id="down"
       ontouchstart="press('back',this,'BACKWARD')"
       ontouchend="release()">DOWN</div>

  <div class="btn" id="left"
       ontouchstart="press('left',this,'LEFT')"
       ontouchend="release()">LEFT</div>

  <div class="btn" id="right"
       ontouchstart="press('right',this,'RIGHT')"
       ontouchend="release()">RIGHT</div>

  <div class="btn" id="center"
       ontouchstart="press('stop',this,'STOP')">STOP</div>
</div>

<div id="status">STOP</div>

<script>

function press(cmd,btn,text){
  btn.classList.add("active");
  document.getElementById("status").innerText=text;

  var xhr=new XMLHttpRequest();
  xhr.open("GET","/"+cmd,true);
  xhr.send();
}

function release(){
  document.querySelectorAll('.btn').forEach(b=>b.classList.remove('active'));
  document.getElementById("status").innerText="STOP";

  var xhr=new XMLHttpRequest();
  xhr.open("GET","/stop",true);
  xhr.send();
}

</script>

</body>
</html>
)rawliteral");
}