VASCO sécurise le document…

{progress?.label || 'Préparation du transfert'}

{progress?.value != null &&

}

; } function DocumentCategoryPicker({ runtime, value, onChange, disabled, onBusyChange }) { const contract = window.VascoDocumentImport; const [categories, setCategories] = React.useState([]); const [query, setQuery] = React.useState(''); const [busy, setBusy] = React.useState(true); const [error, setError] = React.useState(null); const createAttempt = React.useRef(null); React.useEffect(() => onBusyChange?.(busy), [busy, onBusyChange]); const load = React.useCallback(async () => { setBusy(true); try { const page = await runtime.categories(); setCategories(page.items); setError(null); return page.items; } catch (failure) { setError(failure?.message || 'Étiquettes indisponibles'); return []; } finally { setBusy(false); } }, [runtime]); React.useEffect(() => { void load(); }, [load]); const normalized = contract.normalizedCategoryName(query); const exact = categories.find((category) => contract.normalizedCategoryName(category.name) === normalized); const canCreate = Boolean(normalized && !exact && !busy && !disabled); const create = async (requestedName) => { const requestedNormalized = contract.normalizedCategoryName(requestedName); const requestedExact = categories.find( (category) => contract.normalizedCategoryName(category.name) === requestedNormalized, ); if (!requestedNormalized || requestedExact || busy || disabled) return; if (createAttempt.current?.normalized !== requestedNormalized) { createAttempt.current = { normalized: requestedNormalized, attempt: runtime.newAttempt() }; } setBusy(true); setError(null); try { const result = await runtime.createCategory(requestedName.trim(), createAttempt.current.attempt); setCategories((current) => [...current.filter((item) => item.id !== result.category.id), result.category].sort((a, b) => a.name.localeCompare(b.name, 'fr'))); onChange(result.category); setQuery(''); createAttempt.current = null; } catch (failure) { if (failure?.status === 409 && failure?.code === 'document_category_already_exists') { const fresh = await load(); const existing = fresh.find((category) => category.id === failure.detail?.existing_id || contract.normalizedCategoryName(category.name) === requestedNormalized); if (existing) { onChange(existing); setQuery(''); createAttempt.current = null; return; } } setError(contract.errorMessage(failure, failure?.message || 'Création impossible')); } finally { setBusy(false); } }; const { SearchSelect } = window.VascoUI; return

Étiquette (facultative)

{ setQuery(nextQuery.slice(0, 120)); createAttempt.current = null; }} onOpenChange={(nextOpen) => { if (!nextOpen) setQuery(''); }} onChange={(_categoryId, category) => onChange(category?.id ? category : null)} getOptionValue={(category) => category.id} getOptionLabel={(category) => category.name} searchPlaceholder="Rechercher ou créer une étiquette…" loading={busy && !categories.length} loadingLabel="Chargement des étiquettes…" error={error} emptyLabel="Aucune étiquette existante" onCreate={!busy && !disabled && (!normalized || canCreate) ? (name) => { if (!name) return false; console.info('[DocumentCategoryPicker] création demandée dans le dropdown', { nameLength: name.length, }); void create(name); return true; } : null} allowEmptyCreate createLabel={(name) => name ? `Créer « ${name} »` : 'Créer une étiquette'} createPosition="before" maxOptionsHeight={210} disabled={disabled} />

; } function DocumentTypePicker({ runtime, value, onChange, disabled = false }) { const { SimpleSelect } = window.VascoUI; const [catalogue, setCatalogue] = React.useState([]); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); React.useEffect(() => { let active = true; setLoading(true); runtime.documentTypes() .then((page) => { if (active) { setCatalogue(page.items); setError(null); } }) .catch((failure) => { if (active) setError(failure?.message || 'Types indisponibles'); }) .finally(() => { if (active) setLoading(false); }); return () => { active = false; }; }, [runtime]); const options = [['', 'Sans type / autre'], ...catalogue.map((item) => [item.code, item.label])]; return Type de document onChange(nextValue || null)} options={options} placeholder={loading ? 'Chargement des types…' : 'Sans type / autre'} disabled={disabled || loading || Boolean(error)} /> ; } function DocumentImportConfirm({ patient, items, review, setReview, runtime, busy, categoryBusy, setCategoryBusy, error, onSave, onReject, onRetake }) { const { Button } = window.VascoUI; return <>

1 ? `${items.length} p.` : null} />

Titre

setReview({ ...review, form: { ...review.form, title: event.target.value } })}
            style={{ width: '100%', resize: 'none', border: `1px solid ${DIMP_HAIR2}`, borderRadius: 12, padding: '9px 11px', background: DIMP_SURF, color: DIMP_INK, fontFamily: 'inherit', fontSize: 13, lineHeight: 1.35 }} />
        </div>
      </div>
      <DocumentTypePicker runtime={runtime} value={review.form.documentType} disabled={busy}
        onChange={(documentType) => setReview((current) => ({
          ...current, form: { ...current.form, documentType },
        }))} />
      <DocumentCategoryPicker runtime={runtime} value={review.form.category} disabled={busy}
        onBusyChange={setCategoryBusy} onChange={(category) => setReview((current) => ({ ...current, form: { ...current.form, category, categoryId: category?.id || null } }))} />
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, marginTop: 16 }}>
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={DIMP_SUB}
          strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4M12 8h.01" /></svg>
        <span style={{ fontSize: 11.5, fontWeight: 500, color: DIMP_SUB, lineHeight: 1.35 }}>
          Le document original fait foi. Vasco conserve chaque page et ne fabrique aucune lecture automatique.
        </span>
      </div>
      <DocumentImportError message={error} />
    </div>
    <div style={{ padding: '0 20px 12px', flexShrink: 0 }}>
      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
        <Button grow variant="danger" onClick={onReject} disabled={busy || categoryBusy}>Rejeter</Button>
        <Button grow onClick={onRetake} disabled={busy || categoryBusy}>Reprendre</Button>
      </div>
      <Button grow variant="solid" onClick={onSave}
        disabled={categoryBusy || !review.form.title.trim()} busy={busy}
        style={{ width: '100%' }}>
        Ajouter au dossier ✓
      </Button>
    </div>
  </>;
}

