from flask import Flask, render_template_string, request, jsonify
import serial
import serial.tools.list_ports
import time

app = Flask(__name__)
ser = None

HTML_TEMPLATE = """
<!DOCTYPE html>
<html>
<head>
    <title>ESP32-P4 Waveform Gen Dual</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 20px auto; padding: 20px; background: #f4f4f9; }
        .card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; }
        .channel { border-left: 5px solid #007bff; padding-left: 15px; margin: 20px 0; }
        .channel.b { border-left-color: #28a745; }
        .group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input[type="number"], select { width: 100%; padding: 8px; box-sizing: border-box; }
        button { background: #007bff; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; margin-right: 5px; }
        button.off { background: #dc3545; }
        button.on { background: #28a745; }
        .status { padding: 10px; border-radius: 4px; font-size: 0.9em; margin-top: 10px; }
        .connected { background: #d4edda; color: #155724; }
        .disconnected { background: #f8d7da; color: #721c24; }
    </style>
</head>
<body>
    <div class="card">
        <h2>Connection</h2>
        <select id="port">
            {% for port in ports %}
            <option value="{{ port }}">{{ port }}</option>
            {% endfor %}
        </select>
        <button onclick="connect()" style="margin-top:10px; width:100%">Connect</button>
        <div id="status" class="status disconnected">Disconnected</div>
    </div>

    <div class="card channel">
        <h3>Channel A (Pin 33)</h3>
        <div class="group">
            <label>Frequency (Hz)</label>
            <input type="range" id="freq_a_slider" min="0" max="5000" value="10" oninput="document.getElementById('freq_a').value=this.value">
            <input type="number" id="freq_a" value="10" min="0" max="5000">
        </div>
        <button onclick="sendCmd('A ' + document.getElementById('freq_a').value)">Set Freq</button>
        <button class="on" onclick="sendCmd('A ON')">Enable</button>
        <button class="off" onclick="sendCmd('A OFF')">Disable</button>
    </div>

    <div class="card channel b">
        <h3>Channel B (Pin 32)</h3>
        <div class="group">
            <label>Frequency (Hz)</label>
            <input type="range" id="freq_b_slider" min="0" max="5000" value="5000" oninput="document.getElementById('freq_b').value=this.value">
            <input type="number" id="freq_b" value="5000" min="0" max="5000">
        </div>
        <button onclick="sendCmd('B ' + document.getElementById('freq_b').value)">Set Freq</button>
        <button class="on" onclick="sendCmd('B ON')">Enable</button>
        <button class="off" onclick="sendCmd('B OFF')">Disable</button>
    </div>

    <div class="card">
        <div id="response" style="font-family:monospace; font-size:0.8em;">Log waiting...</div>
    </div>

    <script>
        async function connect() {
            const port = document.getElementById('port').value;
            const res = await fetch('/connect', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({port})
            });
            const data = await res.json();
            const div = document.getElementById('status');
            div.innerText = data.message;
            div.className = 'status ' + (data.success ? 'connected' : 'disconnected');
        }

        async function sendCmd(cmd) {
            const res = await fetch('/cmd', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({cmd})
            });
            const data = await res.json();
            document.getElementById('response').innerText = "ESP: " + (data.response || "No response");
        }
    </script>
</body>
</html>
"""

@app.route('/')
def index():
    ports = [p.device for p in serial.tools.list_ports.comports()]
    return render_template_string(HTML_TEMPLATE, ports=ports)

@app.route('/connect', methods=['POST'])
def connect():
    global ser
    port = request.json.get('port')
    try:
        if ser: ser.close()
        ser = serial.Serial(port, 115200, timeout=0.1)
        return jsonify(success=True, message=f"Connected to {port}")
    except Exception as e:
        return jsonify(success=False, message=str(e))

@app.route('/cmd', methods=['POST'])
def cmd():
    global ser
    if not ser: return jsonify(success=False, response="Not connected")
    command = request.json.get('cmd')
    try:
        # Clear buffer
        ser.reset_input_buffer()
        ser.write((command + "\n").encode())
        # Wait a bit longer for the ESP to process and respond
        time.sleep(0.2)
        # Read the line response
        resp = ser.read_all().decode(errors='replace').strip()
        if not resp:
            # Try one more read in case it's slow
            time.sleep(0.3)
            resp = ser.read_all().decode(errors='replace').strip()
            
        return jsonify(success=True, response=resp or "Empty response")
    except Exception as e:
        return jsonify(success=False, response=str(e))

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)
