// Écrans légaux in-app — Confidentialité et Conditions.
//
// ── POURQUOI IN-APP ET PLUS SAFARI ───────────────────────────────────────────
// Les 4 liens (2 dans Réglages, 2 dans le paywall) ouvraient emeo.pages.dev via
// window.open(). Sortir vers le navigateur pour lire ses propres CGU est une
// rupture de contexte, et sous WebView ça dépend d'un réseau disponible — un
// reviewer hors ligne ne voyait rien. Le texte est désormais embarqué.
//
// ── UNE SEULE SOURCE JURIDIQUE ───────────────────────────────────────────────
// Le contenu vient de `LEGAL_DOCS` (src/data/legal.js), extrait VERBATIM des pages
// publiques. Même texte, deux rendus. Ne jamais éditer l'un sans l'autre.
//
// Suit le pattern des autres sous-pages de Réglages (LanguageSheet, PrefSheet…) :
// classe `settings-subpage`, sortie animée de 270 ms, retour libellé « Réglages ».

function LegalSheet({ th, accent, dir, t, lang, settings, doc, onClose }) {
  const [leaving, setLeaving] = React.useState(false);
  // `settings` est optionnel : le paywall ne le reçoit pas en prop. Sans lui,
  // `haptic()` retombe sur le réglage global HAPTICS_ON, ce qui est le bon défaut.
  const close = () => { haptic(8, settings && settings.haptics); setLeaving(true); setTimeout(onClose, 270); };

  const D = (typeof LEGAL_DOCS === 'object' && LEGAL_DOCS && LEGAL_DOCS[doc]) || null;

  // Le contenu n'existe qu'en fr/en/ar. Toute autre langue de l'app retombe sur
  // l'anglais : mieux vaut un texte lisible qu'un écran vide sur un document légal.
  const L = D && D.title[lang] ? lang : 'en';

  // L'arabe est RTL indépendamment de la direction globale : si l'app est en
  // français et que le document s'affiche en arabe (cas impossible aujourd'hui mais
  // que la logique ci-dessus autorise), le texte doit rester lisible.
  const textDir = L === 'ar' ? 'rtl' : 'ltr';
  const align = textDir === 'rtl' ? 'right' : 'left';

  return (
    <div className={'settings-subpage' + (leaving ? ' settings-subpage-out' : '')} style={{ background: th.bg }} dir={dir}>
      <div className="scroll-area" style={{ height: '100%', padding: '58px 20px 124px' }}>
        <button onClick={close} data-haptic="light" style={{
          display: 'flex', alignItems: 'center', gap: 4, background: 'none', border: 'none',
          color: accent[0], cursor: 'pointer', fontFamily: 'inherit', fontSize: 16, padding: 0, marginBottom: 16,
        }}>
          <span style={{ display: 'flex', transform: dir === 'rtl' ? 'rotate(0deg)' : 'rotate(180deg)' }}><IconChevron size={20} /></span>
          {t('settings_title')}
        </button>

        {!D ? (
          // Ne devrait jamais arriver (legal.js est chargé avant cet écran), mais un
          // document légal introuvable doit se voir, pas produire une page vide.
          <div style={{ fontSize: 15, color: th.dim, lineHeight: 1.6 }}>
            {t(doc === 'privacy' ? 'privacy_policy' : 'terms_of_use')}
          </div>
        ) : (
          <div dir={textDir} style={{ textAlign: align }}>
            <div style={{ fontSize: 30, fontWeight: 300, letterSpacing: .3, color: th.text, lineHeight: 1.25 }}>
              {D.title[L]}
            </div>
            <div style={{ fontSize: 12.5, color: th.faint, margin: '10px 2px 24px', fontWeight: 300 }}>
              {D.updated[L]}
            </div>

            {D.sections.map((s, i) => (
              <div key={i} style={{ marginBottom: 22 }}>
                <div style={{ fontSize: 16.5, fontWeight: 600, color: th.text, marginBottom: 7, lineHeight: 1.35 }}>
                  {s.t[L]}
                </div>
                {/* `white-space: pre-line` : les sources contiennent de vrais sauts de
                    ligne (listes, adresses) qui portent du sens juridique. */}
                <div style={{ fontSize: 14.5, color: th.dim, lineHeight: 1.65, fontWeight: 300, whiteSpace: 'pre-line' }}>
                  {s.b[L]}
                </div>
              </div>
            ))}

            <div style={{ borderTop: '1px solid ' + th.border, margin: '26px 0 0' }} />
            <div style={{ fontSize: 12.5, color: th.faint, marginTop: 16, fontWeight: 300 }}>
              {D.foot[L]}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { LegalSheet });