React.useEffect(() => storeRef.current.subscribe((draft) => setItems(draft.items)), []);
  React.useEffect(() => () => { storeRef.current.clear(); returnFocus.current?.focus?.(); }, []);
  const perform = (task) => {
    if (actionRef.current) return actionRef.current;
    setBusy(true); setError(null);
    actionRef.current = Promise.resolve().then(task).finally(() => { actionRef.current = null; setBusy(false); });
    return actionRef.current;
  };
  const cancelReview = async () => {
    if (currentImport?.state !== 'review') return true;
    try { await runtime.cancel(patient.id, currentImport, cancelAttempt.current); return true; }
    catch (failure) { setError(window.VascoDocumentImport.errorMessage(failure, failure?.message || 'Annulation impossible')); return false; }
  };
  const close = () => perform(async () => {
    if (await cancelReview()) { storeRef.current.clear(); onClose(); }
  });
  React.useEffect(() => {
    const keydown = (event) => {
      if (event.key !== 'Tab') return;
      const focusable = Array.from(dialogRef.current?.querySelectorAll('button:not([disabled]),input:not([disabled]),textarea:not([disabled])') || []);
      if (!focusable.length) return;
      const first = focusable[0]; const last = focusable[focusable.length - 1];
      if (event.shiftKey && window.document.activeElement === first) { event.preventDefault(); last.focus(); }
      else if (!event.shiftKey && window.document.activeElement === last) { event.preventDefault(); first.focus(); }
    };
    window.addEventListener('keydown', keydown);
    return () => window.removeEventListener('keydown', keydown);
  }, [busy, categoryBusy, currentImport]);

return <DocumentImportShell step={step} dialogRef={dialogRef} onClose={close}
    busy={busy || categoryBusy}>
    {step === 'sources' && <DocumentImportSources patient={patient} onSelect={selectFiles} onClose={close} error={error} />}
    {step === 'pages' && <DocumentImportPages patient={patient} items={items} store={storeRef.current}
      onSelect={selectFiles} onContinue={() => void upload()} onBack={backToSources} onClose={close}
      error={error} busy={busy} />}
    {step === 'processing' && <DocumentImportProcessing progress={progress} />}
    {step === 'confirm' && review && <DocumentImportConfirm patient={patient} items={items} review={review}
      setReview={setReview} runtime={runtime} busy={busy} categoryBusy={categoryBusy} setCategoryBusy={setCategoryBusy}
      error={error} onSave={() => void confirm()} onReject={() => void close()} onRetake={() => void retake()} />}
  </DocumentImportShell>;
}

React.useEffect(() => () => returnFocus.current?.focus?.(), []);
  React.useEffect(() => {
    const keydown = (event) => {
      if (event.key !== 'Tab') return;
      const focusable = Array.from(dialogRef.current?.querySelectorAll(
        'button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled])',
      ) || []);
      if (!focusable.length) return;
      const first = focusable[0]; const last = focusable[focusable.length - 1];
      if (event.shiftKey && window.document.activeElement === first) { event.preventDefault(); last.focus(); }
      else if (!event.shiftKey && window.document.activeElement === last) { event.preventDefault(); first.focus(); }
    };
    window.addEventListener('keydown', keydown);
    return () => window.removeEventListener('keydown', keydown);
  }, [busy, categoryBusy, onClose]);

return <DocumentImportShell step="write" dialogRef={dialogRef} onClose={close}
    busy={busy || categoryBusy}>
    <DocumentImportHeader title="Rédiger un document" patient={patient} onClose={close} />
    <div className="vasco-scroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '4px 20px 16px' }}>
      <label style={{ display: 'block' }}>
        <span className="mono" style={{ display: 'block', marginBottom: 6, color: DIMP_SUB, fontSize: 9.5, fontWeight: 600, letterSpacing: '.5px', textTransform: 'uppercase' }}>Titre</span>
        <input autoFocus value={draft.title} maxLength="200" onChange={(event) => setDraft({ ...draft, title: event.target.value })}
          placeholder="Titre du document" style={{ width: '100%', minHeight: 44, border: `1px solid ${DIMP_HAIR2}`, borderRadius: 12, padding: '0 12px', background: DIMP_SURF, color: DIMP_INK, fontFamily: 'inherit', fontSize: 13 }} />
      </label>
      <DocumentTypePicker runtime={patientRuntime.documentImport} value={draft.documentType} disabled={busy}
        onChange={(documentType) => setDraft({ ...draft, documentType })} />
      <DocumentCategoryPicker runtime={patientRuntime.documentImport} value={draft.category} disabled={busy}
        onBusyChange={setCategoryBusy} onChange={(category) => setDraft({
          ...draft, category, categoryId: category?.id || null,
        })} />
      <label style={{ display: 'block', marginTop: 14 }}>
        <span className="mono" style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6, color: DIMP_SUB, fontSize: 9.5, fontWeight: 600, letterSpacing: '.5px', textTransform: 'uppercase' }}>
          <span>Contenu</span><span>{draft.content.length.toLocaleString('fr-FR')} / 100 000</span>
        </span>
        <textarea value={draft.content} maxLength="100000" rows="12"
          onChange={(event) => setDraft({ ...draft, content: event.target.value })}
          placeholder="Saisissez le contenu du document sans interprétation automatique."
          style={{ width: '100%', minHeight: 250, resize: 'vertical', border: `1px solid ${DIMP_HAIR2}`, borderRadius: 14, padding: '12px', background: DIMP_SURF, color: DIMP_INK, fontFamily: 'inherit', fontSize: 13.5, lineHeight: 1.55 }} />
      </label>
      <div style={{ marginTop: 10, color: DIMP_SUB, fontSize: 11.5, lineHeight: 1.45 }}>
        Le document sera créé avec le statut « À valider » et devra être relu avant validation.
      </div>
      <DocumentImportError message={error} />
    </div>
    <div style={{ display: 'flex', gap: 8, padding: '0 20px 12px', flexShrink: 0 }}>
      <Button grow onClick={close} disabled={busy || categoryBusy}>Annuler</Button>
      <Button grow variant="solid" onClick={() => void save()}
        disabled={categoryBusy || !draft.title.trim() || !draft.content.trim()}
        busy={busy} busyLabel="Création…">Créer le document</Button>
    </div>
  </DocumentImportShell>;
}

