{% extends "base.html" %}

{% block content %}
<section class="hero">
    <div>
        <p class="eyebrow">Task</p>
        <h1>{{ task.title }}</h1>
        <p class="subtitle">{{ task.project_title }} / {{ task.goal_title }}</p>
    </div>
    <div class="hero-actions">
        <span class="pill pill-{{ task.state }}">{{ task.state }}</span>
    </div>
</section>

<section class="split-layout">
    <article class="panel detail-panel">
        <div class="panel-header"><h2>Metadata</h2></div>
        <dl class="detail-list">
            <div><dt>Task ID</dt><dd>{{ task.task_id }}</dd></div>
            <div><dt>Capability</dt><dd>{{ task.capability_name }}</dd></div>
            <div><dt>Priority</dt><dd>{{ task.priority }}</dd></div>
            <div><dt>Goal</dt><dd>{{ task.goal_id }}</dd></div>
            <div><dt>Project</dt><dd>{{ task.project_id }}</dd></div>
            <div><dt>Updated</dt><dd>{{ task.updated_at }}</dd></div>
        </dl>
    </article>

    <article class="panel detail-panel">
        <div class="panel-header"><h2>Required Artifacts</h2></div>
        {% if resolved_requirements %}
        <div class="artifact-list">
            {% for item in resolved_requirements %}
            <article class="artifact-row">
                <div>
                    <strong>{{ item.artifact_key }}</strong>
                    <p>needs status: {{ item.required_status }}</p>
                    {% if item.resolved_artifact %}
                    <small>resolved v{{ item.resolved_artifact.version }}</small>
                    {% else %}
                    <small>not available</small>
                    {% endif %}
                </div>
                <span class="pill pill-{{ item.required_status }}">{{ item.required_status }}</span>
            </article>
            {% endfor %}
        </div>
        {% else %}
        <p class="empty-copy">This task has no declared required artifacts.</p>
        {% endif %}
    </article>
 </section>

<section class="split-layout">
    <article class="panel detail-panel">
        <div class="panel-header"><h2>Produced Artifacts</h2></div>
        {% if output_artifacts %}
        <div class="artifact-list">
            {% for artifact in output_artifacts %}
            <article class="artifact-row">
                <div>
                    <strong>{{ artifact.artifact_key }}</strong>
                    <p>{{ artifact.type }} · v{{ artifact.version }}</p>
                </div>
                <div style="display:flex;gap:8px;align-items:center;flex-shrink:0">
                    <span class="pill pill-{{ artifact.status }}">{{ artifact.status }}</span>
                    <button class="btn-ghost artifact-view-btn" style="padding:6px 12px;font-size:0.8rem"
                            data-artifact-id="{{ artifact.artifact_id }}">View</button>
                    <a class="btn-ghost" style="padding:6px 12px;font-size:0.8rem"
                       href="/api/artifacts/{{ artifact.artifact_id }}/content"
                       download>Download</a>
                </div>
            </article>
            {% endfor %}
        </div>
        {% else %}
        <p class="empty-copy">This task has not produced persisted artifacts yet.</p>
        {% endif %}
    </article>

    <article class="panel detail-panel">
        <div class="panel-header"><h2>Graph Links</h2></div>
        <div class="neighbor-groups">
            <div>
                <h3>Upstream</h3>
                {% for neighbor in upstream_links %}
                <a class="task-row compact" href="{{ url_for('task_detail', task_id=neighbor.task_id) }}">
                    <div>
                        <strong>{{ neighbor.title }}</strong>
                        <p>{{ neighbor.artifacts|join(', ') }}</p>
                    </div>
                    <span class="pill pill-{{ neighbor.state }}">{{ neighbor.state }}</span>
                </a>
                {% else %}
                <p class="empty-copy">No upstream task links.</p>
                {% endfor %}
            </div>
            <div>
                <h3>Downstream</h3>
                {% for neighbor in downstream_links %}
                <a class="task-row compact" href="{{ url_for('task_detail', task_id=neighbor.task_id) }}">
                    <div>
                        <strong>{{ neighbor.title }}</strong>
                        <p>{{ neighbor.artifacts|join(', ') }}</p>
                    </div>
                    <span class="pill pill-{{ neighbor.state }}">{{ neighbor.state }}</span>
                </a>
                {% else %}
                <p class="empty-copy">No downstream task links.</p>
                {% endfor %}
            </div>
        </div>
    </article>
</section>

