// Historique du dossier patient : qui l'a ouvert, qui a modifié quoi.
//
// Les deux vues sont séparées parce qu'une ligne est écrite à chaque ouverture :
// mélangées, les consultations noieraient les modifications.
//
// Les consultations viennent du journal d'audit, qui les écrit depuis la
// première migration. Les modifications viennent du journal de champs que le
// PATCH du dossier écrit dans sa propre transaction. Les deux se lisent par
// `GET /api/v1/patients/{id}/history`, et rien ici n'est illustré : sans
// serveur, l'écran dit l'erreur qu'il a reçue.

const PH_T = window.VascoDesignContract;
const PH_OPENER = { open: null };
const PH_PAGE_SIZE = 20;

function PatientHistoryIcon({ color }) {
  return <svg width="15" height="15" viewBox="0 0 24 24" fill="none"
    stroke={color} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3 12a9 9 0 1 0 3-6.7L3 8" /><path d="M3 4v4h4" /><path d="M12 8v4l3 2" />
  </svg>;
}

// Un champ modifié : l'ancienne valeur barrée, la nouvelle en clair.
// Une valeur absente se dit « Non renseigné » au lieu de laisser un vide
// qu'on lirait comme une donnée.
function PatientHistoryChange({ field }) {
  const { fieldText } = window.VascoPatientHistory;
  return (
    <div style={{ display: 'flex', gap: PH_T.space.sm, alignItems: 'baseline', flexWrap: 'wrap' }}>
      <span className="mono" style={{
        flex: '0 0 auto', minWidth: 96,
        color: PH_T.color.muted, fontSize: PH_T.type.caption.fontSize,
        fontWeight: PH_T.type.caption.fontWeight,
        letterSpacing: `${PH_T.type.caption.letterSpacing}px`,
        textTransform: 'uppercase',
      }}>{field.label}</span>
      <span style={{ display: 'flex', gap: 6, alignItems: 'baseline', flexWrap: 'wrap', minWidth: 0 }}>
        <span style={{
          color: PH_T.color.muted, fontSize: PH_T.type.supporting.fontSize,
          textDecoration: field.before ? 'line-through' : 'none',
        }}>{fieldText(field.before)}</span>
        <span aria-hidden="true" style={{ color: PH_T.color.muted, fontSize: PH_T.type.supporting.fontSize }}>→</span>
        <span style={{
          color: PH_T.color.ink, fontSize: PH_T.type.row.fontSize,
          fontWeight: PH_T.type.row.fontWeight,
          letterSpacing: `${PH_T.type.row.letterSpacing}px`,
        }}>{fieldText(field.after)}</span>
      </span>
    </div>
  );
}

function PatientHistoryEntry({ who, at, section = null, fields = null }) {
  return (
    <div style={{
      padding: `${PH_T.space.md}px 0`,
      borderTop: `1px solid ${PH_T.color.border}`,
      display: 'flex', flexDirection: 'column', gap: PH_T.space.sm,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: PH_T.space.md, alignItems: 'baseline' }}>
        <span style={{
          color: PH_T.color.ink, fontSize: PH_T.type.row.fontSize,
          fontWeight: PH_T.type.row.fontWeight,
          letterSpacing: `${PH_T.type.row.letterSpacing}px`,
        }}>{who}</span>
        <span className="mono" style={{
          flexShrink: 0, color: PH_T.color.muted,
          fontSize: PH_T.type.caption.fontSize, fontWeight: PH_T.type.caption.fontWeight,
          letterSpacing: `${PH_T.type.caption.letterSpacing}px`,
        }}>{at}</span>
      </div>
      {section && <div style={{
        color: PH_T.color.secondary, fontSize: PH_T.type.supporting.fontSize,
        fontWeight: PH_T.type.supporting.fontWeight,
      }}>{section}</div>}
      {fields && fields.length > 0 && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {fields.map((field, index) => <PatientHistoryChange key={index} field={field} />)}
        </div>
      )}
    </div>
  );
}

// Une consultation n'a pas de section côté serveur : elle dit une ouverture,
// pas une écriture. C'est l'écran qui nomme ce fait, et lui seul.
function patientHistorySection(entry) {
  return entry.kind === 'viewed' ? 'Dossier ouvert' : entry.section;
}