function documentImportStatus(status) {
  return ({
    draft: { label: 'Brouillon', color: DIMP_SUB, background: DIMP_HAIR },
    in_progress: { label: 'En cours', color: '#9a6700', background: 'rgba(217,119,6,.10)' },
    awaiting_validation: { label: 'À valider', color: '#9a6700', background: 'rgba(217,119,6,.10)' },
    validated: { label: 'Validé', color: DIMP_MED, background: DIMP_MED_TINT },
    archived: { label: 'Archivé', color: DIMP_SUB, background: DIMP_HAIR },
  })[status] || { label: status || 'État inconnu', color: DIMP_SUB, background: DIMP_HAIR };
}

function documentValidationReason(capability) {
  if (!capability) return 'Vérification du droit de validation…';
  return ({
    role_not_supported: 'Votre rôle ne permet pas de valider ce document.',
    feature_unavailable: 'La validation des documents est indisponible.',
    source_unavailable: 'La source du document est indisponible.',
    patient_archived: 'Le dossier patient est archivé.',
    patient_deceased: 'Le dossier patient ne peut plus être modifié.',
    document_unavailable: 'Le contenu du document est indisponible.',
    document_state_changed: 'Le statut du document a changé.',
    document_not_owned: 'Ce document ne vous est pas attribué.',
  })[capability.reason_code] || 'La validation de ce document est indisponible.';
}

function documentContentEditReason(capability) {
  if (!capability) return 'Vérification du droit de modification…';
  return ({
    document_archived: 'Un document archivé ne peut pas être modifié.',
    document_unavailable: 'Le contenu de ce document est indisponible.',
    document_type_unsupported: 'Ce format de document ne peut pas être modifié ici.',
    document_not_owned: 'Ce document est attribué à un autre praticien.',
    historical_version: 'Une ancienne version reste consultable, mais seule la version actuelle est modifiable.',
  })[capability.reason_code] || 'Le contenu de ce document ne peut pas être modifié.';
}

// Le serveur fournit un texte documentaire, pas une analyse structurée. On ne
// fabrique donc ni résumé ni valeurs : les intitulés déjà présents dans le
// document sont seulement séparés de leurs paragraphes pour accélérer la lecture.
function documentImportContentBlocks(content) {
  return String(content || '').trim().split(/\n{2,}/).filter(Boolean).map((part) => {
    const lines = part.split('\n').map((line) => line.trim()).filter(Boolean);
    const first = lines[0] || '';
    const isHeading = lines.length > 1
      && first.length <= 80
      && /[A-ZÀ-ÖØ-Þ]/.test(first)
      && first === first.toLocaleUpperCase('fr-FR');
    return isHeading
      ? { heading: first, text: lines.slice(1).join('\n') }
      : { heading: null, text: lines.join('\n') };
  });
}

function documentImportTypeLabel(document) {
  return document.document_type_label
    || (document.document_type === 'STAFF' ? 'Staff' : document.document_type)
    || 'Autre';
}

function documentCCAMError(error) {
  if (error?.code === 'request_cancelled') return null;
  if (error?.status === 401) return 'Votre session a expiré. Reconnectez-vous.';
  if (error?.status === 403 || error?.status === 404) {
    return 'Le codage CCAM de ce dossier n’est plus accessible.';
  }
  return 'Le codage CCAM est momentanément indisponible.';
}

function documentCCAMDate(value) {
  if (!value) return '–';
  return new Intl.DateTimeFormat('fr-FR', {
    day: '2-digit', month: '2-digit', year: 'numeric',
  }).format(new Date(value));
}

function documentCCAMMoney(minor, currency) {
  if (minor === null || minor === undefined) return 'Tarif non publié';
  return new Intl.NumberFormat('fr-FR', {
    style: 'currency', currency, minimumFractionDigits: 2, maximumFractionDigits: 2,
  }).format(minor / 100);
}

function documentCCAMBilledMinor(act) {
  if (act.amountMinor === null || act.billingRateBasisPoints === null) return null;
  return Math.floor((act.amountMinor * act.billingRateBasisPoints + 5_000) / 10_000);
}

function documentCCAMRate(act) {
  const rate = act.billingRateBasisPoints;
  if (rate === null || rate === undefined) return null;
  if (rate === 0) return 'Non facturable à ce rang';
  return `${rate / 100} %`;
}

async function documentCCAMCodings(runtime, patientId, signal) {
  const pageSize = 100;
  let pageNumber = 1;
  let result = await runtime.ccamCodings.list(patientId, {
    page: pageNumber, pageSize, signal,
  });
  let items = result.items;
  while (pageNumber < result.totalPages) {
    pageNumber += 1;
    result = await runtime.ccamCodings.list(patientId, {
      page: pageNumber, pageSize, signal,
    });
    items = VascoPatientCCAMCodings.mergePage({ items }, result).items;
  }
  return items;
}

function documentCCAMActCount(codings) {
  return codings.reduce((total, coding) => total + coding.acts.length, 0);
}

