// Surface Notes connectée. La maquette V5 reste figée : cette extension prend
// en charge le rendu produit, tout en conservant les routes versionnées déjà en place.

const PATIENT_NOTE_MAX_LENGTH = 10000;
const PN_INK = window.VT?.ink || '#0a0a0a';
const PN_SUB = window.VT?.sub || '#6b7280';
const PN_HAIR = window.VT?.hair || 'rgba(10,10,10,.10)';
const PN_HAIR2 = window.VT?.hair2 || 'rgba(10,10,10,.14)';
const PN_DANGER = window.VT?.danger || '#b91c1c';
const PatientNotesBaseResume = TabResume;

function PatientNotePinIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24"
    fill="none" stroke="currentColor" strokeWidth="1.7"
    strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M6 3h12M8 3v7l-2 7h12l-2-7V3M12 17v5" />
  </svg>;
}

function PatientNoteTrashIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"
    strokeLinejoin="round" aria-hidden="true">
    <path d="M4 7h16M9 7V4h6v3M7 7l1 13h8l1-13M10 11v5M14 11v5" />
  </svg>;
}

function PatientNoteIconButton({ label, onClick, disabled, danger = false, active = false, children }) {
  const { IconButton } = window.VascoUI;
  return <IconButton label={label} title={label} size={34}
    onClick={onClick} disabled={disabled} pressed={active} style={{
      display: 'grid', flex: '0 0 auto', placeItems: 'center',
      border: `1px solid ${danger ? 'rgba(185,28,28,.20)' : PN_HAIR}`,
      borderRadius: 17, background: danger ? 'rgba(185,28,28,.05)' : (active ? 'rgba(61,107,143,.10)' : '#fff'),
      color: danger ? PN_DANGER : (active ? '#3d6b8f' : PN_SUB),
      cursor: disabled ? 'default' : 'pointer', opacity: disabled ? .45 : 1,
    }}>{children}</IconButton>;
}

function PatientNoteCard({ note, accent, busy, canPin, canDelete, onTogglePin, onDelete }) {
  const moment = note.when || note.d || 'Date non renseignée';
  return <article style={{
    position: 'relative', marginBottom: 10, overflow: 'hidden',
    border: `1px solid ${note.pinned ? `${accent}45` : PN_HAIR2}`,
    borderRadius: 17, background: '#fff', boxShadow: note.pinned ? VT.shadowMd : 'none',
  }}>
    {note.pinned && <div aria-hidden="true" style={{
      position: 'absolute', inset: '0 auto 0 0', width: 4, background: accent,
    }} />}
    <div style={{ padding: note.pinned ? '12px 12px 11px 16px' : '12px' }}>
      <div className="serif" style={{ fontSize: 14.5, lineHeight: 1.5, color: PN_INK }}>
        {note.text}
      </div>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 10, marginTop: 9,
      }}>
        <span className="mono" style={{
          minWidth: 0, color: PN_SUB, fontSize: 10, fontWeight: 500,
          letterSpacing: '.25px', lineHeight: 1.35,
        }}>{moment} · {note.author}</span>
        <div style={{ display: 'flex', flex: '0 0 auto', gap: 7 }}>
          {canPin && <PatientNoteIconButton
            label={`${note.pinned ? 'Détacher' : 'Épingler'} la note du ${moment}`}
            disabled={busy} active={note.pinned} onClick={() => onTogglePin(note)}>
            <PatientNotePinIcon />
          </PatientNoteIconButton>}
          {canDelete && <PatientNoteIconButton
            label={`Supprimer la note du ${moment}`} disabled={busy} danger
            onClick={() => onDelete(note)}>
            <PatientNoteTrashIcon />
          </PatientNoteIconButton>}
        </div>
      </div>
    </div>
  </article>;
}

