// Extension tactile du widget CCAM. La V5 de référence reste gelée : ce
// composant remplace son symbole global avant le montage de la coque.
(function installCcamTactile() {
  'use strict';

  const contract = window.VascoCcamTactile;

  function money(minor) {
    if (minor === null || minor === undefined) return 'Tarif non publié';
    return `${(minor / 100).toLocaleString('fr-FR', {
      minimumFractionDigits: 2, maximumFractionDigits: 2,
    })} €`;
  }

  function billed(act) {
    if (!contract.isPriced(act)) return 'Tarif non publié';
    const rate = act.billing_rate_basis_points;
    if (rate === null || rate === undefined) return money(act.amount_minor);
    return money(Math.floor((act.amount_minor * rate + 5000) / 10000));
  }

  function rateLabel(act) {
    const percent = contract.billingRatePercent(act);
    return percent === null ? '– %' : `${percent.toLocaleString('fr-FR', {
      maximumFractionDigits: 2,
    })} %`;
  }

  function positionLabel(index) {
    return index === 0 ? '1re' : `${index + 1}e`;
  }

  function positionActionLabel(acts, targetIndex) {
    return `Passer en ${positionLabel(targetIndex)} position · ${rateLabel(acts[targetIndex])}`;
  }

  function capability(data, action) {
    return (data._vasco_widget_capabilities || []).find((entry) => entry.action === action) || null;
  }

  function TactileCheckbox({ act, disabled, onChange }) {
    const checked = contract.isSelected(act);
    return (
      <button type="button" role="checkbox" aria-checked={checked}
        aria-label={`${checked ? 'Exclure' : 'Retenir'} ${act.code}`}
        disabled={disabled}
        onClick={(event) => { event.stopPropagation(); onChange(); }}
        className={disabled ? undefined : 'press'}
        style={{
          minWidth: 44, minHeight: 44, width: 44, height: 44, padding: 0,
          border: 'none', background: 'transparent', display: 'flex',
          alignItems: 'center', justifyContent: 'center', cursor: disabled ? 'default' : 'pointer',
        }}>
        <span aria-hidden="true" style={{
          width: 22, height: 22, borderRadius: 7,
          border: `1.5px solid ${checked ? CH_INK : CH_SUB}`,
          background: checked ? CH_INK : CH_SURF, color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 15, fontWeight: 800,
        }}>{checked ? '✓' : ''}</span>
      </button>
    );
  }

  function CcamActionSheet({ open, data, act, busy, editable, onClose, onCommand }) {
    const acts = contract.allActs(data);
    const sheetAct = act || { code: '', label: '', amount_minor: null, selected: false };
    const index = acts.findIndex((item) => item.code === sheetAct.code);
    const selected = contract.isSelected(sheetAct);
    const { BottomSheet, Button, tokens } = window.VascoUI;
    const moveActionCount = Number(selected && index > 0)
      + Number(selected && index >= 0 && index < acts.length - 1);
    const positionButtonStyle = { fontSize: 12 };
    const metrics = [
      ['Catalogue', money(sheetAct.amount_minor)],
      ['Coefficient', rateLabel(sheetAct)],
      ['Facturé', selected ? billed(sheetAct) : 'Non retenu'],
    ];
    return <BottomSheet open={open} title={sheetAct.code} subtitle={sheetAct.label}
      onClose={onClose} busy={Boolean(busy)} maxHeight="72%"
      contentStyle={{ overscrollBehavior: 'contain' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
            gap: tokens.space.sm, margin: `${tokens.space.xs}px 0 ${tokens.space.lg}px` }}>
            {metrics.map(([label, value]) => <div key={label} style={{
              minWidth: 0, padding: '10px 8px', borderRadius: tokens.radius.md,
              background: tokens.color.surfaceAlt, textAlign: 'center',
            }}>
              <div className="mono" style={{ fontSize: 9, fontWeight: 650,
                color: tokens.color.secondary, textTransform: 'uppercase', letterSpacing: '.35px' }}>{label}</div>
              <div className="mono" style={{ fontSize: 12, fontWeight: 700,
                color: tokens.color.ink, marginTop: 5, whiteSpace: 'nowrap' }}>{value}</div>
            </div>)}
          </div>
          {/* Même composition que les actions de la fiche rendez-vous : les actions
              sont des surfaces jumelles, pas des liens ni des pilules isolées. */}
          <div data-ccam-actions="true" style={{ display: 'grid',
            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: tokens.space.sm }}>
            {selected && index > 0 && <Button grow size="medium" variant="accent-soft"
              disabled={busy || !editable} style={positionButtonStyle}
              onClick={() => onCommand({ type: 'move', code: sheetAct.code, delta: -1 })}>
              {positionActionLabel(acts, index - 1)}
            </Button>}
            {selected && index >= 0 && index < acts.length - 1 && <Button grow size="medium"
              variant="accent-soft" style={positionButtonStyle}
              disabled={busy || !editable}
              onClick={() => onCommand({ type: 'move', code: sheetAct.code, delta: 1 })}>
              {positionActionLabel(acts, index + 1)}
            </Button>}
            <Button grow size="medium" variant="danger" disabled={busy || !editable}
              onClick={() => onCommand({ type: 'remove', code: sheetAct.code })}
              style={{
                fontSize: 12,
                gridColumn: moveActionCount === 1 ? undefined : '1 / -1',
                background: 'rgba(185,28,28,0.06)',
                border: '1px solid rgba(185,28,28,0.12)', color: '#b91c1c',
              }}>
              Retirer cet acte
            </Button>
          </div>
    </BottomSheet>;
  }

  function TactileCcamWidget({ data: incoming, onAdd, patientId,
    onWidgetUpdated = null, allowCroSelection = true, refreshKey = null }) {
    const { InlineAction, SimpleSelect } = window.VascoUI;
    const [data, setData] = React.useState(incoming);
    const [openedCode, setOpenedCode] = React.useState(null);
    const [busy, setBusy] = React.useState(null);
    const [error, setError] = React.useState(null);
    const [croDocuments, setCroDocuments] = React.useState([]);
    const [croLoadState, setCroLoadState] = React.useState('idle');
    const attempts = React.useRef({});
    const rowRefs = React.useRef({});

    React.useEffect(() => {
      if ((incoming?._vasco_widget_version || 0) > (data?._vasco_widget_version || 0)) setData(incoming);
    }, [incoming?._vasco_widget_version]);

    React.useEffect(() => {
      if (!allowCroSelection || !patientId || !window.VascoApi?.patient?.documents) return undefined;
      const controller = new AbortController();
      setCroLoadState('loading');
      window.VascoApi.patient.documents(patientId, 'CRO', { signal: controller.signal })
        .then((page) => {
          setCroDocuments((page.items || []).filter((document) => document.status !== 'archived'));
          setCroLoadState('ready');
        })
        .catch((failure) => {
          if (failure?.name !== 'AbortError') setCroLoadState('error');
        });
      return () => controller.abort();
    }, [patientId, allowCroSelection, refreshKey, incoming?._vasco_widget_version]);

    const randomKey = () => window.crypto?.randomUUID?.() || `vasco-ccam-${Date.now()}-${Math.random()}`;
    const widgetRef = () => ({
      id: data._vasco_widget_id, version: data._vasco_widget_version, type: 'ccam',
    });

    const reReadAfterConflict = async () => {
      const conversationId = data._vasco_conversation_id;
      if (!conversationId) return false;
      const conversation = await window.VascoApi.assistant.getConversation(conversationId);
      const fresh = conversation.messages.find((message) => message.widgetId === data._vasco_widget_id);
      if (!fresh?.data) return false;
      setData(fresh.data);
      return true;
    };

    const run = async (action, options, signature) => {
      if (!data._vasco_widget_id || busy) return;
      const stable = attempts.current[signature] || randomKey();
      attempts.current[signature] = stable;
      setBusy(signature);
      setError(null);
      try {
        const result = await window.VascoApi.assistant.widgetAction(widgetRef(), action, {
          ...(options || {}), idempotencyKey: stable,
        });
        const next = {
          ...result.widget.data,
          _vasco_conversation_id: data._vasco_conversation_id,
          _vasco_widget_id: result.widget.id,
          _vasco_widget_version: result.widget.version,
          _vasco_widget_status: result.widget.status,
          _vasco_widget_capabilities: result.widget.capabilities || [],
          _vasco_cro_document_id: result.widget.type === 'ccam'
            ? (result.widget.cro_document_id || null)
            : null,
        };
        setData(next);
        // Le composant est aussi consommé depuis le CRO. Remonter toute mutation
        // d'état garde la fiche documentaire et le fil Assistant synchronisés avec
        // la version exacte renvoyée par le serveur. Copier ne change pas la fiche.
        if (action !== 'copy') onWidgetUpdated?.(result.widget);
        delete attempts.current[signature];
        return result;
      } catch (failure) {
        if (failure?.status === 409 && await reReadAfterConflict()) {
          delete attempts.current[signature];
          setError('La fiche a changé ailleurs. Elle a été actualisée ; votre action reste à refaire.');
        } else {
          // Une perte réseau conserve la même clé : le second appui rejoue la
          // même commande. Les autres refus peuvent repartir sur une commande neuve.
          if (failure?.code !== 'network_error' && failure?.code !== 'request_timeout') {
            delete attempts.current[signature];
          }
          setError(contract.errorMessage(failure));
        }
        return null;
      } finally {
        setBusy(null);
      }
    };

    const edit = async (command) => {
      const replacement = contract.replacement(data, command);
      if (!replacement) return;
      const result = await run('edit', { replacement }, `edit:${JSON.stringify(command)}`);
      if (result) setOpenedCode(null);
    };
    const add = async (code) => {
      const selected = contract.allActs(data).filter(contract.isSelected).map((act) => act.code);
      const result = await run('edit', {
        replacement: { selected_codes: selected, added_codes: [code] },
      }, `add:${code}`);
      if (result && onAdd) { /* la recherche se referme dans CCAMAddAct */ }
    };
    const copy = async () => {
      const result = await run('copy', null, 'copy');
      if (!result || !navigator.clipboard?.writeText) return;
      const text = contract.allActs(data).map((act) => `${act.code} – ${act.label}`).join('\n');
      try { await navigator.clipboard.writeText(text); } catch { /* reçu serveur acquis */ }
    };
    const selectCro = async (croDocumentId) => {
      const selected = contract.allActs(data).filter(contract.isSelected).map((act) => act.code);
      await run('edit', {
        replacement: {
          selected_codes: selected,
          cro_document_id: croDocumentId || null,
        },
      }, `cro:${croDocumentId || 'none'}`);
    };

    const acts = contract.allActs(data);
    const opened = acts.find((act) => act.code === openedCode) || null;
    const closeSheet = () => {
      const code = openedCode;
      setOpenedCode(null);
      window.setTimeout(() => rowRefs.current[code]?.focus({ preventScroll: true }),
        window.VascoUI.tokens.motion.sheetExit);
    };
    const discarded = Boolean(data.discarded_at);
    const confirmed = Boolean(data.confirmed_at);
    const editCapability = capability(data, 'edit');
    const confirmCapability = capability(data, 'confirm');
    const canEdit = Boolean(data._vasco_widget_id)
      && (!editCapability || editCapability.enabled !== false);
    const hasSelectedActs = acts.some(contract.isSelected);
    const canConfirm = (!confirmCapability || confirmCapability.enabled !== false)
      && hasSelectedActs;
    const croDocumentId = data._vasco_cro_document_id || null;
    const selectedCro = croDocuments.find((document) => document.id === croDocumentId) || null;
    const croOptions = croDocuments.map((document) => [
      document.id,
      `${document.label}${document.d ? ` · ${document.d}` : ''}`,
    ]);

    return (
      <div style={{
        background: CH_SURF, borderRadius: 22, padding: '16px 18px',
        border: `1px solid ${CH_HAIR}`, boxShadow: VT.shadowCard,
        opacity: discarded ? .55 : 1, position: 'relative',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 10 }}>
          <span className="mono" style={{ fontSize: 10, fontWeight: 650, color: CH_SUB, letterSpacing: '.5px', textTransform: 'uppercase' }}>
            Codage CCAM – {data.intervention}
          </span>
          {data._vasco_widget_id && (
            <InlineAction onClick={() => void copy()} disabled={Boolean(busy)}
              ariaLabel="Copier le codage">Copier</InlineAction>
          )}
        </div>

        <div style={{ marginBottom: 12 }}>
          <div className="mono" style={{
            fontSize: 9, fontWeight: 650, color: CH_SUB, letterSpacing: '.4px',
            textTransform: 'uppercase', marginBottom: 6,
          }}>CRO rattaché</div>
          {allowCroSelection ? <SimpleSelect
            id={`ccam-cro-${data._vasco_widget_id || 'preview'}`}
            aria-label="CRO rattaché"
            value={croDocumentId || ''}
            currentLabel={selectedCro
              ? `${selectedCro.label}${selectedCro.d ? ` · ${selectedCro.d}` : ''}`
              : croDocumentId ? data.intervention : null}
            placeholder={croLoadState === 'loading' ? 'Chargement des CRO…' : 'Choisir le CRO'}
            options={croOptions}
            disabled={!canEdit || Boolean(busy) || croLoadState === 'loading'}
            onChange={(value) => void selectCro(value)}
          /> : <div style={{ fontSize: 13, fontWeight: 500, color: CH_INK }}>
            {croDocumentId ? data.intervention : 'CRO non sélectionné'}
          </div>}
          {!croDocumentId && croLoadState !== 'loading' && (
            <div style={{ fontSize: 11.5, color: CH_SUB, marginTop: 6, lineHeight: 1.4 }}>
              Sélection requise avant confirmation.
            </div>
          )}
          {croLoadState === 'error' && (
            <div role="alert" style={{ fontSize: 11.5, color: '#8f3328', marginTop: 6 }}>
              Les CRO du dossier n’ont pas pu être chargés.
            </div>
          )}
        </div>

        {error && <div role="alert" style={{ padding: '9px 11px', borderRadius: 12, marginBottom: 8, background: 'rgba(166,60,47,.08)', color: '#8f3328', fontSize: 12, lineHeight: 1.4 }}>{error}</div>}

        <div style={{ borderTop: `1px solid ${CH_HAIR}` }}>
          {acts.map((act) => {
            const selected = contract.isSelected(act);
            const nonBillable = contract.nonBillableRank(act);
            const amount = !selected ? 'Non retenu' : contract.contributes(act)
              ? billed(act) : nonBillable ? 'Non facturable à ce rang' : money(act.amount_minor);
            return (
              <div key={act.code} ref={(node) => { rowRefs.current[act.code] = node; }}
                className="ccam-tactile-row" role="button" tabIndex={0}
                aria-label={`Ouvrir les actions de ${act.code}`}
                onClick={() => setOpenedCode(act.code)}
                onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); setOpenedCode(act.code); } }}
                style={{
                  minHeight: 56, display: 'flex', alignItems: 'center', gap: 8,
                  borderBottom: `1px solid ${CH_HAIR}`, cursor: 'pointer',
                }}>
                <TactileCheckbox act={act} disabled={!canEdit || Boolean(busy)}
                  onChange={() => void edit({ type: 'toggle', code: act.code })} />
                <div style={{ flex: 1, minWidth: 0, padding: '8px 0' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                    <span className="mono" style={{ fontSize: 12, fontWeight: 750, color: CH_INK }}>{act.code}</span>
                    <span className="mono" style={{ fontSize: 10, color: CH_SUB, fontWeight: 550 }}>
                      {money(act.amount_minor)} · {rateLabel(act)}
                    </span>
                  </div>
                  <div style={{ fontSize: 12, color: selected ? CH_SUB : '#8b8b87', marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{act.label}</div>
                </div>
                <div style={{ minWidth: 88, maxWidth: 118, textAlign: 'right', padding: '8px 0' }}>
                  <span className="mono" style={{
                    fontSize: nonBillable ? 10.5 : 12,
                    lineHeight: 1.25,
                    fontWeight: contract.contributes(act) ? 750 : 500,
                    color: contract.contributes(act) ? CH_INK : CH_SUB,
                  }}>{amount}</span>
                </div>
                <span aria-hidden="true" style={{ color: CH_SUB, fontSize: 18 }}>›</span>
              </div>
            );
          })}
        </div>

        {!hasSelectedActs && !discarded && (
          <div style={{ fontSize: 11.5, color: CH_SUB, marginTop: 8, lineHeight: 1.4 }}>
            Sélectionnez au moins un acte avant de confirmer.
          </div>
        )}

        {data._vasco_widget_id && canEdit && (
          <CCAMAddAct onAdd={(code) => void add(code)} existing={acts.map((act) => act.code)} />
        )}

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 12, marginTop: 4, borderTop: `1px solid ${CH_HAIR2}` }}>
          <span style={{ fontSize: 13, fontWeight: 700, color: CH_INK }}>Total estimé après coefficient</span>
          <span className="mono" style={{ fontSize: 18, fontWeight: 800, color: CH_INK }}>{money(data.total_minor)}</span>
        </div>

        {data._vasco_widget_id && (
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 16, marginTop: 12 }}>
            {discarded ? (
              <>
                <span style={{ fontSize: 12, fontWeight: 600, color: CH_SUB }}>Codage écarté</span>
                <InlineAction disabled={Boolean(busy)} onClick={() => void run('discard', { discarded: false }, 'restore')}
                  style={{ color: CH_SUB }}>Rétablir</InlineAction>
              </>
            ) : (
              <>
                <InlineAction disabled={Boolean(busy)} danger onClick={() => void run('discard', { discarded: true }, 'discard')}>Rejeter</InlineAction>
                <InlineAction disabled={Boolean(busy) || confirmed || !canConfirm} onClick={() => void run('confirm', null, 'confirm')}
                  style={{ color: confirmed ? CH_OK : CH_SUB }}>
                  {confirmed ? 'Confirmé' : 'Confirmer'}
                </InlineAction>
              </>
            )}
          </div>
        )}

        <CcamActionSheet open={Boolean(opened)} data={data} act={opened} busy={Boolean(busy)} editable={canEdit}
          onClose={closeSheet} onCommand={(command) => void edit(command)} />
      </div>
    );
  }

  window.WidgetCCAM = TactileCcamWidget;
})();