// Le suivi post-opératoire, composé au lieu d’être saisi.
//
// L’onglet montrait une chronologie que personne ne pouvait remplir : aucune
// route du serveur ne crée d’événement post-opératoire, et il n’y avait donc
// rien à lire hors des lignes semées par la démonstration. Les constantes en
// particulier – « TA 132/78 · FC 74 » – se lisaient comme un relevé alors que
// personne n’était là pour les entrer.
//
// Le fil rassemble maintenant ce qui est DÉJÀ écrit ailleurs sur ce patient :
// ses rendez-vous, ses notes, ses documents, ses séjours, l’échéance de
// contrôle et les rappels posés. Chaque chose à sa date, de part et d’autre du
// jour de l’intervention. Un traitement y pose son début et sa fin, que le
// dossier porte maintenant sur chaque fiche ; celui que la tranche affichée ne
// montre pas se lit juste à côté du fil, avec ce que sa fiche en dit.
//
// Rien ne s’ouvre tant qu’aucune chirurgie n’est programmée : le suivi
// post-opératoire d’un patient qu’on n’opère pas n’existe pas, et l’écran le
// dit au lieu d’afficher un cadre vide.

const PT_VT = window.VT || {};
const PT_INK = PT_VT.ink || '#0a0a0a';
const PT_SUB = PT_VT.sub || '#6b7280';
const PT_SURFACE = PT_VT.surface || '#fff';
const PT_HAIR = PT_VT.hair || 'rgba(10,10,10,0.08)';
const PT_HAIR2 = PT_VT.hair2 || 'rgba(10,10,10,0.14)';
const PT_DANGER = PT_VT.danger || '#b91c1c';
const PT_ACCENT = PT_VT.medBlue || '#3d6b8f';
// Le halo de la journée d’intervention : assez pour qu’elle se détache du fil,
// assez discret pour ne pas peser sur les lignes qu’elle contient.
const PT_PIVOT_TINT = 'rgba(61,107,143,0.07)';
const PT_PIVOT_BORDER = 'rgba(61,107,143,0.20)';

// Les trois états de la chronologie de la V5, repris tels quels : ce qui est
// fait porte le vert, ce qui est prévu reste gris, une alerte est rouge. Le
// gabarit de ligne – pastille, trait continu, carré d’icône teinté – est le
// sien aussi. L’intervention est le repère du fil, pas une alerte : elle porte
// l’accent médical, jamais le rouge, qui reste au danger seul.
const PT_STATUS = {
  done: {
    bg: PT_VT.successTintSoft || 'rgba(5,150,105,0.06)',
    dot: PT_VT.success || '#059669',
    line: PT_VT.success || '#059669',
  },
  alert: { bg: 'rgba(185,28,28,0.08)', dot: PT_DANGER, line: PT_DANGER },
  planned: { bg: 'rgba(10,10,10,0.03)', dot: '#9ca3af', line: '#d1d5db' },
};

function postopEntryStyle(entry) {
  if (entry.accent === 'danger') return PT_STATUS.alert;
  return entry.status === 'planned' ? PT_STATUS.planned : PT_STATUS.done;
}

const PT_KIND_ICONS = {
  intervention: <path d="M14.5 4.5l5 5L9 20l-5 .5.5-5z" />,
  appointment: <><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 10h18M8 3v4M16 3v4" /></>,
  event: <><circle cx="12" cy="12" r="9" /><path d="M12 8v4l2 2" /></>,
  'treatment-start': <><path d="M10.5 3.5h3v4h4v3h-4v4h-3v-4h-4v-3h4z" /></>,
  'treatment-end': <path d="M6 12h12" />,
  document: <><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" /><path d="M14 3v5h5" /></>,
  note: <><path d="M4 5h16M4 10h16M4 15h10" /></>,
  reminder: <><path d="M18 8a6 6 0 1 0-12 0c0 7-3 8-3 8h18s-3-1-3-8" /><path d="M13.7 21a2 2 0 0 1-3.4 0" /></>,
  control: <><path d="M20 6L9 17l-5-5" /></>,
};

// Les couches de l’application se posent sur la scène, le seul conteneur qui a
// une taille et un ancrage. Une confirmation rendue dans le corps d’une feuille
// resterait sous son panneau.
function postopOverlayRoot() {
  return window.document.getElementById('vasco-stage') || window.document.body;
}

function postopTimelineError(failure, fallback) {
  if (failure?.status === 401) return 'Votre session a expiré. Reconnectez-vous avant de réessayer.';
  if (failure?.status === 403) return 'Vous n’êtes pas autorisé à consulter ce suivi.';
  if (failure?.status === 404) return 'Ce dossier n’existe plus.';
  if (failure?.status === 0 || failure?.code === 'network_error' || failure?.code === 'request_timeout') {
    return 'Connexion au serveur impossible. Vérifiez le réseau puis réessayez.';
  }
  return failure?.message || fallback;
}

// Chaque source est chargée pour elle-même : le fil d’un dossier sans document
// ne doit pas disparaître parce que la liste des documents a échoué. Ce qui
// manque est nommé sous le fil plutôt que caché.
function usePostopSources(patient, runtime, reloadToken) {
  const [state, setState] = React.useState({ status: 'loading', sources: null, missing: [], error: null });

  React.useEffect(() => {
    if (!runtime) {
      setState({ status: 'ready', sources: { patientId: patient.id }, missing: [], error: null });
      return undefined;
    }
    let cancelled = false;
    setState({ status: 'loading', sources: null, missing: [], error: null });
    const dashboard = window.VascoApi?.dashboard?.reminders;
    const wanted = [
      ['appointments', 'les rendez-vous', () => runtime.appointments(patient.id)],
      ['events', 'les séjours et consultations', () => runtime.events.list(patient.id, { eventType: 'all', pageSize: 100 })],
      ['notes', 'les notes', () => runtime.notes(patient.id)],
      ['documents', 'les documents', () => runtime.documents(patient.id, 'all')],
      // Le fil ne garde que les rappels de ce dossier : il ne demande que
      // ceux-là, ouverts et terminés en une requête, plutôt que toute la
      // liste du praticien deux fois.
      ['reminders', 'les rappels', () => (dashboard
        ? dashboard.load({ patientId: patient.id, statuses: ['open', 'completed'] })
        : Promise.resolve([]))],
      // Les codages CCAM portent l’intitulé d’une intervention et son compte
      // rendu : ils restent le repli quand aucun intitulé n’a été écrit.
      ['codings', 'les codages d’actes', () => runtime.ccamCodings.list(patient.id, { pageSize: 50 })],
    ];
    // Le fil n’a besoin que des rendez-vous pour exister : il se pose dès leur
    // réponse, et les cinq autres sources s’y ajoutent à mesure qu’elles
    // arrivent. Attendre la plus lente pour tout montrer laissait l’onglet sur
    // son texte de chargement bien après que la chronologie était lisible.
    // Aucune arrivée ne fait revenir l’écran sur « chargement », et rien
    // n’est dit manquant tant qu’une réponse est encore en route : une source
    // qui n’a pas fini n’est pas une source tombée.
    const loaded = {};
    const failed = [];
    let settled = 0;
    let rejection = null;
    let closed = false;

    const publish = () => {
      if (cancelled || closed) return;
      if (failed.includes('appointments')) {
        closed = true;
        setState({
          status: 'error',
          sources: null,
          missing: [],
          error: postopTimelineError(rejection, 'Le suivi n’a pas pu être chargé.'),
        });
        return;
      }
      if (!Object.prototype.hasOwnProperty.call(loaded, 'appointments')) return;
      const complete = settled === wanted.length;
      setState({
        status: 'ready',
        sources: { patientId: patient.id, patient, ...loaded },
        missing: complete
          ? wanted.filter(([key]) => failed.includes(key)).map(([, label]) => label)
          : [],
        error: null,
      });
    };

    wanted.forEach(([key, , load]) => {
      Promise.resolve().then(load).then(
        (value) => {
          loaded[key] = key === 'events' || key === 'documents' || key === 'codings'
            ? (value?.items || [])
            : value;
        },
        (failure) => {
          failed.push(key);
          if (key === 'appointments') rejection = failure;
        },
      ).then(() => { settled += 1; publish(); });
    });
    return () => { cancelled = true; };
  }, [patient, runtime, reloadToken]);

  return state;
}

// L’épisode de l’opération qu’on regarde, et d’elle seule. Le serveur en porte
// un par intervention : demander « celui du dossier » ramènerait l’état de la
// dernière opération au-dessus d’une autre, et ferait lire « À surveiller » sur
// une chirurgie qui n’a pas encore eu lieu.
function usePostopEpisode(patient, runtime, interventionDayKey, reloadToken) {
  const [state, setState] = React.useState({ episode: null, loaded: false });

  React.useEffect(() => {
    if (!runtime || !interventionDayKey) { setState({ episode: null, loaded: true }); return undefined; }
    let cancelled = false;
    setState({ episode: null, loaded: false });
    runtime.postOperative(patient.id, { interventionOn: interventionDayKey })
      .then((response) => { if (!cancelled) setState({ episode: response?.episode || null, loaded: true }); })
      .catch(() => { if (!cancelled) setState({ episode: null, loaded: true }); });
    return () => { cancelled = true; };
  }, [patient.id, runtime, interventionDayKey, reloadToken]);

  return state;
}

