{% extends "base.html" %}

{% block title %}Run {{ run.run_id }} - Piply{% endblock %}

{% block content %}
<div class="page-grid">
    <section class="compact-header">
        <div>
            <div class="eyebrow">Dag run</div>
            <h1 class="panel-title" style="font-size:1.9rem; margin:0;">{{ run.pipeline_title }}</h1>
            <p class="page-header-copy" style="margin:8px 0 0;">
                Run <span class="mono">{{ run.run_id }}</span> was triggered via <span class="mono">{{ run.trigger }}</span>.
                Select a task in the graph to inspect it, filter logs, or retry from the failing point.
            </p>
        </div>
        <div class="run-stats-row">
            <span class="status-badge {{ run.status }}" id="run-status">{{ run.status }}</span>
            <span class="meta-pill">pipeline <a href="/pipelines/{{ run.pipeline_id }}">{{ run.pipeline_id }}</a></span>
            <span class="meta-pill">duration <span id="run-duration">{% if run.duration_seconds is not none %}{{ "%.1fs"|format(run.duration_seconds) }}{% else %}-{% endif %}</span></span>
            <span class="meta-pill">tasks <span id="run-task-count">{{ run.successful_tasks }}/{{ run.task_count }}</span></span>
            <span class="meta-pill">exit <span id="run-exit-code">{{ run.exit_code if run.exit_code is not none else "pending" }}</span></span>
            {% if run.retry_of %}
            <span class="meta-pill">retry of {{ run.retry_of }}</span>
            <span class="meta-pill">{{ run.retry_mode }}</span>
            {% endif %}
            {% if run.status in ['queued', 'running'] %}
            <button class="button warn" onclick="cancelRun('{{ run.run_id }}')">Cancel run</button>
            {% else %}
            <button class="button ghost" onclick="deleteRun('{{ run.run_id }}')">Delete run</button>
            {% endif %}
        </div>
    </section>

    <section class="panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">Run graph</h2>
                <p class="panel-copy">The graph keeps live task colors and durations visible while the side panel turns the selected task into an action surface.</p>
            </div>
            <div class="legend-row">
                <span class="status-badge success">success</span>
                <span class="status-badge running">running</span>
                <span class="status-badge failed">failed</span>
                <span class="status-badge cancelled">cancelled</span>
                <span class="status-badge queued">queued</span>
                <span class="status-badge skipped">skipped</span>
            </div>
        </div>
        <div class="dag-operator-grid run-dag-grid">
            <div class="dag-shell run-graph-panel">
                <div class="dag-stage" id="run-dag-stage"></div>
            </div>
            <aside class="task-inspector" id="run-task-inspector">
                <div class="detail-label">Task focus</div>
                <div class="empty-state">Select a task node to inspect it.</div>
            </aside>
        </div>
    </section>

    <section class="run-secondary-grid">
        <article class="panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">Raw logs</h2>
                    <p class="panel-copy">Newest lines on top. Timestamps are formatted as HH:MM:SS.SSS.</p>
                </div>
                <div class="inline-actions">
                    <span class="meta-pill" id="log-filter-label">showing all logs</span>
                    <button class="button ghost" id="clear-log-filter" onclick="clearTaskLogFilter()" hidden>Clear filter</button>
                </div>
            </div>
            <div class="log-viewer tight" id="log-viewer">
                {% if logs %}
                    {% for line in logs %}
                    <div class="log-line">
                        <time>{{ line.created_at.strftime('%H:%M:%S.%f')[:-3] }}</time>
                        <div class="log-task">{{ line.task_id or "pipeline" }}</div>
                        <div class="log-message">{{ line.message }}</div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="empty-state">No output has been captured yet for this run.</div>
                {% endif %}
            </div>
        </article>

        <article class="stack">
            <section class="panel">
                <div class="panel-header">
                    <div>
                        <h2 class="panel-title">Upcoming runs</h2>
                        <p class="panel-copy">The next scheduled slots for this pipeline.</p>
                    </div>
                </div>
                {% if upcoming_runs %}
                <div class="schedule-list schedule-list-compact" id="upcoming-run-list">
                    {% for item in upcoming_runs %}
                    <div class="schedule-item">
                        <span class="meta-pill">{{ item.label }}</span>
                        <span class="mono">{{ item.scheduled_for.astimezone().strftime('%Y-%m-%d %H:%M') }}</span>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="empty-state" id="upcoming-run-list">This pipeline does not have a schedule.</div>
                {% endif %}
            </section>

            <section class="panel">
                <div class="panel-header">
                    <div>
                        <h2 class="panel-title">Flow summary</h2>
                        <p class="panel-copy">Stored exactly as Piply launched it so commands, scripts, and call targets stay visible for debugging.</p>
                    </div>
                    <button class="button ghost" onclick='copyText({{ run.command|tojson }})'>Copy</button>
                </div>
                <pre class="code-block">{{ run.command }}</pre>
            </section>
        </article>
    </section>

    <section class="panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">Task run states</h2>
                <p class="panel-copy">Select any task card or node to align the graph, details, and log filter around the same task.</p>
            </div>
        </div>
        <div class="task-grid" id="task-run-grid">
            {% for task in task_runs %}
            <article class="task-card pipeline-focus-card {% if task.status in ['failed', 'skipped'] %}retryable{% endif %} {% if task.status == 'failed' %}task-card-failed{% elif task.status == 'success' %}task-card-success{% elif task.status == 'cancelled' %}task-card-cancelled{% endif %}" onclick="focusRunTask('{{ task.task_id }}', true)" data-task-card="{{ task.task_id }}">
                <div class="task-card-header">
                    <div>
                        <h3 class="card-title">{{ task.title }}</h3>
                        <div class="muted mono" style="margin-top:4px;">{{ task.task_id }}</div>
                    </div>
                    <span class="status-badge {{ task.status }}">{{ task.status }}</span>
                </div>
                <div class="task-stats">
                    <span class="task-type-badge">{{ task.task_type }}</span>
                    <span class="meta-pill">logs {{ task.log_count }}</span>
                    <span class="meta-pill">duration {% if task.duration_seconds is not none %}{{ "%.1fs"|format(task.duration_seconds) }}{% else %}-{% endif %}</span>
                </div>
                <pre class="code-block" style="margin-top:14px;">{{ task.command_preview }}</pre>
                {% if task.error %}
                <p class="footer-note">{{ task.error }}</p>
                {% endif %}
            </article>
            {% endfor %}
        </div>
    </section>

    {% if run.error %}
    <section class="panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">Failure signal</h2>
                <p class="panel-copy">The pipeline-level failure summary captured when the run ended.</p>
            </div>
        </div>
        <div class="detail-card">
            <div class="detail-value">{{ run.error }}</div>
        </div>
    </section>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/@dagrejs/graphlib@2.1.13/dist/graphlib.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@dagrejs/dagre@1.1.2/dist/dagre.min.js" defer></script>
