/**
 * قائمة جانبية المواعيد المتاحة
 * Appointments Sidebar JavaScript
 */

class AppointmentsSidebar {
    constructor() {
        this.sidebar = null;
        this.toggle = null;
        this.overlay = null;
        this.isOpen = false;
        this.currentDate = new Date().toISOString().split('T')[0];
        this.autoRefreshInterval = null;
        this.refreshInterval = 30000; // 30 ثانية
        
        this.init();
    }
    
    init() {
        this.createSidebar();
        this.createToggle();
        this.createOverlay();
        this.bindEvents();
        this.loadAppointments();
        this.startAutoRefresh();
    }
    
    createSidebar() {
        this.sidebar = document.createElement('div');
        this.sidebar.className = 'appointments-sidebar';
        this.sidebar.innerHTML = `
            <div class="sidebar-header">
                <h3>
                    <i class="ri-calendar-check-line"></i>
                    المواعيد المتاحة
                </h3>
                <div class="date-selector">
                    <input type="date" class="date-input" value="${this.currentDate}" id="sidebarDate">
                    <button class="refresh-btn" id="refreshBtn" title="تحديث">
                        <i class="ri-refresh-line"></i>
                    </button>
                </div>
            </div>
            
            <div class="sidebar-stats" id="sidebarStats">
                <div class="stat-card">
                    <div class="stat-number" id="availableCount">0</div>
                    <div class="stat-label">متاح</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" id="confirmedCount">0</div>
                    <div class="stat-label">مؤكد</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" id="waitingCount">0</div>
                    <div class="stat-label">انتظار</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" id="totalCount">0</div>
                    <div class="stat-label">إجمالي</div>
                </div>
            </div>
            
            <div class="appointments-list" id="appointmentsList">
                <div class="loading">
                    <i class="ri-loader-4-line"></i>
                    <p>جاري تحميل المواعيد...</p>
                </div>
            </div>
        `;
        
        document.body.appendChild(this.sidebar);
    }
    
    createToggle() {
        this.toggle = document.createElement('button');
        this.toggle.className = 'sidebar-toggle';
        this.toggle.innerHTML = 'المواعيد المتاحة';
        this.toggle.title = 'فتح قائمة المواعيد المتاحة';
        
        document.body.appendChild(this.toggle);
    }
    
    createOverlay() {
        this.overlay = document.createElement('div');
        this.overlay.className = 'sidebar-overlay';
        
        document.body.appendChild(this.overlay);
    }
    
