{# Activities day view - timeline + activity cards #}

<style>
.day-view {
  position: relative;
  border-left: 60px solid transparent;
  border-bottom: 1px solid #eee;
  overflow-x: auto;
}

.hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid #d5d5d5;
  font-size: 0.8em;
  color: #666;
}

.hour-line span {
  position: absolute;
  left: -55px;
  top: -0.6em;
}

.occ {
  position: absolute;
  min-width: 40px;
  border-radius: 4px;
  opacity: 0.9;
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease, filter 0.15s ease;
  color: #fff;
  font-size: 0.75em;
  padding: 2px 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: inset 3px 0 0 rgba(0,0,0,0.15);
}

/* Activity blocks on timeline */
.occ-activity {
  opacity: 0.35;
  border: 2px solid;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  padding: 2px 6px;
  font-size: 0.75em;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.15s ease;
  box-shadow: none;
}

h1 {
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.35em 0;
}

.day-summary {
  font-size: 0.9em;
  color: #888;
  margin-bottom: 1em;
  max-width: 65ch;
}

.timeline-empty {
  color: #888;
  padding: 1.5em 2em 3em;
  text-align: center;
}
.empty-icon {
  margin-bottom: 0.25em;
}
.empty-heading {
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 0.25em;
}
.empty-desc {
  font-size: 0.9em;
  color: #aaa;
  margin-top: 0.5em;
}

.occ-activity:hover {
  opacity: 0.55;
}
.occ-activity:active {
  opacity: 0.7;
}

/* Activities section */
.activities-section {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid #eee;
}

.activities-section h2 {
  margin: 0 0 0.75em 0;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888;
}

.activities-section.no-timeline {
  border-top: none;
  margin-top: 1em;
}

.activity-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.activity-card {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.6em 0.75em;
  border-radius: 6px;
  background: #f8f9fa;
  cursor: pointer;
  border-left: 3px solid;
  transition: background 0.15s;
}

.activity-card:hover {
  background: #e9ecef;
}

.activity-card:active {
  background: #dee2e6;
}

.activity-card .act-icon {
  font-size: 1.3em;
  flex-shrink: 0;
}

.activity-card .act-body {
  flex: 1;
  min-width: 0;
}

.activity-card .act-name {
  font-weight: 500;
  font-size: 0.95em;
}

.activity-card .act-desc {
  font-size: 0.8em;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-card .act-meta {
  flex-shrink: 0;
  text-align: right;
  font-size: 0.8em;
  color: #888;
}

.activity-card .act-duration {
  font-weight: 500;
}

.activity-card .act-level {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}

/* Activity detail view */
.activity-detail {
  max-width: 700px;
}

.activity-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.85em;
  color: #666;
  cursor: pointer;
  margin-bottom: 0.75em;
  padding: 0.25em 0;
  transition: color 0.15s ease;
}

.activity-detail-back:hover {
  color: #333;
}

.activity-detail-back:active {
  color: #111;
}

.activity-detail-header {
  margin-bottom: 1em;
}

.activity-detail-header h2 {
  margin: 0 0 0.25em 0;
  font-size: 1.3em;
}

.activity-detail-header .ad-subtitle {
  color: #666;
  font-size: 0.9em;
}

.ad-fields {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3em 1em;
  margin-bottom: 1em;
  font-size: 0.9em;
}

.ad-fields dt {
  color: #888;
  font-weight: 500;
}

.ad-fields dd {
  margin: 0;
}

.ad-entities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}

.ad-entity {
  padding: 0.15em 0.5em;
  background: #e9ecef;
  border-radius: 3px;
  font-size: 0.85em;
}

