// Statistiques : l'écran personnel du praticien.
//
// Il servait six compteurs, deux graphiques de quatre-vingts pixels et deux
// promesses. Trois de ses chiffres étaient faux (des périodes de durées
// inégales comparées, un « +600 % » sur un passage de 1 à 7, un total de courbe
// qui contredisait le chiffre du haut).
//
// Il porte maintenant deux chiffres justes, un calendrier où chaque journée
// s'ouvre, le temps passé au bloc et en consultation comparé à la période
// précédente, et le relevé des actes opérés.
//
// Une règle tient tout l'écran : ce qu'une case affiche, le clic doit le
// montrer. Le calendrier compte donc les rendez-vous de l'agenda, jamais un
// total venu d'ailleurs.

const SA_VT = window.VT || {};
const SA_INK = SA_VT.ink || '#0a0a0a';
const SA_SUB = SA_VT.sub || '#6b7280';
const SA_SURFACE = SA_VT.surface || '#fff';
const SA_BG = SA_VT.paper || '#f6f5f1';
const SA_HAIR = SA_VT.hair || 'rgba(10,10,10,0.08)';
const SA_ACCENT = SA_VT.medBlue || '#3d6b8f';
const SA_SUCCESS = SA_VT.success || '#059669';
const SA_DANGER = SA_VT.danger || '#b91c1c';

// Deux poids d'un seul bleu plutôt que deux couleurs : le bloc est plein, la
// consultation est en voile. Le rouge reste réservé au danger, et une palette
// de plus n'aurait rien appris à l'œil.
const SA_BLOC = SA_ACCENT;
const SA_CONSULT = 'rgba(61,107,143,0.24)';
const SA_OTHER = 'rgba(10,10,10,0.13)';
const SA_EMPTY = 'rgba(10,10,10,0.05)';
const SA_DASH = 'rgba(10,10,10,0.16)';

const SA_KIND_FILL = { bloc: SA_BLOC, consultation: SA_CONSULT, autre: SA_OTHER };
const SA_KIND_INK = { bloc: '#fff', consultation: SA_INK, autre: SA_INK };

const SA_PERIODS = [['week', 'Semaine'], ['month', 'Mois'], ['year', 'Année']];

function SaCard({ card, previousLabel }) {
  return (
    <div style={{
      background: SA_SURFACE, borderRadius: 16, padding: '15px 15px',
      border: `1px solid ${SA_HAIR}`, minWidth: 0,
    }}>
      <div style={{ fontSize: 30, fontWeight: 800, letterSpacing: '-0.8px', color: SA_INK }}>
        {card.value}
      </div>
      <div style={{ fontSize: 12.5, fontWeight: 600, color: SA_INK, marginTop: 2, lineHeight: 1.25 }}>
        {card.label}
      </div>
      {card.rhythm && <div style={{ fontSize: 11, fontWeight: 500, color: SA_SUB,
        marginTop: 5, lineHeight: 1.3 }}>{card.rhythm}</div>}
      {/* Une baisse d'activité n'est pas un danger : elle ne porte donc pas le
          rouge, réservé à ce qui menace le patient. */}
      {card.trend && <div style={{ display: 'flex', alignItems: 'center', gap: 6,
        marginTop: 8, flexWrap: 'wrap' }}>
        <SaDelta trend={card.trend} />
        <span style={{ fontSize: 10.5, color: SA_SUB, lineHeight: 1.25 }}>
          vs {previousLabel}
        </span>
      </div>}
    </div>
  );
}

function SaSection({ title, note, children, extra }) {
  return (
    <div style={{
      background: SA_SURFACE, borderRadius: 16, padding: 15,
      border: `1px solid ${SA_HAIR}`, marginBottom: 16,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 10 }}>
        <div style={{ fontSize: 13.5, fontWeight: 700 }}>{title}</div>
        {extra}
      </div>
      {note && <div style={{ fontSize: 11.5, fontWeight: 500, color: SA_SUB,
        marginTop: 3, marginBottom: 11, lineHeight: 1.35 }}>{note}</div>}
      {!note && <div style={{ height: 11 }} />}
      {children}
    </div>
  );
}

