// Рендеринг главного экрана: список тренировок.
// Получает данные из state, возвращает DOM.

import { state } from '../state.js';
import { renderWorkoutCard } from './workout-card.js';
import { startWorkout } from '../logic/workout.js';

export function renderMainScreen() {
    const app = document.getElementById('app');
    app.innerHTML = '';

    if (state.workouts.length === 0) {
        app.innerHTML = `
            <div class="empty-state">
                <h3>🏋️ Нет тренировок</h3>
                <p>Начните первую тренировку</p>
                <button class="btn" id="btn-start-first">▶ Начать тренировку</button>
            </div>
        `;
        document.getElementById('btn-start-first').onclick = startWorkout;
        return;
    }

    // Сортировка: активные сверху, завершённые снизу
    const sorted = [...state.workouts].sort((a, b) => {
        if (!a.endTime && b.endTime) return -1;
        if (a.endTime && !b.endTime) return 1;
        return new Date(b.startTime) - new Date(a.startTime);
    });

    const hasActive = sorted.some(w => !w.endTime);
    if (!hasActive) {
        const btn = document.createElement('button');
        btn.className = 'btn mb-10';
        btn.textContent = '▶ Начать новую тренировку';
        btn.onclick = startWorkout;
        app.appendChild(btn);
    }

    sorted.forEach(w => {
        app.appendChild(renderWorkoutCard(w));
    });
}