#include <WiFi.h>
#include <HTTPClient.h>
#include <WebServer.h>
#include <DHT.h>
#include <ESP32Servo.h>

// Replace with your network credentials
const char* ssid = "Wokwi-GUEST";
const char* password = "";

// Define pins
#define DHTPIN 15
#define DHTTYPE DHT22
#define SERVO_PIN 13

DHT dht(DHTPIN, DHTTYPE);
Servo sunroofServo;
WebServer server(80);

String sunroofState = "Unknown";

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
  Serial.println("Connected to the WiFi network");

  dht.begin();
  sunroofServo.attach(SERVO_PIN);

  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("\n✅ Connected to WiFi");
  Serial.print("🌐 IP Address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.begin();
  Serial.println("🌐 Web server started");
}

void loop() {
  server.handleClient();

  float temperature = dht.readTemperature();

  if (isnan(temperature)) {
    Serial.println("❌ Failed to read temperature from DHT sensor!");
    delay(2000);
    return;
  }

  Serial.print("🌡 Temperature: ");
  Serial.print(temperature);
  Serial.println("°C");

  if (temperature <= 25) {
    sunroofServo.write(0);
    sunroofState = "Closed";
  } else if (temperature > 25 && temperature <= 35) {
    sunroofServo.write(90);
    sunroofState = "Half Open";
  } else {
    sunroofServo.write(180);
    sunroofState = "Fully Open";
  }

  delay(3000); // Prevents overwhelming the loop
}

void handleRoot() {
  float temperature = dht.readTemperature();

  String html = R"rawliteral(
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Smart Car Sunroof</title>
      <style>
        body {
          margin: 0;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
          color: white;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
        }
        .card {
          background-color: rgba(255, 255, 255, 0.1);
          padding: 30px;
          border-radius: 12px;
          box-shadow: 0 8px 16px rgba(0,0,0,0.25);
          text-align: center;
          max-width: 400px;
          width: 90%;
        }
        h1 {
          font-size: 24px;
          margin-bottom: 10px;
          color: #00d9ff;
        }
        p {
          font-size: 18px;
          margin: 10px 0;
        }
        .temp {
          font-size: 28px;
          color: #ffffff;
        }
        .status {
          font-size: 20px;
          font-weight: bold;
          color: #66ffcc;
        }
        .refresh {
          margin-top: 20px;
          background-color: #00d9ff;
          color: #000;
          border: none;
          padding: 10px 20px;
          border-radius: 6px;
          cursor: pointer;
        }
        .refresh:hover {
          background-color: #00b4cc;
        }
      </style>
    </head>
    <body>
      <div class="card">
        <h1>🚗 Smart Sunroof Dashboard</h1>
        <p class="temp">Temperature: )rawliteral" + String(temperature) + R"rawliteral( °C</p>
        <p class="status">Sunroof: )rawliteral" + sunroofState + R"rawliteral(</p>
        <button class="refresh" onclick="location.reload()">🔄 Refresh</button>
      </div>
    </body>
    </html>
  )rawliteral";

  server.send(200, "text/html", html);
}
$abcdeabcde151015202530354045505560fghijfghij