{% extends "base.html" %}

{% block content %}
<section class="hero">
    <div>
        <p class="eyebrow">Overview</p>
        <h1>All Projects</h1>
        <p class="subtitle">Inspect project health, runtime state, and artifact production from one place.</p>
    </div>
</section>

<section class="stats-grid">
    <article class="stat-card">
        <span class="stat-label">Projects</span>
        <strong>{{ project_count }}</strong>
    </article>
    <article class="stat-card">
        <span class="stat-label">Task States</span>
        <strong>{{ task_state_counts|length }}</strong>
    </article>
    <article class="stat-card">
        <span class="stat-label">Project States</span>
        <strong>{{ project_state_counts|length }}</strong>
    </article>
</section>

<section class="panel">
    <div class="panel-header">
        <h2>Projects</h2>
        <a href="{{ url_for('chat_new') }}" class="btn-primary" style="font-size:0.85rem;padding:9px 18px">+ New Chat</a>
    </div>
    {% if projects %}
    <div class="project-grid">
        {% for project in projects %}
        <div class="project-card">
            <a class="project-card-link" href="{{ url_for('project_chat', project_id=project.project_id) }}">
                <div class="project-card-top">
                    <div>
                        <h3>{{ project.title }}</h3>
                        <p>{{ project.slug }}</p>
                    </div>
                    <span class="pill pill-{{ project.state }}">{{ project.state }}</span>
                </div>
                <div class="mini-stats">
                    <span>{{ project.goal_count }} goals</span>
                    <span>{{ project.task_count }} tasks</span>
                    <span>{{ project.done_task_count }} done</span>
                    <span>{{ project.artifact_count }} artifacts</span>
                </div>
            </a>
            <div class="project-card-actions">
                <button class="btn-danger btn-sm delete-project-btn" data-project-id="{{ project.project_id }}" data-project-title="{{ project.title }}">Delete</button>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <h3>No projects yet</h3>
        <p>Initialize the database and start adding runtime data to see the dashboard populate.</p>
    </div>
    {% endif %}
</section>
<script>
    document.querySelectorAll('.delete-project-btn').forEach(btn => {
        btn.addEventListener('click', async (e) => {
            e.preventDefault();
            e.stopPropagation();
            const title = btn.dataset.projectTitle;
            if (!confirm(`Delete "${title}" and all its tasks, artifacts, and messages? This cannot be undone.`)) return;
            const res = await fetch(`/api/projects/${btn.dataset.projectId}`, { method: 'DELETE' });
            if (res.ok) {
                btn.closest('.project-card').remove();
            } else {
                alert('Failed to delete project.');
            }
        });
    });
</script>
{% endblock %}