<script>
const runId = "{{ run.run_id }}";
const initialRun = {{ run_payload|tojson }};
const initialTaskRuns = {{ task_run_payloads|tojson }};
const initialLogs = {{ log_payloads|tojson }};
const initialUpcomingRuns = {{ upcoming_run_payloads|tojson }};
let active = {{ 'true' if run.status in ['queued', 'running'] else 'false' }};
let currentRun = initialRun;
let currentTaskRuns = initialTaskRuns.slice();
let currentLogs = initialLogs.slice();
let currentUpcomingRuns = initialUpcomingRuns.slice();
let selectedRunTaskId = initialTaskRuns[0]?.task_id || null;
let taskLogFilterId = null;
let durationTicker = null;

function updateRunHeader(run) {
    document.getElementById("run-status").textContent = run.status;
    document.getElementById("run-status").className = `status-badge ${run.status}`;
    document.getElementById("run-exit-code").textContent = run.exit_code ?? "pending";
    document.getElementById("run-task-count").textContent = `${run.successful_tasks}/${run.task_count}`;
}

function syncTaskCardFocus() {
    document.querySelectorAll("[data-task-card]").forEach((card) => {
        card.classList.toggle("task-card-focused", card.dataset.taskCard === selectedRunTaskId);
    });
}

function updateLogFilterBadge() {
    const label = document.getElementById("log-filter-label");
    const button = document.getElementById("clear-log-filter");
    if (!taskLogFilterId) {
        label.textContent = "showing all logs";
        button.hidden = true;
        return;
    }
    label.textContent = `showing ${taskLogFilterId} logs`;
    button.hidden = false;
}

