// Le Compte en page de réglages de bureau : les rubriques à gauche, la rubrique
// choisie à droite.
//
// L'écran du Compte n'est ni remplacé, ni recopié, ni modifié. Il tient les cinq
// rubriques, leurs chargeurs, leurs éditeurs, leurs refus et la déconnexion, et
// il est monté tel quel dans le volet de droite.
//
// Cette couche ne lui parle pas par des propriétés : elle enveloppe une de ses
// pièces, la ligne d'accueil, comme `patient-view-modes` enveloppe déjà le tri
// et les vues du répertoire. Cette ligne lui donne le geste qui ouvre une
// rubrique, et la liste de gauche rejoue ce même geste : il n'existe qu'un
// chemin d'ouverture, celui du téléphone.
//
// Aucun état d'application ici, aucun appel au client d'API, aucune règle métier.
// Sous le seuil, rien n'est monté : la coque rend l'écran tel quel.

const VASCO_ACCOUNT_DESKTOP_SCREEN = AccountScreen;

// L'écran nomme sa rubrique ouverte par le titre qu'il affiche : on relit ce
// titre dans le catalogue du téléphone plutôt que d'exiger qu'il nous prévienne.
const VASCO_ACCOUNT_DESKTOP_SECTION_BY_TITLE = Object.freeze(
  Object.fromEntries(Object.entries(ACCOUNT_SECTION_TITLES).map(([id, title]) => [title, id])),
);

// Le geste d'ouverture de l'accueil, retenu tant qu'une rubrique le cache. C'est
// une fermeture sur les `setState` de l'écran, stable par construction : aucune
// valeur de rendu n'y est capturée.
const VASCO_ACCOUNT_DESKTOP_GESTURE = { open: null };

// Les deux pièces enveloppées. Elles rendent l'original tel quel, des deux côtés
// du seuil : la ligne d'accueil ne fait que donner son geste, elle ne change ni
// ce qu'elle montre ni ce qu'elle fait.
const VASCO_ACCOUNT_DESKTOP_HOME_ENTRY = AccountHomeEntry;
AccountHomeEntry = function VascoAccountHomeEntryForLayout(props) {
  React.useEffect(() => { VASCO_ACCOUNT_DESKTOP_GESTURE.open = props.onOpen; });
  return <VASCO_ACCOUNT_DESKTOP_HOME_ENTRY {...props} />;
};
window.AccountHomeEntry = AccountHomeEntry;

function VascoAccountDesktopSections({ selectedId, onSelect }) {
  const tokens = window.VascoUI.tokens;
  const { InteractiveRow } = window.VascoUI;
  return <nav aria-label="Rubriques du compte" style={{
    flex: 1, minHeight: 0, padding: tokens.space.sm,
  }}>
    {/* Les rubriques, leur ordre et leurs mots viennent du catalogue du
        téléphone. Une seconde liste écrite ici finirait par en différer. */}
    {ACCOUNT_HOME_ENTRIES.map((entry) => {
      const selected = entry.id === selectedId;
      return <InteractiveRow key={entry.id} selected={selected}
        data-vasco-account-section={entry.id}
        title={entry.label} subtitle={entry.sub}
        onClick={() => onSelect(entry.id)}
        style={{
          minHeight: tokens.layout.panel.rowHeight, marginBottom: tokens.space.xs,
          alignItems: 'flex-start', paddingTop: tokens.space.sm,
          borderColor: selected ? tokens.color.accent : 'transparent',
          background: selected ? tokens.color.accentTint : 'transparent',
        }} />;
    })}
  </nav>;
}

function VascoAccountDesktopPage(props) {
  const tokens = window.VascoUI.tokens;
  const { PageHeader, SplitView } = window.VascoUI;
  // La rubrique montree en surbrillance. C'est de l'affichage : la rubrique
  // ouverte reste celle que l'ecran tient, et le seul chemin pour en changer est
  // le geste de l'accueil, que la ligne d'accueil nous a donne.
  const [section, setSection] = React.useState(null);
  const openSection = React.useCallback((id) => {
    if (!VASCO_ACCOUNT_DESKTOP_GESTURE.open) return;
    VASCO_ACCOUNT_DESKTOP_GESTURE.open(id);
    setSection(id);
  }, []);

  // Un volet de droite qui montre l'accueil redirait la liste de gauche : la
  // première rubrique s'ouvre d'emblée, par la porte de l'écran.
  React.useEffect(() => {
    if (section || !VASCO_ACCOUNT_DESKTOP_GESTURE.open) return;
    openSection(ACCOUNT_HOME_ENTRIES[0].id);
  });

  // L'identité vient du même endroit que celle de l'écran : le répertoire de
  // session tenu par le client d'API, dont l'écran part lui aussi. La page ne
  // recharge rien et n'en tient pas une seconde copie ; elle compose la même
  // phrase, avec la même table de civilités que l'accueil du téléphone.
  const profile = window.VASCO_RUNTIME?.account?.profile || null;
  const clinic = props.clinicContext || null;
  const subtitle = profile ? [
    [AC_SALUTATIONS[profile.salutation], profile.given_name, profile.family_name]
      .filter(Boolean).join(' '),
    profile.specialty || null,
    clinic?.department ? clinic.organization?.name || null : null,
    clinic?.department
      ? [clinic.clinic?.name, clinic.department.name].filter(Boolean).join(' · ') : null,
  ].filter(Boolean).join(' · ') : null;

  return <div data-vasco-account-desktop="true" style={{
    position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
    background: tokens.color.canvas, color: tokens.color.ink, fontFamily: tokens.type.body,
  }}>
    {/* La déconnexion n'est pas redite ici : elle vit dans la rubrique Sécurité,
        où l'écran la tient déjà, avec sa garde d'occupation et son avis à la
        coque. Un second bouton en aurait été une copie. */}
    <PageHeader title="Compte" subtitle={subtitle} />

    <SplitView listLabel="Rubriques du compte" detailLabel="Réglages"
      list={<VascoAccountDesktopSections selectedId={section} onSelect={openSection} />}
      detail={<VASCO_ACCOUNT_DESKTOP_SCREEN {...props} />} />
  </div>;
}

window.VascoAccountDesktop = VascoAccountDesktopPage;

// Au bureau, le Compte est une page de réglages en deux volets : les rubriques à
// gauche, la rubrique choisie à droite. C'est le même écran, les mêmes
// chargeurs, la même déconnexion ; seule la navigation entre rubriques change de
// forme. La coque téléphone n'a rien à en savoir : on enveloppe le symbole, dans
// sa dernière version, comme les autres couches produit le font déjà.
AccountScreen = function VascoAccountScreenForLayout(props) {
  if (window.VascoUI.useLayout() === 'desktop') return <VascoAccountDesktopPage {...props} />;
  return <VASCO_ACCOUNT_DESKTOP_SCREEN {...props} />;
};
window.AccountScreen = AccountScreen;