{% extends "base.html" %}
{% from "_when.html" import when_field with context %}
{% block title %}{{ hs.name }} · {{ app_name }}{% endblock %}
{% block body %}
<h1>🐾 Your {{ hs.name }} <a class="gear" href="/settings#handler" title="rules and the prompt library">⚙</a></h1>
<section class="card voicecard"><p class="voice big">“{{ hs.line }}”</p></section>

<section class="grid2">
  <div class="card {{ 'done' if hs.reflected else 'need' }}">
    <h3>Today's reflection <small class="hint">{{ 'done' if hs.reflected else 'required · due ' ~ hs.due_hour ~ ':00' }}</small></h3>
    {% if hs.reflection_prompt %}<p class="prompt">{{ hs.reflection_prompt.text }}</p>{% endif %}
    <form method="post" action="/handler/reflect">
      <input type="hidden" name="prompt_id" value="{{ hs.reflection_prompt.id if hs.reflection_prompt else 0 }}">
      <label>Write it. Properly.
        <textarea name="body" rows="7" required minlength="{{ minchars }}" placeholder="No summaries. What happened, what it felt like, what you're taking from it."></textarea></label>
      <p class="hint">at least {{ minchars }} characters · +15 xp</p>
      <button class="primary">📓 Submit to your {{ hs.name }}</button>
      {{ when_field('⏱ wrote this earlier? set the time') }}
    </form>
    <form id="vm-form" method="post" action="/handler/reflect/voice" enctype="multipart/form-data">
      <input type="hidden" name="prompt_id" value="{{ hs.reflection_prompt.id if hs.reflection_prompt else 0 }}">
      <input type="hidden" name="duration_seconds" id="vm-duration" value="0">
      <div class="row">
        <button type="button" id="vm-rec">🎙 Speak it instead</button>
        <button type="button" id="vm-stop" disabled>■ Stop</button>
        <span class="medclock" id="vm-clock">—</span>
      </div>
      <audio id="vm-preview" controls preload="none" hidden></audio>
      <label>Anything to add in writing <input name="note" placeholder="optional — the spoken memo is the reflection"></label>
      <button class="primary" id="vm-send" disabled>📤 Send to your {{ hs.name }}</button>
      <p class="hint" id="vm-status">at least {{ voice_min }} seconds · +15 xp · stays on this box</p>
    </form>
  </div>

  <div class="card {{ 'need' if hs.checkin.due else '' }}">
    <h3>Check-in <small class="hint">{% if not hs.active %}only while locked{% elif hs.checkin.overdue %}overdue{% elif hs.checkin.due %}due now{% else %}next {{ hs.checkin.next_at|rel(now) }}{% endif %}</small></h3>
    <form method="post" action="/handler/checkin" class="checkin">
      <input type="hidden" name="prompt_id" value="{{ hs.checkin_prompt.id if hs.checkin_prompt else 0 }}">
      {% for k in score_keys %}
      <label class="slider">{{ k }} <output>5</output>
        <input type="range" name="{{ k }}" min="1" max="10" value="5" oninput="this.previousElementSibling.value=this.value"></label>
      {% endfor %}
      {% if hs.checkin_prompt %}<p class="prompt small">{{ hs.checkin_prompt.text }}</p>{% endif %}
      <label>Answer <input name="note" placeholder="one honest line"></label>
      <button class="primary">🐾 Check in</button>
      {{ when_field() }}
    </form>
  </div>
</section>