function renderLogs(logs) {
    const viewer = document.getElementById("log-viewer");
    const filteredLogs = taskLogFilterId
        ? logs.filter((line) => line.task_id === taskLogFilterId)
        : logs;
    if (!filteredLogs.length) {
        viewer.innerHTML = '<div class="empty-state">No output has been captured for the current log filter.</div>';
        updateLogFilterBadge();
        return;
    }

    viewer.innerHTML = filteredLogs.map((line) => `
        <div class="log-line">
            <time>${escapeHtml(line.time_label)}</time>
            <div class="log-task">${escapeHtml(line.task_id || "pipeline")}</div>
            <div class="log-message">${escapeHtml(line.message)}</div>
        </div>
    `).join("");
    updateLogFilterBadge();
}

function renderUpcomingRuns(upcomingRuns) {
    const container = document.getElementById("upcoming-run-list");
    if (!container) {
        return;
    }
    if (!upcomingRuns.length) {
        container.className = "empty-state";
        container.textContent = "This pipeline does not have a schedule.";
        return;
    }
    container.className = "schedule-list schedule-list-compact";
    container.innerHTML = upcomingRuns.map((item) => `
        <div class="schedule-item">
            <span class="meta-pill">${escapeHtml(item.label)}</span>
            <span class="mono">${escapeHtml(new Date(item.scheduled_for).toLocaleString())}</span>
        </div>
    `).join("");
}

function renderRunInspector(taskId) {
    const inspector = document.getElementById("run-task-inspector");
    const task = currentTaskRuns.find((item) => item.task_id === taskId);
    if (!task) {
        inspector.innerHTML = '<div class="detail-label">Task focus</div><div class="empty-state">Select a task node to inspect it.</div>';
        return;
    }
    const dependencyText = task.depends_on && task.depends_on.length ? task.depends_on.join(", ") : "none";
    const canRetryFromTask = currentRun.status === "failed" && (task.status === "failed" || task.status === "skipped");
    const outputBlock = task.output_preview
        ? `<div class="inspector-section"><div class="small-kicker">Output preview</div><pre class="code-block inspector-code">${escapeHtml(task.output_preview)}</pre></div>`
        : "";
    const errorBlock = task.error ? `<p class="footer-note">${escapeHtml(task.error)}</p>` : "";
    inspector.innerHTML = `
        <div class="detail-label">Task focus</div>
        <h3 class="panel-title" style="margin-top:10px;">${escapeHtml(task.title)}</h3>
        <div class="task-stats" style="margin-top:12px;">
            <span class="task-type-badge">${escapeHtml(task.task_type)}</span>
            <span class="status-badge ${escapeHtml(task.status)}">${escapeHtml(task.status)}</span>
            <span class="meta-pill">duration ${escapeHtml(formatDurationSeconds(task.duration_seconds))}</span>
            <span class="meta-pill">logs ${task.log_count}</span>
        </div>
        <div class="inspector-section">
            <div class="small-kicker">Task id</div>
            <div class="detail-value mono">${escapeHtml(task.task_id)}</div>
        </div>
        <div class="inspector-section">
            <div class="small-kicker">Dependencies</div>
            <div class="detail-value">${escapeHtml(dependencyText)}</div>
        </div>
        <div class="inspector-section">
            <div class="small-kicker">Command or target</div>
            <pre class="code-block inspector-code">${escapeHtml(task.command_preview)}</pre>
        </div>
        ${outputBlock}
        ${errorBlock}
        <div class="card-actions" style="margin-top:16px;">
            <button class="button secondary" onclick="filterLogsToTask('${task.task_id}')">Filter logs</button>
            <button class="button ghost" onclick="copySelectedTaskCommand()">Copy command</button>
            ${canRetryFromTask ? `<button class="button primary" onclick="retryRun(runId, 'resume', '${task.task_id}')">Resume from here</button>` : ""}
            ${currentRun.status === "failed" ? `<button class="button ghost" onclick="retryRun(runId, 'startover')">Start over</button>` : ""}
        </div>
    `;
}

