import { showModal, closeModal } from './modal-base.js';
import { state, CLIENT_COLORS, DEFAULT_COLOR, genId, generateUUID } from '../state.js';

let _cb = null;

export function showClientSelectModal(callback) {
    _cb = callback;

    if (state.clients.length === 0) {
        // Нет клиентов — предлагаем создать
        showModal(`
            <div class="modal-content">
                <h3 class="modal-title">👤 Нет клиентов</h3>
                <p class="text-muted">Сначала добавьте клиента в настройках.</p>
                <div class="btn-row">
                    <button class="btn btn-secondary" onclick="ModalBase.closeModal()">Отмена</button>
                    <button class="btn" onclick="ClientSelectModal.goToSettings()">⚙️ В настройки</button>
                </div>
            </div>
        `);
        return;
    }

    const clientsHtml = state.clients.map(c => `
        <div class="client-select-item" onclick="ClientSelectModal.select('${c.id}')"
             style="border-left: 4px solid ${c.color || DEFAULT_COLOR};">
            <div style="flex:1;">
                <div style="font-weight:600;">${c.full_name}</div>
                <div class="text-small text-muted">${c.goal || '—'}</div>
            </div>
            <span style="color:var(--text-secondary);">›</span>
        </div>
    `).join('');

    showModal(`
        <div class="modal-content">
            <h3 class="modal-title">👤 Для кого тренировка?</h3>
            <div class="client-select-list">
                ${clientsHtml}
            </div>
            <div class="btn-row" style="margin-top:16px;">
                <button class="btn btn-secondary" onclick="ModalBase.closeModal()">Отмена</button>
            </div>
        </div>
    `);
}

export function select(clientId) {
    closeModal();
    if (_cb) _cb(parseInt(clientId));
}

export function goToSettings() {
    closeModal();
    window.SettingsLogic.show();
}

window.ClientSelectModal = { select, goToSettings };