(function onReady(fn) {
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
})(async () => {
  const isDev = location.hostname === 'localhost' || location.hostname === '127.0.0.1'  || location.hostname === 'novelar.local';
  const BASE = isDev
    ? 'http://localhost:5173'
    : 'https://ion.nacoria.fr';
    // : 'https://bookings.ion-club.net';
    // : 'https://ion-swagger.novelar.fr';

  // 1) Charger dynamiquement le bundle Web Components
  await import(`${BASE}/ion-club.js`);

  // 2) Cibler le déclencheur (ex : <div id="ion-club-loader" ...>)
  const me = document.getElementById('ion-club-loader');
  if (!me) return;

  // 3) Lire les data-attributes
  const lang = me.getAttribute('data-lang') || '';
  const fontQuery = me.getAttribute('data-font') || '';
  const disableFont = me.hasAttribute('data-disable-font');

  // 4) Google Fonts (si besoin)
  if (fontQuery && !disableFont) {
    const href = `https://fonts.googleapis.com/css?family=${fontQuery}&display=swap`;
    if (!document.querySelector(`link[href="${href}"]`)) {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = href;
      document.head.appendChild(link);
    }
  }
  // 4 bis) Ajouter font-face custom (ex. Helvetica LT Std)
  if (!document.getElementById('ion-club-font-face')) {
    const style = document.createElement('style');
    style.id = 'ion-club-font-face';
    style.textContent = `
    @font-face {
      font-family: "Helvetica LT Std";
      src: url('https://bookings.ion-club.net/fonts/HelveticaLTStd/HelveticaLTStd-UltraComp.eot');
      src: url('https://bookings.ion-club.net/fonts/HelveticaLTStd/HelveticaLTStd-UltraComp.eot?#iefix') format('embedded-opentype'),
           url('https://bookings.ion-club.net/fonts/HelveticaLTStd/HelveticaLTStd-UltraComp.woff2') format('woff2'),
           url('https://bookings.ion-club.net/fonts/HelveticaLTStd/HelveticaLTStd-UltraComp.woff') format('woff'),
           url('https://bookings.ion-club.net/fonts/HelveticaLTStd/HelveticaLTStd-UltraComp.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }`;
    document.head.appendChild(style);
  }

  // 5) Appliquer des variables CSS personnalisées
  const vars = {
    '--font-body': me.dataset.fontBody,
    '--font-secondary': me.dataset.fontSecondary,
    '--color-black': me.dataset.primaryColor,
    '--color-accent': me.dataset.accentColor,
  };

  const css = Object.entries(vars)
    .filter(([, val]) => !!val)
    .map(([k, v]) => `  ${k}: ${v};`)
    .join('\n');

  if (css) {
    const style = document.createElement('style');
    style.textContent = `
    ion-booking-header, ion-booking-footer, ion-booking-center {
    ${css}
    }`;
    document.head.appendChild(style);
  }

  // 6) Injecter le header si non présent
  if (customElements.get('ion-booking-header') && !document.querySelector('ion-booking-header')) {
    document.body.prepend(document.createElement('ion-booking-header'));
  }

  // 7) Injecter le footer si non présent
  if (customElements.get('ion-booking-footer') && !document.querySelector('ion-booking-footer')) {
    document.body.append(document.createElement('ion-booking-footer'));
  }


  window.__ionWebAppMode = true;
  window.__ionWebAppLang = lang;
  // Met à jour le store Svelte si déjà importé
  if (typeof window.__setIonAppMode === 'function') {
    window.__setIonAppMode(true);
  }
  if (typeof window.__setIonAppLang === 'function') {
    window.__setIonAppLang(lang);
  }
  /*
  // 8) Injecter le centre (ion-club ou ion-booking-center)
  if (!document.querySelector('ion-booking-center')) {
    const el = document.createElement('ion-booking-center');
    if (center) el.setAttribute('center', center);
    if (lang) el.setAttribute('lang', lang);
    me.after(el);
  }
  */
});