{% extends "base.html" %}

{% block title %}Connect your records · HealthClaw{% endblock %}

{% block head %}
<style>
  .connect-shell {
    max-width: 760px;
    margin: 60px auto 80px;
    padding: 0 24px;
    color: var(--white);
  }
  .connect-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--cyan);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .connect-title {
    font-size: 32px;
    line-height: 1.18;
    font-weight: 700;
    margin: 0 0 16px;
  }
  .connect-sub {
    color: var(--gray-dim);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 28px;
  }
  .connect-tenant {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(34, 211, 238, 0.10);
    border: 1px solid rgba(34, 211, 238, 0.30);
    padding: 6px 12px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--cyan);
    margin-bottom: 28px;
  }
  .stitch-card {
    background: rgba(13, 17, 23, 0.6);
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 12px;
    padding: 28px 28px 24px;
    margin-bottom: 24px;
  }
  .stitch-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--white);
  }
  .stitch-card p {
    color: var(--gray-dim);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 18px;
  }
  .stitch-status {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 8px;
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.20);
    color: var(--cyan);
    font-size: 13px;
    line-height: 1.55;
    display: none;
  }
  .stitch-status.error {
    background: rgba(248, 113, 113, 0.10);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fda4a4;
  }
  .stitch-status.success {
    background: rgba(52, 211, 153, 0.10);
    border-color: rgba(52, 211, 153, 0.35);
    color: var(--green);
  }
  .next-steps {
    font-size: 13px;
    color: var(--gray-dim);
    line-height: 1.7;
  }
  .next-steps code {
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 12px;
    background: rgba(34, 211, 238, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
  }
  .config-warn {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 10px;
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: var(--amber);
    font-size: 13px;
    line-height: 1.55;
  }
  .connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #22d3ee;
    color: #0d1117;
    font-weight: 700;
    font-size: 15px;
    padding: 13px 28px;
    border-radius: 8px;
    border: 2px solid #22d3ee;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.01em;
  }
  .connect-btn:hover {
    background: #fff;
    border-color: #fff;
    color: #0d1117;
  }
  .fasten-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    /* Keep the dialog clear of the notch and home indicator, and give it room
       to breathe on a phone. */
    padding: 12px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .fasten-modal-backdrop.open { display: flex; }
  .fasten-modal {
    background: #161b22;
    border-radius: 14px;
    border: 1px solid rgba(34,211,238,0.2);
    width: min(680px, 100%);
    /* Was `height: min(640px, 90vh)`, which clipped the widget's own consent
       checkbox and Continue button with no way to reach them (reported on
       iPad). `max-height: 100%` resolves against the backdrop, which is
       `position: fixed; inset: 0` and therefore already the visible viewport
       minus its safe-area padding — more reliable here than `90vh`, which iOS
       measures against the viewport with browser chrome EXPANDED. */
    height: min(1000px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }
  .fasten-modal-close {
    position: absolute;
    top: 4px;
    right: 4px;
    /* 44px minimum tap target (design.md). The glyph stays 22px. */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--gray-dim);
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
  }
  /* iOS and iPadOS expand an iframe to its content height and will not scroll
     it internally, whatever the iframe's own overflow says. So the WRAPPER is
     the scroll container — this is what actually makes the bottom of the
     Fasten widget reachable on an iPad. */
  .fasten-modal-body {
    flex: 1 1 auto;
    min-height: 0;          /* a flex child defaults to min-height:auto and
                               refuses to shrink, which re-creates the clip */
    overflow-y: auto;
  }
  .fasten-modal-body iframe {
    display: block;
    width: 100%;
    /* NOT `height: 100%`. That made the iframe exactly fill .fasten-modal-body,
       so the wrapper never overflowed, `overflow-y: auto` had nothing to
       scroll, and the widget's own content stayed clipped — iOS will not
       scroll an iframe's internals, which is the whole reason the wrapper
       exists. A scroll container whose only child always fits is not a scroll
       container.
       A fixed height taller than any phone or tablet viewport is what makes
       the wrapper actually scroll. The content is cross-origin so we cannot
       measure it; 1000px covers the Fasten flow through its Continue button
       with room to spare, and over-reserving costs only a little scroll on a
       tall desktop window. */
    height: 1000px;
    border: none;
  }
