second-life

Sleeping

File size: 43,905 Bytes

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Patient Portal — Second Life</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body{background:#0d1117;}
.trial-card{background:#161b22;border:1px solid #30363d;border-radius:10px;padding:1.5rem;}
.score-circle{width:72px;height:72px;border-radius:50%;border:3px solid currentColor;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;line-height:1.1;flex-shrink:0;}
.score-circle small{font-size:.6rem;font-weight:500;}
.score-high{color:#2ea043;}.score-mid{color:#d29922;}.score-low{color:#8b949e;}
.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;background:#0d1117;border-radius:8px;padding:.75rem;}
@media(max-width:576px){.detail-grid{grid-template-columns:repeat(2,1fr);}}
.detail-grid .lbl{font-size:.7rem;color:#8b949e;text-transform:uppercase;letter-spacing:.05em;}
.detail-grid .val{font-size:.9rem;font-weight:600;}
.detail-grid .col-span-2{grid-column:span 2;}
.bar-section{background:#0d1117;border-radius:8px;padding:.75rem;}
.bar-lbl{font-size:.75rem;color:#8b949e;}.bar-val{font-size:.75rem;font-weight:600;}
.progress{height:5px;background:#21262d;}
.sec-head{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#8b949e;margin-bottom:.5rem;font-weight:600;}
.autocomplete-list{position:absolute;z-index:1000;width:100%;background:#161b22;border:1px solid #30363d;border-radius:0 0 6px 6px;max-height:190px;overflow-y:auto;display:none;list-style:none;padding:0;margin:0;}
.autocomplete-list li{padding:.3rem .6rem;cursor:pointer;font-size:.85rem;}
.autocomplete-list li:hover{background:#21262d;}
.criteria-pre{white-space:pre-wrap;font-family:inherit;font-size:.78rem;background:#0d1117;padding:.6rem;border-radius:4px;max-height:200px;overflow-y:auto;}
.st-pending{color:#d29922;}.st-accepted{color:#2ea043;}.st-rejected{color:#f85149;}.st-completed{color:#58a6ff;}
.form-control,.form-select{background:#0d1117 !important;border-color:#30363d;color:#e6edf3 !important;}
.form-control:focus,.form-select:focus{border-color:#58a6ff !important;box-shadow:0 0 0 .2rem rgba(88,166,255,.2) !important;}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar border-bottom border-secondary px-3 py-2" style="background:#161b22">
  <span class="navbar-brand fw-bold" style="color:#58a6ff">⬡ Second Life</span>
  <div class="d-flex align-items-center gap-3">
    <span class="text-light small">{{ patient.first_name }} {{ patient.last_name }}</span>
    <span class="badge bg-primary">Patient</span>
    <button class="btn btn-sm btn-outline-secondary" id="logoutBtn">Logout</button>
  </div>
</nav>
<!-- System banner -->
<div id="sysBanner" class="alert alert-warning rounded-0 mb-0 py-2 text-center small" style="display:none">
  ⏳ Pipeline still loading — trial matches will be available once model training completes.
</div>

<div class="container-xl py-3">
  <ul class="nav nav-tabs mb-4" id="mainTabs">
    <li class="nav-item"><button class="nav-link active" data-tab="profile">My Profile</button></li>
    <li class="nav-item"><button class="nav-link" data-tab="trials">Suggested Trials</button></li>
    <li class="nav-item"><button class="nav-link" data-tab="connections">My Connections</button></li>
    <li class="nav-item"><button class="nav-link" data-tab="inbox">Inbox <span id="inboxBadge" class="badge bg-danger ms-1" style="display:none">0</span></button></li>
  </ul>

  <!-- ===== PROFILE TAB ===== -->
  <div id="tab-profile">
    <div class="row g-4">
      <div class="col-lg-7">
        <div class="card border-secondary" style="background:#161b22">
          <div class="card-header border-secondary">Personal Information</div>
          <div class="card-body">
            <div class="row g-3">
              <div class="col-sm-6">
                <label class="form-label small">First Name</label>
                <input type="text" class="form-control form-control-sm" id="pf-fn">
              </div>
              <div class="col-sm-6">
                <label class="form-label small">Last Name</label>
                <input type="text" class="form-control form-control-sm" id="pf-ln">
              </div>
              <div class="col-sm-6">
                <label class="form-label small">Date of Birth</label>
                <input type="date" class="form-control form-control-sm" id="pf-dob">
              </div>
              <div class="col-sm-6">
                <label class="form-label small">Gender</label>
                <select class="form-select form-select-sm" id="pf-gender">
                  <option value="">Select</option>
                  <option value="M">Male</option>
                  <option value="F">Female</option>
                  <option value="O">Other</option>
                </select>
              </div>
              <div class="col-12">
                <label class="form-label small">Address</label>
                <input type="text" class="form-control form-control-sm" id="pf-addr" placeholder="123 Main St Boston MA 02101">
              </div>
            </div>
          </div>
        </div>

        <div class="card border-secondary mt-3" style="background:#161b22">
          <div class="card-header border-secondary d-flex justify-content-between">
            <span>Medical Conditions</span>
            <small class="text-muted">Used for trial matching</small>
          </div>
          <div class="card-body">
            <div id="condTags" class="d-flex flex-wrap gap-1 mb-2" style="min-height:1.8rem"></div>
            <div class="position-relative">
              <input type="text" class="form-control form-control-sm" id="condInput"
                     placeholder="Type to search and add conditions…" autocomplete="off">
              <ul class="autocomplete-list" id="condAutoList"></ul>
            </div>
          </div>
        </div>

        <div class="card border-secondary mt-3" style="background:#161b22">
          <div class="card-header border-secondary">Medications</div>
          <div class="card-body">
            <div id="medTags" class="d-flex flex-wrap gap-1 mb-2" style="min-height:1.8rem"></div>
            <input type="text" class="form-control form-control-sm" id="medInput"
                   placeholder="Type medication name and press Enter…">
          </div>
        </div>

        <div class="card border-secondary mt-3" style="background:#161b22">
          <div class="card-header border-secondary d-flex justify-content-between">
            <span>Documents</span>
            <small class="text-muted">PDF, DOCX, TXT, PNG, JPG — max 10 MB</small>
          </div>
          <div class="card-body">
            <div id="docList" class="mb-2"></div>
            <div class="d-flex gap-2">
              <input type="file" class="form-control form-control-sm" id="docFileInput"
                     accept=".pdf,.docx,.doc,.txt,.png,.jpg,.jpeg" style="flex:1">
              <button class="btn btn-sm btn-outline-primary" id="docUploadBtn">Upload</button>
            </div>
            <div id="docMsg" class="small mt-1" style="min-height:1rem"></div>
          </div>
        </div>
      </div>

      <div class="col-lg-5">
        <div class="card border-secondary" style="background:#161b22">
          <div class="card-header border-secondary">Trial Participation</div>
          <div class="card-body">
            <div class="form-check form-switch mb-3">
              <input class="form-check-input" type="checkbox" id="openToTrials">
              <label class="form-check-label" for="openToTrials">
                <strong>Open to Clinical Trials</strong>
                <div class="text-muted small">Allow hospitals to see your basic profile when searching for eligible patients.</div>
              </label>
            </div>
            <div class="alert alert-info py-2 small">
              🔒 Your detailed information is only shared when <strong>you</strong> click "Connect with Hospital."
            </div>
          </div>
        </div>
        <div class="card border-secondary mt-3" style="background:#161b22">
          <div class="card-header border-secondary">Account</div>
          <div class="card-body small text-muted" id="acctInfo"></div>
        </div>
        <button class="btn btn-primary w-100 mt-3" id="saveBtn">Save Profile</button>
        <div id="saveMsg" class="text-center small mt-2" style="min-height:1.2rem"></div>
      </div>
    </div>
  </div>

  <!-- ===== TRIALS TAB ===== -->
  <div id="tab-trials" style="display:none">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <div>
        <h6 class="mb-0">Trial Recommendations</h6>
        <small class="text-muted">AI-ranked by eligibility probability using your profile data</small>
      </div>
      <button class="btn btn-primary btn-sm" id="getMatchesBtn">Get My Matches</button>
    </div>
    <div id="trialsLoading" class="text-center py-5" style="display:none">
      <div class="spinner-border text-primary"></div>
      <p class="text-muted mt-2 small">Analyzing your profile against clinical trials…</p>
    </div>
    <div id="trialsMsg" class="text-center py-5 text-muted" style="display:none"></div>
    <div class="alert alert-secondary py-2 small mb-3" id="trialsDisclaimer" style="display:none">
      <strong>About these scores:</strong> Match percentages are predictions from a model trained on
      synthetic patient data and rule-based labels — not validated clinical eligibility determinations.
      Always consult a healthcare provider before enrolling in any trial.
    </div>
    <div id="trialsResults"></div>
  </div>

  <!-- ===== CONNECTIONS TAB ===== -->
  <div id="tab-connections" style="display:none">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h6 class="mb-0">My Connections</h6>
      <button class="btn btn-sm btn-outline-secondary" id="refreshConnsBtn">Refresh</button>
    </div>
    <div id="connsMsg" class="text-center py-5 text-muted" style="display:none">
      No connections yet. Find a trial and click "Connect with Hospital."
    </div>
    <div id="connsWrap" style="display:none">
      <div class="table-responsive">
        <table class="table table-dark table-hover table-sm align-middle">
          <thead><tr>
            <th>Hospital</th><th>Trial</th><th>Initiated By</th>
            <th>Status</th><th>Message</th><th>Date</th><th>Actions</th>
          </tr></thead>
          <tbody id="connsTbody"></tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- ===== INBOX TAB ===== -->
  <div id="tab-inbox" style="display:none">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h6 class="mb-0">Inbox</h6>
      <button class="btn btn-sm btn-outline-secondary" onclick="loadInbox()">Refresh</button>
    </div>
    <div id="inboxLoading" class="text-center text-muted py-4">Loading…</div>
    <div id="inboxEmpty" class="text-center text-muted py-4" style="display:none">No message threads yet. Connect with a hospital to start messaging.</div>
    <div id="inboxList"></div>
  </div>
</div>

<!-- Messages Modal -->
<div class="modal fade" id="msgModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content border-secondary" style="background:#161b22">
      <div class="modal-header border-secondary">
        <h5 class="modal-title" id="msgModalTitle">Messages</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-0">
        <div id="msgThread" style="height:320px;overflow-y:auto;padding:1rem;background:#0d1117"></div>
        <div class="p-3 border-top border-secondary d-flex gap-2">
          <input type="text" class="form-control form-control-sm" id="msgInput"
                 placeholder="Type a message…" maxlength="2000">
          <button class="btn btn-primary btn-sm px-3" id="msgSendBtn">Send</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Connect with Hospital Modal -->
<div class="modal fade" id="connectModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content border-secondary" style="background:#161b22">
      <div class="modal-header border-secondary">
        <h5 class="modal-title">Connect with Hospital</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p class="text-muted small" id="modalTrialInfo"></p>
        <div id="hospitalList" class="mb-3" style="max-height:420px;overflow-y:auto"></div>
        <label class="form-label small">Message <span class="text-muted">(optional)</span></label>
        <textarea class="form-control form-control-sm" id="modalMsg" rows="3"
                  placeholder="Introduce yourself or ask a question…"></textarea>
        <div class="alert alert-info py-2 small mt-3">
          🔒 By connecting, you share your name, age, gender, and conditions with the selected hospital.
        </div>
      </div>
      <div class="modal-footer border-secondary">
        <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary btn-sm" id="sendConnBtn" disabled>Send Request</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
const PATIENT = {{ patient | tojson }};
let conditions  = [...(PATIENT.conditions  || [])];
let medications = [...(PATIENT.medications || [])];
let documents   = [...(PATIENT.documents   || [])];
let sysReady = false;
let connectModal, msgModal, currentTrialId, currentTrialTitle, selectedHospId, currentConnId;

// ── INIT ─────────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
  connectModal = new bootstrap.Modal(document.getElementById('connectModal'));
  msgModal     = new bootstrap.Modal(document.getElementById('msgModal'));
  document.getElementById('msgSendBtn').addEventListener('click', sendMsg);
  document.getElementById('msgInput').addEventListener('keydown', e => {
    if (e.key === 'Enter') sendMsg();
  });
  document.getElementById('docUploadBtn').addEventListener('click', uploadDoc);

  document.querySelectorAll('#mainTabs .nav-link').forEach(b =>
    b.addEventListener('click', () => switchTab(b.dataset.tab)));
  document.getElementById('logoutBtn').addEventListener('click', logout);
  document.getElementById('saveBtn').addEventListener('click', saveProfile);
  document.getElementById('getMatchesBtn').addEventListener('click', loadTrials);
  document.getElementById('refreshConnsBtn').addEventListener('click', loadConnections);
  document.getElementById('sendConnBtn').addEventListener('click', submitConnect);

  // Condition autocomplete
  const ci = document.getElementById('condInput');
  ci.addEventListener('input', () => condSearch(ci.value));
  ci.addEventListener('keydown', e => { if(e.key==='Escape') hideCond(); });
  document.addEventListener('click', e => {
    if (!ci.contains(e.target) && !document.getElementById('condAutoList').contains(e.target))
      hideCond();
  });

  // Medication input
  document.getElementById('medInput').addEventListener('keydown', e => {
    if (e.key === 'Enter') {
      const v = e.target.value.trim();
      if (v && !medications.includes(v)) { medications.push(v); renderMedTags(); }
      e.target.value = '';
    }
  });

  // Hospital selection in modal (event delegation)
  document.getElementById('hospitalList').addEventListener('click', e => {
    const item = e.target.closest('[data-hid]');
    if (!item) return;
    selectedHospId = item.dataset.hid;
    document.querySelectorAll('#hospitalList [data-hid]')
            .forEach(el => el.classList.remove('active'));
    item.classList.add('active');
    document.getElementById('sendConnBtn').disabled = false;
  });

  // Trial results event delegation (interest + connect)
  document.getElementById('trialsResults').addEventListener('click', e => {
    const btn = e.target.closest('[data-action]');
    if (!btn) return;
    const {action, trialId, trialTitle, score} = btn.dataset;
    if (action === 'interest') toggleInterest(btn, trialId, trialTitle, parseFloat(score));
    if (action === 'connect')  openConnectModal(trialId, trialTitle);
  });

  initProfile();
  checkStatus().then(() => { if (!sysReady) startStatusPoll(); });
});

// ── STATUS ───────────────────────────────────────────────────────────────────
let _statusPoll = null;
async function checkStatus() {
  try {
    const d = await fetch('/api/status').then(r => r.json());
    sysReady = !!d.ready;
    document.getElementById('sysBanner').style.display = sysReady ? 'none' : '';
    if (sysReady && _statusPoll) { clearInterval(_statusPoll); _statusPoll = null; }
  } catch(e) {}
}
function startStatusPoll() {
  if (_statusPoll) return;
  _statusPoll = setInterval(async () => { await checkStatus(); }, 5000);
}

// ── TABS ─────────────────────────────────────────────────────────────────────
function switchTab(name) {
  document.querySelectorAll('#mainTabs .nav-link').forEach(b =>
    b.classList.toggle('active', b.dataset.tab === name));
  ['profile','trials','connections','inbox'].forEach(t =>
    document.getElementById('tab-'+t).style.display = t === name ? '' : 'none');
  if (name === 'connections') loadConnections();
  if (name === 'inbox')       loadInbox();
}

// ── PROFILE ──────────────────────────────────────────────────────────────────
function initProfile() {
  document.getElementById('pf-fn').value       = PATIENT.first_name || '';
  document.getElementById('pf-ln').value       = PATIENT.last_name  || '';
  document.getElementById('pf-dob').value      = PATIENT.dob        || '';
  document.getElementById('pf-gender').value   = PATIENT.gender     || '';
  document.getElementById('pf-addr').value     = PATIENT.address    || '';
  document.getElementById('openToTrials').checked = !!PATIENT.open_to_trials;
  document.getElementById('acctInfo').innerHTML =
    'Username: <strong>' + escH(PATIENT.username) + '</strong><br>' +
    'Member since: <strong>' + escH((PATIENT.created_at||'').split('T')[0]) + '</strong>';
  renderCondTags(); renderMedTags(); renderDocList();
}

async function saveProfile() {
  const btn = document.getElementById('saveBtn');
  const msg = document.getElementById('saveMsg');
  btn.disabled = true; btn.textContent = 'Saving…'; msg.textContent = '';
  try {
    const r = await fetch('/api/patient/profile', {
      method: 'POST', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({
        first_name:    document.getElementById('pf-fn').value.trim(),
        last_name:     document.getElementById('pf-ln').value.trim(),
        dob:           document.getElementById('pf-dob').value,
        gender:        document.getElementById('pf-gender').value,
        address:       document.getElementById('pf-addr').value.trim(),
        conditions, medications,
        open_to_trials: document.getElementById('openToTrials').checked ? 1 : 0,
      })
    });
    const d = await r.json();
    msg.className = r.ok ? 'text-success small mt-2' : 'text-danger small mt-2';
    msg.textContent = r.ok ? '✓ Profile saved' : (d.error || 'Save failed');
  } catch(e) {
    msg.className = 'text-danger small mt-2'; msg.textContent = 'Network error';
  }
  btn.disabled = false; btn.textContent = 'Save Profile';
}

// ── CONDITION TAGS (XSS-safe — no innerHTML for user data) ───────────────────
function renderCondTags() {
  const wrap = document.getElementById('condTags');
  wrap.innerHTML = '';
  conditions.forEach(v => wrap.appendChild(makeTag(v, 'bg-secondary', () => {
    conditions = conditions.filter(c => c !== v); renderCondTags();
  })));
}

function renderMedTags() {
  const wrap = document.getElementById('medTags');
  wrap.innerHTML = '';
  medications.forEach(v => wrap.appendChild(makeTag(v, 'bg-info text-dark', () => {
    medications = medications.filter(m => m !== v); renderMedTags();
  })));
}

function makeTag(val, cls, onRemove) {
  const span = document.createElement('span');
  span.className = `badge ${cls} d-inline-flex align-items-center gap-1`;
  const t = document.createElement('span');
  t.textContent = val;
  const x = document.createElement('button');
  x.type = 'button'; x.className = 'btn-close btn-close-white'; x.style.fontSize = '.45rem';
  if (cls.includes('text-dark')) x.className = 'btn-close';
  x.addEventListener('click', onRemove);
  span.appendChild(t); span.appendChild(x);
  return span;
}

// ── CONDITION AUTOCOMPLETE ────────────────────────────────────────────────────
async function condSearch(q) {
  if (q.length < 2) { hideCond(); return; }
  try {
    const d = await fetch('/api/conditions/autocomplete?q=' + encodeURIComponent(q)).then(r=>r.json());
    const list = document.getElementById('condAutoList');
    list.innerHTML = '';
    if (!(d.results||[]).length) { list.style.display='none'; return; }
    d.results.forEach(item => {
      const li = document.createElement('li');
      li.textContent = item;
      li.addEventListener('mousedown', e => {
        e.preventDefault();
        if (!conditions.includes(item)) { conditions.push(item); renderCondTags(); }
        document.getElementById('condInput').value = ''; hideCond();
      });
      list.appendChild(li);
    });
    list.style.display = 'block';
  } catch(e) { hideCond(); }
}
function hideCond() { document.getElementById('condAutoList').style.display = 'none'; }

// ── TRIALS ───────────────────────────────────────────────────────────────────
async function loadTrials() {
  if (!sysReady) { await checkStatus(); }
  if (!sysReady) { alert('Pipeline still loading. Please wait a moment.'); return; }
  document.getElementById('trialsLoading').style.display = '';
  document.getElementById('trialsMsg').style.display = 'none';
  document.getElementById('trialsDisclaimer').style.display = 'none';
  document.getElementById('trialsResults').innerHTML = '';
  document.getElementById('getMatchesBtn').disabled = true;
  try {
    const r = await fetch('/api/patient/matches');
    const d = await r.json();
    if (!r.ok) throw new Error(d.error || 'Failed');
    if (!(d.results||[]).length) {
      const m = document.getElementById('trialsMsg');
      m.style.display = ''; m.textContent = d.message || 'No matches found.';
    } else {
      renderTrials(d.results);
    }
  } catch(e) {
    const m = document.getElementById('trialsMsg');
    m.style.display = ''; m.className = 'text-danger text-center py-5';
    m.textContent = e.message;
  }
  document.getElementById('trialsLoading').style.display = 'none';
  document.getElementById('getMatchesBtn').disabled = false;
}

function renderTrials(trials) {
  const wrap = document.getElementById('trialsResults');
  wrap.innerHTML = '';
  document.getElementById('trialsDisclaimer').style.display = trials.length ? '' : 'none';
  trials.forEach(t => { wrap.insertAdjacentHTML('beforeend', buildCard(t)); });
}

function buildCard(t) {
  const sc  = t.eligibility_probability >= 75 ? 'score-high' : t.eligibility_probability >= 50 ? 'score-mid' : 'score-low';
  const stc = t.status === 'RECRUITING' ? 'success' : t.status.includes('ACTIVE') ? 'info' : 'secondary';
  const overlaps = new Set(t.overlap_conditions || []);

  const bars = [
    ['Eligibility Probability', t.eligibility_probability,          'primary'],
    ['Age Compatibility',       t.age_compatibility,                'info'],
    ['Gender Compatibility',    t.gender_compatibility,             'success'],
    ['Match Score',             t.match_score,                      'warning'],
    ['Geo Feasibility',         t.geo_feasibility,                  'secondary'],
    ['Med Compatibility',       t.med_compatibility,                'secondary'],
    ['Rarity Score',            Math.round(t.condition_rarity_score*100), 'secondary'],
  ].map(([l,v,c]) => `
    <div class="mb-1">
      <div class="d-flex justify-content-between">
        <span class="bar-lbl">${escH(l)}</span>
        <span class="bar-val">${v}%</span>
      </div>
      <div class="progress"><div class="progress-bar bg-${c}" style="width:${Math.min(100,v)}%"></div></div>
    </div>`).join('');

  const condTags = (t.trial_conditions||[]).map(c =>
    `<span class="badge ${overlaps.has(c)?'bg-success':'bg-dark border border-secondary'} me-1 mb-1">${escH(c)}</span>`
  ).join('');

  const interested = t.interest_status === 'interested';

  return `
  <div class="trial-card mb-4">
    <div class="d-flex gap-3 align-items-start mb-3">
      <div class="score-circle ${sc}">
        <span>${t.eligibility_probability}</span><small>%</small>
      </div>
      <div class="flex-grow-1 min-w-0">
        <div class="text-muted small mb-1">${escH(t.trial_id)} &bull; ${escH(t.phase||'N/A')}</div>
        <h6 class="mb-2">${escH(t.title)}</h6>
        <div class="d-flex flex-wrap gap-1">
          <span class="badge bg-${stc}">${escH(t.status)}</span>
          ${t.phase&&t.phase!=='N/A'?`<span class="badge bg-info text-dark">${escH(t.phase)}</span>`:''}
          <span class="badge bg-secondary">${escH(t.sex||'ALL')}</span>
          <span class="badge bg-secondary">${t.min_age}–${t.max_age} yrs</span>
        </div>
      </div>
    </div>
    ${t.summary?`<p class="text-muted small mb-3">${escH(t.summary)}</p>`:''}
    <div class="detail-grid mb-3">
      <div><div class="lbl">Age Range</div><div class="val">${t.min_age}–${t.max_age} yrs</div></div>
      <div><div class="lbl">Gender</div><div class="val">${escH(t.sex||'ALL')}</div></div>
      <div><div class="lbl">Sites</div><div class="val">${t.n_sites||'—'}</div></div>
      <div><div class="lbl">Enrollment</div><div class="val">${t.enrollment||'—'}</div></div>
      ${t.facility_name?`<div class="col-span-2"><div class="lbl">Lead Site</div><div class="val">${escH(t.facility_name)}</div></div>`:''}
      ${t.location?`<div class="col-span-2"><div class="lbl">Location</div><div class="val">${escH(t.location)}</div></div>`:''}
    </div>
    <div class="bar-section mb-3"><div class="sec-head">Match Analysis</div>${bars}</div>
    <div class="mb-3">
      <div class="sec-head">Conditions</div>
      <div>${condTags}</div>
      ${overlaps.size>0?'<div class="small text-success mt-1">🟢 Green = conditions matching your profile</div>':''}
    </div>
    ${t.criteria?`<details class="mb-3"><summary class="small text-muted" style="cursor:pointer">▶ Eligibility Criteria</summary>
      <pre class="criteria-pre mt-2">${escH(t.criteria)}</pre></details>`:''}
    <div class="d-flex flex-wrap gap-2 pt-2 border-top border-secondary mt-2">
      <a href="https://clinicaltrials.gov/study/${escA(t.trial_id)}" target="_blank" rel="noopener"
         class="btn btn-sm btn-outline-secondary">View on ClinicalTrials.gov ↗</a>
      <button class="btn btn-sm ${interested?'btn-success':'btn-outline-success'}"
              data-action="interest" data-trial-id="${escA(t.trial_id)}"
              data-trial-title="${escA(t.title)}" data-score="${t.combined_score}">
        ${interested?'✓ Interested':"I'm Interested"}</button>
      <button class="btn btn-sm btn-outline-primary"
              data-action="connect" data-trial-id="${escA(t.trial_id)}"
              data-trial-title="${escA(t.title)}">Connect with Hospital</button>
    </div>
  </div>`;
}

async function toggleInterest(btn, trialId, title, score) {
  const isOn = btn.classList.contains('btn-success');
  if (isOn) {
    await fetch('/api/patient/interest/'+encodeURIComponent(trialId), {method:'DELETE'});
    btn.className = 'btn btn-sm btn-outline-success';
    btn.textContent = "I'm Interested";
  } else {
    await fetch('/api/patient/interest', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({trial_id:trialId, trial_title:title, match_score:score})
    });
    btn.className = 'btn btn-sm btn-success';
    btn.textContent = '✓ Interested';
  }
}

// ── CONNECT WITH HOSPITAL ─────────────────────────────────────────────────────
function _buildHospBtn(h) {
  const btn = document.createElement('button');
  btn.type = 'button';
  btn.className = 'list-group-item list-group-item-action';
  btn.dataset.hid = h.id;
  const nm = document.createElement('strong'); nm.textContent = h.hospital_name;
  const lc = document.createElement('small');
  lc.className = 'd-block text-muted'; lc.textContent = h.location || '';
  btn.appendChild(nm); btn.appendChild(lc);
  if (h.match_reason) {
    const badge = document.createElement('span');
    badge.className = `badge ${h.match_tier === 1 ? 'bg-success' : 'bg-secondary'} ms-1`;
    badge.style.fontSize = '.65rem';
    badge.textContent = h.match_reason;
    btn.appendChild(badge);
  }
  return btn;
}

async function openConnectModal(trialId, title) {
  currentTrialId = trialId; currentTrialTitle = title;
  selectedHospId = null;
  document.getElementById('sendConnBtn').disabled = true;
  document.getElementById('modalTrialInfo').textContent = 'Trial: ' + title;
  document.getElementById('modalMsg').value = '';
  const list = document.getElementById('hospitalList');
  list.innerHTML = '<div class="list-group-item text-muted small">Loading hospitals…</div>';
  connectModal.show();
  try {
    const d = await fetch('/api/patient/hospitals-for-trial?trial_id='+encodeURIComponent(trialId)).then(r=>r.json());
    list.innerHTML = '';
    const hospitals = d.hospitals || [];
    if (!hospitals.length) {
      list.innerHTML = '<div class="list-group-item text-muted small">No registered hospitals for this trial.</div>';
      return;
    }
    const verified = hospitals.filter(h => h.match_tier === 1);
    const related  = hospitals.filter(h => h.match_tier !== 1);

    if (verified.length) {
      const head = document.createElement('div');
      head.className = 'sec-head text-success mb-1 mt-2';
      head.textContent = 'Verified Trial Sites';
      const grp = document.createElement('div');
      grp.className = 'list-group mb-3';
      verified.forEach(h => grp.appendChild(_buildHospBtn(h)));
      list.appendChild(head); list.appendChild(grp);
    }

    if (related.length) {
      const head = document.createElement('div');
      head.className = 'sec-head mb-1 mt-2';
      head.innerHTML = 'Related Hospitals'
        + ' <span class="text-muted fw-normal" style="text-transform:none;letter-spacing:0;font-size:.68rem">'
        + '— not confirmed trial sites</span>';
      const grp = document.createElement('div');
      grp.className = 'list-group mb-2';
      related.forEach(h => grp.appendChild(_buildHospBtn(h)));
      list.appendChild(head); list.appendChild(grp);
    }
  } catch(e) {
    list.innerHTML = '<div class="list-group-item text-danger small">Error loading hospitals.</div>';
  }
}

async function submitConnect() {
  if (!selectedHospId) return;
  try {
    const r = await fetch('/api/patient/connect', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({hospital_id:selectedHospId, trial_id:currentTrialId,
                            trial_title:currentTrialTitle,
                            message:document.getElementById('modalMsg').value.trim()})
    });
    const d = await r.json();
    if (r.ok) { connectModal.hide(); switchTab('connections'); }
    else alert(d.error || 'Request failed');
  } catch(e) { alert('Network error'); }
}

// ── CONNECTIONS ───────────────────────────────────────────────────────────────
async function loadConnections() {
  try {
    const d = await fetch('/api/patient/connections').then(r=>r.json());
    const conns = d.connections || [];
    const msg  = document.getElementById('connsMsg');
    const wrap = document.getElementById('connsWrap');
    const tbody= document.getElementById('connsTbody');
    if (!conns.length) { msg.style.display=''; wrap.style.display='none'; return; }
    msg.style.display='none'; wrap.style.display='';
    tbody.innerHTML = '';
    conns.forEach(c => {
      const sc  = {pending:'st-pending',accepted:'st-accepted',rejected:'st-rejected',completed:'st-completed'}[c.status]||'';
      const tr  = document.createElement('tr');
      const hname = c.hospital_name || '—';
      tr.innerHTML = [
        escH(hname),
        escH((c.trial_title||'—').substring(0,50)),
        escH(c.initiated_by||''),
        `<span class="${sc} fw-bold">${escH(c.status)}</span>`,
        escH((c.message||'').substring(0,60)),
        escH((c.created_at||'').split('T')[0]),
        `<button class="btn btn-sm btn-outline-info py-0 px-2" style="font-size:.72rem"
           onclick="openMsgModal('${escA(c.id)}','${escA(hname)}')">💬 Chat</button>`,
      ].map(v=>`<td>${v}</td>`).join('');
      const actionsCell = tr.lastElementChild;
      const delBtn = document.createElement('button');
      delBtn.type = 'button';
      delBtn.className = 'btn btn-sm btn-outline-danger py-0 px-2 ms-1';
      delBtn.style.fontSize = '.72rem';
      delBtn.textContent = 'Delete';
      delBtn.addEventListener('click', () => deleteConnection(c.id, hname));
      actionsCell.appendChild(delBtn);
      tbody.appendChild(tr);
    });
  } catch(e) {}
}

// Connection removal
// Remove the selected hospital connection and associated chat thread.
async function deleteConnection(cid, hospitalName) {
  const ok = confirm(`Remove connection with ${hospitalName || 'this hospital'}? This will also remove the chat thread.`);
  if (!ok) return;
  try {
    const r = await fetch('/api/patient/connections/'+encodeURIComponent(cid), {method:'DELETE'});
    const d = await r.json();
    if (!r.ok) { alert(d.error || 'Delete failed'); return; }
    await loadConnections();
    loadInbox();
  } catch(e) {
    alert('Network error');
  }
}

// Documents
function renderDocList() {
  const wrap = document.getElementById('docList');
  wrap.innerHTML = '';
  if (!documents.length) {
    const p = document.createElement('p');
    p.className = 'text-muted small mb-1'; p.textContent = 'No documents uploaded yet.';
    wrap.appendChild(p); return;
  }
  documents.forEach(doc => {
    const row = document.createElement('div');
    row.className = 'd-flex align-items-center gap-2 mb-1 small';
    const nm  = document.createElement('span'); nm.className = 'flex-grow-1 text-truncate'; nm.textContent = doc.filename;
    const dt  = document.createElement('small'); dt.className = 'text-muted flex-shrink-0';
    dt.textContent = (doc.uploaded_at||'').substring(0,10);
    const dl  = document.createElement('a');
    dl.href = '/api/patient/documents/'+encodeURIComponent(doc.id)+'/download';
    dl.className = 'btn btn-sm btn-outline-secondary py-0 px-1 flex-shrink-0';
    dl.style.fontSize = '.7rem'; dl.textContent = '↓'; dl.title = 'Download';
    const del = document.createElement('button');
    del.type = 'button'; del.className = 'btn btn-sm btn-outline-danger py-0 px-1 flex-shrink-0';
    del.style.fontSize = '.7rem'; del.textContent = '✕'; del.title = 'Delete';
    del.addEventListener('click', () => deleteDoc(doc.id));
    row.appendChild(nm); row.appendChild(dt); row.appendChild(dl); row.appendChild(del);
    wrap.appendChild(row);
  });
}

async function uploadDoc() {
  const input = document.getElementById('docFileInput');
  const msg   = document.getElementById('docMsg');
  if (!input.files.length) { msg.className = 'text-warning small mt-1'; msg.textContent = 'Select a file first.'; return; }
  const file = input.files[0];
  if (file.size > 10 * 1024 * 1024) { msg.className = 'text-danger small mt-1'; msg.textContent = 'File too large (max 10 MB).'; return; }
  const form = new FormData(); form.append('file', file);
  msg.className = 'text-muted small mt-1'; msg.textContent = 'Uploading…';
  try {
    const r = await fetch('/api/patient/documents', {method:'POST', body:form});
    const d = await r.json();
    if (r.ok) {
      documents.push(d.document); renderDocList(); input.value = '';
      msg.className = 'text-success small mt-1'; msg.textContent = '✓ Uploaded';
    } else {
      msg.className = 'text-danger small mt-1'; msg.textContent = d.error || 'Upload failed';
    }
  } catch(e) { msg.className = 'text-danger small mt-1'; msg.textContent = 'Network error'; }
}

async function deleteDoc(docId) {
  try {
    const r = await fetch('/api/patient/documents/'+encodeURIComponent(docId), {method:'DELETE'});
    if (r.ok) { documents = documents.filter(d => d.id !== docId); renderDocList(); }
  } catch(e) {}
}

// ── MESSAGING ─────────────────────────────────────────────────────────────────
async function openMsgModal(connId, label) {
  currentConnId = connId;
  document.getElementById('msgModalTitle').textContent = 'Chat — ' + label;
  document.getElementById('msgThread').innerHTML =
    '<div class="text-center text-muted small py-4">Loading…</div>';
  document.getElementById('msgInput').value = '';
  msgModal.show();
  await loadMsgs();
}

async function loadMsgs() {
  try {
    const d = await fetch('/api/patient/connections/'+encodeURIComponent(currentConnId)+'/messages').then(r=>r.json());
    renderMsgs(d.messages || []);
  } catch(e) {
    document.getElementById('msgThread').innerHTML =
      '<div class="text-danger small text-center py-4">Error loading messages.</div>';
  }
}

function renderMsgs(msgs) {
  const thread = document.getElementById('msgThread');
  if (!msgs.length) {
    thread.innerHTML = '<div class="text-muted small text-center py-4">No messages yet. Start the conversation.</div>';
    return;
  }
  thread.innerHTML = '';
  msgs.forEach(m => {
    const mine = m.sender_role === 'patient';
    const wrap = document.createElement('div');
    wrap.className = 'd-flex mb-2 ' + (mine ? 'justify-content-end' : 'justify-content-start');
    const bubble = document.createElement('div');
    bubble.style.cssText = 'max-width:72%;padding:.5rem .75rem;border-radius:12px;font-size:.85rem;'
      + (mine ? 'background:#1f6feb;color:#fff;' : 'background:#21262d;color:#c9d1d9;');
    const bodyEl = document.createElement('div'); bodyEl.textContent = m.body;
    const ts = document.createElement('div');
    ts.style.cssText = 'font-size:.65rem;opacity:.6;margin-top:.2rem;text-align:right';
    ts.textContent = (m.created_at||'').replace('T',' ').substring(0,16);
    bubble.appendChild(bodyEl); bubble.appendChild(ts);
    wrap.appendChild(bubble); thread.appendChild(wrap);
  });
  thread.scrollTop = thread.scrollHeight;
}

async function sendMsg() {
  const input = document.getElementById('msgInput');
  const body  = input.value.trim();
  if (!body || !currentConnId) return;
  input.value = '';
  try {
    await fetch('/api/patient/connections/'+encodeURIComponent(currentConnId)+'/messages', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({body})
    });
    await loadMsgs();
  } catch(e) {}
}

// ── INBOX ─────────────────────────────────────────────────────────────────────
async function loadInbox() {
  document.getElementById('inboxLoading').style.display = '';
  document.getElementById('inboxEmpty').style.display   = 'none';
  document.getElementById('inboxList').innerHTML = '';
  try {
    const d = await fetch('/api/patient/inbox').then(r => r.json());
    document.getElementById('inboxLoading').style.display = 'none';
    const threads = d.threads || [];
    if (!threads.length) { document.getElementById('inboxEmpty').style.display = ''; return; }
    let totalUnread = 0;
    threads.forEach(t => {
      totalUnread += t.unread_count || 0;
      const hname   = t.hospital_name || 'Hospital';
      const trial   = (t.trial_title || 'General Inquiry').substring(0, 60);
      const preview = (t.last_message || 'No messages yet').substring(0, 100);
      const card = document.createElement('div');
      card.className = 'card bg-secondary mb-2';
      const body = document.createElement('div');
      body.className = 'card-body d-flex justify-content-between align-items-center gap-3';
      const info = document.createElement('div');
      info.style.minWidth = '0';
      const nameEl = document.createElement('strong'); nameEl.textContent = hname;
      info.appendChild(nameEl);
      if (t.unread_count) {
        const bEl = document.createElement('span');
        bEl.className = 'badge bg-danger ms-2'; bEl.textContent = t.unread_count;
        info.appendChild(bEl);
      }
      const trialEl = document.createElement('div');
      trialEl.className = 'text-muted small text-truncate'; trialEl.textContent = trial;
      const previewEl = document.createElement('div');
      previewEl.className = 'text-secondary small fst-italic text-truncate'; previewEl.textContent = preview;
      info.appendChild(trialEl); info.appendChild(previewEl);
      const btn = document.createElement('button');
      btn.className = 'btn btn-sm btn-outline-light flex-shrink-0';
      btn.textContent = 'Open';
      btn.onclick = () => openMsgModal(t.id, hname);
      body.appendChild(info); body.appendChild(btn);
      card.appendChild(body);
      document.getElementById('inboxList').appendChild(card);
    });
    const badge = document.getElementById('inboxBadge');
    if (totalUnread > 0) { badge.textContent = totalUnread; badge.style.display = ''; }
    else badge.style.display = 'none';
  } catch(e) {
    document.getElementById('inboxLoading').style.display = 'none';
    document.getElementById('inboxEmpty').style.display = '';
  }
}

// ── UTILS ─────────────────────────────────────────────────────────────────────
function escH(s) {
  const d = document.createElement('div');
  d.appendChild(document.createTextNode(String(s||'')));
  return d.innerHTML;
}
function escA(s) {
  return String(s||'').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
async function logout() {
  await fetch('/auth/logout', {method:'POST'});
  location.href = '/';
}
</script>
</body>
</html>