{% if costs %}
<section class="panel">
    <div class="panel-header"><h2>Token Usage</h2></div>
    <table class="detail-table">
        <thead>
            <tr>
                <th>Provider</th>
                <th>Model</th>
                <th style="text-align:right">Prompt</th>
                <th style="text-align:right">Completion</th>
                <th style="text-align:right">Total</th>
                <th>Recorded at</th>
            </tr>
        </thead>
        <tbody>
            {% for c in costs %}
            <tr>
                <td>{{ c.provider_id or '—' }}</td>
                <td><code>{{ c.model_id or '—' }}</code></td>
                <td style="text-align:right">{{ "{:,}".format(c.prompt_tokens) }}</td>
                <td style="text-align:right">{{ "{:,}".format(c.completion_tokens) }}</td>
                <td style="text-align:right"><strong>{{ "{:,}".format(c.total_tokens) }}</strong></td>
                <td style="color:var(--muted);font-size:0.82rem">{{ c.created_at }}</td>
            </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2" style="font-weight:600">Total</td>
                <td style="text-align:right;font-weight:600">{{ "{:,}".format(costs | sum(attribute='prompt_tokens')) }}</td>
                <td style="text-align:right;font-weight:600">{{ "{:,}".format(costs | sum(attribute='completion_tokens')) }}</td>
                <td style="text-align:right;font-weight:600">{{ "{:,}".format(costs | sum(attribute='total_tokens')) }}</td>
                <td></td>
            </tr>
        </tfoot>
    </table>
</section>
{% endif %}

<section class="panel" id="traces-section">
    <div class="panel-header"><h2>Execution Traces</h2></div>
    <div id="traces-container">
        <p class="empty-copy">Loading traces...</p>
    </div>
</section>

<!-- Trace detail modal -->
<div id="trace-modal" class="artifact-modal" hidden>
    <div class="artifact-modal-backdrop"></div>
    <div class="artifact-modal-box" style="max-width:900px">
        <div class="artifact-modal-header">
            <div>
                <strong id="trace-modal-title"></strong>
                <span id="trace-modal-meta" style="color:var(--muted);font-size:0.82rem;margin-left:10px"></span>
            </div>
            <button class="btn-ghost" id="trace-modal-close" style="padding:6px 14px;font-size:0.82rem">Close</button>
        </div>
        <div id="trace-modal-body" class="artifact-modal-body" style="padding:16px;overflow-y:auto;max-height:70vh"></div>
    </div>
</div>