    bindEvents() {
        // زر التبديل
        this.toggle.addEventListener('click', () => {
            this.toggleSidebar();
        });
        
        // النقر على الخلفية لإغلاق القائمة
        this.overlay.addEventListener('click', () => {
            this.closeSidebar();
        });
        
        // تغيير التاريخ
        const dateInput = this.sidebar.querySelector('#sidebarDate');
        dateInput.addEventListener('change', (e) => {
            this.currentDate = e.target.value;
            this.loadAppointments();
        });
        
        // زر التحديث
        const refreshBtn = this.sidebar.querySelector('#refreshBtn');
        refreshBtn.addEventListener('click', () => {
            this.loadAppointments();
            this.animateRefresh();
        });
        
        // إغلاق بـ ESC
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.isOpen) {
                this.closeSidebar();
            }
        });
        
        // إغلاق عند تغيير حجم النافذة
        window.addEventListener('resize', () => {
            if (window.innerWidth < 768 && this.isOpen) {
                this.closeSidebar();
            }
        });
    }
    
    toggleSidebar() {
        if (this.isOpen) {
            this.closeSidebar();
        } else {
            this.openSidebar();
        }
    }
    
    openSidebar() {
        this.isOpen = true;
        this.sidebar.classList.add('open');
        this.toggle.classList.add('open');
        this.overlay.classList.add('open');
        document.body.style.overflow = 'hidden';
        
        // تحميل البيانات إذا لم تكن محملة
        if (this.sidebar.querySelector('.loading')) {
            this.loadAppointments();
        }
    }
    
    closeSidebar() {
        this.isOpen = false;
        this.sidebar.classList.remove('open');
        this.toggle.classList.remove('open');
        this.overlay.classList.remove('open');
        document.body.style.overflow = 'auto';
    }
    
    async loadAppointments() {
        const appointmentsList = this.sidebar.querySelector('#appointmentsList');
        
        // عرض حالة التحميل
        appointmentsList.innerHTML = `
            <div class="loading">
                <i class="ri-loader-4-line"></i>
                <p>جاري تحميل المواعيد...</p>
            </div>
        `;
        
        try {
            const response = await fetch(`api/get-available-appointments.php?date=${this.currentDate}`);
            const data = await response.json();
            
            if (data.success) {
                this.updateStats(data.stats);
                this.renderAppointments(data);
            } else {
                this.showError(data.message);
            }
        } catch (error) {
            console.error('خطأ في تحميل المواعيد:', error);
            this.showError('خطأ في الاتصال بالخادم');
        }
    }
    
    updateStats(stats) {
        this.sidebar.querySelector('#availableCount').textContent = stats.available;
        this.sidebar.querySelector('#confirmedCount').textContent = stats.confirmed;
        this.sidebar.querySelector('#waitingCount').textContent = stats.waiting;
        this.sidebar.querySelector('#totalCount').textContent = stats.total;
    }
    
    renderAppointments(data) {
        const appointmentsList = this.sidebar.querySelector('#appointmentsList');
        
        if (data.available_slots.length === 0 && 
            data.confirmed_appointments.length === 0 && 
            data.waiting_appointments.length === 0) {
            
            appointmentsList.innerHTML = `
                <div class="empty-state">
                    <i class="ri-calendar-line"></i>
                    <h4>لا توجد مواعيد</h4>
                    <p>لا توجد مواعيد متاحة أو محجوزة في هذا التاريخ</p>
                </div>
            `;
            return;
        }
        
        let html = '';
        
        // المواعيد المتاحة
        data.available_slots.forEach(slot => {
            html += `
                <div class="appointment-item available" onclick="appointmentsSidebar.bookAppointment(${slot.doctor_id}, '${slot.time}', '${slot.date}')">
                    <div class="appointment-time">${slot.formatted_time}</div>
                    <div class="appointment-doctor">${slot.doctor_name}</div>
                    <div class="appointment-patient">متاح للحجز</div>
                    <div class="appointment-status available">متاح</div>
                    <div class="appointment-actions">
                        <button class="action-btn book" onclick="event.stopPropagation(); appointmentsSidebar.bookAppointment(${slot.doctor_id}, '${slot.time}', '${slot.date}')">
                            <i class="ri-add-circle-line"></i>
                            حجز
                        </button>
                    </div>
                </div>
            `;
        });
        
        // المواعيد المؤكدة
        data.confirmed_appointments.forEach(appointment => {
            html += `
                <div class="appointment-item confirmed">
                    <div class="appointment-time">${this.formatTime(appointment.appointment_time)}</div>
                    <div class="appointment-doctor">${appointment.doctor_name}</div>
                    <div class="appointment-patient">${appointment.patient_name}</div>
                    <div class="appointment-status confirmed">مؤكد</div>
                    <div class="appointment-actions">
                        <button class="action-btn view" onclick="appointmentsSidebar.viewAppointment(${appointment.id})">
                            <i class="ri-eye-line"></i>
                            عرض
                        </button>
                        <button class="action-btn cancel" onclick="appointmentsSidebar.cancelAppointment(${appointment.id})">
                            <i class="ri-close-circle-line"></i>
                            إلغاء
                        </button>
                    </div>
                </div>
            `;
        });
        
        // قائمة الانتظار
        data.waiting_appointments.forEach(appointment => {
            html += `
                <div class="appointment-item waiting">
                    <div class="appointment-time">${this.formatTime(appointment.appointment_time)}</div>
                    <div class="appointment-doctor">${appointment.doctor_name}</div>
                    <div class="appointment-patient">${appointment.patient_name}</div>
                    <div class="appointment-status waiting">في الانتظار</div>
                    <div class="appointment-actions">
                        <button class="action-btn view" onclick="appointmentsSidebar.viewAppointment(${appointment.id})">
                            <i class="ri-eye-line"></i>
                            عرض
                        </button>
                        <button class="action-btn cancel" onclick="appointmentsSidebar.cancelAppointment(${appointment.id})">
                            <i class="ri-close-circle-line"></i>
                            إلغاء
                        </button>
                    </div>
                </div>
            `;
        });
        
        appointmentsList.innerHTML = html;
    }
    
    formatTime(time) {
        const date = new Date(`2000-01-01T${time}`);
        return date.toLocaleTimeString('ar-SA', {
            hour: 'numeric',
            minute: '2-digit',
            hour12: true
        });
    }
    
    showError(message) {
        const appointmentsList = this.sidebar.querySelector('#appointmentsList');
        appointmentsList.innerHTML = `
            <div class="empty-state">
                <i class="ri-error-warning-line"></i>
                <h4>خطأ في التحميل</h4>
                <p>${message}</p>
                <button class="action-btn" onclick="appointmentsSidebar.loadAppointments()" style="margin-top: 15px;">
                    <i class="ri-refresh-line"></i>
                    إعادة المحاولة
                </button>
            </div>
        `;
    }
    
    showAlert(message, type = 'info') {
        // إزالة التنبيهات السابقة
        const existingAlerts = this.sidebar.querySelectorAll('.sidebar-alert');
        existingAlerts.forEach(alert => alert.remove());
        
        const alert = document.createElement('div');
        alert.className = `sidebar-alert ${type}`;
        alert.innerHTML = `
            <div style="display: flex; align-items: center; gap: 8px;">
                <i class="ri-${type === 'success' ? 'check-circle' : type === 'error' ? 'error-warning' : 'information'}-line"></i>
                <span>${message}</span>
            </div>
        `;
        
        const header = this.sidebar.querySelector('.sidebar-header');
        header.insertAdjacentElement('afterend', alert);
        
        // إزالة التنبيه بعد 5 ثوان
        setTimeout(() => {
            alert.remove();
        }, 5000);
    }
    
    animateRefresh() {
        const refreshBtn = this.sidebar.querySelector('#refreshBtn i');
        refreshBtn.style.transform = 'rotate(360deg)';
        refreshBtn.style.transition = 'transform 0.5s ease-in-out';
        
        setTimeout(() => {
            refreshBtn.style.transform = 'rotate(0deg)';
        }, 500);
    }
    
    startAutoRefresh() {
        this.autoRefreshInterval = setInterval(() => {
            if (this.isOpen) {
                this.loadAppointments();
            }
        }, this.refreshInterval);
    }
    
    stopAutoRefresh() {
        if (this.autoRefreshInterval) {
            clearInterval(this.autoRefreshInterval);
            this.autoRefreshInterval = null;
        }
    }
    
    // دوال الإجراءات
    bookAppointment(doctorId, time, date) {
        // فتح النافذة المنبثقة للحجز
        if (typeof openBookingModal === 'function') {
            openBookingModal();
            // تعيين البيانات المحددة مسبقاً
            setTimeout(() => {
                document.getElementById('doctor_id').value = doctorId;
                document.getElementById('appointment_date').value = date;
                if (typeof loadAvailableTimes === 'function') {
                    loadAvailableTimes().then(() => {
                        document.getElementById('appointment_time').value = time;
                    });
                }
            }, 100);
        } else {
            // إذا لم تكن النافذة المنبثقة متاحة، انتقل للصفحة الرئيسية
            window.location.href = `available-appointments.php?doctor=${doctorId}&date=${date}&time=${time}`;
        }
    }
    
    viewAppointment(id) {
        window.location.href = `appointments.php?view=${id}`;
    }
    
    async cancelAppointment(id) {
        if (confirm('هل أنت متأكد من إلغاء هذا الموعد؟')) {
            try {
                const response = await fetch('api/appointment-actions.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `action=cancel&id=${id}`
                });
                
                const data = await response.json();
                
                if (data.success) {
                    this.showAlert(data.message, 'success');
                    this.loadAppointments(); // إعادة تحميل القائمة
                } else {
                    this.showAlert(data.message, 'error');
                }
            } catch (error) {
                this.showAlert('حدث خطأ في الاتصال', 'error');
            }
        }
    }
    
    // دوال مساعدة
    setDate(date) {
        this.currentDate = date;
        const dateInput = this.sidebar.querySelector('#sidebarDate');
        if (dateInput) {
            dateInput.value = date;
        }
        this.loadAppointments();
    }
    
    getCurrentDate() {
        return this.currentDate;
    }
    
    isSidebarOpen() {
        return this.isOpen;
    }
    
    destroy() {
        this.stopAutoRefresh();
        if (this.sidebar) this.sidebar.remove();
        if (this.toggle) this.toggle.remove();
        if (this.overlay) this.overlay.remove();
    }
}

// تهيئة القائمة الجانبية عند تحميل الصفحة
let appointmentsSidebar;

document.addEventListener('DOMContentLoaded', function() {
    appointmentsSidebar = new AppointmentsSidebar();
});

// دوال عامة للاستخدام من الخارج
window.openAppointmentsSidebar = function() {
    if (appointmentsSidebar) {
        appointmentsSidebar.openSidebar();
    }
};

window.closeAppointmentsSidebar = function() {
    if (appointmentsSidebar) {
        appointmentsSidebar.closeSidebar();
    }
};

window.toggleAppointmentsSidebar = function() {
    if (appointmentsSidebar) {
        appointmentsSidebar.toggleSidebar();
    }
};