{% extends "base.html" %}

{% 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>
        <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>
        <p>Edges are inferred from produced and required artifact declarations.</p>
    </div>
    <div class="graph-wrap">
        <svg id="task-graph" class="task-graph" aria-label="Task dependency graph"></svg>
    </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>

<!-- Artifact viewer modal -->
<div id="artifact-modal" class="artifact-modal" hidden>
    <div class="artifact-modal-backdrop"></div>
    <div class="artifact-modal-box">
        <div class="artifact-modal-header">
            <div>
                <strong id="artifact-modal-key"></strong>
                <span id="artifact-modal-meta" style="color:var(--muted);font-size:0.82rem;margin-left:10px"></span>
            </div>
            <div style="display:flex;gap:8px">
                <a id="artifact-modal-download" class="btn-ghost" style="padding:6px 14px;font-size:0.82rem" download>Download</a>
                <button class="btn-ghost" id="artifact-modal-close" style="padding:6px 14px;font-size:0.82rem">Close</button>
            </div>
        </div>
        <div id="artifact-modal-body" class="artifact-modal-body"></div>
    </div>
</div>

<script id="graph-data" type="application/json">{{ graph_json|safe }}</script>
<script src="{{ url_for('static', path='/graph.js') }}"></script>
<script src="{{ url_for('static', path='/artifact-viewer.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.');
        }
    });
</script>
<script>
    document.querySelectorAll('.artifact-view-btn').forEach(btn => {
        btn.addEventListener('click', () => openArtifactModal(btn.dataset.artifactId));
    });
</script>
{% endblock %}