<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
require_once '../../config/database.php';

$device_id = $_GET['device_id'] ?? null;
$device = null;
$pins = [];

// Default WiFi settings
$wifi_ssid = "YOUR_WIFI_NAME";
$wifi_password = "YOUR_WIFI_PASSWORD";
$server_ip = $_SERVER['HTTP_HOST'];

// Load saved settings
try {
    $database = new Database();
    $db = $database->getConnection();
    
    // Auto-add WiFi columns if not exist
    try {
        $columns_query = $db->query("SHOW COLUMNS FROM iot_settings");
        $existing_columns = $columns_query->fetchAll(PDO::FETCH_COLUMN);
        
        if (!in_array('wifi_ssid', $existing_columns)) {
            $db->exec("ALTER TABLE iot_settings ADD COLUMN wifi_ssid VARCHAR(100) DEFAULT 'YOUR_WIFI_NAME'");
        }
        if (!in_array('wifi_password', $existing_columns)) {
            $db->exec("ALTER TABLE iot_settings ADD COLUMN wifi_password VARCHAR(100) DEFAULT 'YOUR_WIFI_PASSWORD'");
        }
        if (!in_array('server_ip', $existing_columns)) {
            $db->exec("ALTER TABLE iot_settings ADD COLUMN server_ip VARCHAR(50) DEFAULT 'localhost'");
        }
    } catch (Exception $e) {
        // Columns might already exist
    }
    
    // Handle save settings FIRST
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['save_settings'])) {
        $wifi_ssid = $_POST['wifi_ssid'] ?? '';
        $wifi_password = $_POST['wifi_password'] ?? '';
        $server_ip = $_POST['server_ip'] ?? '';
        
        // Check if settings exist
        $check_query = "SELECT id FROM iot_settings LIMIT 1";
        $check_stmt = $db->query($check_query);
        $exists = $check_stmt->fetch(PDO::FETCH_ASSOC);
        
        if ($exists) {
            // Update existing settings
            $update_query = "UPDATE iot_settings SET 
                            wifi_ssid = ?, 
                            wifi_password = ?, 
                            server_ip = ?,
                            updated_at = NOW() 
                            WHERE id = ?";
            $update_stmt = $db->prepare($update_query);
            $update_stmt->execute([$wifi_ssid, $wifi_password, $server_ip, $exists['id']]);
        } else {
            // Insert new settings
            $insert_query = "INSERT INTO iot_settings (wifi_ssid, wifi_password, server_ip) VALUES (?, ?, ?)";
            $insert_stmt = $db->prepare($insert_query);
            $insert_stmt->execute([$wifi_ssid, $wifi_password, $server_ip]);
        }
        
        $success_message = "✅ تم حفظ الإعدادات بنجاح!";
    } else {
        // Get saved WiFi settings
        $settings_query = "SELECT wifi_ssid, wifi_password, server_ip FROM iot_settings LIMIT 1";
        $settings_stmt = $db->query($settings_query);
        $saved_settings = $settings_stmt->fetch(PDO::FETCH_ASSOC);
        
        if ($saved_settings) {
            $wifi_ssid = $saved_settings['wifi_ssid'] ?? $wifi_ssid;
            $wifi_password = $saved_settings['wifi_password'] ?? $wifi_password;
            $server_ip = $saved_settings['server_ip'] ?? $server_ip;
        }
    }
    
    // Get device info
    if ($device_id) {
        $device_query = "SELECT * FROM iot_devices WHERE device_id = ?";
        $device_stmt = $db->prepare($device_query);
        $device_stmt->execute([$device_id]);
        $device = $device_stmt->fetch(PDO::FETCH_ASSOC);
        
        if ($device) {
            $pins_query = "SELECT * FROM device_pins WHERE device_id = ? ORDER BY pin_gpio";
            $pins_stmt = $db->prepare($pins_query);
            $pins_stmt->execute([$device_id]);
            $pins = $pins_stmt->fetchAll(PDO::FETCH_ASSOC);
        }
    }
} catch (Exception $e) {
    $error = $e->getMessage();
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مولد كود Arduino</title>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        * { font-family: 'Tajawal', sans-serif; }
        body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; }
        .card { background: white; border-radius: 20px; padding: 30px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); margin-bottom: 20px; }
        .btn { padding: 12px 24px; border-radius: 10px; font-weight: 600; transition: all 0.3s; cursor: pointer; border: none; }
        .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: white; }
        .btn-success { background: linear-gradient(135deg, #10b981, #059669); color: white; }
        .btn:hover { transform: scale(1.05); }
        .code-box { background: #1e1e1e; color: #d4d4d4; padding: 20px; border-radius: 15px; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.6; overflow-x: auto; position: relative; max-height: 600px; overflow-y: auto; }
        .copy-btn { position: absolute; top: 15px; left: 15px; background: #10b981; color: white; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; z-index: 10; }
        .copy-btn:hover { background: #059669; }
        .input-field { width: 100%; padding: 12px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 16px; }
        .input-field:focus { outline: none; border-color: #667eea; }
        .step { background: #f3f4f6; border-radius: 15px; padding: 20px; margin: 15px 0; border-right: 5px solid #667eea; }
        .step-number { display: inline-block; width: 35px; height: 35px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border-radius: 50%; text-align: center; line-height: 35px; font-weight: bold; margin-left: 10px; }
        .keyword { color: #569cd6; }
        .string { color: #ce9178; }
        .comment { color: #6a9955; }
        .number { color: #b5cea8; }
    </style>
</head>
<body>
    <div class="max-w-6xl mx-auto">
        <div class="card">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 mb-2">
                        <i class="fas fa-code text-purple-600 ml-2"></i>
                        مولد كود Arduino
                    </h1>
                    <p class="text-gray-600">احصل على الكود الجاهز لجهاز ESP الخاص بك</p>
                </div>
                <a href="index.php" class="btn bg-gray-200 text-gray-800">
                    <i class="fas fa-arrow-right ml-2"></i>
                    رجوع
                </a>
            </div>

            <div class="bg-blue-50 border-r-4 border-blue-500 p-4 rounded-lg">
                <label class="block text-sm font-bold text-gray-900 mb-2">
                    <i class="fas fa-microchip ml-2"></i>
                    اختر الجهاز
                </label>
                <select class="input-field" onchange="window.location.href='?device_id='+this.value">
                    <option value="">-- اختر جهاز --</option>
                    <?php
                    try {
                        $database = new Database();
                        $db = $database->getConnection();
                        $devices_query = "SELECT device_id, device_name FROM iot_devices ORDER BY device_id";
                        $devices_stmt = $db->query($devices_query);
                        while ($dev = $devices_stmt->fetch(PDO::FETCH_ASSOC)) {
                            $selected = ($device_id === $dev['device_id']) ? 'selected' : '';
                            echo "<option value='{$dev['device_id']}' {$selected}>{$dev['device_name']} ({$dev['device_id']})</option>";
                        }
                    } catch (Exception $e) {}
                    ?>
                </select>
            </div>
        </div>

        <?php if ($device && !empty($pins)): ?>

        <!-- Success/Error Messages -->
        <?php if (isset($success_message)): ?>
        <div class="card bg-green-50 border-r-4 border-green-500">
            <p class="text-green-900 font-bold">
                <i class="fas fa-check-circle ml-2"></i>
                <?php echo $success_message; ?>
            </p>
        </div>
        <?php endif; ?>
        
        <?php if (isset($error_message)): ?>
        <div class="card bg-red-50 border-r-4 border-red-500">
            <p class="text-red-900 font-bold">
                <i class="fas fa-exclamation-circle ml-2"></i>
                <?php echo $error_message; ?>
            </p>
        </div>
        <?php endif; ?>

        <!-- WiFi Settings -->
        <div class="card">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-gray-900">
                    <i class="fas fa-wifi ml-2"></i>
                    إعدادات WiFi والسيرفر
                </h2>
                <span class="text-sm text-gray-600">
                    <i class="fas fa-save ml-1"></i>
                    سيتم حفظ الإعدادات تلقائياً
                </span>
            </div>
            
            <form method="POST" id="settingsForm">
                <input type="hidden" name="save_settings" value="1">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            <i class="fas fa-wifi ml-1"></i>
                            اسم شبكة WiFi
                        </label>
                        <input type="text" name="wifi_ssid" id="wifiSSID" class="input-field" 
                               value="<?php echo htmlspecialchars($wifi_ssid); ?>" 
                               placeholder="اسم الشبكة">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            <i class="fas fa-key ml-1"></i>
                            كلمة مرور WiFi
                        </label>
                        <input type="text" name="wifi_password" id="wifiPassword" class="input-field" 
                               value="<?php echo htmlspecialchars($wifi_password); ?>" 
                               placeholder="كلمة المرور">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            <i class="fas fa-server ml-1"></i>
                            عنوان السيرفر
                        </label>
                        <input type="text" name="server_ip" id="serverIP" class="input-field" 
                               value="<?php echo htmlspecialchars($server_ip); ?>" 
                               placeholder="192.168.1.100">
                    </div>
                </div>
                
                <div class="flex gap-3 mt-4">
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save ml-2"></i>
                        حفظ الإعدادات
                    </button>
                    <button type="button" onclick="updateCode()" class="btn btn-primary">
                        <i class="fas fa-sync ml-2"></i>
                        تحديث الكود
                    </button>
                </div>
            </form>
            
            <div class="bg-blue-50 border-r-4 border-blue-500 p-4 rounded-lg mt-4">
                <p class="text-blue-900 text-sm">
                    <i class="fas fa-info-circle ml-2"></i>
                    <strong>ملاحظة:</strong> سيتم استخدام هذه الإعدادات لجميع أجهزة ESP الجديدة. يمكنك تعديلها في أي وقت.
                </p>
            </div>
        </div>

        <!-- IP Instructions -->
        <div class="card">
            <h2 class="text-2xl font-bold text-gray-900 mb-4">
                <i class="fas fa-question-circle ml-2"></i>
                كيف تحصل على عنوان IP؟
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Local Usage -->
                <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-lg border-2 border-blue-200">
                    <h3 class="text-xl font-bold text-blue-900 mb-3">
                        <i class="fas fa-home ml-2"></i>
                        للاستخدام المحلي
                    </h3>
                    
                    <div class="space-y-3">
                        <div class="bg-white p-3 rounded-lg">
                            <p class="font-bold text-gray-900 mb-2">
                                <i class="fab fa-windows ml-1"></i>
                                على Windows:
                            </p>
                            <ol class="text-sm text-gray-700 mr-4 space-y-1">
                                <li>1. اضغط <kbd class="bg-gray-200 px-2 py-1 rounded">Win + R</kbd></li>
                                <li>2. اكتب <code class="bg-gray-200 px-2 py-1 rounded">cmd</code></li>
                                <li>3. اكتب <code class="bg-gray-200 px-2 py-1 rounded">ipconfig</code></li>
                                <li>4. انسخ <strong>IPv4 Address</strong></li>
                                <li>5. مثال: <code class="bg-green-100 px-2 py-1 rounded">192.168.1.5</code></li>
                            </ol>
                        </div>
                        
                        <div class="bg-yellow-50 border-r-4 border-yellow-500 p-3 rounded">
                            <p class="text-yellow-900 text-sm">
                                <i class="fas fa-exclamation-triangle ml-1"></i>
                                <strong>مهم:</strong> ESP والكمبيوتر لازم يكونوا على نفس الشبكة!
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Hosting Usage -->
                <div class="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-lg border-2 border-purple-200">
                    <h3 class="text-xl font-bold text-purple-900 mb-3">
                        <i class="fas fa-cloud ml-2"></i>
                        للرفع على استضافة
                    </h3>
                    
                    <div class="space-y-3">
                        <div class="bg-white p-3 rounded-lg">
                            <p class="font-bold text-gray-900 mb-2">الخطوات:</p>
                            <ol class="text-sm text-gray-700 mr-4 space-y-1">
                                <li>1. ارفع مجلد <code class="bg-gray-200 px-2 py-1 rounded">backend</code> كامل</li>
                                <li>2. أنشئ قاعدة بيانات جديدة</li>
                                <li>3. عدّل <code class="bg-gray-200 px-2 py-1 rounded">config/database.php</code></li>
                                <li>4. استورد <code class="bg-gray-200 px-2 py-1 rounded">database.sql</code></li>
                                <li>5. شغّل <code class="bg-gray-200 px-2 py-1 rounded">fix_iot_system.php</code></li>
                                <li>6. ضع الدومين: <code class="bg-green-100 px-2 py-1 rounded">yourdomain.com</code></li>
                            </ol>
                        </div>
                        
                        <div class="bg-green-50 border-r-4 border-green-500 p-3 rounded">
                            <p class="text-green-900 text-sm">
                                <i class="fas fa-check-circle ml-1"></i>
                                <strong>نصيحة:</strong> استخدم SSL (HTTPS) للأمان
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Examples -->
            <div class="mt-6 bg-gray-50 p-6 rounded-lg border-2 border-gray-200">
                <h3 class="text-lg font-bold text-gray-900 mb-4">
                    <i class="fas fa-lightbulb ml-2"></i>
                    أمثلة سريعة
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="bg-white p-4 rounded-lg border border-gray-200">
                        <p class="text-sm font-bold text-gray-700 mb-2">محلي (Local)</p>
                        <code class="text-xs bg-blue-100 px-2 py-1 rounded block">192.168.1.5</code>
                        <p class="text-xs text-gray-600 mt-2">IP الكمبيوتر على الشبكة</p>
                    </div>
                    
                    <div class="bg-white p-4 rounded-lg border border-gray-200">
                        <p class="text-sm font-bold text-gray-700 mb-2">استضافة (Hosting)</p>
                        <code class="text-xs bg-purple-100 px-2 py-1 rounded block">yourdomain.com</code>
                        <p class="text-xs text-gray-600 mt-2">دومين الموقع</p>
                    </div>
                    
                    <div class="bg-white p-4 rounded-lg border border-gray-200">
                        <p class="text-sm font-bold text-gray-700 mb-2">Localhost</p>
                        <code class="text-xs bg-green-100 px-2 py-1 rounded block">localhost</code>
                        <p class="text-xs text-gray-600 mt-2">للتجربة على نفس الجهاز</p>
                    </div>
                </div>
            </div>

            <!-- Troubleshooting -->
            <div class="mt-6 bg-red-50 border-r-4 border-red-500 p-4 rounded-lg">
                <h3 class="text-lg font-bold text-red-900 mb-3">
                    <i class="fas fa-tools ml-2"></i>
                    حل المشاكل الشائعة
                </h3>
                <div class="space-y-2 text-sm text-red-900">
                    <p><strong>❌ ESP لا يتصل:</strong> تأكد من نفس الشبكة وIP صحيح</p>
                    <p><strong>❌ IP يتغير:</strong> استخدم IP ثابت من إعدادات الراوتر</p>
                    <p><strong>❌ Firewall يمنع:</strong> أضف استثناء للمنفذ 80</p>
                    <p><strong>❌ شبكة 5GHz:</strong> ESP8266 يدعم 2.4GHz فقط</p>
                </div>
            </div>
        </div>

        <!-- Instructions -->
        <div class="card">
            <h2 class="text-2xl font-bold text-gray-900 mb-4">
                <i class="fas fa-list-ol ml-2"></i>
                خطوات التثبيت
            </h2>
            <div class="step">
                <span class="step-number">1</span>
                <strong>عدّل إعدادات WiFi أعلاه</strong>
                <p class="text-gray-600 mt-2 mr-12">أدخل اسم شبكة WiFi وكلمة المرور وعنوان السيرفر</p>
            </div>
            <div class="step">
                <span class="step-number">2</span>
                <strong>انسخ الكود</strong>
                <p class="text-gray-600 mt-2 mr-12">اضغط على زر "نسخ الكود" بالأسفل</p>
            </div>
            <div class="step">
                <span class="step-number">3</span>
                <strong>افتح Arduino IDE</strong>
                <p class="text-gray-600 mt-2 mr-12">الصق الكود في Arduino IDE</p>
            </div>
            <div class="step">
                <span class="step-number">4</span>
                <strong>ارفع الكود</strong>
                <p class="text-gray-600 mt-2 mr-12">اختر اللوحة NodeMCU واضغط Upload</p>
            </div>
        </div>

        <!-- Device Info -->
        <div class="card">
            <h2 class="text-2xl font-bold text-gray-900 mb-4">
                <i class="fas fa-info-circle ml-2"></i>
                معلومات الجهاز
            </h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-blue-50 p-4 rounded-lg">
                    <p class="text-sm text-gray-600 mb-1">معرف الجهاز</p>
                    <p class="text-lg font-bold text-gray-900"><?php echo htmlspecialchars($device['device_id']); ?></p>
                </div>
                <div class="bg-green-50 p-4 rounded-lg">
                    <p class="text-sm text-gray-600 mb-1">عنوان IP</p>
                    <p class="text-lg font-bold text-gray-900"><?php echo htmlspecialchars($device['ip_address']); ?></p>
                </div>
                <div class="bg-purple-50 p-4 rounded-lg">
                    <p class="text-sm text-gray-600 mb-1">المنفذ</p>
                    <p class="text-lg font-bold text-gray-900"><?php echo $device['port'] ?? 80; ?></p>
                </div>
                <div class="bg-orange-50 p-4 rounded-lg">
                    <p class="text-sm text-gray-600 mb-1">عدد البينات</p>
                    <p class="text-lg font-bold text-gray-900"><?php echo count($pins); ?></p>
                </div>
            </div>
        </div>

        <!-- Pins -->
        <div class="card">
            <h2 class="text-2xl font-bold text-gray-900 mb-4">
                <i class="fas fa-plug ml-2"></i>
                البينات المُكوّنة
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <?php foreach ($pins as $pin): ?>
                <div class="bg-gray-50 p-4 rounded-lg border-2 border-gray-200">
                    <div class="flex items-center gap-3">
                        <i class="fas <?php echo $pin['pin_icon']; ?> text-3xl text-purple-600"></i>
                        <div>
                            <p class="font-bold text-gray-900"><?php echo htmlspecialchars($pin['pin_name']); ?></p>
                            <p class="text-sm text-gray-600">GPIO<?php echo $pin['pin_gpio']; ?> - <?php echo ucfirst($pin['pin_type']); ?></p>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>

        <!-- Arduino Code -->
        <div class="card">
            <h2 class="text-2xl font-bold text-gray-900 mb-4">
                <i class="fas fa-file-code ml-2"></i>
                كود Arduino الجاهز
            </h2>
            <div class="code-box" id="codeContainer">
                <button class="copy-btn" onclick="copyCode()">
                    <i class="fas fa-copy ml-1"></i>
                    نسخ
                </button>
                <pre id="arduinoCode"></pre>
            </div>
            <div class="flex gap-3 mt-4">
                <button onclick="copyCode()" class="btn btn-success">
                    <i class="fas fa-copy ml-2"></i>
                    نسخ الكود
                </button>
                <button onclick="downloadCode()" class="btn btn-primary">
                    <i class="fas fa-download ml-2"></i>
                    تحميل ملف .ino
                </button>
                <a href="https://www.arduino.cc/en/software" target="_blank" class="btn bg-teal-600 text-white">
                    <i class="fas fa-download ml-2"></i>
                    تحميل Arduino IDE
                </a>
            </div>
        </div>

        <!-- Quick Links -->
        <div class="card">
            <h2 class="text-2xl font-bold text-gray-900 mb-4">
                <i class="fas fa-link ml-2"></i>
                روابط مفيدة
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <a href="https://www.arduino.cc/en/software" target="_blank" 
                   class="bg-gradient-to-br from-teal-50 to-teal-100 p-6 rounded-lg border-2 border-teal-200 hover:shadow-lg transition-all">
                    <i class="fas fa-download text-4xl text-teal-600 mb-3"></i>
                    <h3 class="text-lg font-bold text-gray-900 mb-2">تحميل Arduino IDE</h3>
                    <p class="text-sm text-gray-600">احصل على آخر إصدار من Arduino IDE</p>
                </a>
                
                <a href="https://arduino-esp8266.readthedocs.io/" target="_blank"
                   class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-lg border-2 border-blue-200 hover:shadow-lg transition-all">
                    <i class="fas fa-book text-4xl text-blue-600 mb-3"></i>
                    <h3 class="text-lg font-bold text-gray-900 mb-2">توثيق ESP8266</h3>
                    <p class="text-sm text-gray-600">دليل كامل لبرمجة ESP8266</p>
                </a>
                
                <a href="monitor.php?device_id=<?php echo $device_id; ?>" 
                   class="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-lg border-2 border-purple-200 hover:shadow-lg transition-all">
                    <i class="fas fa-terminal text-4xl text-purple-600 mb-3"></i>
                    <h3 class="text-lg font-bold text-gray-900 mb-2">مراقب ESP</h3>
                    <p class="text-sm text-gray-600">شاهد مخرجات ESP مباشرة</p>
                </a>
            </div>
        </div>

        <!-- Arduino IDE Setup -->
        <div class="card">
            <h2 class="text-2xl font-bold text-gray-900 mb-4">
                <i class="fas fa-cogs ml-2"></i>
                إعداد Arduino IDE (خطوة واحدة)
            </h2>
            
            <div class="bg-gradient-to-r from-blue-50 to-purple-50 p-6 rounded-lg border-2 border-blue-200">
                <h3 class="text-lg font-bold text-gray-900 mb-4">
                    <i class="fas fa-rocket ml-2"></i>
                    بدء سكتش جديد
                </h3>
                
                <div class="space-y-4">
                    <div class="flex items-start gap-4">
                        <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold flex-shrink-0">1</div>
                        <div>
                            <p class="font-bold text-gray-900">افتح Arduino IDE</p>
                            <p class="text-sm text-gray-600">File → New Sketch (أو Ctrl+N)</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-4">
                        <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold flex-shrink-0">2</div>
                        <div>
                            <p class="font-bold text-gray-900">الصق الكود</p>
                            <p class="text-sm text-gray-600">احذف الكود الافتراضي والصق كود ESP</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-4">
                        <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold flex-shrink-0">3</div>
                        <div>
                            <p class="font-bold text-gray-900">اختر اللوحة</p>
                            <p class="text-sm text-gray-600">Tools → Board → NodeMCU 1.0 (ESP-12E Module)</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-4">
                        <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold flex-shrink-0">4</div>
                        <div>
                            <p class="font-bold text-gray-900">اختر المنفذ</p>
                            <p class="text-sm text-gray-600">Tools → Port → COM3 (أو المنفذ المتاح)</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-4">
                        <div class="bg-green-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold flex-shrink-0">5</div>
                        <div>
                            <p class="font-bold text-gray-900">ارفع الكود</p>
                            <p class="text-sm text-gray-600">اضغط زر Upload (→) أو Ctrl+U</p>
                        </div>
                    </div>
                </div>
                
                <div class="mt-6 bg-yellow-50 border-r-4 border-yellow-500 p-4 rounded">
                    <p class="text-yellow-900 text-sm">
                        <i class="fas fa-lightbulb ml-2"></i>
                        <strong>نصيحة:</strong> لو ما لقيتش NodeMCU في القائمة، لازم تثبت ESP8266 Board أول:
                        <br>File → Preferences → Additional Board Manager URLs → أضف:
                        <br><code class="bg-yellow-100 px-2 py-1 rounded text-xs">http://arduino.esp8266.com/stable/package_esp8266com_index.json</code>
                    </p>
                </div>
            </div>
        </div>

        <?php elseif ($device_id): ?>
        <div class="card">
            <div class="text-center py-16">
                <i class="fas fa-plug text-gray-300 text-6xl mb-4"></i>
                <p class="text-gray-500 text-lg mb-4">لا توجد بينات مُكوّنة لهذا الجهاز</p>
                <a href="pins.php?device_id=<?php echo $device_id; ?>" class="btn btn-primary">
                    <i class="fas fa-plus ml-2"></i>
                    إضافة بينات
                </a>
            </div>
        </div>
        <?php else: ?>
        <div class="card">
            <div class="text-center py-16">
                <i class="fas fa-microchip text-gray-300 text-6xl mb-4"></i>
                <p class="text-gray-500 text-lg mb-4">اختر جهاز من القائمة أعلاه</p>
            </div>
        </div>
        <?php endif; ?>
    </div>

    <script>
    const deviceId = '<?php echo $device_id ?? ""; ?>';
    const pins = <?php echo json_encode($pins); ?>;

    function generateCode() {
        const ssid = document.getElementById('wifiSSID').value;
        const password = document.getElementById('wifiPassword').value;
        const serverIP = document.getElementById('serverIP').value;
        const serverUrl = `http://${serverIP}/KL/backend/api/esp_control.php`;

        let code = `/*
 * كود ESP8266 - <?php echo htmlspecialchars($device['device_name'] ?? ''); ?>
 * Device ID: ${deviceId}
 * تم التوليد تلقائياً من نظام IoT
 */

#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <WiFiClient.h>

// إعدادات WiFi
const char* ssid = "${ssid}";
const char* password = "${password}";

// إعدادات السيرفر
const char* serverUrl = "${serverUrl}";
const char* deviceId = "${deviceId}";

// تعريف البينات
`;

        pins.forEach((pin, index) => {
            const pinName = `PIN_${index + 1}`;  // Use PIN_1, PIN_2, etc.
            code += `#define ${pinName} ${pin.pin_gpio}  // ${pin.pin_name}\n`;
        });

        code += `
WiFiClient wifiClient;

void setup() {
  Serial.begin(115200);
  delay(1000);
  
  Serial.println("\\n\\n=================================");
  Serial.println("   ESP8266 IoT Control System");
  Serial.println("=================================\\n");

  // تهيئة البينات
  Serial.println("تهيئة البينات...");
`;

        pins.forEach((pin, index) => {
            const pinName = `PIN_${index + 1}`;
            code += `  pinMode(${pinName}, OUTPUT);\n`;
            code += `  digitalWrite(${pinName}, LOW);\n`;
            code += `  Serial.println("  ✓ ${pin.pin_name} (GPIO${pin.pin_gpio})");\n`;
        });

        code += `
  // الاتصال بـ WiFi
  Serial.println("\\nالاتصال بـ WiFi...");
  Serial.print("SSID: ");
  Serial.println(ssid);
  
  WiFi.begin(ssid, password);
  
  int attempts = 0;
  while (WiFi.status() != WL_CONNECTED && attempts < 30) {
    delay(500);
    Serial.print(".");
    attempts++;
  }
  
  if (WiFi.status() == WL_CONNECTED) {
    Serial.println("\\n\\n✓ WiFi متصل بنجاح!");
    Serial.print("عنوان IP: ");
    Serial.println(WiFi.localIP());
    Serial.print("قوة الإشارة: ");
    Serial.print(WiFi.RSSI());
    Serial.println(" dBm");
  } else {
    Serial.println("\\n\\n✗ فشل الاتصال بـ WiFi!");
    Serial.println("تحقق من اسم الشبكة وكلمة المرور");
  }
  
  Serial.println("\\n=================================");
  Serial.println("النظام جاهز للعمل!");
  Serial.println("=================================\\n");
}

void loop() {
  if (WiFi.status() == WL_CONNECTED) {
    HTTPClient http;
    
    // طلب الأوامر من السيرفر (GET)
    String url = String(serverUrl) + "?device_id=" + deviceId;
    
    Serial.println("\\n[DEBUG] جاري الاتصال بالسيرفر...");
    Serial.print("[DEBUG] URL: ");
    Serial.println(url);
    
    http.begin(wifiClient, url);
    http.setTimeout(5000);
    
    int httpCode = http.GET();
    
    Serial.print("[DEBUG] HTTP Code: ");
    Serial.println(httpCode);
    
    if (httpCode == 200) {
      String response = http.getString();
      
      Serial.print("[DEBUG] Response: ");
      Serial.println(response);
      
      // معالجة الأوامر
      if (response.indexOf("\\"action\\":\\"pin_control\\"") > 0 || response.indexOf("\\"gpio\\":") > 0) {
        Serial.println("[DEBUG] تم العثور على أمر!");
        
        // استخراج GPIO و State من JSON
        int gpioStart = response.indexOf("\\"gpio\\":") + 7;
        int gpioEnd = response.indexOf(",", gpioStart);
        if (gpioEnd == -1) gpioEnd = response.indexOf("}", gpioStart);
        int gpio = response.substring(gpioStart, gpioEnd).toInt();
        
        int stateStart = response.indexOf("\\"state\\":") + 8;
        int stateEnd = response.indexOf(",", stateStart);
        if (stateEnd == -1) stateEnd = response.indexOf("}", stateStart);
        int state = response.substring(stateStart, stateEnd).toInt();
        
        // استخراج command_id
        int cmdIdStart = response.indexOf("\\"command_id\\":") + 13;
        int cmdIdEnd = response.indexOf(",", cmdIdStart);
        if (cmdIdEnd == -1) cmdIdEnd = response.indexOf("}", cmdIdStart);
        String commandId = response.substring(cmdIdStart, cmdIdEnd);
        
        Serial.print("[DEBUG] GPIO: ");
        Serial.print(gpio);
        Serial.print(", State: ");
        Serial.print(state);
        Serial.print(", Command ID: ");
        Serial.println(commandId);
        
        // تنفيذ الأمر
        digitalWrite(gpio, state);
        
        Serial.print("⚡ GPIO");
        Serial.print(gpio);
        Serial.print(" → ");
        Serial.println(state ? "تشغيل ✓" : "إيقاف ✗");
        
        // إرسال تأكيد التنفيذ (POST)
        HTTPClient httpPost;
        httpPost.begin(wifiClient, serverUrl);
        httpPost.addHeader("Content-Type", "application/x-www-form-urlencoded");
        
        String postData = "device_id=" + String(deviceId) + 
                         "&command_id=" + commandId + 
                         "&status=executed";
        
        Serial.println("[DEBUG] جاري إرسال التأكيد...");
        int postCode = httpPost.POST(postData);
        Serial.print("[DEBUG] POST Code: ");
        Serial.println(postCode);
        
        if (postCode == 200) {
          Serial.println("✓ تم إرسال التأكيد");
        } else {
          Serial.println("✗ فشل إرسال التأكيد");
        }
        httpPost.end();
      } else {
        Serial.println("[DEBUG] لا توجد أوامر معلقة");
      }
    } else if (httpCode > 0) {
      Serial.print("❌ خطأ HTTP: ");
      Serial.println(httpCode);
    } else {
      Serial.print("❌ فشل الاتصال! Error: ");
      Serial.println(http.errorToString(httpCode));
    }
    
    http.end();
  } else {
    Serial.println("⚠ WiFi غير متصل - إعادة المحاولة...");
    WiFi.reconnect();
  }
  
  delay(2000); // تحقق كل ثانيتين
}
`;

        return code;
    }

    function updateCode() {
        const code = generateCode();
        document.getElementById('arduinoCode').textContent = code;
    }

    function copyCode() {
        const code = document.getElementById('arduinoCode').textContent;
        navigator.clipboard.writeText(code).then(() => {
            alert('✅ تم نسخ الكود بنجاح!');
        }).catch(err => {
            alert('❌ فشل النسخ: ' + err);
        });
    }

    function downloadCode() {
        const code = document.getElementById('arduinoCode').textContent;
        const blob = new Blob([code], { type: 'text/plain' });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = deviceId + '_IoT_Control.ino';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
        alert('✅ تم تحميل الملف بنجاح!');
    }

    // Generate code on page load
    <?php if ($device && !empty($pins)): ?>
    window.addEventListener('DOMContentLoaded', function() {
        updateCode();
    });
    <?php endif; ?>
    
    // Auto-update code when inputs change
    document.addEventListener('DOMContentLoaded', function() {
        const inputs = ['wifiSSID', 'wifiPassword', 'serverIP'];
        inputs.forEach(id => {
            const element = document.getElementById(id);
            if (element) {
                element.addEventListener('input', function() {
                    if (document.getElementById('arduinoCode').textContent) {
                        updateCode();
                    }
                });
            }
        });
    });
    </script>
</body>
</html>