// Une flèche de défilement. La période entière recule ou avance : les chiffres,
// le calendrier, le temps passé et les actes suivent ensemble.
function SaStep({ label, onClick, back = false, disabled = false }) {
  const { IconButton } = window.VascoUI;
  return (
    <IconButton label={label} onClick={onClick} disabled={disabled} size={26}
      style={{ background: SA_SURFACE, border: `1px solid ${SA_HAIR}`, flexShrink: 0 }}>
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={SA_INK}
        strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d={back ? 'M15 6l-6 6 6 6' : 'M9 6l6 6-6 6'} />
      </svg>
    </IconButton>
  );
}

// Le pourcentage était écrit en dix pixels de gris clair, tout au bout de la
// ligne : personne ne le voyait. Il porte maintenant une pastille, comme les
// états ailleurs dans l'application.
function SaDelta({ trend, size = 'normal' }) {
  if (!trend) return null;
  const up = trend.direction === 'up';
  const flat = trend.direction === 'flat';
  return (
    <span className="mono" style={{
      display: 'inline-block', flexShrink: 0,
      padding: size === 'big' ? '3px 9px' : '2px 7px',
      borderRadius: 999,
      fontSize: size === 'big' ? 12 : 11,
      fontWeight: 700,
      letterSpacing: '0.2px',
      whiteSpace: 'nowrap',
      background: flat ? 'rgba(10,10,10,0.06)'
        : up ? 'rgba(5,150,105,0.12)' : 'rgba(10,10,10,0.07)',
      color: flat ? SA_SUB : up ? SA_SUCCESS : SA_INK,
    }}>
      {flat ? 'stable' : `${trend.percent > 0 ? '+' : ''}${trend.percent} %`}
    </span>
  );
}

