{% extends "base.html" %}

{% block title %}{{ pipeline.title }} - Piply{% endblock %}

{% block content %}
<div class="page-grid">
    <section class="hero">
        <div class="eyebrow">Pipeline detail</div>
        <h1 class="hero-headline">{{ pipeline.title }} <span>DAG view</span>.</h1>
        <p class="hero-copy">{{ pipeline.description or "This pipeline is ready for execution, but it still needs a stronger operator-facing description in the config." }}</p>
        <div class="hero-actions">
            <button class="button primary" data-run-button="{{ pipeline.pipeline_id }}" onclick="triggerPipeline('{{ pipeline.pipeline_id }}', { scope: document.getElementById('command-override-panel') || document })">Run now</button>
            <button class="button {% if pipeline.paused %}secondary{% else %}warn{% endif %}" onclick="togglePipelinePause('{{ pipeline.pipeline_id }}', {{ 'false' if pipeline.paused else 'true' }})">
                {% if pipeline.paused %}Resume schedule{% else %}Pause schedule{% endif %}
            </button>
            <button class="button ghost" onclick="deletePipeline('{{ pipeline.pipeline_id }}')">Delete pipeline</button>
            <a class="button ghost" href="/pipelines">Back to pipelines</a>
        </div>
        <div class="hero-meta" style="margin-top:18px;">
            <span class="status-badge {% if pipeline.last_run %}{{ pipeline.last_run.status }}{% else %}queued{% endif %}" data-last-run-status>
                {% if pipeline.last_run %}{{ pipeline.last_run.status }}{% else %}no runs yet{% endif %}
            </span>
            <span class="meta-pill">next <span data-next-run-label>{{ pipeline.next_run_label }}</span></span>
            <span class="meta-pill">{{ pipeline.task_count }} tasks</span>
            <span class="meta-pill">{{ pipeline.execution_summary }}</span>
            <span class="meta-pill">{{ pipeline.retry_summary }}</span>
            {% for target in pipeline.trigger_targets %}
            <span class="tag">triggers {{ target }}</span>
            {% endfor %}
        </div>
    </section>

    <section class="detail-grid">
        <article class="detail-card">
            <div class="detail-label">Schedule</div>
            <div class="detail-value">{{ pipeline.schedule_text }}</div>
        </article>
        <article class="detail-card">
            <div class="detail-label">Primary entry</div>
            <div class="detail-value mono path-value">{{ pipeline.primary_entry }}</div>
        </article>
        <article class="detail-card">
            <div class="detail-label">Flow summary</div>
            <div class="detail-value mono path-value">{{ pipeline.command_preview }}</div>
        </article>
        <article class="detail-card">
            <div class="detail-label">Execution</div>
            <div class="detail-value">{{ pipeline.execution_summary }}</div>
        </article>
        <article class="detail-card">
            <div class="detail-label">Retry policy</div>
            <div class="detail-value">{{ pipeline.retry_summary }}</div>
        </article>
    </section>

    <section class="panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">Task graph</h2>
                <p class="panel-copy">Select a node to inspect dependencies, see the latest status, and run just that task with its upstream prerequisites.</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">
            <div class="dag-shell">
                <div class="dag-stage" id="dag-stage"></div>
            </div>
            <aside class="task-inspector" id="pipeline-task-inspector">
                <div class="detail-label">Task focus</div>
                <div class="empty-state">Select a task node to inspect it.</div>
            </aside>
        </div>
    </section>

    {% set cli_tasks = tasks | selectattr("task_type", "equalto", "cli") | list %}
    {% if cli_tasks %}
    <section class="panel" id="command-override-panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">Manual command overrides</h2>
                <p class="panel-copy">For manual runs you can replace the configured CLI command with any command directly from the UI. Batch files and shell chains are supported.</p>
            </div>
        </div>
        <div class="command-override-grid">
            {% for task in cli_tasks %}
            <div class="override-field">
                <div class="small-kicker">{{ task.task_id }}</div>
                <textarea data-command-override data-task-id="{{ task.task_id }}">{{ task.command_preview }}</textarea>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <section class="panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">Tasks</h2>
                <p class="panel-copy">Commands and scripts stay visible so operators can see exactly what will execute.</p>
            </div>
        </div>

        <div class="task-grid">
            {% for task in tasks %}
            {% set latest = task_run_map.get(task.task_id) %}
            <article class="task-card pipeline-focus-card {% if latest %}task-card-{{ latest.status }}{% endif %}" data-task-card="{{ task.task_id }}" onclick="focusPipelineTask('{{ task.task_id }}', true)">
                <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>
                    <div class="inline-actions">
                        <span class="task-type-badge">{{ task.operator_label }}</span>
                        {% if latest %}
                        <span class="status-badge {{ latest.status }}" data-task-status="{{ task.task_id }}">{{ latest.status }}</span>
                        {% endif %}
                    </div>
                </div>

                <p class="task-description">{{ task.description or "No task-specific description provided." }}</p>

                <div class="task-stats">
                    <span class="meta-pill">depends_on {{ task.depends_on|join(', ') if task.depends_on else 'none' }}</span>
                    {% if latest %}
                    <span class="meta-pill">logs {{ latest.log_count }}</span>
                    <span class="meta-pill">duration {% if latest.duration_seconds is not none %}{{ "%.1fs"|format(latest.duration_seconds) }}{% else %}-{% endif %}</span>
                    {% endif %}
                </div>

                <div style="margin-top:16px;">
                    <div class="small-kicker">Command or target</div>
                    <pre class="code-block" style="margin-top:10px;">{{ task.command_preview }}</pre>
                </div>
            </article>
            {% endfor %}
        </div>
    </section>

    <section class="panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">Recent runs</h2>
                <p class="panel-copy">Each run keeps task-level status counts and raw log history.</p>
            </div>
        </div>

        {% if runs %}
        <div class="run-list">
            {% for run in runs %}
            <article class="run-card">
                <div class="run-card-header">
                    <div>
                        <a class="card-title" href="/runs/{{ run.run_id }}">{{ run.run_id }}</a>
                        <p>{{ run.started_at or run.created_at }}</p>
                    </div>
                    <div class="table-actions">
                        <span class="status-badge {{ run.status }}">{{ run.status }}</span>
                        {% if run.status not in ['queued', 'running'] %}
                        <button class="button ghost" onclick="deleteRun('{{ run.run_id }}', '/pipelines/{{ pipeline.pipeline_id }}')">Delete</button>
                        {% endif %}
                    </div>
                </div>
                <div class="meta-list">
                    <span class="meta-pill">trigger {{ run.trigger }}</span>
                    <span class="meta-pill">tasks {{ run.successful_tasks }}/{{ run.task_count }}</span>
                    <span class="meta-pill">logs {{ run.log_count }}</span>
                    <span class="meta-pill">duration {% if run.duration_seconds is not none %}{{ "%.1fs"|format(run.duration_seconds) }}{% else %}-{% endif %}</span>
                </div>
                {% if run.retry_of %}
                <p class="footer-note">retry of {{ run.retry_of }} using {{ run.retry_mode }}</p>
                {% endif %}
                {% if run.error %}
                <p class="footer-note">{{ run.error }}</p>
                {% endif %}
            </article>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">This pipeline has not been executed yet. Use the run button above to create its first run record.</div>
        {% endif %}
    </section>
