{% extends "base.html" %}

{% block title %}Piply Dashboard{% endblock %}

{% block content %}
<div class="page-grid">
    <section class="hero">
        <div class="eyebrow">Lightweight DAG orchestration</div>
        <h1 class="hero-headline">Run task-based pipelines with a <span>clean control plane</span>.</h1>
        <p class="hero-copy">
            Piply now models each pipeline as a lightweight flow of tasks, keeps the UI focused on execution clarity,
            and stays small enough to evolve without dragging in a heavy orchestration stack.
        </p>
        <div class="hero-actions">
            <a class="button primary" href="/pipelines">Browse pipelines</a>
            <a class="button secondary" href="/execution-matrix">Open matrix</a>
            <a class="button ghost" href="/logs">Search logs</a>
        </div>
        <div class="hero-meta" style="margin-top:18px;">
            <span class="meta-pill">config {{ project.config_path }}</span>
            <span class="meta-pill">workspace {{ project.workspace }}</span>
            <span class="meta-pill">heartbeat {{ scheduler.heartbeat or 'waiting for first tick' }}</span>
            <span class="meta-pill">queue {{ scheduler.queue_depth or '0' }}</span>
            <span class="meta-pill">sensors {{ scheduler.sensor_count or '0' }}</span>
        </div>
    </section>

    <section class="metrics">
        <article class="metric-card">
            <div class="metric-label">Total pipelines</div>
            <div class="metric-value">{{ stats.total_pipelines }}</div>
            <div class="metric-footnote">{{ stats.scheduled_pipelines }} with active schedules</div>
        </article>
        <article class="metric-card">
            <div class="metric-label">Total runs</div>
            <div class="metric-value">{{ stats.total_runs }}</div>
            <div class="metric-footnote">Every run and log line stored in SQLite</div>
        </article>
        <article class="metric-card">
            <div class="metric-label">Running now</div>
            <div class="metric-value">{{ stats.running_runs }}</div>
            <div class="metric-footnote">Across manual, scheduled, and pipeline-triggered runs</div>
        </article>
        <article class="metric-card">
            <div class="metric-label">Success rate</div>
            <div class="metric-value">{{ stats.success_rate }}%</div>
            <div class="metric-footnote">{{ stats.successful_runs }} success and {{ stats.failed_runs }} failed</div>
        </article>
    </section>

    <section class="layout-two">
        <article class="panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">Priority pipelines</h2>
                    <p class="panel-copy">A fast read on schedules, task counts, and what each flow will launch next.</p>
                </div>
                <a class="button ghost" href="/pipelines">See all</a>
            </div>

            {% if pipelines %}
            <div class="pipeline-grid">
                {% for pipeline in pipelines[:4] %}
                <article class="pipeline-card">
                    <div class="card-topline">
                        <span class="badge">{{ pipeline.schedule_text }}</span>
                        {% if pipeline.last_run %}
                        <span class="status-badge {{ pipeline.last_run.status }}">{{ pipeline.last_run.status }}</span>
                        {% else %}
                        <span class="badge">no runs yet</span>
                        {% endif %}
                    </div>

                    <div class="title-row" style="margin-top:14px;">
                        <div>
                            <h3 class="card-title">{{ pipeline.title }}</h3>
                            <div class="muted mono" style="margin-top:4px;">{{ pipeline.pipeline_id }}</div>
                        </div>
                        <span class="meta-pill">{% if pipeline.paused %}paused{% else %}active{% endif %}</span>
                    </div>

                    <p class="card-copy">{{ pipeline.description or "No operator-facing description added yet." }}</p>

                    <div class="meta-list">
                        <span class="meta-pill">{{ pipeline.task_count }} tasks</span>
                        <span class="meta-pill">next {{ pipeline.next_run_label }}</span>
                        <span class="meta-pill">running {{ pipeline.active_runs }}</span>
                        <span class="meta-pill">{{ pipeline.execution_summary }}</span>
                    </div>

                    {% if pipeline.trigger_targets %}
                    <div class="tag-row" style="margin-top:14px;">
                        {% for target in pipeline.trigger_targets %}
                        <span class="tag">triggers {{ target }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}

                    <div class="card-actions" style="margin-top:18px;">
                        <button class="button primary" data-run-button="{{ pipeline.pipeline_id }}" onclick="triggerPipeline('{{ pipeline.pipeline_id }}')">Run now</button>
                        <a class="button secondary" href="/pipelines/{{ pipeline.pipeline_id }}">View DAG</a>
                    </div>
                </article>
                {% endfor %}
            </div>
            {% else %}
            <div class="empty-state">No pipelines found. Add one to <span class="mono">{{ project.config_path }}</span> and refresh the page.</div>
            {% endif %}
        </article>

        <article class="panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">Runtime trend</h2>
                    <p class="panel-copy">Recent run duration by completion order.</p>
                </div>
            </div>

            <div class="stack">
                <div class="runtime-chart" aria-label="Run duration trend">
                    {% set max_duration = runtime_trend | map(attribute='duration_seconds') | max if runtime_trend else 0 %}
                    {% for point in runtime_trend %}
                    {% set height = 10 + (point.duration_seconds / max_duration * 120 if max_duration else 0) %}
                    <a class="runtime-bar {{ point.status }}" href="/runs/{{ point.run_id }}" style="height: {{ height }}px;" title="{{ point.pipeline_id }} · {{ '%.1fs'|format(point.duration_seconds) }}"></a>
                    {% endfor %}
                </div>
                <div class="detail-card">
                    <div class="detail-label">Active pipelines</div>
                    <div class="detail-value">{{ active_pipelines|length }}</div>
                    {% if active_pipelines %}
                    <div class="tag-row" style="margin-top:10px;">
                        {% for pipeline in active_pipelines %}
                        <a class="tag" href="/pipelines/{{ pipeline.pipeline_id }}">{{ pipeline.pipeline_id }}</a>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
                <div class="detail-card">
                    <div class="detail-label">Queue</div>
                    <div class="detail-value">{{ runtime_metrics.queue.due|default(0) }} due / {{ runtime_metrics.queue.queued|default(0) }} queued</div>
                    <div class="footer-note">dispatching {{ runtime_metrics.queue.dispatching|default(0) }}, failed {{ runtime_metrics.queue.failed|default(0) }}</div>
                </div>
                <div class="detail-card">
                    <div class="detail-label">Workers</div>
                    <div class="detail-value">{{ runtime_metrics.workers.running_tasks|default(0) }} running tasks</div>
                    <div class="footer-note">capacity {{ runtime_metrics.workers.configured_task_capacity|default(0) }}, queued tasks {{ runtime_metrics.workers.queued_tasks|default(0) }}</div>
                </div>
                <div class="detail-card">
                    <div class="detail-label">Runtime config</div>
                    <div class="detail-value mono path-value">{{ scheduler.database_path }}</div>
                </div>
            </div>
        </article>
    </section>

    <section class="layout-two">
        <article class="panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">Recent failures</h2>
                    <p class="panel-copy">Failed runs that need operator attention.</p>
                </div>
                <a class="button ghost" href="/logs">Open logs</a>
            </div>
            {% if recent_failures %}
            <div class="run-list">
                {% for run in recent_failures %}
                <article class="run-card">
                    <div class="run-card-header">
                        <div>
                            <a class="card-title" href="/runs/{{ run.run_id }}">{{ run.pipeline_title }}</a>
                            <p class="mono">{{ run.run_id }}</p>
                        </div>
                        <span class="status-badge failed">failed</span>
                    </div>
                    {% if run.error %}
                    <p class="footer-note">{{ run.error }}</p>
                    {% endif %}
                </article>
                {% endfor %}
            </div>
            {% else %}
            <div class="empty-state">No recent failures.</div>
            {% endif %}
        </article>

        <article class="panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">Control shortcuts</h2>
                    <p class="panel-copy">Operator views for repeated daily work.</p>
                </div>
            </div>
            <div class="shortcut-grid">
                <a class="detail-card shortcut-card" href="/execution-matrix">
                    <div class="detail-label">Execution Matrix</div>
                    <div class="detail-value">Grid view by task and run</div>
                </a>
                <a class="detail-card shortcut-card" href="/logs">
                    <div class="detail-label">Logs</div>
                    <div class="detail-value">Search across run output</div>
                </a>
                <a class="detail-card shortcut-card" href="/settings">
                    <div class="detail-label">Settings</div>
                    <div class="detail-value">Schedules and engine config</div>
                </a>
            </div>
        </article>
    </section>

    <section class="panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">Recent activity</h2>
                <p class="panel-copy">Recent pipeline runs with task-level completion counts at a glance.</p>
            </div>
            <a class="button ghost" href="/runs">View all runs</a>
        </div>

        {% if recent_runs %}
        <div class="table-wrap">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Run</th>
                        <th>Pipeline</th>
                        <th>Status</th>
                        <th>Trigger</th>
                        <th>Tasks</th>
                        <th>Started</th>
                    </tr>
                </thead>
                <tbody>
                    {% for run in recent_runs %}
                    <tr>
                        <td><a class="mono" href="/runs/{{ run.run_id }}">{{ run.run_id }}</a></td>
                        <td><a href="/pipelines/{{ run.pipeline_id }}">{{ run.pipeline_title }}</a></td>
                        <td><span class="status-badge {{ run.status }}">{{ run.status }}</span></td>
                        <td class="mono">{{ run.trigger }}</td>
                        <td>{{ run.successful_tasks }}/{{ run.task_count }}</td>
                        <td>{{ run.started_at or run.created_at }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="empty-state">No runs have been recorded yet. Launch a pipeline to populate the timeline.</div>
        {% endif %}
    </section>
</div>
{% endblock %}