{% extends "base.html" %}
{% block content %}
  <h1>My account</h1>
  <p class="muted">{{ user.email }}</p>

  {% if record and record.enabled %}
    <div class="banner ok">✓ Your account is <strong>approved</strong>. Once your credentials are set below, the MCP connector will work.</div>
  {% else %}
    <div class="banner warn">⏳ Your account is <strong>pending admin approval</strong>. You can save your credentials now — they'll take effect once an admin approves you.</div>
  {% endif %}

  {% if flash %}
    <div class="banner {{ 'ok' if flash_ok else 'err' }}">{{ flash }}</div>
  {% endif %}

  <h2>Intervals.icu credentials</h2>
  <p>
    Athlete ID: <code>{{ record.athlete_id if record and record.athlete_id else '— not set —' }}</code><br>
    API key: {% if record and record.api_key_enc %}<code>•••••••• set</code>{% else %}<code>— not set —</code>{% endif %}
  </p>
  <p class="muted">Find these in Intervals.icu → Settings → Developer. Your athlete ID looks like <code>i123456</code>.</p>

  <form method="post" action="{{ base }}/account">
    <label for="athlete_id">Athlete ID</label>
    <input type="text" id="athlete_id" name="athlete_id" value="{{ record.athlete_id or '' if record else '' }}" placeholder="i123456" required>
    <label for="api_key">API key</label>
    <input type="password" id="api_key" name="api_key" placeholder="paste your API key" required autocomplete="off">
    <button type="submit">Save &amp; test connection</button>
  </form>

  <h2>Connect Claude</h2>
  <p>Add a custom connector in Claude pointing at this URL:</p>
  <p>
    <code id="mcp-url">{{ mcp_url }}</code>
    <button type="button" class="secondary" style="margin-top:0;padding:.2rem .6rem;font-size:.85rem"
            onclick="copyMcpUrl(this)">Copy</button>
  </p>

  <p class="banner warn">
    <strong>Name the connector without a dot.</strong> Use something like
    <code>intervals</code> &mdash; <em>not</em> <code>intervals.icu</code>.
    Claude Desktop and mobile currently don&rsquo;t support a <code>.</code> in the
    connector name, and it will stop the tools from loading.
  </p>

  <p>Step by step:</p>
  <ol>
    <li>In Claude, open <strong>Settings &rarr; Connectors</strong>
        (on claude.ai this may be <strong>Customize &rarr; Connectors</strong>).</li>
    <li>Click <strong>Add custom connector</strong>.</li>
    <li><strong>Name</strong> it <code>intervals</code> &mdash; letters only, <strong>no dot</strong>.</li>
    <li><strong>URL</strong>: paste the address above (use <strong>Copy</strong>).</li>
    <li>Click <strong>Add</strong>, then sign in with Google when prompted.</li>
  </ol>

  <script>
    function copyMcpUrl(btn) {
      const url = document.getElementById("mcp-url").textContent.trim();
      const done = () => {
        const orig = btn.textContent;
        btn.textContent = "Copied ✓";
        setTimeout(() => { btn.textContent = orig; }, 1500);
      };
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(url).then(done).catch(() => prompt("Copy this URL:", url));
      } else {
        prompt("Copy this URL:", url);
      }
    }
  </script>
{% endblock %}