{% extends "base.html" %}
{% block title %}Dashboard — Aura{% endblock %}

{% block content %}
<div style="margin-bottom: 1.5rem; display:flex; align-items:center; justify-content:space-between;">
    <div>
        <h1 style="font-size: 1.3rem; font-weight: 700;">Dashboard</h1>
        <p style="color: #9ca3af; font-size: 0.85rem; margin-top: 0.2rem;">
            Connecté à <strong>{{ config.api_endpoint }}</strong>
        </p>
    </div>
    <span id="status-badge" class="badge badge-gray">Inactif</span>
</div>

<!-- Statut tracking -->
<div class="card" id="tracking-card">
    <h2>Tracking CO2</h2>
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem;">
        <div>
            <div style="color: #9ca3af; font-size: 0.75rem; margin-bottom: 0.3rem;">DURÉE</div>
            <div id="stat-duration" style="font-size: 1.4rem; font-weight: 700;">—</div>
        </div>
        <div>
            <div style="color: #9ca3af; font-size: 0.75rem; margin-bottom: 0.3rem;">ÉMISSIONS</div>
            <div id="stat-emissions" style="font-size: 1.4rem; font-weight: 700;">—</div>
        </div>
        <div>
            <div style="color: #9ca3af; font-size: 0.75rem; margin-bottom: 0.3rem;">PROJET</div>
            <div id="stat-project" style="font-size: 1rem; font-weight: 600; color: #7c6af7;">
                {{ config.default_project or "—" }}
            </div>
        </div>
    </div>

    <div style="display: flex; gap: 0.75rem; align-items: center;">
        <div style="flex: 1;">
            <input type="text" id="project-input"
                   placeholder="Nom du projet (optionnel)"
                   style="margin: 0;">
        </div>
        <button id="btn-start" class="btn btn-primary" onclick="startTracking()">Démarrer</button>
        <button id="btn-stop"  class="btn btn-danger"  onclick="stopTracking()" style="display:none;">Arrêter</button>
        <button id="btn-flush" class="btn btn-outline" onclick="flushTracking()" style="display:none;">Flush</button>
    </div>
</div>

<!-- Config résumée -->
<div class="card">
    <h2>Configuration</h2>
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.85rem;">
        {% for key, val in config.items() %}
        <div style="color: #9ca3af;">{{ key }}</div>
        <div>{{ val }}</div>
        {% endfor %}
    </div>
    <div style="margin-top: 1rem;">
        <a href="/settings" class="btn btn-outline" style="font-size:0.8rem;">Modifier</a>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let pollInterval = null;

async function fetchStatus() {
    const res = await fetch('/tracker/status');
    const data = await res.json();

    const badge = document.getElementById('status-badge');
    const btnStart = document.getElementById('btn-start');
    const btnStop  = document.getElementById('btn-stop');
    const btnFlush = document.getElementById('btn-flush');

    if (data.running) {
        badge.className = 'badge badge-green';
        badge.textContent = '● En cours';
        btnStart.style.display = 'none';
        btnStop.style.display  = 'inline-block';
        btnFlush.style.display = 'inline-block';

        const dur = data.duration_seconds;
        document.getElementById('stat-duration').textContent = dur
            ? formatDuration(dur) : '...';
        if (data.project_name)
            document.getElementById('stat-project').textContent = data.project_name;
    } else {
        badge.className = 'badge badge-gray';
        badge.textContent = 'Inactif';
        btnStart.style.display = 'inline-block';
        btnStop.style.display  = 'none';
        btnFlush.style.display = 'none';
        if (data.emissions !== null && data.emissions !== undefined) {
            document.getElementById('stat-emissions').textContent =
                (data.emissions * 1000).toFixed(4) + ' g CO₂';
        }
    }
}

async function startTracking() {
    const projectName = document.getElementById('project-input').value.trim();
    await fetch('/tracker/start', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ project_name: projectName || null }),
    });
    fetchStatus();
    pollInterval = setInterval(fetchStatus, 5000);
}

async function stopTracking() {
    const res = await fetch('/tracker/stop', { method: 'POST' });
    const data = await res.json();
    clearInterval(pollInterval);
    if (data.emissions !== null) {
        document.getElementById('stat-emissions').textContent =
            (data.emissions * 1000).toFixed(4) + ' g CO₂';
    }
    fetchStatus();
}

async function flushTracking() {
    await fetch('/tracker/flush', { method: 'POST' });
}

function formatDuration(seconds) {
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    const s = Math.floor(seconds % 60);
    return [h, m, s].map(v => String(v).padStart(2, '0')).join(':');
}

// Initialisation
fetchStatus();
</script>
{% endblock %}