<?php
/**
 * Quick Access - وصول سريع لجميع أدوات IoT
 */
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>الوصول السريع - IoT</title>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700;800&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); }
        .tool-card { background: linear-gradient(135deg, #f3f4f6 0%, #ffffff 100%); border-radius: 15px; padding: 30px; border: 2px solid #e5e7eb; transition: all 0.3s; text-align: center; cursor: pointer; }
        .tool-card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0,0,0,0.2); border-color: #667eea; }
        .tool-icon { font-size: 4rem; margin-bottom: 20px; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    </style>
</head>
<body>
    <div class="max-w-7xl mx-auto">
        <div class="card mb-6">
            <h1 class="text-4xl font-bold text-gray-900 mb-2 text-center">
                <i class="fas fa-bolt text-yellow-500 ml-3"></i>
                الوصول السريع - نظام IoT
            </h1>
            <p class="text-gray-600 text-center">اختر الأداة التي تريد استخدامها</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Dashboard -->
            <a href="index.php" class="tool-card">
                <div class="tool-icon">
                    <i class="fas fa-home"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">لوحة التحكم</h3>
                <p class="text-gray-600 text-sm">نظرة عامة على النظام</p>
            </a>

            <!-- Devices -->
            <a href="devices.php" class="tool-card">
                <div class="tool-icon">
                    <i class="fas fa-microchip"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">إدارة الأجهزة</h3>
                <p class="text-gray-600 text-sm">إضافة وتعديل الأجهزة</p>
            </a>

            <!-- Pins -->
            <a href="pins.php" class="tool-card">
                <div class="tool-icon">
                    <i class="fas fa-sliders-h"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">إدارة البينات</h3>
                <p class="text-gray-600 text-sm">تكوين البينات</p>
            </a>

            <!-- Control -->
            <a href="control.php" class="tool-card">
                <div class="tool-icon">
                    <i class="fas fa-gamepad"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">التحكم المباشر</h3>
                <p class="text-gray-600 text-sm">تشغيل/إيقاف البينات</p>
            </a>

            <!-- Settings -->
            <a href="settings.php" class="tool-card">
                <div class="tool-icon">
                    <i class="fas fa-cog"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">الإعدادات</h3>
                <p class="text-gray-600 text-sm">تخصيص النظام</p>
            </a>

            <!-- Logs -->
            <a href="../../api/iot/logs.php" class="tool-card">
                <div class="tool-icon">
                    <i class="fas fa-history"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">السجلات</h3>
                <p class="text-gray-600 text-sm">عرض سجل الأحداث</p>
            </a>

            <!-- Documentation -->
            <a href="IOT-SYSTEM-GUIDE.md" target="_blank" class="tool-card">
                <div class="tool-icon">
                    <i class="fas fa-book"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">الدليل الشامل</h3>
                <p class="text-gray-600 text-sm">توثيق كامل للنظام</p>
            </a>

            <!-- Back to Admin -->
            <a href="../index.php" class="tool-card">
                <div class="tool-icon">
                    <i class="fas fa-arrow-right"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">لوحة التحكم الرئيسية</h3>
                <p class="text-gray-600 text-sm">العودة للإدارة</p>
            </a>
        </div>

        <!-- Quick Stats -->
        <div class="card mt-6">
            <h2 class="text-2xl font-bold text-gray-900 mb-4 text-center">
                <i class="fas fa-chart-line ml-2"></i>
                إحصائيات سريعة
            </h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="quickStats">
                <div class="text-center p-4 bg-blue-50 rounded-lg">
                    <i class="fas fa-microchip text-3xl text-blue-600 mb-2"></i>
                    <p class="text-2xl font-bold text-gray-900" id="devicesCount">-</p>
                    <p class="text-sm text-gray-600">أجهزة</p>
                </div>
                <div class="text-center p-4 bg-green-50 rounded-lg">
                    <i class="fas fa-plug text-3xl text-green-600 mb-2"></i>
                    <p class="text-2xl font-bold text-gray-900" id="pinsCount">-</p>
                    <p class="text-sm text-gray-600">بينات</p>
                </div>
                <div class="text-center p-4 bg-purple-50 rounded-lg">
                    <i class="fas fa-check-circle text-3xl text-purple-600 mb-2"></i>
                    <p class="text-2xl font-bold text-gray-900" id="onlineCount">-</p>
                    <p class="text-sm text-gray-600">متصل</p>
                </div>
                <div class="text-center p-4 bg-orange-50 rounded-lg">
                    <i class="fas fa-power-off text-3xl text-orange-600 mb-2"></i>
                    <p class="text-2xl font-bold text-gray-900" id="activeCount">-</p>
                    <p class="text-sm text-gray-600">نشط</p>
                </div>
            </div>
        </div>
    </div>

    <script>
    // Load quick stats
    async function loadStats() {
        try {
            // Get devices count
            const devicesRes = await fetch('../../api/iot/devices.php');
            const devicesData = await devicesRes.json();
            const devices = devicesData.devices || [];
            
            document.getElementById('devicesCount').textContent = devices.length;
            document.getElementById('onlineCount').textContent = 
                devices.filter(d => d.status === 'online').length;
            
            // Get pins count
            let totalPins = 0;
            for (const device of devices) {
                const pinsRes = await fetch(`../../api/iot/pin_control.php?device_id=${device.device_id}`);
                const pinsData = await pinsRes.json();
                totalPins += (pinsData.pins || []).length;
            }
            
            document.getElementById('pinsCount').textContent = totalPins;
            document.getElementById('activeCount').textContent = '0'; // TODO: Get active pins count
            
        } catch (error) {
            console.error('Failed to load stats:', error);
        }
    }

    loadStats();
    </script>
</body>
</html>
