// ═══════════════════════════════════════════════════════════════════════════
// Bascule MOBILE / DESKTOP · commande jumelle de la bascule clair-sombre.
//
// Fichier a nous (absent des exports Claude Design), charge par les DEUX pages
// du prototype : index.html (l'app mobile dans son telephone) et desktop.html
// (l'espace de travail web). La page sur laquelle on se trouve EST l'etat du
// bouton : il n'y a rien a synchroniser, un clic navigue vers l'autre page.
//
// Deux habillages, pour que le bouton ait l'air natif des deux cotes :
//   variant="scene" · page mobile, jumeau exact de .theme-toggle (pilule
//                     sombre a curseur glissant, dans la barre du haut).
//   variant="wseg"  · page desktop, reprend .w-seg (le segmente FR/EN de la
//                     barre du haut) pour se fondre dans ses voisins.
// ═══════════════════════════════════════════════════════════════════════════

(function () {
  const PAGES = { mobile: 'index.html', desktop: 'desktop.html' };
  const LABELS = { mobile: 'Application mobile', desktop: 'Version web desktop' };

  // Le theme voyage avec la bascule : quitter le mobile en mode sombre ne doit
  // pas faire atterrir sur un desktop en clair.
  function urlFor(device, dark) {
    return PAGES[device] + '?theme=' + (dark ? 'dark' : 'light');
  }

  // Lu au demarrage par les deux pages. null = aucune consigne dans l'URL,
  // chaque page garde alors sa propre valeur par defaut.
  function themeFromUrl() {
    try {
      const t = new URLSearchParams(window.location.search).get('theme');
      return t === 'dark' ? true : t === 'light' ? false : null;
    } catch (e) {
      return null;
    }
  }

  const PhoneIcon = ({ s = 15 }) => (
    <svg width={s} height={s} viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <rect x="4.6" y="1.7" width="6.8" height="12.6" rx="1.9" stroke="currentColor" strokeWidth="1.35" />
      <path d="M7 12.3h2" stroke="currentColor" strokeWidth="1.35" strokeLinecap="round" />
    </svg>
  );

  const DesktopIcon = ({ s = 15 }) => (
    <svg width={s} height={s} viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <rect x="1.5" y="2.6" width="13" height="8.8" rx="1.7" stroke="currentColor" strokeWidth="1.35" />
      <path d="M6 14h4" stroke="currentColor" strokeWidth="1.35" strokeLinecap="round" />
    </svg>
  );

  function FPDeviceSwitch({ current, dark, variant = 'scene' }) {
    const go = (device) => {
      if (device !== current) window.location.href = urlFor(device, dark);
    };
    const devices = ['mobile', 'desktop'];
    const Icon = (d, s) => (d === 'mobile' ? <PhoneIcon s={s} /> : <DesktopIcon s={s} />);

    if (variant === 'wseg') {
      return (
        <div className="w-seg fp-dsw-seg" role="group" aria-label="Format d'affichage">
          {devices.map((d) => (
            <button key={d} type="button" className={d === current ? 'on' : ''}
                    aria-pressed={d === current} aria-label={LABELS[d]} title={LABELS[d]}
                    onClick={() => go(d)}>
              {Icon(d, 14)}
            </button>
          ))}
        </div>
      );
    }

    return (
      <div className="fp-dsw" role="group" aria-label="Format d'affichage">
        <span className={`fp-dsw-thumb ${current === 'desktop' ? 'right' : ''}`} />
        {devices.map((d) => (
          <button key={d} type="button" className={d === current ? 'on' : ''}
                  aria-pressed={d === current} aria-label={LABELS[d]} title={LABELS[d]}
                  onClick={() => go(d)}>
            {Icon(d)}
          </button>
        ))}
      </div>
    );
  }

  Object.assign(window, { FPDeviceSwitch, fpThemeFromUrl: themeFromUrl });
})();