function renderTaskRuns(taskRuns) {
    currentTaskRuns = taskRuns.slice();
    const grid = document.getElementById("task-run-grid");
    grid.innerHTML = taskRuns.map((task) => `
        <article class="task-card pipeline-focus-card ${task.status === "failed" ? "task-card-failed retryable" : ""} ${task.status === "success" ? "task-card-success" : ""} ${task.status === "cancelled" ? "task-card-cancelled" : ""} ${task.status === "skipped" ? "retryable" : ""} ${task.task_id === selectedRunTaskId ? "task-card-focused" : ""}" onclick="focusRunTask('${task.task_id}', true)" data-task-card="${escapeHtml(task.task_id)}">
            <div class="task-card-header">
                <div>
                    <h3 class="card-title">${escapeHtml(task.title)}</h3>
                    <div class="muted mono" style="margin-top:4px;">${escapeHtml(task.task_id)}</div>
                </div>
                <span class="status-badge ${escapeHtml(task.status)}">${escapeHtml(task.status)}</span>
            </div>
            <div class="task-stats">
                <span class="task-type-badge">${escapeHtml(task.task_type)}</span>
                <span class="meta-pill">logs ${task.log_count}</span>
                <span class="meta-pill">duration ${formatDurationSeconds(task.duration_seconds)}</span>
            </div>
            <pre class="code-block" style="margin-top:14px;">${escapeHtml(task.command_preview)}</pre>
            ${task.error ? `<p class="footer-note">${escapeHtml(task.error)}</p>` : ""}
        </article>
    `).join("");
    renderRunInspector(selectedRunTaskId || taskRuns[0]?.task_id || null);
    syncTaskCardFocus();
    window.renderDagInto(
        "run-dag-stage",
        taskRuns.map((task) => ({
            task_id: task.task_id,
            title: task.title,
            task_type: task.task_type,
            depends_on: task.depends_on,
            command_preview: task.command_preview,
            status: task.status,
            duration_seconds: task.duration_seconds,
        })),
        Object.fromEntries(taskRuns.map((task) => [task.task_id, task.status])),
        {
            selectedNodeId: selectedRunTaskId,
            clickableStatuses: ["queued", "running", "success", "failed", "skipped", "cancelled"],
            onNodeClick: (node) => {
                focusRunTask(node.task_id, false, false);
            },
            defaultLayout: "flow",
        },
    );
}

function focusRunTask(taskId, shouldScroll = false, rerender = true) {
    selectedRunTaskId = taskId;
    syncTaskCardFocus();
    renderRunInspector(taskId);
    if (rerender) {
        renderTaskRuns(currentTaskRuns);
    }
    if (shouldScroll) {
        const card = document.querySelector(`[data-task-card="${taskId}"]`);
        if (card) {
            card.scrollIntoView({ behavior: "smooth", block: "center" });
        }
    }
}

function filterLogsToTask(taskId) {
    taskLogFilterId = taskId;
    renderLogs(currentLogs);
}

function clearTaskLogFilter() {
    taskLogFilterId = null;
    renderLogs(currentLogs);
}

function copySelectedTaskCommand() {
    const task = currentTaskRuns.find((item) => item.task_id === selectedRunTaskId);
    if (task) {
        copyText(task.command_preview);
    }
}

function startDurationTicker() {
    if (durationTicker) {
        clearInterval(durationTicker);
    }

    const durationElement = document.getElementById("run-duration");
    const renderDuration = () => {
        if (!currentRun.started_at) {
            durationElement.textContent = "-";
            return;
        }
        const startTime = new Date(currentRun.started_at);
        const endTime = currentRun.finished_at ? new Date(currentRun.finished_at) : new Date();
        const seconds = Math.max(0, Math.floor((endTime - startTime) / 1000));
        durationElement.textContent = formatDurationSeconds(seconds);
    };

    renderDuration();
    if (active) {
        durationTicker = setInterval(renderDuration, 1000);
    }
}

async function refreshRun() {
    if (!active) {
        return;
    }

    try {
        const payload = await piplyRequest(`/api/runs/${runId}`);
        currentRun = payload.run;
        currentLogs = payload.logs || [];
        currentUpcomingRuns = payload.upcoming_runs || [];
        updateRunHeader(payload.run);
        renderTaskRuns(payload.task_runs || []);
        renderLogs(currentLogs);
        renderUpcomingRuns(currentUpcomingRuns);
        active = payload.run.status === "queued" || payload.run.status === "running";
        startDurationTicker();
        if (!active && durationTicker) {
            clearInterval(durationTicker);
        }
    } catch (error) {
        active = false;
        if (durationTicker) {
            clearInterval(durationTicker);
        }
    }
}

document.addEventListener("DOMContentLoaded", () => {
    renderTaskRuns(initialTaskRuns);
    renderLogs(initialLogs);
    renderUpcomingRuns(initialUpcomingRuns);
    startDurationTicker();
    if (active) {
        setInterval(refreshRun, 3000);
    }
});
</script>
{% endblock %}