// Le corps d’une ligne, tel que la chronologie de la V5 le pose : le carré
// d’icône teinté, l’intitulé, l’heure en chiffres fixes, puis le détail et la
// source alignés sous l’intitulé.
function PostopEntryBody({ entry, ss, past }) {
  return (
    <>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 8, background: ss.bg,
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={ss.dot}
            strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
            {PT_KIND_ICONS[entry.kind] || PT_KIND_ICONS.note}
          </svg>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: past ? PT_INK : PT_SUB,
            lineHeight: 1.35 }}>{entry.title}</div>
        </div>
        {entry.time && <span className="mono" style={{
          fontSize: 9, fontWeight: 600, color: PT_SUB,
          letterSpacing: '0.3px', flexShrink: 0,
        }}>{entry.time}</span>}
      </div>
      {entry.detail && <div style={{
        fontSize: 12, fontWeight: 500, color: PT_SUB, marginTop: 4, marginLeft: 36,
        lineHeight: 1.4, opacity: past ? 1 : 0.6,
      }}>{entry.detail}</div>}
      {entry.source && <div className="mono" style={{
        fontSize: 9, fontWeight: 500, color: PT_SUB, marginTop: 3, marginLeft: 36,
        letterSpacing: '0.3px', opacity: 0.8,
      }}>{entry.source}</div>}
    </>
  );
}

function PostopDayHeading({ day, pivot }) {
  // Le jour de l’opération est le seul repère du fil : tout le reste se compte
  // à partir de lui. Il porte donc une pastille pleine à l’accent médical plutôt
  // qu’un simple gras – jamais le rouge, qui reste au danger.
  if (pivot) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingTop: 1, paddingBottom: 8 }}>
        <span className="mono" style={{
          padding: '5px 10px', borderRadius: 999, background: PT_ACCENT, color: '#fff',
          fontSize: 9.5, fontWeight: 700, letterSpacing: '0.5px', textTransform: 'uppercase',
          whiteSpace: 'nowrap',
        }}>{day.label}</span>
        <span style={{ flex: 1, minWidth: 0, color: PT_INK, fontSize: 11.5, fontWeight: 650 }}>
          {day.title}
        </span>
        {day.today && <span className="mono" style={{
          color: PT_ACCENT, fontSize: 9, fontWeight: 700, letterSpacing: '0.4px',
        }}>AUJOURD’HUI</span>}
      </div>
    );
  }
  return (
    <div style={{
      display: 'flex', alignItems: 'baseline', gap: 8, paddingTop: 2,
      paddingBottom: 6, borderBottom: `1px solid ${PT_HAIR}`,
    }}>
      <span className="mono" style={{
        color: PT_SUB, fontSize: 10, fontWeight: 700,
        letterSpacing: '0.5px', textTransform: 'uppercase',
      }}>{day.label}</span>
      <span style={{ flex: 1, minWidth: 0, color: PT_SUB, fontSize: 11.5, fontWeight: 500 }}>
        {day.title}
      </span>
      {day.today && <span className="mono" style={{
        color: PT_ACCENT, fontSize: 9, fontWeight: 700, letterSpacing: '0.4px',
      }}>AUJOURD’HUI</span>}
    </div>
  );
}

// Un seul fil, du premier jour au dernier. Les en-têtes de journée sont des
// rangées comme les autres : le trait leur passe derrière au lieu d’être coupé
// à chaque date, sans quoi une journée à un seul événement laissait une pastille
// toute seule au milieu de rien.
function PostopTimelineRail({ days, interventionDayKey, onOpen }) {
  const { InteractiveRow } = window.VascoUI;
  const rows = [];
  days.forEach((day) => {
    const pivot = day.dayKey === interventionDayKey;
    rows.push({ kind: 'day', key: `day:${day.dayKey}`, day, entry: day.entries[0], pivot });
    day.entries.forEach((entry, index) => rows.push({
      kind: 'entry', key: entry.id, entry, pivot, pivotLast: pivot && index === day.entries.length - 1,
    }));
  });

  return rows.map((row, index) => {
    const last = index === rows.length - 1;
    const ss = postopEntryStyle(row.entry);
    const past = row.entry.status !== 'planned';
    // La journée de l’intervention est enveloppée : chaque rangée porte le même
    // fond, et seules la première et la dernière arrondissent leur bord.
    const halo = !row.pivot ? null : {
      background: PT_PIVOT_TINT,
      margin: '0 -12px', padding: '0 12px',
      borderLeft: `1px solid ${PT_PIVOT_BORDER}`,
      borderRight: `1px solid ${PT_PIVOT_BORDER}`,
      borderTop: row.kind === 'day' ? `1px solid ${PT_PIVOT_BORDER}` : 'none',
      borderBottom: row.pivotLast ? `1px solid ${PT_PIVOT_BORDER}` : 'none',
      borderTopLeftRadius: row.kind === 'day' ? 14 : 0,
      borderTopRightRadius: row.kind === 'day' ? 14 : 0,
      borderBottomLeftRadius: row.pivotLast ? 14 : 0,
      borderBottomRightRadius: row.pivotLast ? 14 : 0,
      paddingTop: row.kind === 'day' ? 10 : 0,
    };

    const body = row.kind === 'day'
      ? <PostopDayHeading day={row.day} pivot={row.pivot} />
      : <PostopEntryBody entry={row.entry} ss={ss} past={past} />;

    return (
      <div key={row.key} style={{ display: 'flex', gap: 14, ...(halo || {}) }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: 20 }}>
          {row.kind === 'entry' && <div style={{
            width: 10, height: 10, borderRadius: '50%', background: ss.dot,
            flexShrink: 0, marginTop: 4,
            border: ss === PT_STATUS.alert ? '2px solid rgba(185,28,28,0.2)' : 'none',
          }} />}
          {!last && <div style={{
            width: 2, flex: 1, minHeight: row.kind === 'day' ? 10 : 24, borderRadius: 1,
            background: past ? ss.line : '#e5e7eb',
          }} />}
        </div>
        <div style={{
          flex: 1, minWidth: 0,
          paddingBottom: last || row.pivotLast ? (row.pivotLast ? 12 : 0) : (row.kind === 'day' ? 10 : 16),
        }}>
          {row.kind === 'day' ? body : (
            <InteractiveRow ariaLabel={`Ouvrir : ${row.entry.title}`}
              onClick={() => onOpen(row.entry)} style={{
                width: '100%', minHeight: 0, padding: 0, border: 'none', background: 'none',
                textAlign: 'left', fontFamily: 'inherit', cursor: 'pointer', display: 'block',
              }}>{body}</InteractiveRow>
          )}
        </div>
      </div>
    );
  });
}

// Les traitements que le fil ne montre pas : ceux dont aucune borne ne tombe
// dans la tranche affichée, et ceux dont le dossier ne porte aucune date. Ils se
// lisent ici avec la période que leur fiche porte, plutôt que de disparaître de
// l’écran. Quand aucun n’a de date, le dire évite qu’on les cherche à une journée.
function PostopTreatments({ treatments }) {
  const contract = window.VascoPostopTimeline;
  if (!treatments.length) return null;
  const undated = treatments.every((item) => !item.startedOn && !item.endedOn);
  return (
    <section style={{ marginTop: 18, paddingTop: 14, borderTop: `1px solid ${PT_HAIR}` }}>
      <PCaption>Traitements du dossier</PCaption>
      <div style={{ marginTop: 8 }}>
        {treatments.map((treatment) => {
          const range = contract.treatmentRangeLabel(treatment);
          return (
            <div key={treatment.id || treatment.label} style={{
              display: 'flex', alignItems: 'flex-start', gap: 10, padding: '7px 0',
              borderTop: `1px solid ${PT_HAIR}`,
            }}>
              <span aria-hidden="true" style={{
                width: 6, height: 6, borderRadius: '50%', background: PT_SUB,
                flexShrink: 0, marginTop: 6, opacity: 0.6,
              }} />
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ display: 'block', color: PT_INK, fontSize: 13,
                  fontWeight: 500, lineHeight: 1.45 }}>{treatment.label}</span>
                {range && (
                  <span style={{ display: 'block', marginTop: 1, color: PT_SUB,
                    fontSize: 11.5, fontWeight: 500, lineHeight: 1.4 }}>{range}</span>
                )}
              </span>
            </div>
          );
        })}
      </div>
      {undated && (
        <div style={{ marginTop: 8, color: PT_SUB, fontSize: 11.5, fontWeight: 500, lineHeight: 1.45 }}>
          Le dossier ne garde aucune date de début ni de fin pour ces lignes : elles ne se posent
          donc pas dans le fil.
        </div>
      )}
    </section>
  );
}

