// عرض معاينة الصورة
document.getElementById('enrollImage')?.addEventListener('change', function(e) {
    previewImage(e, 'enrollPreview');
});
document.getElementById('searchImage')?.addEventListener('change', function(e) {
    previewImage(e, 'searchPreview');
});

function previewImage(event, previewId) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const preview = document.getElementById(previewId);
            preview.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
        };
        reader.readAsDataURL(file);
    }
}

// تسجيل وجه
async function enrollFace() {
    const imageFile = document.getElementById('enrollImage').files[0];
    const personName = document.getElementById('personName').value;
    
    if (!imageFile || !personName) {
        showResult('enrollResult', '❌ الرجاء اختيار صورة وإدخال الاسم', 'error');
        return;
    }
    
    const formData = new FormData();
    formData.append('file', imageFile);
    
    showLoading('enrollResult', 'جاري تسجيل الوجه...');
    
    try {
        const response = await fetch(`/api/enroll?name=${encodeURIComponent(personName)}`, {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (result.success) {
            showResult('enrollResult', `✅ ${result.message}\nالرقم: ${result.identity_id}`, 'success');
            document.getElementById('personName').value = '';
            document.getElementById('enrollImage').value = '';
            document.getElementById('enrollPreview').innerHTML = '';
        } else {
            showResult('enrollResult', `❌ ${result.message}`, 'error');
        }
    } catch (error) {
        showResult('enrollResult', '❌ حدث خطأ في الاتصال', 'error');
    }
}

// البحث عن وجه
async function searchFace() {
    const imageFile = document.getElementById('searchImage').files[0];
    
    if (!imageFile) {
        showResult('searchResult', '❌ الرجاء اختيار صورة للبحث', 'error');
        return;
    }
    
    const formData = new FormData();
    formData.append('file', imageFile);
    
    showLoading('searchResult', 'جاري البحث...');
    
    try {
        const response = await fetch('/api/search', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (result.success) {
            const similarityPercent = (result.similarity * 100).toFixed(2);
            showResult('searchResult', 
                `✅ تم العثور على تطابق!\n👤 الاسم: ${result.name}\n📊 نسبة التشابه: ${similarityPercent}%\n🆔 الرقم: ${result.identity_id}`,
                'success');
        } else {
            showResult('searchResult', `❌ ${result.message}`, 'error');
        }
    } catch (error) {
        showResult('searchResult', '❌ حدث خطأ في الاتصال', 'error');
    }
}

// تحميل قاعدة البيانات
async function loadDatabase() {
    showLoading('databaseList', 'جاري تحميل البيانات...');
    
    try {
        const response = await fetch('/api/identities');
        const result = await response.json();
        
        if (result.success && result.data.length > 0) {
            let html = '<div class="identities-grid">';
            result.data.forEach(person => {
                html += `
                    <div class="identity-card">
                        <h3>${person.name}</h3>
                        <p>🆔 ${person.id}</p>
                        <p>📅 ${new Date(person.created_at).toLocaleDateString('ar-EG')}</p>
                    </div>
                `;
            });
            html += '</div>';
            document.getElementById('databaseList').innerHTML = html;
        } else {
            showResult('databaseList', '📭 لا يوجد أشخاص مسجلين', 'info');
        }
    } catch (error) {
        showResult('databaseList', '❌ خطأ في تحميل البيانات', 'error');
    }
}

function showResult(elementId, message, type) {
    const element = document.getElementById(elementId);
    element.innerHTML = `<div class="alert alert-${type}">${message.replace(/\n/g, '<br>')}</div>`;
    setTimeout(() => {
        if (element.innerHTML.includes('alert')) {
            element.innerHTML = '';
        }
    }, 5000);
}

function showLoading(elementId, message) {
    document.getElementById(elementId).innerHTML = `<div class="loading">⏳ ${message}</div>`;
}

function showTab(tabName) {
    // إخفاء كل التبويبات
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.remove('active');
    });
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    
    // إظهار التبويب المختار
    document.getElementById(tabName).classList.add('active');
    event.target.classList.add('active');
    
    // تحميل قاعدة البيانات إذا تم اختيارها
    if (tabName === 'database') {
        loadDatabase();
    }
}

// تحميل قاعدة البيانات تلقائياً عند بدء التشغيل
document.addEventListener('DOMContentLoaded', () => {
    loadDatabase();
});