---
import { DID } from '../../lib/atproto';
---

<div id="notesPanel" class="tab-panel">
  <div class="loading">
    <span class="loading-dot"></span>
    <span class="loading-dot"></span>
    <span class="loading-dot"></span>
  </div>
</div>

<script is:inline define:vars={{ DID }}>
(function() {
  var panel = document.getElementById('notesPanel');

  function esc(s) { return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

  function formatDate(d) {
    return new Date(d).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
  }

  async function resolvePDS() {
    var res = await fetch('https://plc.directory/' + DID);
    var doc = await res.json();
    var svc = doc.service.find(function(s) { return s.type === 'AtprotoPersonalDataServer'; });
    return svc.serviceEndpoint;
  }

  async function listAllRecords(pds, collection) {
    var records = [], cursor = null;
    do {
      var url = new URL(pds + '/xrpc/com.atproto.repo.listRecords');
      url.searchParams.set('repo', DID);
      url.searchParams.set('collection', collection);
      url.searchParams.set('limit', '100');
      if (cursor) url.searchParams.set('cursor', cursor);
      var res = await fetch(url);
      if (!res.ok) throw new Error('PDS error ' + res.status);
      var data = await res.json();
      records = records.concat(data.records);
      cursor = data.cursor || null;
    } while (cursor);
    return records;
  }

  async function load() {
    try {
      var pds = await resolvePDS();
      var records = await listAllRecords(pds, 'computer.aetheros.textpad.text');
      var notes = records.map(function(r) { return r.value; });
      notes.sort(function(a, b) { return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(); });

      if (!notes.length) { panel.innerHTML = '<div class="empty-state">No notes yet</div>'; return; }

      panel.innerHTML = '';
      notes.forEach(function(note) {
        var el = document.createElement('div');
        el.className = 'card note-card';
        el.innerHTML = '<div class="card-title">' + esc(note.title) + '</div>'
          + '<div class="card-meta">' + formatDate(note.updatedAt) + '</div>'
          + (note.body ? '<div class="card-desc note-body">' + esc(note.body) + '</div>' : '');
        panel.appendChild(el);
      });
    } catch(e) {
      panel.innerHTML = '<div class="error-state">Could not load notes</div>';
    }
  }

  window.addEventListener('tab-switch', function(e) {
    if (e.detail === 'notes' && !panel.dataset.loaded) {
      panel.dataset.loaded = '1';
      load();
    }
  });
})();
</script>

<style is:global>
  .note-body { font-size: 0.88rem; white-space: pre-wrap; }
</style>