{{define "content"}}
{{if not .HasData}}
<div class="wrap">{{template "emptystate" .}}</div>
{{else}}
<div class="map-page">
  <div id="map"></div>

  {{/* 时间轴回放：拖动即可按「首次到访时间」累加显示点位。
       注意它和左侧的日期区间是两回事——区间是「只看这段时间」，
       时间轴是「一路走到这个时刻为止」，所以放在地图底部而不是筛选面板里。 */}}
  <div class="timeline-bar" id="timeline-bar" hidden>
    <button class="tl-play" type="button" id="tl-play" aria-label="播放时间轴">▶</button>
    <input type="range" id="tl-range" min="0" max="100" value="100" aria-label="时间轴">
    <span class="tl-label" id="tl-label"></span>
    <button class="tl-reset" type="button" id="tl-reset">全部</button>
  </div>

  {{/* 加载失败时的提示条：绝不重新加载页面，只在地图上说清楚并给一个重试按钮 */}}
  <div class="map-status" id="map-status" hidden>
    <span id="map-status-text"></span>
    <button class="btn sm" type="button" id="map-retry" hidden>重试</button>
  </div>

  <div class="map-panel">
    <form id="filter-form" method="get" action="/map">
      <h3>时间范围</h3>
      <div class="chips" style="margin-bottom:10px">
        {{range .Presets}}<a class="chip {{if .Active}}on{{end}}" href="{{$.RangeLink .From .To}}">{{.Label}}</a>{{end}}
        {{if .IsAdmin}}
        <a class="chip {{if .ShowHomeWork}}on{{end}}" href="{{.HWLink}}" title="仅登录后的你自己可见，访客看不到这两类记录">含家/工作</a>
        {{end}}
      </div>
      <div class="row" style="gap:8px;margin-bottom:10px">
        <input type="date" name="from" value="{{.From}}" style="flex:1">
        <input type="date" name="to" value="{{.To}}" style="flex:1">
      </div>

      {{if .Activities}}
      <h3>地点类型</h3>
      <div class="chips" style="margin-bottom:10px">
        {{range $i, $a := .Activities}}{{if or (lt $i 12) ($.IsAct $a.ID)}}
        <a class="chip {{if $.IsAct $a.ID}}on{{end}}" href="{{$.ActLink $a.ID}}">
          <span class="dot" style="background:{{colorof $a.Color}}"></span>{{$a.Name}}
        </a>
        {{end}}{{end}}
      </div>
      {{if gt (len .Activities) 12}}
      <details class="more-types">
        <summary>展开其余 {{len .Activities}} 个类型</summary>
        <div class="chips">
          {{range $i, $a := .Activities}}{{if and (ge $i 12) (not ($.IsAct $a.ID))}}
          <a class="chip" href="{{$.ActLink $a.ID}}"><span class="dot" style="background:{{colorof $a.Color}}"></span>{{$a.Name}}</a>
          {{end}}{{end}}
        </div>
      </details>
      {{end}}
      {{end}}

      <h3>其它条件</h3>
      <div class="row" style="gap:8px;margin-bottom:10px">
        <select name="city" style="flex:1">
          <option value="">全部城市</option>
          {{range .CityList}}<option value="{{.}}" {{if eq . $.City}}selected{{end}}>{{.}}</option>{{end}}
        </select>
        <select name="tag" style="flex:1">
          <option value="0">全部标签</option>
          {{range .TagOptions}}<option value="{{.ID}}" {{if eq .ID $.TagID}}selected{{end}}>{{.Name}}</option>{{end}}
        </select>
      </div>
      <div class="row" style="gap:8px;margin-bottom:12px">
        <select name="min" style="flex:1">
          <option value="0" {{if eq .MinDwell 0}}selected{{end}}>不限停留</option>
          <option value="5" {{if eq .MinDwell 5}}selected{{end}}>≥ 5 分钟</option>
          <option value="15" {{if eq .MinDwell 15}}selected{{end}}>≥ 15 分钟</option>
          <option value="30" {{if eq .MinDwell 30}}selected{{end}}>≥ 30 分钟</option>
          <option value="60" {{if eq .MinDwell 60}}selected{{end}}>≥ 1 小时</option>
        </select>
        <input type="text" name="q" value="{{.Keyword}}" placeholder="关键词" style="flex:1">
      </div>
      {{range .ActivityIDs}}<input type="hidden" name="act" value="{{.}}">{{end}}
      {{if .ShowHomeWork}}<input type="hidden" name="hw" value="1">{{end}}

      <div class="row">
        <button class="btn" type="submit" style="flex:1">查询</button>
        <a class="btn" href="/map">重置</a>
      </div>
      <div class="chips" style="margin-top:10px">
        <label class="chip" style="user-select:none"><input type="checkbox" id="track-toggle" style="accent-color:var(--accent)"> 行程轨迹</label>
        <label class="chip" style="user-select:none"><input type="checkbox" id="heat-toggle" style="accent-color:var(--accent)"> 到访热力</label>
        <label class="chip" style="user-select:none"><input type="checkbox" id="city-toggle" style="accent-color:var(--accent)"> 城市聚合</label>
        <label class="chip" style="user-select:none"><input type="checkbox" id="gpx-toggle" style="accent-color:var(--accent)"> GPX 轨迹</label>
      </div>
      <div class="muted" style="margin-top:9px;font-size:12px">当前显示 <b id="pt-count">{{num (len .Points)}}</b> 个地点</div>
    </form>
  </div>

  {{if .Legend}}
  <div class="map-legend">
    <div style="font-weight:500;color:var(--text-2)">类型分布</div>
    {{range .Legend}}
    <div class="lg"><i style="background:{{colorof .Color}}"></i>{{.Name}} <span class="muted">{{num .Count}}</span></div>
    {{end}}
  </div>
  {{end}}