// Un carré par jour. Sa COULEUR dit ce qui s'y est passé, son nombre dit
// combien de rendez-vous. Le nombre seul ne distinguait pas une journée de
// consultation d'une journée de bloc, et l'échelle d'intensité qui le colorait
// se lisait comme un maximum sans qu'on sache maximum de quoi.
function SaCalendar({ calendar, selected, onPick, typed }) {
  const { IconButton } = window.VascoUI;
  const contract = window.VascoStatsActivite;
  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 5 }}>
        {contract.WEEKDAY_INITIALS.map((initial, index) => (
          <div key={index} className="mono" style={{
            fontSize: 9.5, fontWeight: 600, color: SA_SUB, textAlign: 'center', paddingBottom: 2,
          }}>{initial}</div>
        ))}
        {calendar.weeks.map((week, weekIndex) => week.map((day, dayIndex) => {
          if (!day) return <div key={`${weekIndex}-${dayIndex}`} />;
          const picked = selected === day.key;
          const fill = day.value === 0 ? SA_EMPTY
            : day.kind ? SA_KIND_FILL[day.kind] : SA_CONSULT;
          const ink = day.value === 0 ? 'transparent'
            : day.kind ? SA_KIND_INK[day.kind] : SA_INK;
          const what = day.value === 0 ? 'rien'
            : day.kind === 'bloc' ? `${day.value} au bloc ou en consultation`
              : `${day.value} rendez-vous`;
          // Ce que l'agenda ne peut pas rendre se dit sur la case, pas seulement
          // au bas de la section : c'est cette journée-là qui est incomplète, et
          // son détail le répète en toutes lettres.
          const hidden = day.offAgenda > 0
            ? day.offAgenda === 1 ? ', et 1 hors agenda' : `, et ${day.offAgenda} hors agenda`
            : '';
          return (
            <IconButton key={day.key} label={`${contract.longDayLabel(day.key)} : ${what}${hidden}`}
              pressed={picked} onClick={() => onPick(picked ? '' : day.key)}
              style={{
                position: 'relative',
                width: '100%', height: 'auto', aspectRatio: '1', borderRadius: 7,
                background: day.future && day.value === 0 ? 'transparent' : fill,
                // Le jour à venir garde sa place et son trait pointillé, même
                // quand il porte déjà un rendez-vous : ce qui est prévu ne doit
                // pas se lire comme ce qui est fait.
                border: day.future ? `1px dashed ${SA_DASH}` : 'none',
                opacity: day.future && day.value > 0 ? 0.5 : 1,
                color: ink,
                fontFamily: "'JetBrains Mono', ui-monospace, monospace",
                fontSize: 11.5, fontWeight: 700, fontVariantNumeric: 'tabular-nums',
                boxShadow: picked ? `0 0 0 2px ${SA_SURFACE}, 0 0 0 3.5px ${SA_INK}`
                  : day.today ? `0 0 0 2px ${SA_SURFACE}, 0 0 0 3.5px ${SA_ACCENT}` : 'none',
              }}>
              {day.value > 0 ? day.value : day.day}
              {/* Le coin marqué dit « il manque quelque chose ici » sans
                  prétendre le compter à la place du nombre, qui reste celui de
                  l'agenda. Le libellé accessible porte le combien. */}
              {day.offAgenda > 0 && <span aria-hidden="true" style={{
                position: 'absolute', top: 2, right: 2, width: 5, height: 5, borderRadius: 999,
                background: day.kind === 'bloc' ? SA_SURFACE : SA_ACCENT,
              }} />}
            </IconButton>
          );
        }))}
      </div>
      {/* La légende nomme les deux couleurs. L'ancienne graduait une intensité
          sans jamais dire de quoi, et « 3 » se lisait comme un plafond. */}
      {typed && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 12 }}>
          {contract.DAY_KINDS.map(([key, label]) => (
            <div key={key} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 12, height: 12, borderRadius: 3.5, background: SA_KIND_FILL[key],
                flexShrink: 0 }} />
              <span style={{ fontSize: 11, fontWeight: 600, color: SA_SUB }}>{label}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// Ce que la journée a contenu, en entier. C'est la réponse à « le 15, j'ai fait
// quoi ? », que ni un chiffre ni une couleur ne donnent.
function SaDayDetail({ detail, loading, offAgenda }) {
  const contract = window.VascoStatsActivite;
  return (
    <div style={{ marginTop: 13, paddingTop: 13, borderTop: `1px solid ${SA_HAIR}` }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 10 }}>
        <div style={{ fontSize: 12.5, fontWeight: 700 }}>{contract.longDayLabel(detail.dayKey)}</div>
        {detail.reports > 0 && <div className="mono" style={{ fontSize: 9.5, fontWeight: 600, color: SA_SUB }}>
          {detail.reports === 1 ? '1 compte rendu écrit' : `${detail.reports} comptes rendus écrits`}
        </div>}
      </div>

      {loading && <div style={{ fontSize: 12, color: SA_SUB, marginTop: 8 }}>Lecture de l'agenda…</div>}

      {!loading && detail.entries.length === 0 && offAgenda === 0 && (
        <div style={{ fontSize: 12, color: SA_SUB, marginTop: 8 }}>Rien ce jour-là.</div>
      )}

      {/* Ce qui manque est nommé avec sa cause, là où le praticien le cherche :
          sur la journée qu'il vient d'ouvrir. */}
      {!loading && offAgenda > 0 && (
        <div style={{ fontSize: 11.5, color: SA_SUB, marginTop: 8, lineHeight: 1.45 }}>
          {offAgenda === 1
            ? 'Un rendez-vous de cette journée n’est pas dans votre agenda'
            : `${offAgenda} rendez-vous de cette journée ne sont pas dans votre agenda`}
          {' : sans service, ou dans un service où votre session n’est pas ouverte.'}
        </div>
      )}

      {!loading && detail.entries.map((entry) => (
        <div key={entry.id} style={{ display: 'flex', gap: 10, padding: '8px 0',
          borderTop: `1px solid ${SA_HAIR}`, alignItems: 'flex-start' }}>
          <div className="mono" style={{ fontSize: 11, fontWeight: 700, color: SA_INK,
            width: 78, flexShrink: 0, paddingTop: 1 }}>{entry.start} à {entry.end}</div>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: SA_INK }}>
              {entry.patient}
              {/* Le rouge dit l'urgence, comme dans l'agenda. Rien d'autre ici
                  ne le porte. */}
              {entry.urgent && <span className="mono" style={{ marginLeft: 7, fontSize: 9,
                fontWeight: 700, color: SA_DANGER, letterSpacing: '0.4px' }}>URGENT</span>}
            </div>
            <div style={{ fontSize: 11.5, color: SA_SUB, marginTop: 1, lineHeight: 1.35 }}>
              {entry.typeLabel}{entry.reason ? ` · ${entry.reason}` : ''}
            </div>
            {entry.place && <div style={{ fontSize: 11, color: SA_SUB, marginTop: 1 }}>{entry.place}</div>}
          </div>
        </div>
      ))}
    </div>
  );
}

