Embed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"/>
<title>Mind-Tech Admin</title>
<style>
:root{
  --bg:#0f1217;--panel:#161a22;--card:#1d2330;--ink:#e6e8ee;--muted:#9aa3b2;
  --line:#2c3545;--accent1:#8b7cfb;--accent2:#ff6ec4;--ok:#22c55e;--err:#ef4444;
  --sidepad:clamp(12px,4vw,28px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font:14px/1.55 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.wrap{max-width:1200px;margin:0 auto;
  padding:24px max(var(--sidepad),env(safe-area-inset-right))
               max(16px,env(safe-area-inset-bottom))
               max(var(--sidepad),env(safe-area-inset-left));}
.hdr{display:flex;align-items:flex-end;gap:10px;margin-bottom:18px}
.hdr h1{margin:0;font-size:22px;font-weight:900}
.hdr .sub{color:var(--muted);font-weight:600}

.grid{display:grid;grid-template-columns:360px 1fr;gap:18px}
@media(max-width:980px){.grid{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px}
.left .card{padding:16px}
.label{font-weight:800;margin:8px 0 6px}
input[type=text],input[type=number]{width:100%;background:var(--card);border:1px solid var(--line);
  color:var(--ink);border-radius:10px;padding:10px 12px;font:inherit;outline:none}
.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);
  padding:10px 14px;border-radius:10px;font-weight:800;cursor:pointer}
.btn:hover{border-color:#3b4458}
.btn.primary{background:linear-gradient(90deg,var(--accent2),var(--accent1));border:none}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px}
.kpi .k{color:var(--muted);font-weight:700;font-size:12px}
.kpi .v{font-weight:900;font-size:22px;margin-top:4px}

.tableCard{padding:0}
.toolbar{display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--line)}
.tableWrap{
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  /* ← extra right padding so text never hides under the fade or safe area */
  padding:0 max(28px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) 0;
  margin-bottom:6px;position:relative
}
.tableWrap::after{
  content:"";position:absolute;top:0;right:0;width:24px;height:100%;
  pointer-events:none;background:linear-gradient(to left,rgba(15,18,23,.95),rgba(15,18,23,0))
}
/* Hide fade on small screens to avoid any visual overlap */
@media(max-width:900px){.tableWrap::after{display:none}}

