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

// Check admin authentication
if (!isset($_SESSION['user_id']) || $_SESSION['role'] !== 'admin') {
    header('Location: ../login.php');
    exit;
}

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

// Get all questions
$stmt = $conn->query("SELECT * FROM skin_quiz_questions ORDER BY order_position ASC, id ASC");
$questions = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Get statistics
$stats_stmt = $conn->query("
    SELECT 
        category,
        COUNT(*) as total,
        SUM(CASE WHEN is_active = 1 THEN 1 ELSE 0 END) as active
    FROM skin_quiz_questions
    GROUP BY category
");
$stats = $stats_stmt->fetchAll(PDO::FETCH_ASSOC);

$categoryNames = [
    'skin_type' => 'نوع البشرة',
    'concerns' => 'المشاكل',
    'routine' => 'الروتين',
    'lifestyle' => 'نمط الحياة',
    'goals' => 'الأهداف'
];

$questionTypeNames = [
    'single' => 'اختيار واحد',
    'multiple' => 'اختيار متعدد',
    'scale' => 'مقياس',
    'text' => 'نص'
];
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>إدارة الأسئلة - اختبار البشرة</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="../assets/css/admin-layout.css">
    <style>
        body { font-family: 'Tajawal', sans-serif; }
        .question-card { transition: all 0.3s; }
        .question-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
        .draggable { cursor: move; }
    </style>
</head>
<body class="bg-gray-50">

<?php include '../includes/sidebar.php'; ?>

<div style="margin-right: 280px; padding: 24px;">
    
    <!-- Header -->
    <header class="bg-white shadow-sm border-b border-gray-200 rounded-lg mb-6 p-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">❓ إدارة الأسئلة</h1>
                <p class="text-sm text-gray-500 mt-1">إضافة وتعديل أسئلة اختبار البشرة</p>
            </div>
            <div class="flex gap-3">
                <a href="index.php" class="bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-700 transition">
                    <i class="fas fa-arrow-right"></i> العودة
                </a>
                <button onclick="showAddModal()" class="bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition">
                    <i class="fas fa-plus"></i> إضافة سؤال
                </button>
            </div>
        </div>
    </header>

    <!-- Statistics -->
    <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
        <?php foreach ($stats as $stat): ?>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="text-gray-500 text-sm mb-1"><?php echo $categoryNames[$stat['category']] ?? $stat['category']; ?></div>
            <div class="text-2xl font-bold text-gray-900"><?php echo $stat['active']; ?> / <?php echo $stat['total']; ?></div>
            <div class="text-xs text-gray-500">نشط / إجمالي</div>
        </div>
        <?php endforeach; ?>
    </div>

    <!-- Questions List -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="p-4 bg-gray-50 border-b">
            <div class="flex items-center justify-between">
                <h3 class="font-bold text-gray-900">الأسئلة (<?php echo count($questions); ?>)</h3>
                <div class="text-sm text-gray-500">
                    <i class="fas fa-info-circle"></i> اسحب الأسئلة لإعادة ترتيبها
                </div>
            </div>
        </div>
        
        <div id="questionsList">
            <?php foreach ($questions as $question): 
                $options = json_decode($question['options'], true);
            ?>
            <div class="question-card border-b p-6 draggable" data-id="<?php echo $question['id']; ?>">
                <div class="flex items-start gap-4">
                    <div class="text-2xl cursor-move">
                        <i class="fas fa-grip-vertical text-gray-400"></i>
                    </div>
                    
                    <div class="flex-1">
                        <div class="flex items-start justify-between mb-3">
                            <div class="flex-1">
                                <div class="flex items-center gap-3 mb-2">
                                    <?php if ($question['icon']): ?>
                                    <span class="text-2xl"><?php echo $question['icon']; ?></span>
                                    <?php endif; ?>
                                    <h4 class="text-lg font-bold text-gray-900"><?php echo htmlspecialchars($question['question_ar']); ?></h4>
                                </div>
                                
                                <div class="flex items-center gap-3 text-sm">
                                    <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full font-semibold">
                                        <?php echo $categoryNames[$question['category']] ?? $question['category']; ?>
                                    </span>
                                    <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full">
                                        <?php echo $questionTypeNames[$question['question_type']] ?? $question['question_type']; ?>
                                    </span>
                                    <span class="px-3 py-1 <?php echo $question['is_active'] ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'; ?> rounded-full">
                                        <?php echo $question['is_active'] ? 'نشط' : 'غير نشط'; ?>
                                    </span>
                                    <span class="text-gray-500">
                                        <i class="fas fa-sort"></i> الترتيب: <?php echo $question['order_position']; ?>
                                    </span>
                                </div>
                            </div>
                            
                            <div class="flex gap-2">
                                <button onclick="toggleActive(<?php echo $question['id']; ?>, <?php echo $question['is_active'] ? 0 : 1; ?>)" 
                                        class="px-4 py-2 <?php echo $question['is_active'] ? 'bg-yellow-500' : 'bg-green-500'; ?> text-white rounded hover:opacity-80 transition">
                                    <i class="fas fa-<?php echo $question['is_active'] ? 'pause' : 'play'; ?>"></i>
                                </button>
                                <button onclick="editQuestion(<?php echo $question['id']; ?>)" 
                                        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button onclick="deleteQuestion(<?php echo $question['id']; ?>)" 
                                        class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        
                        <?php if ($options && is_array($options)): ?>
                        <div class="mt-3 bg-gray-50 rounded-lg p-3">
                            <div class="text-xs text-gray-500 mb-2">الخيارات:</div>
                            <div class="flex flex-wrap gap-2">
                                <?php foreach (array_slice($options, 0, 4) as $option): ?>
                                <span class="text-sm bg-white px-3 py-1 rounded border">
                                    <?php if (isset($option['icon'])): ?>
                                    <?php echo $option['icon']; ?>
                                    <?php endif; ?>
                                    <?php echo htmlspecialchars(substr($option['label'], 0, 30)); ?>
                                    <?php echo strlen($option['label']) > 30 ? '...' : ''; ?>
                                </span>
                                <?php endforeach; ?>
                                <?php if (count($options) > 4): ?>
                                <span class="text-sm text-gray-500">+<?php echo count($options) - 4; ?> المزيد</span>
                                <?php endif; ?>
                            </div>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<!-- Add/Edit Modal -->
<div id="questionModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div class="p-6 border-b">
            <div class="flex items-center justify-between">
                <h3 class="text-2xl font-bold" id="modalTitle">إضافة سؤال جديد</h3>
                <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times text-2xl"></i>
                </button>
            </div>
        </div>
        
        <form id="questionForm" class="p-6">
            <input type="hidden" id="questionId" name="id">
            
            <div class="mb-4">
                <label class="block text-sm font-bold text-gray-700 mb-2">نص السؤال *</label>
                <textarea id="questionText" name="question_ar" rows="3" required 
                          class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500"></textarea>
            </div>
            
            <div class="grid grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">الفئة *</label>
                    <select id="category" name="category" required class="w-full px-4 py-2 border rounded-lg">
                        <option value="skin_type">نوع البشرة</option>
                        <option value="concerns">المشاكل</option>
                        <option value="routine">الروتين</option>
                        <option value="lifestyle">نمط الحياة</option>
                        <option value="goals">الأهداف</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">نوع السؤال *</label>
                    <select id="questionType" name="question_type" required class="w-full px-4 py-2 border rounded-lg">
                        <option value="single">اختيار واحد</option>
                        <option value="multiple">اختيار متعدد</option>
                        <option value="scale">مقياس</option>
                    </select>
                </div>
            </div>
            
            <div class="grid grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">الأيقونة</label>
                    <input type="text" id="icon" name="icon" placeholder="🧪" class="w-full px-4 py-2 border rounded-lg">
                </div>
                
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">الترتيب</label>
                    <input type="number" id="orderPosition" name="order_position" value="0" class="w-full px-4 py-2 border rounded-lg">
                </div>
            </div>
            
            <div class="mb-4">
                <label class="block text-sm font-bold text-gray-700 mb-2">
                    <input type="checkbox" id="isActive" name="is_active" checked class="mr-2">
                    السؤال نشط
                </label>
            </div>
            
            <div class="flex gap-3">
                <button type="submit" class="flex-1 bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition font-bold">
                    <i class="fas fa-save"></i> حفظ
                </button>
                <button type="button" onclick="closeModal()" class="px-6 bg-gray-200 text-gray-700 py-3 rounded-lg hover:bg-gray-300 transition">
                    إلغاء
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function showAddModal() {
    document.getElementById('modalTitle').textContent = 'إضافة سؤال جديد';
    document.getElementById('questionForm').reset();
    document.getElementById('questionId').value = '';
    document.getElementById('questionModal').classList.remove('hidden');
}

function closeModal() {
    document.getElementById('questionModal').classList.add('hidden');
}

function toggleActive(id, status) {
    fetch('toggle-question.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: id, is_active: status })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('❌ ' + data.message);
        }
    });
}

function deleteQuestion(id) {
    if (!confirm('هل أنت متأكد من حذف هذا السؤال؟')) return;
    
    fetch('delete-question.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: id })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('✅ تم الحذف بنجاح');
            location.reload();
        } else {
            alert('❌ ' + data.message);
        }
    });
}

// Form submission
document.getElementById('questionForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData);
    data.is_active = document.getElementById('isActive').checked ? 1 : 0;
    
    fetch('save-question.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('✅ تم الحفظ بنجاح');
            location.reload();
        } else {
            alert('❌ ' + data.message);
        }
    });
});
</script>

</body>
</html>