</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 pipelineId = "{{ pipeline.pipeline_id }}";
const dagTasks = {{ dag_tasks|tojson }};
const latestTaskRunPayloads = {{ latest_task_run_payloads|tojson }};
let taskStateMap = {{ task_state_map|tojson }};
let pipelinePageActive = {{ 'true' if pipeline.active_runs > 0 or (pipeline.last_run and pipeline.last_run.status in ['queued', 'running']) else 'false' }};
let pipelineDagTasks = dagTasks.map((task) => ({ ...task }));
let currentLatestTaskRuns = latestTaskRunPayloads.slice();
let selectedPipelineTaskId = dagTasks.find((task) => task.task_type !== "pipeline")?.task_id || dagTasks[0]?.task_id || null;

function taskRunMap(taskRuns) {
    return Object.fromEntries(taskRuns.map((task) => [task.task_id, task]));
}

function syncPipelineDagTasks(latestTaskRuns) {
    currentLatestTaskRuns = latestTaskRuns.slice();
    const latestTaskMap = taskRunMap(latestTaskRuns);
    pipelineDagTasks = dagTasks.map((task) => ({
        ...task,
        duration_seconds: latestTaskMap[task.task_id]?.duration_seconds ?? null,
        status: latestTaskMap[task.task_id]?.status ?? taskStateMap[task.task_id] ?? "queued",
    }));
}

