{% 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">
                {% if project.state in ('draft', 'activated') %}
                <button class="btn-ghost btn-sm pause-project-btn"
                        data-project-id="{{ project.project_id }}"
                        data-action="pause">Pause</button>
                {% elif project.state == 'paused' %}
                <button class="btn-ghost btn-sm pause-project-btn"
                        data-project-id="{{ project.project_id }}"
                        data-action="resume">Resume</button>
                {% endif %}
                <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.');
            }
        });
    });

    document.querySelectorAll('.pause-project-btn').forEach(btn => {
        btn.addEventListener('click', async (e) => {
            e.preventDefault();
            e.stopPropagation();
            const action = btn.dataset.action;
            const projectId = btn.dataset.projectId;
            const res = await fetch(`/api/projects/${projectId}/${action}`, { method: 'POST' });
            if (!res.ok) { alert('Action failed.'); return; }
            const data = await res.json();
            const newState = data.state;
            // Update state pill
            const pill = btn.closest('.project-card').querySelector('.pill');
            pill.className = `pill pill-${newState}`;
            pill.textContent = newState;
            // Toggle button
            if (newState === 'paused') {
                btn.dataset.action = 'resume';
                btn.textContent = 'Resume';
            } else {
                btn.dataset.action = 'pause';
                btn.textContent = 'Pause';
            }
        });
    });
</script>
{% endblock %}