function PostopFact({ label, value }) {
  if (!value) return null;
  return (
    <div style={{ display: 'flex', gap: 12, padding: '7px 0', borderTop: `1px solid ${PT_HAIR}` }}>
      <span className="mono" style={{ width: 104, flexShrink: 0, color: PT_SUB,
        fontSize: 9.5, fontWeight: 600, letterSpacing: '0.4px', textTransform: 'uppercase',
        paddingTop: 2 }}>{label}</span>
      <span style={{ flex: 1, minWidth: 0, color: PT_INK, fontSize: 13,
        fontWeight: 500, lineHeight: 1.45 }}>{value}</span>
    </div>
  );
}

function postopAppointmentLabel(type) {
  return window.VascoPostopTimeline.APPOINTMENT_LABELS[type] || 'Rendez-vous';
}

// Ce qu’il y a derrière une ligne du fil. Le fil ne montre qu’un intitulé et une
// heure ; le reste – le texte entier d’une note, le contenu d’un compte rendu,
// les actes réellement codés – se lit ici, sans quitter le suivi.
//
// Rien n’y est recopié : le document est relu au serveur au moment où on
// l’ouvre, et les actes viennent du codage lui-même.
function PostopEntryDetail({ open, patient, entry, runtime, onClose, onChanged }) {
  const { BottomSheet, Button, InlineAction, StatusNotice, ConfirmDialog } = window.VascoUI;
  const contract = window.VascoPostopTimeline;
  const ref = entry?.ref || {};
  const coding = ref.coding || null;
  const [document, setDocument] = React.useState(null);
  const [documentError, setDocumentError] = React.useState(null);
  const [reminder, setReminder] = React.useState(null);
  const [commandBusy, setCommandBusy] = React.useState(false);
  const [commandError, setCommandError] = React.useState(null);
  const [confirmingDelete, setConfirmingDelete] = React.useState(false);

  const can = (action) => reminder?.capabilities?.[action]?.enabled !== false;

  const commandReminder = async (action) => {
    const commands = window.VascoApi?.dashboard?.reminders;
    if (!reminder || !commands?.[action] || commandBusy) return;
    setCommandBusy(true); setCommandError(null);
    try {
      const updated = await commands[action](reminder);
      setReminder(updated);
      setConfirmingDelete(false);
      showToast(action === 'archive' ? 'Rappel supprimé'
        : action === 'complete' ? 'Rappel marqué comme fait' : 'Rappel rouvert', 'success');
      onChanged();
      if (action === 'archive') onClose();
    } catch (failure) {
      setConfirmingDelete(false);
      setCommandError(postopTimelineError(failure, 'Le rappel n’a pas pu être modifié.'));
    } finally { setCommandBusy(false); }
  };

  // La lecture appartient à la ligne qui l’a demandée. Sans ce garde, une
  // réponse partie pour un compte rendu revenait après l’ouverture de la ligne
  // suivante et affichait son texte sous un tout autre intitulé.
  const readFor = React.useRef(null);
  const readDocument = React.useCallback(async (documentId, owner) => {
    if (!runtime?.document || !documentId) { setDocument(null); return; }
    readFor.current = owner;
    setDocument('loading'); setDocumentError(null);
    try {
      const value = await runtime.document(patient.id, documentId);
      if (readFor.current !== owner) return;
      setDocument(value);
    } catch (failure) {
      if (readFor.current !== owner) return;
      setDocument(null);
      setDocumentError(postopTimelineError(failure, 'Ce document n’a pas pu être ouvert.'));
    }
  }, [patient.id, runtime]);

  React.useEffect(() => {
    if (!open) return;
    setCommandError(null);
    setConfirmingDelete(false);
    setDocumentError(null);
    setReminder(ref.reminder || null);
    readFor.current = entry?.id || null;
    if (ref.kind === 'document' && ref.document?.id) void readDocument(ref.document.id, entry.id);
    else setDocument(null);
    // `entry.id` identifie la ligne ouverte : rouvrir la même relit son document.
  }, [open, entry?.id]);

  const facts = [];
  if (entry) {
    if (entry.time) facts.push(['Heure', entry.time]);
    if (ref.kind === 'appointment') {
      facts.push(['Type', postopAppointmentLabel(ref.appointment?.type)]);
      facts.push(['Lieu', ref.appointment?.lieu]);
      facts.push(['Horaire', `${ref.appointment?.start} – ${ref.appointment?.end}`]);
      if (ref.appointment?.urgent) facts.push(['Urgence', 'Rendez-vous marqué urgent']);
    }
    if (ref.kind === 'event') {
      facts.push(['Nature', contract.EVENT_LABELS[ref.event?.eventType] || 'Événement']);
      facts.push(['Praticien', ref.event?.practitioner]);
      if (ref.event?.actCode) facts.push(['Code d’acte', ref.event.actCode]);
      if (ref.parent) {
        facts.push(['Rattaché à',
          `${contract.EVENT_LABELS[ref.parent.eventType] || 'Séjour'} du ${contract.dayTitle(ref.parent.eventDate)}`]);
      }
    }
    if (ref.kind === 'reminder') {
      facts.push(['Échéance', reminder?.date]);
      facts.push(['État', reminder?.done ? 'Fait' : 'À faire']);
    }
    if (ref.kind === 'control') {
      facts.push(['Échéance', contract.dayTitle(ref.episode?.nextControlDate)]);
      facts.push(['État', window.VascoPostopFollowUp.stateLabel(ref.episode)]);
    }
    if (ref.kind === 'treatment') {
      facts.push(['Période', contract.treatmentRangeLabel(ref.treatment)]);
    }
    if (ref.kind === 'document') {
      facts.push(['Type', ref.document?.type]);
      if (document?.version) facts.push(['Version', `version ${document.version}`]);
    }
    // « Par » ne se répète pas : pour un événement, la source EST le praticien
    // déjà nommé plus haut.
    if (entry.source && ref.kind !== 'event') facts.push(['Par', entry.source]);
  }

  const acts = Array.isArray(coding?.acts) ? coding.acts : [];
  const croId = coding?.croDocumentId || null;
  const readDocumentContent = document && document !== 'loading' ? document : null;

  return <>
    <BottomSheet open={open} title={entry?.title || 'Détail'}
      subtitle={entry ? contract.dayTitle(entry.dayKey) : ''}
      onClose={onClose} maxHeight="86%">
      <div className="vasco-scroll" style={{ overflowY: 'auto', padding: '0 20px 20px' }}>
        {facts.map(([label, value]) => (
          <PostopFact key={label} label={label} value={value} />
        ))}

        {/* Un événement du dossier n’a d’intitulé que si quelqu’un l’a écrit :
            le dire ici plutôt que de laisser chercher où le saisir. */}
        {ref.kind === 'event' && !ref.event?.label && !coding && (
          <div style={{ marginTop: 12, color: PT_SUB, fontSize: 11.5,
            fontWeight: 500, lineHeight: 1.45 }}>
            Aucun intitulé n’a été écrit sur cette ligne. Il se saisit dans « Séjours et
            gestes » du dossier ; à défaut, il viendrait du codage d’actes, qui n’a pas
            encore été fait pour celle-ci.
          </div>
        )}

        {ref.kind === 'note' && (
          <div className="serif" style={{
            marginTop: 12, padding: '12px 14px', borderRadius: 14,
            border: `1px solid ${PT_HAIR2}`, background: PT_SURFACE,
            fontSize: 14, lineHeight: 1.55, color: PT_INK, whiteSpace: 'pre-wrap',
          }}>{ref.note?.text}</div>
        )}

        {/* La décision d’un staff se lit là où on lit le staff, en entier. */}
        {ref.appointment?.staffRcpDecision && <>
          <div className="mono" style={{ marginTop: 16, marginBottom: 6, color: PT_SUB,
            fontSize: 9.5, fontWeight: 600, letterSpacing: '0.4px', textTransform: 'uppercase' }}>
            Décision du staff
          </div>
          <div className="serif" style={{
            padding: '12px 14px', borderRadius: 14,
            border: `1px solid ${PT_HAIR2}`, background: PT_SURFACE,
            fontSize: 14, lineHeight: 1.55, color: PT_INK, whiteSpace: 'pre-wrap',
          }}>{ref.appointment.staffRcpDecision}</div>
        </>}

        {acts.length > 0 && <>
          <div className="mono" style={{ marginTop: 16, marginBottom: 6, color: PT_SUB,
            fontSize: 9.5, fontWeight: 600, letterSpacing: '0.4px', textTransform: 'uppercase' }}>
            Actes codés
          </div>
          {acts.map((act) => (
            <div key={act.code} style={{ display: 'flex', gap: 10, padding: '6px 0',
              borderTop: `1px solid ${PT_HAIR}` }}>
              <span className="mono" style={{ flexShrink: 0, color: PT_ACCENT,
                fontSize: 10.5, fontWeight: 700, paddingTop: 2 }}>{act.code}</span>
              <span style={{ flex: 1, minWidth: 0, color: PT_INK, fontSize: 12.5,
                fontWeight: 500, lineHeight: 1.4 }}>{act.label}</span>
            </div>
          ))}
        </>}

        {documentError && <StatusNotice tone="danger" title="Document indisponible"
          message={documentError} style={{ marginTop: 12 }} />}

        {document === 'loading' && (
          <div role="status" style={{ marginTop: 12, color: PT_SUB, fontSize: 13 }}>
            Ouverture du document…
          </div>
        )}

        {readDocumentContent && <>
          <div className="mono" style={{ marginTop: 16, marginBottom: 6, color: PT_SUB,
            fontSize: 9.5, fontWeight: 600, letterSpacing: '0.4px', textTransform: 'uppercase' }}>
            {readDocumentContent.title}
          </div>
          <div className="serif" style={{
            padding: '12px 14px', borderRadius: 14,
            border: `1px solid ${PT_HAIR2}`, background: PT_SURFACE,
            fontSize: 14, lineHeight: 1.55, color: PT_INK, whiteSpace: 'pre-wrap',
          }}>{readDocumentContent.content}</div>
        </>}

        {croId && !readDocumentContent && document !== 'loading' && (
          <InlineAction onClick={() => void readDocument(croId, entry.id)}
            style={{ display: 'flex', marginTop: 14, color: PT_ACCENT, fontWeight: 650 }}>
            Lire le compte rendu opératoire
          </InlineAction>
        )}

        {/* Un rappel se commande depuis l’endroit où on le lit : le retrouver
            dans la cloche du tableau de bord pour le refermer n’avait aucun
            sens. Les trois commandes sont celles du serveur, avec ses propres
            refus – un rappel rangé ne se rouvre pas. */}
        {ref.kind === 'reminder' && <div style={{ marginTop: 16 }}>
          {commandError && <StatusNotice tone="danger" title="Commande impossible"
            message={commandError} style={{ marginBottom: 10 }} />}
          <div style={{ display: 'flex', gap: 8 }}>
            {reminder?.done
              ? <Button grow busy={commandBusy} disabled={!can('reopen')}
                  onClick={() => void commandReminder('reopen')}>Rouvrir</Button>
              : <Button grow variant="solid" busy={commandBusy} disabled={!can('complete')}
                  onClick={() => void commandReminder('complete')}>Marquer comme fait</Button>}
            <Button grow variant="danger" busy={commandBusy} disabled={!can('archive')}
              onClick={() => setConfirmingDelete(true)}>Archiver</Button>
          </div>
        </div>}

        <div style={{ display: 'flex', marginTop: 18 }}>
          <Button grow onClick={onClose}>Fermer</Button>
        </div>
      </div>
    </BottomSheet>

    {/* La confirmation se pose SUR la feuille, pas dedans : imbriquée, elle
        resterait sous son panneau et ne se verrait pas. */}
    {ReactDOM.createPortal(
      <ConfirmDialog open={confirmingDelete} title="Archiver ce rappel ?"
        message="Il quitte votre liste de rappels. Rien d’autre n’est modifié."
        confirmLabel="Archiver" cancelLabel="Annuler" danger busy={commandBusy}
        onClose={() => setConfirmingDelete(false)}
        onConfirm={() => void commandReminder('archive')} />,
      postopOverlayRoot())}
  </>;
}