<section class="grid2">
  <div class="card">
    <h3>Mantra of the day <small class="hint">{{ 'recited' if hs.recited else 'say it out loud' }}</small></h3>
    {% if hs.mantra %}
    <p class="mantra">{{ hs.mantra.text }}</p>
    <form method="post" action="/handler/recite"><input type="hidden" name="kind" value="mantra"><input type="hidden" name="prompt_id" value="{{ hs.mantra.id }}"><button class="primary">🔁 I said it</button></form>
    {% endif %}
    <details><summary>all mantras</summary>
      <ul class="lines">{% for m in mantras %}<li><span>{{ m.text }}</span><form method="post" action="/handler/recite"><input type="hidden" name="kind" value="mantra"><input type="hidden" name="prompt_id" value="{{ m.id }}"><button class="small">recite</button></form></li>{% endfor %}</ul>
    </details>
    <h3 style="margin-top:1rem">Affirmations</h3>
    <ul class="lines">{% for a in affirmations %}<li><span>{{ a.text }}</span><form method="post" action="/handler/recite"><input type="hidden" name="kind" value="affirmation"><input type="hidden" name="prompt_id" value="{{ a.id }}"><button class="small">✨</button></form></li>{% endfor %}</ul>
  </div>

  <div class="card">
    <h3>Headspace session <small class="hint">meditation · hypno scripts later</small></h3>
    <form method="post" action="/handler/meditation" id="medform">
      <label>Script <select name="prompt_id"><option value="0">— unguided —</option>{% for m in meditations %}<option value="{{ m.id }}">{{ m.text[:70] }}{% if m.text|length > 70 %}…{% endif %}</option>{% endfor %}</select></label>
      <div class="row">
        <label>Minutes <input type="number" name="minutes" id="medmin" min="1" value="10"></label>
        <button type="button" id="medstart">▶ Start</button>
        <button class="primary" id="medlog" disabled>🧘 Log it</button>
      </div>
      <div class="medclock" id="medclock">—</div>
      <label>Afterwards <input name="note" placeholder="one line on where you went"></label>
      {{ when_field('⏱ sat earlier, off-app? set the time and log it') }}
    </form>
    <p class="hint">xp = minutes, up to 20. The log button unlocks when the timer ends — sit the whole thing. Logging an earlier session unlocks it too.</p>
  </div>
</section>

<section class="card">
  <h3>Journal</h3>
  <ul class="events">
    {% for e in entries %}
    <li class="ev">
      <span class="ev-ico">{{ {'reflection':'📓','checkin':'🐾','mantra':'🔁','affirmation':'✨','meditation':'🧘'}[e.kind] }}</span>
      <div class="ev-body">
        <div class="ev-head"><b>{{ e.kind }}</b>{% if e.prompt_text %}<span class="hint">{{ e.prompt_text }}</span>{% endif %}</div>
        {% if e.kind == 'checkin' %}<div class="scores">{% for k, v in e.scores_d.items() %}<span><i>{{ k }}</i> {{ v }}</span>{% endfor %}</div>{% endif %}
        {% if e.duration_seconds %}<div class="ev-detail">{{ e.duration_seconds|dur }}</div>{% endif %}
        {% if e.media_id %}<audio class="ev-audio" controls preload="none" src="/media/{{ e.media_id }}"></audio>{% endif %}
        {% if e.body %}<div class="ev-detail body">{{ e.body }}</div>{% endif %}
      </div>
      <time title="{{ e.ts|local('%Y-%m-%d %H:%M') }}">{{ e.ts|rel(now) }}</time>
    </li>
    {% else %}<li class="hint">Nothing written yet. That changes today.</li>{% endfor %}
  </ul>
</section>
{% endblock %}
{% block scripts %}
<script src="/static/voice.js"></script>
<script>
(function () {
  const start = document.getElementById('medstart'), log = document.getElementById('medlog'),
        clock = document.getElementById('medclock'), min = document.getElementById('medmin'),
        form = document.getElementById('medform');
  let iv = null;
  start.addEventListener('click', () => {
    let left = Math.max(1, parseInt(min.value || '1', 10)) * 60;
    min.readOnly = true; start.disabled = true; log.disabled = true;
    const paint = () => { clock.textContent = Latch.clock(left); };
    paint();
    iv = setInterval(() => {
      left -= 1; paint();
      if (left <= 0) { clearInterval(iv); clock.textContent = 'done — good boy'; log.disabled = false; }
    }, 1000);
  });
  // A session sat earlier, off-app: giving a time is the proof, so the log button opens.
  const when = form.querySelector('input[name=when]');
  if (when) when.addEventListener('input', () => { if (when.value) log.disabled = false; });
})();
</script>
{% endblock %}