.ad-description {
  margin: 1em 0;
  padding: 0.75em;
  background: #f8f9fa;
  border-radius: 6px;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* Tabs */
.ad-tabs {
  display: flex;
  border-bottom: 2px solid #dee2e6;
  margin-bottom: 1em;
  gap: 0;
}

.ad-tab {
  padding: 0.5em 1em;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.9em;
  color: #666;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ad-tab:hover {
  color: #333;
}

.ad-tab:active:not(.active) {
  color: #111;
  border-bottom-color: #aaa;
}

.ad-tab.active {
  color: #333;
  border-bottom-color: #333;
  font-weight: 500;
}

.ad-tab-pane {
  display: none;
}

.ad-tab-pane.active {
  display: block;
}

.ad-output-loading {
  color: #888;
  font-style: italic;
  padding: 1em 0;
}

.rendered-markdown {
  line-height: 1.6;
}

.rendered-markdown h1,
.rendered-markdown h2,
.rendered-markdown h3 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.rendered-markdown h1 { font-size: 1.3em; }
.rendered-markdown h2 { font-size: 1.15em; }
.rendered-markdown h3 { font-size: 1.05em; }

.rendered-markdown ul, .rendered-markdown ol {
  padding-left: 1.5em;
}

.rendered-markdown pre {
  background: #f4f4f4;
  padding: 0.75em;
  border-radius: 4px;
  overflow-x: auto;
}

.rendered-markdown code {
  background: #f4f4f4;
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-size: 0.9em;
}

.rendered-markdown pre code {
  background: none;
  padding: 0;
}

/* Level colors */
.level-high { background: #2ecc71; }
.level-medium { background: #f39c12; }
.level-low { background: #95a5a6; }

/* Focus-visible for interactive elements */
.occ:focus-visible,
.occ-activity:focus-visible {
  outline: 2px solid var(--facet-color, #b06a1a);
  outline-offset: 1px;
}
.activity-card:focus-visible {
  outline: 2px solid var(--facet-color, #b06a1a);
  outline-offset: 2px;
}
/* Button reset for back link */
button.activity-detail-back {
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  padding: 0.25em 0;
  text-align: left;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.activities-breadcrumb {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  font-size: 0.85em;
  color: #888;
  margin-bottom: 0.65em;
}
.breadcrumb-link {
  color: #888;
  text-decoration: none;
}
.breadcrumb-link:hover {
  color: #555;
  text-decoration: underline;
}
.breadcrumb-link:active {
  color: #333;
}
.breadcrumb-sep {
  color: #aaa;
}
.breadcrumb-current {
  color: #888;
}
.today-chip {
  font-size: 0.8em;
  color: #888;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  margin-left: 0.5em;
  white-space: nowrap;
}
.today-chip:hover {
  background: #e4e4e4;
  color: #555;
}
.today-chip:active {
  background: #d9d9d9;
  color: #333;
}
/* Responsive: tablet */
@media (max-width: 768px) {
  .workspace-content-wide {
    padding: 0.5em;
  }
}

/* Responsive: mobile */
@media (max-width: 480px) {
  .day-view {
    border-left-width: 40px;
    overflow-x: auto;
  }
  .hour-line span {
    left: -38px;
    font-size: 0.65em;
  }
  h1 {
    font-size: 1.3em;
  }
  .occ {
    min-height: 30px;
  }
  .activity-card {
    min-height: 44px;
  }
  .activities-breadcrumb {
    font-size: 0.75em;
    gap: 0.3em;
  }
  .day-summary {
    font-size: 0.8em;
  }
  .activities-section {
    margin-top: 1em;
  }
  .ad-fields {
    grid-template-columns: 1fr;
  }
  .ad-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ad-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
}
</style>

<div class="workspace-content-wide">
  <nav class="activities-breadcrumb" aria-label="activities navigation">
    <a href="#" id="breadcrumbMonth" class="breadcrumb-link"></a>
    <span class="breadcrumb-sep" aria-hidden="true">/</span>
    <span class="breadcrumb-current" aria-current="page"></span>
    <a href="#" id="todayChip" class="today-chip" style="display:none"></a>
  </nav>
  <h1>{{ title }}</h1>
  <div id="daySummary" class="day-summary"></div>

  <div id="dayView">
    <div id="timelineView">
      <div class="surface-state surface-state--loading" role="status" aria-busy="true">
        <div class="surface-state-spinner" aria-hidden="true"></div>
        <span class="surface-state-text" data-role="loading-status">Loading activities...</span>
      </div>
    </div>
    <div id="activitiesView"></div>
  </div>

  <div id="activityDetail" class="activity-detail" style="display:none"></div>
</div>

<script src="{{ url_for('root.static', filename='colors.js') }}"></script>
<script>
(function() {
  const day = '{{ day }}';
  const escapeHtml = window.AppServices.escapeHtml;

  // Breadcrumb month link
  const monthLink = document.getElementById('breadcrumbMonth');
  if (monthLink) {
    const year = parseInt(day.slice(0, 4), 10);
    const month = parseInt(day.slice(4, 6), 10) - 1;
    const monthName = new Date(year, month, 1).toLocaleString('default', { month: 'long' });
    monthLink.textContent = monthName + ' ' + year;
    monthLink.addEventListener('click', function(e) {
      e.preventDefault();
      if (window.MonthPicker) MonthPicker.show();
    });
  }

  // Breadcrumb current — date without weekday
  const dayNum = parseInt(day.slice(6, 8), 10);
  const mod100 = dayNum % 100;
  const suffix = (mod100 >= 11 && mod100 <= 13) ? 'th'
    : (dayNum % 10 === 1) ? 'st'
    : (dayNum % 10 === 2) ? 'nd'
    : (dayNum % 10 === 3) ? 'rd' : 'th';
  const bcMonth = new Date(parseInt(day.slice(0, 4), 10), parseInt(day.slice(4, 6), 10) - 1, 1)
    .toLocaleString('default', { month: 'long' });
  const bcCurrent = document.querySelector('.breadcrumb-current');
  if (bcCurrent) {
    bcCurrent.textContent = bcMonth + ' ' + dayNum + suffix;
  }

  // Today chip — show relative distance when viewing a non-today date
  const todayChip = document.getElementById('todayChip');
  if (todayChip) {
    const now = new Date();
    const todayStr = String(now.getFullYear()) + String(now.getMonth() + 1).padStart(2, '0') + String(now.getDate()).padStart(2, '0');
    if (day !== todayStr) {
      const dayDate = new Date(parseInt(day.slice(0, 4)), parseInt(day.slice(4, 6)) - 1, parseInt(day.slice(6, 8)));
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      const diffDays = Math.round((dayDate - today) / 86400000);
      const abs = Math.abs(diffDays);
      let label;
      if (abs === 1) {
        label = diffDays < 0 ? 'yesterday' : 'tomorrow';
      } else if (abs <= 30) {
        label = diffDays < 0 ? abs + ' days ago' : 'in ' + abs + ' days';
      } else if (abs <= 90) {
        const weeks = Math.round(abs / 7);
        label = diffDays < 0 ? weeks + ' weeks ago' : 'in ' + weeks + ' weeks';
      } else {
        const months = Math.round(abs / 30);
        label = diffDays < 0 ? months + ' months ago' : 'in ' + months + ' months';
      }
      todayChip.textContent = '\u21a9 today (' + label + ')';
      todayChip.href = '/app/activities/' + todayStr;
      todayChip.style.display = '';
    }
  }

  let allActivities = [];
  let activities = [];
  let currentActivityId = null;
  const outputCache = {};

  // ── Utilities ──

  function filterByFacet(list) {
    const facet = window.selectedFacet;
    if (!facet) return list;
    return list.filter(e => e.facet === facet);
  }

  function fmtTime(ts) {
    const d = new Date(ts);
    let h = d.getHours();
    const m = d.getMinutes();
    const suf = h >= 12 ? 'p' : 'a';
    h = h % 12 || 12;
    return m ? `${h}:${String(m).padStart(2, '0')}${suf}` : `${h}${suf}`;
  }

  function fmtDuration(mins) {
    if (mins == null || !Number.isFinite(Number(mins))) {
      return '—';
    }
    mins = Number(mins);
    if (mins >= 60) {
      const h = Math.floor(mins / 60);
      const m = mins % 60;
      return m ? `${h}h ${m}m` : `${h}h`;
    }
    return `${mins}m`;
  }

  function levelLabel(avg) {
    if (avg >= 0.75) return 'high';
    if (avg >= 0.4) return 'medium';
    return 'low';
  }

  function levelColor(avg) {
    if (avg >= 0.75) return '#2ecc71';
    if (avg >= 0.4) return '#f39c12';
    return '#95a5a6';
  }

  function renderSummary() {
    const el = document.getElementById('daySummary');
    const ac = activities.length;

    if (!ac) {
      el.textContent = 'no observed activity';
      el.style.display = '';
      return;
    }

    el.style.display = '';

    const counts = ac === 1 ? '1 activity' : `${ac} activities`;
    const times = activities
      .filter(x => x.startTime)
      .map(x => new Date(x.startTime));

    if (!times.length) {
      el.textContent = counts;
      return;
    }

    times.sort((a, b) => a - b);
    const earliest = times[0];
    const latest = times[times.length - 1];
    const eh = earliest.getHours();
    const lh = latest.getHours();

    let timeLabel;
    if (lh < 12) {
      timeLabel = 'morning';
    } else if (eh >= 12 && lh < 17) {
      timeLabel = 'afternoon';
    } else if (eh >= 17) {
      timeLabel = 'evening';
    } else {
      timeLabel = `${fmtTime(earliest)} to ${fmtTime(latest)}`;
    }

    el.textContent = `${counts} — ${timeLabel}`;
  }

  function renderTimeline(list) {
    const div = document.getElementById('timelineView');
    if (!list.length) {
      div.innerHTML = '<div class="timeline-empty"><div class="empty-icon"><svg width="32" height="32" viewBox="0 0 32 32" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="6" width="24" height="22" rx="3"/><line x1="10" y1="3" x2="10" y2="9"/><line x1="22" y1="3" x2="22" y2="9"/><line x1="4" y1="14" x2="28" y2="14"/><line x1="11" y1="19" x2="11" y2="19.01"/><line x1="16" y1="19" x2="16" y2="19.01"/><line x1="21" y1="19" x2="21" y2="19.01"/><line x1="11" y1="24" x2="11" y2="24.01"/><line x1="16" y1="24" x2="16" y2="24.01"/></svg></div><div class="empty-heading">no activity</div><div class="empty-desc">nothing observed for this day</div></div>';
      return;
    }

    const timedActivities = list.filter(a => a.startTime);
    if (!timedActivities.length) {
      div.innerHTML = '';
      return;
    }

    let start = Infinity;
    let end = -Infinity;
    timedActivities.forEach(a => {
      const s = new Date(a.startTime);
      const e = a.endTime ? new Date(a.endTime) : new Date(s.getTime() + 5 * 60000);
      start = Math.min(start, s.getHours() * 60 + s.getMinutes());
      end = Math.max(end, e.getHours() * 60 + e.getMinutes());
    });

    const startHour = Math.max(Math.floor(start / 60) - 1, 0);
    const endHour = Math.min(Math.ceil(end / 60) + 1, 24);
    const pxPerHour = 66.7;
    const totalMinutes = Math.max((endHour - startHour) * 60, 60);

    let html = `<section class='day-view' aria-label='timeline' style='height:${(endHour - startHour) * pxPerHour}px'>`;
    for (let h = startHour; h <= endHour; h++) {
      const label = h === 0 ? '12a' : h < 12 ? h + 'a' : h === 12 ? '12p' : (h - 12) + 'p';
      html += `<div class='hour-line' style='top:${((h - startHour) / (endHour - startHour)) * 100}%'><span>${label}</span></div>`;
    }

    timedActivities.forEach(a => {
      const s = new Date(a.startTime);
      const e = a.endTime ? new Date(a.endTime) : new Date(s.getTime() + 5 * 60000);
      let sMin = s.getHours() * 60 + s.getMinutes();
      let eMin = e.getHours() * 60 + e.getMinutes();
      sMin = Math.max(sMin, startHour * 60);
      eMin = Math.min(eMin, endHour * 60);
      if (eMin <= sMin) return;

      const top = ((sMin - startHour * 60) / totalMinutes) * 100;
      const height = Math.max((eMin - sMin) / totalMinutes * 100, 0.4);
      const color = levelColor(a.level_avg);
      const icon = a.icon || '🗓️';
      html += `<a class='occ occ-activity' data-activity-id='${escapeHtml(a.id)}' tabindex='0' role='button' style='top:${top}%;height:${height}%;left:0;width:100%;border-color:${color};background:${color}' title='${escapeHtml(icon + " " + a.name)}'>${escapeHtml(icon)} ${escapeHtml(a.name)}</a>`;
    });

    html += '</section>';
    div.innerHTML = html;
  }

  // ── Activities cards ──

  function renderActivities(list) {
    const div = document.getElementById('activitiesView');
    if (!list.length) {
      div.innerHTML = '';
      return;
    }

    const hasTimeline = list.some(a => a.startTime);
    const sectionClass = hasTimeline ? 'activities-section' : 'activities-section no-timeline';
    let html = `<section class="${sectionClass}" aria-labelledby="activities-heading"><h2 id="activities-heading">activities</h2><div class="activity-cards">`;
    list.forEach(a => {
      const dur = fmtDuration(a.duration_minutes);
      const lvl = levelLabel(a.level_avg);
      const timeStr = a.startTime ? fmtTime(a.startTime) : '';
      const color = levelColor(a.level_avg);
      const icon = a.icon || '🗓️';
      html += `<div class="activity-card" data-activity-id="${escapeHtml(a.id)}" tabindex="0" role="button" style="border-left-color:${color}">`;
      html += `<span class="act-icon">${escapeHtml(icon)}</span>`;
      html += `<div class="act-body">`;
      html += `<div class="act-name">${escapeHtml(a.name)}</div>`;
      if (a.description) html += `<div class="act-desc">${escapeHtml(a.description)}</div>`;
      html += `</div>`;
      html += `<div class="act-meta">`;
      if (timeStr) html += `<div>${timeStr}</div>`;
      if (a.duration_minutes != null) html += `<div class="act-duration">${dur}<span class="act-level level-${lvl}" aria-hidden="true"></span><span class="sr-only">${lvl} engagement</span></div>`;
      if (a.outputs.length) html += `<div>${a.outputs.length} output${a.outputs.length > 1 ? 's' : ''}</div>`;
      html += `</div></div>`;
    });
    html += '</div></section>';
    div.innerHTML = html;
  }

  // ── Activity detail view ──

  function showActivityDetail(activityId) {
    const a = activities.find(x => x.id === activityId);
    if (!a) {
      // Try allActivities (might be filtered out by facet)
      const fromAll = allActivities.find(x => x.id === activityId);
      if (!fromAll) return;
      // Show it even if not in current facet filter
      renderActivityDetail(fromAll);
      return;
    }
    renderActivityDetail(a);
  }

  function renderActivityDetail(a) {
    currentActivityId = a.id;
    document.getElementById('dayView').style.display = 'none';
    const detail = document.getElementById('activityDetail');
    detail.style.display = 'block';

    const lvl = levelLabel(a.level_avg);
    const timeRange = a.startTime
      ? `${fmtTime(a.startTime)}${a.endTime ? ' – ' + fmtTime(a.endTime) : ''}`
      : '';
    const icon = a.icon || '🗓️';

    let html = '';
    html += `<button type="button" class="activity-detail-back">← back to day</button>`;
    html += `<div class="activity-detail-header">`;
    html += `<h2>${escapeHtml(icon)} ${escapeHtml(a.name)}</h2>`;
    html += `<div class="ad-subtitle">${escapeHtml(a.facet)}</div>`;
    html += `</div>`;

    // Build tabs
    html += `<div class="ad-tabs">`;
    html += `<button type="button" class="ad-tab active" data-tab="summary">summary</button>`;
    a.outputs.forEach((out, i) => {
      const label = out.filename.replace(/\.\w+$/, '').replace(/[_-]/g, ' ');
      html += `<button type="button" class="ad-tab" data-tab="output-${i}">${escapeHtml(label)}</button>`;
    });
    html += `</div>`;

    // Summary pane
    html += `<div class="ad-tab-pane active" id="pane-summary">`;
    html += `<dl class="ad-fields">`;
    if (timeRange) {
      html += `<dt>Time</dt><dd>${timeRange}</dd>`;
    }
    if (a.duration_minutes != null) {
      html += `<dt>Duration</dt><dd>${fmtDuration(a.duration_minutes)}</dd>`;
    }
    html += `<dt>Engagement</dt><dd><span class="act-level level-${lvl}" aria-hidden="true"></span> ${lvl}</dd>`;
    html += `<dt>Segments</dt><dd>${a.segments.length}</dd>`;
    if (a.active_entities && a.active_entities.length) {
      html += `<dt>Entities</dt><dd><div class="ad-entities">`;
      a.active_entities.forEach(e => {
        html += `<span class="ad-entity">${escapeHtml(e)}</span>`;
      });
      html += `</div></dd>`;
    }
    html += `</dl>`;
    if (a.description) {
      html += `<div class="ad-description">${escapeHtml(a.description)}</div>`;
    }
    html += `</div>`;

    // Output panes (lazy loaded)
    a.outputs.forEach((out, i) => {
      html += `<div class="ad-tab-pane" id="pane-output-${i}">`;
      html += `<div class="ad-output-loading">Loading...</div>`;
      html += `</div>`;
    });

    detail.innerHTML = html;
    detail.querySelector('.activity-detail-back').addEventListener('click', () => {
      location.hash = '';
    });

    // Tab click handler
    detail.querySelector('.ad-tabs').addEventListener('click', function(e) {
      const tab = e.target.closest('.ad-tab');
      if (!tab) return;
      const tabId = tab.dataset.tab;

      detail.querySelectorAll('.ad-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tabId));
      detail.querySelectorAll('.ad-tab-pane').forEach(p => {
        p.classList.toggle('active', p.id === 'pane-' + tabId);
      });

      // Lazy-load output content
      const match = tabId.match(/^output-(\d+)$/);
      if (match) {
        loadOutputTab(a, parseInt(match[1]));
      }
    });
  }

  async function loadOutputTab(activity, idx) {
    const out = activity.outputs[idx];
    if (!out) return;

    const pane = document.getElementById(`pane-output-${idx}`);
    const cacheKey = out.path;
    if (outputCache[cacheKey]) {
      pane.innerHTML = outputCache[cacheKey];
      return;
    }

    const encodedPath = out.path.split('/').map(p => encodeURIComponent(p)).join('/');
    try {
      const resp = await fetch(`/app/activities/api/activity_output/${encodedPath}`);
      const data = await resp.json();
      if (data.error) {
        pane.innerHTML = `<div class="ad-output-loading">Error: ${escapeHtml(data.error)}</div>`;
        return;
      }

      let rendered;
      if (data.format === 'md') {
        rendered = `<div class="rendered-markdown">${window.AppServices.renderMarkdown(data.content)}</div>`;
      } else if (data.format === 'json') {
        let pretty;
        try { pretty = JSON.stringify(JSON.parse(data.content), null, 2); } catch (e) { pretty = data.content; }
        rendered = `<pre>${escapeHtml(pretty)}</pre>`;
      } else {
        rendered = `<pre>${escapeHtml(data.content)}</pre>`;
      }

      pane.innerHTML = rendered;
      outputCache[cacheKey] = rendered;
    } catch (err) {
      pane.innerHTML = '<div class="ad-output-loading">Failed to load output.</div>';
    }
  }

  function hideActivityDetail() {
    currentActivityId = null;
    document.getElementById('activityDetail').style.display = 'none';
    document.getElementById('dayView').style.display = 'block';
  }

  // ── Data loading ──

  function applyFilters() {
    activities = filterByFacet(allActivities);

    renderSummary();

    if (currentActivityId) {
      // Stay on detail if it still exists
      const hash = location.hash.slice(1);
      if (hash.startsWith('activity/')) {
        showActivityDetail(hash.slice(9));
        return;
      }
    }

    renderTimeline(activities);
    renderActivities(activities);
  }

  async function loadData() {
    try {
      const acts = await window.apiJson(`/app/activities/api/day/${day}/activities`);
      if (!Array.isArray(acts)) {
        throw new window.ApiError({
          status: 200,
          statusText: 'OK',
          serverMessage: 'Malformed activities response',
          url: `/app/activities/api/day/${day}/activities`,
          cause: 'parse',
        });
      }

      allActivities = acts;
      applyFilters();

      // Check for initial hash
      handleHashChange();

      // Click handlers
      document.getElementById('timelineView').onclick = e => {
        const actEl = e.target.closest('.occ-activity');
        if (actEl) {
          e.preventDefault();
          location.hash = 'activity/' + actEl.dataset.activityId;
        }
      };

      document.getElementById('activitiesView').onclick = e => {
        const card = e.target.closest('.activity-card');
        if (card) {
          location.hash = 'activity/' + card.dataset.activityId;
        }
      };

      // Keyboard activation
      document.getElementById('timelineView').onkeydown = e => {
        if (e.key === 'Enter' || e.key === ' ') {
          const el = e.target.closest('.occ-activity');
          if (el) {
            e.preventDefault();
            el.click();
          }
        }
      };
      document.getElementById('activitiesView').onkeydown = e => {
        if (e.key === 'Enter' || e.key === ' ') {
          const el = e.target.closest('.activity-card');
          if (el) {
            e.preventDefault();
            el.click();
          }
        }
      };
    } catch (err) {
      window.logError(err, { context: 'activities-day-load' });
      window.SurfaceState.replaceLoading('timelineView', window.SurfaceState.error({
        heading: 'Couldn\'t load activities',
        desc: window.CONVEY_COPY.RELOAD_HINT,
        serverMessage: err?.serverMessage || err?.message || '',
        detail: err,
      }));
      document.getElementById('activitiesView').innerHTML = '';
      document.getElementById('daySummary').textContent = '';
    }
  }

  // ── Hash routing ──

  function handleHashChange() {
    const hash = location.hash.startsWith('#') ? location.hash.slice(1) : location.hash;
    if (hash.startsWith('activity/')) {
      const id = decodeURIComponent(hash.slice(9));
      if (id) {
        showActivityDetail(id);
        return;
      }
    }
    hideActivityDetail();
  }

  window.addEventListener('hashchange', handleHashChange);

  // ── Init ──

  window.addEventListener('facet.switch', () => {
    applyFilters();
  });

  loadData();
})();
</script>