import { state } from '../state.js';
import { renderSetRow } from './set-row.js';

export function renderExercise(w, ex, isReadOnly = false) {
    const isExpanded = state.expandedExerciseId === ex.id;
    const totalSets = ex.sets.length;
    const summary = totalSets > 0 ? `${totalSets} подх.` : '';

    const card = document.createElement('div');
    card.className = 'exercise-card';

    card.innerHTML = `
        <div class="exercise-header ${isExpanded ? 'expanded' : ''}" onclick="EL.toggleExercise('${ex.id}')">
            <div>
                <span class="exercise-name">${ex.name}</span>
                <span class="exercise-summary">${summary}</span>
            </div>
            <span class="chevron ${isExpanded ? 'open' : ''}">›</span>
        </div>
    `;

    const body = document.createElement('div');
    body.className = `exercise-body ${isExpanded ? 'expanded' : ''}`;

    if (isExpanded) {
        if (ex.sets.length > 0) {
            const table = document.createElement('div');
            table.className = 'sets-table';
            [...ex.sets].reverse().forEach((set, idx) => {
                const realIdx = ex.sets.length - 1 - idx;
                table.appendChild(renderSetRow(w.id, ex.id, set, realIdx, isReadOnly));
            });
            body.appendChild(table);
        } else {
            body.innerHTML += `<p class="text-muted text-small">Пока нет подходов</p>`;
        }

        if (!isReadOnly) {
            if (!w.endTime) {
                const addBtn = document.createElement('button');
                addBtn.className = 'btn mt-10';
                addBtn.textContent = '+ Добавить подход';
                addBtn.onclick = () => window.SL.addSet(w.id, ex.id);
                body.appendChild(addBtn);
            }
            const delBtn = document.createElement('button');
            delBtn.className = 'btn btn-ghost mt-10';
            delBtn.style.width = '100%';
            delBtn.textContent = 'Удалить упражнение';
            delBtn.onclick = (e) => {
                e.stopPropagation();
                window.EL.deleteExercise(w.id, ex.id);
            };
            body.appendChild(delBtn);
        }
    }

    card.appendChild(body);
    return card;
}