function PatientHistoryView({ patientId, name, onClose }) {
  const { DetailSheet, ChoiceChip, Button, InlineAction } = window.VascoUI;
  const history = window.VascoPatientHistory;
  const [view, setView] = React.useState('changes');
  const [page, setPage] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [reloadToken, setReloadToken] = React.useState(0);

  React.useEffect(() => {
    const controller = new AbortController();
    let active = true;
    setLoading(true);
    setPage(null);
    setError(null);
    window.VascoApi.patient.history(patientId, {
      view, limit: PH_PAGE_SIZE, signal: controller.signal,
    })
      .then((result) => { if (active) setPage(result); })
      .catch((failure) => {
        if (active) setError(history.errorMessage(failure, 'Historique indisponible.'));
      })
      .finally(() => { if (active) setLoading(false); });
    return () => { active = false; controller.abort(); };
  }, [patientId, view, reloadToken]);

  const loadMore = async () => {
    if (!page || !page.nextCursor || loading) return;
    setLoading(true);
    setError(null);
    try {
      const next = await window.VascoApi.patient.history(patientId, {
        view, limit: PH_PAGE_SIZE, cursor: page.nextCursor,
      });
      setPage(history.mergePage(page, next));
    } catch (failure) {
      setError(history.errorMessage(failure, 'Historique indisponible.'));
    } finally {
      setLoading(false);
    }
  };

  const items = page?.items || [];
  const state = history.listState({ items, loading, error });

  return (
    <DetailSheet title="Historique" subtitle={name} onClose={onClose}
      ariaLabel={`Historique de ${name}`}>
      <div className="vasco-scroll" style={{
        flex: 1, minHeight: 0, overflowY: 'auto',
        padding: `0 ${PH_T.space.xl}px ${PH_T.space.xxl}px`,
      }} aria-busy={loading}>

        <div style={{ display: 'flex', gap: PH_T.space.sm, marginBottom: PH_T.space.lg }}>
          <ChoiceChip selected={view === 'changes'} onClick={() => setView('changes')}>
            Modifications
          </ChoiceChip>
          <ChoiceChip selected={view === 'views'} onClick={() => setView('views')}>
            Consultations
          </ChoiceChip>
        </div>

        {error && items.length > 0 && <div role="alert" style={{
          marginBottom: PH_T.space.md, color: PH_T.color.danger,
          fontSize: PH_T.type.supporting.fontSize,
        }}>{error}</div>}

        {state === 'loading' && <div style={{
          padding: `${PH_T.space.xxl}px 0`, textAlign: 'center',
          color: PH_T.color.muted, fontSize: PH_T.type.supporting.fontSize,
        }}>Chargement de l’historique…</div>}

        {state === 'error' && <div style={{ padding: `${PH_T.space.lg}px 0` }}>
          <div role="alert" style={{
            marginBottom: PH_T.space.sm, color: PH_T.color.danger,
            fontSize: PH_T.type.supporting.fontSize,
          }}>{error}</div>
          <InlineAction onClick={() => setReloadToken((value) => value + 1)}>
            Réessayer
          </InlineAction>
        </div>}

        {state === 'empty' && <div className="serif" style={{
          padding: `${PH_T.space.xl}px 0`, textAlign: 'center',
          color: PH_T.color.muted, fontSize: PH_T.type.supporting.fontSize,
        }}>{history.emptyMessage(view)}</div>}

        {items.length > 0 && <div style={{ display: 'flex', flexDirection: 'column' }}>
          {items.map((entry) => (
            <PatientHistoryEntry key={entry.id} who={entry.actor.displayName}
              at={history.entryTimestamp(entry.at)}
              section={patientHistorySection(entry)} fields={entry.fields} />
          ))}
        </div>}

        {page?.hasMore && <Button onClick={loadMore} busy={loading}
          style={{ width: '100%', marginTop: PH_T.space.lg }}>Afficher plus</Button>}
      </div>
    </DetailSheet>
  );
}

// Le nom se lit dans le dossier déjà chargé par la liste : l'historique parle
// du dossier ouvert, il n'a pas à le recharger pour afficher son titre.
function patientHistoryRecordName(patientId) {
  const patient = (window.PATIENTS_FULL || []).find((item) => item.id === patientId);
  if (!patient) return 'Ce dossier';
  return [patient.last, patient.first].filter(Boolean).join(' ') || 'Ce dossier';
}

// La feuille vit DANS le dossier, comme celle des évènements : c'est ce qui lui
// donne le cadre du téléphone au téléphone, et la colonne du dossier au bureau.
// Un portail vers la scène la ferait prendre toute la fenêtre de bureau, par-
// dessus la barre de navigation et la liste des patients.
//
// Le menu « Plus » est rendu par la barre d'onglets de la référence figée, qui
// n'a pas d'état à nous prêter : l'enveloppe s'annonce donc comme l'ouvreur,
// tant qu'elle est montée.
const PatientHistoryDetailBase = PatientDetail;
PatientDetail = function PatientHistoryDetail(props) {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    PH_OPENER.open = () => setOpen(true);
    return () => { PH_OPENER.open = null; };
  }, []);
  // Changer de dossier referme l'historique du précédent plutôt que de lui
  // faire afficher celui d'un autre patient.
  React.useEffect(() => { setOpen(false); }, [props.patientId]);
  return <>
    <PatientHistoryDetailBase {...props} />
    {open && props.patientId && <PatientHistoryView patientId={props.patientId}
      name={patientHistoryRecordName(props.patientId)} onClose={() => setOpen(false)} />}
  </>;
};

window.VASCO_PATIENT_MORE = window.VASCO_PATIENT_MORE || [];
window.VASCO_PATIENT_MORE.push({
  id: 'history',
  label: 'Historique',
  icon: (color) => <PatientHistoryIcon color={color} />,
  onSelect: () => { if (PH_OPENER.open) PH_OPENER.open(); },
});