// Accueil Compte connecté. La V5 garde les feuilles et écrans métier ; cette
// couche locale ne change que la navigation et la hiérarchie visuelle.

const ACCOUNT_HOME_ENTRIES = Object.freeze([
  { id: 'profile', label: 'Profil', sub: 'Identité et préférences' },
  { id: 'clinic', label: 'Structures', sub: 'Organisations, établissements et services' },
  { id: 'assistant', label: 'Assistant', sub: 'Historique, prompts et modèles' },
  { id: 'connectors', label: 'Connecteurs', sub: 'Services externes et leur statut' },
  { id: 'security', label: 'Sécurité', sub: 'Accès, facturation et données' },
]);

const ACCOUNT_SECTION_TITLES = Object.freeze({
  profile: 'Profil', clinic: 'Structures', assistant: 'Assistant',
  connectors: 'Connecteurs', security: 'Sécurité',
});

function AccountSectionIcon({ id, size = 19 }) {
  const paths = {
    profile: <><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a8 8 0 0 1 16 0v1"/></>,
    clinic: <><path d="M3 21h18M5 21V7l7-4 7 4v14"/><path d="M9 10h6M12 7v6M9 17h6"/></>,
    assistant: <><rect x="3" y="4" width="18" height="16" rx="4"/><path d="M8 9h.01M16 9h.01M8 15h8"/></>,
    connectors: <><path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"/></>,
    security: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></>,
  };
  return <svg aria-hidden="true" width={size} height={size} viewBox="0 0 24 24"
    fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    {paths[id]}
  </svg>;
}