function DocumentCCAMEditor({ coding, patient, onClose, onCodingUpdated }) {
  const { FormSheet, tokens } = window.VascoUI;
  const [message, setMessage] = React.useState(null);
  const [error, setError] = React.useState(null);

React.useEffect(() => {
    let live = true;
    setMessage(null);
    setError(null);
    if (!coding?.conversationId || !coding?.id) {
      setError('La carte de codage liée à ce CRO est indisponible.');
      return () => { live = false; };
    }
    window.VascoApi.assistant.getConversation(coding.conversationId)
      .then((conversation) => {
        if (!live) return;
        const exact = (conversation.messages || []).find(
          (message) => message.widgetId === coding.id && message.widget === 'ccam',
        );
        if (!exact) {
          setError('La carte de codage liée à ce CRO est introuvable.');
          return;
        }
        setMessage(exact);
      })
      .catch((failure) => {
        if (live) setError(failure?.message || 'Le codage CCAM ne peut pas être chargé.');
      });
    return () => { live = false; };
  }, [coding.id, coding.conversationId]);

const applyWidgetUpdate = (widget) => {
    setMessage((current) => current ? {
      ...current,
      data: widget.data,
      widgetId: widget.id,
      widgetVersion: widget.version,
      widgetStatus: widget.status,
      widgetCapabilities: widget.capabilities || [],
      widgetCroDocumentId: widget.cro_document_id
        || widget.data?._vasco_cro_document_id
        || null,
    } : current);
    onCodingUpdated?.(widget);
  };

return ReactDOM.createPortal(
    <FormSheet title="Modifier le codage CCAM"
      subtitle={`${patient.first} ${patient.last} · ${coding.intervention}`}
      onClose={onClose} maxHeight="92%" zIndex={tokens.layer.nestedOverlay}>
      {!message && !error && <div role="status" style={{
        padding: '18px 0', color: DIMP_SUB, fontSize: 12.5, textAlign: 'center',
      }}>Chargement du codage…</div>}
      {error && <div role="alert" style={{
        padding: '11px 12px', borderRadius: 12,
        background: 'rgba(166,60,47,.07)', color: DIMP_DANGER,
        fontSize: 12.5, lineHeight: 1.45,
      }}>{error}</div>}
      {message && window.VascoCCAMWidgetEditor &&
        <window.VascoCCAMWidgetEditor msg={message} runtime={window.VascoApi.assistant}
          onWidgetUpdated={applyWidgetUpdate} allowCroSelection={false} />}
    </FormSheet>,
    document.getElementById('root'),
  );
}