</style>
{% endblock %}

{% block content %}
<div class="connect-shell">
  <div class="connect-eyebrow">Fasten Connect{% if tefca_mode %} · TEFCA mode{% endif %}</div>
  <h1 class="connect-title">Verify once. Records arrive automatically.</h1>
  <p class="connect-sub">
    Identity verification through CLEAR or ID.me satisfies every QHIN on the
    nationwide TEFCA network in a single step. You won't be asked to log in to
    every health system individually. After verification, records stream in
    over the next 5–45 minutes and HealthClaw applies the full guardrail stack
    (PHI redaction, audit, step-up, human-in-the-loop) before any AI agent
    sees them.
  </p>

  <span class="connect-tenant">Tenant: <strong>{{ tenant_id }}</strong></span>

  <div class="stitch-card">
    <h3>Step 1 — Verify your identity</h3>
    <p>Click the button below. A modal will open with the CLEAR / ID.me flow.</p>

    {% if fasten_public_key %}
      <button type="button" class="connect-btn" id="open-stitch">Share Records</button>
    {% else %}
      <div class="config-warn">
        <strong>FASTEN_PUBLIC_KEY is not set on this deployment.</strong><br>
        Set it on the Railway service so the Stitch widget can render.
      </div>
    {% endif %}

    <div id="stitch-status" class="stitch-status"></div>
  </div>

{% if fasten_public_key %}
<div class="fasten-modal-backdrop" id="stitch-backdrop">
  <div class="fasten-modal">
    <button type="button" class="fasten-modal-close" id="close-stitch"
            title="Close" aria-label="Close">&times;</button>
    <div class="fasten-modal-body">
      <iframe
        id="stitch-iframe"
        title="Fasten Connect"
        src="https://embed.connect.fastenhealth.com/?public-id={{ fasten_public_key }}{% if tefca_mode %}&tefca-mode=true&search-only=false{% endif %}&external-id={{ tenant_id }}"
        allow="camera; microphone; clipboard-write"
      ></iframe>
    </div>
  </div>
</div>
{% endif %}

  <div class="stitch-card">
    <h3>Step 2 — Records flow in the background</h3>
    <p>
      The widget posts an <code style="color:var(--cyan);font-family:var(--font-mono);font-size:12px">org_connection_id</code>
      back to HealthClaw, which registers it against tenant
      <strong>{{ tenant_id }}</strong>. From then on, every record export from
      Fasten arrives at <code style="color:var(--cyan);font-family:var(--font-mono);font-size:12px">/fasten/webhook</code>,
      gets ingested, and is scanned by Curatr for data-quality issues.
    </p>
    <div class="next-steps">
      Nothing notifies you when records land, so there is no message to wait
      for. What to expect on this page instead:<br>
      &nbsp;&nbsp;<strong>Within a minute or two</strong> — the connection is
      verified and your assistant setup appears in Step 1, under the Share
      Records button.<br>
      &nbsp;&nbsp;<strong>5–45 minutes</strong> — records keep arriving in the
      background.<br>
      &nbsp;&nbsp;<strong>Nothing appears</strong> — email
      <a href="mailto:support@healthclaw.io" style="color:var(--cyan)">support@healthclaw.io</a>
      with your tenant id and we will check the connection.
    </div>
  </div>
</div>

