<?php
session_start();
require_once '../../config/database.php';

$database = new Database();
$conn = $database->getConnection();

$project_id = isset($_GET['id']) ? intval($_GET['id']) : 0;

if ($project_id <= 0) {
    header('Location: index.php');
    exit;
}

// جلب معلومات المشروع
$query = "SELECT * FROM iot_projects WHERE id = :id";
$stmt = $conn->prepare($query);
$stmt->bindParam(':id', $project_id);
$stmt->execute();
$project = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$project) {
    header('Location: index.php');
    exit;
}

// جلب الغرف والأجهزة
$rooms_query = "SELECT r.*, 
                (SELECT COUNT(*) FROM iot_project_devices WHERE room_id = r.id) as devices_count
                FROM iot_project_rooms r
                WHERE r.project_id = :project_id
                ORDER BY r.created_at ASC";
$rooms_stmt = $conn->prepare($rooms_query);
$rooms_stmt->bindParam(':project_id', $project_id);
$rooms_stmt->execute();
$rooms = $rooms_stmt->fetchAll(PDO::FETCH_ASSOC);

// جلب الأجهزة لكل غرفة
$rooms_with_devices = [];
foreach ($rooms as $room) {
    $devices_query = "SELECT * FROM iot_project_devices WHERE room_id = :room_id";
    $devices_stmt = $conn->prepare($devices_query);
    $devices_stmt->bindParam(':room_id', $room['id']);
    $devices_stmt->execute();
    $room['devices'] = $devices_stmt->fetchAll(PDO::FETCH_ASSOC);
    $rooms_with_devices[] = $room;
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>كروكي المشروع 2D - <?php echo htmlspecialchars($project['customer_name']); ?></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">
    <link rel="stylesheet" href="assets/style.css">
    <style>
        #blueprint-canvas {
            border: 2px solid #667eea;
            border-radius: 12px;
            background: white;
            cursor: crosshair;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .tools-panel {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .tool-btn {
            padding: 12px 20px;
            margin: 5px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            background: white;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 600;
        }
        
        .tool-btn:hover {
            background: #667eea;
            color: white;
            border-color: #667eea;
            transform: translateY(-2px);
        }
        
        .tool-btn.active {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border-color: #667eea;
        }
        
        .room-item {
            padding: 12px;
            margin: 8px 0;
            background: linear-gradient(135deg, #f9fafb, #f3f4f6);
            border-radius: 8px;
            cursor: move;
            transition: all 0.3s;
            border: 2px solid transparent;
        }
        
        .room-item:hover {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            transform: translateX(-5px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }
        
        .device-icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin: 0 3px;
            font-size: 16px;
        }
        
        .legend {
            background: white;
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 8px 0;
            padding: 8px;
            border-radius: 6px;
            background: #f9fafb;
        }
        
        .color-box {
            width: 30px;
            height: 30px;
            border-radius: 6px;
            border: 2px solid #e5e7eb;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="content-header">
                <div>
                    <h1 class="text-3xl font-bold text-gray-800">
                        <i class="fas fa-drafting-compass text-purple-600"></i>
                        كروكي المشروع 2D
                    </h1>
                    <p class="text-gray-600 mt-2">
                        مشروع: <strong><?php echo htmlspecialchars($project['customer_name']); ?></strong>
                    </p>
                </div>
                <div class="flex gap-3">
                    <button onclick="saveBlueprint()" class="btn btn-success">
                        <i class="fas fa-save"></i>
                        حفظ الكروكي
                    </button>
                    <button onclick="exportImage()" class="btn btn-primary">
                        <i class="fas fa-download"></i>
                        تصدير صورة
                    </button>
                    <a href="view.php?id=<?php echo $project_id; ?>" class="btn btn-secondary">
                        <i class="fas fa-arrow-right"></i>
                        العودة
                    </a>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
            <!-- لوحة الأدوات -->
            <div class="lg:col-span-1">
                <div class="tools-panel mb-4">
                    <h3 class="text-lg font-bold mb-3">
                        <i class="fas fa-tools"></i>
                        أدوات الرسم
                    </h3>
                    <button class="tool-btn active" onclick="setTool('select')" id="tool-select">
                        <i class="fas fa-mouse-pointer"></i>
                        تحديد
                    </button>
                    <button class="tool-btn" onclick="setTool('room')" id="tool-room">
                        <i class="fas fa-square"></i>
                        رسم غرفة
                    </button>
                    <button class="tool-btn" onclick="setTool('device')" id="tool-device">
                        <i class="fas fa-microchip"></i>
                        إضافة جهاز
                    </button>
                    <button class="tool-btn" onclick="clearCanvas()">
                        <i class="fas fa-eraser"></i>
                        مسح الكل
                    </button>
                </div>

                <!-- قائمة الغرف -->
                <div class="tools-panel">
                    <h3 class="text-lg font-bold mb-3">
                        <i class="fas fa-door-open"></i>
                        الغرف (<?php echo count($rooms_with_devices); ?>)
                    </h3>
                    <div id="rooms-list">
                        <?php foreach ($rooms_with_devices as $room): ?>
                            <div class="room-item" 
                                 data-room-id="<?php echo $room['id']; ?>"
                                 data-room-name="<?php echo htmlspecialchars($room['room_name']); ?>"
                                 data-room-type="<?php echo $room['room_type']; ?>"
                                 data-devices-count="<?php echo count($room['devices']); ?>"
                                 onclick="selectRoom(this)">
                                <div class="font-bold">
                                    <?php
                                    $room_icons = [
                                        'bedroom' => '🛏️',
                                        'living_room' => '🛋️',
                                        'kitchen' => '🍳',
                                        'bathroom' => '🚿',
                                        'office' => '💼',
                                        'garage' => '🚗',
                                        'garden' => '🌳',
                                        'other' => '📍'
                                    ];
                                    echo $room_icons[$room['room_type']] ?? '📍';
                                    ?>
                                    <?php echo htmlspecialchars($room['room_name']); ?>
                                </div>
                                <div class="text-sm">
                                    <?php if ($room['area_sqm']): ?>
                                        <span><?php echo $room['area_sqm']; ?> م²</span> •
                                    <?php endif; ?>
                                    <span><?php echo count($room['devices']); ?> جهاز</span>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>

                <!-- دليل الألوان -->
                <div class="legend mt-4">
                    <h3 class="text-lg font-bold mb-3">
                        <i class="fas fa-palette"></i>
                        دليل الألوان
                    </h3>
                    <div class="legend-item">
                        <div class="color-box" style="background: #dbeafe;"></div>
                        <span>غرف نوم</span>
                    </div>
                    <div class="legend-item">
                        <div class="color-box" style="background: #fef3c7;"></div>
                        <span>صالات</span>
                    </div>
                    <div class="legend-item">
                        <div class="color-box" style="background: #d1fae5;"></div>
                        <span>مطابخ</span>
                    </div>
                    <div class="legend-item">
                        <div class="color-box" style="background: #fce7f3;"></div>
                        <span>حمامات</span>
                    </div>
                </div>
            </div>

            <!-- منطقة الرسم -->
            <div class="lg:col-span-3">
                <div class="card">
                    <canvas id="blueprint-canvas" width="1000" height="700"></canvas>
                    
                    <div class="mt-4 flex gap-3 justify-between items-center">
                        <div class="flex gap-2">
                            <button onclick="zoomIn()" class="btn-icon btn-icon-blue">
                                <i class="fas fa-search-plus"></i>
                            </button>
                            <button onclick="zoomOut()" class="btn-icon btn-icon-blue">
                                <i class="fas fa-search-minus"></i>
                            </button>
                            <button onclick="resetZoom()" class="btn-icon btn-icon-purple">
                                <i class="fas fa-compress"></i>
                            </button>
                        </div>
                        
                        <div class="text-sm text-gray-600">
                            <i class="fas fa-info-circle"></i>
                            اضغط واسحب لرسم الغرف • انقر لإضافة الأجهزة
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script>
const canvas = document.getElementById('blueprint-canvas');
const ctx = canvas.getContext('2d');

let currentTool = 'select';
let isDrawing = false;
let startX, startY;
let rooms = [];
let devices = [];
let selectedRoom = null;
let scale = 1;

// ألوان الغرف
const roomColors = {
    'bedroom': '#dbeafe',
    'living_room': '#fef3c7',
    'kitchen': '#d1fae5',
    'bathroom': '#fce7f3',
    'office': '#e0e7ff',
    'garage': '#f3f4f6',
    'garden': '#dcfce7',
    'other': '#fef2f2'
};

// تعيين الأداة
function setTool(tool) {
    currentTool = tool;
    document.querySelectorAll('.tool-btn').forEach(btn => btn.classList.remove('active'));
    document.getElementById('tool-' + tool).classList.add('active');
}

// اختيار غرفة من القائمة
function selectRoom(element) {
    selectedRoom = {
        id: element.dataset.roomId,
        name: element.dataset.roomName,
        type: element.dataset.roomType,
        devicesCount: element.dataset.devicesCount
    };
    
    document.querySelectorAll('.room-item').forEach(item => {
        item.style.borderColor = 'transparent';
    });
    element.style.borderColor = '#667eea';
    
    setTool('room');
}

// بداية الرسم
canvas.addEventListener('mousedown', (e) => {
    const rect = canvas.getBoundingClientRect();
    startX = (e.clientX - rect.left) / scale;
    startY = (e.clientY - rect.top) / scale;
    
    if (currentTool === 'room' && selectedRoom) {
        isDrawing = true;
    }
});

// أثناء الرسم
canvas.addEventListener('mousemove', (e) => {
    if (!isDrawing) return;
    
    const rect = canvas.getBoundingClientRect();
    const currentX = (e.clientX - rect.left) / scale;
    const currentY = (e.clientY - rect.top) / scale;
    
    redrawCanvas();
    
    // رسم المعاينة
    ctx.save();
    ctx.scale(scale, scale);
    ctx.fillStyle = roomColors[selectedRoom.type] || '#f3f4f6';
    ctx.strokeStyle = '#667eea';
    ctx.lineWidth = 3;
    
    const width = currentX - startX;
    const height = currentY - startY;
    
    ctx.fillRect(startX, startY, width, height);
    ctx.strokeRect(startX, startY, width, height);
    ctx.restore();
});

// نهاية الرسم
canvas.addEventListener('mouseup', (e) => {
    if (!isDrawing) return;
    
    const rect = canvas.getBoundingClientRect();
    const endX = (e.clientX - rect.left) / scale;
    const endY = (e.clientY - rect.top) / scale;
    
    const width = endX - startX;
    const height = endY - startY;
    
    if (Math.abs(width) > 30 && Math.abs(height) > 30) {
        rooms.push({
            x: Math.min(startX, endX),
            y: Math.min(startY, endY),
            width: Math.abs(width),
            height: Math.abs(height),
            name: selectedRoom.name,
            type: selectedRoom.type,
            id: selectedRoom.id
        });
        
        redrawCanvas();
    }
    
    isDrawing = false;
});

// إعادة رسم الكانفاس
function redrawCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.save();
    ctx.scale(scale, scale);
    
    // رسم الشبكة
    ctx.strokeStyle = '#f3f4f6';
    ctx.lineWidth = 1;
    for (let i = 0; i < canvas.width / scale; i += 50) {
        ctx.beginPath();
        ctx.moveTo(i, 0);
        ctx.lineTo(i, canvas.height / scale);
        ctx.stroke();
    }
    for (let i = 0; i < canvas.height / scale; i += 50) {
        ctx.beginPath();
        ctx.moveTo(0, i);
        ctx.lineTo(canvas.width / scale, i);
        ctx.stroke();
    }
    
    // رسم الغرف
    rooms.forEach(room => {
        ctx.fillStyle = roomColors[room.type] || '#f3f4f6';
        ctx.strokeStyle = '#667eea';
        ctx.lineWidth = 3;
        
        ctx.fillRect(room.x, room.y, room.width, room.height);
        ctx.strokeRect(room.x, room.y, room.width, room.height);
        
        // كتابة اسم الغرفة
        ctx.fillStyle = '#374151';
        ctx.font = 'bold 16px Tajawal';
        ctx.textAlign = 'center';
        ctx.fillText(room.name, room.x + room.width / 2, room.y + room.height / 2);
    });
    
    ctx.restore();
}

// التكبير والتصغير
function zoomIn() {
    scale = Math.min(scale + 0.1, 2);
    redrawCanvas();
}

function zoomOut() {
    scale = Math.max(scale - 0.1, 0.5);
    redrawCanvas();
}

function resetZoom() {
    scale = 1;
    redrawCanvas();
}

// مسح الكانفاس
function clearCanvas() {
    if (confirm('هل أنت متأكد من مسح الكروكي؟')) {
        rooms = [];
        devices = [];
        redrawCanvas();
    }
}

// حفظ الكروكي
function saveBlueprint() {
    const blueprintData = {
        project_id: <?php echo $project_id; ?>,
        rooms: rooms,
        devices: devices,
        scale: scale
    };
    
    localStorage.setItem('blueprint_<?php echo $project_id; ?>', JSON.stringify(blueprintData));
    alert('✅ تم حفظ الكروكي بنجاح!');
}

// تصدير كصورة
function exportImage() {
    const link = document.createElement('a');
    link.download = 'blueprint_project_<?php echo $project_id; ?>.png';
    link.href = canvas.toDataURL();
    link.click();
}

// تحميل الكروكي المحفوظ
window.addEventListener('load', () => {
    const saved = localStorage.getItem('blueprint_<?php echo $project_id; ?>');
    if (saved) {
        const data = JSON.parse(saved);
        rooms = data.rooms || [];
        devices = data.devices || [];
        scale = data.scale || 1;
        redrawCanvas();
    } else {
        redrawCanvas();
    }
});
</script>

</body>
</html>