function AccountHomeEntry({ entry, onOpen }) {
  const { InteractiveRow } = window.VascoUI;
  return <InteractiveRow onClick={(event) => onOpen(entry.id, event.currentTarget)}
    data-account-return={entry.id}
    style={{ width: '100%', minHeight: 66, padding: '11px 14px', border: 0,
      background: 'transparent', fontFamily: 'inherit', textAlign: 'left',
      display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
    <span style={{ width: 38, height: 38, borderRadius: 12, flexShrink: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'rgba(10,10,10,.045)', color: AC_INK }}><AccountSectionIcon id={entry.id} /></span>
    <span style={{ flex: 1, minWidth: 0 }}>
      <span style={{ display: 'block', color: AC_INK, fontSize: 14, fontWeight: 600 }}>{entry.label}</span>
      <span style={{ display: 'block', color: AC_SUB, fontSize: 11.5, fontWeight: 500,
        marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{entry.sub}</span>
    </span>
    <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none"
      stroke={AC_SUB} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6"/></svg>
  </InteractiveRow>;
}

function AccountSectionShell({ title, headingRef, onBack, refreshing, onTabChange, accent, children }) {
  const { IconButton, icons } = window.VascoUI;
  return <div style={{ position: 'absolute', inset: 0, background: AC_BG, color: AC_INK,
    display: 'flex', flexDirection: 'column', fontFamily: "'Inter Tight', -apple-system, system-ui, sans-serif" }}>
    <header style={{ padding: '54px 18px 12px', display: 'flex', alignItems: 'center', gap: 12 }}>
      <IconButton label="Retour à Compte" onClick={onBack} size={36}>
        <icons.Chevron direction="left" size={17} />
      </IconButton>
      <h1 ref={headingRef} tabIndex="-1" style={{ flex: 1, margin: 0, outline: 'none',
        fontSize: 23, fontWeight: 700, letterSpacing: '-.45px', lineHeight: 1.15 }}>{title}</h1>
      {refreshing && <span role="status" aria-live="polite" style={{ display: 'flex', alignItems: 'center',
        gap: 5, color: AC_SUB, fontSize: 10.5, fontWeight: 500 }}>
        <VascoSpinner size={12} color={AC_SUB} thickness={2} />Actualisation…</span>}
    </header>
    <div className="vasco-scroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '8px 0 22px' }}>{children}</div>
    {typeof BottomNav !== 'undefined' && <BottomNav active="MOI"
      onChange={(id) => { if (onTabChange) onTabChange(id); }} accent={accent} />}
  </div>;
}

// La feuille historique garde la validation et la sauvegarde déjà éprouvées.
// Seuls ses deux menus natifs sont remplacés au rendu par le dropdown simple du
// design system, sans modifier la référence V5 figée.
const AccountBaseProfileEditorSheet = ProfileEditorSheet;

function accountProfileEditorReplaceSelects(node) {
  if (!React.isValidElement(node)) return node;

  if (node.type === 'select') {
    const optionNodes = React.Children.toArray(node.props.children)
      .filter((child) => React.isValidElement(child) && child.type === 'option');
    const options = optionNodes.map((option) => [option.props.value, option.props.children]);
    const values = options.map(([value]) => value);
    const civilite = ['doctor', 'professor', 'none'].every((value) => values.includes(value));
    const timeZone = !civilite && values.length > 0
      && values.every((value) => typeof value === 'string' && value.includes('/'));
    const DropdownComponent = window.VascoUI?.SimpleSelect;

    if ((civilite || timeZone) && DropdownComponent) {
      const label = civilite ? 'Civilité' : 'Fuseau horaire';
      return <DropdownComponent
        id={civilite ? 'account-profile-salutation' : 'account-profile-time-zone'}
        aria-label={label}
        value={node.props.value}
        options={options}
        placeholder={civilite ? 'Aucune' : 'Choisir un fuseau horaire'}
        maxOptionsHeight={timeZone ? 230 : null}
        onChange={(value) => node.props.onChange({ target: { value } })} />;
    }
  }

  const children = React.Children.toArray(node.props?.children);
  if (!children.length) return node;
  return React.cloneElement(
    node,
    node.props,
    children.map((child) => accountProfileEditorReplaceSelects(child)),
  );
}

function AccountProfileEditorSheet(props) {
  return accountProfileEditorReplaceSelects(AccountBaseProfileEditorSheet(props));
}

function accountFormatPhone(phone) {
  const compact = String(phone || '').replace(/\s+/g, '');
  const frenchNumber = compact.match(/^(\+33)(\d)(\d{2})(\d{2})(\d{2})(\d{2})$/);
  return frenchNumber ? frenchNumber.slice(1).join(' ') : phone;
}

function AccountProfileSection({ overview, capabilities, busy, onEditProfile, onToggleNotifications }) {
  const profile = overview.profile;
  const displayName = [AC_SALUTATIONS[profile.salutation], profile.given_name, profile.family_name]
    .filter(Boolean).join(' ');
  const personalSummary = [profile.specialty, accountFormatPhone(profile.phone) || 'Téléphone non renseigné']
    .filter(Boolean).join(' · ');
  return <>
    <SettingGroup title="Informations personnelles">
      <SettingRow icon={<><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a8 8 0 0 1 16 0v1"/></>}
        label={displayName} sub={personalSummary}
        reason={acReason(capabilities.edit_profile)} onClick={onEditProfile} />
      <SettingRow icon={<><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7l-10 7L2 7"/></>}
        label={profile.email} sub="Email professionnel" />
    </SettingGroup>
    <SettingGroup title="Identité professionnelle">
      <SettingRow icon={<path d="M4 7h16M4 12h16M4 17h10"/>}
        label={profile.rpps ? `RPPS ${profile.rpps}` : 'RPPS non renseigné'}
        sub="Numéro d’identification" />
    </SettingGroup>
    <SettingGroup title="Préférences">
      <SettingRow icon={<><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></>}
        label="Notifications"
        sub={`Rappels de routine ${overview.preferences.routine_in_app_notifications ? 'activés' : 'désactivés'}. Les alertes cliniques restent visibles.`}
        reason={acReason(capabilities.routine_notifications)} role="switch"
        checked={overview.preferences.routine_in_app_notifications} onClick={onToggleNotifications}
        right={<Toggle on={overview.preferences.routine_in_app_notifications}
          disabled={busy || !capabilities.routine_notifications.enabled} />} />
    </SettingGroup>
  </>;
}

function AccountClinicEditorGroup({ title, children }) {
  return <div style={{ marginBottom: 16 }}>
    <div className="mono" style={{ color: AC_SUB, fontSize: 10, fontWeight: 600,
      letterSpacing: '.5px', textTransform: 'uppercase', marginBottom: 7 }}>{title}</div>
    <div style={{ padding: '12px 12px 1px', border: `1px solid ${AC_HAIR}`,
      borderRadius: 16, background: 'rgba(10,10,10,.018)' }}>{children}</div>
  </div>;
}

function AccountClinicEditorSheet({ clinic, clinicContext, busy, error, onClose, onSave }) {
  const [name, setName] = React.useState(clinic.name || '');
  const [addressLine, setAddressLine] = React.useState(clinic.address_line || '');
  const [postalCode, setPostalCode] = React.useState(clinic.postal_code || '');
  const [city, setCity] = React.useState(clinic.city || '');
  const [phone, setPhone] = React.useState(clinic.phone || '');
  const [email, setEmail] = React.useState(clinic.email || '');
  const fields = {
    name: name.trim(), address_line: addressLine.trim(), postal_code: postalCode.trim(),
    city: city.trim(), phone: phone.trim(), email: email.trim(),
  };
  const changed = Object.keys(fields).some((key) => fields[key] !== (clinic[key] || ''));
  const activeClinic = clinicContext?.clinic?.name || clinic.name || 'l’établissement actif';
  const input = (extra = {}) => ({ ...acInputStyle, background: '#fff', ...extra });
  const submit = () => { if (changed && !busy) onSave(fields); };

  return <AcSheet title="Coordonnées de l’établissement"
    subtitle={`Vous modifiez ${activeClinic}. Le contexte d’exercice se change séparément.`}
    onClose={onClose}
    footer={<>
      <AcButton onClick={onClose}>Annuler</AcButton>
      <AcButton variant="solid" onClick={submit} disabled={!changed} busy={busy}>
        {busy ? 'Enregistrement…' : 'Enregistrer'}
      </AcButton>
    </>}>
    {error && <div role="alert" style={{ background: 'rgba(185,28,28,.06)', borderRadius: 12,
      padding: '10px 12px', marginBottom: 14, color: AC_DANGER, fontSize: 12.5,
      fontWeight: 600, lineHeight: 1.45 }}>{error}</div>}
    <AccountClinicEditorGroup title="Établissement">
      <AcField label="Nom de l’établissement">
        <input value={name} disabled={busy} onChange={(event) => setName(event.target.value)}
          maxLength={160} style={input()} />
      </AcField>
      <AcField label="Adresse">
        <input value={addressLine} disabled={busy} onChange={(event) => setAddressLine(event.target.value)}
          maxLength={200} style={input()} />
      </AcField>
      <AcField label="Code postal">
        <input value={postalCode} disabled={busy} onChange={(event) => setPostalCode(event.target.value)}
          maxLength={16} style={input()} />
      </AcField>
      <AcField label="Ville">
        <input value={city} disabled={busy} onChange={(event) => setCity(event.target.value)}
          maxLength={120} style={input()} />
      </AcField>
    </AccountClinicEditorGroup>
    <AccountClinicEditorGroup title="Contact">
      <AcField label="Téléphone">
        <input value={phone} disabled={busy} onChange={(event) => setPhone(event.target.value)}
          inputMode="tel" maxLength={24} style={input()} />
      </AcField>
      <AcField label="Email">
        <input value={email} disabled={busy} onChange={(event) => setEmail(event.target.value)}
          inputMode="email" maxLength={254} style={input({ textOverflow: 'ellipsis' })} />
      </AcField>
    </AccountClinicEditorGroup>
  </AcSheet>;
}

const ACCOUNT_DOCUMENT_TYPE_FAMILIES = [
  ['report', 'Compte rendu'],
  ['imaging', 'Imagerie'],
  ['examination', 'Examen'],
  ['correspondence', 'Courrier et liaison'],
  ['prescription', 'Ordonnance'],
  ['correspondence', 'Courrier médical'],
  ['other', 'Autre document'],
];

function AccountDocumentTypesManager({ open, runtime, onClose }) {
  const { Button, Field, FormSheet, SimpleSelect } = window.VascoUI;
  const [catalogue, setCatalogue] = React.useState(null);
  const [label, setLabel] = React.useState('');
  const [family, setFamily] = React.useState('report');
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(null);
  const attemptRef = React.useRef(null);
  const load = React.useCallback(async () => {
    setBusy(true);
    try { setCatalogue(await runtime.documentTypes.list()); setError(null); }
    catch (failure) { setError(failure?.message || 'Catalogue indisponible'); }
    finally { setBusy(false); }
  }, [runtime]);
  React.useEffect(() => { if (open) void load(); }, [open, load]);
  const normalized = label.trim().replace(/\s+/g, ' ');
  const create = async () => {
    if (!normalized || busy || !catalogue?.canManage) return;
    if (!attemptRef.current) attemptRef.current = runtime.documentTypes.newAttempt();
    setBusy(true); setError(null);
    try {
      await runtime.documentTypes.create(normalized, family, attemptRef.current);
      attemptRef.current = null; setLabel(''); setFamily('report');
      setCatalogue(await runtime.documentTypes.list());
      showToast('Type ajouté au catalogue', 'success');
    } catch (failure) {
      setError(failure?.message || 'Ajout impossible');
    } finally { setBusy(false); }
  };
  const standard = catalogue?.items?.filter((item) => item.source === 'standard') || [];
  const local = catalogue?.items?.filter((item) => item.source === 'organization') || [];
  const familyLabel = (value) => ACCOUNT_DOCUMENT_TYPE_FAMILIES.find(
    ([familyValue]) => familyValue === value,
  )?.[1] || 'Autre document';
  const typeRows = (items) => items.map((item) => <div key={item.code} style={{
    display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0',
    borderBottom: `1px solid ${AC_HAIR}`,
  }}>
    <span style={{ flex: 1, minWidth: 0 }}>
      <span style={{ display: 'block', color: AC_INK, fontSize: 13.5, fontWeight: 600,
        overflowWrap: 'anywhere' }}>{item.label}</span>
      <span style={{ display: 'block', color: AC_SUB, fontSize: 11, marginTop: 2 }}>
        {familyLabel(item.family)}
      </span>
    </span>
    {item.source === 'standard' && <span className="mono" style={{ color: AC_SUB,
      fontSize: 9.5 }}>{item.code}</span>}
  </div>);
  const standardCards = standard.map((item) => <div key={item.code} style={{
    minWidth: 0, padding: '8px 9px', border: `1px solid ${AC_HAIR}`,
    borderRadius: 11, background: '#fff',
  }}>
    <span className="mono" style={{ display: 'block', color: AC_SUB, fontSize: 9,
      fontWeight: 650 }}>{item.code}</span>
    <span style={{ display: 'block', marginTop: 3, color: AC_INK, fontSize: 11.5,
      fontWeight: 600, lineHeight: 1.2, overflowWrap: 'anywhere' }}>{item.label}</span>
  </div>);
  return <FormSheet open={open} title="Types de documents"
    subtitle="Catalogue de l’organisation. Les praticiens choisissent un type ici défini, sans en créer dans le dossier patient."
    onClose={onClose} busy={busy}>
    {error && <div role="alert" style={{ marginBottom: 12, padding: '10px 12px',
      borderRadius: 12, background: 'rgba(185,28,28,.06)', color: AC_DANGER,
      fontSize: 12.5 }}>{error}</div>}
    {!catalogue && !error && <div role="status" style={{ display: 'flex', alignItems: 'center',
      gap: 8, color: AC_SUB, fontSize: 12.5 }}><VascoSpinner size={15} color={AC_SUB} />Chargement…</div>}
    {catalogue && <>
      {!catalogue.canManage && <div style={{ marginBottom: 14, padding: '11px 12px',
        borderRadius: 13, background: 'rgba(10,10,10,.035)', color: AC_SUB,
        fontSize: 12.5, lineHeight: 1.45 }} data-reason="organization_admin_required">
        Le catalogue est consultable. Seul un administrateur de l’organisation peut ajouter un type.
      </div>}
      {catalogue.canManage && <AccountClinicEditorGroup title="Ajouter un type local">
        <Field label="Nom du type">
          <input value={label} disabled={busy} maxLength={120}
            placeholder="Ex. Courrier de liaison"
            onChange={(event) => { setLabel(event.target.value); attemptRef.current = null; }}
            style={{ ...acInputStyle, background: '#fff' }} />
        </Field>
        <Field label="Famille documentaire">
          <SimpleSelect id="account-document-type-family" value={family}
            options={ACCOUNT_DOCUMENT_TYPE_FAMILIES} disabled={busy}
            onChange={(nextFamily) => { setFamily(nextFamily); attemptRef.current = null; }} />
        </Field>
        <div style={{ display: 'flex', justifyContent: 'flex-end', paddingBottom: 12 }}>
          <Button variant="solid" size="medium" disabled={!normalized || busy}
            busy={busy} busyLabel="Ajout…" onClick={() => void create()}>Ajouter</Button>
        </div>
      </AccountClinicEditorGroup>}
      <AccountClinicEditorGroup title="Types de l’organisation">
        {local.length ? typeRows(local) : <div style={{ padding: '2px 0 12px', color: AC_SUB,
          fontSize: 12.5 }}>Aucun type local ajouté.</div>}
      </AccountClinicEditorGroup>
      <AccountClinicEditorGroup title="Types standards Vasco">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6,
          paddingBottom: 11 }}>{standardCards}</div>
      </AccountClinicEditorGroup>
    </>}
  </FormSheet>;
}

function AccountClinicSection({ organization, capabilities, clinicOpening, clinicContext, onOpenClinic,
  onOpenClinicContext, onOpenClinicInvitation, onManageOwnAssignments,
  onManageInvitations, onManagePractitioners, onOpenCorrespondents, onOpenDocumentTypes }) {
  const activeOrganization = clinicContext?.organization || organization;
  const assignmentCount = clinicContext?.assignments?.length || 0;
  const pendingInvitationCount = clinicContext?.managedInvitations?.filter(
    (invitation) => invitation.status === 'pending',
  ).length || 0;
  const contextAction = assignmentCount > 1 ? 'Changer de contexte' : 'Voir l’affectation';
  const contextRows = clinicContext ? [
    <SettingRow key="clinic" icon={<><path d="M3 21h18M5 21V7l7-4 7 4v14"/><path d="M9 12h6"/></>}
      label="Établissement" sub={clinicContext.clinic?.name || 'Aucun établissement actif'} />,
    <SettingRow key="service" icon={<><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M12 5v16"/></>}
      label="Service" sub={clinicContext.department?.name || 'Aucun service actif'} />,
    <SettingRow key="switch" icon={<><path d="M7 7h11l-3-3M17 17H6l3 3"/></>}
      label={contextAction}
      sub={assignmentCount > 1 ? `${assignmentCount} affectations disponibles` : 'Contexte actif de cette session'}
      onClick={onOpenClinicContext} />,
    <SettingRow key="my-assignments" icon={<><path d="M5 7h14M5 12h14M5 17h9"/><circle cx="18" cy="17" r="2"/></>}
      label="Gérer mes affectations" sub="Quitter un service"
      onClick={onManageOwnAssignments} />,
    ...(clinicContext.canInvitePractitioners ? [
      <SettingRow key="invite" icon={<><circle cx="9" cy="8" r="3"/><path d="M3 20v-1a6 6 0 0 1 12 0v1M18 8v6M15 11h6"/></>}
        label="Inviter un praticien" sub="Choisir son service à partir de son RPPS"
        onClick={onOpenClinicInvitation} />,
      <SettingRow key="sent-invitations" icon={<><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></>}
        label="Invitations envoyées"
        sub={pendingInvitationCount
          ? `${pendingInvitationCount} en attente`
          : 'Consulter l’historique'}
        onClick={onManageInvitations} />,
      <SettingRow key="manage-practitioners" icon={<><circle cx="8" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M2 20v-1a6 6 0 0 1 12 0v1M15 20v-1a5 5 0 0 1 7-4.6"/></>}
        label="Gérer les praticiens" sub="Retirer une affectation"
        onClick={onManagePractitioners} />,
    ] : []),
  ] : [
    <SettingRow key="unavailable" icon={<circle cx="12" cy="12" r="9"/>}
      label="Établissement et service" sub="Contexte indisponible pour le moment" />,
  ];
  return <>
    <div style={{ margin: '0 20px 14px', color: AC_SUB, fontSize: 12.5,
      fontWeight: 500, lineHeight: 1.5 }}>
      Ce contexte détermine les données et les accès disponibles. Les écrans concernés s’actualisent après un changement.
    </div>
    <SettingGroup title="Contexte d’exercice">
      <SettingRow icon={<><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"/></>}
        label="Organisation" sub={activeOrganization?.name || 'Organisation non renseignée'} />
      {contextRows}
    </SettingGroup>
    <SettingGroup title="Coordonnées et réseau">
      <SettingRow icon={<><path d="M4 21V8l8-5 8 5v13"/><path d="M8 13h8M8 17h8"/></>}
        label="Coordonnées de l’établissement" sub="Adresse, téléphone et email"
        right={clinicOpening ? <VascoSpinner size={15} color={AC_SUB} thickness={2} /> : undefined} onClick={onOpenClinic} />
      {onOpenCorrespondents && <SettingRow icon={<><circle cx="9" cy="8" r="3"/><path d="M3 20v-1a6 6 0 0 1 12 0v1M17 8h4M19 6v4"/></>}
        label="Correspondants médicaux" sub="Annuaire professionnel" onClick={onOpenCorrespondents} />}
    </SettingGroup>
    <SettingGroup title="Documentation">
      <SettingRow icon={<><path d="M5 3h10l4 4v14H5z"/><path d="M15 3v5h5M8 13h8M8 17h6"/></>}
        label="Types de documents" sub="Catalogue de l’organisation"
        onClick={onOpenDocumentTypes} />
    </SettingGroup>
    <SettingGroup title="Outils">
      <SettingRow icon={<><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M12 8v8M8 12h8"/></>}
        label="Signature électronique" reason={acReason(capabilities.electronic_signature)} />
    </SettingGroup>
  </>;
}

function AccountAssistantSection({ counts, capabilities, onOpenHistory, onOpenPrompts, onOpenTemplates }) {
  return <SettingGroup title="Personnalisation de l’assistant">
    <SettingRow icon={<><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></>}
      label="Historique des conversations" sub={acPlural(counts.active_conversations, 'conversation active', 'conversations actives')}
      reason={acReason(capabilities.conversation_history)} onClick={onOpenHistory} />
    <SettingRow icon={<path d="M14.5 4.5l5 5L9 20l-5 .5.5-5z"/>}
      label="Préférences enregistrées"
      sub={acPlural(counts.active_prompts, 'préférence active', 'préférences actives')}
      reason={acReason(capabilities.manage_prompts)} onClick={onOpenPrompts} />
    <SettingRow icon={<><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6v6H9z"/></>}
      label="Modèles de documents" sub={acPlural(counts.active_templates, 'modèle actif', 'modèles actifs')}
      reason={acReason(capabilities.manage_templates)} onClick={onOpenTemplates} />
  </SettingGroup>;
}

const ACCOUNT_PROMPT_SCOPE_OPTIONS = Object.freeze([
  ['ALL', 'Tous mes documents'],
  ['CRO', 'Mes comptes rendus opératoires'],
  ['CRC', 'Mes comptes rendus de consultation'],
  ['CRH', 'Mes comptes rendus d’hospitalisation'],
  ['LETTRE', 'Mes lettres'],
  ['STAFF', 'Mes comptes rendus de staff'],
]);

function accountPromptScopeLabel(scope) {
  return ACCOUNT_PROMPT_SCOPE_OPTIONS.find(([value]) => value === scope)?.[1]
    || 'Tous mes documents';
}

function AccountPreferenceEditor({ open, item, busy, onClose, onSave }) {
  const { Button, Field, FormSheet, SimpleSelect } = window.VascoUI;
  const [name, setName] = React.useState('');
  const [content, setContent] = React.useState('');
  const [scope, setScope] = React.useState('ALL');

  React.useEffect(() => {
    if (!open) return;
    setName(item?.name || 'Préférence rédactionnelle');
    setContent(item?.content || '');
    setScope(item?.scope || 'ALL');
  }, [open, item]);

  const normalizedName = name.trim().replace(/\s+/g, ' ');
  const valid = normalizedName && content.trim() && name.length <= 120 && content.length <= 8000;
  const dirty = !item?.id || normalizedName !== item.name || content !== item.content
    || scope !== item.scope;
  const submit = () => {
    if (!valid || !dirty || busy) return;
    onSave({
      name: normalizedName,
      description: item?.description || null,
      scope,
      content,
    });
  };

  return <FormSheet open={open}
    title={item?.id ? 'Modifier la préférence' : 'Nouvelle préférence'}
    subtitle="La portée détermine dans quels documents l’assistant réutilise cette préférence."
    onClose={onClose} busy={busy}
    footer={<>
      <Button grow size="medium" onClick={onClose}>Annuler</Button>
      <Button grow size="medium" variant="solid" disabled={!valid || !dirty}
        busy={busy} busyLabel="Enregistrement…" onClick={submit}>Enregistrer</Button>
    </>}>
    <Field label="Nom" hint={`${name.length} / 120 caractères`}>
      <input value={name} maxLength={120} disabled={busy}
        onChange={(event) => setName(event.target.value)} style={acInputStyle} />
    </Field>
    <Field label="Portée">
      <SimpleSelect id="account-preference-scope" value={scope}
        options={ACCOUNT_PROMPT_SCOPE_OPTIONS} disabled={busy} onChange={setScope} />
    </Field>
    <Field label="Formulation" hint={`${content.length} / 8 000 caractères`}>
      <textarea value={content} maxLength={8000} disabled={busy} rows={8}
        onChange={(event) => setContent(event.target.value)} style={{
          ...acInputStyle, height: 'auto', padding: '10px 12px', resize: 'vertical', lineHeight: 1.5,
        }} />
    </Field>
  </FormSheet>;
}

function AccountPreferenceHistory({ open, item, runtime, onClose }) {
  const { Button, FormSheet, StatusNotice } = window.VascoUI;
  const [versions, setVersions] = React.useState([]);
  const [nextVersion, setNextVersion] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  const load = React.useCallback(async (beforeVersion = null, append = false) => {
    if (!item?.id || loading) return;
    setLoading(true); setError(null);
    try {
      const response = await runtime.prompts.revisions(item.id, beforeVersion);
      setVersions((current) => append ? [...current, ...response.items] : response.items);
      setNextVersion(response.next_before_version);
    } catch (failure) {
      setError(failure?.message || 'Historique indisponible');
    } finally { setLoading(false); }
  }, [item?.id, loading, runtime]);

  React.useEffect(() => {
    if (!open || !item?.id) return;
    setVersions([]); setNextVersion(null); setError(null);
    void load();
    // Le chargement est déclenché par l’ouverture et l’identité, pas par son propre état.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open, item?.id]);

  return <FormSheet open={open} title="Historique de la préférence"
    subtitle={item?.name || ''} onClose={onClose} busy={loading}>
    {error && <StatusNotice tone="danger" title={error} />}
    {!error && loading && versions.length === 0 && <div role="status" style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      padding: '24px 0', color: AC_SUB, fontSize: 12.5,
    }}><VascoSpinner size={16} color={AC_SUB} />Chargement des versions…</div>}
    {versions.map((version) => <article key={version.version} style={{
      padding: '12px 13px', marginBottom: 9, border: `1px solid ${AC_HAIR}`,
      borderRadius: 14, background: AC_SURF,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <strong style={{ flex: 1, fontSize: 13, fontWeight: 650 }}>Version {version.version}</strong>
        <span className="mono" style={{ color: version.status === 'active' ? AC_OK : AC_SUB,
          fontSize: 9.5, fontWeight: 650 }}>
          {version.status === 'active' ? 'ACTIVE' : 'INACTIVE'}
        </span>
      </div>
      <div style={{ color: AC_MED, fontSize: 11.5, fontWeight: 600, marginTop: 5 }}>
        {accountPromptScopeLabel(version.scope)}
      </div>
      <div className="mono" style={{ color: AC_SUB, fontSize: 10, marginTop: 4 }}>
        {acDate(version.updated_at)}
      </div>
      <div style={{ marginTop: 9, paddingTop: 9, borderTop: `1px solid ${AC_HAIR}`,
        color: AC_INK, fontSize: 12.5, lineHeight: 1.45, whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }}>
        {version.content}
      </div>
    </article>)}
    {nextVersion !== null && <Button size="medium" grow disabled={loading}
      busy={loading} busyLabel="Chargement…"
      onClick={() => void load(nextVersion, true)}>Afficher les versions précédentes</Button>}
  </FormSheet>;
}

function AccountPreferenceManager({ accent, runtime, onBack, onChanged }) {
  const { Button, ChoiceChip, ScreenHeader, StatusNotice } = window.VascoUI;
  const [contentStatus, setContentStatus] = React.useState('active');
  const [items, setItems] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [editing, setEditing] = React.useState(null);
  const [editorOpen, setEditorOpen] = React.useState(false);
  const [historyItem, setHistoryItem] = React.useState(null);
  const resource = runtime.prompts;

  const load = React.useCallback(async () => {
    try {
      const response = await resource.list(contentStatus);
      setItems(response.items); setError(null);
    } catch (failure) {
      setItems([]); setError(failure?.message || 'Chargement impossible');
    }
  }, [contentStatus, resource]);

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

  const openExisting = async (item) => {
    if (busy) return;
    setBusy(true);
    try {
      setEditing(await resource.get(item.id)); setEditorOpen(true);
    } catch (failure) {
      showToast(failure?.message || 'Ouverture impossible', 'error');
    } finally { setBusy(false); }
  };

  const save = async (payload) => {
    setBusy(true);
    try {
      if (editing?.id) await resource.update(editing.id, editing.version, payload);
      else await resource.create(payload);
      setEditorOpen(false); setEditing(null); await load();
      if (onChanged) onChanged();
    } catch (failure) {
      showToast(failure?.message || 'Enregistrement impossible', 'error');
      if (failure?.status === 409) { setEditorOpen(false); setEditing(null); await load(); }
    } finally { setBusy(false); }
  };

  const toggleState = async (item) => {
    if (busy) return;
    setBusy(true);
    try {
      const state = item.status === 'active' ? 'archived' : 'active';
      await resource.setState(item.id, item.version, state);
      await load();
      if (onChanged) onChanged();
    } catch (failure) {
      showToast(failure?.message || 'Action impossible', 'error');
      if (failure?.status === 409) await load();
    } finally { setBusy(false); }
  };

  return <div style={{ position: 'absolute', inset: 0, zIndex: 100,
    background: AC_BG, color: AC_INK, display: 'flex', flexDirection: 'column',
    fontFamily: "'Inter Tight', -apple-system, system-ui, sans-serif" }}>
    <ScreenHeader title="Préférences enregistrées" onBack={onBack} backLabel="Retour à Assistant"
      right={<Button size="small" variant="solid" onClick={() => {
        setEditing(null); setEditorOpen(true);
      }}>Ajouter</Button>} />
    <div style={{ display: 'flex', gap: 7, padding: '0 18px 12px' }}>
      <ChoiceChip selected={contentStatus === 'active'} disabled={busy}
        onClick={() => setContentStatus('active')}>Actives</ChoiceChip>
      <ChoiceChip selected={contentStatus === 'archived'} disabled={busy}
        onClick={() => setContentStatus('archived')}>Désactivées</ChoiceChip>
    </div>
    <div className="vasco-scroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '0 16px 24px' }}>
      {error && <StatusNotice tone="danger" title={error} />}
      {items === null && <div role="status" style={{ display: 'flex', justifyContent: 'center', padding: '34px 0' }}>
        <VascoSpinner size={21} color={accent} />
      </div>}
      {items !== null && items.length === 0 && !error && <div style={{
        padding: '44px 20px', textAlign: 'center', color: AC_SUB, fontSize: 12.5,
      }}>{contentStatus === 'active'
          ? 'Aucune préférence active. L’assistant peut en proposer pendant une conversation.'
          : 'Aucune préférence désactivée.'}</div>}
      {(items || []).map((item) => <article key={item.id} style={{
        padding: '14px 15px', marginBottom: 10, border: `1px solid ${AC_HAIR}`,
        borderRadius: 16, background: AC_SURF,
      }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 14, fontWeight: 650, overflowWrap: 'anywhere' }}>{item.name}</div>
            <div style={{ color: AC_MED, fontSize: 11.5, fontWeight: 600, marginTop: 4 }}>
              {accountPromptScopeLabel(item.scope)}
            </div>
            <div className="mono" style={{ color: AC_SUB, fontSize: 10, marginTop: 5 }}>
              Version {item.version} · {item.content_length} caractères · {acDate(item.updated_at)}
            </div>
          </div>
          {item.status === 'archived' && <span className="mono" style={{
            color: AC_SUB, background: 'rgba(10,10,10,.05)', borderRadius: 999,
            padding: '4px 7px', fontSize: 9, fontWeight: 650,
          }}>DÉSACTIVÉE</span>}
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7, marginTop: 12 }}>
          <Button size="small" grow disabled={busy}
            onClick={() => void openExisting(item)}>Modifier</Button>
          <Button size="small" grow disabled={busy}
            onClick={() => setHistoryItem(item)}>Versions</Button>
          <Button size="small" grow disabled={busy}
            style={{ color: item.status === 'active' ? AC_DANGER : AC_MED }}
            onClick={() => void toggleState(item)}>
            {item.status === 'active' ? 'Désactiver' : 'Réactiver'}
          </Button>
        </div>
      </article>)}
    </div>
    <AccountPreferenceEditor open={editorOpen} item={editing} busy={busy}
      onClose={() => setEditorOpen(false)} onSave={(payload) => void save(payload)} />
    <AccountPreferenceHistory open={Boolean(historyItem)} item={historyItem}
      runtime={runtime} onClose={() => setHistoryItem(null)} />
  </div>;
}

function AccountConnectorsSection({ connectors }) {
  return <><div style={{ margin: '0 20px 14px', color: AC_SUB, fontSize: 12.5, fontWeight: 500, lineHeight: 1.5 }}>
    Chaque service conserve le statut réellement fourni par le serveur.
  </div><SettingGroup title="Services externes">
    {connectors.map((connector) => <SettingRow key={connector.id}
      icon={<><path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"/></>}
      label={connector.display_name} sub="Connecteur indisponible"
      reason={AC_REASONS[connector.reason_code] || 'Action indisponible.'} />)}
  </SettingGroup></>;
}

function AccountSecuritySection({ capabilities, busy, onLogoutAll, onLogout }) {
  const { Button } = window.VascoUI;
  return <>
    <SettingGroup title="Accès et protection">
      <SettingRow icon={<><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>}
        label="Mot de passe" reason={acReason(capabilities.change_password)} />
      <SettingRow icon={<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>}
        label="Authentification 2FA" reason={acReason(capabilities.manage_mfa)} />
    </SettingGroup>
    <SettingGroup title="Abonnement et facturation">
      <SettingRow icon={<polygon points="12 2 15.1 8.3 22 9.2 17 14 18.2 21 12 17.8 5.8 21 7 14 2 9.2 8.9 8.3 12 2"/>}
        label="Abonnement" reason={acReason(capabilities.subscription)} />
      <SettingRow icon={<><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></>}
        label="Facturation" reason={acReason(capabilities.billing)} />
    </SettingGroup>
    <SettingGroup title="Données et compte">
      <SettingRow icon={<><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5M12 15V3"/></>}
        label="Exporter mes données" reason={acReason(capabilities.data_export)} />
      <SettingRow icon={<path d="M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6"/>}
        label="Fermer mon compte" danger reason={acReason(capabilities.close_account)} />
    </SettingGroup>
    <SettingGroup title="Sessions">
      <SettingRow icon={<><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5M21 12H9"/></>}
        label="Déconnecter tous les appareils" sub="Révoque toutes les sessions, y compris celle-ci"
        danger reason={acReason(capabilities.logout_all)} onClick={onLogoutAll} />
    </SettingGroup>
    <SettingGroup title="À propos">
      <SettingRow icon={<><circle cx="12" cy="12" r="10"/><path d="M12 11v6M12 7h.01"/></>}
        label="Version de Vasco"
        sub={`v${window.VASCO_VERSION || '0.0.0'} · Build ${window.VASCO_BUILD || '–'}`} />
    </SettingGroup>
    <div style={{ padding: '0 16px 16px' }}><Button onClick={onLogout} disabled={busy}
      style={{ width: '100%', color: AC_DANGER }}>Se déconnecter</Button></div>
  </>;
}

function AccountScreenConnected({ accent, onTabChange, startOnStats, onStatsClosed,
  startOnReminders, onRemindersClosed,
  runtime = null, onLoggedOut, clinicContext = null, onOpenClinicContext = null,
  onOpenClinicInvitation = null, onManageOwnAssignments = null,
  onManageInvitations = null, onManagePractitioners = null,
  onOpenCorrespondents = null, initialSection = null }) {
  const { Button } = window.VascoUI;
  const [overview, setOverview] = React.useState(() => window.VASCO_RUNTIME?.account || null);
  const [error, setError] = React.useState(null);
  const [refreshing, setRefreshing] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [section, setSection] = React.useState(initialSection);
  const [showStats, setShowStats] = React.useState(!!startOnStats);
  // La page Rappels vit à côté des Statistiques, jamais en même temps : les
  // deux occupent la même surface pleine au-dessus du Compte.
  const [showReminders, setShowReminders] = React.useState(!!startOnReminders);
  const [contentScreen, setContentScreen] = React.useState(null);
  const [navigationDirection, setNavigationDirection] = React.useState('none');
  const [profileOpen, setProfileOpen] = React.useState(false);
  const [logoutAllOpen, setLogoutAllOpen] = React.useState(false);
  const [clinic, setClinic] = React.useState(null);
  const [clinicOpening, setClinicOpening] = React.useState(false);
  const [clinicError, setClinicError] = React.useState(null);
  const [documentTypesOpen, setDocumentTypesOpen] = React.useState(false);
  const returnFocusRef = React.useRef(null);
  const secondaryHeadingRef = React.useRef(null);

  React.useEffect(() => {
    if (startOnStats) { setNavigationDirection('forward'); setShowStats(true); }
  }, [startOnStats]);
  React.useEffect(() => {
    if (startOnReminders) { setNavigationDirection('forward'); setShowReminders(true); }
  }, [startOnReminders]);
  React.useEffect(() => { if (section) secondaryHeadingRef.current?.focus(); }, [section]);
  const load = React.useCallback(async (force) => {
    if (!runtime) return;
    if (force) setRefreshing(true);
    try { setOverview(force ? await runtime.reload() : await runtime.load()); setError(null); }
    catch (requestError) { setError(requestError?.message || 'Compte indisponible'); }
    finally { setRefreshing(false); }
  }, [runtime]);
  React.useEffect(() => { void load(false); }, [load]);
  React.useEffect(() => {
    const onContextChanged = () => {
      setClinic(null);
      setClinicError(null);
      void load(true);
    };
    window.addEventListener('vasco:context-changed', onContextChanged);
    return () => window.removeEventListener('vasco:context-changed', onContextChanged);
  }, [load]);

  const restoreAccountFocus = (saved = returnFocusRef.current) => {
    window.setTimeout(() => {
      const target = saved?.node?.isConnected
        ? saved.node : document.querySelector(`[data-account-return="${saved?.key || ''}"]`);
      target?.focus();
    }, window.VascoNavigationContract.DURATION_MS + 24);
  };
  const navigateAccount = (destination, direction, trigger = null) => {
    if (trigger) returnFocusRef.current = {
      node: trigger,
      key: destination === 'stats' ? 'activity' : destination.replace(/^section:/, ''),
    };
    setNavigationDirection(direction);
    if (destination === 'home') {
      setContentScreen(null); setShowStats(false); setShowReminders(false); setSection(null); return;
    }
    if (destination === 'stats') {
      setContentScreen(null); setSection(null); setShowReminders(false); setShowStats(true); return;
    }
    if (destination === 'reminders') {
      setContentScreen(null); setSection(null); setShowStats(false); setShowReminders(true); return;
    }
    if (destination.startsWith('section:')) {
      setContentScreen(null); setShowStats(false); setShowReminders(false);
      setSection(destination.slice(8)); return;
    }
    if (destination.startsWith('content:')) setContentScreen(destination.slice(8));
  };
  const openSection = (next, trigger) => navigateAccount(`section:${next}`, 'forward', trigger);
  const closeSection = () => { navigateAccount('home', 'back'); restoreAccountFocus(); };
  const openStats = (trigger) => navigateAccount('stats', 'forward', trigger);
  const openReminders = (trigger) => navigateAccount('reminders', 'forward', trigger);
  const closeReminders = () => {
    navigateAccount('home', 'back');
    if (onRemindersClosed) onRemindersClosed();
    restoreAccountFocus();
  };
  // Les rappels ne sont pas une donnée du Compte : ils vivent dans le tableau
  // de bord, et la page les lit à leur source plutôt que de s'en faire servir
  // une copie par un écran qui n'en a pas l'usage.
  // La recherche de dossiers est servie par le tableau de bord, à côté des
  // rappels : la page en a besoin pour rattacher un rappel à un patient.
  const remindersRuntime = React.useMemo(() => {
    const dashboard = typeof window !== 'undefined' ? window.VascoApi?.dashboard : null;
    if (!dashboard?.reminders) return null;
    return { ...dashboard.reminders, patientOptions: dashboard.patientOptions };
  }, []);
  const closeStats = () => {
    navigateAccount('home', 'back');
    if (onStatsClosed) onStatsClosed();
    restoreAccountFocus();
  };

  const saveProfile = async (changes) => {
    setBusy(true);
    try { await runtime.updateProfile(overview.profile.version, changes); setProfileOpen(false); await load(true); }
    catch (requestError) { showToast(requestError?.message || 'Enregistrement impossible', 'error');
      if (requestError?.status === 409) { setProfileOpen(false); await load(true); } }
    finally { setBusy(false); }
  };
  const openClinic = async () => {
    if (!runtime || clinicOpening || busy) return;
    setClinicOpening(true);
    try { setClinic(await runtime.clinic.load()); setClinicError(null); }
    catch (requestError) { showToast(requestError?.message || 'Fiche du cabinet indisponible', 'error'); }
    finally { setClinicOpening(false); }
  };
  const saveClinic = async (fields) => {
    setBusy(true);
    try { await runtime.clinic.save(clinic.version, fields); setClinic(null); setClinicError(null); }
    catch (requestError) {
      const message = requestError?.message || 'Enregistrement impossible';
      if (requestError?.status === 409) {
        try { setClinic(await runtime.clinic.load()); setClinicError(`${message} La fiche affichée vient d’être rechargée depuis le serveur.`); }
        catch (reloadError) { setClinic(null); showToast(reloadError?.message || message, 'error'); }
      } else setClinicError(message);
    } finally { setBusy(false); }
  };
  const toggleNotifications = async () => {
    if (busy) return;
    setBusy(true);
    try { await runtime.updatePreferences(overview.preferences.version,
      !overview.preferences.routine_in_app_notifications); await load(true); }
    catch (requestError) { showToast(requestError?.message || 'Modification impossible', 'error');
      if (requestError?.status === 409) await load(true); }
    finally { setBusy(false); }
  };
  const confirmLogoutAll = async () => {
    setBusy(true);
    try { await runtime.logoutAll(); setLogoutAllOpen(false); if (onLoggedOut) onLoggedOut(); }
    catch (requestError) { showToast(requestError?.message || 'Révocation impossible', 'error'); }
    finally { setBusy(false); }
  };
  const doLogout = async () => {
    if (busy) return;
    setBusy(true);
    try { await window.VascoApi.logout(); }
    catch { window.VascoApi.clearLocalSession(); }
    finally { setBusy(false); if (onLoggedOut) onLoggedOut(); }
  };

  if (!overview) return <div style={{ width: '100%', height: '100%', background: AC_BG, color: AC_INK,
    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
    gap: 12, padding: 24, textAlign: 'center', fontFamily: "'Inter Tight', -apple-system, system-ui, sans-serif" }}>
    {!error && <VascoSpinner size={24} color={accent} />}
    <div style={{ fontSize: 14, fontWeight: 600 }}>{error ? 'Compte indisponible' : 'Chargement de votre compte…'}</div>
    {error && <><div style={{ color: AC_SUB, fontSize: 12.5 }}>{error}</div>
      <Button size="medium" variant="solid" onClick={() => void load(true)}>Réessayer</Button></>}
  </div>;

  const profile = overview.profile;
  const capabilities = overview.capabilities;
  const initials = `${profile.given_name[0] || ''}${profile.family_name[0] || ''}`.toUpperCase();
  const activeOrganizationLabel = clinicContext?.department
    ? clinicContext.organization?.name || null
    : null;
  const activePracticeLabel = clinicContext?.department
    ? [clinicContext.clinic?.name, clinicContext.department.name].filter(Boolean).join(' · ')
    : null;
  let sectionContent = null;
  if (section === 'profile') sectionContent = <AccountProfileSection overview={overview} capabilities={capabilities}
    busy={busy} onEditProfile={() => setProfileOpen(true)} onToggleNotifications={toggleNotifications} />;
  if (section === 'clinic') sectionContent = <AccountClinicSection organization={overview.organization}
    capabilities={capabilities}
    clinicOpening={clinicOpening} clinicContext={clinicContext} onOpenClinic={() => void openClinic()}
    onOpenClinicContext={onOpenClinicContext} onOpenClinicInvitation={onOpenClinicInvitation}
    onManageOwnAssignments={onManageOwnAssignments}
    onManageInvitations={onManageInvitations}
    onManagePractitioners={onManagePractitioners}
    onOpenCorrespondents={onOpenCorrespondents}
    onOpenDocumentTypes={() => setDocumentTypesOpen(true)} />;
  if (section === 'assistant') sectionContent = <AccountAssistantSection counts={overview.counts}
    capabilities={capabilities} onOpenHistory={() => onTabChange?.('IA', { openHistory: true })}
    onOpenPrompts={() => navigateAccount('content:prompts', 'forward')}
    onOpenTemplates={() => navigateAccount('content:templates', 'forward')} />;
  if (section === 'connectors') sectionContent = <AccountConnectorsSection connectors={overview.connectors} />;
  if (section === 'security') sectionContent = <AccountSecuritySection capabilities={capabilities}
    busy={busy} onLogoutAll={() => setLogoutAllOpen(true)} onLogout={doLogout} />;

  const accountScreenKey = contentScreen ? `content:${contentScreen}`
    : showStats ? 'stats' : showReminders ? 'reminders'
      : section ? `section:${section}` : 'home';
  let accountScreen = null;
  if (contentScreen) accountScreen = contentScreen === 'prompts' ? <AccountPreferenceManager
    accent={accent} runtime={runtime}
    onBack={() => {
      navigateAccount('section:assistant', 'back');
      window.setTimeout(() => secondaryHeadingRef.current?.focus(),
        window.VascoNavigationContract.DURATION_MS + 24);
    }} onChanged={() => void load(true)} /> : <ContentScreen kind={contentScreen}
    accent={accent} runtime={runtime}
    anonymizeCapability={overview?.capabilities.anonymize_templates}
    onBack={() => {
      navigateAccount('section:assistant', 'back');
      window.setTimeout(() => secondaryHeadingRef.current?.focus(),
        window.VascoNavigationContract.DURATION_MS + 24);
    }} onChanged={() => void load(true)} />;
  else if (showStats) accountScreen = <StatsScreen accent={accent} runtime={runtime}
    capabilities={overview?.capabilities} onBack={closeStats} />;
  else if (showReminders) accountScreen = <VascoAccountRemindersScreen
    runtime={remindersRuntime} onBack={closeReminders} />;
  else if (section) accountScreen = <AccountSectionShell title={ACCOUNT_SECTION_TITLES[section]}
    headingRef={secondaryHeadingRef} onBack={closeSection} refreshing={refreshing}
    onTabChange={onTabChange} accent={accent}>{sectionContent}</AccountSectionShell>;
  else accountScreen = <>
      <div className="vasco-scroll" style={{ flex: 1, overflowY: 'auto', paddingBottom: 18 }}>
        <header style={{ padding: '56px 20px 18px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 62, height: 62, borderRadius: 20, flexShrink: 0,
              background: 'rgba(10,10,10,.06)', display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'rgba(10,10,10,.42)', fontSize: 20, fontWeight: 650 }}>{initials}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ color: AC_SUB, fontSize: 11.5, fontWeight: 500 }}>Mon compte</div>
              <h1 style={{ margin: '2px 0 0', fontSize: 25, lineHeight: 1.08, fontWeight: 700,
                letterSpacing: '-.55px', overflowWrap: 'anywhere' }}>
                {[AC_SALUTATIONS[profile.salutation], profile.given_name, profile.family_name].filter(Boolean).join(' ')}
              </h1>
              <div style={{ color: AC_SUB, marginTop: 5, fontSize: 12.5, fontWeight: 500 }}>
                {profile.specialty || 'Spécialité non renseignée'}
              </div>
              {activeOrganizationLabel && <div style={{ color: AC_SUB, marginTop: 3, fontSize: 11,
                fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {activeOrganizationLabel}
              </div>}
              {activePracticeLabel && <div style={{ color: AC_SUB, marginTop: 2, fontSize: 11,
                fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {activePracticeLabel}
              </div>}
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 10, marginTop: 16 }}>
            {/* Les rappels d'abord : c'est ce qu'on vient faire, là où les
                statistiques sont ce qu'on vient constater. */}
            <Button size="medium" ariaLabel="Ouvrir mes rappels"
              data-account-return="reminders"
              onClick={(event) => openReminders(event.currentTarget)} icon={<svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>
              </svg>}>Rappels</Button>
            <Button size="medium" ariaLabel="Ouvrir mes statistiques"
              data-account-return="activity"
              onClick={(event) => openStats(event.currentTarget)} icon={<svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                <path d="M4 19V9M10 19V5M16 19v-7M22 19H2"/>
              </svg>}>Statistiques</Button>
          </div>
        </header>
        {error && <div role="alert" style={{ margin: '0 16px 12px', padding: '10px 12px',
          borderRadius: 12, background: 'rgba(185,28,28,.06)', color: AC_DANGER,
          fontSize: 12, fontWeight: 500 }}>{error}</div>}
        <nav aria-label="Rubriques du compte" style={{ margin: '0 16px', background: AC_SURF,
          border: `1px solid ${AC_HAIR}`, borderRadius: 18, overflow: 'hidden',
          boxShadow: '0 8px 24px rgba(10,10,10,.035)' }}>
          {ACCOUNT_HOME_ENTRIES.map((entry, index) => <React.Fragment key={entry.id}>
            {index > 0 && <div aria-hidden="true" style={{ height: 1, background: AC_HAIR, marginLeft: 64 }} />}
            <AccountHomeEntry entry={entry} onOpen={openSection} />
          </React.Fragment>)}
        </nav>
      </div>
      {typeof BottomNav !== 'undefined' && <BottomNav active="MOI"
        onChange={(id) => { if (onTabChange) onTabChange(id); }} accent={accent} />}
    </>;

  return <div style={{ position: 'absolute', inset: 0, background: AC_BG, color: AC_INK,
    display: 'flex', flexDirection: 'column', fontFamily: "'Inter Tight', -apple-system, system-ui, sans-serif" }}>
    <VascoNavigationTransition screenKey={accountScreenKey} direction={navigationDirection}>
      {accountScreen}
    </VascoNavigationTransition>
    {profileOpen && <AccountProfileEditorSheet profile={profile} busy={busy}
      onClose={() => setProfileOpen(false)} onSave={saveProfile} />}
    {clinic && <AccountClinicEditorSheet key={clinic.version} clinic={clinic} clinicContext={clinicContext}
      busy={busy} error={clinicError} onClose={() => { setClinic(null); setClinicError(null); }} onSave={saveClinic} />}
    <AccountDocumentTypesManager open={documentTypesOpen} runtime={runtime}
      onClose={() => setDocumentTypesOpen(false)} />
    {logoutAllOpen && <LogoutAllSheet busy={busy} onCancel={() => setLogoutAllOpen(false)} onConfirm={confirmLogoutAll} />}
  </div>;
}

AccountScreenConnected.acceptsClinicContext = true;
AccountScreenConnected.acceptsCorrespondents = true;
AccountScreen = AccountScreenConnected;
window.AccountScreen = AccountScreenConnected;