/*******************************************************
 * 4-CYLINDER ESP32 ECU SYSTEM
 * 
 * Professional Features:
 * - 4 injectors and 4 ignition channels
 * - Dynamic fuel AND ignition maps with customizable RPM range
 * - Professional web-based tuning interface with dual map editors
 * - Complete lighting controls (headlights, turns, brakes)
 * - Real-time sensor monitoring and fail-safes
 * - Advanced fuel & ignition map editors with 0-RPM to limit range
 * - Multiple fuel & ignition map support with selection interface
 * - WORKING 3D visualization and graph views for both maps
 *******************************************************/

#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <ArduinoJson.h>
#include <EEPROM.h>

// ==================== CONFIGURATION ====================
const char* ssid = "ESP32_ECU";
const char* password = "tune12345";

// ==================== PIN DEFINITIONS ====================
// Fuel Injectors
#define PIN_INJECTOR_1      12
#define PIN_INJECTOR_2      14  
#define PIN_INJECTOR_3      27
#define PIN_INJECTOR_4      26

// Ignition Coils
#define PIN_IGNITION_1      9
#define PIN_IGNITION_2      13
#define PIN_IGNITION_3      11
#define PIN_IGNITION_4      10

// Lighting Outputs
#define PIN_HEADLIGHT       17
#define PIN_HIGHBEAM        16
#define PIN_LEFT_TURN       5
#define PIN_RIGHT_TURN      4
#define PIN_BRAKE_LIGHT     8

// Sensor Inputs
#define PIN_O2_SENSOR       32
#define PIN_TPS             33
#define PIN_MAP_SENSOR      34
#define PIN_ENGINE_TEMP     35
#define PIN_RPM             17

// ==================== GLOBAL VARIABLES ====================
AsyncWebServer server(80);

// Engine State
volatile unsigned long rpmPulseTime = 0;
volatile unsigned long lastRpmPulse = 0;
float currentRPM = 0;
float o2Value = 14.7;
float tpsValue = 0;
float mapValue = 0;
float engineTemp = 20;
float batteryVoltage = 12.5;

// System State
bool systemEnabled = false;
bool fuelPumpRunning = false;
bool criticalFault = false;
String faultMessage = "";

// Injection Tracking
unsigned long lastInjectorPulse[4] = {0, 0, 0, 0};
int currentPulseWidth[4] = {0, 0, 0, 0};
unsigned long engineRunTime = 0;

// Lighting State
bool headlightState = false;
bool highbeamState = false;
bool leftTurnState = false;
bool rightTurnState = false;
bool brakeLightState = false;
bool hazardState = false;
unsigned long turnSignalPreviousMillis = 0;
bool turnSignalBlinkState = false;
const long turnSignalInterval = 500;

// Tuning Parameters
struct TuningParams {
  float fuelMultiplier = 1.0;
  float ignitionAdvance = 12.0;
  float targetAFR = 14.7;
  int rpmLimit = 8000;
  int tempLimit = 105;
  int minRPM = 0;
  int maxRPM = 8000;
  int rpmStep = 250;
  int loadStep = 10;
  String currentTune = "performance";
  String fuelType = "gasoline";
};
TuningParams tuning;

// Advanced Fuel & Ignition Map Structures
#define MAX_RPM_POINTS 100  // Support up to 100 RPM points (0-10000 RPM)
#define MAX_LOAD_POINTS 11  // 0-100% in 10% steps + 0%

struct FuelMapCell {
  int pulseWidth;
  bool learned;
  float correction;
};

struct IgnitionMapCell {
  float advance;
  bool learned;
  float correction;
};

struct FuelMap {
  String name;
  String description;
  String fuelType;
  int rpmPoints[MAX_RPM_POINTS];
  int loadPoints[MAX_LOAD_POINTS];
  FuelMapCell cells[MAX_RPM_POINTS][MAX_LOAD_POINTS];
  int rpmPointCount;
  int loadPointCount;
};

struct IgnitionMap {
  String name;
  String description;
  int rpmPoints[MAX_RPM_POINTS];
  int loadPoints[MAX_LOAD_POINTS];
  IgnitionMapCell cells[MAX_RPM_POINTS][MAX_LOAD_POINTS];
  int rpmPointCount;
  int loadPointCount;
};

FuelMap fuelMap;
IgnitionMap ignitionMap;
bool isFlashing = false;
unsigned long flashStartTime = 0;

// Multiple fuel & ignition maps storage
#define MAX_FUEL_MAPS 10
#define MAX_IGNITION_MAPS 10
FuelMap fuelMaps[MAX_FUEL_MAPS];
IgnitionMap ignitionMaps[MAX_IGNITION_MAPS];
int currentFuelMapIndex = 0;
int currentIgnitionMapIndex = 0;
int fuelMapCount = 0;
int ignitionMapCount = 0;

// Firing order (1-3-4-2 typical for inline-4)
const int firingOrder[4] = {0, 2, 3, 1}; // Injector order
const int ignitionOrder[4] = {0, 2, 3, 1}; // Ignition order
int currentCylinder = 0;
unsigned long lastCylinderTime = 0;