function ConnectedPatientNotes({ p, accent, runtime = null, focusToken = 0 }) {
  const { Button } = window.VascoUI;
  const [draft, setDraft] = React.useState('');
  const draftRef = React.useRef(null);
  const [notes, setNotes] = React.useState(p.notes || []);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(null);
  const capabilities = p.capabilities || {};
  const canCreate = capabilities.create_note !== false;
  const canPin = capabilities.pin_note !== false;
  const canDelete = capabilities.delete_note !== false;
  const pinned = notes.filter((note) => note.pinned);
  const recent = notes.filter((note) => !note.pinned);

  const reload = React.useCallback(async () => {
    if (!runtime) return;
    setBusy(true);
    try {
      setNotes(await runtime.notes(p.id));
      setError(null);
    } catch (failure) {
      setError(failure?.message || 'Chargement des notes impossible');
    } finally {
      setBusy(false);
    }
  }, [runtime, p.id]);

  React.useEffect(() => { void reload(); }, [reload]);
  React.useEffect(() => {
    if (!focusToken || !draftRef.current) return;
    draftRef.current.focus({ preventScroll: true });
    draftRef.current.scrollIntoView({ block: 'center', behavior: 'smooth' });
  }, [focusToken]);

  const add = async () => {
    if (!draft.trim() || !runtime) return;
    setBusy(true);
    setError(null);
    try {
      const created = await runtime.createNote(p.id, draft.trim());
      setNotes((current) => [created, ...current]);
      setDraft('');
    } catch (failure) {
      setError(failure?.message || 'Création de la note impossible');
    } finally {
      setBusy(false);
    }
  };

  const togglePin = async (note) => {
    if (!runtime) return;
    setBusy(true);
    setError(null);
    try {
      const updated = await runtime.pinNote(p.id, note, !note.pinned);
      setNotes((current) => current.map((item) => item.id === updated.id ? updated : item));
    } catch (failure) {
      setError(failure?.message || 'Épinglage impossible');
      if (failure?.status === 409) await reload();
    } finally {
      setBusy(false);
    }
  };

  const deleteNote = async (note) => {
    if (!runtime) return;
    setBusy(true);
    setError(null);
    try {
      const deleted = await runtime.deleteNote(p.id, note);
      setNotes((current) => current.filter((item) => item.id !== note.id));
      const undoable = Boolean(deleted.undoExpiresAt)
        && new Date(deleted.undoExpiresAt).getTime() > Date.now();
      showToast('Note supprimée', 'info', undoable ? {
        duration: 5000,
        action: {
          label: 'Annuler',
          onClick: () => {
            runtime.restoreNote(p.id, deleted)
              .then((restored) => setNotes((current) => [restored, ...current]))
              .catch((failure) => setError(failure?.message || 'Restauration impossible'));
          },
        },
      } : { duration: 5000 });
    } catch (failure) {
      setError(failure?.message || 'Suppression impossible');
      if (failure?.status === 409) await reload();
    } finally {
      setBusy(false);
    }
  };

  return <div style={{ padding: '20px 24px 24px' }}>
    <section style={{
      marginBottom: 24, padding: 12, border: `1px solid ${PN_HAIR2}`,
      borderRadius: 17, background: '#fff',
    }}>
      <PCaption>Nouvelle note</PCaption>
      <textarea ref={draftRef} value={draft} maxLength={PATIENT_NOTE_MAX_LENGTH}
        onChange={(event) => setDraft(event.target.value)}
        placeholder="Une observation, un détail à retenir…" rows={3}
        style={{
          width: '100%', marginTop: 8, border: 0, outline: 0, resize: 'none',
          background: 'transparent', color: PN_INK, fontFamily: 'inherit',
          fontSize: 14, lineHeight: 1.5,
        }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="mono" style={{
          marginRight: 'auto', color: draft.length >= PATIENT_NOTE_MAX_LENGTH ? PN_DANGER : PN_SUB,
          fontSize: 9.5, fontWeight: 500,
        }}>{draft.length} / {PATIENT_NOTE_MAX_LENGTH}</span>
        {!canCreate && <span style={{ color: PN_SUB, fontSize: 11.5, fontWeight: 600 }}>
          Indisponible pour ce dossier
        </span>}
        <Button size="medium" variant="solid" onClick={() => void add()}
          disabled={!draft.trim() || busy || !runtime || !canCreate}
          busy={busy} busyLabel="Envoi…"
          style={{
            minWidth: 88, height: 36, borderRadius: 12,
            background: draft.trim() && !busy && canCreate ? PN_INK : '#e5e5e5',
            color: draft.trim() && !busy && canCreate ? '#fff' : PN_SUB,
            cursor: draft.trim() && !busy && canCreate ? 'pointer' : 'default',
            fontSize: 12, fontWeight: 700,
          }}>Ajouter</Button>
      </div>
    </section>

    {error && <div role="alert" style={{
      marginBottom: 16, padding: '9px 12px', borderRadius: 12,
      background: 'rgba(185,28,28,.06)', color: PN_DANGER, fontSize: 12, fontWeight: 600,
    }}>{error}</div>}

    {pinned.length > 0 && <section style={{ marginBottom: 24 }}>
      <PCaption style={{ color: accent }}>Épinglées</PCaption>
      <div style={{ marginTop: 10 }}>
        {pinned.map((note) => <PatientNoteCard key={note.id} note={note} accent={accent}
          busy={busy} canPin={canPin} canDelete={canDelete}
          onTogglePin={(item) => void togglePin(item)} onDelete={(item) => void deleteNote(item)} />)}
      </div>
    </section>}

    <section>
      <PCaption>Notes récentes</PCaption>
      <div style={{ marginTop: 10 }}>
        {recent.length === 0
          ? <div className="serif" style={{ padding: '14px 0', color: PN_SUB, fontSize: 14, fontStyle: 'italic' }}>
            Aucune note récente.
          </div>
          : recent.map((note) => <PatientNoteCard key={note.id} note={note} accent={accent}
            busy={busy} canPin={canPin} canDelete={canDelete}
            onTogglePin={(item) => void togglePin(item)} onDelete={(item) => void deleteNote(item)} />)}
      </div>
    </section>
  </div>;
}

function PatientPinnedNotesSummary({ patient, runtime, accent }) {
  const [pinned, setPinned] = React.useState([]);

  React.useEffect(() => {
    if (!runtime) return undefined;
    let active = true;
    runtime.notes(patient.id)
      .then((notes) => {
        if (active) setPinned(notes.filter((note) => note.pinned));
      })
      .catch(() => { if (active) setPinned([]); });
    return () => { active = false; };
  }, [runtime, patient.id]);

  if (!pinned.length) return null;
  return <section style={{ padding: '20px 24px 8px' }} aria-label="Notes épinglées">
    <PCaption>Notes épinglées</PCaption>
    <div style={{ marginTop: 10 }}>
      {pinned.map((note) => <div key={note.id} style={{
        display: 'flex', gap: 10, padding: '11px 12px', marginBottom: 8,
        border: `1px solid ${accent}40`, borderRadius: 16, background: '#fff',
      }}>
        <span aria-hidden="true" style={{ width: 4, flex: '0 0 auto', background: accent }} />
        <span className="serif" style={{ color: PN_INK, fontSize: 14.5, lineHeight: 1.45 }}>
          {note.text}
        </span>
      </div>)}
    </div>
  </section>;
}

function PatientNotesResume(props) {
  return <>
    <PatientPinnedNotesSummary patient={props.p} runtime={props.runtime} accent={props.accent} />
    <PatientNotesBaseResume {...props} />
  </>;
}

TabNotes = ConnectedPatientNotes;
TabResume = PatientNotesResume;