</div>

<script>
  window.addEventListener('load', function () {
    // 首屏不带地点数据（全量内联会让 HTML 膨胀到 ~58KB），
    // 页面先出壳，地点走 /api/points 并行拉取后再填充。
    window.__map = window.rondMap.full({ id: 'map', points: [] });

    var form = document.getElementById('filter-form');
    var ptCount = document.getElementById('pt-count');
    var statusBox = document.getElementById('map-status');
    var statusText = document.getElementById('map-status-text');
    var retryBtn = document.getElementById('map-retry');

    function qs() {
      return new URLSearchParams(new FormData(form)).toString();
    }

    function showStatus(msg, withRetry) {
      statusText.textContent = msg;
      retryBtn.hidden = !withRetry;
      statusBox.hidden = false;
    }
    function hideStatus() { statusBox.hidden = true; }

    // HTTP 500 时 fetch 本身是成功的，紧接着 r.json() 才抛错——统一在这里判掉，
    // 调用方就只有一个失败分支要处理。
    function loadJSON(url) {
      return fetch(url, { headers: { 'Accept': 'application/json' } }).then(function (r) {
        if (!r.ok) throw new Error('HTTP ' + r.status);
        return r.json();
      });
    }

    /* 以前这里是 `.catch(function () { form.submit(); })`：接口一失败就整页重提交，
       而重提交后的新页面又走同一条路 —— 实测 8 秒内自刷 17 次、接口被拒 16 次、
       访客看不到任何解释，服务器被反复打（1C1G 上尤其难受）。
       现在改成：有限次自动重试 + 明确提示 + 手动重试按钮，**任何情况下都不重新加载页面**。 */
    var RETRY_DELAYS = [1000, 3000];

    // 返回的 promise 一定 resolve（true/false），不会 reject——避免未处理的 rejection，
    // 也让调用方只需判断「这次到底加载成功了没」。
    function loadPoints(q, attempt) {
      attempt = attempt || 0;
      return loadJSON('/api/points' + (q ? '?' + q : '')).then(function (d) {
        var pts = d.points || [];
        // 先交给时间轴：它自己会在「有时间的点」上做过滤再决定画什么
        setupTimeline(pts);
        window.rondMap.setPoints(pts);
        ptCount.textContent = pts.length;
        hideStatus();
        return true;
      }).catch(function (err) {
        var why = (err && err.message) ? err.message : '网络异常';
        if (attempt < RETRY_DELAYS.length) {
          showStatus('地点加载失败（' + why + '），正在重试…', false);
          return new Promise(function (res) { setTimeout(res, RETRY_DELAYS[attempt]); })
            .then(function () { return loadPoints(q, attempt + 1); });
        }
        showStatus('地点加载失败（' + why + '）。地图上暂时没有点，可以点右侧重试。', true);
        return false;
      });
    }

    function reloadPoints(q) {
      // 地图页的筛选是 AJAX 换数据、不跳页，所以顶部进度条要自己收
      if (window.rondProgress) window.rondProgress.start();
      return loadPoints(q).then(function (ok) {
        if (ok && document.getElementById('track-toggle').checked) refreshTrack();
        if (window.rondProgress) window.rondProgress.finish();
        return ok;
      });
    }

    // 与列表页保持一致：下拉 / 日期改动即生效，不用再点「应用筛选」。
    // 关键词仍然回车才查（每敲一个字都发请求很难受）。
    // 这里走的是本页自己的 submit 处理器（AJAX 换数据），所以用 requestSubmit。
    form.addEventListener('change', function (e) {
      var el = e.target;
      if (!el || !el.name) return;
      if (el.tagName === 'SELECT' || el.type === 'date') {
        if (form.requestSubmit) form.requestSubmit();
        else form.submit();
      }
    });

    retryBtn.addEventListener('click', function () {
      retryBtn.hidden = true;
      hideStatus();
      reloadPoints(qs());
    });
    // 从后台切回来时顺手重试一次：多半是刚才断网/休眠导致的失败
    document.addEventListener('visibilitychange', function () {
      if (!document.hidden && !statusBox.hidden) retryBtn.click();
    });

    /* ---------- 时间轴回放 ----------
     * 每个点带着「首次到访时间」（ft，Unix 秒），拖动滑块就把 ft ≤ 截止时刻的点留下。
     * 这样得到的是「一路走到这个时刻，足迹长什么样」的累加效果。
     * 实现上不去逐点改样式，而是复用 setPoints 整体重画——点位规模是几百，
     * 且只在「日期真的变了」时才重画（拖动一次可能跨很多像素但只跨几天）。
     */
    var tlBar = document.getElementById('timeline-bar');
    var tlRange = document.getElementById('tl-range');
    var tlLabel = document.getElementById('tl-label');
    var tlPlay = document.getElementById('tl-play');
    var allPoints = [];      // 最近一次拉取到的全部点（时间轴始终在它上面过滤）
    var tlMin = 0, tlMax = 0, tlDay = 86400, tlLastDay = null, tlTimer = null;

    function fmtDay(sec) {
      var d = new Date(sec * 1000);
      return d.getFullYear() + '-' + ('0' + (d.getMonth() + 1)).slice(-2);
    }

    function applyTimeline() {
      if (!allPoints.length) return;
      var cut = Number(tlRange.value);
      // 只跟着「天」变化重画：拖动时像素变化远多于天数变化，不然一帧要重画好几次
      var day = Math.floor(cut / tlDay);
      if (day === tlLastDay) return;
      tlLastDay = day;
      var sub = [], shown = 0;
      for (var i = 0; i < allPoints.length; i++) {
        var p2 = allPoints[i];
        // 「截至某日」要把那一天也算进去，否则拖到最左会是一个空地图
        if (!p2.ft || p2.ft < cut + tlDay) { sub.push(p2); shown++; }
      }
      // keepView：拖动/播放时不要重新 fit 视野，不然地图会跟着不停缩放，很晕
      window.rondMap.setPoints(sub, { keepView: true });
      tlLabel.textContent = fmtDay(cut) + ' · ' + shown + '/' + allPoints.length + ' 个点';
    }

    function setupTimeline(pts) {
      allPoints = pts;
      var withTime = pts.filter(function (p2) { return p2.ft; });
      if (withTime.length < 2) { tlBar.hidden = true; return; }
      tlMin = withTime[0].ft;
      tlMax = withTime[0].ft;
      for (var i = 1; i < withTime.length; i++) {
        if (withTime[i].ft < tlMin) tlMin = withTime[i].ft;
        if (withTime[i].ft > tlMax) tlMax = withTime[i].ft;
      }
      // 两端都对齐到「天」：input[type=range] 的可取值为 min + k*step，
      // max 不是 step 的整数倍时**根本取不到 max**，全量时就会少算几个点。
      tlMin = Math.floor(tlMin / tlDay) * tlDay;
      tlMax = Math.ceil(tlMax / tlDay) * tlDay;
      tlRange.min = tlMin;
      tlRange.max = tlMax;
      tlRange.step = tlDay;
      tlRange.value = tlMax;
      tlLastDay = null;
      tlBar.hidden = false;
      applyTimeline();
    }

    tlRange.addEventListener('input', function () {
      if (tlTimer) return;                 // 一帧只重画一次，拖起来才不卡
      tlTimer = requestAnimationFrame(function () { tlTimer = null; applyTimeline(); });
    });
    tlRange.addEventListener('change', function () { tlLastDay = null; applyTimeline(); });
    document.getElementById('tl-reset').addEventListener('click', function () {
      stopPlay();
      tlRange.value = tlMax;
      tlLastDay = null;
      applyTimeline();
    });

    // 播放：约 12 秒走完整个跨度（按天推进，和拖动走同一条路径）
    function stopPlay() {
      if (tlTimer) { cancelAnimationFrame(tlTimer); tlTimer = null; }
      if (tlPlay._t) { clearInterval(tlPlay._t); tlPlay._t = null; }
      tlPlay.textContent = '▶';
      tlPlay.setAttribute('aria-label', '播放时间轴');
    }
    tlPlay.addEventListener('click', function () {
      if (tlPlay._t) { stopPlay(); return; }
      if (Number(tlRange.value) >= tlMax) { tlRange.value = tlMin; tlLastDay = null; }
      tlPlay.textContent = '⏸';
      tlPlay.setAttribute('aria-label', '暂停');
      var steps = Math.max(1, Math.round((tlMax - Number(tlRange.value)) / tlDay));
      var perTick = Math.max(1, Math.ceil(steps / 240));   // 最多约 240 帧，约 12 秒
      tlPlay._t = setInterval(function () {
        var next = Number(tlRange.value) + perTick * tlDay;
        if (next >= tlMax) { next = tlMax; stopPlay(); }
        tlRange.value = next;
        applyTimeline();
      }, 50);
    });

    reloadPoints(qs());
    form.addEventListener('submit', function (e) {
      e.preventDefault();
      var q = qs();
      history.replaceState(null, '', '/map' + (q ? '?' + q : ''));
      reloadPoints(q);
    });

    var trackOn = false;
    function refreshTrack() {
      if (!trackOn) { window.rondMap.setTrack(null, null); return; }
      var q = qs();
      loadJSON('/api/track' + (q ? '?' + q : ''))
        .then(function (d) { window.rondMap.setTrack(d.segs || [], d.modes || []); })
        // 轨迹拉不到只影响这一层，不阻塞地图本身；安静失败 + 取消勾选，别让开关停在"已选但没线"的状态
        .catch(function (err) {
          trackOn = false;
          document.getElementById('track-toggle').checked = false;
          window.rondMap.setTrack(null, null);
          showStatus('行程轨迹加载失败（' + ((err && err.message) || '网络异常') + '），已取消勾选。', false);
          setTimeout(hideStatus, 4000);
        });
    }
    document.getElementById('track-toggle').addEventListener('change', function () {
      trackOn = this.checked;
      refreshTrack();
    });
    document.getElementById('heat-toggle').addEventListener('change', function () {
      window.rondMap.setHeat(this.checked);
    });
    document.getElementById('city-toggle').addEventListener('change', function () {
      window.rondMap.setCityAgg(this.checked);
    });
    document.getElementById('gpx-toggle').addEventListener('change', function () {
      window.rondMap.setGpx(this.checked);
    });
  });
</script>
{{end}}
{{end}}