{% extends "review_base.html" %}
{% macro gate_hint(meds, allergies, sample=false) -%}
{#- Made-up records (r6/voice.py): the same gate, about the sample person. -#}
{%- if sample and meds and allergies -%}
Answer each medication and each allergy. Then confirm an allergy, or tick the box if the sample person has no known allergies, to continue.
{%- elif sample and meds -%}
Answer each medication. Then tick the box if the sample person has no known allergies, to continue.
{%- elif sample and allergies -%}
Answer each allergy. Then confirm one, or tick the box if the sample person has no known allergies, to continue.
{%- elif sample -%}
Tick the box if the sample person has no known allergies, to continue.
{%- elif meds and allergies -%}
Answer each medication and each allergy. Then confirm an allergy, or check "I have no known allergies", to continue.
{%- elif meds -%}
Answer each medication. Then check "I have no known allergies" if that is true for you, to continue.
{%- elif allergies -%}
Answer each allergy. Then confirm one, or check "I have no known allergies", to continue.
{%- else -%}
Check "I have no known allergies" if that is true for you, to continue.
{%- endif -%}
{%- endmacro %}
{% block title %}{% if voice == 'sample' %}Review the sample person's intake form{% else %}Review your intake form{% endif %} — HealthClaw Guardrails{% endblock %}
{% block head %}{% if voice == 'sample' %}
<style>
  /* Made-up records (r6/voice.py): why Approve is off, in the ink a tester
     reads at 375px rather than the muted note colour. Here rather than in
     the shell, so a real review is the page it was, byte for byte. */
  /* Only the waiting hint: success/error states keep their own colours. */
  #review-gate-msg.alert-secondary { color: var(--ink); font-weight: 600; }
</style>{% endif %}{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-9">{% if voice == 'sample' %}
    {# Made-up records (r6/voice.py). The banner is CareAgents' own sentence
       (beta.SAMPLE_FRAME). The link is filled from the relay's rewritten
       form action, as the post-approval one is: the engine does not know
       which assistant this is, and anywhere but the relay it stays hidden. #}
    <div class="alert alert-warning mb-3" role="note">{{ sample_banner }}</div>
    <a id="sample-back-to-chat" class="btn btn-outline-secondary mb-3" hidden>&larr; Back to chat</a>{% endif %}

    <div class="d-flex align-items-center mb-3"><div>
{% if voice == 'sample' %}        <h2 class="mb-0">Check each item on the sample person's form</h2>
        <p class="text-muted mb-0">
          This is practice on made-up records. Nothing is submitted until you
          answer every medication and allergy below. Having no allergies is
          never assumed: you tick the box yourself.
        </p>{% else %}        <h2 class="mb-0">Check each item before we make your form</h2>
        <p class="text-muted mb-0">
          Nothing is submitted until you confirm every medication and allergy
          below. Having no allergies is never assumed for you: you say so
          yourself with the "I have no known allergies" box.
        </p>{% endif %}
      </div>
    </div>

    <form id="review-form" method="post"
          action="/r6/actions/{{ action_id }}/review">

      <!-- About you: shown as it is in your records, not edited here.
           Plain words for a phone (#876): not "Demographics", not
           "read-only". -->
      <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
          <span>{% if voice == 'sample' %}About the sample person{% else %}About you{% endif %}</span>
          <span class="badge bg-secondary">{% if voice == 'sample' %}From the sample records{% else %}From your records{% endif %}</span>
        </div>
        <div class="card-body">
          {% if demographics %}
          <dl class="row mb-0">
            {% for label, value in demographics %}
            <dt class="col-sm-4 text-muted">{{ label }}</dt>
            <dd class="col-sm-8">{{ value }}</dd>
            {% endfor %}
          </dl>
          {% elif record_readable %}
          <p class="text-muted mb-0">{% if voice == 'sample' %}No details about the sample person found in the sample records.{% else %}No details about you found in your records.{% endif %}</p>
          {% else %}
          <p class="text-muted mb-0">{% if voice == 'sample' %}We could not read the sample records, so nothing has been filled in here.{% else %}We could not read your records, so nothing has been filled in here.{% endif %}</p>
          {% endif %}
        </div>
      </div>

      <!-- Medications: confirm each one individually -->
      <div class="card mb-4">
        <div class="card-header">Current medications</div>
        <div class="card-body">
          {% if meds %}
          <p class="text-muted small">{% if voice == 'sample' %}Each medication below is <strong>from the sample records</strong>. Say whether the sample person is still taking it.{% else %}Each medication below is <strong>from your records</strong>. Tell us whether you are still taking it.{% endif %}</p>
          {% for med in meds %}
          <div class="med-row border rounded p-3 mb-2 d-flex flex-wrap justify-content-between align-items-center"
               data-row-index="{{ loop.index0 }}">
            <div class="me-3">
              <div class="fw-bold">{{ med.name }}</div>
              {% if med.dose %}<div class="text-muted small">{{ med.dose }}</div>{% endif %}
              <div class="text-muted small">{% if voice == 'sample' %}from the sample records{% else %}from your records{% endif %}</div>
            </div>
            <div class="btn-group" role="group" aria-label="Still taking {{ med.name }}?">
              <input type="radio" class="btn-check med-choice" name="med-{{ loop.index0 }}"
                     id="med-{{ loop.index0 }}-yes" value="yes" required>
              <label class="btn btn-outline-success btn-sm" for="med-{{ loop.index0 }}-yes">Still taking</label>

              <input type="radio" class="btn-check med-choice" name="med-{{ loop.index0 }}"
                     id="med-{{ loop.index0 }}-no" value="no">
              <label class="btn btn-outline-warning btn-sm" for="med-{{ loop.index0 }}-no">Not anymore</label>

              <input type="radio" class="btn-check med-choice" name="med-{{ loop.index0 }}"
                     id="med-{{ loop.index0 }}-remove" value="remove">
              <label class="btn btn-outline-danger btn-sm" for="med-{{ loop.index0 }}-remove">Remove</label>
            </div>
          </div>
          {% endfor %}
          {% elif record_readable %}
          <p class="text-muted mb-0">{% if voice == 'sample' %}No medications found in the sample records.{% else %}No medications found in your records.{% endif %}</p>
          {% else %}
          <p class="text-muted mb-0">{% if voice == 'sample' %}We could not read the sample records, so no medications have been listed here.{% else %}We could not read your records, so no medications have been listed here.{% endif %}</p>
          {% endif %}
        </div>
      </div>

      <!-- Allergies: confirm each, and the explicit NKA attestation -->
      <div class="card mb-4 border-warning">
        <div class="card-header">Allergies</div>
        <div class="card-body">
          {# Three states, not two. "We looked and found none" and "we could
             not work out whose record to look at" are different sentences,
             and only the first may appear above the attestation below (#390). #}
          {% if not record_readable %}
{% if voice == 'sample' %}          <div class="alert alert-danger mb-3" role="alert"><strong>We could not read the sample records</strong> &mdash;
            {{ record_reason }}. Nothing here has been checked against them,
            and this is not a statement that the sample person has no allergies.
          </div>{% else %}          <div class="alert alert-danger mb-3" role="alert"><strong>We could not read your records</strong> &mdash;
            {{ record_reason }}. Nothing here has been checked against them,
            and this is not a statement that you have no allergies.
          </div>{% endif %}
          {% endif %}
          {% if allergies %}
          <p class="text-muted small">Each allergy below is <strong>{% if voice == 'sample' %}from the sample records{% else %}from your records{% endif %}</strong>. Confirm or remove each one.</p>
          {% for allergy in allergies %}
          <div class="allergy-row border rounded p-3 mb-2 d-flex flex-wrap justify-content-between align-items-center"
               data-row-index="{{ loop.index0 }}"{% if allergy.absence_entry %} data-absence-entry="true"{% endif %}>
            <div class="me-3">
              <div class="fw-bold">{{ allergy.allergen }}</div>
              {% if allergy.reaction %}<div class="text-muted small">Reaction: {{ allergy.reaction }}</div>{% endif %}
              <div class="text-muted small">{% if voice == 'sample' %}from the sample records{% else %}from your records{% endif %}</div>
            </div>
            <div class="btn-group" role="group" aria-label="Confirm {{ allergy.allergen }}?">
              <input type="radio" class="btn-check allergy-choice" name="allergy-{{ loop.index0 }}"
                     id="allergy-{{ loop.index0 }}-confirm" value="confirm">
              <label class="btn btn-outline-success btn-sm" for="allergy-{{ loop.index0 }}-confirm">Confirm</label>

              <input type="radio" class="btn-check allergy-choice" name="allergy-{{ loop.index0 }}"
                     id="allergy-{{ loop.index0 }}-remove" value="remove">
              <label class="btn btn-outline-danger btn-sm" for="allergy-{{ loop.index0 }}-remove">Remove</label>
            </div>
          </div>
          {% endfor %}
          {% elif record_readable %}
          <div class="alert alert-warning mb-3" role="alert">{% if voice == 'sample' %}No allergies found in the sample records. If the sample person has none, tick the box below; it is never assumed.{% else %}No allergies found in your records. If you have none, say so with the box below; it is never assumed for you.{% endif %}
          </div>
          {% endif %}

          <div class="form-check mt-2 p-3 bg-body-secondary rounded">
            <!-- CRITICAL: never pre-checked. NKA is an explicit attestation,
                 never inferred from the absence of allergy data — nor from an
                 absence the page could not verify (#390). -->
            <input class="form-check-input" type="checkbox" name="nka" id="nka" value="true">{% if voice == 'sample' %}
            {# One column beside the box: the shell's .form-check is a flex
               row, which set the note in a third, word-wide column at 375px. #}
            <div>{% endif %}
            <label class="form-check-label fw-bold" for="nka">
              {% if voice == 'sample' %}Tick to say the sample person has no known allergies.{% else %}I have no known allergies{% endif %}
            </label>
            <div class="text-muted small">
              {% if voice == 'sample' %}It is never ticked for you.{% else %}Only check this if you know you have no allergies.{% endif %}
              {%- if not record_readable %}
              {% if voice == 'sample' %}It confirms nothing about what is on file.{% else %}It is your own statement and confirms nothing about what is on file.{% endif %}
              {%- endif %}
            </div>{% if voice == 'sample' %}
            </div>{% endif %}
          </div>
        </div>
      </div>

      <!-- Conditions: confirmable -->
      {% if conditions %}
      <div class="card mb-4">
        <div class="card-header">Problems / conditions</div>
        <div class="card-body">
          <p class="text-muted small">Each condition below is <strong>{% if voice == 'sample' %}from the sample records{% else %}from your records{% endif %}</strong>.</p>
          {% for condition in conditions %}
          <div class="border rounded p-3 mb-2 d-flex flex-wrap justify-content-between align-items-center">
            <div class="me-3">
              <div class="fw-bold">{{ condition.name }}</div>
              <div class="text-muted small">{% if voice == 'sample' %}from the sample records{% else %}from your records{% endif %}</div>
            </div>
            <div class="btn-group" role="group">
              <input type="radio" class="btn-check" name="condition-{{ loop.index0 }}"
                     id="condition-{{ loop.index0 }}-confirm" value="confirm" checked>
              <label class="btn btn-outline-success btn-sm" for="condition-{{ loop.index0 }}-confirm">Confirm</label>

              <input type="radio" class="btn-check" name="condition-{{ loop.index0 }}"
                     id="condition-{{ loop.index0 }}-remove" value="remove">
              <label class="btn btn-outline-danger btn-sm" for="condition-{{ loop.index0 }}-remove">Remove</label>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endif %}

      {# The gate names only what is on the page (#884 G7): no "confirm an
         allergy" when none is listed, no medications when none is. #}
      <div id="review-gate-msg" class="alert alert-secondary" role="alert">
        {{ gate_hint(meds, allergies, voice == 'sample') }}
      </div>

      <button type="submit" id="approve-btn" class="btn btn-primary btn-lg"{% if voice == 'sample' %} aria-describedby="review-gate-msg"{% endif %} disabled>Approve
      </button>
      <button type="button" id="decline-btn" class="btn btn-outline-secondary btn-lg ms-2">Decline
      </button>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  // Client-side UX only. The SERVER POST re-populates from FHIR and is the
  // real, un-craftable gate (see r6/actions/review.py).
  (function () {
    // No TENANT/TOKEN literals here. A tenant-bound step-up token is a WRITE
    // credential — the gate on clinical writes — and this page rendered it as
    // a JavaScript literal, which CareAgents then relayed verbatim from
    // careagents.cloud. Anything able to read the page body held a live write
    // credential until it expired, across an origin boundary, at the clinical
    // approval moment (#395).
    //
    // Nothing is lost by deleting it, and the reason is worth keeping:
    //   - the GET at r6/actions/review.py:130 REQUIRES a step-up header and
    //     401s without it. A browser navigation cannot set a custom header,
    //     so no browser has ever loaded this page directly, and on any direct
    //     request the literal rendered as "" anyway.
    //   - the only caller that supplies that header is CareAgents' server-side
    //     fetch_review_page — the path where the token got baked into HTML
    //     and shipped onward to the patient.
    //   - on submit, careagents/app.py rewrites this form's action to
    //     /review/<agent>/<action>/submit, resolves the tenant from the
    //     signed-in agent's ownership, and re-injects credentials itself. The
    //     headers the browser sent were read by nobody.
    //
    // So the credential was populated ONLY on the path that does not need it.
    // Do not "fix" a regression here by shortening the token's TTL instead:
    // the exposure is the delivery, not the lifetime.
    var form = document.getElementById('review-form');
    var btn = document.getElementById('approve-btn');
    var gateMsg = document.getElementById('review-gate-msg');
    // The server wrote the hint for what this page lists; keep that one.
    var GATE_HINT = gateMsg.textContent.trim();

    function medRows() {
      var names = {};
      form.querySelectorAll('.med-choice').forEach(function (el) { names[el.name] = true; });
      return Object.keys(names);
    }
    function allergyRows() {
      var names = {};
      form.querySelectorAll('.allergy-choice').forEach(function (el) { names[el.name] = true; });
      return Object.keys(names);
    }
    // A recorded "no known allergy" entry, confirmed, is not an allergy and
    // never stands in for the box (FHI-58). The server decides the same way.
    function absenceEntry(name) {
      var row = form.querySelector('input[name="' + name + '"]').closest('.allergy-row');
      return row !== null && row.getAttribute('data-absence-entry') === 'true';
    }
    function selected(name) {
      var el = form.querySelector('input[name="' + name + '"]:checked');
      return el ? el.value : null;
    }
    function evaluate() {
      var allMeds = medRows().every(function (n) { return selected(n) !== null; });
      var allAllergies = allergyRows().every(function (n) { return selected(n) !== null; });
      var confirmedAllergy = allergyRows().some(function (n) { return selected(n) === 'confirm' && !absenceEntry(n); });
      var nka = form.querySelector('#nka').checked;
      var ok = allMeds && allAllergies && (confirmedAllergy || nka);
      btn.disabled = !ok;
      gateMsg.className = ok ? 'alert alert-success' : 'alert alert-secondary';
      gateMsg.textContent = ok
        ? "Ready. We'll check each item again when you approve."
        : GATE_HINT;
      return ok;
    }
    form.addEventListener('change', evaluate);{% if voice == 'sample' %}

    // Made-up records: the way back to chat is there from the start, filled
    // from the relay's form action (/review/<agent>/<action>/submit) as
    // showBackToChat fills the post-approval one. Elsewhere it stays hidden.
    (function () {
      var back = document.getElementById('sample-back-to-chat');
      var parts = form.getAttribute('action').split('/');
      if (!back || parts[1] !== 'review' || !parts[2]) { return; }
      back.href = '/chat?agent=' + encodeURIComponent(parts[2]);
      back.hidden = false;
    })();{% endif %}

    {% include "_review_handlers.html" %}
  })();
</script>
{% endblock %}