{{define "api"}}
<style>
.ai-box { background: var(--bg-secondary); border-radius: 8px; padding: 24px; margin-bottom: 24px; }
.ai-box h2 { font-size: 1.1rem; margin: 0 0 16px 0; color: var(--accent); }
.ai-box p { margin: 8px 0; font-size: 0.9rem; }
.ai-box code { background: #2d2d2d; color: #f8f8f2; padding: 2px 6px; border-radius: 4px; font-size: 0.85rem; }
.ai-box pre { background: #2d2d2d; color: #f8f8f2; padding: 12px 16px; border-radius: 6px; font-size: 0.85rem; overflow-x: auto; margin: 8px 0; }
.guid-display { background: #2d2d2d; color: #6c6; padding: 8px 12px; border-radius: 6px; font-family: monospace; font-size: 0.9rem; margin: 8px 0; display: inline-block; }
.endpoint { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin: 16px 0; }
.endpoint .method { color: #22863a; font-weight: 600; font-size: 0.85rem; }
.endpoint .url { color: var(--accent); font-family: monospace; font-size: 0.9rem; }
.endpoint p { margin: 8px 0 0 0; font-size: 0.9rem; color: var(--text-muted); }
.note { background: #fef3cd; border-radius: 6px; padding: 12px 16px; margin: 16px 0; font-size: 0.9rem; }
</style>

<div class="page-container" style="max-width: 720px;">
  <div class="page-card">
    <h1>API</h1>
    <p class="intro">Access your health dossier data programmatically — or let AI do it for you.</p>
  </div>

  {{if .Dossier}}
  <div class="ai-box">
    <h2>{{.T.api_token}}</h2>
    {{if .APIToken}}
    <p>{{.T.api_token_use}}</p>
    <div style="display: flex; align-items: center; gap: 8px; margin: 8px 0;">
      <input type="text" id="api-token" value="{{.APIToken}}" readonly style="flex: 1; background: #2d2d2d; color: #6c6; padding: 8px 12px; border-radius: 6px; font-family: monospace; font-size: 0.9rem; border: none;">
      <button onclick="copyToken()" class="btn btn-small" style="white-space: nowrap;">{{.T.copy}}</button>
    </div>
    <p style="color: var(--text-muted); font-size: 0.85rem;">{{.T.api_token_warning}}</p>
    <form method="POST" action="/api/token/regenerate" style="margin-top: 16px;">
      <button type="submit" class="btn btn-small btn-secondary" onclick="return confirm('{{.T.api_token_regenerate_confirm}}')">{{.T.api_token_regenerate}}</button>
    </form>
    {{else}}
    <p>{{.T.api_token_none}}</p>
    <form method="POST" action="/api/token/generate" style="margin-top: 16px;">
      <button type="submit" class="btn btn-primary">{{.T.api_token_generate}}</button>
    </form>
    {{end}}
  </div>
  <script>
  function copyToken() {
    var input = document.getElementById('api-token');
    input.select();
    document.execCommand('copy');
    var btn = event.target;
    var original = btn.textContent;
    btn.textContent = '✓';
    setTimeout(function() { btn.textContent = original; }, 1500);
  }
  </script>
  {{end}}

  <div class="page-card">
    <h2>{{.T.api_authentication}}</h2>
    <p>{{.T.api_auth_instructions}}</p>
    <pre style="background: #2d2d2d; color: #f8f8f2; padding: 12px 16px; border-radius: 6px; font-size: 0.85rem; margin: 16px 0;">Authorization: Bearer YOUR_API_TOKEN</pre>
  </div>

  <div class="page-card">
    <h2>Endpoints</h2>

    <h3>Dossiers</h3>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/dossiers</span>
      <p>List all dossiers accessible to this account (your own + any shared with you).</p>
    </div>

    <h3>Imaging</h3>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/dossiers/{id}/entries?category=imaging</span>
      <p>List all imaging studies in a dossier. Returns study ID, date, description, and series count.</p>
    </div>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/entries/{study_id}/children</span>
      <p>List series in a study. Optional: <code>?filter=SAG</code> or <code>?filter=T1</code> to filter by description.</p>
    </div>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/entries/{series_id}/children</span>
      <p>List slices with position data (mm coordinates, orientation, pixel spacing).</p>
    </div>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/entries/{slice_id}?detail=full</span>
      <p>Get slice image as PNG. Optional: <code>&amp;ww=WIDTH&amp;wc=CENTER</code> for windowing.</p>
    </div>

    <h3>Genome</h3>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/dossiers/{id}/entries?category=genome</span>
      <p>List genome variant categories: medication, cardiovascular, metabolism, fertility, traits, longevity.</p>
    </div>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/dossiers/{id}/genome?search=MTHFR</span>
      <p>Query genome variants. Optional filters: <code>&amp;category=medication</code>, <code>&amp;rsids=rs1234,rs5678</code>, <code>&amp;min_magnitude=2</code></p>
    </div>

    <h3>Labs</h3>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/dossiers/{id}/labs/tests</span>
      <p>List all available lab test names for a dossier.</p>
    </div>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/dossiers/{id}/labs/results?names=TSH,T4</span>
      <p>Get lab results. Required: <code>&amp;names=</code> (comma-separated). Optional: <code>&amp;from=2024-01-01</code>, <code>&amp;to=2024-12-31</code>, <code>&amp;latest=true</code></p>
    </div>

    <div class="note">
      <strong>Text Format:</strong> Add <code>&amp;format=text</code> to any endpoint for AI-friendly plain text output instead of JSON.
    </div>
  </div>

  <div class="page-card">
    <h2>Example</h2>
    <pre style="background: #2d2d2d; color: #f8f8f2; padding: 16px; border-radius: 8px; font-size: 0.85rem; overflow-x: auto;"># List your dossiers
curl -H "Authorization: Bearer YOUR_TOKEN" \
  https://inou.com/api/v1/dossiers

# List imaging studies
curl -H "Authorization: Bearer YOUR_TOKEN" \
  https://inou.com/api/v1/dossiers/DOSSIER_ID/entries?category=imaging

# Query genome variants
curl -H "Authorization: Bearer YOUR_TOKEN" \
  https://inou.com/api/v1/dossiers/DOSSIER_ID/genome?search=MTHFR</pre>
  </div>

  {{template "footer"}}
</div>
{{end}}