{% extends "base.html" %}
{% block title %}Pipelines — TraceBi{% endblock %}

{% block content %}
<div class="page-title">Pipelines</div>
<p class="page-sub">Medallion pipeline runners — bronze → silver → gold layers with run history.</p>

{% if pipeline_names %}
<div x-data="pipelinesApp()" x-init="load()" x-cloak>

  <div x-show="loading" style="padding:48px; text-align:center;">
    <span class="spinner"></span>
  </div>

  <template x-if="!loading">
    <div>
      <template x-for="pipeline in pipelines" :key="pipeline.pipeline">
        <div class="card" style="margin-bottom:20px;">
          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;">
            <div class="card-title" style="margin:0; border:none; padding:0;"
                 x-text="pipeline.pipeline"></div>
            <span class="badge badge-blue" x-text="pipeline.layers.length + ' layers'"></span>
          </div>
          <table>
            <thead>
              <tr>
                <th>Layer</th><th>Type</th><th>Schedule</th>
                <th>Depends On</th><th>Last Status</th><th>Last Run</th><th></th>
              </tr>
            </thead>
            <tbody>
              <template x-for="layer in pipeline.layers" :key="layer.name">
                <tr>
                  <td><strong x-text="layer.name"></strong></td>
                  <td>
                    <span class="badge"
                          :class="{
                            'badge-amber': layer.type === 'bronze',
                            'badge-gray':  layer.type === 'silver',
                            'badge-blue':  layer.type === 'gold',
                          }"
                          x-text="layer.type"></span>
                  </td>
                  <td><code x-text="layer.schedule ?? 'on-demand'"></code></td>
                  <td x-text="layer.depends_on ?? '—'"></td>
                  <td>
                    <template x-if="layer.last_status">
                      <span class="badge"
                            :class="layer.last_status === 'success' ? 'badge-green' : 'badge-red'"
                            x-text="layer.last_status"></span>
                    </template>
                    <template x-if="!layer.last_status">
                      <span class="badge badge-gray">never run</span>
                    </template>
                  </td>
                  <td x-text="layer.last_run ? layer.last_run.slice(0,19).replace('T',' ') : '—'"
                      style="color:var(--muted); font-size:12px;"></td>
                  <td>
                    <button class="btn btn-outline btn-sm"
                            :disabled="running === layer.name"
                            @click="runLayer(pipeline.pipeline, layer.name)">
                      <template x-if="running === layer.name">
                        <span class="spinner" style="width:11px;height:11px;"></span>
                      </template>
                      <template x-if="running !== layer.name">
                        <span>▶ Run</span>
                      </template>
                    </button>
                  </td>
                </tr>
              </template>
            </tbody>
          </table>
        </div>
      </template>
    </div>
  </template>

  <template x-if="error">
    <div class="alert alert-err" x-text="error"></div>
  </template>
</div>

{% else %}
<div class="card">
  <div class="empty">
    <div class="empty-icon">⧖</div>
    <p>No pipelines registered yet.</p>
  </div>
</div>

<div class="card">
  <div class="card-title">Adding a Pipeline</div>
  <p style="color:var(--muted); margin-bottom:12px; line-height:1.7;">
    Create a <code>PipelineRunner</code> with medallion layers, then register it:
  </p>
  <div class="code-block">
<span style="color:#7dcfff">from</span> tracebi.pipeline.runner <span style="color:#7dcfff">import</span> PipelineRunner<br>
<span style="color:#7dcfff">from</span> web.api.registry <span style="color:#7dcfff">import</span> registry<br>
<br>
runner = PipelineRunner(db_url=<span style="color:#9ece6a">"sqlite:///data/tracebi.db"</span>)<br>
runner.register(bronze_layer, name=<span style="color:#9ece6a">"orders_bronze"</span>, schedule=<span style="color:#9ece6a">"0 * * * *"</span>)<br>
runner.register(silver_layer, name=<span style="color:#9ece6a">"orders_silver"</span>, depends_on=<span style="color:#9ece6a">"orders_bronze"</span>)<br>
<br>
registry.add_pipeline(<span style="color:#9ece6a">"main"</span>, runner)
  </div>
</div>
{% endif %}

<script>
function pipelinesApp() {
  return {
    pipelines: [],
    loading: true,
    running: null,
    error: null,

    async load() {
      try {
        const res = await fetch('/api/pipelines');
        this.pipelines = await res.json();
      } catch (e) {
        this.error = 'Failed to load pipelines: ' + e.message;
      } finally {
        this.loading = false;
      }
    },

    async runLayer(pipeline, layer) {
      this.running = layer;
      try {
        const res = await fetch(`/api/pipelines/${pipeline}/layers/${layer}/run`, { method: 'POST' });
        if (!res.ok) {
          const err = await res.json();
          this.error = err.detail ?? 'Run failed';
        } else {
          await this.load();
        }
      } catch (e) {
        this.error = e.message;
      } finally {
        this.running = null;
      }
    },
  };
}
</script>
{% endblock %}