{% extends "base.html" %}

{% block head %}{% endblock %}

{% block content %}
<section class="hero">
    <div>
        <p class="eyebrow">Project</p>
        <h1>{{ project.title }}</h1>
        <p class="subtitle">{{ project.slug }} · Runtime state: <span class="pill pill-{{ project.state }}">{{ project.state }}</span></p>
    </div>
    <div class="hero-actions" style="display:flex;gap:10px;align-items:center">
        <a class="btn-ghost" href="{{ url_for('dashboard') }}">Back to projects</a>
        {% if project.state in ('draft', 'activated') %}
        <button class="btn-ghost" id="pause-project-btn" data-action="pause">Pause</button>
        {% elif project.state == 'paused' %}
        <button class="btn-ghost" id="pause-project-btn" data-action="resume">Resume</button>
        {% endif %}
        <button class="btn-danger" id="delete-project-btn">Delete project</button>
    </div>
</section>

<section class="stats-grid">
    <article class="stat-card"><span class="stat-label">Goals</span><strong>{{ goals|length }}</strong></article>
    <article class="stat-card"><span class="stat-label">Tasks</span><strong>{{ tasks|length }}</strong></article>
    <article class="stat-card"><span class="stat-label">Artifacts</span><strong>{{ recent_artifacts|length }}</strong></article>
</section>

<section class="panel graph-panel">
    <div class="panel-header">
        <h2>Task DAG</h2>
        <div class="graph-legend">
            <span class="graph-legend-item legend-created">created / queued</span>
            <span class="graph-legend-item legend-running">running</span>
            <span class="graph-legend-item legend-done">done</span>
            <span class="graph-legend-item legend-failed">failed</span>
            <span class="graph-legend-item legend-blocked">blocked / paused</span>
        </div>
    </div>
    <div id="cy" class="cy-container"></div>
</section>

<div class="split-layout">
    <section class="panel">
        <div class="panel-header"><h2>Tasks</h2></div>
        <div class="task-list">
            {% for task in tasks %}
            <a class="task-row" href="{{ url_for('task_detail', task_id=task.task_id) }}">
                <div>
                    <strong>{{ task.title }}</strong>
                    <p>{{ task.goal_title }} · {{ task.capability_name }}</p>
                </div>
                <span class="pill pill-{{ task.state }}">{{ task.state }}</span>
            </a>
            {% endfor %}
        </div>
    </section>

    <section class="panel">
        <div class="panel-header"><h2>Recent Artifacts</h2></div>
        <div class="artifact-list">
            {% for artifact in recent_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>
    </section>
</div>

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

<script id="graph-data" type="application/json">{{ graph_json|safe }}</script>
<script type="module" src="{{ url_for('static', path='/graph.js') }}"></script>
<script>
    document.getElementById('delete-project-btn').addEventListener('click', async () => {
        if (!confirm('Delete this project and all its tasks, artifacts, and messages? This cannot be undone.')) return;
        const res = await fetch('/api/projects/{{ project.project_id }}', { method: 'DELETE' });
        if (res.ok) {
            window.location.href = '/';
        } else {
            alert('Failed to delete project.');
        }
    });

    const pauseBtn = document.getElementById('pause-project-btn');
    if (pauseBtn) {
        pauseBtn.addEventListener('click', async () => {
            const action = pauseBtn.dataset.action;
            const res = await fetch('/api/projects/{{ project.project_id }}/' + action, { method: 'POST' });
            if (!res.ok) { alert('Action failed.'); return; }
            const data = await res.json();
            const newState = data.state;
            // Update subtitle pill
            document.querySelector('.subtitle .pill').className = `pill pill-${newState}`;
            document.querySelector('.subtitle .pill').textContent = newState;
            // Toggle button
            if (newState === 'paused') {
                pauseBtn.dataset.action = 'resume';
                pauseBtn.textContent = 'Resume';
            } else {
                pauseBtn.dataset.action = 'pause';
                pauseBtn.textContent = 'Pause';
            }
        });
    }
</script>
<script>
    document.querySelectorAll('.artifact-view-btn').forEach(btn => {
        btn.addEventListener('click', () => openArtifactModal(btn.dataset.artifactId));
    });

    // ── Project traces ──────────────────────────────────────────────────
    (async function loadTraces() {
        const container = document.getElementById('traces-container');
        try {
            const res = await fetch('/api/traces?project_id={{ project.project_id }}&limit=30');
            const traces = await res.json();
            if (!traces.length) {
                container.innerHTML = '<p class="empty-copy">No execution traces recorded yet.</p>';
                return;
            }
            let html = '<table class="detail-table"><thead><tr>' +
                '<th>Task</th><th>Capability</th><th>Status</th><th>Started</th><th>Duration</th>' +
                '</tr></thead><tbody>';
            for (const t of traces) {
                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><a href="/tasks/${t.task_id}" style="color:var(--accent)"><code style="font-size:0.78rem">${t.task_id.slice(0, 16)}...</code></a></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">${t.start_time || ''}</td>
                    <td>${duration}</td>
                </tr>`;
            }
            html += '</tbody></table>';
            container.innerHTML = html;
        } catch (err) {
            container.innerHTML = '<p class="empty-copy">Failed to load traces.</p>';
        }
    })();
</script>
{% endblock %}