// js/app.js
// Point d'entree principal - Routeur et Initialisation de l'application

import { isConfigured, saveConfig, initSupabase } from './supabase.js';
import { isLoggedIn, getCurrentUser, logout, renderLogin } from './auth.js';
import { renderAtelier } from './atelier.js';
import { renderMagasin } from './magasin.js';
import { renderProprietaire } from './proprietaire.js';

// Attendre que le SDK Supabase soit disponible (avec retry - Safari iOS fix)
function waitForSupabaseSDK(maxWaitMs) {
    return new Promise((resolve, reject) => {
        if (typeof window.supabase !== 'undefined') {
            return resolve();
        }
        const start = Date.now();
        const interval = setInterval(() => {
            if (typeof window.supabase !== 'undefined') {
                clearInterval(interval);
                return resolve();
            }
            if (Date.now() - start > maxWaitMs) {
                clearInterval(interval);
                // Try loading dynamically as fallback
                const script = document.createElement('script');
                script.src = 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2';
                script.onload = () => resolve();
                script.onerror = () => reject(new Error("Impossible de charger le SDK Supabase."));
                document.head.appendChild(script);
            }
        }, 50);
    });
}

// demarrage de l'application
async function boot() {
    const loadingScreen = document.getElementById('loading-screen');
    const setupModal = document.getElementById('setup-modal');
    const appContainer = document.getElementById('app');

    try {
        // Attendre Supabase SDK (max 8 secondes, retry toutes les 50ms - fix Safari)
        await waitForSupabaseSDK(8000);

        // Si la DB n'est pas configuree -> Afficher le modal de configuration
        if (!isConfigured()) {
            loadingScreen.classList.add('hidden');
            setupModal.classList.remove('hidden');
            setupModal.classList.add('flex');

            document.getElementById('setup-form').addEventListener('submit', (e) => {
                e.preventDefault();
                const url = document.getElementById('setup-url').value.trim();
                const key = document.getElementById('setup-key').value.trim();
                if (saveConfig(url, key)) {
                    setupModal.classList.add('hidden');
                    loadingScreen.classList.remove('hidden');
                    boot();
                } else {
                    alert("Veuillez renseigner une URL et une cle Supabase valides.");
                }
            });
            return;
        }

        // Initialiser le client Supabase
        const db = initSupabase();
        if (!db) {
            throw new Error("Impossible d'initialiser Supabase. Verifiez vos cles de connexion.");
        }

        // Masquer l'ecran de chargement immediatement (ne pas attendre la DB)
        loadingScreen.classList.add('hidden');

        // Verifier si un utilisateur est deja connecte
        if (!isLoggedIn()) {
            renderAppView(appContainer, null, db);
        } else {
            const user = getCurrentUser();
            renderAppView(appContainer, user, db);
        }

    } catch (error) {
        console.error("Erreur de demarrage :", error);
        if (loadingScreen) {
            loadingScreen.innerHTML = `
                <div class="text-center p-8 max-w-md">
                    <h2 class="text-xl font-bold text-slate-800 mb-2">Erreur de connexion</h2>
                    <p class="text-sm text-slate-500 mb-6">${error.message}</p>
                    <div class="space-y-3">
                        <button onclick="window.location.reload();"
                            class="block w-full py-2.5 bg-pastel-rosePrimary text-white font-bold text-sm rounded-xl hover:bg-pastel-roseDark transition-all">
                            Reessayer
                        </button>
                    </div>
                </div>
            `;
        }
    }
}

// Rendu de la vue en fonction de l'etat de l'utilisateur
function renderAppView(appContainer, user, db) {
    appContainer.innerHTML = '';
    appContainer.className = 'h-full flex flex-col md:flex-row overflow-hidden';

    if (!user) {
        renderLogin(appContainer, (loggedUser) => {
            renderAppView(appContainer, loggedUser, db);
        });
        return;
    }

    if (user.role === 'proprietaire') {
        renderProprietaire(appContainer, user, handleLogout);
    } else if (user.role === 'atelier') {
        renderAtelier(appContainer, user, handleLogout);
    } else if (user.role === 'caisse') {
        renderMagasin(appContainer, user, handleLogout);
    } else {
        appContainer.innerHTML = `
            <div class="flex-1 flex items-center justify-center bg-slate-50 p-8">
                <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-8 text-center max-w-md">
                    <h2 class="text-xl font-bold text-slate-800 mb-2">Role non reconnu</h2>
                    <p class="text-sm text-slate-500 mb-4">Ce compte ne dispose d'aucun acces valide. Contactez le proprietaire.</p>
                    <button class="py-2 px-4 bg-pastel-rosePrimary text-white font-bold text-sm rounded-xl hover:bg-pastel-roseDark transition-all">
                        Se deconnecter
                    </button>
                </div>
            </div>
        `;
        appContainer.querySelector('button').addEventListener('click', handleLogout);
    }
}

// Deconnexion
async function handleLogout() {
    await logout();
}

// Demarrer l'application des que le DOM est pret
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', boot);
} else {
    // DOM deja pret (cas Safari avec modules charges en avance)
    boot();
}