// Poser un rappel, ou demander qu’un courriel parte avant un rendez-vous. Les
// deux se programment ; ce sont les deux seules choses que le serveur sait
// vraiment faire partir, et l’écran n’en promet pas une troisième.
function PostopScheduling({ open, patient, appointments, runtime, onClose, onDone }) {
  const { BottomSheet, Button, ChoiceChip, Field, DayPicker, StatusNotice, InteractiveRow, SimpleSelect } = window.VascoUI;
  const contract = window.VascoPostopTimeline;
  const agenda = window.VascoAgendaGeneral || {};
  const leadChoices = agenda.REMINDER_LEAD_CHOICES || [[1440, 'La veille']];
  const [mode, setMode] = React.useState('reminder');
  const [text, setText] = React.useState('');
  const [due, setDue] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [fieldErrors, setFieldErrors] = React.useState({});
  const [capability, setCapability] = React.useState(undefined);
  const [chosen, setChosen] = React.useState(null);
  const [lead, setLead] = React.useState(agenda.REMINDER_DEFAULT_LEAD_MINUTES || 1440);
  const [channelReady, setChannelReady] = React.useState(null);
  const [customLead, setCustomLead] = React.useState(false);
  const [leadAmount, setLeadAmount] = React.useState('3');
  const [leadUnit, setLeadUnit] = React.useState('days');
  const [rdvType, setRdvType] = React.useState('consultation');
  const [duration, setDuration] = React.useState(30);
  const [customDuration, setCustomDuration] = React.useState(false);
  const [durationAmount, setDurationAmount] = React.useState('45');
  const [place, setPlace] = React.useState('');
  const leadBounds = contract.leadBounds(leadUnit);
  const customMinutes = contract.leadMinutes(leadAmount, leadUnit);
  const upcoming = contract.upcomingAppointments(appointments);

  // Une feuille rouverte repart propre : elle reste montée pour son animation
  // de sortie, pas pour garder la saisie précédente.
  React.useEffect(() => {
    if (!open) return;
    setMode('reminder'); setText(''); setDue(null);
    setError(null); setFieldErrors({}); setChosen(null);
    setCustomLead(false); setLead(agenda.REMINDER_DEFAULT_LEAD_MINUTES || 1440);
    setCustomDuration(false); setDuration(30); setPlace(''); setRdvType('consultation');
  }, [open]);

  React.useEffect(() => {
    if (!open || mode !== 'mail' || capability !== undefined) return undefined;
    let cancelled = false;
    window.VascoApi?.agenda?.reminderCapability(patient.id)
      .then((value) => { if (!cancelled) setCapability(value); })
      .catch(() => { if (!cancelled) setCapability(null); });
    return () => { cancelled = true; };
  }, [open, mode, capability, patient.id]);

  // Le dossier peut très bien accepter un courriel pendant qu’aucun serveur
  // d’envoi n’est branché sur l’environnement : le rappel s’enregistre alors
  // sans jamais partir. Le rendez-vous choisi porte cette réponse ; l’écran la
  // lit et la dit, plutôt que d’annoncer un envoi qui n’aura pas lieu.
  React.useEffect(() => {
    if (!chosen?.id) { setChannelReady(null); return undefined; }
    let cancelled = false;
    window.VascoApi?.agenda?.reminder(chosen.id)
      .then((value) => { if (!cancelled) setChannelReady(value?.channelConfigured !== false); })
      .catch(() => { if (!cancelled) setChannelReady(null); });
    return () => { cancelled = true; };
  }, [chosen?.id]);

  const saveReminder = async () => {
    const analysis = contract.reminderDraft(patient, due, text);
    if (Object.keys(analysis.errors).length) { setFieldErrors(analysis.errors); return; }
    setBusy(true); setError(null); setFieldErrors({});
    try {
      await window.VascoApi.dashboard.reminders.create(analysis.body);
      showToast('Rappel posé', 'success');
      onDone();
    } catch (failure) {
      setError(postopTimelineError(failure, 'Le rappel n’a pas pu être posé.'));
    } finally { setBusy(false); }
  };

  // « Autre… » : du texte libre, rangé là où le dossier range son texte libre.
  const saveNote = async () => {
    const analysis = contract.noteDraft(text);
    if (Object.keys(analysis.errors).length) { setFieldErrors(analysis.errors); return; }
    setBusy(true); setError(null); setFieldErrors({});
    try {
      await runtime.createNote(patient.id, analysis.body.text);
      showToast('Noté au dossier', 'success');
      onDone();
    } catch (failure) {
      setError(postopTimelineError(failure, 'La note n’a pas pu être enregistrée.'));
    } finally { setBusy(false); }
  };

  const saveAppointment = async () => {
    const analysis = contract.appointmentDraft({
      reason: text, type: rdvType, stamp: due, location: place,
      durationMinutes: customDuration ? contract.durationMinutes(durationAmount) : duration,
    });
    if (Object.keys(analysis.errors).length) { setFieldErrors(analysis.errors); return; }
    setBusy(true); setError(null); setFieldErrors({});
    try {
      // Le serveur SIGNALE un chevauchement, il ne le refuse pas : la décision
      // reste au praticien, et l’avertissement se lit au lieu de disparaître.
      const result = await runtime.createAppointment(patient.id, analysis.draft);
      const warnings = (result?.warnings || []).map((warning) => warning?.message || warning).filter(Boolean);
      showToast(warnings.length ? `Rendez-vous créé · ${warnings[0]}` : 'Rendez-vous créé', 'success');
      onDone();
    } catch (failure) {
      setError(postopTimelineError(failure, 'Le rendez-vous n’a pas pu être créé.'));
    } finally { setBusy(false); }
  };

  const effectiveLead = customLead ? customMinutes : lead;

  const saveMail = async () => {
    if (!chosen) { setError('Choisissez le rendez-vous que le courriel doit annoncer.'); return; }
    if (effectiveLead === null) { setError('Corrigez le délai avant d’enregistrer.'); return; }
    setBusy(true); setError(null);
    try {
      await window.VascoApi.agenda.setReminder(chosen.id, {
        enabled: true, channel: 'email', leadTimeMinutes: effectiveLead,
      });
      showToast('Courriel de rappel programmé', 'success');
      onDone();
    } catch (failure) {
      setError(postopTimelineError(failure, 'Le courriel de rappel n’a pas pu être programmé.'));
    } finally { setBusy(false); }
  };

  const mailBlocked = capability === null
    || (capability && !capability.availableChannels.includes('email'));
  const mailReason = capability?.reasonCode === 'patient_opted_out'
    ? 'Ce patient a demandé à ne pas recevoir de rappel.'
    : 'Aucune adresse de courriel n’est renseignée dans ce dossier.';

  const textAreaStyle = (invalid) => ({
    width: '100%', padding: '10px 12px', borderRadius: 12, resize: 'vertical',
    border: `1px solid ${invalid ? PT_DANGER : PT_HAIR2}`,
    background: PT_SURFACE, color: PT_INK, fontFamily: 'inherit',
    fontSize: 13.5, fontWeight: 500, lineHeight: 1.45,
  });
  const inputStyle = (invalid) => ({
    width: '100%', padding: '10px 12px', borderRadius: 12,
    border: `1px solid ${invalid ? PT_DANGER : PT_HAIR2}`,
    background: PT_SURFACE, color: PT_INK, fontFamily: 'inherit',
    fontSize: 13.5, fontWeight: 500,
  });
  const captionStyle = {
    marginBottom: 6, color: PT_SUB, fontSize: 9.5,
    fontWeight: 600, letterSpacing: '0.4px', textTransform: 'uppercase',
  };
  const errorStyle = { marginTop: -8, marginBottom: 12, color: PT_DANGER, fontSize: 11.5, fontWeight: 600 };

  return (
    <BottomSheet open={open} title="Ajouter au suivi" onClose={onClose} busy={busy} maxHeight="86%">
      {/* Hauteur tenue : les modes ne remplissent pas la feuille de la même
          façon. Sans plancher, passer de l’un à l’autre ferait sauter le panneau
          sous le doigt, juste sous les pastilles qu’on vient de toucher. */}
      <div className="vasco-scroll" style={{ overflowY: 'auto', padding: '0 20px 20px', minHeight: 372 }}>
        {/* Quatre choses, et seulement celles que le serveur sait enregistrer.
            « Autre… » n’est pas une cinquième catégorie : c’est du texte libre,
            et le texte libre du dossier s’appelle une note. */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 16 }}>
          <ChoiceChip selected={mode === 'reminder'}
            onClick={() => { setMode('reminder'); setError(null); setFieldErrors({}); }}>
            Un rappel pour moi
          </ChoiceChip>
          <ChoiceChip selected={mode === 'appointment'}
            onClick={() => { setMode('appointment'); setError(null); setFieldErrors({}); }}>
            Un rendez-vous
          </ChoiceChip>
          <ChoiceChip selected={mode === 'mail'}
            onClick={() => { setMode('mail'); setError(null); setFieldErrors({}); }}>
            Un courriel au patient
          </ChoiceChip>
          <ChoiceChip selected={mode === 'note'}
            onClick={() => { setMode('note'); setError(null); setFieldErrors({}); }}>
            Autre…
          </ChoiceChip>
        </div>

        {mode === 'reminder' && <>
          <Field label="De quoi voulez-vous être prévenu ?">
            <textarea value={text} onChange={(event) => setText(event.target.value)} rows={3}
              disabled={busy} placeholder="Appeler pour le résultat de l’anapath"
              aria-invalid={fieldErrors.text ? 'true' : undefined}
              style={textAreaStyle(fieldErrors.text)} />
          </Field>
          {fieldErrors.text && <div role="alert" style={errorStyle}>{fieldErrors.text}</div>}
          <Field label="Quand" hint="Le rappel apparaît dans votre liste de rappels, comme ceux du tableau de bord.">
            <DayPicker id="postop-reminder-due" aria-label="Échéance du rappel"
              value={due} withTime disabled={busy}
              todayKey={window.VascoPostopFollowUp.todayIso()}
              min={window.VascoPostopFollowUp.todayIso()}
              placeholder="Choisir une date"
              onChange={(value) => { setDue(value); setFieldErrors({}); }} />
          </Field>
          {fieldErrors.dueOn && <div role="alert" style={errorStyle}>{fieldErrors.dueOn}</div>}
        </>}

        {mode === 'note' && <>
          <Field label="Qu’est-ce que vous voulez garder ?"
            hint="C’est enregistré comme une note du dossier, et ça vient se poser dans le fil à sa date.">
            <textarea value={text} onChange={(event) => setText(event.target.value)} rows={4}
              disabled={busy} placeholder="Pansement refait, cicatrice propre, pas d’écoulement."
              aria-invalid={fieldErrors.text ? 'true' : undefined}
              style={textAreaStyle(fieldErrors.text)} />
          </Field>
          {fieldErrors.text && <div role="alert" style={errorStyle}>{fieldErrors.text}</div>}
        </>}

        {mode === 'appointment' && <>
          <Field label="Motif">
            <input value={text} onChange={(event) => setText(event.target.value)}
              disabled={busy} placeholder="Contrôle du pontage"
              aria-invalid={fieldErrors.reason ? 'true' : undefined}
              style={inputStyle(fieldErrors.reason)} />
          </Field>
          {fieldErrors.reason && <div role="alert" style={errorStyle}>{fieldErrors.reason}</div>}

          <div className="mono" style={captionStyle}>Type</div>
          <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
            {contract.APPOINTMENT_TYPES.map((item) => (
              <ChoiceChip key={item.id} selected={rdvType === item.id}
                onClick={() => { setRdvType(item.id); setError(null); }}>{item.label}</ChoiceChip>
            ))}
          </div>

          <Field label="Quand">
            <DayPicker id="postop-rdv-when" aria-label="Date et heure du rendez-vous"
              value={due} withTime disabled={busy}
              todayKey={window.VascoPostopFollowUp.todayIso()}
              min={window.VascoPostopFollowUp.todayIso()}
              placeholder="Choisir une date"
              onChange={(value) => { setDue(value); setFieldErrors({}); }} />
          </Field>
          {fieldErrors.stamp && <div role="alert" style={errorStyle}>{fieldErrors.stamp}</div>}

          <div className="mono" style={captionStyle}>Durée</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {contract.DURATION_CHOICES.map((minutes) => (
              <ChoiceChip key={minutes} selected={!customDuration && duration === minutes}
                onClick={() => { setCustomDuration(false); setDuration(minutes); setError(null); }}>
                {contract.durationLabel(minutes)}
              </ChoiceChip>
            ))}
            <ChoiceChip selected={customDuration}
              onClick={() => { setCustomDuration(true); setError(null); }}>Autre…</ChoiceChip>
          </div>
          {customDuration && <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10 }}>
            <input type="number" value={durationAmount} min={contract.MIN_DURATION_MINUTES}
              max={contract.MAX_DURATION_MINUTES} aria-label="Durée en minutes"
              onChange={(event) => { setDurationAmount(event.target.value); setError(null); }}
              style={{ ...inputStyle(contract.durationMinutes(durationAmount) === null),
                width: 88, padding: '9px 11px', fontWeight: 600 }} />
            <span style={{ color: PT_SUB, fontSize: 13, fontWeight: 500 }}>minutes</span>
          </div>}
          {fieldErrors.duration && <div role="alert" style={{ marginTop: 6, marginBottom: 4,
            color: PT_DANGER, fontSize: 11.5, fontWeight: 600 }}>{fieldErrors.duration}</div>}

          <div style={{ marginTop: 14 }}>
            <Field label="Lieu" hint="Facultatif. Laissé vide, le rendez-vous n’annonce aucun lieu.">
              <input value={place} onChange={(event) => setPlace(event.target.value)}
                disabled={busy} placeholder="Consultation 3" style={inputStyle(false)} />
            </Field>
          </div>
        </>}

        {mode === 'mail' && <>
          {capability === undefined && <div role="status" style={{ padding: '10px 0',
            color: PT_SUB, fontSize: 13 }}>Vérification du dossier…</div>}
          {capability !== undefined && mailBlocked && (
            <StatusNotice tone="warning" title="Courriel impossible" message={mailReason} />
          )}
          {capability !== undefined && !mailBlocked && upcoming.length === 0 && (
            <StatusNotice tone="info" title="Aucun rendez-vous à venir"
              message="Un courriel de rappel s’accroche à un rendez-vous. Posez d’abord le rendez-vous dans l’agenda." />
          )}
          {capability !== undefined && !mailBlocked && upcoming.length > 0 && <>
            <div className="mono" style={captionStyle}>Quel rendez-vous</div>
            {upcoming.map((item) => (
              <InteractiveRow key={item.id} ariaLabel={`Choisir le rendez-vous du ${item.when}`}
                selected={chosen?.id === item.id}
                onClick={() => { setChosen(item); setError(null); }} style={{
                  width: '100%', padding: '11px 13px', marginBottom: 8, borderRadius: 12,
                  textAlign: 'left', fontFamily: 'inherit', cursor: 'pointer', display: 'block',
                }}>
                <div style={{ color: PT_INK, fontSize: 13.5, fontWeight: 650 }}>{item.what}</div>
                <div className="mono" style={{ marginTop: 3, color: PT_SUB, fontSize: 10 }}>
                  {item.when} · {item.lieu}
                </div>
              </InteractiveRow>
            ))}

            <div className="mono" style={{ ...captionStyle, marginTop: 14 }}>Quand il part</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {leadChoices.map(([minutes, label]) => (
                <ChoiceChip key={minutes} selected={!customLead && lead === minutes}
                  onClick={() => { setCustomLead(false); setLead(minutes); setError(null); }}>
                  {label}
                </ChoiceChip>
              ))}
              <ChoiceChip selected={customLead}
                onClick={() => { setCustomLead(true); setError(null); }}>Autre…</ChoiceChip>
            </div>

            {/* Trois jours, dix heures : le serveur accepte tout entre cinq
                minutes et vingt-huit jours. Les bornes affichées sont les
                siennes, l’écran n’en invente pas de plus étroites. */}
            {customLead && <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10 }}>
              <input type="number" value={leadAmount} min={leadBounds.min} max={leadBounds.max}
                aria-label="Combien de temps avant"
                onChange={(event) => { setLeadAmount(event.target.value); setError(null); }}
                style={{ ...inputStyle(customMinutes === null), width: 88, padding: '9px 11px', fontWeight: 600 }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <SimpleSelect id="postop-lead-unit" value={leadUnit}
                  aria-label="Unité du délai"
                  options={[['hours', 'heures avant'], ['days', 'jours avant']]}
                  onChange={(value) => { setLeadUnit(value); setError(null); }} />
              </div>
            </div>}
            {customLead && customMinutes === null && (
              <div role="alert" style={{ marginTop: 6, color: PT_DANGER, fontSize: 11.5, fontWeight: 600 }}>
                Entre {leadBounds.min} et {leadBounds.max} {leadUnit === 'hours' ? 'heures' : 'jours'}.
              </div>
            )}

            {channelReady === false && <StatusNotice tone="warning" style={{ marginTop: 12 }}
              title="Le courriel ne partira pas d’ici"
              message="Aucun serveur d’envoi n’est branché sur cet environnement. Le rappel s’enregistre et se verra dans l’agenda, mais le patient ne recevra rien tant que l’envoi n’est pas configuré." />}

            <div style={{ marginTop: 12, color: PT_SUB, fontSize: 11.5, fontWeight: 500, lineHeight: 1.45 }}>
              Le courriel annonce le rendez-vous choisi{capability?.destinationHint
                ? `, à ${capability.destinationHint}` : ''} : la date, l’heure, le lieu et le nom du
              cabinet, rien du dossier. Son texte est écrit par le serveur et ne se modifie pas
              depuis cet écran.
            </div>
          </>}
        </>}

        {error && <div role="alert" style={{ marginTop: 10, color: PT_DANGER,
          fontSize: 12.5, fontWeight: 600, lineHeight: 1.4 }}>{error}</div>}

        <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
          <Button grow onClick={onClose} disabled={busy}>Fermer</Button>
          <Button grow variant="solid" busy={busy}
            disabled={mode === 'mail' && (mailBlocked || upcoming.length === 0)}
            onClick={mode === 'reminder' ? saveReminder
              : mode === 'appointment' ? saveAppointment
              : mode === 'note' ? saveNote : saveMail}>Ajouter</Button>
        </div>
      </div>
    </BottomSheet>
  );
}

