import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import frLocale from '@fullcalendar/core/locales/fr';

export default class PlaningLogistics extends HTMLElement {
    constructor() {
        super();
        this.calendar = null;
    }

    connectedCallback() {
        this.render();
        this.initCalendar();
    }

    render() {
        this.innerHTML = `
            <div class="p-4 md:p-8 bg-[#0f172a] min-h-screen font-sans text-slate-200">
                <div class="mx-auto space-y-6">
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                        <div class="bg-[#1e293b] p-5 rounded-2xl shadow-xl border border-slate-800 flex items-center gap-4">
                            <div class="p-3 bg-blue-600/20 rounded-xl text-blue-500">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
                            </div>
                            <div>
                                <p class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Réservations</p>
                                <p class="text-2xl font-black text-white" id="stat-departs">0</p>
                            </div>
                        </div>

                        <div class="bg-[#1e293b] p-5 rounded-2xl shadow-xl border border-slate-800 flex items-center gap-4">
                            <div class="p-3 bg-emerald-600/20 rounded-xl text-emerald-500">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            </div>
                            <div>
                                <p class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Contrats Signés</p>
                                <p class="text-2xl font-black text-white" id="stat-retours">0</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-[#1e293b] p-2 md:p-6 rounded-3xl shadow-2xl border border-slate-800 relative">
                        <div id="calendar-loading" class="absolute inset-0 bg-[#0f172a]/60 backdrop-blur-[2px] z-10 flex items-center justify-center hidden">
                            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
                        </div>
                        <div id="calendar-root"></div>
                    </div>
                </div>
            </div>

            <div id="calendar-modal" class="fixed inset-0 z-[100] hidden items-center justify-center p-4">
                <div class="absolute inset-0 bg-[#0f172a]/80 backdrop-blur-sm modal-overlay"></div>
                <div class="relative bg-[#1e293b] rounded-3xl shadow-2xl w-full max-w-lg overflow-hidden border border-slate-700">
                    <div class="p-6 md:p-8">
                        <div class="flex justify-between items-start mb-4">
                            <span id="modal-contract-number" class="px-3 py-1 bg-slate-900/50 text-blue-500 rounded-lg text-[10px] font-black uppercase tracking-widest border border-blue-500/30"></span>
                            <button class="close-modal text-slate-400 hover:text-white transition-colors">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                            </button>
                        </div>

                        <div class="flex flex-wrap gap-2 mb-6" id="modal-status-container"></div>

                        <div class="mb-6">
                            <h2 id="modal-title" class="text-xl font-extrabold text-white leading-tight mb-1"></h2>
                            <p id="modal-client" class="text-blue-500 font-bold text-lg"></p>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                            <a id="link-phone" href="#" class="flex items-center gap-3 p-3 bg-slate-900/50 rounded-xl hover:bg-slate-800 transition-colors group border border-slate-800">
                                <div class="text-blue-500 group-hover:scale-110 transition-transform"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg></div>
                                <span id="modal-phone" class="text-sm font-medium text-slate-300"></span>
                            </a>
                            <a id="link-email" href="#" class="flex items-center gap-3 p-3 bg-slate-900/50 rounded-xl hover:bg-slate-800 transition-colors group border border-slate-800">
                                <div class="text-blue-500 group-hover:scale-110 transition-transform"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg></div>
                                <span id="modal-email" class="text-sm font-medium text-slate-300 truncate"></span>
                            </a>
                        </div>

                        <div class="mb-6 p-4 bg-slate-900/50 rounded-2xl border border-slate-800">
                             <div class="flex items-start gap-3">
                                <div class="text-emerald-500 mt-0.5"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg></div>
                                <div>
                                    <span class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Lieu de l'événement</span>
                                    <span id="modal-adresse" class="text-sm text-slate-300 font-semibold leading-snug"></span>
                                </div>
                             </div>
                        </div>

                        <div class="grid grid-cols-2 gap-6 py-4 border-t border-slate-800">
                            <div>
                                <span class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] mb-1">Départ / Enlèvement</span>
                                <span id="modal-start" class="text-sm text-white font-bold"></span>
                            </div>
                            <div>
                                <span class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] mb-1">Retour prévu</span>
                                <span id="modal-end" class="text-sm text-white font-bold"></span>
                            </div>
                        </div>
                    </div>

                    <div class="p-6 bg-slate-900/50 flex gap-3">
                        <a id="modal-link-contrat" href="#" target="_blank" class="flex-1 bg-[#1e293b] border border-slate-700 text-slate-200 py-4 rounded-2xl font-bold text-sm hover:bg-slate-800 hover:border-blue-500/50 transition-all flex items-center justify-center gap-2 shadow-xl">
                             <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                             Voir Contrat
                        </a>
                    </div>
                </div>
            </div>

            <style>
                :host {
                    --fc-border-color: #334155;
                    --fc-button-bg-color: #1e293b;
                    --fc-button-border-color: #334155;
                    --fc-button-text-color: #94a3b8;
                    --fc-today-bg-color: rgba(37, 99, 235, 0.1);
                    --fc-page-bg-color: #0f172a;
                    --fc-list-event-hover-bg-color: #1e293b;
                }

                #calendar-root { min-height: 750px; color: #f1f5f9; }
                .fc-toolbar-title { font-weight: 900 !important; color: #ffffff; font-size: 1.25rem !important; text-transform: uppercase; letter-spacing: 0.05em; }
                .fc-col-header-cell { padding: 12px 0 !important; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.15em; color: #64748b; }

                .fc .fc-button-primary {
                    background: var(--fc-button-bg-color) !important;
                    color: var(--fc-button-text-color) !important;
                    border: 1px solid var(--fc-button-border-color) !important;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
                    border-radius: 12px !important;
                    font-weight: 800 !important;
                    text-transform: uppercase !important;
                    font-size: 0.75rem !important;
                    padding: 8px 16px !important;
                    transition: all 0.2s ease;
                }

                .fc .fc-button-primary:hover {
                    background: #334155 !important;
                    border-color: #475569 !important;
                    color: #ffffff !important;
                }

                .fc .fc-button-active {
                    background: #2563eb !important;
                    color: white !important;
                    border-color: #2563eb !important;
                    box-shadow: 0 0 15px rgba(37, 99, 235, 0.4) !important;
                }

                .fc-theme-standard td, .fc-theme-standard th { border-color: #334155 !important; }
                .fc-day-other { background: #0f172a; opacity: 0.5; }

                .fc-event {
                    border: none !important;
                    border-radius: 8px !important;
                    padding: 3px !important;
                    margin: 1px 2px !important;
                    transition: all 0.2s ease;
                    cursor: pointer;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
                }
                .fc-event:hover { transform: scale(1.02); filter: brightness(1.2); }
                .fc-event-main-frame { padding: 2px 4px; }
                .status-indicators { display: flex; gap: 4px; margin-top: 5px; }
                .status-dot { width: 14px; height: 14px; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
            </style>
        `;

        this.querySelector('.modal-overlay').addEventListener('click', () => this.hideModal());
        this.querySelector('.close-modal').addEventListener('click', () => this.hideModal());
    }