function DocumentImportDocumentDetail({ patient, document: initialDocument, patientRuntime,
  ccamCodings, ccamLoading, ccamError, onBack, onDocumentUpdated, onCCAMUpdated }) {
  const { Button } = window.VascoUI;
  const [document, setDocument] = React.useState(initialDocument);
  const [editingCategory, setEditingCategory] = React.useState(false);
  const [draftCategory, setDraftCategory] = React.useState(initialDocument.category || null);
  const [categoryBusy, setCategoryBusy] = React.useState(false);
  const [categorySaving, setCategorySaving] = React.useState(false);
  const [categoryError, setCategoryError] = React.useState(null);
  const [review, setReview] = React.useState(null);
  const [reviewLoading, setReviewLoading] = React.useState(initialDocument.status === 'awaiting_validation');
  const [validationBusy, setValidationBusy] = React.useState(false);
  const [validationError, setValidationError] = React.useState(null);
  const [validationNotice, setValidationNotice] = React.useState(null);
  const [validationWarning, setValidationWarning] = React.useState(null);
  const [editingContent, setEditingContent] = React.useState(false);
  const [draftContent, setDraftContent] = React.useState(initialDocument.content || '');
  const [contentSaving, setContentSaving] = React.useState(false);
  const [contentError, setContentError] = React.useState(null);
  const [contentNotice, setContentNotice] = React.useState(null);
  const [contentWarning, setContentWarning] = React.useState(null);
  const [pdfBusy, setPdfBusy] = React.useState(null);
  const [pdfError, setPdfError] = React.useState(null);
  const categoryAttempt = React.useRef(null);
  const contentAttempt = React.useRef(null);
  const label = documentImportTypeLabel(document);
  const date = documentImportDetailDate(document.created_at);
  const status = documentImportStatus(document.status);
  const originals = document.originals || [];
  const hasOriginals = window.VascoDocumentImport.hasDocumentOriginals(originals);
  // Pour un document à valider, le texte rendu est exactement celui renvoyé
  // avec l'empreinte de relecture par le dashboard. On ne valide jamais le
  // contenu plus ancien éventuellement reçu par la fiche patient.
  const reviewContent = document.status === 'awaiting_validation'
    ? (review?.content ?? (reviewLoading ? null : document.content))
    : document.content;
  const blocks = documentImportContentBlocks(reviewContent);
  const dialogRef = React.useRef(null);
  const closeRef = React.useRef(null);
  const validationButtonRef = React.useRef(null);
  const contentEditButtonRef = React.useRef(null);
  const contentEditorRef = React.useRef(null);
  const validationInFlight = React.useRef(false);
  const contentInFlight = React.useRef(false);
  const reviewRequestId = React.useRef(0);
  const returnFocus = React.useRef(window.document.activeElement);
  const categoryChanged = (draftCategory?.id || null) !== (document.category?.id || null);
  const globalValidationCapability = patientRuntime.reportReview?.capabilities?.() || null;
  const documentValidationCapability = review?.capabilities?.validate || null;
  const validationAllowed = document.status === 'awaiting_validation'
    && globalValidationCapability?.enabled !== false
    && documentValidationCapability?.enabled === true
    && Boolean(review?.content_sha256);
  const contentCapability = document.capabilities?.edit_content || null;
  const contentEditAllowed = contentCapability?.enabled === true
    && Boolean(patientRuntime.documentContent?.update);
  const normalizedDraftContent = window.VascoDocumentImport.normalizeEditableContent(draftContent);
  const contentChanged = window.VascoDocumentImport.contentHasChanges(
    document.content, normalizedDraftContent,
  );
  const contentWithinLimit = normalizedDraftContent.length > 0
    && normalizedDraftContent.length <= window.VascoDocumentImport.CONTENT_MAX_LENGTH;
  const pdfAvailable = window.VascoDocumentImport.canGeneratePdf(document)
    && Boolean(patientRuntime.documentPdf);

// La relecture automatique n'a lieu qu'à l'ouverture d'un autre document.
  // Les changements de version internes (catégorie, conflit) appellent
  // explicitement la même fonction : un seul GET est donc actif à la fois.
  React.useEffect(() => {
    setDocument(initialDocument);
    setDraftCategory(initialDocument.category || null);
    setDraftContent(initialDocument.content || '');
    setEditingContent(false);
    setContentError(null);
    setContentNotice(null);
    setContentWarning(null);
    contentAttempt.current = null;
    setValidationNotice(null);
    setValidationWarning(null);
    void loadValidationReview(initialDocument);
    return () => { reviewRequestId.current += 1; };
  }, [initialDocument.id, patientRuntime]);

const cancelCategoryEdit = () => {
    setDraftCategory(document.category || null);
    setEditingCategory(false);
    setCategoryError(null);
    categoryAttempt.current = null;
  };

const startContentEdit = () => {
    if (!contentEditAllowed) return;
    setDraftContent(reviewContent ?? document.content ?? '');
    setEditingContent(true);
    setContentError(null);
    setContentNotice(null);
    setContentWarning(null);
    contentAttempt.current = null;
    window.setTimeout(() => contentEditorRef.current?.focus(), 0);
  };

const cancelContentEdit = () => {
    setDraftContent(document.content || '');
    setEditingContent(false);
    setContentError(null);
    contentAttempt.current = null;
    window.setTimeout(() => contentEditButtonRef.current?.focus(), 0);
  };

// La mutation est acquise avant toute resynchronisation secondaire.
    const committed = window.VascoDocumentImport.applyContentUpdateResult(document, updated);
    reviewRequestId.current += 1;
    setDocument(committed);
    setDraftCategory(committed.category || null);
    setDraftContent(committed.content);
    setEditingContent(false);
    setReview(null);
    setReviewLoading(true);
    setContentNotice('Contenu enregistré. Le document doit être relu puis validé.');
    contentAttempt.current = null;
    onDocumentUpdated?.(committed);

// À partir d'ici la commande serveur a réussi. Son résultat est appliqué
    // avant toute lecture secondaire : aucun problème de resynchronisation ne
    // peut réafficher le bouton ni être présenté comme un refus de validation.
    reviewRequestId.current += 1;
    const committed = window.VascoDocumentImport.applyValidationResult(document, validated);
    setDocument(committed);
    setDraftCategory(committed.category || null);
    setReview(null);
    setReviewLoading(false);
    setValidationNotice('Document validé.');
    onDocumentUpdated?.(committed);

React.useEffect(() => {
    closeRef.current?.focus();
    const keydown = (event) => {
      if (event.key !== 'Tab') return;
      const focusable = Array.from(dialogRef.current?.querySelectorAll('button:not([disabled]),object') || []);
      if (!focusable.length) return;
      const first = focusable[0]; const last = focusable[focusable.length - 1];
      if (event.shiftKey && window.document.activeElement === first) { event.preventDefault(); last.focus(); }
      else if (!event.shiftKey && window.document.activeElement === last) { event.preventDefault(); first.focus(); }
    };
    window.addEventListener('keydown', keydown);
    return () => { window.removeEventListener('keydown', keydown); returnFocus.current?.focus?.(); };
  }, [onBack]);

return <DocumentImportShell step="detail" dialogRef={dialogRef} onClose={onBack}>
    <DocumentImportHeader title={label} patient={patient}
      sub={`${patient.last} ${patient.first}${date ? ` · ${date}` : ''}`}
      onClose={onBack} closeRef={closeRef} />

<div className="vasco-scroll" style={{
      flex: 1, minHeight: 0, overflowY: 'auto', padding: '0 20px 22px',
    }}>
      <h2 style={{
        margin: '2px 0 0', fontSize: 18, fontWeight: 700, color: DIMP_INK,
        letterSpacing: '-.3px', lineHeight: 1.3,
      }}>{document.title}</h2>

<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 7, marginTop: 9 }}>
        <span className="mono" style={{
          padding: '4px 8px', borderRadius: 7, background: status.background,
          color: status.color, fontSize: 9.5, fontWeight: 700,
          letterSpacing: '.45px', textTransform: 'uppercase',
        }}>{status.label}</span>
        <span className="mono" style={{ fontSize: 10.5, fontWeight: 600, color: DIMP_SUB }}>
          Version {document.version}
        </span>
        {document.author?.display_name && <span style={{ fontSize: 11.5, fontWeight: 500, color: DIMP_SUB }}>
          · {document.author.display_name}
        </span>}
      </div>