// Le staff : la réunion où l’équipe discute le dossier et arrête une conduite.
// Deux gestes, et pas un de plus, parce que le serveur n’en porte que deux :
// inscrire le patient à un staff, et y consigner la décision prise, que le
// serveur horodate lui-même.
function PostopStaffSection({ title, children }) {
  if (!children) return null;
  return (
    <section style={{ marginBottom: 14 }}>
      <div className="mono" style={{ marginBottom: 5, color: PT_SUB, fontSize: 9.5,
        fontWeight: 600, letterSpacing: '0.4px', textTransform: 'uppercase' }}>{title}</div>
      {children}
    </section>
  );
}

function PostopStaffLine({ children, tone = null }) {
  return (
    <div style={{ color: tone || PT_INK, fontSize: 13, fontWeight: 500,
      lineHeight: 1.45, marginBottom: 2 }}>{children}</div>
  );
}

function PostopStaff({ open, patient, appointments, intervention, sources, timeline, runtime, onClose, onDone, onOpenDocument }) {
  const { BottomSheet, Button, ChoiceChip, Field, DayPicker, StatusNotice, InteractiveRow, InlineAction } = window.VascoUI;
  const contract = window.VascoPostopTimeline;
  const staffs = contract.staffsOf(appointments);
  const [mode, setMode] = React.useState('brief');
  const brief = React.useMemo(
    () => contract.staffBrief(patient, sources, timeline),
    [contract, patient, sources, timeline],
  );
  const [reason, setReason] = React.useState('Staff');
  const [when, setWhen] = React.useState(null);
  const [duration, setDuration] = React.useState(30);
  const [place, setPlace] = React.useState('');
  const [chosen, setChosen] = React.useState(null);
  const [decision, setDecision] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [fieldErrors, setFieldErrors] = React.useState({});

  React.useEffect(() => {
    if (!open) return;
    const first = contract.staffsOf(appointments)[0] || null;
    setMode('brief');
    setReason(intervention?.what ? `Staff – ${intervention.what}` : 'Staff');
    setWhen(null); setDuration(30); setPlace('');
    setChosen(first); setDecision(first?.staffRcpDecision || '');
    setError(null); setFieldErrors({});
  }, [open]);

  const pickStaff = (item) => {
    setChosen(item);
    setDecision(item?.staffRcpDecision || '');
    setError(null); setFieldErrors({});
  };

  const planStaff = async () => {
    const analysis = contract.appointmentDraft({
      reason, type: contract.STAFF_TYPE, stamp: when,
      durationMinutes: duration, location: place,
    });
    if (Object.keys(analysis.errors).length) { setFieldErrors(analysis.errors); return; }
    setBusy(true); setError(null); setFieldErrors({});
    try {
      await runtime.createAppointment(patient.id, analysis.draft);
      showToast('Staff programmé', 'success');
      onDone();
    } catch (failure) {
      setError(postopTimelineError(failure, 'Le staff n’a pas pu être programmé.'));
    } finally { setBusy(false); }
  };

  const saveDecision = async () => {
    if (!chosen) { setError('Choisissez le staff dont vous notez la décision.'); return; }
    const analysis = contract.decisionDraft(decision);
    if (Object.keys(analysis.errors).length) { setFieldErrors(analysis.errors); return; }
    setBusy(true); setError(null); setFieldErrors({});
    try {
      await window.VascoApi.agenda.update(chosen, analysis.body);
      showToast('Décision notée', 'success');
      onDone();
    } catch (failure) {
      setError(postopTimelineError(failure, 'La décision n’a pas pu être enregistrée.'));
    } finally { setBusy(false); }
  };

  const captionStyle = {
    marginBottom: 6, color: PT_SUB, fontSize: 9.5,
    fontWeight: 600, letterSpacing: '0.4px', textTransform: 'uppercase',
  };
  const inputStyle = (invalid) => ({
    width: '100%', padding: '10px 12px', borderRadius: 12,
    border: `1px solid ${invalid ? PT_DANGER : PT_HAIR2}`,
    background: PT_SURFACE, color: PT_INK, fontFamily: 'inherit',
    fontSize: 13.5, fontWeight: 500,
  });
  const errorStyle = { marginTop: -8, marginBottom: 12, color: PT_DANGER, fontSize: 11.5, fontWeight: 600 };

  return (
    <BottomSheet open={open} title="Staff" onClose={onClose} busy={busy} maxHeight="86%">
      <div className="vasco-scroll" style={{ overflowY: 'auto', padding: '0 20px 20px', minHeight: 372 }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 16 }}>
          <ChoiceChip selected={mode === 'brief'}
            onClick={() => { setMode('brief'); setError(null); setFieldErrors({}); }}>
            La fiche
          </ChoiceChip>
          <ChoiceChip selected={mode === 'plan'}
            onClick={() => { setMode('plan'); setError(null); setFieldErrors({}); }}>
            Programmer
          </ChoiceChip>
          <ChoiceChip selected={mode === 'decision'}
            onClick={() => { setMode('decision'); setError(null); setFieldErrors({}); }}>
            Noter la décision
          </ChoiceChip>
        </div>

        {/* La fiche : ce qu’on dit d’un patient en staff, dans l’ordre où on le
            dit. Aucune source de plus que le fil – elle range ce qui est là. */}
        {mode === 'brief' && <>
          <PostopStaffSection title="Le patient">
            <>
              <PostopStaffLine>
                <strong>{brief.patient.identity}</strong>
                {brief.patient.age ? ` · ${brief.patient.age}` : ''}
              </PostopStaffLine>
              {brief.patient.allergies.length > 0 && (
                <PostopStaffLine tone={PT_DANGER}>
                  Allergies : {brief.patient.allergies.join(', ')}
                </PostopStaffLine>
              )}
              {brief.patient.alerts.length > 0 && (
                <PostopStaffLine tone={PT_DANGER}>{brief.patient.alerts.join(' · ')}</PostopStaffLine>
              )}
              {brief.patient.antecedents.length > 0 && (
                <PostopStaffLine>Antécédents : {brief.patient.antecedents.join(', ')}</PostopStaffLine>
              )}
            </>
          </PostopStaffSection>

          {brief.indication && (
            <PostopStaffSection title="Indication">
              <PostopStaffLine>{brief.indication}</PostopStaffLine>
            </PostopStaffSection>
          )}

          {brief.intervention && (
            <PostopStaffSection title="Ce qui a été fait">
              <>
                <PostopStaffLine><strong>{brief.intervention.what}</strong></PostopStaffLine>
                <PostopStaffLine tone={PT_SUB}>
                  {[brief.intervention.when, brief.intervention.place, brief.intervention.day]
                    .filter(Boolean).join(' · ')}
                </PostopStaffLine>
                {brief.intervention.acts.map((act) => (
                  <PostopStaffLine key={act.code} tone={PT_SUB}>
                    {act.code} · {act.label}
                  </PostopStaffLine>
                ))}
                {brief.intervention.croDocumentId && (
                  <InlineAction onClick={() => onOpenDocument(brief.intervention.croDocumentId)}
                    style={{ display: 'flex', marginTop: 4, color: PT_ACCENT, fontWeight: 650 }}>
                    Lire le compte rendu opératoire
                  </InlineAction>
                )}
              </>
            </PostopStaffSection>
          )}

          {brief.episode && (
            <PostopStaffSection title="Où on en est">
              <PostopStaffLine tone={brief.episode.alert ? PT_DANGER : PT_INK}>
                {brief.episode.state}
              </PostopStaffLine>
            </PostopStaffSection>
          )}

          {brief.marquants.length > 0 && (
            <PostopStaffSection title="Depuis l’intervention">
              <>{brief.marquants.map((item) => (
                <PostopStaffLine key={item.id}>
                  <span className="mono" style={{ color: PT_SUB, fontSize: 10.5 }}>
                    {contract.dayLabel(item.dayKey, timeline.interventionDayKey)}
                  </span>
                  {' · '}{item.title}{item.detail ? ` · ${item.detail}` : ''}
                </PostopStaffLine>
              ))}</>
            </PostopStaffSection>
          )}

          {brief.traitements.length > 0 && (
            <PostopStaffSection title="Traitements du dossier">
              <>{brief.traitements.map((item) => (
                <PostopStaffLine key={item.label}>
                  {item.label}
                  {item.range && (
                    <span style={{ color: PT_SUB }}>{' · '}{item.range}</span>
                  )}
                </PostopStaffLine>
              ))}</>
            </PostopStaffSection>
          )}

          {(brief.aVenir.length > 0 || brief.nextControl) && (
            <PostopStaffSection title="Ce qui est prévu">
              <>
                {brief.nextControl && (
                  <PostopStaffLine>
                    Contrôle le {contract.dayTitle(brief.nextControl)}
                  </PostopStaffLine>
                )}
                {brief.aVenir.map((item) => (
                  <PostopStaffLine key={item.id} tone={PT_SUB}>
                    {contract.dayTitle(item.dayKey)} · {item.title}
                  </PostopStaffLine>
                ))}
              </>
            </PostopStaffSection>
          )}

          {brief.decisions.length > 0 && (
            <PostopStaffSection title="Déjà décidé en staff">
              <>{brief.decisions.map((item) => (
                <div key={`${item.when}:${item.what}`} style={{ marginBottom: 8 }}>
                  <PostopStaffLine tone={PT_SUB}>{item.when}</PostopStaffLine>
                  <div className="serif" style={{ color: PT_INK, fontSize: 13.5,
                    lineHeight: 1.5, whiteSpace: 'pre-wrap' }}>{item.decision}</div>
                </div>
              ))}</>
            </PostopStaffSection>
          )}

          <div style={{ marginTop: 4, color: PT_SUB, fontSize: 11.5, fontWeight: 500, lineHeight: 1.45 }}>
            Cette fiche se compose à l’ouverture, à partir du dossier. Rien n’y est saisi à
            part : ce que vous corrigez dans le dossier se corrige ici.
          </div>
        </>}

        {mode === 'plan' && <>
          <Field label="Motif" hint="Pré-rempli avec l’intervention suivie. Modifiable.">
            <input value={reason} onChange={(event) => setReason(event.target.value)}
              disabled={busy} aria-invalid={fieldErrors.reason ? 'true' : undefined}
              style={inputStyle(fieldErrors.reason)} />
          </Field>
          {fieldErrors.reason && <div role="alert" style={errorStyle}>{fieldErrors.reason}</div>}

          <Field label="Quand">
            <DayPicker id="postop-staff-when" aria-label="Date et heure du staff"
              value={when} withTime disabled={busy}
              todayKey={window.VascoPostopFollowUp.todayIso()}
              min={window.VascoPostopFollowUp.todayIso()}
              placeholder="Choisir une date"
              onChange={(value) => { setWhen(value); setFieldErrors({}); }} />
          </Field>
          {fieldErrors.stamp && <div role="alert" style={errorStyle}>{fieldErrors.stamp}</div>}

          <div className="mono" style={captionStyle}>Durée</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 14 }}>
            {contract.DURATION_CHOICES.map((minutes) => (
              <ChoiceChip key={minutes} selected={duration === minutes}
                onClick={() => { setDuration(minutes); setError(null); }}>
                {contract.durationLabel(minutes)}
              </ChoiceChip>
            ))}
          </div>

          <Field label="Lieu" hint="Facultatif. La salle de staff du service, par exemple.">
            <input value={place} onChange={(event) => setPlace(event.target.value)}
              disabled={busy} placeholder="Salle de staff" style={inputStyle(false)} />
          </Field>
        </>}

        {mode === 'decision' && <>
          {staffs.length === 0 && (
            <StatusNotice tone="info" title="Aucun staff sur ce dossier"
              message="Une décision se rattache au staff qui l’a prise. Programmez-le d’abord." />
          )}
          {staffs.length > 0 && <>
            <div className="mono" style={captionStyle}>Quel staff</div>
            {staffs.map((item) => (
              <InteractiveRow key={item.id} ariaLabel={`Choisir le staff du ${item.when}`}
                selected={chosen?.id === item.id}
                onClick={() => pickStaff(item)} style={{
                  width: '100%', padding: '11px 13px', marginBottom: 8, borderRadius: 12,
                  textAlign: 'left', fontFamily: 'inherit', cursor: 'pointer', display: 'block',
                }}>
                <div style={{ color: PT_INK, fontSize: 13.5, fontWeight: 650 }}>{item.what}</div>
                <div className="mono" style={{ marginTop: 3, color: PT_SUB, fontSize: 10 }}>
                  {item.when}{item.staffRcpDecision ? ' · décision notée' : ''}
                </div>
              </InteractiveRow>
            ))}

            <div style={{ marginTop: 14 }}>
              <Field label="La décision"
                hint="Le serveur l’horodate. Elle apparaît dans le fil à la date du staff.">
                <textarea value={decision} onChange={(event) => setDecision(event.target.value)}
                  rows={5} disabled={busy} maxLength={contract.DECISION_MAX}
                  placeholder="Reprise chirurgicale retenue, à programmer sous quinze jours. Bilan d’anesthésie à refaire."
                  aria-invalid={fieldErrors.decision ? 'true' : undefined}
                  style={{ ...inputStyle(fieldErrors.decision), resize: 'vertical', lineHeight: 1.45 }} />
              </Field>
              {fieldErrors.decision && <div role="alert" style={errorStyle}>{fieldErrors.decision}</div>}
            </div>
          </>}
        </>}

        {error && <div role="alert" style={{ marginTop: 10, color: PT_DANGER,
          fontSize: 12.5, fontWeight: 600, lineHeight: 1.4 }}>{error}</div>}

        <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
          <Button grow onClick={onClose} disabled={busy}>Fermer</Button>
          {mode !== 'brief' && <Button grow variant="solid" busy={busy}
            disabled={mode === 'decision' && staffs.length === 0}
            onClick={mode === 'plan' ? planStaff : saveDecision}>
            {mode === 'plan' ? 'Programmer' : 'Noter'}
          </Button>}
        </div>
      </div>
    </BottomSheet>
  );
}