    initCalendar() {
        const calendarEl = this.querySelector('#calendar-root');
        const loader = this.querySelector('#calendar-loading');

        this.calendar = new Calendar(calendarEl, {
            plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin ],
            initialView: 'dayGridMonth',
            locale: frLocale,
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek'
            },
            events: (fetchInfo, successCallback, failureCallback) => {
                loader.classList.remove('hidden');
                const params = new URLSearchParams({ start: fetchInfo.startStr, end: fetchInfo.endStr });

                fetch(`/crm/reservation/data?${params.toString()}`)
                    .then(response => response.json())
                    .then(data => {
                        const formattedData = data.map(item => {
                            let bgColor = '#2563eb';
                            if (item.extendedProps.type === 'blocked') {
                                bgColor = '#ef4444';
                            } else if (item.extendedProps.isSigned) {
                                bgColor = '#059669';
                            }
                            return {
                                ...item,
                                backgroundColor: bgColor,
                                borderColor: bgColor
                            };
                        });
                        successCallback(formattedData);
                        this.updateStats(formattedData);
                        loader.classList.add('hidden');
                    })
                    .catch(error => {
                        loader.classList.add('hidden');
                        failureCallback(error);
                    });
            },
            eventContent: (arg) => {
                const props = arg.event.extendedProps;
                
                if (props.type === 'blocked') {
                     return {
                        html: `
                            <div class="fc-event-main-frame">
                                <div class="text-[10px] font-black uppercase tracking-tight leading-tight line-clamp-2 flex items-center gap-1 text-white">
                                    ⛔ ${arg.event.title.replace('BLOCAGE: ', '')}
                                </div>
                                <div class="text-[9px] text-white/80 italic truncate mt-0.5">${props.reason || 'Pas de raison'}</div>
                            </div>
                        `
                    };
                }

                const { caution, acompte, solde, isSigned } = props;
                return {
                    html: `
                        <div class="fc-event-main-frame">
                            <div class="text-[10px] font-black uppercase tracking-tight leading-tight line-clamp-1 flex items-center gap-1 text-white">
                                ${isSigned ? '✅' : '⏳'} ${arg.event.title}
                            </div>
                            <div class="status-indicators">
                                <div class="status-dot" style="background:${caution ? '#d97706' : '#1e293b'}; opacity:${caution ? 1 : 0.4}"><svg class="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20"><path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"></path><path d="M2 9h16v5a2 2 0 01-2 2H4a2 2 0 01-2-2V9z"></path></svg></div>
                                <div class="status-dot" style="background:${acompte ? '#2563eb' : '#1e293b'}; opacity:${acompte ? 1 : 0.4}"><svg class="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20"><path d="M4 4a2 2 0 002 2V6h10a2 2 0 00-2-2H4z"></path></svg></div>
                                <div class="status-dot" style="background:${solde ? '#059669' : '#1e293b'}; opacity:${solde ? 1 : 0.4}"><svg class="w-2 h-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M5 13l4 4L19 7"></path></svg></div>
                            </div>
                        </div>
                    `
                };
            },
            eventClick: (info) => this.showEventDetails(info.event)
        });
        this.calendar.render();
    }

    updateStats(events) {
        this.querySelector('#stat-departs').innerText = events.length;
        this.querySelector('#stat-retours').innerText = events.filter(e => e.extendedProps?.isSigned).length;
    }

    formatAddress(addr) {
        if (!addr || typeof addr !== 'object') return 'Adresse non renseignée';
        return [addr.address, addr.address1, addr.zipCode, addr.city].filter(p => p && p !== 'null').join(', ');
    }

    showEventDetails(event) {
        const modal = this.querySelector('#calendar-modal');
        const props = event.extendedProps;
        const modalStatus = this.querySelector('#modal-status-container');
        
        // Reset visibility
        this.querySelector('#link-phone').style.display = 'flex';
        this.querySelector('#link-email').style.display = 'flex';
        this.querySelector('#modal-link-contrat').parentElement.style.display = 'flex';
        this.querySelector('.bg-slate-900\\/50.rounded-2xl.border').style.display = 'block'; // Address container

        if (props.type === 'blocked') {
            this.querySelector('#modal-contract-number').innerText = 'INDISPONIBILITÉ';
            this.querySelector('#modal-title').innerText = props.productName;
            this.querySelector('#modal-client').innerText = props.reason || 'Aucune raison spécifiée';
            this.querySelector('#modal-email').innerText = '-';
            this.querySelector('#modal-phone').innerText = '-';
            this.querySelector('#modal-start').innerText = props.start;
            this.querySelector('#modal-end').innerText = props.end;
            
            // Hide irrelevant sections
            this.querySelector('#link-phone').style.display = 'none';
            this.querySelector('#link-email').style.display = 'none';
            this.querySelector('#modal-link-contrat').parentElement.style.display = 'none';
            this.querySelector('.bg-slate-900\\/50.rounded-2xl.border').style.display = 'none';
            modalStatus.innerHTML = '<span class="px-2.5 py-1 rounded-lg text-[9px] font-black uppercase tracking-widest bg-rose-500/10 text-rose-500 border border-rose-500/20">Blocage Matériel</span>';
            
            modal.classList.replace('hidden', 'flex');
            return;
        }

        this.querySelector('#modal-contract-number').innerText = `Contrat n°${props.contractNumber || '?'}`;
        this.querySelector('#modal-title').innerText = event.title;
        this.querySelector('#modal-client').innerText = props.client || 'Client inconnu';
        this.querySelector('#modal-email').innerText = props.clientEmail || 'Non renseigné';
        this.querySelector('#modal-phone').innerText = props.clientPhone || 'Non renseigné';
        this.querySelector('#modal-adresse').innerText = this.formatAddress(props.eventAdresse);
        this.querySelector('#modal-start').innerText = props.start;
        this.querySelector('#modal-end').innerText = props.end;
        this.querySelector('#link-phone').href = `tel:${props.clientPhone}`;
        this.querySelector('#link-email').href = `mailto:${props.clientEmail}`;
        this.querySelector('#modal-link-contrat').href = props.linkContrat || '#';

        const statusList = [
            { label: 'Signé', val: props.isSigned, color: 'emerald' },
            { label: 'Caution', val: props.caution, color: 'orange' },
            { label: 'Acompte', val: props.acompte, color: 'blue' },
            { label: 'Solde', val: props.solde, color: 'emerald' }
        ];

        modalStatus.innerHTML = statusList.map(s => `
            <span class="px-2.5 py-1 rounded-lg text-[9px] font-black uppercase tracking-widest flex items-center gap-1.5 ${s.val ? `bg-${s.color}-500/10 text-${s.color}-500 border border-${s.color}-500/20` : 'bg-slate-800 text-slate-600 border border-transparent'}">
                <div class="w-1.5 h-1.5 rounded-full ${s.val ? `bg-${s.color}-500 shadow-[0_0_5px_currentColor]` : 'bg-slate-600'}"></div>
                ${s.label}
            </span>
        `).join('');

        modal.classList.replace('hidden', 'flex');
    }

    hideModal() {
        this.querySelector('#calendar-modal').classList.replace('flex', 'hidden');
    }
}