<div style={{
        marginTop: 18, padding: '12px 13px', border: `1px solid ${DIMP_HAIR2}`,
        borderRadius: 14, background: DIMP_SURF,
      }}>
        {!editingCategory ? <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ flex: 1, minWidth: 0 }}>
            <span className="mono" style={{
              display: 'block', fontSize: 9.5, fontWeight: 700, color: DIMP_SUB,
              letterSpacing: '.5px', textTransform: 'uppercase',
            }}>Étiquette</span>
            <span style={{
              display: 'block', marginTop: 4, fontSize: 13.5, fontWeight: 650,
              color: DIMP_INK, ...DIMP_TRUNCATE,
            }}>{document.category?.name || 'Sans étiquette'}</span>
          </span>
          <Button size="small" onClick={() => {
            setDraftCategory(document.category || null);
            setEditingCategory(true);
            setCategoryError(null);
          }} style={{ color: DIMP_MED }}>Modifier</Button>
        </div> : <>
          <DocumentCategoryPicker runtime={patientRuntime.documentImport} value={draftCategory}
            disabled={categorySaving} onBusyChange={setCategoryBusy}
            onChange={(category) => {
              setDraftCategory(category);
              setCategoryError(null);
              categoryAttempt.current = null;
            }} />
          <DocumentImportError message={categoryError} />
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 12 }}>
            <Button size="medium" onClick={cancelCategoryEdit} disabled={categorySaving}>Annuler</Button>
            <Button size="medium" variant="solid" onClick={() => void saveCategory()}
              disabled={!categoryChanged || categoryBusy} busy={categorySaving}
              busyLabel="Enregistrement…">Enregistrer</Button>
          </div>
        </>}
      </div>

{hasOriginals && <>
        <div className="mono" style={{
          marginTop: 22, fontSize: 9.5, fontWeight: 700, color: DIMP_SUB,
          letterSpacing: '.55px', textTransform: 'uppercase',
        }}>Document original</div>
        <div style={{
          marginTop: 8, padding: '10px 12px', borderRadius: 12,
          background: '#fff8e8', color: DIMP_INK, fontSize: 11.5, fontWeight: 500, lineHeight: 1.45,
        }}>Le document original fait foi. Le texte ci-dessous facilite sa lecture sans le remplacer.</div>

{originals.map((original) => <div key={original.position} style={{
          marginTop: 10, overflow: 'hidden', border: `1px solid ${DIMP_HAIR2}`,
          borderRadius: DIMP_VT.rLg || 16, background: DIMP_SURF,
        }}>
          <div style={{
            padding: '9px 11px', borderBottom: `1px solid ${DIMP_HAIR}`,
            fontSize: 11.5, fontWeight: 700, color: DIMP_INK, ...DIMP_TRUNCATE,
          }}>{original.filename} · {original.page_count} page(s)</div>
          <DocumentImportOriginal patientId={patient.id} documentId={document.id}
            original={original} runtime={patientRuntime.documentImport} />
        </div>)}
      </>}

<div style={{
        marginTop: 24, paddingTop: 18, borderTop: `1px solid ${DIMP_HAIR2}`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div className="mono" style={{
          flex: 1, fontSize: 9.5, fontWeight: 700, color: DIMP_SUB,
          letterSpacing: '.55px', textTransform: 'uppercase',
        }}>Contenu du document</div>
        {!editingContent && <Button buttonRef={contentEditButtonRef} size="small"
          onClick={startContentEdit} disabled={!contentEditAllowed || reviewLoading}
          title={!contentEditAllowed ? documentContentEditReason(contentCapability) : undefined}
          aria-describedby={!contentEditAllowed ? 'document-content-edit-reason' : undefined}
          style={{ color: DIMP_MED }}>Modifier le contenu</Button>}
      </div>

{!contentEditAllowed && <div id="document-content-edit-reason" style={{
        marginTop: 7, color: DIMP_SUB, fontSize: 11.5, lineHeight: 1.4,
      }}>{documentContentEditReason(contentCapability)}</div>}

{reviewLoading && <div role="status" aria-live="polite" style={{
        marginTop: 12, color: DIMP_SUB, fontSize: 12.5, fontWeight: 600,
      }}>Chargement du contenu à relire…</div>}

{editingContent ? <div style={{ marginTop: 11 }}>
        <textarea ref={contentEditorRef} value={draftContent}
          maxLength={window.VascoDocumentImport.CONTENT_MAX_LENGTH}
          aria-label="Contenu textuel du document"
          aria-describedby="document-content-counter"
          onChange={(event) => {
            setDraftContent(event.target.value);
            setContentError(null);
            contentAttempt.current = null;
          }} disabled={contentSaving} style={{
            display: 'block', width: '100%', minHeight: 260, resize: 'vertical',
            padding: '13px 14px', boxSizing: 'border-box',
            border: `1px solid ${contentError ? DIMP_DANGER : DIMP_HAIR2}`,
            borderRadius: 14, background: DIMP_SURF, color: DIMP_INK,
            fontFamily: 'Georgia, serif', fontSize: 14.5, lineHeight: 1.55,
            outlineColor: DIMP_MED,
          }} />
        <div id="document-content-counter" className="mono" style={{
          marginTop: 6, color: contentWithinLimit ? DIMP_SUB : DIMP_DANGER,
          fontSize: 9.5, textAlign: 'right',
        }}>{normalizedDraftContent.length.toLocaleString('fr-FR')} / {window.VascoDocumentImport.CONTENT_MAX_LENGTH.toLocaleString('fr-FR')}</div>
        <DocumentImportError message={contentError} />
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 12 }}>
          <Button size="medium" onClick={cancelContentEdit} disabled={contentSaving}>Annuler</Button>
          <Button size="medium" variant="solid" onClick={() => void saveContent()}
            disabled={!contentChanged || !contentWithinLimit} busy={contentSaving}
            busyLabel="Enregistrement…">Enregistrer</Button>
        </div>
      </div> : !reviewLoading && blocks.length ? <div style={{ marginTop: 10 }}>
        {blocks.map((block, index) => <div key={`${block.heading || 'texte'}-${index}`}
          style={{ marginTop: index ? 17 : 0 }}>
          {block.heading && <div className="mono" style={{
            marginBottom: 6, fontSize: 10, fontWeight: 700, color: DIMP_MED,
            letterSpacing: '.45px', textTransform: 'uppercase',
          }}>{block.heading}</div>}
          <div className="serif" style={{
            whiteSpace: 'pre-wrap', color: DIMP_INK, fontSize: 14.5,
            lineHeight: 1.58,
          }}>{block.text}</div>
        </div>)}
      </div> : !reviewLoading && <div className="serif" style={{
        marginTop: 10, color: DIMP_SUB, fontSize: 13.5, fontStyle: 'italic',
      }}>Aucun contenu textuel disponible.</div>}

