import { showModal, closeModal, stepperHtml } from './modal-base.js';

let _cb = null;

export function showCardioDialog(existing, callback) {
    _cb = callback;
    const e = existing || {};
    showModal(`<div class="modal-content">
        <h3 class="modal-title">${existing ? 'Редактировать' : 'Новое'} кардио</h3>
        <div class="field-row">
            <div class="field-group"><label>Тип</label><select id="m-ct">
                <option value="вело" ${e.type==='вело'?'selected':''}>🚴 Вело</option>
                <option value="ходьба" ${e.type==='ходьба'?'selected':''}>🚶 Ходьба</option>
                <option value="бег" ${e.type==='бег'?'selected':''}>🏃 Бег</option>
                <option value="эллипс" ${e.type==='эллипс'?'selected':''}>⚡ Эллипс</option>
                <option value="гребля" ${e.type==='гребля'?'selected':''}>🚣 Гребля</option>
            </select></div>
            <div class="field-group"><label>Назначение</label><select id="m-cp">
                <option value="warmup" ${e.purpose==='warmup'?'selected':''}>🔥 Разминка</option>
                <option value="cooldown" ${e.purpose==='cooldown'?'selected':''}>🧘 Заминка</option>
                <option value="separate" ${e.purpose==='separate'?'selected':''}>➕ Отдельная</option>
            </select></div></div>
        <div class="field-row-3">
            <div class="field-group"><label>Минут</label>${stepperHtml('m-cd', e.duration??'', 1, 'мин', 'numeric')}</div>
            <div class="field-group"><label>Дист.</label>${stepperHtml('m-cdi', e.distance??'', 0.1, 'км')}</div>
            <div class="field-group"><label>Скор.</label>${stepperHtml('m-cs', e.speed??'', 0.5, 'км/ч')}</div></div>
        <div class="field-row">
            <div class="field-group"><label>Наклон</label>${stepperHtml('m-ci', e.incline??'', 0.5, '—')}</div>
            <div class="field-group"><label>Сопр.</label>${stepperHtml('m-cr', e.resistance??'', 1, '—', 'numeric')}</div></div>
        <div class="field-group"><label>Заметка</label><input type="text" id="m-cn" value="${e.notes||''}"></div>
        <div class="btn-row">
            <button class="btn btn-secondary" onclick="ModalBase.closeOnBg({target:document.querySelector('.modal-overlay')})">Отмена</button>
            <button class="btn btn-success" onclick="CardioModal.submit()">Сохранить</button></div>
    </div>`);
}

export function submit() {
    // 1. Сначала считываем все значения, пока модалка ещё в DOM
    const result = {
        type: document.getElementById('m-ct').value,
        purpose: document.getElementById('m-cp').value,
        duration: parseInt(document.getElementById('m-cd').value) || 0,
        distance: parseFloat(document.getElementById('m-cdi').value) || 0,
        speed: parseFloat(document.getElementById('m-cs').value) || 0,
        incline: parseFloat(document.getElementById('m-ci').value) || 0,
        resistance: parseInt(document.getElementById('m-cr').value) || 0,
        notes: document.getElementById('m-cn').value.trim(),
    };

    // 2. Только теперь закрываем модалку
    closeModal();

    // 3. Отдаём результат
    _cb?.(result);
}

window.CardioModal = { submit };