{% extends "base.html" %}
{% block title %}Your hub — CareAgents{% endblock %}
{% block bodyclass %}page-home{% endblock %}
{% block head %}<link rel="manifest" href="/manifest.webmanifest">{% endblock %}
{% block content %}
{% include "_beta_banner.html" %}
<main class="hub">
  <div class="hub-head">
    <div>
      <h1>Welcome back</h1>
      <p class="hub-sub">{{ me.email }}
        {% if not has_passkey %}· <a href="/auth?enroll=1">add a passkey</a>{% endif %}
      </p>
    </div>
    <form method="post" action="/logout"><button class="pill">Sign out</button></form>
  </div>

  {% if not connections %}
  <!-- FIRST RUN: guide to connect records before anything else -->
  <p class="onboard-lead">Two quick steps: connect your health records, then
    spin up an agent that can read them.</p>
  {% endif %}

  <!-- AGENTS -->
  <section class="hub-section">
    <div class="section-head"><h2>Your agents</h2>
      <button type="button" class="pill pill-cta" id="new-agent-btn">+ New agent</button></div>
    <div class="card-grid" id="agents">
      {% for a in agents %}
      <a class="hub-card agent-card" href="/chat?agent={{ a.id }}">
        <span class="hub-emoji">{{ personas[a.persona].emoji if a.persona in personas else '🌿' }}</span>
        <div class="hub-card-name">{{ a.name }}</div>
        <div class="hub-card-sub">{{ personas[a.persona].name if a.persona in personas else 'Care agent' }}</div>
        <span class="open-hint">Open chat →</span>
      </a>
      {% endfor %}
      {% if not agents %}
        {% if connections %}
        <div class="empty">Records connected. <button type="button" class="linkish" id="empty-new-agent">Create your first agent →</button></div>
        {% else %}
        <div class="empty"><b>Step 2.</b> Once your records are connected below,
          create your first agent here.</div>
        {% endif %}
      {% endif %}
    </div>
  </section>

  <!-- CONNECTIONS -->
  <section class="hub-section" id="connect-section">
    <div class="section-head"><h2>Your connections</h2>
      {% if not connections %}<span class="step-tag">Step 1</span>{% endif %}</div>
    <div class="card-grid" id="connections">
      {% for c in connections %}
      <div class="hub-card conn-card" data-tenant="{{ c.tenant_id }}"
           data-conn="{{ c.id }}" data-kind="{{ c.kind }}">
        <div class="hub-card-name">{{ c.label }}</div>
        <div class="hub-card-sub">{{ c.provider or c.kind }}</div>
        <span class="status status-{{ c.status }}">{{ c.status }}</span>
        {% if c.kind == 'direct' and c.status != 'revoked' %}
        <button type="button" class="conn-upload" data-conn="{{ c.id }}"
                title="Upload a FHIR bundle from another app or portal"
                >Upload records</button>
        {% elif c.kind != 'sample' %}
        <button type="button" class="conn-refresh" data-conn="{{ c.id }}"
                title="Check your provider for new records">Refresh</button>
        {% endif %}
        {% if c.status != 'revoked' %}
        <button type="button" class="conn-disconnect" data-conn="{{ c.id }}"
                title="Stop new records arriving; keep what's already here"
                >Disconnect</button>
        {% endif %}
        <button type="button" class="conn-delete" data-conn="{{ c.id }}"
                data-label="{{ c.label }}"
                title="Delete these records permanently">Delete</button>
        <span class="conn-refresh-msg" role="status" aria-live="polite" hidden></span>
      </div>
      {% endfor %}
    </div>
    <h3 class="add-heading">Connect records</h3>
    <div class="marketplace" id="marketplace">
      {% for m in catalog %}
      <button type="button" class="connector-tile tier-{{ m.tier }}"
              data-connector="{{ m.id }}"
              {% if m.get('providers') %}data-providers='{{ m.providers|tojson }}'{% endif %}
              {% if m.get('requires_consent') and m.tier != 'soon' %}data-consent="1"{% endif %}
              {% if m.tier == 'soon' %}data-soon="1"{% endif %}>
        <span class="connector-emoji">{{ m.icon }}</span>
        <span class="connector-label">{{ m.label }}</span>
        <span class="connector-blurb">{{ m.blurb }}</span>
        {% if m.tier == 'soon' %}<span class="connector-tag">{{ m.note or 'coming soon' }}</span>
        {% elif m.tier == 'import' %}<span class="connector-tag">import</span>{% endif %}
      </button>
      {% endfor %}
    </div>
    {# The only channel for a refusal: tap a closed tile and this paragraph is
       the whole of what the deployment says back. Same live-region treatment
       as .conn-refresh-msg above; say() shows it before writing into it. #}
    <p class="inline-msg" id="connect-msg" role="status" aria-live="polite"
       hidden></p>
    {# True, and worth keeping — but only where the logins it describes are
       open. Under three "not open in this beta" tiles it contradicted the
       screen it sat on. #}
    {% if catalog | selectattr('id', 'in', ['fasten', 'wearable'])
                  | rejectattr('tier', 'equalto', 'soon') | list %}
    <p class="add-note">Verified provider &amp; wearable logins happen on the
      provider’s own site — we never see your password.</p>
    {% endif %}
  </section>

  <!-- SURFACES -->
  <section class="hub-section">
    <div class="section-head"><h2>Where you can reach your agent</h2></div>
    <div class="surface-row">
      <div class="surface on"><b>Web</b><span>always on</span></div>
      {# Not serviced in the beta (#536, D6): no webhook, no poller. No id, so
         home.js has nothing to bind — the tile is a label, not a control. #}
      <div class="surface soon"><b>Telegram</b><span>coming soon</span></div>
      {% if imessage_handle %}
      <div class="surface" id="im-surface"><b>iMessage</b>
        <span id="im-state">connect →</span></div>
      {% else %}
      <div class="surface soon"><b>iMessage</b><span>coming soon</span></div>
      {% endif %}
      <div class="surface soon"><b>Phone app</b><span>install from browser</span></div>
    </div>
    {# The refusal for these surfaces, and the words explaining every section
       flash, arrive here. Same live-region treatment as #connect-msg and
       .conn-refresh-msg; announce() shows it before writing into it. #}
    <p class="inline-msg" id="surfaces-msg" role="status" aria-live="polite"
       hidden></p>
  </section>
</main>

<!-- Consent card: shown before any REAL-record connection starts.
     Sample records skip this on purpose — synthetic data, zero risk.
     Copy is versioned server-side (CONSENT_VERSION); keep them in step. -->
<div class="modal" id="consent-modal" hidden>
  <div class="modal-card consent-card">
    <h3>Before you connect your real records</h3>
    <p class="consent-lead">Plain answers to the questions that matter.
      Take the 30 seconds.</p>
    <ul class="consent-points">
      <li><b>You're using your own right of access.</b> You are retrieving your
        own health records and pointing them at a tool you chose. CareAgents is
        not your doctor and not a hospital — different rules apply than you may
        be used to.</li>
      <li><b>Where your records live:</b> behind the HealthClaw guardrail
        layer, in a private space scoped to you — with identifier redaction on
        reads and an audit log of every access.
        <b>CareAgents itself stores no health data</b> — only your account and
        a pointer to that space.</li>
      <li><b>What the AI sees:</b> redacted records, when a question needs
        them. Your data is <b>never used to train models</b> and never sold.</li>
      <li><b>The AI can be wrong</b> — and your connected records may be
        incomplete. Don't treat either as a substitute for your official
        records or for professional medical judgment.</li>
      <li><b>Leaving:</b> you can do it yourself, right here, whenever you
        like. <b>Disconnect</b> stops new records arriving and keeps what's
        already there; <b>Delete</b> permanently removes the records
        themselves and tells you how many were deleted. The PHI-free audit
        trail of who accessed what is kept — a deletion shouldn't be able to
        erase the record of the access that came before it. Stuck? Email
        <a href="mailto:support@healthclaw.io">support@healthclaw.io</a>.</li>
    </ul>
    <p class="consent-fine">Full detail:
      <a href="{{ terms_url }}" target="_blank" rel="noopener">Terms</a> ·
      <a href="{{ privacy_url }}" target="_blank" rel="noopener">Privacy
        policy</a></p>
    <button type="button" class="btn-primary btn-block" id="consent-agree">
      I understand — connect my records</button>
    <button type="button" class="linkish" id="consent-cancel">Not now</button>
  </div>
</div>

<!-- New-agent modal -->
<div class="modal" id="agent-modal" hidden>
  <div class="modal-card">
    <h3>New agent</h3>
    <label class="field-label" for="a-name">Name</label>
    <input class="field" id="a-name" maxlength="48" placeholder="Juniper, Ada, Coach…">
    <span class="field-label">Voice</span>
    <div class="persona-grid">
      {% for key, p in personas.items() %}
      <label class="persona-card"><input type="radio" name="ag-persona" value="{{ key }}" {% if loop.first %}checked{% endif %}>
        <span class="persona-emoji">{{ p.emoji }}</span>
        <span class="persona-name">{{ p.name }}</span></label>
      {% endfor %}
    </div>
    <span class="field-label">Specialty</span>
    <select class="field" id="a-advisor">
      {% for adv in advisors %}
      {% if adv.available %}
      <option value="{{ adv.id }}">{{ adv.emoji }} {{ adv.name }} — {{ adv.blurb }}</option>
      {% else %}
      <option value="" disabled>{{ adv.emoji }} {{ adv.name }} — {{ adv.note }}</option>
      {% endif %}
      {% endfor %}
    </select>
    <span class="field-label">Records</span>
    <select class="field" id="a-conn">
      {% for c in connections %}<option value="{{ c.id }}">{{ c.label }} ({{ c.status }})</option>{% endfor %}
    </select>
    <div id="modal-err" class="form-error" hidden></div>
    <button type="button" class="btn-primary btn-block" id="create-agent">Create</button>
    <button type="button" class="linkish" id="close-modal">Cancel</button>
  </div>
</div>

<!-- Provider picker: one large tappable row per provider, filled in by
     home.js from the tile's data-providers. No numbers, no keyboard — the
     browser prompt this replaces is dead on several in-app mobile browsers. -->
<div class="modal sheet" id="provider-picker" role="dialog" aria-modal="true"
     aria-labelledby="picker-title" hidden>
  <div class="modal-card">
    <h3 id="picker-title">Which do you use?</h3>
    <div id="picker-rows"></div>
    <button type="button" class="linkish" id="picker-cancel">Not now</button>
  </div>
</div>

<!-- Pairing code card. What is shown in #pair-code is byte-identical to what
     Copy writes, so the press-and-hold fallback can't copy the wrong string. -->
<div class="modal" id="code-card" role="dialog" aria-modal="true"
     aria-labelledby="code-title" hidden>
  <div class="modal-card">
    <h3 id="code-title">Your pairing code</h3>
    <p id="code-instructions"></p>
    <div id="pair-code"></div>
    <button type="button" class="btn-secondary btn-block" id="copy-code">
      <span id="copy-state">Copy</span></button>
    <button type="button" class="btn-primary btn-block" id="code-done">Done</button>
  </div>
</div>

<!-- Delete confirmation. Same copy and the same typed-DELETE requirement as
     the prompt() it replaces — the friction is the point, only the container
     changed. #delete-confirm ships disabled; home.js re-checks on click too. -->
<div class="modal" id="delete-modal" role="dialog" aria-modal="true"
     aria-labelledby="delete-title" hidden>
  <div class="modal-card">
    <h3 id="delete-title">Delete these records?</h3>
    <p class="delete-warn">This permanently deletes the records in
      "<span id="delete-label"></span>".</p>
    <p class="delete-warn">The PHI-free audit trail (who accessed what) is kept
      as the record of what happened, and this deletion is added to it.</p>
    <label class="field-label" for="delete-input">Type DELETE to confirm:</label>
    <input class="field" id="delete-input" autocomplete="off"
           autocapitalize="characters" autocorrect="off" spellcheck="false">
    <button type="button" class="btn-primary btn-block" id="delete-confirm"
            disabled>Delete these records</button>
    <button type="button" class="linkish" id="delete-cancel">Cancel</button>
  </div>
</div>

<!-- Hidden file input reused by every "Upload records" button on `direct`
     connections. The button's click handler assigns itself as the
     current owner before triggering the picker. -->
<input type="file" id="upload-file" accept=".json,application/json,application/fhir+json" hidden>

{# `window.CARE = {telegramBot: ...}` used to be emitted here. Nothing reads
   it (home.js builds the deep link from the server response), and with the
   Telegram tile out of service for the beta (#536, D6) it only put the bot
   handle in the page source. #}
<script src="{{ url_for('static', filename='home.js') }}"></script>
{% endblock %}