{% extends "base.html" %}
{% block title %}Settings - Supavision{% endblock %}
{% block content %}
<div class="page-header">
  <div class="page-header-left">
    <h2>Settings</h2>
    <span class="page-subtitle">API keys, notifications, and system configuration</span>
  </div>
</div>

{# ── Claude CLI Status (outside card — top-level alert) ── #}
{% if system_info.claude_version %}
<div class="alert alert--success mb-4">
  <strong>✓ Claude CLI installed</strong> &mdash; {{ system_info.claude_version }}
  <span class="text-sm text-muted ml-2">Infrastructure monitoring is fully operational.</span>
</div>
{% else %}
<div class="alert alert--warning mb-4">
  <strong>⚠ Claude CLI not installed</strong> &mdash; Infrastructure monitoring unavailable.
</div>
<div class="settings-section mb-4">
  <h4>Install Claude Code</h4>
  <p class="text-sm text-muted mb-4">Required for infrastructure discovery and health checks.</p>
  <div class="guidance-panel">
    <h4>1. Install</h4>
    <pre class="code-copy">npm install -g @anthropic-ai/claude-code<button type="button" class="copy-btn" onclick="navigator.clipboard.writeText('npm install -g @anthropic-ai/claude-code')">Copy</button></pre>
    <h4 class="mt-4">2. Authenticate</h4>
    <pre class="code-copy">claude auth login<button type="button" class="copy-btn" onclick="navigator.clipboard.writeText('claude auth login')">Copy</button></pre>
  </div>
  <div class="mt-4">
    <button class="btn btn-outline btn-sm"
            hx-post="/settings/check-claude" hx-target="#claude-check-result" hx-swap="innerHTML"
            data-action="check-claude">Detect CLI</button>
    <span id="claude-check-result" class="text-sm ml-2"></span>
  </div>
</div>
{% endif %}

{# ── System Info ── #}
<div class="settings-section">
  <h4>System Info</h4>
  <div class="info-grid">
    <div class="info-item">
      <span class="text-muted text-sm">Database</span>
      <span>{{ system_info.db_size }}</span>
    </div>
    <div class="info-item">
      <span class="text-muted text-sm">Resources</span>
      <span>{{ system_info.resource_count }}</span>
    </div>
  </div>
</div>

{# ── API Keys ── #}
<div class="settings-section">
  <div class="section-header-row">
    <div>
      <h4 class="mb-1">API Keys</h4>
      <p class="text-sm text-muted">Authenticate requests to <code>/api/v1/*</code> via the <code>x-api-key</code> header.</p>
    </div>
    <button class="btn btn-sm" onclick="document.getElementById('new-key-form').classList.toggle('is-open')">Generate New Key</button>
  </div>

  {# ── New key creation panel (hidden until button clicked) ── #}
  <div id="new-key-form" class="wizard-card mb-4 collapsible {{ 'is-open' if new_key else '' }}">
    {% if new_key %}
    <h4>API Key Created</h4>
    <div class="alert alert--warning mt-2">
      <strong>Copy this key now.</strong> It will not be shown again.
    </div>
    <div class="guidance-panel mt-2">
      <pre class="code-copy text-base">{{ new_key }}<button type="button" class="copy-btn" onclick="navigator.clipboard.writeText('{{ new_key }}')">Copy</button></pre>
    </div>
    <p class="text-sm text-muted mt-2">
      Example: <code>curl -H "x-api-key: {{ new_key[:12] }}..." {{ request.url.scheme }}://{{ request.url.hostname }}/api/v1/health</code>
    </p>
    {% else %}
    <h4>Generate New API Key</h4>
    <p class="text-sm text-muted mt-1 mb-4">Give your key a descriptive label so you can identify it later.</p>
    <form method="post" action="/settings/api-keys">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <div class="form-group">
        <label class="form-label" for="key_label">Label <span class="text-muted">(required)</span></label>
        <input class="form-input" type="text" id="key_label" name="label" required
               placeholder="e.g. CI pipeline, monitoring script" maxlength="50"
               class="constrained-sm">
        <span class="form-hint">A short description to help you identify this key later.</span>
      </div>
      <div class="mt-4 inline-actions">
        <button type="submit" class="btn">Generate Key</button>
        <button type="button" class="btn btn-outline" onclick="document.getElementById('new-key-form').classList.remove('is-open')">Cancel</button>
      </div>
    </form>
    {% endif %}
  </div>

  {# ── Existing keys table ── #}
  {% if api_keys %}
  <table class="table">
    <thead>
      <tr><th>Label</th><th>Created</th><th>Last used</th><th>Status</th><th></th></tr>
    </thead>
    <tbody>
      {% for k in api_keys %}
      <tr>
        <td>{{ k.label or '(no label)' }}</td>
        <td class="text-sm text-muted"><span data-timestamp="{{ k.created_at }}">{{ k.created_at }}</span></td>
        <td class="text-sm text-muted">{% if k.last_used_at %}<span data-timestamp="{{ k.last_used_at }}">{{ k.last_used_at }}</span>{% else %}Never{% endif %}</td>
        <td>
          {% if k.revoked %}
          <span class="badge badge--critical">Revoked</span>
          {% else %}
          <span class="badge badge--healthy">Active</span>
          {% endif %}
        </td>
        <td>
          {% if not k.revoked %}
          <button class="btn btn-sm btn-outline btn-danger"
                  hx-post="/settings/api-keys/{{ k.id }}/revoke"
                  hx-target="closest tr"
                  hx-swap="outerHTML"
                  data-confirm="Revoke this API key? This cannot be undone."
                  data-action="revoke">
            Revoke
          </button>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="text-muted text-sm">No API keys yet. Generate one to access the REST API.</p>
  {% endif %}
</div>

{# ── Notification History ── #}
<div class="settings-section">
  <h4>Notification History</h4>
  {% if notifications %}
  <table class="table">
    <thead>
      <tr><th>Time</th><th>Channel</th><th>Resource</th><th>Severity</th><th>Status</th></tr>
    </thead>
    <tbody>
      {% for n in notifications %}
      <tr>
        <td class="text-sm text-muted"><span data-timestamp="{{ n.created_at }}">{{ n.created_at }}</span></td>
        <td>{{ n.channel }}</td>
        <td class="text-sm">{{ n.resource_name or n.resource_id[:8] }}</td>
        <td><span class="badge badge--{{ n.severity }}">{{ n.severity }}</span></td>
        <td>
          {% if n.status == 'sent' %}
          <span class="badge badge--healthy">sent</span>
          {% else %}
          <span class="badge badge--critical">failed</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="text-muted">No notifications sent yet. Configure a Slack webhook on a resource to receive alerts.</p>
  {% endif %}
</div>
{% endblock %}