{!editingContent && <DocumentImportError message={validationError} />}
      {contentNotice && !editingContent && <div role="status" aria-live="polite" style={{
        marginTop: 12, padding: '10px 12px', borderRadius: 12,
        background: DIMP_MED_TINT, color: DIMP_MED, fontSize: 12, fontWeight: 650,
      }}>{contentNotice}</div>}
      {contentWarning && !editingContent && <div role="alert" style={{
        marginTop: 8, padding: '10px 12px', borderRadius: 12,
        background: 'rgba(217,119,6,.09)', color: '#8a5700',
        fontSize: 12, fontWeight: 600, lineHeight: 1.4,
      }}>{contentWarning}</div>}
      {validationNotice && <div role="status" aria-live="polite" style={{
        marginTop: 12, padding: '10px 12px', borderRadius: 12,
        background: DIMP_MED_TINT, color: DIMP_MED, fontSize: 12, fontWeight: 650,
      }}>{validationNotice}</div>}
      {validationWarning && <div role="alert" style={{
        marginTop: 8, padding: '10px 12px', borderRadius: 12,
        background: 'rgba(217,119,6,.09)', color: '#8a5700',
        fontSize: 12, fontWeight: 600, lineHeight: 1.4,
      }}>{validationWarning}</div>}

{document.document_type === 'CRO' && <DocumentCCAMSection
        patient={patient} documentId={document.id} codings={ccamCodings}
        loading={ccamLoading} error={ccamError} onCodingUpdated={onCCAMUpdated} />}

{pdfAvailable && !editingContent && <>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 16,
        }}>
          <Button size="medium" grow onClick={() => void openPdf(false)}
            disabled={Boolean(pdfBusy)} busy={pdfBusy === 'preview'}
            busyLabel="Ouverture…">Aperçu PDF</Button>
          <Button size="medium" grow variant="accent-soft" onClick={() => void openPdf(true)}
            disabled={Boolean(pdfBusy)} busy={pdfBusy === 'download'}
            busyLabel="Préparation…">Télécharger PDF</Button>
        </div>
        <DocumentImportError message={pdfError} />
      </>}

{!editingContent && document.status === 'awaiting_validation' && validationAllowed && <Button
        buttonRef={validationButtonRef} variant="solid" grow
        onClick={() => void validateDocument()} busy={validationBusy}
        busyLabel="Validation…" style={{ width: '100%', marginTop: 16 }}>
        Valider ce document
      </Button>}
    </div>
  </DocumentImportShell>;
}

function DocumentImportResume(props) {
  return <DocumentImportProvider props={props}>
    <DocumentImportBaseResume {...props} />
  </DocumentImportProvider>;
}

React.useEffect(() => {
    let live = true;
    setBusy(true);
    runtime.documents(p.id, filter)
      .then((page) => {
        if (!live) return;
        setDocs(page.items);
        setCounts(page.counts);
        setError(null);
      })
      .catch((failure) => { if (live) setError(failure?.message || 'Documents indisponibles'); })
      .finally(() => { if (live) setBusy(false); });
    return () => { live = false; };
  }, [runtime, p.id, filter, revision]);

React.useEffect(() => {
    const controller = new AbortController();
    let live = true;
    setCCAMLoading(true);
    setCCAMError(null);
    documentCCAMCodings(runtime, p.id, controller.signal)
      .then((items) => { if (live) setCCAMCodings(items); })
      .catch((failure) => {
        if (live) setCCAMError(documentCCAMError(failure));
      })
      .finally(() => { if (live) setCCAMLoading(false); });
    return () => {
      live = false;
      controller.abort();
    };
  }, [runtime, p.id, revision]);

if (opened) {
    return ReactDOM.createPortal(
      <DocumentImportDocumentDetail patient={p} document={opened}
        patientRuntime={runtime} ccamCodings={ccamCodings}
        ccamLoading={ccamLoading} ccamError={ccamError}
        onBack={() => setOpened(null)}
        onDocumentUpdated={(updated) => { setOpened(updated); onDocumentUpdated?.(updated); }}
        onCCAMUpdated={() => onDocumentUpdated?.(opened)} />,
      document.getElementById('root'),
    );
  }

const importDisabled = !entry?.capabilities?.enabled;
  const importReason = entry?.error || documentImportReason(entry?.capabilities);

return <div>
    <div className="vasco-scroll" style={{
      display: 'flex', gap: 6, padding: '16px 24px 12px', overflowX: 'auto',
    }}>
      {types.map((type) => {
        const active = filter === type;
        const count = counts?.[type] ?? counts?.[type.toLowerCase()];
        return <ChoiceChip key={type} selected={active}
          onClick={() => setFilter(type)} style={{ flexShrink: 0 }}>
          {labels[type]}{count !== undefined ? ` ${count}` : ''}
        </ChoiceChip>;
      })}
    </div>