// ==================== EMBEDDED WEBPAGE ====================
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <title>Professional 4-Cylinder ECU Tuner</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.7.0/chart.min.js"></script>
  <style>
    :root {
      --primary: #2c3e50;
      --secondary: #3498db;
      --success: #27ae60;
      --danger: #e74c3c;
      --warning: #f39c12;
      --info: #17a2b8;
      --dark: #34495e;
      --light: #ecf0f1;
      --fuel-color: #e74c3c;
      --ignition-color: #3498db;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #333;
      min-height: 100vh;
      padding: 20px;
    }
    .container {
      max-width: 1600px;
      margin: 0 auto;
    }
    .header {
      background: white;
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      margin-bottom: 20px;
      text-align: center;
    }
    .header h1 {
      color: var(--primary);
      margin-bottom: 10px;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 20px;
    }
    @media (max-width: 768px) {
      .grid {
        grid-template-columns: 1fr;
      }
    }
    .card {
      background: white;
      padding: 25px;
      border-radius: 15px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .card h2 {
      color: var(--primary);
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--secondary);
    }
    
    /* Map Editor Tabs */
    .map-tabs {
      display: flex;
      background: var(--light);
      border-radius: 8px;
      padding: 5px;
      margin-bottom: 20px;
    }
    .map-tab {
      padding: 12px 20px;
      border: none;
      background: transparent;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.3s ease;
      flex: 1;
      text-align: center;
    }
    .map-tab.active {
      background: var(--secondary);
      color: white;
    }
    .map-tab.fuel {
      border-bottom: 3px solid var(--fuel-color);
    }
    .map-tab.ignition {
      border-bottom: 3px solid var(--ignition-color);
    }
    
    /* Sensor Grid */
    .sensor-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
    }
    .sensor-item {
      text-align: center;
      padding: 15px;
      background: var(--light);
      border-radius: 10px;
    }
    .sensor-value {
      font-size: 1.8em;
      font-weight: bold;
      color: var(--primary);
      margin: 5px 0;
    }
    .sensor-unit {
      color: #7f8c8d;
      font-size: 0.9em;
    }
    .gauge {
      width: 100%;
      height: 20px;
      background: var(--light);
      border-radius: 10px;
      overflow: hidden;
      margin: 10px 0;
    }
    .gauge-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--success), var(--warning), var(--danger));
      transition: width 0.5s ease;
    }
    
    /* Buttons and Controls */
    .btn {
      padding: 12px 20px;
      margin: 5px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      transition: all 0.3s ease;
      min-width: 110px;
    }
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    .btn-primary { background: var(--secondary); color: white; }
    .btn-success { background: var(--success); color: white; }
    .btn-danger { background: var(--danger); color: white; }
    .btn-warning { background: var(--warning); color: white; }
    .btn-info { background: var(--info); color: white; }
    .btn-fuel { background: var(--fuel-color); color: white; }
    .btn-ignition { background: var(--ignition-color); color: white; }
    .btn-active { 
      background: var(--dark) !important; 
      color: white;
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
    }
    
    .control-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin: 15px 0;
    }
    .preset-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 10px;
      margin: 15px 0;
    }
    
    /* Map Table */
    .map-container {
      overflow-x: auto;
      margin: 20px 0;
    }
    .map-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      background: white;
    }
    .map-table th,
    .map-table td {
      padding: 8px;
      text-align: center;
      border: 1px solid #ddd;
      min-width: 60px;
    }
    .map-table th {
      background: var(--primary);
      color: white;
      position: sticky;
      top: 0;
    }
    .map-table th:first-child {
      position: sticky;
      left: 0;
      background: var(--dark);
      z-index: 2;
    }
    .map-table td:first-child {
      position: sticky;
      left: 0;
      background: var(--light);
      font-weight: bold;
      z-index: 1;
    }
    .map-table input {
      width: 100%;
      padding: 4px;
      border: 1px solid #ddd;
      border-radius: 3px;
      text-align: center;
      font-size: 11px;
    }
    .map-table input:focus {
      border-color: var(--secondary);
      outline: none;
      background: #f0f8ff;
    }
    
    /* Lighting Controls */
    .lighting-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin: 15px 0;
    }
    .light-item {
      background: var(--light);
      padding: 15px;
      border-radius: 10px;
      text-align: center;
    }
    .light-status {
      font-size: 1.2em;
      font-weight: bold;
      margin: 10px 0;
    }
    .status-on { color: var(--success); }
    .status-off { color: var(--danger); }
    .status-blinking { color: var(--warning); animation: blink 1s infinite; }
    @keyframes blink { 50% { opacity: 0.5; } }
    
    /* Tuning Controls */
    .slider-container {
      margin: 15px 0;
    }
    .slider-container label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: var(--primary);
    }
    .slider-value {
      float: right;
      font-weight: bold;
      color: var(--secondary);
    }
    input[type="range"] {
      width: 100%;
      height: 8px;
      border-radius: 4px;
      background: var(--light);
      outline: none;
    }
    
    .status-indicator {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 8px;
    }
    .status-on { background: var(--success); }
    .status-off { background: var(--danger); }
    .status-fault { background: var(--warning); animation: pulse 1s infinite; }
    @keyframes pulse {
      0% { opacity: 1; }
      50% { opacity: 0.5; }
      100% { opacity: 1; }
    }
    
    .fault-panel {
      background: var(--danger);
      color: white;
      padding: 15px;
      border-radius: 10px;
      margin: 10px 0;
      text-align: center;
      display: none;
    }
    
    .map-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 15px 0;
      flex-wrap: wrap;
      gap: 10px;
    }
    
    /* Cylinder Info */
    .cylinder-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin: 15px 0;
    }
    .cylinder-item {
      background: var(--light);
      padding: 15px;
      border-radius: 10px;
      text-align: center;
    }
    .cylinder-active {
      background: #e8f4fd;
      border: 2px solid var(--secondary);
    }
    
    /* Tune Info */
    .tune-info {
      background: #e8f4fd;
      padding: 15px;
      border-radius: 10px;
      margin: 10px 0;
      border-left: 4px solid var(--secondary);
    }
    
    /* Map Selection */
    .map-selection-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin: 15px 0;
    }
    .map-item {
      background: var(--light);
      padding: 15px;
      border-radius: 10px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid transparent;
    }
    .map-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .map-item.active {
      border-color: var(--secondary);
      background: #e8f4fd;
    }
    .map-item h3 {
      color: var(--primary);
      margin-bottom: 10px;
    }
    .map-meta {
      font-size: 0.8em;
      color: #7f8c8d;
      margin: 5px 0;
    }
    .map-actions {
      margin-top: 10px;
      display: flex;
      gap: 5px;
      justify-content: center;
    }
    .map-actions .btn {
      padding: 6px 12px;
      font-size: 12px;
      min-width: auto;
    }
    
    /* View Toggle */
    .view-toggle {
      display: flex;
      background: var(--light);
      border-radius: 8px;
      padding: 5px;
    }
    .view-toggle button {
      padding: 8px 15px;
      border: none;
      background: transparent;
      border-radius: 5px;
      cursor: pointer;
    }
    .view-toggle button.active {
      background: var(--secondary);
      color: white;
    }
    
    /* 3D View */
    .map-3d {
      width: 100%;
      height: 400px;
      background: #1a1a1a;
      border-radius: 10px;
      margin: 15px 0;
      position: relative;
      overflow: hidden;
    }
    .map-3d canvas {
      border-radius: 10px;
    }
    
    /* Graph View */
    .map-graph {
      width: 100%;
      height: 400px;
      background: white;
      border-radius: 10px;
      margin: 15px 0;
      position: relative;
    }
    .map-graph canvas {
      border-radius: 10px;
    }
    
    /* Map Editor Sections */
    .map-editor-section {
      display: none;
    }
    .map-editor-section.active {
      display: block;
    }
    
    /* Visualization Controls */
    .viz-controls {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.7);
      padding: 10px;
      border-radius: 5px;
      z-index: 10;
    }
    .viz-controls button {
      background: #444;
      color: white;
      border: none;
      padding: 5px 10px;
      margin: 2px;
      border-radius: 3px;
      cursor: pointer;
    }
    .viz-controls button:hover {
      background: #666;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Professional 4-Cylinder ECU Tuner</h1>
      <p>Advanced Engine Management & Lighting Control</p>
    </div>

    <div class="fault-panel" id="faultPanel">
      <strong>CRITICAL FAULT:</strong> <span id="faultMessage"></span>
    </div>

    <div class="grid">
      <!-- Sensor Data Panel -->
      <div class="card">
        <h2>Live Engine Data</h2>
        <div class="sensor-grid">
          <div class="sensor-item">
            <div>Engine RPM</div>
            <div class="sensor-value" id="rpmValue">0</div>
            <div class="sensor-unit">RPM</div>
            <div class="gauge"><div class="gauge-fill" id="rpmGauge" style="width: 0%"></div></div>
          </div>
          <div class="sensor-item">
            <div>Air/Fuel Ratio</div>
            <div class="sensor-value" id="o2Value">0.00</div>
            <div class="sensor-unit">AFR</div>
            <div class="gauge"><div class="gauge-fill" id="o2Gauge" style="width: 0%"></div></div>
          </div>
          <div class="sensor-item">
            <div>Throttle Position</div>
            <div class="sensor-value" id="tpsValue">0%</div>
            <div class="sensor-unit">Percentage</div>
            <div class="gauge"><div class="gauge-fill" id="tpsGauge" style="width: 0%"></div></div>
          </div>
          <div class="sensor-item">
            <div>Engine Load</div>
            <div class="sensor-value" id="mapValue">0%</div>
            <div class="sensor-unit">MAP</div>
            <div class="gauge"><div class="gauge-fill" id="mapGauge" style="width: 0%"></div></div>
          </div>
          <div class="sensor-item">
            <div>Engine Temp</div>
            <div class="sensor-value" id="tempValue">0°C</div>
            <div class="sensor-unit">Celsius</div>
            <div class="gauge"><div class="gauge-fill" id="tempGauge" style="width: 0%"></div></div>
          </div>
          <div class="sensor-item">
            <div>Battery Voltage</div>
            <div class="sensor-value" id="voltageValue">0.0</div>
            <div class="sensor-unit">Volts</div>
            <div class="gauge"><div class="gauge-fill" id="voltageGauge" style="width: 0%"></div></div>
          </div>
        </div>
        
        <div style="margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 10px;">
          <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
            <div>
              <span class="status-indicator" id="systemStatusLight"></span>
              System: <span id="systemStatusText">OFF</span>
            </div>
            <div>Active Cylinder: <span id="activeCylinder">-</span></div>
            <div>Fuel: <span id="fuelType">gasoline</span></div>
            <div>Tune: <span id="currentTune">performance</span></div>
          </div>
        </div>

        <!-- Cylinder Information -->
        <h3>Cylinder Status</h3>
        <div class="cylinder-grid">
          <div class="cylinder-item" id="cyl1">
            <strong>Cylinder 1</strong><br>
            Pulse: <span id="pulse1">0</span>µs<br>
            Timing: <span id="timing1">0</span>°
          </div>
          <div class="cylinder-item" id="cyl2">
            <strong>Cylinder 2</strong><br>
            Pulse: <span id="pulse2">0</span>µs<br>
            Timing: <span id="timing2">0</span>°
          </div>
          <div class="cylinder-item" id="cyl3">
            <strong>Cylinder 3</strong><br>
            Pulse: <span id="pulse3">0</span>µs<br>
            Timing: <span id="timing3">0</span>°
          </div>
          <div class="cylinder-item" id="cyl4">
            <strong>Cylinder 4</strong><br>
            Pulse: <span id="pulse4">0</span>µs<br>
            Timing: <span id="timing4">0</span>°
          </div>
        </div>
      </div>

      <!-- System Control Panel -->
      <div class="card">
        <h2>System Controls</h2>
        
        <div class="control-group">
          <button class="btn btn-success" onclick="toggleSystem()">
            <span class="status-indicator status-off" id="powerLight"></span>
            Power: <span id="powerStatus">OFF</span>
          </button>
          <button class="btn btn-primary" onclick="toggleFuelPump()">
            Fuel Pump: <span id="pumpStatus">OFF</span>
          </button>
        </div>

        <div class="tune-info">
          <strong>Active Tune:</strong> <span id="activeTuneName">Performance</span><br>
          <span id="tuneDescription">Balanced performance for street use</span>
        </div>

        <h3>Preset Tunes</h3>
        <div class="preset-grid">
          <button class="btn btn-info" onclick="applyPreset('economy')">Economy</button>
          <button class="btn btn-success" onclick="applyPreset('performance')">Performance</button>
          <button class="btn btn-warning" onclick="applyPreset('race')">Race</button>
          <button class="btn btn-primary" onclick="applyPreset('methanol')">Methanol</button>
          <button class="btn btn-primary" onclick="applyPreset('gasoline')">Gasoline</button>
        </div>

        <h3>Lighting Controls</h3>
        <div class="lighting-grid">
          <div class="light-item">
            <div>Headlights</div>
            <div class="light-status status-off" id="headlightStatus">OFF</div>
            <button class="btn btn-primary" onclick="toggleHeadlights()">Toggle</button>
          </div>
          <div class="light-item">
            <div>High Beams</div>
            <div class="light-status status-off" id="highbeamStatus">OFF</div>
            <button class="btn btn-primary" onclick="toggleHighbeams()">Toggle</button>
          </div>
          <div class="light-item">
            <div>Left Turn</div>
            <div class="light-status status-off" id="leftTurnStatus">OFF</div>
            <button class="btn btn-warning" onclick="toggleLeftTurn()">Toggle</button>
          </div>
          <div class="light-item">
            <div>Right Turn</div>
            <div class="light-status status-off" id="rightTurnStatus">OFF</div>
            <button class="btn btn-warning" onclick="toggleRightTurn()">Toggle</button>
          </div>
          <div class="light-item">
            <div>Brake Lights</div>
            <div class="light-status status-off" id="brakeLightStatus">OFF</div>
            <button class="btn btn-danger" onclick="toggleBrakeLights()">Toggle</button>
          </div>
          <div class="light-item">
            <div>Hazard Lights</div>
            <div class="light-status status-off" id="hazardStatus">OFF</div>
            <button class="btn btn-warning" onclick="toggleHazards()">Toggle</button>
          </div>
        </div>

        <h3>Quick Tuning</h3>
        <div class="slider-container">
          <label>Fuel Multiplier: <span class="slider-value" id="fuelMultiplierValue">1.00</span></label>
          <input type="range" id="fuelMultiplier" min="0.5" max="1.8" step="0.01" value="1.0" oninput="updateFuelMultiplier(this.value)">
        </div>

        <div class="slider-container">
          <label>Ignition Advance: <span class="slider-value" id="ignitionAdvanceValue">12.0</span></label>
          <input type="range" id="ignitionAdvance" min="5.0" max="35.0" step="0.5" value="12.0" oninput="updateIgnitionAdvance(this.value)">
        </div>

        <div class="slider-container">
          <label>Target AFR: <span class="slider-value" id="targetAFRValue">14.7</span></label>
          <input type="range" id="targetAFR" min="6.0" max="18.0" step="0.1" value="14.7" oninput="updateTargetAFR(this.value)">
        </div>

        <div class="slider-container">
          <label>RPM Limit: <span class="slider-value" id="rpmLimitValue">8000</span></label>
          <input type="range" id="rpmLimit" min="3000" max="12000" step="100" value="8000" oninput="updateRPMLimit(this.value)">
        </div>

        <div class="control-group">
          <button class="btn btn-primary" onclick="saveTuning()">Save Tuning</button>
          <button class="btn btn-primary" onclick="loadTuning()">Load Tuning</button>
          <button class="btn btn-danger" onclick="resetTuning()">Reset Defaults</button>
        </div>
      </div>
    </div>

    <!-- Map Selection Panel -->
    <div class="card">
      <h2>Map Selection</h2>
      
      <div class="map-tabs">
        <button class="map-tab fuel active" onclick="switchMapType('fuel')">Fuel Maps</button>
        <button class="map-tab ignition" onclick="switchMapType('ignition')">Ignition Maps</button>
      </div>
      
      <!-- Fuel Map Selection -->
      <div id="fuelMapSelection" class="map-selection-section">
        <div style="margin-bottom: 15px;">
          <strong>Active Fuel Map:</strong> <span id="selectedFuelMap">Base Fuel Map</span> | 
          <strong>Status:</strong> <span id="fuelMapStatus">Loaded</span>
        </div>
        
        <div class="map-selection-grid" id="fuelMapSelectionGrid">
          <!-- Fuel maps will be populated by JavaScript -->
        </div>
      </div>
      
      <!-- Ignition Map Selection -->
      <div id="ignitionMapSelection" class="map-selection-section" style="display: none;">
        <div style="margin-bottom: 15px;">
          <strong>Active Ignition Map:</strong> <span id="selectedIgnitionMap">Base Ignition Map</span> | 
          <strong>Status:</strong> <span id="ignitionMapStatus">Loaded</span>
        </div>
        
        <div class="map-selection-grid" id="ignitionMapSelectionGrid">
          <!-- Ignition maps will be populated by JavaScript -->
        </div>
      </div>
      
      <div class="control-group" style="margin-top: 15px;">
        <button class="btn btn-primary" onclick="showUploadDialog()">Upload Custom Map</button>
        <button class="btn btn-info" onclick="createNewMap()">Create New Map</button>
        <button class="btn btn-warning" onclick="flashToECU()">Flash Selected to ECU</button>
      </div>
    </div>

    <!-- Professional Map Editor -->
    <div class="card">
      <h2>Professional Map Editor</h2>
      
      <div class="map-tabs">
        <button class="map-tab fuel active" onclick="switchEditor('fuel')">Fuel Map Editor</button>
        <button class="map-tab ignition" onclick="switchEditor('ignition')">Ignition Map Editor</button>
      </div>
      
      <!-- Fuel Map Editor -->
      <div id="fuelMapEditor" class="map-editor-section active">
        <div class="map-controls">
          <div>
            <strong>Editing:</strong> <span id="editingFuelMapName">Base Fuel Map</span>
          </div>
          <div class="view-toggle">
            <button class="active" onclick="switchFuelView('table')">Table View</button>
            <button onclick="switchFuelView('3d')">3D View</button>
            <button onclick="switchFuelView('graph')">Graph View</button>
          </div>
          <div>
            <button class="btn btn-fuel" onclick="saveCurrentFuelMap()">Save Fuel Map</button>
            <button class="btn btn-info" onclick="exportFuelMap()">Export Fuel Map</button>
          </div>
        </div>
        
        <!-- Table View -->
        <div id="fuelTableView">
          <div class="map-container">
            <table class="map-table" id="fuelMapTable">
              <thead id="fuelMapHeader">
                <!-- Header will be populated by JavaScript -->
              </thead>
              <tbody id="fuelMapBody">
                <!-- Fuel map will be populated by JavaScript -->
              </tbody>
            </table>
          </div>
        </div>
        
        <!-- 3D View -->
        <div id="fuelView3d" style="display: none;">
          <div class="map-3d" id="fuel3dContainer">
            <div class="viz-controls">
              <button onclick="resetFuel3DView()">Reset View</button>
              <button onclick="toggleFuelWireframe()">Wireframe</button>
            </div>
          </div>
        </div>
        
        <!-- Graph View -->
        <div id="fuelViewGraph" style="display: none;">
          <div class="map-graph">
            <canvas id="fuelGraphCanvas"></canvas>
          </div>
        </div>
        
        <div class="control-group" style="margin-top: 15px;">
          <button class="btn btn-fuel" onclick="updateFuelMap()">Update Fuel Map</button>
          <button class="btn btn-success" onclick="autoTuneFuel()">Auto-Tune Fuel</button>
          <button class="btn btn-info" onclick="smoothFuelMap()">Smooth Fuel Map</button>
          <button class="btn btn-warning" onclick="resetFuelMap()">Reset Fuel Map</button>
          <button class="btn btn-danger" onclick="flashFuelToECU()">Flash Fuel to ECU</button>
        </div>

        <div class="control-group" style="margin-top: 15px;">
          <button class="btn btn-primary" onclick="addFuelRPMRow()">Add RPM Point</button>
          <button class="btn btn-primary" onclick="removeFuelRPMRow()">Remove RPM Point</button>
          <button class="btn btn-info" onclick="exportFuelMap()">Export Fuel Map</button>
          <button class="btn btn-info" onclick="importFuelMap()">Import Fuel Map</button>
        </div>
      </div>
      
      <!-- Ignition Map Editor -->
      <div id="ignitionMapEditor" class="map-editor-section">
        <div class="map-controls">
          <div>
            <strong>Editing:</strong> <span id="editingIgnitionMapName">Base Ignition Map</span>
          </div>
          <div class="view-toggle">
            <button class="active" onclick="switchIgnitionView('table')">Table View</button>
            <button onclick="switchIgnitionView('3d')">3D View</button>
            <button onclick="switchIgnitionView('graph')">Graph View</button>
          </div>
          <div>
            <button class="btn btn-ignition" onclick="saveCurrentIgnitionMap()">Save Ignition Map</button>
            <button class="btn btn-info" onclick="exportIgnitionMap()">Export Ignition Map</button>
          </div>
        </div>
        
        <!-- Table View -->
        <div id="ignitionTableView">
          <div class="map-container">
            <table class="map-table" id="ignitionMapTable">
              <thead id="ignitionMapHeader">
                <!-- Header will be populated by JavaScript -->
              </thead>
              <tbody id="ignitionMapBody">
                <!-- Ignition map will be populated by JavaScript -->
              </tbody>
            </table>
          </div>
        </div>
        
        <!-- 3D View -->
        <div id="ignitionView3d" style="display: none;">
          <div class="map-3d" id="ignition3dContainer">
            <div class="viz-controls">
              <button onclick="resetIgnition3DView()">Reset View</button>
              <button onclick="toggleIgnitionWireframe()">Wireframe</button>
            </div>
          </div>
        </div>
        
        <!-- Graph View -->
        <div id="ignitionViewGraph" style="display: none;">
          <div class="map-graph">
            <canvas id="ignitionGraphCanvas"></canvas>
          </div>
        </div>
        
        <div class="control-group" style="margin-top: 15px;">
          <button class="btn btn-ignition" onclick="updateIgnitionMap()">Update Ignition Map</button>
          <button class="btn btn-success" onclick="autoTuneIgnition()">Auto-Tune Ignition</button>
          <button class="btn btn-info" onclick="smoothIgnitionMap()">Smooth Ignition Map</button>
          <button class="btn btn-warning" onclick="resetIgnitionMap()">Reset Ignition Map</button>
          <button class="btn btn-danger" onclick="flashIgnitionToECU()">Flash Ignition to ECU</button>
        </div>

        <div class="control-group" style="margin-top: 15px;">
          <button class="btn btn-primary" onclick="addIgnitionRPMRow()">Add RPM Point</button>
          <button class="btn btn-primary" onclick="removeIgnitionRPMRow()">Remove RPM Point</button>
          <button class="btn btn-info" onclick="exportIgnitionMap()">Export Ignition Map</button>
          <button class="btn btn-info" onclick="importIgnitionMap()">Import Ignition Map</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Upload Dialog -->
  <div id="uploadDialog" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center;">
    <div style="background: white; padding: 25px; border-radius: 15px; width: 90%; max-width: 500px;">
      <h3>Upload Custom Map</h3>
      <div style="margin: 15px 0;">
        <input type="file" id="mapFile" accept=".json,.bin,.hex" style="margin: 10px 0;">
        <div style="margin: 10px 0;">
          <label>Map Type:</label>
          <select id="mapType" style="width: 100%; padding: 8px; margin: 5px 0; border: 1px solid #ddd; border-radius: 4px;">
            <option value="fuel">Fuel Map</option>
            <option value="ignition">Ignition Map</option>
          </select>
        </div>
        <div style="margin: 10px 0;">
          <label>Map Name:</label>
          <input type="text" id="newMapName" style="width: 100%; padding: 8px; margin: 5px 0; border: 1px solid #ddd; border-radius: 4px;">
        </div>
        <div style="margin: 10px 0;">
          <label>Description:</label>
          <textarea id="newMapDescription" style="width: 100%; padding: 8px; margin: 5px 0; border: 1px solid #ddd; border-radius: 4px; height: 80px;"></textarea>
        </div>
      </div>
      <div class="control-group">
        <button class="btn btn-primary" onclick="uploadMap()">Upload</button>
        <button class="btn btn-danger" onclick="hideUploadDialog()">Cancel</button>
      </div>
    </div>
  </div>

  <script>
    let fuelMapData = {};
    let ignitionMapData = {};
    let currentRpmLimit = 8000;
    let currentRpmStep = 250;
    let currentLoadStep = 10;
    let currentFuelView = 'table';
    let currentIgnitionView = 'table';
    let currentMapType = 'fuel';
    let currentEditor = 'fuel';

    // Three.js variables
    let fuelScene, fuelCamera, fuelRenderer, fuelMesh;
    let ignitionScene, ignitionCamera, ignitionRenderer, ignitionMesh;
    let fuelWireframe = false;
    let ignitionWireframe = false;

    // Chart.js variables
    let fuelChart = null;
    let ignitionChart = null;

    // Fuel Map Management
    let fuelMaps = {
      'base': {
        name: 'Base Fuel Map',
        description: 'Default 4-cylinder fuel map',
        type: 'base',
        editable: true,
        data: []
      },
      'economy': {
        name: 'Economy',
        description: 'Fuel efficiency focused map',
        type: 'base', 
        editable: true,
        data: []
      },
      'race': {
        name: 'Race',
        description: 'Aggressive race tuning',
        type: 'base',
        editable: true,
        data: []
      }
    };
    
    // Ignition Map Management
    let ignitionMaps = {
      'base': {
        name: 'Base Ignition Map',
        description: 'Default 4-cylinder ignition map',
        type: 'base',
        editable: true,
        data: []
      },
      'economy': {
        name: 'Economy',
        description: 'Fuel efficiency focused ignition',
        type: 'base', 
        editable: true,
        data: []
      },
      'race': {
        name: 'Race',
        description: 'Aggressive race ignition',
        type: 'base',
        editable: true,
        data: []
      }
    };
    
    let currentFuelMapId = 'base';
    let currentIgnitionMapId = 'base';

    // Initialize fuel map
    function initializeFuelMap() {
      loadFuelMapFromECU();
    }

    // Initialize ignition map
    function initializeIgnitionMap() {
      loadIgnitionMapFromECU();
    }

    function loadFuelMapFromECU() {
      fetch('/fuelMap')
        .then(response => response.json())
        .then(data => {
          fuelMapData = data;
          currentRpmLimit = data.rpmLimit || 8000;
          currentRpmStep = data.rpmStep || 250;
          currentLoadStep = data.loadStep || 10;
          renderFuelMap();
          if (currentFuelView === '3d') {
            initFuel3DView();
          } else if (currentFuelView === 'graph') {
            initFuelGraph();
          }
        })
        .catch(error => {
          console.error('Error loading fuel map:', error);
          generateDefaultFuelMap();
        });
    }

    function loadIgnitionMapFromECU() {
      fetch('/ignitionMap')
        .then(response => response.json())
        .then(data => {
          ignitionMapData = data;
          renderIgnitionMap();
          if (currentIgnitionView === '3d') {
            initIgnition3DView();
          } else if (currentIgnitionView === 'graph') {
            initIgnitionGraph();
          }
        })
        .catch(error => {
          console.error('Error loading ignition map:', error);
          generateDefaultIgnitionMap();
        });
    }

    function generateDefaultFuelMap() {
      fuelMapData = {
        rpmPoints: [],
        loadPoints: [],
        cells: {},
        rpmLimit: 8000,
        rpmStep: 250,
        loadStep: 10
      };

      // Generate RPM points from 0 to limit
      for (let rpm = 0; rpm <= currentRpmLimit; rpm += currentRpmStep) {
        fuelMapData.rpmPoints.push(rpm);
      }

      // Generate load points from 0 to 100%
      for (let load = 0; load <= 100; load += currentLoadStep) {
        fuelMapData.loadPoints.push(load);
      }

      // Initialize cells with default values
      fuelMapData.rpmPoints.forEach(rpm => {
        fuelMapData.cells[rpm] = {};
        fuelMapData.loadPoints.forEach(load => {
          // Base calculation for pulse width
          let baseValue = 800 + (rpm * 0.1) + (load * 8);
          fuelMapData.cells[rpm][load] = Math.round(baseValue);
        });
      });

      renderFuelMap();
    }

    function generateDefaultIgnitionMap() {
      ignitionMapData = {
        rpmPoints: [],
        loadPoints: [],
        cells: {},
        rpmLimit: 8000,
        rpmStep: 250,
        loadStep: 10
      };

      // Generate RPM points from 0 to limit
      for (let rpm = 0; rpm <= currentRpmLimit; rpm += currentRpmStep) {
        ignitionMapData.rpmPoints.push(rpm);
      }

      // Generate load points from 0 to 100%
      for (let load = 0; load <= 100; load += currentLoadStep) {
        ignitionMapData.loadPoints.push(load);
      }

      // Initialize cells with default values
      ignitionMapData.rpmPoints.forEach(rpm => {
        ignitionMapData.cells[rpm] = {};
        ignitionMapData.loadPoints.forEach(load => {
          // Base calculation for ignition advance
          let baseValue = 10 + (rpm * 0.001) + (load * 0.1);
          ignitionMapData.cells[rpm][load] = parseFloat(baseValue.toFixed(1));
        });
      });

      renderIgnitionMap();
    }

    function renderFuelMap() {
      const header = document.getElementById('fuelMapHeader');
      const body = document.getElementById('fuelMapBody');
      
      // Clear existing content
      header.innerHTML = '';
      body.innerHTML = '';

      // Create header row
      let headerRow = '<tr><th>RPM/Load</th>';
      fuelMapData.loadPoints.forEach(load => {
        headerRow += `<th>${load}%</th>`;
      });
      headerRow += '</tr>';
      header.innerHTML = headerRow;

      // Create data rows
      fuelMapData.rpmPoints.forEach(rpm => {
        let row = `<tr><td><strong>${rpm}</strong></td>`;
        fuelMapData.loadPoints.forEach(load => {
          const value = fuelMapData.cells[rpm] && fuelMapData.cells[rpm][load] ? fuelMapData.cells[rpm][load] : 0;
          row += `<td><input type="number" value="${value}" data-rpm="${rpm}" data-load="${load}"></td>`;
        });
        row += '</tr>';
        body.innerHTML += row;
      });

      // Update UI info
      document.getElementById('selectedFuelMap').textContent = 'Base Fuel Map';
    }

    function renderIgnitionMap() {
      const header = document.getElementById('ignitionMapHeader');
      const body = document.getElementById('ignitionMapBody');
      
      // Clear existing content
      header.innerHTML = '';
      body.innerHTML = '';

      // Create header row
      let headerRow = '<tr><th>RPM/Load</th>';
      ignitionMapData.loadPoints.forEach(load => {
        headerRow += `<th>${load}%</th>`;
      });
      headerRow += '</tr>';
      header.innerHTML = headerRow;

      // Create data rows
      ignitionMapData.rpmPoints.forEach(rpm => {
        let row = `<tr><td><strong>${rpm}</strong></td>`;
        ignitionMapData.loadPoints.forEach(load => {
          const value = ignitionMapData.cells[rpm] && ignitionMapData.cells[rpm][load] ? ignitionMapData.cells[rpm][load] : 0;
          row += `<td><input type="number" step="0.1" value="${value}" data-rpm="${rpm}" data-load="${load}"></td>`;
        });
        row += '</tr>';
        body.innerHTML += row;
      });

      // Update UI info
      document.getElementById('selectedIgnitionMap').textContent = 'Base Ignition Map';
    }

    // 3D Visualization Functions
    function initFuel3DView() {
      const container = document.getElementById('fuel3dContainer');
      container.innerHTML = '<canvas id="fuel3dCanvas"></canvas>';
      
      const canvas = document.getElementById('fuel3dCanvas');
      canvas.width = container.clientWidth;
      canvas.height = container.clientHeight;

      // Create scene
      fuelScene = new THREE.Scene();
      fuelScene.background = new THREE.Color(0x1a1a1a);

      // Create camera
      fuelCamera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000);
      fuelCamera.position.set(50, 50, 80);
      fuelCamera.lookAt(0, 0, 0);

      // Create renderer
      fuelRenderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
      fuelRenderer.setSize(canvas.width, canvas.height);

      // Add lights
      const ambientLight = new THREE.AmbientLight(0x404040);
      fuelScene.add(ambientLight);

      const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
      directionalLight.position.set(50, 50, 50);
      fuelScene.add(directionalLight);

      // Create grid helper
      const gridHelper = new THREE.GridHelper(100, 20, 0x444444, 0x222222);
      fuelScene.add(gridHelper);

      // Create axes helper
      const axesHelper = new THREE.AxesHelper(30);
      fuelScene.add(axesHelper);

      // Create the surface
      createFuelSurface();

      // Add orbit controls
      const controls = new THREE.OrbitControls(fuelCamera, fuelRenderer.domElement);
      controls.enableDamping = true;
      controls.dampingFactor = 0.05;

      // Animation loop
      function animate() {
        requestAnimationFrame(animate);
        controls.update();
        fuelRenderer.render(fuelScene, fuelCamera);
      }
      animate();

      // Handle window resize
      window.addEventListener('resize', function() {
        canvas.width = container.clientWidth;
        canvas.height = container.clientHeight;
        fuelCamera.aspect = canvas.width / canvas.height;
        fuelCamera.updateProjectionMatrix();
        fuelRenderer.setSize(canvas.width, canvas.height);
      });
    }

    function createFuelSurface() {
      // Remove existing mesh
      if (fuelMesh) {
        fuelScene.remove(fuelMesh);
      }

      const rpmPoints = fuelMapData.rpmPoints;
      const loadPoints = fuelMapData.loadPoints;
      
      if (rpmPoints.length === 0 || loadPoints.length === 0) return;

      // Create geometry
      const geometry = new THREE.PlaneGeometry(80, 80, rpmPoints.length - 1, loadPoints.length - 1);
      const positions = geometry.attributes.position.array;

      // Scale and position the surface
      const rpmScale = 80 / Math.max(...rpmPoints);
      const loadScale = 80 / 100;
      const valueScale = 0.1; // Scale for pulse width values

      for (let i = 0; i < positions.length; i += 3) {
        const vertexIndex = i / 3;
        const x = positions[i];
        const y = positions[i + 1];
        
        // Convert geometry coordinates to map indices
        const rpmIndex = Math.round((x + 40) / 80 * (rpmPoints.length - 1));
        const loadIndex = Math.round((y + 40) / 80 * (loadPoints.length - 1));
        
        if (rpmIndex >= 0 && rpmIndex < rpmPoints.length && loadIndex >= 0 && loadIndex < loadPoints.length) {
          const rpm = rpmPoints[rpmIndex];
          const load = loadPoints[loadIndex];
          const value = fuelMapData.cells[rpm] && fuelMapData.cells[rpm][load] ? fuelMapData.cells[rpm][load] : 0;
          
          positions[i + 2] = value * valueScale; // Set Z position based on pulse width
        }
      }

      geometry.computeVertexNormals();

      // Create material
      const material = new THREE.MeshPhongMaterial({
        color: 0xe74c3c,
        wireframe: fuelWireframe,
        side: THREE.DoubleSide,
        transparent: true,
        opacity: 0.8
      });

      // Create mesh
      fuelMesh = new THREE.Mesh(geometry, material);
      fuelMesh.rotation.x = -Math.PI / 2;
      fuelScene.add(fuelMesh);

      // Add labels
      add3DLabels(fuelScene, 'Fuel Map', 'RPM', 'Load', 'Pulse Width (µs)');
    }

    function initIgnition3DView() {
      const container = document.getElementById('ignition3dContainer');
      container.innerHTML = '<canvas id="ignition3dCanvas"></canvas>';
      
      const canvas = document.getElementById('ignition3dCanvas');
      canvas.width = container.clientWidth;
      canvas.height = container.clientHeight;

      // Create scene
      ignitionScene = new THREE.Scene();
      ignitionScene.background = new THREE.Color(0x1a1a1a);

      // Create camera
      ignitionCamera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000);
      ignitionCamera.position.set(50, 50, 80);
      ignitionCamera.lookAt(0, 0, 0);

      // Create renderer
      ignitionRenderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
      ignitionRenderer.setSize(canvas.width, canvas.height);

      // Add lights
      const ambientLight = new THREE.AmbientLight(0x404040);
      ignitionScene.add(ambientLight);

      const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
      directionalLight.position.set(50, 50, 50);
      ignitionScene.add(directionalLight);

      // Create grid helper
      const gridHelper = new THREE.GridHelper(100, 20, 0x444444, 0x222222);
      ignitionScene.add(gridHelper);

      // Create axes helper
      const axesHelper = new THREE.AxesHelper(30);
      ignitionScene.add(axesHelper);

      // Create the surface
      createIgnitionSurface();

      // Add orbit controls
      const controls = new THREE.OrbitControls(ignitionCamera, ignitionRenderer.domElement);
      controls.enableDamping = true;
      controls.dampingFactor = 0.05;

      // Animation loop
      function animate() {
        requestAnimationFrame(animate);
        controls.update();
        ignitionRenderer.render(ignitionScene, ignitionCamera);
      }
      animate();

      // Handle window resize
      window.addEventListener('resize', function() {
        canvas.width = container.clientWidth;
        canvas.height = container.clientHeight;
        ignitionCamera.aspect = canvas.width / canvas.height;
        ignitionCamera.updateProjectionMatrix();
        ignitionRenderer.setSize(canvas.width, canvas.height);
      });
    }

    function createIgnitionSurface() {
      // Remove existing mesh
      if (ignitionMesh) {
        ignitionScene.remove(ignitionMesh);
      }

      const rpmPoints = ignitionMapData.rpmPoints;
      const loadPoints = ignitionMapData.loadPoints;
      
      if (rpmPoints.length === 0 || loadPoints.length === 0) return;

      // Create geometry
      const geometry = new THREE.PlaneGeometry(80, 80, rpmPoints.length - 1, loadPoints.length - 1);
      const positions = geometry.attributes.position.array;

      // Scale and position the surface
      const rpmScale = 80 / Math.max(...rpmPoints);
      const loadScale = 80 / 100;
      const valueScale = 2; // Scale for ignition advance values

      for (let i = 0; i < positions.length; i += 3) {
        const vertexIndex = i / 3;
        const x = positions[i];
        const y = positions[i + 1];
        
        // Convert geometry coordinates to map indices
        const rpmIndex = Math.round((x + 40) / 80 * (rpmPoints.length - 1));
        const loadIndex = Math.round((y + 40) / 80 * (loadPoints.length - 1));
        
        if (rpmIndex >= 0 && rpmIndex < rpmPoints.length && loadIndex >= 0 && loadIndex < loadPoints.length) {
          const rpm = rpmPoints[rpmIndex];
          const load = loadPoints[loadIndex];
          const value = ignitionMapData.cells[rpm] && ignitionMapData.cells[rpm][load] ? ignitionMapData.cells[rpm][load] : 0;
          
          positions[i + 2] = value * valueScale; // Set Z position based on ignition advance
        }
      }

      geometry.computeVertexNormals();

      // Create material
      const material = new THREE.MeshPhongMaterial({
        color: 0x3498db,
        wireframe: ignitionWireframe,
        side: THREE.DoubleSide,
        transparent: true,
        opacity: 0.8
      });

      // Create mesh
      ignitionMesh = new THREE.Mesh(geometry, material);
      ignitionMesh.rotation.x = -Math.PI / 2;
      ignitionScene.add(ignitionMesh);

      // Add labels
      add3DLabels(ignitionScene, 'Ignition Map', 'RPM', 'Load', 'Advance (°)');
    }

    function add3DLabels(scene, title, xLabel, yLabel, zLabel) {
      // Simple text labels using HTML would be better, but for simplicity we'll skip detailed labels
    }

    function resetFuel3DView() {
      if (fuelCamera) {
        fuelCamera.position.set(50, 50, 80);
        fuelCamera.lookAt(0, 0, 0);
      }
    }

    function resetIgnition3DView() {
      if (ignitionCamera) {
        ignitionCamera.position.set(50, 50, 80);
        ignitionCamera.lookAt(0, 0, 0);
      }
    }

    function toggleFuelWireframe() {
      fuelWireframe = !fuelWireframe;
      if (fuelMesh) {
        fuelMesh.material.wireframe = fuelWireframe;
      }
    }

    function toggleIgnitionWireframe() {
      ignitionWireframe = !ignitionWireframe;
      if (ignitionMesh) {
        ignitionMesh.material.wireframe = ignitionWireframe;
      }
    }

    // Graph Visualization Functions
    function initFuelGraph() {
      const ctx = document.getElementById('fuelGraphCanvas').getContext('2d');
      
      if (fuelChart) {
        fuelChart.destroy();
      }

      const rpmPoints = fuelMapData.rpmPoints;
      const loadPoints = fuelMapData.loadPoints;
      
      if (rpmPoints.length === 0 || loadPoints.length === 0) return;

      const datasets = [];
      const loadColors = [
        '#ff4444', '#ff8844', '#ffcc44', '#ffff44',
        '#ccff44', '#88ff44', '#44ff44', '#44ff88',
        '#44ffcc', '#44ffff', '#4488ff'
      ];

      loadPoints.forEach((load, index) => {
        const data = rpmPoints.map(rpm => {
          return fuelMapData.cells[rpm] && fuelMapData.cells[rpm][load] ? fuelMapData.cells[rpm][load] : 0;
        });

        datasets.push({
          label: `${load}% Load`,
          data: data,
          borderColor: loadColors[index % loadColors.length],
          backgroundColor: loadColors[index % loadColors.length] + '20',
          borderWidth: 2,
          tension: 0.4,
          fill: false
        });
      });

      fuelChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: rpmPoints,
          datasets: datasets
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            title: {
              display: true,
              text: 'Fuel Map - Pulse Width vs RPM',
              color: '#333',
              font: {
                size: 16
              }
            },
            legend: {
              position: 'right',
              labels: {
                color: '#333',
                usePointStyle: true
              }
            }
          },
          scales: {
            x: {
              title: {
                display: true,
                text: 'RPM',
                color: '#333'
              },
              grid: {
                color: '#e0e0e0'
              },
              ticks: {
                color: '#666'
              }
            },
            y: {
              title: {
                display: true,
                text: 'Pulse Width (µs)',
                color: '#333'
              },
              grid: {
                color: '#e0e0e0'
              },
              ticks: {
                color: '#666'
              }
            }
          }
        }
      });
    }

    function initIgnitionGraph() {
      const ctx = document.getElementById('ignitionGraphCanvas').getContext('2d');
      
      if (ignitionChart) {
        ignitionChart.destroy();
      }

      const rpmPoints = ignitionMapData.rpmPoints;
      const loadPoints = ignitionMapData.loadPoints;
      
      if (rpmPoints.length === 0 || loadPoints.length === 0) return;

      const datasets = [];
      const loadColors = [
        '#4444ff', '#4488ff', '#44ccff', '#44ffff',
        '#44ffcc', '#44ff88', '#44ff44', '#88ff44',
        '#ccff44', '#ffff44', '#ffcc44'
      ];

      loadPoints.forEach((load, index) => {
        const data = rpmPoints.map(rpm => {
          return ignitionMapData.cells[rpm] && ignitionMapData.cells[rpm][load] ? ignitionMapData.cells[rpm][load] : 0;
        });

        datasets.push({
          label: `${load}% Load`,
          data: data,
          borderColor: loadColors[index % loadColors.length],
          backgroundColor: loadColors[index % loadColors.length] + '20',
          borderWidth: 2,
          tension: 0.4,
          fill: false
        });
      });

      ignitionChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: rpmPoints,
          datasets: datasets
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            title: {
              display: true,
              text: 'Ignition Map - Advance vs RPM',
              color: '#333',
              font: {
                size: 16
              }
            },
            legend: {
              position: 'right',
              labels: {
                color: '#333',
                usePointStyle: true
              }
            }
          },
          scales: {
            x: {
              title: {
                display: true,
                text: 'RPM',
                color: '#333'
              },
              grid: {
                color: '#e0e0e0'
              },
              ticks: {
                color: '#666'
              }
            },
            y: {
              title: {
                display: true,
                text: 'Ignition Advance (°)',
                color: '#333'
              },
              grid: {
                color: '#e0e0e0'
              },
              ticks: {
                color: '#666'
              }
            }
          }
        }
      });
    }

    // View switching functions
    function switchFuelView(view) {
      currentFuelView = view;
      
      // Update button states
      document.querySelectorAll('#fuelMapEditor .view-toggle button').forEach(btn => {
        btn.classList.remove('active');
      });
      event.target.classList.add('active');
      
      // Show/hide views
      document.getElementById('fuelTableView').style.display = view === 'table' ? 'block' : 'none';
      document.getElementById('fuelView3d').style.display = view === '3d' ? 'block' : 'none';
      document.getElementById('fuelViewGraph').style.display = view === 'graph' ? 'block' : 'none';
      
      // Initialize visualization if needed
      if (view === '3d' && !fuelRenderer) {
        setTimeout(() => initFuel3DView(), 100);
      } else if (view === 'graph' && !fuelChart) {
        setTimeout(() => initFuelGraph(), 100);
      } else if (view === '3d' && fuelRenderer) {
        createFuelSurface();
      } else if (view === 'graph' && fuelChart) {
        fuelChart.update();
      }
    }
    
    function switchIgnitionView(view) {
      currentIgnitionView = view;
      
      // Update button states
      document.querySelectorAll('#ignitionMapEditor .view-toggle button').forEach(btn => {
        btn.classList.remove('active');
      });
      event.target.classList.add('active');
      
      // Show/hide views
      document.getElementById('ignitionTableView').style.display = view === 'table' ? 'block' : 'none';
      document.getElementById('ignitionView3d').style.display = view === '3d' ? 'block' : 'none';
      document.getElementById('ignitionViewGraph').style.display = view === 'graph' ? 'block' : 'none';
      
      // Initialize visualization if needed
      if (view === '3d' && !ignitionRenderer) {
        setTimeout(() => initIgnition3DView(), 100);
      } else if (view === 'graph' && !ignitionChart) {
        setTimeout(() => initIgnitionGraph(), 100);
      } else if (view === '3d' && ignitionRenderer) {
        createIgnitionSurface();
      } else if (view === 'graph' && ignitionChart) {
        ignitionChart.update();
      }
    }

    // Map Selection Functions
    function loadFuelMapSelection() {
      const grid = document.getElementById('fuelMapSelectionGrid');
      grid.innerHTML = '';
      
      for (let mapId in fuelMaps) {
        const map = fuelMaps[mapId];
        const isActive = mapId === currentFuelMapId;
        
        const mapItem = document.createElement('div');
        mapItem.className = `map-item ${isActive ? 'active' : ''}`;
        mapItem.onclick = () => selectFuelMap(mapId);
        
        mapItem.innerHTML = `
          <h3>${map.name}</h3>
          <div class="map-meta">${map.description}</div>
          <div class="map-meta">Type: ${map.type} | ${map.editable ? 'Editable' : 'Read-only'}</div>
          <div class="map-actions">
            <button class="btn btn-primary" onclick="event.stopPropagation(); loadFuelMapForEditing('${mapId}')">Edit</button>
            <button class="btn btn-info" onclick="event.stopPropagation(); exportSingleFuelMap('${mapId}')">Export</button>
            ${map.type === 'custom' ? 
              `<button class="btn btn-danger" onclick="event.stopPropagation(); deleteFuelMap('${mapId}')">Delete</button>` : 
              ''
            }
          </div>
        `;
        
        grid.appendChild(mapItem);
      }
    }
    
    function loadIgnitionMapSelection() {
      const grid = document.getElementById('ignitionMapSelectionGrid');
      grid.innerHTML = '';
      
      for (let mapId in ignitionMaps) {
        const map = ignitionMaps[mapId];
        const isActive = mapId === currentIgnitionMapId;
        
        const mapItem = document.createElement('div');
        mapItem.className = `map-item ${isActive ? 'active' : ''}`;
        mapItem.onclick = () => selectIgnitionMap(mapId);
        
        mapItem.innerHTML = `
          <h3>${map.name}</h3>
          <div class="map-meta">${map.description}</div>
          <div class="map-meta">Type: ${map.type} | ${map.editable ? 'Editable' : 'Read-only'}</div>
          <div class="map-actions">
            <button class="btn btn-primary" onclick="event.stopPropagation(); loadIgnitionMapForEditing('${mapId}')">Edit</button>
            <button class="btn btn-info" onclick="event.stopPropagation(); exportSingleIgnitionMap('${mapId}')">Export</button>
            ${map.type === 'custom' ? 
              `<button class="btn btn-danger" onclick="event.stopPropagation(); deleteIgnitionMap('${mapId}')">Delete</button>` : 
              ''
            }
          </div>
        `;
        
        grid.appendChild(mapItem);
      }
    }
    
    function selectFuelMap(mapId) {
      currentFuelMapId = mapId;
      document.getElementById('selectedFuelMap').textContent = fuelMaps[mapId].name;
      document.getElementById('fuelMapStatus').textContent = 'Loaded';
      loadFuelMapSelection();
    }
    
    function selectIgnitionMap(mapId) {
      currentIgnitionMapId = mapId;
      document.getElementById('selectedIgnitionMap').textContent = ignitionMaps[mapId].name;
      document.getElementById('ignitionMapStatus').textContent = 'Loaded';
      loadIgnitionMapSelection();
    }
    
    function loadFuelMapForEditing(mapId) {
      currentFuelMapId = mapId;
      document.getElementById('editingFuelMapName').textContent = fuelMaps[mapId].name;
      loadFuelMapFromECU();
    }
    
    function loadIgnitionMapForEditing(mapId) {
      currentIgnitionMapId = mapId;
      document.getElementById('editingIgnitionMapName').textContent = ignitionMaps[mapId].name;
      loadIgnitionMapFromECU();
    }
    
    function switchMapType(type) {
      currentMapType = type;
      
      // Update tab states
      document.querySelectorAll('.map-tab').forEach(tab => {
        tab.classList.remove('active');
      });
      event.target.classList.add('active');
      
      // Show/hide sections
      document.getElementById('fuelMapSelection').style.display = type === 'fuel' ? 'block' : 'none';
      document.getElementById('ignitionMapSelection').style.display = type === 'ignition' ? 'block' : 'none';
    }
    
    function switchEditor(type) {
      currentEditor = type;
      
      // Update tab states
      document.querySelectorAll('.map-tab').forEach(tab => {
        tab.classList.remove('active');
      });
      event.target.classList.add('active');
      
      // Show/hide sections
      document.getElementById('fuelMapEditor').style.display = type === 'fuel' ? 'block' : 'none';
      document.getElementById('ignitionMapEditor').style.display = type === 'ignition' ? 'block' : 'none';
    }
    
    function showUploadDialog() {
      document.getElementById('uploadDialog').style.display = 'flex';
    }
    
    function hideUploadDialog() {
      document.getElementById('uploadDialog').style.display = 'none';
    }
    
    function uploadMap() {
      const fileInput = document.getElementById('mapFile');
      const typeInput = document.getElementById('mapType');
      const nameInput = document.getElementById('newMapName');
      const descInput = document.getElementById('newMapDescription');
      
      if (!nameInput.value) {
        alert('Please enter a map name');
        return;
      }
      
      const mapType = typeInput.value;
      const newMapId = nameInput.value.toLowerCase().replace(/\s+/g, '_');
      
      if (mapType === 'fuel') {
        fuelMaps[newMapId] = {
          name: nameInput.value,
          description: descInput.value,
          type: 'custom',
          editable: true,
          data: fuelMapData
        };
        
        loadFuelMapSelection();
      } else {
        ignitionMaps[newMapId] = {
          name: nameInput.value,
          description: descInput.value,
          type: 'custom',
          editable: true,
          data: ignitionMapData
        };
        
        loadIgnitionMapSelection();
      }
      
      // Reset form
      fileInput.value = '';
      nameInput.value = '';
      descInput.value = '';
      
      hideUploadDialog();
      alert('Map uploaded successfully!');
    }
    
    function createNewMap() {
      const type = currentMapType;
      const name = prompt('Enter a name for the new ' + type + ' map:');
      if (!name) return;
      
      const newMapId = name.toLowerCase().replace(/\s+/g, '_');
      
      if (type === 'fuel') {
        fuelMaps[newMapId] = {
          name: name,
          description: 'Custom fuel map',
          type: 'custom',
          editable: true,
          data: fuelMapData
        };
        
        loadFuelMapSelection();
        selectFuelMap(newMapId);
      } else {
        ignitionMaps[newMapId] = {
          name: name,
          description: 'Custom ignition map',
          type: 'custom',
          editable: true,
          data: ignitionMapData
        };
        
        loadIgnitionMapSelection();
        selectIgnitionMap(newMapId);
      }
    }
    
    function deleteFuelMap(mapId) {
      if (confirm(`Are you sure you want to delete "${fuelMaps[mapId].name}"?`)) {
        delete fuelMaps[mapId