// ============================================
// SEN RDV SANTÉ+ — Fonctions JS partagées
// ============================================

const API = 'https://senrdv.sendigital.org/api';

// je récupère le token depuis le localStorage
function getToken() {
    return localStorage.getItem('token');
}

// je récupère l'utilisateur connecté
function getUser() {
    const u = localStorage.getItem('user');
    return u ? JSON.parse(u) : null;
}

// je vérifie si l'utilisateur est connecté — sinon je redirige
function requireAuth(roles = []) {
    const token = getToken();
    const user  = getUser();

    if (!token || !user) {
        window.location.href = '/web/index.php';
        return false;
    }

    if (roles.length > 0 && !roles.includes(user.role)) {
        window.location.href = '/web/index.php';
        return false;
    }

    return user;
}

// je fais un appel API avec le token automatiquement
async function api(endpoint, options = {}) {
    const url     = endpoint.startsWith('http') ? endpoint : `${API}${endpoint}`;
    const headers = {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${getToken()}`,
        ...options.headers
    };

    try {
        const res  = await fetch(url, { ...options, headers });
        const data = await res.json();
        return data;
    } catch (e) {
        console.error('Erreur API:', e);
        return { erreur: 'Erreur de connexion au serveur' };
    }
}

// je déconnecte l'utilisateur
function seDeconnecter() {
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    window.location.href = '/web/index.php';
}

// je formate une date en français
function formatDate(dateStr) {
    if (!dateStr) return '—';
    return new Date(dateStr).toLocaleDateString('fr-FR', {
        day: '2-digit', month: 'long', year: 'numeric'
    });
}

// je formate une heure HH:MM:SS en HH:MM
function formatHeure(heureStr) {
    if (!heureStr) return '—';
    return heureStr.slice(0, 5);
}

// je retourne la couleur et le label d'un statut RDV
function statutInfo(statut) {
    const statuts = {
        en_attente: { label: 'En attente',  bg: 'bg-amber-100',  text: 'text-amber-700',  dot: 'bg-amber-400' },
        confirme:   { label: 'Confirmé',    bg: 'bg-blue-100',   text: 'text-blue-700',   dot: 'bg-blue-500'  },
        paye:       { label: 'Payé',        bg: 'bg-green-100',  text: 'text-green-700',  dot: 'bg-green-500' },
        consomme:   { label: 'Terminé',     bg: 'bg-gray-100',   text: 'text-gray-600',   dot: 'bg-gray-400'  },
        annule:     { label: 'Annulé',      bg: 'bg-red-100',    text: 'text-red-700',    dot: 'bg-red-500'   },
        expire:     { label: 'Expiré',      bg: 'bg-gray-100',   text: 'text-gray-500',   dot: 'bg-gray-300'  },
    };
    return statuts[statut] || statuts.en_attente;
}

// je génère un badge HTML pour un statut
function statutBadge(statut) {
    const s = statutInfo(statut);
    return `<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold ${s.bg} ${s.text}">
        <span class="w-1.5 h-1.5 rounded-full ${s.dot}"></span>
        ${s.label}
    </span>`;
}

// je charge le profil complet de l'utilisateur connecté
async function chargerProfil() {
    const data = await api('/auth/profil.php');
    if (data.succes) return data.profil;
    return null;
}

// je génère le HTML du formulaire de mise à jour profil
function htmlFormulaireProfil(profil) {
    return `
    <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
        <h3 class="font-bold text-gray-900 mb-4">👤 Mon profil</h3>
        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-semibold text-gray-600 mb-1.5">Prénom</label>
                <input id="profil-prenom" type="text" value="${profil.prenom}"
                    class="w-full px-4 py-2.5 rounded-xl border-2 border-gray-100 bg-gray-50 text-sm focus:outline-none focus:border-blue-500" />
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-600 mb-1.5">Nom</label>
                <input id="profil-nom" type="text" value="${profil.nom}"
                    class="w-full px-4 py-2.5 rounded-xl border-2 border-gray-100 bg-gray-50 text-sm focus:outline-none focus:border-blue-500" />
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-600 mb-1.5">Téléphone</label>
                <input id="profil-telephone" type="tel" value="${profil.telephone}"
                    class="w-full px-4 py-2.5 rounded-xl border-2 border-gray-100 bg-gray-50 text-sm focus:outline-none focus:border-blue-500" />
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-600 mb-1.5">Email</label>
                <input id="profil-email" type="email" value="${profil.email || ''}"
                    class="w-full px-4 py-2.5 rounded-xl border-2 border-gray-100 bg-gray-50 text-sm focus:outline-none focus:border-blue-500" />
            </div>
        </div>

        ${profil.hopital_nom ? `
        <div class="mt-4 p-3 bg-blue-50 rounded-xl border border-blue-100">
            <p class="text-xs font-semibold text-blue-600 uppercase tracking-wide mb-1">Établissement</p>
            <p class="font-bold text-gray-900">🏥 ${profil.hopital_nom}</p>
            ${profil.service_nom ? `<p class="text-sm text-gray-500 mt-0.5">Service : ${profil.service_nom}</p>` : ''}
            ${profil.hopital_adresse ? `<p class="text-xs text-gray-400 mt-0.5">📍 ${profil.hopital_adresse}</p>` : ''}
        </div>` : ''}

        <div class="mt-4 border-t border-gray-100 pt-4">
            <p class="text-sm font-semibold text-gray-600 mb-3">🔐 Changer le mot de passe</p>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Ancien mot de passe</label>
                    <input id="profil-ancien-mdp" type="password" placeholder="••••••••"
                        class="w-full px-4 py-2.5 rounded-xl border-2 border-gray-100 bg-gray-50 text-sm focus:outline-none focus:border-blue-500" />
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Nouveau mot de passe</label>
                    <input id="profil-nouveau-mdp" type="password" placeholder="••••••••"
                        class="w-full px-4 py-2.5 rounded-xl border-2 border-gray-100 bg-gray-50 text-sm focus:outline-none focus:border-blue-500" />
                </div>
            </div>
        </div>

        <button onclick="sauvegarderProfil()" class="mt-4 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl text-sm transition-all">
            Sauvegarder les modifications →
        </button>
    </div>`;
}

// je sauvegarde les modifications du profil
async function sauvegarderProfil() {
    const payload = {
        nom:      document.getElementById('profil-nom')?.value.trim(),
        prenom:   document.getElementById('profil-prenom')?.value.trim(),
        email:    document.getElementById('profil-email')?.value.trim(),
        telephone: document.getElementById('profil-telephone')?.value.trim(),
    };

    const ancienMdp  = document.getElementById('profil-ancien-mdp')?.value;
    const nouveauMdp = document.getElementById('profil-nouveau-mdp')?.value;

    if (nouveauMdp) {
        payload.ancien_mot_de_passe  = ancienMdp;
        payload.nouveau_mot_de_passe = nouveauMdp;
    }

    const data = await api('/auth/profil.php', {
        method: 'PUT',
        body: JSON.stringify(payload)
    });

    if (data.succes) {
        toast('✅ Profil mis à jour avec succès');
        // je mets à jour le localStorage avec le nouveau nom
        const user = getUser();
        if (user) {
            user.nom    = payload.nom;
            user.prenom = payload.prenom;
            localStorage.setItem('user', JSON.stringify(user));
        }
    } else {
        toast(data.erreur || 'Erreur mise à jour', 'error');
    }
}
function toast(message, type = 'success') {
    const colors = {
        success: 'bg-green-500',
        error:   'bg-red-500',
        info:    'bg-blue-500',
        warning: 'bg-amber-500',
    };

    const el = document.createElement('div');
    el.className = `fixed top-4 right-4 z-50 px-5 py-3 rounded-xl text-white font-semibold shadow-xl
                    transition-all duration-300 ${colors[type] || colors.info}`;
    el.textContent = message;
    document.body.appendChild(el);

    setTimeout(() => {
        el.style.opacity = '0';
        setTimeout(() => el.remove(), 300);
    }, 3000);
}

// je montre un modal de confirmation
function confirmerAction(message, onConfirm) {
    const modal = document.getElementById('modal-confirm');
    const msg   = document.getElementById('modal-message');
    const btnOk = document.getElementById('modal-ok');

    if (!modal) return;

    msg.textContent = message;
    modal.classList.remove('hidden');

    btnOk.onclick = () => {
        modal.classList.add('hidden');
        onConfirm();
    };

    document.getElementById('modal-cancel').onclick = () => {
        modal.classList.add('hidden');
    };
}