{% extends 'ls_portal/base.html' %}
{% block body_class %}chat-page{% endblock %}
{% block content %}
<style>
  .approvals-scroll {
    display:grid;
    gap:8px;
    align-content:start;
    padding-bottom:8px;
  }
  .approval-summary {
    display:grid;
    gap:6px;
    grid-template-columns:repeat(5, minmax(0, 1fr));
  }
  .approval-stat {
    padding:10px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(255,255,255,.03);
  }
  .approval-stat-value {
    font-size:22px;
    font-weight:700;
  }
  .approval-stat-label {
    font-size:11px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .approval-list {
    display:grid;
    gap:8px;
  }
  .approval-filters {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
  }
  .approval-filter {
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid var(--line);
    border-radius:999px;
    padding:8px 12px;
    text-decoration:none;
    color:inherit;
    background:rgba(255,255,255,.03);
    font-size:13px;
  }
  .approval-filter.is-active {
    border-color:rgba(245,212,139,.28);
    background:rgba(90,65,10,.24);
    color:#f9e8b8;
  }
  .approval-card {
    padding:10px;
    display:grid;
    gap:8px;
  }
  .approval-head {
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .approval-title {
    font-size:16px;
    font-weight:700;
  }
  .approval-chip-row {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }
  .approval-chip {
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    border:1px solid var(--line);
    padding:4px 8px;
    font-size:11px;
    color:var(--muted);
    background:rgba(255,255,255,.03);
  }
  .approval-chip.is-pending {
    color:#f9e8b8;
    border-color:rgba(245,212,139,.28);
    background:rgba(90,65,10,.24);
  }
  .approval-chip.is-approved,
  .approval-chip.is-completed {
    color:#dff7e4;
    border-color:rgba(144,238,144,.24);
    background:rgba(29,78,45,.22);
  }
  .approval-chip.is-denied,
  .approval-chip.is-failed {
    color:#ffd7d7;
    border-color:rgba(255,143,143,.24);
    background:rgba(120,25,25,.24);
  }
  .approval-meta {
    display:grid;
    gap:6px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    font-size:13px;
  }
  .approval-note {
    white-space:pre-wrap;
    color:var(--muted);
    font-size:13px;
  }
  .approval-form {
    display:grid;
    gap:8px;
  }
  .approval-actions {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }
  @media (max-width:720px) {
    .approval-summary,
    .approval-meta {
      grid-template-columns:1fr 1fr;
    }
  }
</style>

<section class="chat-shell">
  <header class="chat-header header app-topbar">
    <div class="slim-header-row">
      <div class="slim-title-wrap">
        <div class="kicker">Haigh Environmental Executive Assistant</div>
        <h1 class="title">Approvals</h1>
        <div class="subtitle">Luke approval queue for external write actions.</div>
      </div>
      <details class="header-menu">
        <summary class="burger-button" aria-label="Open menu">☰</summary>
        <nav class="menu-panel" aria-label="Operator navigation">
          <a href="{{ url_for('ls_portal_bp.home') }}">Chat</a>
          <a href="{{ url_for('ls_portal_bp.plans') }}">To-Dos</a>
          <a class="is-active" href="{{ url_for('ls_portal_bp.approvals') }}">Approvals{% if approval_summary.pending_approval_count %} <span class="badge-inline">{{ approval_summary.pending_approval_count }}</span>{% endif %}</a>
          <a href="{{ url_for('ls_portal_bp.ops') }}">Ops</a>
          {% if current_account.can_manage_accounts or current_account.is_superuser %}
            <a href="{{ url_for('ls_portal_bp.accounts') }}">Accounts</a>
          {% endif %}
        </nav>
      </details>
    </div>
  </header>

  <section class="thread-pane">
    <section class="chat-thread approvals-scroll">
      <section class="panel compact-panel">
        <div class="approval-summary">
          <div class="approval-stat"><div class="approval-stat-value">{{ approval_summary.pending_approval_count }}</div><div class="approval-stat-label">Pending</div></div>
          <div class="approval-stat"><div class="approval-stat-value">{{ approval_summary.approved_count }}</div><div class="approval-stat-label">Approved</div></div>
          <div class="approval-stat"><div class="approval-stat-value">{{ approval_summary.completed_count }}</div><div class="approval-stat-label">Completed</div></div>
          <div class="approval-stat"><div class="approval-stat-value">{{ approval_summary.denied_count }}</div><div class="approval-stat-label">Denied</div></div>
          <div class="approval-stat"><div class="approval-stat-value">{{ approval_summary.failed_count }}</div><div class="approval-stat-label">Failed</div></div>
        </div>
        <div class="muted" style="margin-top:10px;">
          Current approver: {{ approval_actor.name or approval_actor.username or 'Unknown' }}.
          This screen is backed by the external write guardrail log used before Monolith writes into connected systems such as Synchroteam.
        </div>
        <div class="approval-filters">
          <a class="approval-filter {% if active_view == 'pending' %}is-active{% endif %}" href="{{ url_for('ls_portal_bp.approvals', view='pending') }}">
            Review queue
            <span class="badge-inline">{{ approval_summary.pending_approval_count }}</span>
          </a>
          <a class="approval-filter {% if active_view == 'processed' %}is-active{% endif %}" href="{{ url_for('ls_portal_bp.approvals', view='processed') }}">
            Processed
            <span class="badge-inline">{{ approval_summary.approved_count + approval_summary.completed_count + approval_summary.denied_count + approval_summary.failed_count }}</span>
          </a>
        </div>
      </section>

      {% if active_view == 'processed' %}
        <section class="panel compact-panel">
          <div class="kicker">Processed requests</div>
          <div class="approval-list" style="margin-top:8px;">
            {% for row in processed_events %}
              <article class="approval-card" style="padding:0; border:0; background:transparent;">
                <div class="approval-head">
                  <div>
                    <div class="approval-title" style="font-size:14px;">{{ row.operation_name }} · {{ row.system_name }}</div>
                    <div class="muted">Request #{{ row.id }} · {{ row.source_name }}</div>
                  </div>
                  <div class="approval-chip-row">
                    <span class="approval-chip {% if row.status == 'approved' %}is-approved{% elif row.status == 'completed' %}is-completed{% elif row.status == 'approval_denied' %}is-denied{% elif row.status == 'failed' %}is-failed{% endif %}">
                      {{ row.status.replace('_', ' ') }}
                    </span>
                  </div>
                </div>
                <div class="approval-meta">
                  <div><strong>Actor:</strong> {{ row.actor_name or row.actor_username or row.triggered_by or '-' }}</div>
                  <div><strong>Updated:</strong> {{ row.updated_at or row.created_at }}</div>
                </div>
              </article>
            {% else %}
              <div class="muted">No processed approval history yet.</div>
            {% endfor %}
          </div>
        </section>
      {% else %}
        <section class="approval-list">
          {% if pending_events %}
            {% for row in pending_events %}
              <article class="panel approval-card">
                <div class="approval-head">
                  <div>
                    <div class="approval-title">{{ row.operation_name }} · {{ row.system_name }}</div>
                    <div class="muted">Request #{{ row.id }} · {{ row.source_name }}</div>
                  </div>
                  <div class="approval-chip-row">
                    <span class="approval-chip is-pending">Pending approval</span>
                    <span class="approval-chip">{{ row.record_count_estimate or 0 }} records</span>
                  </div>
                </div>

                <div class="approval-meta">
                  <div><strong>Triggered by:</strong> {{ row.actor_name or row.actor_username or row.triggered_by or '-' }}</div>
                  <div><strong>Requested:</strong> {{ row.approval_requested_at or row.created_at }}</div>
                  <div><strong>Method:</strong> {{ row.http_method or '-' }}</div>
                  <div><strong>Endpoint:</strong> {{ row.target_endpoint or '-' }}</div>
                </div>

                {% if row.notes %}
                  <div class="approval-note">{{ row.notes }}</div>
                {% endif %}

                <form method="post" action="{{ url_for('ls_portal_bp.approval_action', event_id=row.id) }}" class="approval-form">
                  <input type="text" name="note" maxlength="255" placeholder="Optional approval note">
                  <div class="approval-actions">
                    <button type="submit" name="action" value="approve">Approve</button>
                    <button type="submit" name="action" value="deny" class="secondary">Deny</button>
                    <a class="button secondary" href="{{ url_for('tools.external_write_guardrails', event_id=row.id) }}">Open audit</a>
                  </div>
                </form>
              </article>
            {% endfor %}
          {% else %}
            <section class="panel compact-panel">
              <div class="muted">No pending approval requests.</div>
            </section>
          {% endif %}
        </section>
      {% endif %}
    </section>
  </section>
</section>
{% endblock %}