table{width:100%;border-collapse:collapse;table-layout:auto;min-width:700px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--card);text-align:left;font-weight:800;color:#c6cbe0;position:sticky;top:0;z-index:1}
tbody tr:nth-child(even) td{background:#171b24}
.col-mtid,.col-week,.col-day,.col-ts{white-space:nowrap}
.col-ref{
  white-space:pre-wrap;
  /* wrap anywhere to prevent right-edge clipping */
  overflow-wrap:anywhere; word-break:normal;
  min-width:760px;
}
@media(max-width:1024px){.col-ref{min-width:1000px}}
@media(max-width:740px){.col-ref{min-width:1280px}}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#20273a;
  border:1px solid #2e3750;color:#c9d2f0;font-weight:800;font-size:12px}
.small{color:var(--muted);font-size:12px}
.health{font-weight:800}.health.ok{color:var(--ok)}.health.err{color:var(--err)}
.note{color:var(--muted);font-size:12px;margin-top:8px}
.footerBar{display:flex;gap:10px;justify-content:flex-end;padding:12px;border-top:1px solid var(--line)}

/* Quick full-screen reader */
#reader{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px}
#reader .sheet{max-width:900px;max-height:80vh;overflow:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:18px}
#reader .close{position:sticky;top:0;display:inline-block;margin-left:auto;background:#0f172a;color:#fff;border:none;border-radius:8px;padding:6px 10px;font-weight:800;cursor:pointer}
#reader .body{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:8px}
</style>
</head>
<body>
<div class="wrap">
  <div class="hdr">
    <h1>Mind-Tech <span style="background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent">Admin</span></h1>
    <div class="sub">Reflections & Analytics</div>
  </div>

  <div class="grid">
    <div class="left">
      <div class="card">
        <div class="label">Admin API Base</div>
        <input id="apiBase" type="text" placeholder="https://aitrainer.register-…workers.dev">
        <div class="label">Bearer Admin Token</div>
        <input id="adminToken" type="text" placeholder="MT-xxxxx">
        <div class="label">Filter — MTID</div>
        <input id="mtid" type="text" placeholder="e.g., MTID12345">
        <div style="display:flex;gap:10px">
          <div style="flex:1">
            <div class="label">Week (1–12)</div>
            <input id="week" type="number" min="1" max="12">
          </div>
          <div style="flex:1">
            <div class="label">Day (1–7 | 8–14)</div>
            <input id="day" type="number" min="1" max="14">
          </div>
        </div>
        <div style="display:flex;gap:10px;margin-top:12px">
          <button class="btn primary" id="btnHealth">Health</button>
          <button class="btn" id="btnLoad">Load</button>
          <button class="btn" id="btnMore">More</button>
          <button class="btn" id="btnClear">Clear</button>
        </div>
        <div class="note" style="margin-top:10px">Status: <span id="healthVal" class="health">—</span></div>
        <div class="kpis">
          <div class="kpi"><div class="k">Unique Students</div><div class="v" id="kUnique">0</div></div>
          <div class="kpi"><div class="k">Entries (Filter)</div><div class="v" id="kEntries">0</div></div>
          <div class="kpi"><div class="k">Last Submission</div><div class="v" id="kLast">—</div></div>
        </div>
      </div>
    </div>

    <div class="card tableCard">
      <div class="toolbar">
        <div class="small">Results: <span id="count">0</span> • cursor: <span id="cursor">—</span></div>
        <div><button class="btn" id="btnTopMore">Load More</button></div>
      </div>
      <div class="tableWrap">
        <table id="tbl">
          <thead>
            <tr>
              <th class="col-mtid">MTID</th>
              <th class="col-week">Week</th>
              <th class="col-day">Day</th>
              <th class="col-ts">Timestamp</th>
              <th class="col-ref">Reflection</th>
            </tr>
          </thead>
          <tbody id="rows"></tbody>
        </table>
      </div>
      <div class="footerBar"><button class="btn" id="btnBottomMore">Load More</button></div>
    </div>
  </div>
</div>


<div id="reader">
  <div class="sheet">
    <button class="close" id="readerClose">Close</button>
    <div class="body" id="readerBody"></div>
  </div>
</div>

<script>
(()=> {
  const el = (id)=>document.getElementById(id);
  const st = {
    apiBase: el('apiBase'), adminToken: el('adminToken'),
    mtid: el('mtid'), week: el('week'), day: el('day'),
    rows: el('rows'), count: el('count'), cursor: el('cursor'),
    kUnique: el('kUnique'), kEntries: el('kEntries'), kLast: el('kLast'),
    healthVal: el('healthVal'),
    reader: el('reader'), readerBody: el('readerBody'), readerClose: el('readerClose')
  };
  let items=[], cursor=null;

  st.apiBase.value = localStorage.getItem('MTA_ADMIN_API_BASE') || '';
  st.adminToken.value = localStorage.getItem('MTA_ADMIN_TOKEN') || '';

  const h = ()=>({'Authorization':'Bearer '+(st.adminToken.value||'')});
  const esc = (s)=>String(s||'').replace(/[&<>"]/g,c=>({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;' }[c]));
  const ts = (x)=> x ? new Date(x).toISOString().slice(0,19).replace('T',' ') : '—';
  async function call(path){
    const base=(st.apiBase.value||'').replace(/\/+$/,'');
    if(!base) throw new Error('Set API base');
    const r=await fetch(base+path,{headers:h()});
    if(!r.ok) throw new Error('HTTP '+r.status+' '+await r.text());
    return r;
  }
  function render(){
    st.rows.innerHTML = items.map((it,i) => `
      <tr data-i="${i}">
        <td class="col-mtid"><span class="badge">${esc(it.mtid)}</span></td>
        <td class="col-week">${it.week}</td>
        <td class="col-day">${it.day}</td>
        <td class="col-ts"><span class="small">${esc(ts(it.ts))}</span></td>
        <td class="col-ref"><span class="refText">${esc(it.reflection)}</span></td>
      </tr>`).join('');
    st.count.textContent = items.length;
    st.cursor.textContent = cursor ? (cursor.slice(0,8)+'…') : '—';
    const uniq = new Set(items.map(i=>i.mtid)).size;
    st.kUnique.textContent = uniq;
    st.kEntries.textContent = items.length;
    st.kLast.textContent = ts(items.at(-1)?.ts || items[0]?.ts);

    // click to open reader (full text)
    st.rows.querySelectorAll('tr').forEach(tr=>{
      tr.addEventListener('click', ()=>{
        const idx = +tr.getAttribute('data-i');
        const it = items[idx];
        st.readerBody.textContent = it.reflection || '';
        st.reader.style.display = 'flex';
      });
    });
  }

  st.readerClose.onclick = ()=> st.reader.style.display='none';
  st.reader.onclick = (e)=>{ if(e.target===st.reader) st.reader.style.display='none'; };

  document.getElementById('btnHealth').onclick = async ()=>{
    try{
      localStorage.setItem('MTA_ADMIN_API_BASE', st.apiBase.value.trim());
      localStorage.setItem('MTA_ADMIN_TOKEN', st.adminToken.value.trim());
      const j = await (await call('/admin/health')).json();
      st.healthVal.textContent = 'ok • ' + (j.service||'');
      st.healthVal.className='health ok';
    }catch(e){
      st.healthVal.textContent = 'error • '+e.message;
      st.healthVal.className='health err';
    }
  };

  async function load(reset=true){
    try{
      if(reset){ items=[]; cursor=null; }
      const qs = new URLSearchParams();
      if(st.mtid.value.trim()) qs.set('mtid', st.mtid.value.trim());
      if(st.week.value) qs.set('week', st.week.value);
      if(st.day.value) qs.set('day', st.day.value);
      if(cursor) qs.set('cursor', cursor);
      qs.set('limit','100');
      const j = await (await call('/admin/reflections?'+qs.toString())).json();
      items = items.concat(j.items||[]);
      cursor = j.cursor || null;
      render();
    }catch(e){ alert('Load failed: '+e.message); }
  }

  document.getElementById('btnLoad').onclick = ()=>load(true);
  const more = ()=> cursor ? load(false) : alert('No more results');
  document.getElementById('btnMore').onclick = more;
  document.getElementById('btnTopMore').onclick = more;
  document.getElementById('btnBottomMore').onclick = more;
  document.getElementById('btnClear').onclick = ()=>{ items=[]; cursor=null; render(); };

  if(st.apiBase.value && st.adminToken.value) document.getElementById('btnHealth').click();
})();
</script>
</body>
</html>