@props(['nameFrom', 'nameTo', 'valueFrom' => '', 'valueTo' => '', 'providerCreatedAt' => null])

<div x-data="{
    open: false,
    dateFrom: '{{ $valueFrom }}',
    dateTo: '{{ $valueTo }}',
    providerCreatedAt: '{{ $providerCreatedAt }}',
    currentMonth: new Date().getMonth(),
    currentYear: new Date().getFullYear(),
    viewMonth: new Date().getMonth(),
    viewYear: new Date().getFullYear(),
    selecting: false,
    hoverDate: null,
    
    get monthName() {
        return new Date(this.viewYear, this.viewMonth).toLocaleDateString('fr-FR', { month: 'long', year: 'numeric' });
    },
    
    getDaysInMonth() {
        const firstDay = new Date(this.viewYear, this.viewMonth, 1).getDay();
        const daysInMonth = new Date(this.viewYear, this.viewMonth + 1, 0).getDate();
        const days = [];
        
        const offset = firstDay === 0 ? 6 : firstDay - 1;
        for (let i = 0; i < offset; i++) {
            days.push(null);
        }
        
        for (let i = 1; i <= daysInMonth; i++) {
            days.push(i);
        }
        
        return days;
    },
    
    get daysInMonth() {
        return this.getDaysInMonth();
    },
    
    selectDate(day) {
        if (!day) return;
        const year = this.viewYear;
        const month = String(this.viewMonth + 1).padStart(2, '0');
        const dayStr = String(day).padStart(2, '0');
        const dateStr = `${year}-${month}-${dayStr}`;
        
        if (!this.selecting || !this.dateFrom) {
            this.dateFrom = dateStr;
            this.dateTo = dateStr;
            this.selecting = true;
        } else {
            if (new Date(dateStr) < new Date(this.dateFrom)) {
                this.dateTo = this.dateFrom;
                this.dateFrom = dateStr;
            } else {
                this.dateTo = dateStr;
            }
            this.selecting = false;
        }
    },
    
    isSelected(day) {
        if (!day || !this.dateFrom) return false;
        const year = this.viewYear;
        const month = String(this.viewMonth + 1).padStart(2, '0');
        const dayStr = String(day).padStart(2, '0');
        const dateStr = `${year}-${month}-${dayStr}`;
        return dateStr === this.dateFrom || dateStr === this.dateTo;
    },
    
    isInRange(day) {
        if (!day || !this.dateFrom || !this.dateTo) return false;
        const year = this.viewYear;
        const month = String(this.viewMonth + 1).padStart(2, '0');
        const dayStr = String(day).padStart(2, '0');
        const dateStr = `${year}-${month}-${dayStr}`;
        return dateStr > this.dateFrom && dateStr < this.dateTo;
    },
    
    isHoverRange(day) {
        if (!day || !this.selecting || !this.dateFrom || !this.hoverDate) return false;
        const year = this.viewYear;
        const month = String(this.viewMonth + 1).padStart(2, '0');
        const dayStr = String(day).padStart(2, '0');
        const dateStr = `${year}-${month}-${dayStr}`;
        const from = this.dateFrom < this.hoverDate ? this.dateFrom : this.hoverDate;
        const to = this.dateFrom < this.hoverDate ? this.hoverDate : this.dateFrom;
        return dateStr > from && dateStr < to;
    },
    
    isToday(day) {
        if (!day) return false;
        const today = new Date();
        return day === today.getDate() && this.viewMonth === this.currentMonth && this.viewYear === this.currentYear;
    },
    
    prevMonth() {
        if (this.viewMonth === 0) {
            this.viewMonth = 11;
            this.viewYear--;
        } else {
            this.viewMonth--;
        }
    },
    
    nextMonth() {
        if (this.viewMonth === 11) {
            this.viewMonth = 0;
            this.viewYear++;
        } else {
            this.viewMonth++;
        }
    },
    
    formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    },
    
    isPresetActive(preset) {
        if (!this.dateFrom || !this.dateTo) return false;
        const now = new Date();
        let from, to;
        
        switch(preset) {
            case 'today':
                from = to = this.formatDate(now);
                break;
            case 'yesterday':
                const yesterday = new Date();
                yesterday.setDate(yesterday.getDate() - 1);
                from = to = this.formatDate(yesterday);
                break;
            case '7days':
                const week = new Date();
                week.setDate(week.getDate() - 6);
                from = this.formatDate(week);
                to = this.formatDate(now);
                break;
            case '30days':
                const month = new Date();
                month.setDate(month.getDate() - 29);
                from = this.formatDate(month);
                to = this.formatDate(now);
                break;
            case 'thisWeek':
                const dayOfWeek = now.getDay();
                const monday = new Date();
                monday.setDate(now.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1));
                from = this.formatDate(monday);
                to = this.formatDate(now);
                break;
            case 'lastWeek':
                const lastMonday = new Date();
                const currentDay = lastMonday.getDay();
                lastMonday.setDate(lastMonday.getDate() - (currentDay === 0 ? 6 : currentDay - 1) - 7);
                const lastSunday = new Date(lastMonday);
                lastSunday.setDate(lastMonday.getDate() + 6);
                from = this.formatDate(lastMonday);
                to = this.formatDate(lastSunday);
                break;
            case 'thisMonth':
                const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
                from = this.formatDate(firstDay);
                to = this.formatDate(now);
                break;
            case 'lastMonth':
                const lastMonthFirst = new Date(now.getFullYear(), now.getMonth() - 1, 1);
                const lastMonthLast = new Date(now.getFullYear(), now.getMonth(), 0);
                from = this.formatDate(lastMonthFirst);
                to = this.formatDate(lastMonthLast);
                break;
            case 'allTime':
                from = this.providerCreatedAt || '2020-01-01';
                to = this.formatDate(now);
                break;
            default:
                return false;
        }
        
        return this.dateFrom === from && this.dateTo === to;
    },
    
    setPreset(preset) {
        const now = new Date();
        
        switch(preset) {
            case 'today':
                this.dateFrom = this.dateTo = this.formatDate(now);
                break;
            case 'yesterday':
                const yesterday = new Date();
                yesterday.setDate(yesterday.getDate() - 1);
                this.dateFrom = this.dateTo = this.formatDate(yesterday);
                break;
            case '7days':
                const week = new Date();
                week.setDate(week.getDate() - 6);
                this.dateFrom = this.formatDate(week);
                this.dateTo = this.formatDate(now);
                break;
            case '30days':
                const month = new Date();
                month.setDate(month.getDate() - 29);
                this.dateFrom = this.formatDate(month);
                this.dateTo = this.formatDate(now);
                break;
            case 'thisWeek':
                const dayOfWeek = now.getDay();
                const monday = new Date();
                monday.setDate(now.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1));
                this.dateFrom = this.formatDate(monday);
                this.dateTo = this.formatDate(now);
                break;
            case 'lastWeek':
                const lastMonday = new Date();
                const currentDay = lastMonday.getDay();
                lastMonday.setDate(lastMonday.getDate() - (currentDay === 0 ? 6 : currentDay - 1) - 7);
                const lastSunday = new Date(lastMonday);
                lastSunday.setDate(lastMonday.getDate() + 6);
                this.dateFrom = this.formatDate(lastMonday);
                this.dateTo = this.formatDate(lastSunday);
                break;
            case 'thisMonth':
                const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
                this.dateFrom = this.formatDate(firstDay);
                this.dateTo = this.formatDate(now);
                break;
            case 'lastMonth':
                const lastMonthFirst = new Date(now.getFullYear(), now.getMonth() - 1, 1);
                const lastMonthLast = new Date(now.getFullYear(), now.getMonth(), 0);
                this.dateFrom = this.formatDate(lastMonthFirst);
                this.dateTo = this.formatDate(lastMonthLast);
                break;
            case 'allTime':
                this.dateFrom = this.providerCreatedAt || '2020-01-01';
                this.dateTo = this.formatDate(now);
                break;
        }
    },
    
    get displayText() {
        if (!this.dateFrom && !this.dateTo) return 'Sélectionner une période';
        
        // Vérifier si un preset est actif
        if (this.isPresetActive('today')) return 'Aujourd\'hui';
        if (this.isPresetActive('yesterday')) return 'Hier';
        if (this.isPresetActive('7days')) return '7 derniers jours';
        if (this.isPresetActive('30days')) return '30 derniers jours';
        if (this.isPresetActive('thisWeek')) return 'Cette semaine';
        if (this.isPresetActive('lastWeek')) return 'Semaine dernière';
        if (this.isPresetActive('thisMonth')) return 'Ce mois-ci';
        if (this.isPresetActive('lastMonth')) return 'Mois dernier';
        if (this.isPresetActive('allTime')) return 'Toute la période';
        
        // Sinon afficher les dates
        if (this.dateFrom === this.dateTo) {
            return new Date(this.dateFrom).toLocaleDateString('fr-FR');
        }
        const fromDate = this.dateFrom ? new Date(this.dateFrom) : null;
        const toDate = this.dateTo ? new Date(this.dateTo) : null;
        
        if (!fromDate || !toDate) return fromDate ? fromDate.toLocaleDateString('fr-FR') : (toDate ? toDate.toLocaleDateString('fr-FR') : '');
        
        // Si les années sont différentes, afficher l'année pour les deux dates
        if (fromDate.getFullYear() !== toDate.getFullYear()) {
            const from = fromDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
            const to = toDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
            return `${from} - ${to}`;
        }
        
        // Sinon, afficher l'année seulement pour la date de fin
        const from = fromDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
        const to = toDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
        return `${from} - ${to}`;
    }
}" @click.away="open = false" class="relative">
    
    <input type="hidden" :name="'{{ $nameFrom }}'" x-model="dateFrom">
    <input type="hidden" :name="'{{ $nameTo }}'" x-model="dateTo">
    
    <button type="button" @click="open = !open" class="w-full px-3 py-1.5 h-[34px] text-sm text-left border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-xl hover:border-gray-400 dark:hover:border-gray-500 flex items-center justify-between">
        <span x-text="displayText" class="truncate"></span>
        <svg class="w-4 h-4 ml-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
        </svg>
    </button>
    
    <div x-show="open" x-transition class="absolute z-10 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl left-0 right-0 md:left-auto md:right-auto md:w-auto" style="display: none;">
        <!-- Périodes en 2 colonnes sur mobile -->
        <div class="border-b border-gray-200 dark:border-gray-700 p-2 md:hidden">
            <div class="grid grid-cols-2 gap-1">
                <div class="space-y-1 pr-1 border-r border-gray-200 dark:border-gray-700">
                    <button type="button" @click="setPreset('today')" class="w-full text-center px-2 py-1.5 text-xs rounded" :class="isPresetActive('today') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">Aujourd'hui</button>
                    <button type="button" @click="setPreset('yesterday')" class="w-full text-center px-2 py-1.5 text-xs rounded" :class="isPresetActive('yesterday') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">Hier</button>
                    <button type="button" @click="setPreset('7days')" class="w-full text-center px-2 py-1.5 text-xs rounded" :class="isPresetActive('7days') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">7 derniers jours</button>
                    <button type="button" @click="setPreset('30days')" class="w-full text-center px-2 py-1.5 text-xs rounded" :class="isPresetActive('30days') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">30 derniers jours</button>
                </div>
                <div class="space-y-1 pl-1">
                    <button type="button" @click="setPreset('thisWeek')" class="w-full text-center px-2 py-1.5 text-xs rounded" :class="isPresetActive('thisWeek') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">Cette semaine</button>
                    <button type="button" @click="setPreset('lastWeek')" class="w-full text-center px-2 py-1.5 text-xs rounded" :class="isPresetActive('lastWeek') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">Semaine dernière</button>
                    <button type="button" @click="setPreset('thisMonth')" class="w-full text-center px-2 py-1.5 text-xs rounded" :class="isPresetActive('thisMonth') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">Ce mois-ci</button>
                    <button type="button" @click="setPreset('lastMonth')" class="w-full text-center px-2 py-1.5 text-xs rounded" :class="isPresetActive('lastMonth') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">Mois dernier</button>
                    <button type="button" @click="setPreset('allTime')" class="w-full text-center px-2 py-1.5 text-xs rounded" :class="isPresetActive('allTime') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">Toute la période</button>
                </div>
            </div>
        </div>
        
        <div class="flex flex-col md:flex-row">
            <!-- Liste des périodes desktop -->
            <div class="hidden md:block md:w-48 md:border-r border-gray-200 dark:border-gray-700 p-2">
                <button type="button" @click="setPreset('today')" class="w-full text-left px-3 py-2 text-sm rounded" :class="isPresetActive('today') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">Aujourd'hui</button>
                <button type="button" @click="setPreset('yesterday')" class="w-full text-left px-3 py-2 text-sm rounded" :class="isPresetActive('yesterday') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">Hier</button>
                <button type="button" @click="setPreset('7days')" class="w-full text-left px-3 py-2 text-sm rounded" :class="isPresetActive('7days') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">7 derniers jours</button>
                <button type="button" @click="setPreset('30days')" class="w-full text-left px-3 py-2 text-sm rounded" :class="isPresetActive('30days') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">30 derniers jours</button>
                <div class="border-t border-gray-200 dark:border-gray-700 my-2"></div>
                <button type="button" @click="setPreset('thisWeek')" class="w-full text-left px-3 py-2 text-sm rounded" :class="isPresetActive('thisWeek') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">Cette semaine</button>
                <button type="button" @click="setPreset('lastWeek')" class="w-full text-left px-3 py-2 text-sm rounded" :class="isPresetActive('lastWeek') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">Semaine dernière</button>
                <button type="button" @click="setPreset('thisMonth')" class="w-full text-left px-3 py-2 text-sm rounded" :class="isPresetActive('thisMonth') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">Ce mois-ci</button>
                <button type="button" @click="setPreset('lastMonth')" class="w-full text-left px-3 py-2 text-sm rounded" :class="isPresetActive('lastMonth') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">Mois dernier</button>
                <div class="border-t border-gray-200 dark:border-gray-700 my-2"></div>
                <button type="button" @click="setPreset('allTime')" class="w-full text-left px-3 py-2 text-sm rounded" :class="isPresetActive('allTime') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200'">Toute la période</button>
            </div>
            
            <!-- Calendrier -->
            <div class="p-4 w-full md:w-80">
                <div class="flex items-center justify-between mb-4">
                    <button type="button" @click="prevMonth" class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
                        <svg class="w-5 h-5 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                        </svg>
                    </button>
                    <span class="font-medium text-sm dark:text-white capitalize" x-text="monthName"></span>
                    <button type="button" @click="nextMonth" class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
                        <svg class="w-5 h-5 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </button>
                </div>
                
                <div class="grid grid-cols-7 gap-1.5 mb-2">
                    <div class="text-center text-xs font-medium text-gray-500 dark:text-gray-400">L</div>
                    <div class="text-center text-xs font-medium text-gray-500 dark:text-gray-400">M</div>
                    <div class="text-center text-xs font-medium text-gray-500 dark:text-gray-400">M</div>
                    <div class="text-center text-xs font-medium text-gray-500 dark:text-gray-400">J</div>
                    <div class="text-center text-xs font-medium text-gray-500 dark:text-gray-400">V</div>
                    <div class="text-center text-xs font-medium text-gray-500 dark:text-gray-400">S</div>
                    <div class="text-center text-xs font-medium text-gray-500 dark:text-gray-400">D</div>
                </div>
                
                <div class="grid grid-cols-7 gap-1.5">
                    <template x-for="(day, index) in daysInMonth" :key="`${viewYear}-${viewMonth}-${index}`">
                        <button 
                            type="button"
                            @click="selectDate(day)"
                            @mouseenter="hoverDate = day ? `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}` : null"
                            @mouseleave="hoverDate = null"
                            :disabled="!day"
                            class="aspect-square text-sm rounded flex items-center justify-center transition-colors"
                            :class="{
                                'invisible': !day,
                                'bg-blue-600 text-white font-semibold': isSelected(day),
                                'bg-blue-100 dark:bg-blue-900': isInRange(day) || isHoverRange(day),
                                'border-2 border-blue-600': isToday(day) && !isSelected(day),
                                'hover:bg-gray-100 dark:hover:bg-gray-700': day && !isSelected(day) && !isHoverRange(day),
                                'dark:text-gray-200': day && !isSelected(day)
                            }"
                            x-text="day"
                        ></button>
                    </template>
                </div>
                
                <div class="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-2">
                    <button type="button" @click="dateFrom = ''; dateTo = ''; open = false" class="px-3 py-1.5 text-xs text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">Effacer</button>
                    <button type="button" @click="if (dateFrom && !dateTo) dateTo = dateFrom; open = false; $el.closest('form').submit()" class="px-3 py-1.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-700">Rechercher</button>
                </div>
            </div>
        </div>
    </div>
</div>