// La page Rappels du Compte, à côté des Statistiques.
//
// Le panneau de la cloche montre les tout premiers rappels et rien d'autre :
// il répond à « qu'est-ce qui m'attend là ? ». Cette page-ci répond à une autre
// question – « où j'en suis de tout ce que j'ai à faire ? » – et elle demande
// donc ce que le panneau n'a jamais eu : la liste entière, regroupée par
// échéance, filtrable, et travaillable sur place.
//
// Une seule couleur parle, et elle parle de l'ÉCHÉANCE. Le rouge est gardé pour
// le retard, seul cas où quelque chose est réellement en défaut. La priorité,
// qui est l'autre axe, se dit en toutes lettres : deux systèmes de couleur sur
// le même écran se battraient et le praticien ne saurait plus lequel lire.
//
// Ce que le serveur sait faire et ce qu'il ne sait pas faire est dit sans
// détour : il ne filtre que « à faire » contre « fait ». Tout le reste est
// trié par cette page sur ce qu'elle a chargé – c'est pourquoi elle charge
// tout, et pourquoi elle l'avoue quand elle n'y arrive pas.

(function vascoAccountRemindersScreen(global) {
  const contract = global.VascoAccountRemindersContract;
  if (!contract) throw new Error('Le contrat de la page Rappels doit être chargé avant l’écran.');

  const STATUS_FILTERS = Object.freeze([
    ['open', 'À faire'],
    ['completed', 'Faites'],
  ]);

  // La teinte de chaque groupe, prise au contrat visuel. Aucune valeur écrite
  // en dur : le jour où la palette bouge, cette page bouge avec elle.
  function groupAppearance(tone, tokens) {
    const tones = {
      danger: { bar: tokens.color.danger, text: tokens.color.danger, tint: tokens.color.dangerTint },
      warning: { bar: tokens.color.warning, text: tokens.color.warning, tint: tokens.color.warningTint },
      accent: { bar: tokens.color.accent, text: tokens.color.accent, tint: tokens.color.accentTint },
      neutral: { bar: tokens.color.borderStrong, text: tokens.color.ink, tint: tokens.color.surfaceAlt },
      muted: { bar: tokens.color.border, text: tokens.color.secondary, tint: tokens.color.surfaceAlt },
    };
    return tones[tone] || tones.neutral;
  }

  function FilterChips({ label, choices, value, onChange, allLabel }) {
    const { ChoiceChip, tokens } = global.VascoUI;
    const chipStyle = (selected) => ({
      padding: '7px 12px', borderRadius: tokens.radius.pill,
      background: selected ? tokens.color.ink : tokens.color.surface,
      color: selected ? tokens.color.canvas : tokens.color.ink,
      border: `1px solid ${selected ? tokens.color.ink : tokens.color.border}`,
      fontSize: 12, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer',
    });
    return <div style={{ marginBottom: 10 }}>
      <div className="mono" style={{ ...tokens.type.caption, color: tokens.color.secondary,
        textTransform: 'uppercase', marginBottom: 6 }}>{label}</div>
      <div role="group" aria-label={label} style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        <ChoiceChip ariaLabel={allLabel} selected={value === null}
          onClick={() => onChange(null)} style={chipStyle(value === null)}>{allLabel}</ChoiceChip>
        {choices.map(({ id, label: text, count }) => (
          <ChoiceChip key={id} ariaLabel={`${text}, ${count}`} selected={value === id}
            onClick={() => onChange(value === id ? null : id)} style={chipStyle(value === id)}>
            {text}
            <span className="mono" style={{ marginLeft: 6, opacity: 0.7, fontSize: 11 }}>{count}</span>
          </ChoiceChip>
        ))}
      </div>
    </div>;
  }

  // La barre de priorité, sur la tranche gauche de la ligne : rouge, orange,
  // gris. Les teintes viennent du contrat visuel, jamais écrites en dur.
  //
  // Elles sont aussi celles du retard et d'aujourd'hui, en titre de section :
  // c'est assumé, et c'est la position qui les sépare. À gauche d'une ligne,
  // la couleur dit toujours la priorité ; en tête d'une section, toujours
  // l'échéance.
  function priorityBar(priority, tokens) {
    const scale = {
      danger: tokens.color.danger,
      warning: tokens.color.warning,
      // Le gris clair du contrat, pas le gris de texte : une priorité basse se
      // remarque sans se disputer l'attention avec les deux autres.
      muted: tokens.color.muted,
    };
    return scale[contract.PRIORITY_BARS[priority]] || scale.muted;
  }

  // Une ligne de rappel. Elle ne cache aucune de ses commandes derrière un
  // geste : le praticien voit ce qu'il peut faire, et ce qu'il ne peut pas
  // faire est éteint avec sa raison en infobulle, jamais absent.
  function ReminderRow({ reminder, busy, onComplete, onReopen, onArchive, onOpenAppointment }) {
    const { IconButton, InlineAction, tokens, icons } = global.VascoUI;
    const capability = (name) => reminder.capabilities?.[name] || { enabled: false, reason_code: null };
    const complete = capability(reminder.done ? 'reopen' : 'complete');
    const archive = capability('archive');
    const priorityLabel = contract.PRIORITY_LABELS[reminder.priority] || null;
    return <div title={priorityLabel || undefined} style={{
      display: 'flex', alignItems: 'flex-start', gap: 10, padding: '11px 12px',
      background: tokens.color.surface, border: `1px solid ${tokens.color.border}`,
      borderRadius: tokens.radius.md,
      // La barre vit dans la bordure gauche : elle borde la ligne sans lui
      // voler de place, et se lit du coin de l'œil en balayant la liste.
      borderLeft: `4px solid ${priorityBar(reminder.priority, tokens)}`,
    }}>
      <IconButton label={reminder.done ? 'Rouvrir ce rappel' : 'Marquer ce rappel comme fait'}
        variant="ghost" disabled={busy || !complete.enabled}
        onClick={() => (reminder.done ? onReopen(reminder) : onComplete(reminder))}>
        <span aria-hidden="true" style={{
          width: 18, height: 18, borderRadius: 6, display: 'flex',
          alignItems: 'center', justifyContent: 'center',
          border: `1.5px solid ${reminder.done ? tokens.color.success : tokens.color.borderStrong}`,
          background: reminder.done ? tokens.color.successTint : 'transparent',
          color: tokens.color.success, fontSize: 12, fontWeight: 700,
        }}>{reminder.done ? '✓' : ''}</span>
      </IconButton>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ ...tokens.type.row, color: tokens.color.ink, lineHeight: 1.4,
          textDecoration: reminder.done ? 'line-through' : 'none',
          opacity: reminder.done ? 0.62 : 1 }}>{reminder.text}</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, marginTop: 4 }}>
          {reminder.date && <span className="mono" style={{ ...tokens.type.caption,
            color: tokens.color.secondary }}>{reminder.date}</span>}
          {reminder.patient && <span style={{ ...tokens.type.caption, color: tokens.color.secondary }}>
            {reminder.patient}{reminder.patientArchived ? ' · dossier rangé' : ''}
          </span>}
          {/* La priorité se voit sur la barre de gauche. Elle reste écrite ici
              pour qui ne lit pas les couleurs : une barre seule ne dit rien à
              un lecteur d'écran, ni à un œil qui ne distingue pas ces gris. */}
          {priorityLabel && <span style={{ ...tokens.type.caption, color: tokens.color.secondary }}>
            {priorityLabel}
          </span>}
        </div>
        {/* Le rendez-vous visé, quand le rappel en désigne un : « le matériel de
            jeudi » se lit devant le rendez-vous de jeudi. C'est le même geste et
            le même transport que dans le panneau de la cloche ; la coque écoute
            et change d'écran. Sans transport, pas de bouton mort. */}
        {reminder.appointmentId && onOpenAppointment && <InlineAction disabled={busy}
          ariaLabel={`Ouvrir le rendez-vous de ${reminder.text}`}
          onClick={() => onOpenAppointment(reminder)}
          style={{ marginTop: 2, minHeight: 26, justifyContent: 'flex-start' }}>
          Ouvrir le rendez-vous
        </InlineAction>}
      </div>
      <IconButton label="Archiver ce rappel" variant="ghost"
        disabled={busy || !archive.enabled} onClick={() => onArchive(reminder)}>
        <icons.Close />
      </IconButton>
    </div>;
  }

  // ── Poser un rappel depuis la page ──────────────────────────────────────
  //
  // La même question que le panneau de la cloche, posée dans la feuille du
  // design system plutôt que dans un formulaire déplié sous un bouton.
  //
  // Un formulaire, pas une feuille : la feuille est `FormSheet`, et elle vient
  // du socle. Le nom le dit, pour qu'on ne cherche pas ici une primitive.
  //
  // L'échéance se choisit dans le calendrier de l'app – la même primitive que
  // les écrans de rappel du tableau de bord –, jamais dans celui du navigateur.
  // Il s'ouvre par-dessus l'écran au lieu de pousser le formulaire vers le bas.
  //
  // Les pastilles de priorité portent les couleurs de la page : rouge, orange,
  // gris clair. Ce sont celles qu'on retrouvera sur la tranche du rappel une
  // fois posé – on choisit la couleur qu'on verra.
  function NewReminderForm({ open, onClose, onCreate, busy, error, todayKey, defaultDue,
    patientOptions }) {
    const { FormSheet, Button, ChoiceChip, DayPicker, SearchSelect, TextField, tokens }
      = global.VascoUI;
    const [text, setText] = React.useState('');
    const [due, setDue] = React.useState(defaultDue);
    const [priority, setPriority] = React.useState('medium');
    // Le dossier visé, retenu avec son libellé : la recherche repart de zéro à
    // chaque frappe, et le nom retenu doit survivre à une liste qui se vide.
    const [patient, setPatient] = React.useState(null);
    const [query, setQuery] = React.useState('');
    const [found, setFound] = React.useState({ items: [], loading: false, failure: null });
    const armed = String(text).trim() !== '';

    // La feuille reste montée pour jouer son animation de sortie : elle ne se
    // vide donc plus en disparaîtrant. C'est l'ouverture qui la remet à neuf,
    // et non la fermeture, sans quoi le formulaire se viderait sous les yeux du
    // praticien pendant que la feuille descend.
    React.useEffect(() => {
      if (!open) return;
      setText(''); setDue(defaultDue); setPriority('medium');
      setPatient(null); setQuery('');
      setFound({ items: [], loading: false, failure: null });
    }, [open]);

    // La recherche est celle du serveur, et elle ne part qu'à partir de deux
    // caractères. Une réponse qui arrive après une frappe plus récente est
    // jetée : sans cela, la liste clignoterait entre deux états périmés.
    React.useEffect(() => {
      if (typeof patientOptions !== 'function' || !contract.patientSearchArmed(query)) {
        setFound({ items: [], loading: false, failure: null });
        return undefined;
      }
      let live = true;
      setFound((current) => ({ ...current, loading: true, failure: null }));
      const timer = window.setTimeout(() => {
        patientOptions(query)
          .then((items) => { if (live) setFound({ items, loading: false, failure: null }); })
          .catch((searchError) => {
            if (live) {
              setFound({
                items: [], loading: false,
                failure: searchError?.message || 'Recherche indisponible',
              });
            }
          });
      }, 220);
      return () => { live = false; window.clearTimeout(timer); };
    }, [query, patientOptions]);
    const chip = (selected) => ({
      padding: '7px 12px', borderRadius: tokens.radius.pill,
      background: selected ? tokens.color.ink : tokens.color.surface,
      color: selected ? tokens.color.canvas : tokens.color.ink,
      border: `1px solid ${selected ? tokens.color.ink : tokens.color.border}`,
      fontSize: 12, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer',
    });
    // Une pastille de priorité porte sa couleur : teintée et bordée quand elle
    // est retenue, un simple point quand elle ne l'est pas.
    const priorityChip = (id, selected) => {
      const teinte = priorityBar(id, tokens);
      return {
        display: 'inline-flex', alignItems: 'center', gap: 7,
        padding: '7px 12px', borderRadius: tokens.radius.pill,
        background: selected ? `${teinte}1A` : tokens.color.surface,
        color: selected ? teinte : tokens.color.ink,
        border: `1px solid ${selected ? teinte : tokens.color.border}`,
        fontSize: 12, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer',
      };
    };
    const caption = { ...tokens.type.caption, color: tokens.color.secondary,
      textTransform: 'uppercase', display: 'block', marginBottom: 6 };
    return <FormSheet open={open} title="Nouveau rappel" onClose={onClose} busy={busy} footer={
      <div style={{ display: 'flex', gap: 8 }}>
        <Button onClick={onClose} disabled={busy}>Annuler</Button>
        <Button grow variant="solid" busy={busy} busyLabel="Enregistrement…"
          disabled={!armed || busy} onClick={() => onCreate({
            text, dueAtLocal: due, priority, patientId: patient ? patient.id : null,
          })}>
          Poser le rappel
        </Button>
      </div>}>
      <label className="mono" style={caption} htmlFor="vasco-new-reminder-text">Rappel</label>
      <TextField id="vasco-new-reminder-text" aria-label="Texte du rappel" multiline rows={3}
        value={text} onChange={setText} maxLength={contract.NEW_REMINDER_MAX_LENGTH}
        placeholder="Ex : appeler M. Martin pour son INR" style={{ marginBottom: 14 }} />

      <span className="mono" style={caption}>Échéance</span>
      <DayPicker id="vasco-new-reminder-due" aria-label="Échéance du rappel"
        value={due} onChange={setDue} withTime todayKey={todayKey}
        placeholder="Choisir une échéance" />
      {/* Un rappel peut n'avoir aucune échéance – « ranger les consentements »
          n'a pas de date. La retirer est un geste, pas un état caché. */}
      <div style={{ display: 'flex', gap: 6, marginTop: 8, marginBottom: 14 }}>
        <ChoiceChip ariaLabel="Sans échéance" selected={!due}
          onClick={() => setDue(due ? null : defaultDue)}
          style={chip(!due)}>Sans échéance</ChoiceChip>
      </div>

      <span className="mono" style={caption}>Priorité</span>
      <div role="group" aria-label="Priorité du rappel"
        style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {contract.PRIORITIES.map((id) => (
          <ChoiceChip key={id} ariaLabel={contract.PRIORITY_LABELS[id]} selected={priority === id}
            onClick={() => setPriority(id)} style={priorityChip(id, priority === id)}>
            <span aria-hidden="true" style={{
              width: 8, height: 8, borderRadius: 999, background: priorityBar(id, tokens),
            }} />
            {contract.PRIORITY_LABELS[id].replace('Priorité ', '')}
          </ChoiceChip>
        ))}
      </div>

      <span className="mono" style={{ ...caption, marginTop: 14 }}>Patient</span>
      {typeof patientOptions === 'function' ? <>
        <SearchSelect id="vasco-new-reminder-patient" aria-label="Patient concerné"
          value={patient ? patient.id : ''} currentLabel={patient ? patient.label : null}
          placeholder="Sans patient" searchPlaceholder="Nom, prénom ou IPP"
          query={query} onQueryChange={setQuery}
          // Le serveur a déjà filtré : refiltrer sa réponse ferait disparaître
          // les résultats qu'il a trouvés par tolérance aux fautes.
          filterOptions={false}
          options={found.items} loading={found.loading} error={found.failure}
          emptyLabel={contract.patientSearchArmed(query)
            ? 'Aucun dossier ne correspond'
            : `Tapez au moins ${contract.PATIENT_SEARCH_MIN_CHARS} caractères`}
          getOptionValue={(option) => option.id}
          getOptionLabel={(option) => contract.patientOptionLabel(option)}
          getOptionMeta={(option) => contract.patientOptionMeta(option)}
          onChange={(id) => {
            const chosen = found.items.find((option) => option.id === id);
            setPatient(chosen
              ? { id: chosen.id, label: contract.patientOptionLabel(chosen) } : null);
          }} />
        {/* Se détacher d'un dossier est un geste, pas un état caché. */}
        {patient && <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
          <ChoiceChip ariaLabel="Sans patient" selected={false}
            onClick={() => { setPatient(null); setQuery(''); }}
            style={chip(false)}>Retirer le patient</ChoiceChip>
        </div>}
      </> : <div style={{ ...tokens.type.caption, color: tokens.color.secondary,
        lineHeight: 1.45 }}>
        La recherche de dossiers est indisponible : ce rappel ne visera personne.
      </div>}

      {error && <div role="alert" style={{ ...tokens.type.caption, color: tokens.color.danger,
        marginTop: 10, lineHeight: 1.45 }}>{error}</div>}
    </FormSheet>;
  }

  function VascoAccountRemindersScreen({ runtime, onBack, now = null }) {
    const { tokens, ScreenHeader, StatusNotice, Button, ChoiceChip, IconButton } = global.VascoUI;
    const [status, setStatus] = React.useState('open');
    const [filters, setFilters] = React.useState(contract.DEFAULT_FILTERS);
    const [state, setState] = React.useState({ kind: 'loading' });
    const [busy, setBusy] = React.useState(false);
    const [failure, setFailure] = React.useState(null);
    const [creating, setCreating] = React.useState(false);
    const [createError, setCreateError] = React.useState(null);
    // L'instant de référence est figé au chargement : sans cela, une liste
    // relue une minute plus tard pourrait faire basculer un rappel de
    // « aujourd'hui » à « en retard » sous les yeux du praticien.
    const reference = React.useMemo(
      () => (now ? new Date(now) : new Date()), [now, state.kind === 'ready' ? state.at : null],
    );
    const timeZone = global.VASCO_RUNTIME?.dashboard?.time_zone || 'Europe/Paris';

    const load = React.useCallback(async () => {
      setState({ kind: 'loading' });
      setFailure(null);
      try {
        const page = await runtime.listAll(status);
        setState({ kind: 'ready', items: page.items, complete: page.complete, at: Date.now() });
      } catch (error) {
        setState({ kind: 'failed', message: error?.message || 'Rappels indisponibles' });
      }
    }, [runtime, status]);

    React.useEffect(() => { void load(); }, [load]);

    // Une commande qui échoue ne fait pas disparaître la liste : elle se dit,
    // et ce qui est à l'écran reste vrai jusqu'à la relecture.
    const run = async (action, reminder, label) => {
      setBusy(true);
      setFailure(null);
      try {
        await action(reminder);
        await load();
      } catch (error) {
        setFailure(`${label} : ${error?.message || 'le serveur a refusé'}`);
      } finally {
        setBusy(false);
      }
    };

    // Ouvrir le rendez-vous d'un rappel n'est pas une commande du serveur : c'est
    // un changement d'écran, que la coque seule sait faire. La page le demande
    // par le transport déjà publié par le panneau de la cloche.
    const appointments = global.VascoOpenAppointment || null;
    const openAppointment = appointments
      ? (reminder) => { appointments.request(reminder.appointmentId); }
      : null;

    const create = async ({ text, dueAtLocal, priority, patientId }) => {
      const draft = contract.newReminderDraft({ text, dueAtLocal, priority, patientId });
      if (!draft) return;
      setBusy(true);
      setCreateError(null);
      try {
        await runtime.create(draft);
        setCreating(false);
        await load();
      } catch (error) {
        setCreateError(error?.message || 'Le serveur a refusé ce rappel');
      } finally {
        setBusy(false);
      }
    };

    const page = React.useMemo(() => contract.composePage({
      reminders: state.kind === 'ready' ? state.items : [],
      filters, now: reference, timeZone,
      complete: state.kind === 'ready' ? state.complete : true,
    }), [state, filters, reference, timeZone]);

    const groupChoices = contract.GROUPS.map((group) => ({
      id: group.id, label: group.label, count: page.groupCounts[group.id],
    }));
    const notice = contract.truncationNotice(page);

    const statusChip = (selected) => ({
      flex: 1, minHeight: 34, padding: '7px 10px', borderRadius: tokens.radius.md,
      border: 'none', background: selected ? tokens.color.surface : 'transparent',
      color: selected ? tokens.color.ink : tokens.color.secondary,
      fontFamily: 'inherit', fontSize: 12.5, fontWeight: 600, cursor: 'pointer',
    });

    return <main data-vasco-screen="account-reminders" aria-label="Mes rappels" style={{
      position: 'absolute', inset: 0, background: tokens.color.canvas, color: tokens.color.ink,
      fontFamily: tokens.type.body, display: 'flex', flexDirection: 'column',
    }}>
      <ScreenHeader title="Mes rappels" onBack={onBack} backLabel="Retour au Compte"
        right={<IconButton label="Poser un rappel" onClick={() => {
          setCreateError(null); setCreating(true);
        }}>
          <svg aria-hidden="true" width="17" height="17" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 5v14M5 12h14" />
          </svg>
        </IconButton>} />
      <div className="vasco-scroll" style={{ flex: 1, overflowY: 'auto', padding: '4px 16px 32px' }}>
        <div role="group" aria-label="État des rappels" style={{
          display: 'flex', gap: 4, padding: 3, marginBottom: 12,
          background: tokens.color.neutralTint, borderRadius: tokens.radius.lg,
        }}>
          {STATUS_FILTERS.map(([id, label]) => (
            <ChoiceChip key={id} ariaLabel={label} selected={status === id}
              onClick={() => setStatus(id)} style={statusChip(status === id)}>{label}</ChoiceChip>
          ))}
        </div>

        <FilterChips label="Échéance" allLabel="Toutes" choices={groupChoices}
          value={page.filters.group}
          onChange={(group) => setFilters((current) => ({ ...current, group }))} />
        {notice && <StatusNotice tone="info" compact title="Liste partielle" message={notice}
          style={{ marginBottom: 12 }} />}
        {failure && <StatusNotice tone="danger" compact title="Commande refusée" message={failure}
          style={{ marginBottom: 12 }} />}

        {state.kind === 'loading' && <div style={{ ...tokens.type.supporting,
          color: tokens.color.secondary, padding: '18px 2px' }}>Lecture des rappels…</div>}

        {state.kind === 'failed' && <div style={{ padding: '8px 0' }}>
          <StatusNotice tone="danger" title="Rappels indisponibles" message={state.message} />
          <div style={{ marginTop: 10 }}><Button onClick={() => void load()}>Réessayer</Button></div>
        </div>}

        {state.kind === 'ready' && page.emptiness === 'none' && <div style={{
          ...tokens.type.supporting, color: tokens.color.secondary, padding: '18px 2px', lineHeight: 1.5,
        }}>
          {status === 'open' ? 'Rien à faire pour le moment.' : 'Aucun rappel terminé.'}
        </div>}

        {state.kind === 'ready' && page.emptiness === 'filtered' && <div style={{
          ...tokens.type.supporting, color: tokens.color.secondary, padding: '18px 2px', lineHeight: 1.5,
        }}>
          Aucun rappel ne correspond à ces filtres. {page.loaded} rappel
          {page.loaded > 1 ? 's sont chargés' : ' est chargé'}.
        </div>}

        {state.kind === 'ready' && page.sections.map((section) => {
          const appearance = groupAppearance(section.tone, tokens);
          return <section key={section.id} aria-label={section.label} style={{ marginBottom: 18 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <span aria-hidden="true" style={{
                width: 3, height: 15, borderRadius: 2, background: appearance.bar,
              }} />
              <span className="mono" style={{ ...tokens.type.caption, color: appearance.text,
                textTransform: 'uppercase' }}>{section.label}</span>
              <span className="mono" style={{ ...tokens.type.caption, color: appearance.text,
                background: appearance.tint, borderRadius: tokens.radius.pill, padding: '1px 7px' }}>
                {section.items.length}
              </span>
            </div>
            <div style={{ display: 'grid', gap: 7 }}>
              {section.items.map((reminder) => (
                <ReminderRow key={reminder.id} reminder={reminder} busy={busy}
                  onComplete={(item) => void run(runtime.complete, item, 'Rappel non coché')}
                  onReopen={(item) => void run(runtime.reopen, item, 'Rappel non rouvert')}
                  onArchive={(item) => void run(runtime.archive, item, 'Rappel non archivé')}
                  onOpenAppointment={openAppointment} />
              ))}
            </div>
          </section>;
        })}
      </div>
      {/* La feuille reste montée et reçoit son état : la retirer au moment de
          fermer supprimerait son animation de sortie. */}
      <NewReminderForm open={creating} busy={busy} error={createError}
        todayKey={contract.dayKey(reference, timeZone)}
        defaultDue={contract.defaultNewReminderDue(reference, timeZone)}
        patientOptions={typeof runtime?.patientOptions === 'function'
          ? runtime.patientOptions : null}
        onClose={() => { setCreating(false); setCreateError(null); }}
        onCreate={(draft) => void create(draft)} />
    </main>;
  }

  global.VascoAccountRemindersScreen = VascoAccountRemindersScreen;
})(window);