{% extends "settings_base.html" %}
{% block settings_content %}
<section class="settings-grid v05-grid">
  <article class="card diagnostics-card health-card">
    <div class="card-header"><div><h2>Provider Health Overview</h2><p>Read-only status for configured providers.</p></div><button class="button ghost" type="button" data-provider-health>Run all health checks</button></div>
    <div class="table-shell"><table class="data-table" data-provider-health-table><thead><tr><th scope="col">Provider</th><th scope="col">Last check</th><th scope="col">Latency</th><th scope="col">Auth</th><th scope="col">Result</th></tr></thead><tbody data-settings-provider-health><tr><td colspan="5" class="empty">Loading provider health…</td></tr></tbody></table></div>
  </article>

  <form class="card form-card" method="post" action="/admin/settings/test-upstream" data-settings-action="diagnostics">
    <div class="card-header"><div><h2>Test Upstream</h2><p>Send sample chat, image, or tool-call payloads.</p></div></div>
    <div class="form-grid two-col">
      <label class="form-field"><span>Model</span><input name="model" value="{{ test_model | default('gpt-test', true) }}" required></label>
      <label class="form-field"><span>Prompt</span><textarea name="prompt" rows="4" required>{{ test_prompt | default('Reply with a short upstream connectivity check.', true) }}</textarea></label>
    </div>
    <div class="button-row">
      <button class="button primary" type="submit" name="test_kind" value="simple">Simple message</button>
      <button class="button ghost" type="submit" name="test_kind" value="image">Image message</button>
      <button class="button ghost" type="submit" name="test_kind" value="tools">Function call</button>
    </div>
    <div class="result-panel" data-settings-diagnostic-result>
      {% if test_result %}
      <strong>{{ "Diagnostic succeeded" if test_result.ok else "Diagnostic failed" }}</strong>
      <span>{{ test_result.kind }} · {{ test_result.status_code | default("error", true) }} · {{ test_result.model_route | default("model fallback" if test_result.upstream_model else "pass-through upstream", true) }}</span>
      <code>{{ test_result.url }}</code>
      {% if test_result.error %}<p class="error-text">{{ test_result.error }}</p>{% else %}<pre class="code compact-code">{{ test_result.body }}</pre>{% endif %}
      {% else %}<p class="muted">Test results appear here.</p>{% endif %}
    </div>
    <p class="form-message" data-form-message aria-live="polite"></p>
  </form>

  <article class="card diagnostics-card">
    <div class="card-header"><div><h2>Route Simulator</h2><p>Resolve a model name without making an upstream call.</p></div></div>
    <form class="inline-tool-form" data-route-simulator>
      <label class="form-field"><span>Incoming model</span><input name="model" value="gpt-test" required></label>
      <button class="button primary" type="submit">Run simulation</button>
    </form>
    <div class="result-panel" data-route-simulator-result><p class="muted">Simulation results appear here.</p></div>
  </article>
</section>
{% endblock %}