{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Workflow Automation - Gvelo Enterprise Platform{% endblock %}
{% block body_class %}automation-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="{{ url_for('static', filename='automation.css') }}?v=dark-panels-20260519-2">
{% endblock %}
{% block content %}
<main class="automation-shell" data-automation-root>
  <section class="automation-band automation-header">
    <div>
      <p class="automation-kicker">Workflow Automation</p>
      <h1>Operational Orchestration</h1>
      <p class="automation-subtitle">Coordinate scheduled work, inventory safety, approvals, recovery, and operational alerts from one control surface.</p>
    </div>
    <div class="automation-actions">
      <button type="button" class="automation-button primary" data-automation-run>Run Cycle</button>
      <button type="button" class="automation-button" data-automation-coordinate>Coordinate</button>
      <button type="button" class="automation-button" data-automation-replay>Replay Offline</button>
    </div>
  </section>

  <section class="automation-band automation-metrics" aria-label="Automation health">
    <div>
      <span>Queued</span>
      <strong>{{ snapshot.queued_jobs }}</strong>
    </div>
    <div>
      <span>Open Alerts</span>
      <strong>{{ snapshot.open_alerts }}</strong>
    </div>
    <div>
      <span>Pending Review</span>
      <strong>{{ snapshot.pending_approvals }}</strong>
    </div>
    <div>
      <span>Failed</span>
      <strong>{{ snapshot.failed_jobs }}</strong>
    </div>
  </section>

  <section class="automation-band automation-command">
    <div>
      <span>Automation Health</span>
      <strong>{{ snapshot.command_center.health_score }}</strong>
    </div>
    <div class="automation-command-copy">
      {% for line in snapshot.command_center.trust_summary %}
        <p>{{ line }}</p>
      {% endfor %}
    </div>
  </section>

  <section class="automation-grid">
    <div class="automation-panel">
      <div class="automation-panel-head">
        <h2>Bottlenecks</h2>
        <span>Workflow slowdowns</span>
      </div>
      <div class="automation-list">
        {% for bottleneck in snapshot.command_center.bottlenecks %}
          <article class="automation-row">
            <div>
              <strong>{{ bottleneck.title }}</strong>
              <p>{{ bottleneck.recommendation }}</p>
            </div>
            <span class="automation-pill severity-{{ bottleneck.severity }}">{{ "%.0f"|format(bottleneck.score or 0) }}</span>
          </article>
        {% else %}
          <p class="automation-empty">No workflow bottlenecks are open.</p>
        {% endfor %}
      </div>
    </div>

    <div class="automation-panel">
      <div class="automation-panel-head">
        <h2>Predictions</h2>
        <span>Risks before they land</span>
      </div>
      <div class="automation-list">
        {% for prediction in snapshot.command_center.predictions %}
          <article class="automation-row">
            <div>
              <strong>{{ prediction.title }}</strong>
              <p>{{ prediction.recommendation }}</p>
            </div>
            <span class="automation-pill severity-medium">{{ "%.0f"|format(prediction.risk_score or 0) }}</span>
          </article>
        {% else %}
          <p class="automation-empty">No predictive risks are active.</p>
        {% endfor %}
      </div>
    </div>
  </section>

  <section class="automation-grid">
    <div class="automation-panel">
      <div class="automation-panel-head">
        <h2>Approvals</h2>
        <span>Human review preserved</span>
      </div>
      <div class="automation-list">
        {% for approval in snapshot.approvals %}
          <article class="automation-row">
            <div>
              <strong>{{ approval.action_type|replace('_', ' ')|title }}</strong>
              <p>{{ approval.reason or "Automation requested review before execution." }}</p>
            </div>
            <div class="automation-row-actions">
              {% if approval.status == "pending" %}
                <button type="button" data-approval-id="{{ approval.id }}" data-approval-decision="approved">Approve</button>
                <button type="button" data-approval-id="{{ approval.id }}" data-approval-decision="rejected">Reject</button>
              {% else %}
                <span class="automation-pill">{{ approval.status }}</span>
              {% endif %}
            </div>
          </article>
        {% else %}
          <p class="automation-empty">No pending review items.</p>
        {% endfor %}
      </div>
    </div>

    <div class="automation-panel">
      <div class="automation-panel-head">
        <h2>Alerts</h2>
        <span>Branch-aware risk signals</span>
      </div>
      <div class="automation-list">
        {% for alert in snapshot.alerts %}
          <article class="automation-row">
            <div>
              <strong>{{ alert.title }}</strong>
              <p>{{ alert.message }}</p>
            </div>
            <span class="automation-pill severity-{{ alert.severity }}">{{ alert.severity }}</span>
          </article>
        {% else %}
          <p class="automation-empty">No open automation alerts.</p>
        {% endfor %}
      </div>
    </div>
  </section>

  <section class="automation-grid">
    <div class="automation-panel">
      <div class="automation-panel-head">
        <h2>Recent Jobs</h2>
        <span>Priority-safe queue</span>
      </div>
      <div class="automation-table-wrap">
        <table class="automation-table">
          <thead>
            <tr>
              <th>Workflow</th>
              <th>Priority</th>
              <th>Status</th>
              <th>Attempts</th>
            </tr>
          </thead>
          <tbody>
            {% for job in snapshot.jobs %}
              <tr>
                <td>{{ job.job_type|replace('_', ' ')|title }}</td>
                <td>{{ job.priority|replace('_', ' ')|title }}</td>
                <td>{{ job.status }}</td>
                <td>{{ job.attempts }}</td>
              </tr>
            {% else %}
              <tr><td colspan="4">No automation jobs yet.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <div class="automation-panel">
      <div class="automation-panel-head">
        <h2>Observability</h2>
        <span>Low-overhead telemetry</span>
      </div>
      <div class="automation-list compact">
        {% for metric in snapshot.metrics %}
          <article class="automation-row">
            <div>
              <strong>{{ metric.metric_name|replace('_', ' ')|title }}</strong>
              <p>{{ "%.2f"|format(metric.avg_value or 0) }} average across {{ metric.samples }} sample(s)</p>
            </div>
          </article>
        {% else %}
          <p class="automation-empty">Metrics will appear after the first automation cycle.</p>
        {% endfor %}
      </div>
    </div>
  </section>

  <section class="automation-grid">
    <div class="automation-panel">
      <div class="automation-panel-head">
        <h2>Workflow Memory</h2>
        <span>Learned operating patterns</span>
      </div>
      <div class="automation-list compact">
        {% for memory in snapshot.command_center.memory %}
          <article class="automation-row">
            <div>
              <strong>{{ memory.subject_key|replace('_', ' ')|title }}</strong>
              <p>{{ memory.summary }}</p>
            </div>
            <span class="automation-pill">{{ "%.0f"|format((memory.confidence or 0) * 100) }}%</span>
          </article>
        {% else %}
          <p class="automation-empty">Workflow memory will build as automations run.</p>
        {% endfor %}
      </div>
    </div>

    <div class="automation-panel">
      <div class="automation-panel-head">
        <h2>Timeline</h2>
        <span>Audit-friendly evolution</span>
      </div>
      <div class="automation-list compact">
        {% for item in snapshot.timeline %}
          <article class="automation-row">
            <div>
              <strong>{{ item.title }}</strong>
              <p>{{ item.message or item.event_type|replace('_', ' ')|title }}</p>
            </div>
            <span class="automation-pill severity-{{ item.severity }}">{{ item.severity }}</span>
          </article>
        {% else %}
          <p class="automation-empty">Timeline events will appear after automation activity.</p>
        {% endfor %}
      </div>
    </div>
  </section>
</main>

<script src="{{ url_for('static', filename='automation-offline.js') }}"></script>
<script>
  window.GVELO_AUTOMATION = {
    runUrl: "{{ url_for('automation.automation_run_api') }}",
    coordinateUrl: "{{ url_for('automation.automation_coordinate_api') }}",
    replayUrl: "{{ url_for('automation.automation_offline_replay_api') }}",
    approvalUrl: "/api/automation/approvals/"
  };
  window.GVELO_AUTOMATION_STAGE_URL = "{{ url_for('automation.automation_offline_stage_api') }}";
</script>
<script src="{{ url_for('static', filename='automation.js') }}"></script>
{% endblock %}