<script>
    document.querySelectorAll('.artifact-view-btn').forEach(btn => {
        btn.addEventListener('click', () => openArtifactModal(btn.dataset.artifactId));
    });

    // ── Traces ──────────────────────────────────────────────────────────
    (async function loadTraces() {
        const container = document.getElementById('traces-container');
        try {
            const res = await fetch('/api/traces?task_id={{ task.task_id }}&limit=20');
            const traces = await res.json();
            if (!traces.length) {
                container.innerHTML = '<p class="empty-copy">No execution traces recorded for this task.</p>';
                return;
            }
            let html = '<table class="detail-table"><thead><tr>' +
                '<th>Trace</th><th>Capability</th><th>Status</th><th>Started</th><th>Duration</th><th></th>' +
                '</tr></thead><tbody>';
            for (const t of traces) {
                const start = t.start_time || '';
                let duration = '—';
                if (t.start_time && t.end_time) {
                    const ms = new Date(t.end_time) - new Date(t.start_time);
                    duration = ms < 1000 ? ms + 'ms' : (ms / 1000).toFixed(1) + 's';
                }
                const statusClass = t.status === 'ok' ? 'done' : t.status === 'error' ? 'failed' : 'running';
                html += `<tr>
                    <td><code style="font-size:0.78rem">${t.trace_id.slice(0, 16)}...</code></td>
                    <td>${t.capability_name || '—'}</td>
                    <td><span class="pill pill-${statusClass}">${t.status}</span></td>
                    <td style="color:var(--muted);font-size:0.82rem">${start}</td>
                    <td>${duration}</td>
                    <td><button class="btn-ghost trace-view-btn" style="padding:4px 10px;font-size:0.78rem"
                                data-trace-id="${t.trace_id}">View spans</button></td>
                </tr>`;
            }
            html += '</tbody></table>';
            container.innerHTML = html;

            container.querySelectorAll('.trace-view-btn').forEach(btn => {
                btn.addEventListener('click', () => openTraceModal(btn.dataset.traceId));
            });
        } catch (err) {
            container.innerHTML = '<p class="empty-copy">Failed to load traces.</p>';
        }
    })();

    async function openTraceModal(traceId) {
        const modal = document.getElementById('trace-modal');
        const body = document.getElementById('trace-modal-body');
        const title = document.getElementById('trace-modal-title');
        const meta = document.getElementById('trace-modal-meta');
        modal.hidden = false;
        body.innerHTML = '<p>Loading...</p>';
        title.textContent = 'Trace ' + traceId.slice(0, 20) + '...';
        meta.textContent = '';

        try {
            const res = await fetch('/api/traces/' + traceId);
            const trace = await res.json();
            meta.textContent = `${trace.capability_name || ''} · ${trace.status}`;

            let attrs = {};
            try { attrs = JSON.parse(trace.attributes_json || '{}'); } catch(e) {}

            let html = '<div style="margin-bottom:16px">';
            if (attrs['llm.model']) html += `<strong>Model:</strong> ${attrs['llm.model']}&nbsp;&nbsp;`;
            if (attrs['llm.provider']) html += `<strong>Provider:</strong> ${attrs['llm.provider']}&nbsp;&nbsp;`;
            if (attrs['llm.iterations'] !== undefined) html += `<strong>Iterations:</strong> ${attrs['llm.iterations']}&nbsp;&nbsp;`;
            if (attrs['llm.tokens.total_prompt'] !== undefined)
                html += `<strong>Tokens:</strong> ${Number(attrs['llm.tokens.total_prompt']).toLocaleString()} prompt + ${Number(attrs['llm.tokens.total_completion']).toLocaleString()} completion`;
            html += '</div>';

            if (trace.spans && trace.spans.length) {
                html += '<div class="trace-spans">';
                for (const span of trace.spans) {
                    let sAttrs = {};
                    try { sAttrs = JSON.parse(span.attributes_json || '{}'); } catch(e) {}
                    const statusClass = span.status === 'ok' ? 'done' : span.status === 'error' ? 'failed' : 'running';
                    let dur = '—';
                    if (span.start_time && span.end_time) {
                        const ms = new Date(span.end_time) - new Date(span.start_time);
                        dur = ms < 1000 ? ms + 'ms' : (ms / 1000).toFixed(1) + 's';
                    }
                    const indent = span.parent_span_id ? 'padding-left:24px;' : '';

                    html += `<div style="border-left:3px solid var(--border);${indent}padding:8px 12px;margin-bottom:4px;border-radius:4px;background:var(--surface)">
                        <div style="display:flex;justify-content:space-between;align-items:center">
                            <div>
                                <strong>${span.name}</strong>
                                <span style="color:var(--muted);font-size:0.8rem;margin-left:8px">${span.kind}</span>
                            </div>
                            <div style="display:flex;gap:8px;align-items:center">
                                <span style="font-size:0.82rem">${dur}</span>
                                <span class="pill pill-${statusClass}" style="font-size:0.72rem">${span.status}</span>
                            </div>
                        </div>`;

                    // Show key attributes
                    const attrEntries = Object.entries(sAttrs).filter(([k]) =>
                        !k.startsWith('llm.iteration') && !k.startsWith('tool.call_id')
                    );
                    if (attrEntries.length) {
                        html += '<div style="margin-top:6px;font-size:0.78rem;color:var(--muted)">';
                        for (const [k, v] of attrEntries.slice(0, 8)) {
                            const display = typeof v === 'string' && v.length > 120 ? v.slice(0, 120) + '...' : v;
                            html += `<span style="margin-right:12px"><code>${k}</code>: ${display}</span>`;
                        }
                        if (attrEntries.length > 8) html += `<span>... +${attrEntries.length - 8} more</span>`;
                        html += '</div>';
                    }

                    // Show error message
                    if (sAttrs['error.message']) {
                        html += `<div style="margin-top:6px;padding:6px 8px;background:var(--danger-bg,#3a1a1a);border-radius:4px;font-size:0.8rem;color:var(--danger,#f87171)">
                            ${sAttrs['error.message'].slice(0, 500)}
                        </div>`;
                    }

                    html += '</div>';
                }
                html += '</div>';
            } else {
                html += '<p class="empty-copy">No spans recorded.</p>';
            }

            body.innerHTML = html;
        } catch (err) {
            body.innerHTML = '<p>Failed to load trace details.</p>';
        }
    }

    // Close trace modal
    document.getElementById('trace-modal-close').addEventListener('click', () => {
        document.getElementById('trace-modal').hidden = true;
    });
    document.querySelector('#trace-modal .artifact-modal-backdrop').addEventListener('click', () => {
        document.getElementById('trace-modal').hidden = true;
    });
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') document.getElementById('trace-modal').hidden = true;
    });
</script>
{% endblock %}