function PostopTimelineTab({ p, accent, runtime = null }) {
  const { Button, StatusNotice, InlineAction, ChoiceChip } = window.VascoUI;
  const contract = window.VascoPostopTimeline;
  const [reloadToken, setReloadToken] = React.useState(0);
  const [scheduling, setScheduling] = React.useState(false);
  const [opened, setOpened] = React.useState(null);
  const shownRef = React.useRef(null);
  const [chosenIntervention, setChosenIntervention] = React.useState(null);
  const [staffing, setStaffing] = React.useState(false);
  const { status, sources, missing, error } = usePostopSources(p, runtime, reloadToken);


  // La feuille reste montée après la fermeture pour son animation de sortie :
  // elle garde donc la dernière ligne ouverte, retenue au rendu même où l’état
  // d’ouverture change.
  if (opened) shownRef.current = opened;
  const shown = shownRef.current;

  const timeZone = window.VASCO_RUNTIME?.dashboard?.time_zone || 'Europe/Paris';
  const interventions = React.useMemo(
    () => contract.interventionsOf(sources?.appointments),
    [contract, sources],
  );
  const intervention = React.useMemo(() => (
    interventions.find((item) => item.id === chosenIntervention)
    || contract.interventionOf(sources?.appointments)
  ), [contract, interventions, chosenIntervention, sources]);
  const interventionDayKey = intervention ? contract.dayKeyOf(intervention.startsAt, timeZone) : '';
  const { episode } = usePostopEpisode(p, runtime, interventionDayKey, reloadToken);

  const timeline = React.useMemo(() => (
    sources ? contract.buildTimeline(
      { ...sources, episode },
      { timeZone, interventionId: intervention?.id },
    ) : null
  ), [sources, episode, contract, timeZone, intervention]);

  if (status === 'loading') {
    return <div style={{ padding: '20px 24px 24px' }}>
      <div className="serif" style={{ fontSize: 14, color: PT_SUB, fontStyle: 'italic' }}>
        Chargement du suivi post-opératoire…
      </div>
    </div>;
  }

  if (status === 'error') {
    return <div style={{ padding: '20px 24px 24px' }}>
      <StatusNotice tone="danger" title="Suivi indisponible" message={error} />
      <InlineAction onClick={() => setReloadToken((token) => token + 1)}
        style={{ display: 'flex', marginTop: 10, color: PT_INK, textDecoration: 'underline' }}>
        Réessayer
      </InlineAction>
    </div>;
  }

  // Pas de chirurgie programmée, pas de suivi. L’écran ne fabrique pas un cadre
  // vide à remplir : il dit ce qui l’ouvrira.
  if (!timeline?.intervention) {
    return <div style={{ padding: '20px 24px 24px' }}>
      <div style={{ color: PT_INK, fontSize: 15, fontWeight: 700 }}>
        Aucune chirurgie programmée
      </div>
      <div className="serif" style={{ marginTop: 8, color: PT_SUB, fontSize: 14,
        fontStyle: 'italic', lineHeight: 1.5 }}>
        Le suivi s’ouvre tout seul dès qu’une intervention est posée dans l’agenda de ce
        dossier. Il n’y a rien à remplir ici en attendant.
      </div>
    </div>;
  }

  const shownIntervention = timeline.intervention;
  const offset = contract.daysBetween(timeline.interventionDayKey, timeline.todayKey);
  const situation = offset === null ? ''
    : offset === 0 ? 'Intervention aujourd’hui'
    : offset > 0 ? `J+${offset} après l’intervention`
    : `Intervention dans ${Math.abs(offset)} jour${Math.abs(offset) > 1 ? 's' : ''}`;

  // Le bandeau d’état de la V5, à sa place : l’état vient du serveur, qui le
  // calcule selon une règle versionnée. Le serveur rattache chaque épisode à
  // une opération ; sans épisode pour celle qu’on regarde, il n’y a pas d’état
  // à rapporter, et le bandeau reste neutre plutôt que d’annoncer une évolution
  // favorable que personne n’a constatée.
  const shownEpisode = timeline.episode;
  const alert = shownEpisode?.status === 'alert';
  const tone = !shownEpisode ? PT_STATUS.planned : (alert ? PT_STATUS.alert : PT_STATUS.done);
  const shortDate = (instant) => new Intl.DateTimeFormat('fr-FR', {
    day: '2-digit', month: '2-digit', timeZone,
  }).format(new Date(instant));

  return (
    <div style={{ paddingTop: 20 }}>
      {/* Un patient opéré plusieurs fois a plusieurs suites, et elles ne se
          mélangent pas. Le choix ne s’affiche que s’il y a vraiment à choisir. */}
      {timeline.interventions.length > 1 && (
        <div style={{ margin: '0 24px 16px' }}>
          <PCaption>Quelle intervention</PCaption>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 8 }}>
            {timeline.interventions.map((item) => (
              <ChoiceChip key={item.id} selected={item.id === shownIntervention.id}
                ariaLabel={`Suivre les suites de ${item.what} du ${item.when}`}
                onClick={() => setChosenIntervention(item.id)}>
                {item.what} · {shortDate(item.startsAt)}
              </ChoiceChip>
            ))}
          </div>
        </div>
      )}

      <section style={{
        display: 'flex', alignItems: 'center', gap: 12,
        margin: '0 24px 18px', padding: '12px 16px', borderRadius: 16,
        background: tone.bg, border: `1px solid ${shownEpisode ? tone.bg : PT_HAIR}`,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 12, background: tone.bg,
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={tone.dot}
            strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
            {alert
              ? <><path d="M12 4l10 17H2z" /><path d="M12 11v4" /></>
              : <path d="M22 12h-4l-3 9L9 3l-3 9H2" />}
          </svg>
        </div>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: shownEpisode ? tone.dot : PT_INK }}>
            {!shownEpisode ? situation : alert ? 'À surveiller' : 'Évolution favorable'}
          </div>
          <div style={{ fontSize: 12, fontWeight: 500, color: PT_SUB, marginTop: 2 }}>
            {shownEpisode ? `${situation} · ${shownIntervention.what}` : shownIntervention.what}
          </div>
          <div className="mono" style={{ fontSize: 9.5, fontWeight: 500, color: PT_SUB,
            marginTop: 3, letterSpacing: '0.3px' }}>
            {shownIntervention.when} · {shownIntervention.lieu}
          </div>
        </div>
      </section>

      {/* L’échéance de contrôle appartient à l’épisode de cette opération : elle
          ne s’affiche donc qu’avec elle, et se modifie sur le même épisode. */}
      {/* L’épisode est déjà lu plus haut pour le bandeau : le bloc le reçoit
          au lieu de redemander la même route au serveur, ce qui ajoutait un
          aller-retour en série après celui du fil. */}
      {shownEpisode && window.PostopNextControlBlock && (
        <window.PostopNextControlBlock p={p} accent={accent} runtime={runtime}
          interventionOn={timeline.interventionDayKey} loadedEpisode={shownEpisode} />
      )}

      <div style={{ display: 'flex', gap: 8, margin: '0 24px 20px' }}>
        <Button grow variant="solid" onClick={() => setScheduling(true)}>Ajouter</Button>
        <Button grow onClick={() => setStaffing(true)}>Staff</Button>
      </div>

      <div style={{ padding: '0 24px 24px' }}>
        <PCaption>Chronologie post-opératoire</PCaption>
        <div style={{ marginTop: 12 }}>
          <PostopTimelineRail days={timeline.days}
            interventionDayKey={timeline.interventionDayKey}
            onOpen={setOpened} />
        </div>

        <PostopTreatments treatments={timeline.treatmentsAside} />

        {/* Le fil est une lecture, pas un registre : le dire ici évite qu’on
            cherche plus tard où « ajouter un événement ». */}
        <div style={{ marginTop: 6, paddingTop: 12, borderTop: `1px solid ${PT_HAIR}`,
          color: PT_SUB, fontSize: 11.5, fontWeight: 500, lineHeight: 1.45 }}>
          Ce fil rassemble ce qui est déjà écrit dans le dossier : rendez-vous, notes,
          documents, séjours, rappels. « Ajouter » n’en propose que quatre parce que ce sont
          les quatre que le serveur sait enregistrer ; un séjour ou un geste s’écrit encore
          ailleurs, et un relevé de constantes nulle part.
          {missing.length > 0 && ` Non chargé pour l’instant : ${missing.join(', ')}.`}
        </div>
      </div>

      {shown && <PostopEntryDetail open={Boolean(opened)} patient={p} entry={shown} runtime={runtime}
        onClose={() => setOpened(null)}
        onChanged={() => setReloadToken((token) => token + 1)} />}

      <PostopScheduling open={scheduling} patient={p} appointments={sources?.appointments} runtime={runtime}
        onClose={() => setScheduling(false)}
        onDone={() => { setScheduling(false); setReloadToken((token) => token + 1); }} />

      <PostopStaff open={staffing} patient={p} appointments={sources?.appointments}
        intervention={shownIntervention} sources={sources} timeline={timeline} runtime={runtime}
        onClose={() => setStaffing(false)}
        onOpenDocument={(documentId) => {
          // Le compte rendu s’ouvre par la feuille de détail du fil, celle qui
          // sait déjà relire un document au serveur.
          const line = timeline.days.flatMap((day) => day.entries)
            .find((item) => item.id === `document:${documentId}`);
          setStaffing(false);
          setOpened(line || {
            id: `document:${documentId}`, kind: 'document', dayKey: timeline.interventionDayKey,
            title: 'Compte rendu opératoire', detail: '', source: '', status: 'done',
            ref: { kind: 'document', document: { id: documentId } },
          });
        }}
        onDone={() => { setStaffing(false); setReloadToken((token) => token + 1); }} />
    </div>
  );
}

// Le fil remplace l’onglet figé de la V5 : il ne s’y ajoute pas. L’ancienne
// chronologie, ses constantes, son bouton SMS jamais raccordé et son bouton
// « Appeler » disparaissent avec lui.
TabPostOp = PostopTimelineTab;
window.TabPostOp = PostopTimelineTab;