function renderPipelineInspector(taskId) {
    const inspector = document.getElementById("pipeline-task-inspector");
    const task = pipelineDagTasks.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 latest = taskRunMap(currentLatestTaskRuns)[task.task_id];
    const isTriggerNode = task.task_type === "pipeline";
    const dependencyText = task.depends_on && task.depends_on.length ? task.depends_on.join(", ") : "none";
    const statusText = latest?.status || task.status || "queued";
    const logCount = latest?.log_count ?? 0;
    const durationText = formatDurationSeconds(latest?.duration_seconds ?? task.duration_seconds);
    const outputBlock = latest?.output_preview
        ? `<div class="inspector-section"><div class="small-kicker">Output preview</div><pre class="code-block inspector-code">${escapeHtml(latest.output_preview)}</pre></div>`
        : "";
    const errorBlock = latest?.error ? `<p class="footer-note">${escapeHtml(latest.error)}</p>` : "";
        const actionButton = isTriggerNode
        ? `<a class="button secondary" href="/pipelines/${task.task_id.replace("trigger_", "")}">Open downstream pipeline</a>`
        : `<button class="button primary" onclick="triggerTask('${pipelineId}', '${task.task_id}', { scope: document.getElementById('command-override-panel') || document })">Run this task</button>`;
    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(statusText)}">${escapeHtml(statusText)}</span>
            <span class="meta-pill">duration ${escapeHtml(durationText)}</span>
            <span class="meta-pill">logs ${logCount}</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 || "No command preview available.")}</pre>
        </div>
        ${outputBlock}
        ${errorBlock}
        <div class="card-actions" style="margin-top:16px;">
            ${actionButton}
            <button class="button ghost" onclick="copySelectedPipelineTaskCommand()">Copy command</button>
        </div>
    `;
}

function renderPipelineDag() {
    window.renderDagInto(
        "dag-stage",
        pipelineDagTasks,
        taskStateMap,
        {
            selectedNodeId: selectedPipelineTaskId,
            clickableStatuses: ["queued", "running", "success", "failed", "skipped", "cancelled"],
            onNodeClick: (node) => {
                focusPipelineTask(node.task_id, false, false);
            },
            defaultLayout: "flow",
        },
    );
}

function focusPipelineTask(taskId, shouldScroll = false, rerender = true) {
    selectedPipelineTaskId = taskId;
    document.querySelectorAll("[data-task-card]").forEach((card) => {
        card.classList.toggle("task-card-focused", card.dataset.taskCard === taskId);
    });
    renderPipelineInspector(taskId);
    if (rerender) {
        renderPipelineDag();
    }
    if (shouldScroll) {
        const card = document.querySelector(`[data-task-card="${taskId}"]`);
        if (card) {
            card.scrollIntoView({ behavior: "smooth", block: "center" });
        }
    }
}

function copySelectedPipelineTaskCommand() {
    const task = pipelineDagTasks.find((item) => item.task_id === selectedPipelineTaskId);
    if (task) {
        copyText(task.command_preview || "");
    }
}

function refreshTaskStatuses(latestTaskRuns) {
    latestTaskRuns.forEach((task) => {
        const badge = document.querySelector(`[data-task-status="${task.task_id}"]`);
        const card = document.querySelector(`[data-task-card="${task.task_id}"]`);
        if (badge) {
            badge.className = `status-badge ${task.status}`;
            badge.textContent = task.status;
        }
        if (card) {
            card.classList.remove("task-card-success", "task-card-failed", "task-card-cancelled");
            if (task.status === "success") {
                card.classList.add("task-card-success");
            }
            if (task.status === "failed") {
                card.classList.add("task-card-failed");
            }
            if (task.status === "cancelled") {
                card.classList.add("task-card-cancelled");
            }
        }
        taskStateMap[task.task_id] = task.status;
    });
    syncPipelineDagTasks(latestTaskRuns);
    focusPipelineTask(selectedPipelineTaskId || pipelineDagTasks[0]?.task_id || null, false);
}

async function refreshPipelineDetail() {
    if (!pipelinePageActive) {
        return;
    }
    try {
        const payload = await piplyRequest(`/api/pipelines/${pipelineId}`);
        refreshTaskStatuses(payload.latest_task_runs || []);
        const latestRunStatus = payload.pipeline.last_run ? payload.pipeline.last_run.status : "queued";
        document.querySelectorAll("[data-last-run-status]").forEach((element) => {
            element.className = `status-badge ${latestRunStatus}`;
            element.textContent = payload.pipeline.last_run ? latestRunStatus : "no runs yet";
        });
        document.querySelectorAll("[data-next-run-label]").forEach((element) => {
            element.textContent = payload.pipeline.next_run_label;
        });
        pipelinePageActive = payload.pipeline.active_runs > 0 || ["queued", "running"].includes(latestRunStatus);
    } catch (error) {
        pipelinePageActive = false;
    }
}

document.addEventListener("DOMContentLoaded", () => {
    syncPipelineDagTasks(latestTaskRunPayloads);
    focusPipelineTask(selectedPipelineTaskId, false);
    if (pipelinePageActive) {
        setInterval(refreshPipelineDetail, 4000);
    }
});
</script>
{% endblock %}