<script>
(function () {
  var backdrop = document.getElementById('stitch-backdrop');
  var openBtn  = document.getElementById('open-stitch');
  var closeBtn = document.getElementById('close-stitch');
  var statusEl = document.getElementById('stitch-status');
  if (!openBtn || !backdrop) return;

  function showStatus(message, kind) {
    statusEl.textContent = message;
    statusEl.className = 'stitch-status' + (kind ? ' ' + kind : '');
    statusEl.style.display = 'block';
  }

  openBtn.addEventListener('click', function () {
    backdrop.classList.add('open');
  });

  closeBtn.addEventListener('click', function () {
    backdrop.classList.remove('open');
  });

  backdrop.addEventListener('click', function (e) {
    if (e.target === backdrop) backdrop.classList.remove('open');
  });

  async function _registerConnection(data) {
    showStatus('Identity verified. Registering connection…', '');
    try {
      var resp = await fetch('/fasten/connections', {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json', 'X-Tenant-Id': {{ tenant_id | tojson }} },
        body: JSON.stringify({
          org_connection_id: data.org_connection_id || null,
          endpoint_id: data.endpoint_id || null,
          tefca_directory_id: data.tefca_directory_id || null,
          platform_type: data.platform_type || null,
          brand_id: data.brand_id || null,
          portal_id: data.portal_id || null
        })
      });
      showStatus(
        resp.ok
          ? 'Connection registered. Records will stream in over the next 5–45 minutes. Nothing will notify you when they land.'
          : 'Connection registration failed (HTTP ' + resp.status + ').',
        resp.ok ? 'success' : 'error'
      );
      if (resp.ok && data.org_connection_id) {
        // Token is minted only after Fasten's SIGNED webhook verifies the
        // connection (usually seconds). Poll briefly.
        _pollAgentAccess(data.org_connection_id, 30);
      }
    } catch (err) {
      showStatus('Network error: ' + err.message, 'error');
    }
  }

  async function _pollAgentAccess(orgConnectionId, attemptsLeft) {
    if (attemptsLeft <= 0) {
      showStatus('Connection made — your assistant key is still being verified. ' +
                 'Email support@healthclaw.io and we will send it to you.', '');
      return;
    }
    try {
      var r = await fetch('/fasten/connections/' + encodeURIComponent(orgConnectionId) + '/agent-access', {
        credentials: 'same-origin'
      });
      if (r.status === 200) { _showAgentAccess(await r.json()); return; }
      if (r.status !== 202) return;  // 409/410/404: nothing to show
    } catch (e) {}
    setTimeout(function () { _pollAgentAccess(orgConnectionId, attemptsLeft - 1); }, 3000);
  }

  function _showAgentAccess(access) {
    // One-time handoff of the read-scoped connect token. Shown once, never
    // stored client-side beyond this page render, never sent anywhere else.
    var el = document.createElement('div');
    el.className = 'stitch-card';
    el.style.marginTop = '18px';
    el.innerHTML =
      '<h3 style="margin:0 0 10px">Connect your AI assistant</h3>' +
      '<p style="margin:0 0 10px">Copy these two values into your assistant ' +
      '(Claude, Perplexity, or any MCP agent) so it can read <strong>your</strong> ' +
      'records. The token is read-only — it can never change anything — ' +
      'and expires in 30 days. Treat it like a password and save it now: ' +
      'it is shown only once.</p>' +
      '<p style="margin:0 0 6px"><strong>Tenant:</strong> <code></code></p>' +
      '<p style="margin:0 0 10px"><strong>Read token:</strong> ' +
      '<code style="word-break:break-all"></code></p>' +
      '<p style="margin:0 0 10px">Then tell your assistant:</p>' +
      '<pre style="white-space:pre-wrap;background:#f6f8fa;border-radius:8px;padding:10px;font-size:13px"></pre>' +
      '<button type="button" style="padding:8px 14px;border-radius:8px;cursor:pointer">Copy setup message</button>';
    var codes = el.querySelectorAll('code');
    codes[0].textContent = access.tenant_id;
    codes[1].textContent = access.read_token;
    var setupMsg = 'For every HealthClaw tool call in our conversations, ' +
      'include _tenantId: "' + access.tenant_id + '" and _stepUpToken: "' +
      access.read_token + '". This is my personal read-only health record ' +
      'access; never include these values in anything you write publicly.';
    el.querySelector('pre').textContent = setupMsg;
    el.querySelector('button').addEventListener('click', function () {
      navigator.clipboard.writeText(setupMsg).then(function () {
        showStatus('Setup message copied — paste it into your assistant.', 'success');
      });
    });
    statusEl.parentNode.insertBefore(el, statusEl.nextSibling);
  }

  window.addEventListener('message', async function (event) {
    var data = event.data || {};
    var type = data.type || data.event || data.action || '';

    // Accept messages only from fastenhealth.com or its subdomains — parse the
    // origin's host and check the domain properly (includes() would also match
    // a spoofed origin like https://fastenhealth.com.evil.com).
    var originHost;
    try { originHost = new URL(event.origin).hostname; } catch (e) { return; }
    if (originHost !== 'fastenhealth.com' &&
        !originHost.endsWith('.fastenhealth.com')) return;

    // Debug: surface every widget message shape in the console so a renamed
    // completion event is diagnosable from the browser, not the server.
    try { console.log('[fasten-widget]', type || '(untyped)', JSON.stringify(data).slice(0, 500)); } catch (e) {}

    // Robust completion detection: Fasten event names have drifted across
    // widget versions, so ALSO treat any fasten-origin message that carries
    // an org_connection_id (at any common nesting) as completion.
    var oid = data.org_connection_id ||
              (data.data && data.data.org_connection_id) ||
              (data.payload && data.payload.org_connection_id) ||
              (data.detail && data.detail.org_connection_id) || null;
    var payload = oid && data.org_connection_id ? data
                : (data.data && data.data.org_connection_id) ? data.data
                : (data.payload && data.payload.org_connection_id) ? data.payload
                : (data.detail && data.detail.org_connection_id) ? data.detail
                : data;

    // Fasten Stitch widget completion (standard + TEFCA mode variants)
    if (type === 'widget.complete' || type === 'complete' ||
        type === 'tefca.complete' || type === 'connection.complete' ||
        type === 'authorization.complete' || oid) {
      backdrop.classList.remove('open');
      await _registerConnection(payload);
    } else if (type === 'widget.config_error') {
      // The REAL event name. This branch used to test 'widget.error' and
      // 'error', neither of which Fasten emits — read out of the shipped
      // bundle (cdn.fastenhealth.com/connect/v4), whose only widget events
      // are widget.close, widget.complete and widget.config_error. So every
      // configuration refusal fell through both branches and produced
      // nothing from us: the patient saw Fasten's own opaque "Oops!
      // Something went wrong" inside the iframe and this page stayed
      // silent, still showing the modal (#326).
      //
      // fasten_unauthorized_client on "retrieving vault profile" — the
      // reported failure — arrives here. We cannot say WHY (the entitlement
      // lives in Fasten's account, not in anything we can read), so this
      // says what we know and what to do, and never guesses at a cause.
      backdrop.classList.remove('open');
      var detail = data.message || (data.data && data.data.message) ||
                   data.error_type || '';

      // Send the payload to the server BEFORE showing anything. Until this
      // existed, the only record of a refusal was the console.log below, so
      // when Fasten asked for "a request id so we can correlate the error in
      // our logs" (FAS-864) we had nothing: two testers had hit
      // fasten_unauthorized_client and all we could offer was a description.
      //
      // The whole object goes, untruncated. The console line is sliced to 500
      // characters and the vendor's correlation id may sit past that.
      var reference = null;
      try {
        var diag = await fetch('/r6/fhir/internal/connect-diagnostic', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({payload: data})
        });
        if (diag.ok) reference = (await diag.json()).reference;
      } catch (e) {
        // Reporting the failure must never itself become the failure the
        // patient sees. They still get the message below.
      }

      showStatus(
        'The records widget refused this configuration' +
        (detail ? ' (' + detail + ')' : '') +
        '. Identity verification is unavailable right now — this is a ' +
        'problem on our side, not with your records. Please tell us you ' +
        'saw this so we can chase it' +
        (reference ? ', and quote reference ' + reference : '') +
        '.', 'error');
    } else if (type === 'widget.close') {
      // Dismissal is not failure and must not be reported as one.
      backdrop.classList.remove('open');
    }
  });
})();
</script>
{% endblock %}