// Douze mois ne tiennent pas dans une grille de semaines : l'année garde des
// barres, une par mois.
function SaYearBars({ calendar }) {
  const max = Math.max(calendar.max, 1);
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 5, alignItems: 'end' }}>
      {calendar.bars.map((bar) => (
        <div key={bar.key} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
          <div className="mono" style={{
            fontSize: 9.5, fontWeight: 700, color: bar.value > 0 ? SA_INK : 'transparent',
          }}>{bar.value}</div>
          <div style={{
            width: '100%', height: Math.max(3, Math.round((bar.value / max) * 74)), borderRadius: 4,
            background: bar.value > 0 ? SA_ACCENT : SA_HAIR,
            opacity: bar.future ? 0.35 : 1,
          }} />
          <div className="mono" style={{ fontSize: 9, fontWeight: 600, color: SA_SUB }}>{bar.label}</div>
        </div>
      ))}
    </div>
  );
}

// Le temps passé, pas le nombre de rendez-vous : une consultation de vingt
// minutes et un pontage de trois heures ne pèsent pas pareil dans une semaine.
function SaWorkload({ workload, periodLabel, previousLabel }) {
  const contract = window.VascoStatsActivite;
  const max = Math.max(workload.max, 1);
  return (
    <div>
      {workload.rows.map((row) => (
        <div key={row.key} style={{ padding: '9px 0' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <span style={{ fontSize: 13, fontWeight: 700, color: SA_INK }}>{row.label}</span>
            <span className="mono" style={{ fontSize: 12, fontWeight: 700, color: SA_INK }}>
              {contract.hoursLabel(row.minutes)}
            </span>
            <span style={{ fontSize: 11, color: SA_SUB }}>
              {row.count === 1 ? '1 rendez-vous' : `${row.count} rendez-vous`}
            </span>
            <span style={{ marginLeft: 'auto' }}><SaDelta trend={row.trend} /></span>
          </div>
          <div style={{ height: 9, borderRadius: 5, background: 'rgba(10,10,10,0.05)' }}>
            <div style={{
              width: `${Math.max(2, Math.round((row.minutes / max) * 100))}%`, height: '100%',
              borderRadius: 5, background: SA_KIND_FILL[row.key] || SA_OTHER,
            }} />
          </div>
          {/* Le chiffre d'avant est écrit sous la barre : un pourcentage tout
              seul oblige à deviner ce qu'il compare. */}
          <div style={{ fontSize: 11, color: SA_SUB, marginTop: 5 }}>
            {row.previous > 0
              ? `${contract.hoursLabel(row.previous)} ${previousLabel}, sur la même durée`
              : `rien ${previousLabel} sur la même durée`}
          </div>
        </div>
      ))}
      <div style={{ fontSize: 11, color: SA_SUB, marginTop: 10, paddingTop: 10,
        borderTop: `1px solid ${SA_HAIR}`, lineHeight: 1.45 }}>
        {/* « La même durée » n'est pas un détail : le 17 du mois, on compare
            dix-sept jours à dix-sept jours, pas à un mois entier. Chaque ligne
            porte déjà son chiffre d'avant ; il ne reste ici qu'à expliquer un
            pourcentage absent. */}
        {workload.trend
          ? `Chaque comparaison porte sur la même durée : ${periodLabel} face au même nombre de jours ${previousLabel}.`
          : workload.previousTotal > 0
            ? `Sur la même durée, ${previousLabel} ne comptait que ${contract.hoursLabel(workload.previousTotal)} : trop peu pour comparer.`
            : `Rien ${previousLabel} sur la même durée : pas de comparaison possible.`}
      </div>
    </div>
  );
}

// Le relevé des actes : « quel type d'intervention, et combien de fois ».
function SaProcedures({ tally }) {
  return (
    <div>
      {tally.map((row) => (
        <div key={row.label} style={{ display: 'flex', alignItems: 'baseline', gap: 10,
          padding: '6px 0', borderTop: `1px solid ${SA_HAIR}` }}>
          <div style={{ flex: 1, minWidth: 0, fontSize: 12.5, fontWeight: 500, color: SA_INK,
            lineHeight: 1.35 }}>{row.label}</div>
          <div className="mono" style={{ fontSize: 11.5, fontWeight: 700, color: SA_INK,
            flexShrink: 0 }}>× {row.value}</div>
        </div>
      ))}
    </div>
  );
}

function StatsActiviteScreen({ accent, runtime, onBack }) {
  const { IconButton, ChoiceChip, InlineAction } = window.VascoUI;
  const contract = window.VascoStatsActivite;
  const [period, setPeriod] = React.useState('month');
  const [anchor, setAnchor] = React.useState('');
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [agenda, setAgenda] = React.useState(null);
  const [selected, setSelected] = React.useState('');

  React.useEffect(() => {
    let cancelled = false;
    setResponse(null); setError(null); setAgenda(null); setSelected('');
    runtime.activity(period, anchor)
      .then((value) => {
        if (cancelled) return undefined;
        setResponse(value);
        // Le détail et le temps passé viennent de l'Agenda, qui ne se lit que
        // sur une plage courte. Un refus est une réponse : l'écran garde ses
        // totaux et se prive du détail, il n'invente rien.
        const current = value?.current_range;
        const previous = value?.previous_range;
        const read = runtime.activityAppointments;
        if (typeof read !== 'function' || !current?.from || !current?.to) {
          setAgenda({ items: [], previous: [], covered: false });
          return undefined;
        }
        return Promise.all([
          read(current.from, current.to),
          previous?.from && previous?.to
            ? read(previous.from, previous.to).catch(() => ({ items: [] }))
            : Promise.resolve({ items: [] }),
        ]).then(([now, before]) => {
          if (!cancelled) setAgenda({ items: now.items, previous: before.items, covered: now.covered });
        }).catch(() => {
          if (!cancelled) setAgenda({ items: [], previous: [], covered: false });
        });
      })
      .catch((failure) => {
        if (!cancelled) setError(failure?.message || 'Activité indisponible');
      });
    return () => { cancelled = true; };
  }, [runtime, period, anchor]);

  const view = response ? contract.activityView(response, {
    appointments: agenda?.items,
    previousAppointments: agenda?.previous,
    covered: agenda?.covered === true,
  }) : null;
  const detail = view && selected
    ? contract.dayDetail(selected, agenda?.items, response?.series?.clinical_reports,
      response?.time_zone)
    : null;
  // Le compte du serveur pour la journée ouverte : ce que l'agenda n'a pas pu
  // rendre. Il vient de la même case que le praticien a touchée.
  const selectedOffAgenda = view && selected
    ? (view.calendar.days || []).find((day) => day.key === selected)?.offAgenda || 0
    : 0;

  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 100, background: SA_BG, color: SA_INK,
      display: 'flex', flexDirection: 'column',
      fontFamily: "'Inter Tight', -apple-system, system-ui, sans-serif",
    }}>
      <div style={{ padding: '62px 16px 8px', display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', gap: 8 }}>
        <IconButton label="Retour" onClick={onBack} size={34}
          style={{ background: SA_SURFACE, border: `1px solid ${SA_HAIR}`, flexShrink: 0 }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={SA_INK}
            strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M15 6l-6 6 6 6" /></svg>
        </IconButton>
        {/* Les mêmes pastilles que partout ailleurs dans l'application, plutôt
            qu'un troisième sélecteur de période dessiné à la main. */}
        <div style={{ display: 'flex', gap: 6 }}>
          {SA_PERIODS.map(([value, label]) => (
            <ChoiceChip key={value} selected={period === value}
              onClick={() => { setPeriod(value); setAnchor(''); }}>{label}</ChoiceChip>
          ))}
        </div>
      </div>

      <div className="vasco-scroll" style={{ flex: 1, overflowY: 'auto', padding: '10px 16px 24px' }}>
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.6px' }}>Mon activité</div>
          {/* Dire où l'on en est dans la période était le seul moyen honnête de
              garder une comparaison : sans ça, onze jours se lisaient comme un
              mois. Les deux flèches déplacent TOUT l'écran, pas seulement le
              calendrier : c'est pour ça qu'elles sont ici et pas dans une carte. */}
          {view && <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 5 }}>
            <SaStep label={`Avant : ${view.previousLabel}`} back
              onClick={() => setAnchor(view.steps.previous)} />
            <div style={{ fontSize: 12.5, fontWeight: 500, color: SA_SUB, flex: 1, minWidth: 0,
              lineHeight: 1.35 }}>
              {view.elapsed.complete
                ? `${view.periodLabel} · ${view.activeDays} jours travaillés`
                : `${view.periodLabel} · ${view.elapsed.done} jours sur ${view.elapsed.total}, dont ${view.activeDays} travaillés`}
            </div>
            {/* On ne va pas voir l'activité d'un mois qui n'a pas eu lieu. */}
            <SaStep label="Après" onClick={() => setAnchor(view.steps.next)}
              disabled={view.current} />
            {!view.current && <InlineAction onClick={() => setAnchor('')}>
              Aujourd'hui
            </InlineAction>}
          </div>}
        </div>

        {error && (
          <div role="alert" style={{
            background: 'rgba(185,28,28,0.06)', borderRadius: 14, padding: '12px 14px',
            marginBottom: 12, fontSize: 12.5, fontWeight: 600, color: SA_DANGER,
          }}>{error}</div>
        )}

        {!view && !error && (
          <div style={{ display: 'flex', justifyContent: 'center', padding: '40px 0' }}>
            <VascoSpinner size={22} color={accent} />
          </div>
        )}

        {view && view.empty && (
          <div style={{
            background: SA_SURFACE, borderRadius: 16, border: `1px solid ${SA_HAIR}`,
            padding: '28px 18px', textAlign: 'center',
          }}>
            {/* « Rien à compter 2025 » se lisait de travers : une période
                passée porte un nom, pas un complément de temps. */}
            <div style={{ fontSize: 15, fontWeight: 700 }}>
              {view.current ? `Rien à compter ${view.periodLabel}` : 'Rien à compter sur cette période'}
            </div>
            <div style={{ fontSize: 12.5, fontWeight: 500, color: SA_SUB, marginTop: 7, lineHeight: 1.5 }}>
              Les chiffres apparaissent au fur et à mesure que vous consultez et que vous opérez.
            </div>
          </div>
        )}

        {view && !view.empty && <>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 9, marginBottom: 16 }}>
            {view.cards.map((card) => <SaCard key={card.id} card={card}
              previousLabel={view.previousLabel} />)}
          </div>

          <SaSection title={view.calendar.title}
            note={view.calendar.mode === 'days'
              ? 'Touchez une journée pour voir ce que vous y avez fait.'
              : 'Patients vus chaque mois.'}>
            {view.calendar.mode === 'days'
              ? <SaCalendar calendar={view.calendar} selected={selected} onPick={setSelected}
                typed={view.covered} />
              : <SaYearBars calendar={view.calendar} />}
            {detail && <SaDayDetail detail={detail} loading={agenda === null}
              offAgenda={selectedOffAgenda} />}
            {/* Ce qui manque se dit une fois, en nommant la cause. Un rendez-vous
                sans service n'entre pas dans l'agenda : ce n'est ni une erreur
                de saisie, ni un choix de cet écran. */}
            {view.calendar.mode === 'days' && !view.missing.complete
              && view.missing.offAgenda > 0 && (
              <div style={{ fontSize: 11.5, color: SA_SUB, marginTop: 12, paddingTop: 11,
                borderTop: `1px solid ${SA_HAIR}`, lineHeight: 1.45 }}>
                {view.missing.offAgenda} rendez-vous de la période ne sont pas dans votre
                agenda : ils ne portent aucun service, ou un service où votre session n'est
                pas ouverte. Les journées concernées sont marquées.
              </div>
            )}
          </SaSection>

          {view.workload && view.workload.total > 0 && (
            <SaSection title="Le temps passé"
              note="Combien d'heures au bloc, combien en consultation."
              extra={<div style={{ display: 'flex', alignItems: 'baseline', gap: 7 }}>
                <span className="mono" style={{ fontSize: 11, fontWeight: 700, color: SA_INK }}>
                  {contract.hoursLabel(view.workload.total)}
                </span>
                <SaDelta trend={view.workload.trend} size="big" />
              </div>}>
              <SaWorkload workload={view.workload} periodLabel={view.periodLabel}
                previousLabel={view.previousLabel} />
            </SaSection>
          )}

          <SaSection title="Ce que vous avez opéré"
            note={view.tally.length ? "D'après le motif écrit sur chaque intervention." : null}>
            {view.tally.length > 0
              ? <SaProcedures tally={view.tally} />
              : <div style={{ fontSize: 12.5, color: SA_SUB, lineHeight: 1.45 }}>
                {view.covered ? 'Aucune intervention sur cette période.'
                  : 'Le relevé des actes se lit sur une semaine ou un mois.'}
              </div>}
          </SaSection>
        </>}
      </div>
    </div>
  );
}

// Remplace l'écran figé de la V5 : il ne s'y ajoute pas.
StatsScreen = StatsActiviteScreen;
window.StatsScreen = StatsActiviteScreen;