<div style={{ padding: '0 24px 24px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 14 }}>
        <Button disabled={importDisabled}
          ariaLabel={importDisabled && importReason ? `Importer – ${importReason}` : undefined}
          title={importDisabled && importReason ? importReason : undefined}
          onClick={() => entry?.onOpen(entry.capabilities)}
          icon={<svg aria-hidden="true" width="17" height="17" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
            <path d="M14 2v6h6M12 18v-6M9 15h6" />
          </svg>}>Importer</Button>
        <Button variant="solid" onClick={() => entry?.onWrite()}
          icon={<svg aria-hidden="true" width="17" height="17" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 20l4.2-1 10.6-10.6a2 2 0 0 0-2.8-2.8L5.4 16.2 4 20z" />
            <path d="M14.7 6.9l2.8 2.8" />
          </svg>}>Rédiger</Button>
      </div>

<DocumentImportError message={error} />
      <DocumentImportError message={(filter === 'all' || filter === 'CRO') ? ccamError : null} />
      {busy && !docs.length && <div role="status" style={{
        padding: 24, textAlign: 'center', color: DIMP_SUB,
      }}>Chargement…</div>}
      {!busy && !docs.length && <div className="serif" style={{
        fontSize: 14, color: DIMP_SUB, padding: '24px 0', textAlign: 'center',
      }}>Aucun document de ce type.</div>}

{!!docs.length && <div style={{ borderTop: `1px solid ${DIMP_HAIR2}` }}>
        {docs.map((doc) => {
          const awaiting = doc.status === 'awaiting_validation';
          const typeTone = documentTypeBadgeTone(doc.status);
          const linkedCCAM = doc.type === 'CRO'
            ? VascoPatientCCAMCodings.forClinicalDocument(ccamCodings, doc.id)
            : [];
          const ccamActCount = documentCCAMActCount(linkedCCAM);
          return <InteractiveRow key={doc.id}
            onClick={() => void open(doc)} disabled={busy || doc.available === false} style={{
              width: '100%', display: 'flex', alignItems: 'center', gap: 10,
              padding: '14px 0', border: 0,
              borderBottom: `1px solid ${DIMP_HAIR}`,
              background: 'transparent', cursor: busy ? 'default' : 'pointer',
              textAlign: 'left',
              opacity: doc.available === false ? .5 : 1,
            }}>
            <span className="mono" style={{
              width: DIMP_DOCUMENT_TYPE_COLUMN_WIDTH, boxSizing: 'border-box',
              display: 'inline-flex', alignItems: 'center',
              justifyContent: 'center', overflow: 'hidden', textAlign: 'center',
              fontSize: 9.5, fontWeight: 600, lineHeight: 1.15,
              letterSpacing: '.5px', padding: '2px 8px', borderRadius: 6,
              flexShrink: 0, ...typeTone,
            }}><span style={{
              display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: 2,
              overflow: 'hidden', whiteSpace: 'normal',
            }}>{documentTypeBadgeLabel(doc.type)}</span></span>
            <span style={{ flex: 1, minWidth: 0 }}>
              <span style={{
                display: 'block', fontSize: 14, fontWeight: 500,
                color: DIMP_INK, letterSpacing: '-.1px',
              }}>{doc.label}</span>
              <span className="mono" style={{
                display: 'block', fontSize: 10.5, fontWeight: 500,
                color: DIMP_SUB, letterSpacing: '.3px', marginTop: 2,
              }}>
                    {doc.d}{awaiting && <> · À VALIDER</>}
                    {doc.category?.name && <span>{' · '}{doc.category.name}</span>}
                    {ccamActCount > 0 && <span style={{ color: DIMP_MED }}>
                  {' · '}{ccamActCount} {ccamActCount === 1 ? 'acte CCAM' : 'actes CCAM'}
                </span>}
              </span>
              <span style={{
                display: 'block', fontSize: 11, fontWeight: 500,
                color: DIMP_SUB, marginTop: 3, ...DIMP_TRUNCATE,
              }}>{docSignature(doc)}</span>
            </span>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke={DIMP_SUB} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
              <path d="M9 6l6 6-6 6" />
            </svg>
          </InteractiveRow>;
        })}
      </div>}
    </div>
  </div>;
}

TabResume = DocumentImportResume;
TabDocuments = DocumentImportDocuments;

// La file de relecture contient désormais aussi les textes IMG, EXAM et STAFF. La
// référence V5 reste gelée : cette décoration corrige uniquement les libellés
// devenus trop étroits, sans recopier le Dashboard ni modifier sa structure.
const DocumentImportBaseDashboard = PF_ORIGINAL_DASHBOARD;
const DocumentImportBaseSmartStack = PF_ORIGINAL_SMART_STACK;
const DocumentImportBaseValidationSheet = CRValidationSheet;
function documentQueueCopy(node) {
  if (typeof node === 'string') {
    return node
      .replace(/COMPTES RENDUS À VALIDER/g, 'DOCUMENTS À VALIDER')
      .replace(/Comptes rendus à valider/g, 'Documents à valider')
      .replace(/Valider ce compte rendu/g, 'Valider ce document')
      .replace(/^STAFF$/, 'Staff');
  }
  if (Array.isArray(node)) return node.map(documentQueueCopy);
  if (!React.isValidElement(node) || node.props.children === undefined) return node;
  const children = Array.isArray(node.props.children)
    ? node.props.children.map(documentQueueCopy)
    : [documentQueueCopy(node.props.children)];
  // Conserver des enfants JSX statiques : injecter un tableau unique ferait
  // croire à React qu'il s'agit d'une liste dynamique nécessitant des clés.
  return React.cloneElement(node, undefined, ...children);
}
Dashboard = function DocumentImportDashboard(props) {
  return <PF_NAVIGATION.Provider value={props.onOpenPatient}>
    {documentQueueCopy(DocumentImportBaseDashboard(props))}
  </PF_NAVIGATION.Provider>;
};
window.Dashboard = Dashboard;
SmartStack = function DocumentImportSmartStack(props) {
  return <>
    {documentQueueCopy(DocumentImportBaseSmartStack(props))}
    <OverdueFollowUpsSurface accent={props.accent} />
  </>;
};
window.SmartStack = SmartStack;
CRValidationSheet = function DocumentImportValidationSheet(props) {
  return documentQueueCopy(DocumentImportBaseValidationSheet(props));
};
window.CRValidationSheet = CRValidationSheet;