import { state, saveState } from '../state.js';
import { showEditExerciseDialog } from '../modals/edit-exercise-modal.js';

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

    const screen = document.createElement('div');
    screen.className = 'settings-screen';
    screen.innerHTML = `
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
            <h2>⚙️ Настройки</h2>
            <button class="btn btn-small btn-secondary" onclick="App.backToMain()">← Назад</button>
        </div>
        <div class="settings-section">
            <h3>📋 Справочник упражнений</h3>
            <p class="text-muted text-small mb-10">Управляйте списком упражнений и привязывайте их к типам тренировок.</p>
            <div class="field-group">
                <div style="display:flex; gap:6px;">
                    <input type="text" id="new-ref-exercise" placeholder="Новое упражнение...">
                    <select id="new-ref-type" style="width: auto; min-width: 120px;">
                        <option value="">тип...</option>
                        <option value="грудь-руки">грудь-руки</option>
                        <option value="ноги">ноги</option>
                        <option value="спина-плечи">спина-плечи</option>
                        <option value="круговая">круговая</option>
                        <option value="силовая">силовая</option>
                        <option value="многоповторная">многоповторная</option>
                    </select>
                    <button class="btn btn-small" style="width:auto; padding: 0 20px;" onclick="SettingsLogic.addRefExercise()">+</button>
                </div>
            </div>
            <div id="ref-exercises-list"></div>
        </div>
        <div class="settings-section">
            <h3>📏 Замеры тела</h3>
            <div id="body-metrics-list"></div>
        </div>
        <div class="settings-section">
            <h3>🗑 Данные</h3>
            <button class="btn btn-danger" onclick="SettingsLogic.clearAllData()">Очистить все данные</button>
        </div>
    `;
    app.appendChild(screen);
    _renderRefExercises();
    _renderBodyMetricsList();
}

export function addRefExercise() {
    const input = document.getElementById('new-ref-exercise');
    const typeSelect = document.getElementById('new-ref-type');
    const name = input.value.trim();
    if (!name) return;
    const normalizedName = name.trim().toLowerCase();
    const exists = state.exerciseRef.find(
        e => e.name.trim().toLowerCase() === normalizedName
    );
    if (!exists) {
        state.exerciseRef.push({
            id: (state.nextId++).toString(),
            name: name.trim(),
            workoutType: typeSelect.value,
        });
    }
    saveState();
    input.value = '';
    typeSelect.value = '';
    _renderRefExercises();
}

export function deleteRefExercise(id) {
    if (!confirm('Удалить из справочника? (в тренировках останется)')) return;
    state.exerciseRef = state.exerciseRef.filter(e => e.id !== id);
    saveState();
    _renderRefExercises();
}

export function updateRefExerciseType(id, newType) {
    const ex = state.exerciseRef.find(e => e.id === id);
    if (ex) {
        ex.workoutType = newType;
        saveState();
    }
}

export function editRefExercise(id) {
    const ex = state.exerciseRef.find(e => e.id === id);
    if (!ex) return;
    showEditExerciseDialog(ex, (updatedData) => {
        if (!updatedData) return;
        Object.assign(ex, updatedData);
        saveState();
        _renderRefExercises();
    });
}

export function clearAllData() {
    if (!confirm('Удалить ВСЕ данные? Это действие необратимо!')) return;
    if (!confirm('Точно уверены?')) return;
    localStorage.clear();
    location.reload();
}

export function _renderRefExercises() {
    const list = document.getElementById('ref-exercises-list');
    if (!list) return;
    if (state.exerciseRef.length === 0) {
        list.innerHTML = '<p class="text-muted text-small">Справочник пуст</p>';
        return;
    }
    const sorted = [...state.exerciseRef].sort((a, b) => {
        if (a.workoutType !== b.workoutType) return (a.workoutType || '').localeCompare(b.workoutType || '');
        return a.name.localeCompare(b.name);
    });

    // Генерируем опции для select динамически из state.workoutTypes
    const typeOptions = state.workoutTypes.map(wt =>
        `<option value="${wt.name}" ${a => a.workoutType === wt.name ? 'selected' : ''}>${wt.name}</option>`
    ).join('');

    list.innerHTML = sorted.map(ex => {
        let count = 0;
        state.workouts.forEach(w => {
            w.exercises.forEach(e => {
                if (e.name.trim().toLowerCase() === ex.name.trim().toLowerCase()) count++;
            });
        });
        return `
            <div class="exercise-ref-item">
                <div style="flex:1;">
                    <span class="name">${ex.name}</span>
                    <span class="count">(${count}×)</span>
                    ${ex.workoutType ? `<span class="type-badge">${ex.workoutType}</span>` : ''}
                </div>
                <div style="display:flex; gap:4px; align-items:center;">
                    <select onchange="SettingsLogic.updateRefExerciseType('${ex.id}', this.value)"
                            style="width:auto; min-width:100px; padding:6px; font-size:0.8rem;">
                        <option value="">тип...</option>
                        ${state.workoutTypes.map(wt => `<option value="${wt.name}" ${ex.workoutType === wt.name ? 'selected' : ''}>${wt.name}</option>`).join('')}
                    </select>
                    <button class="icon-btn" onclick="SettingsLogic.editRefExercise('${ex.id}')">✎</button>
                    <button class="icon-btn danger" onclick="SettingsLogic.deleteRefExercise('${ex.id}')">✕</button>
                </div>
            </div>
        `;
    }).join('');
}

// Добавим отображение типов замеров в настройки (для тренера)
export function _renderMetricTypes() {
    const container = document.getElementById('metric-types-list');
    if (!container) return;
    if (state.metricTypes.length === 0) {
        container.innerHTML = '<p class="text-muted text-small">Нет типов замеров</p>';
        return;
    }
    container.innerHTML = state.metricTypes.map(mt => `
        <div class="exercise-ref-item">
            <div>
                <span class="name">${mt.name}</span>
                <span class="type-badge">${mt.unit}</span>
            </div>
        </div>
    `).join('');
}

export function _renderBodyMetricsList() {
    const list = document.getElementById('body-metrics-list');
    if (!list) return;
    if (state.bodyMetrics.length === 0) {
        list.innerHTML = '<p class="text-muted text-small">Нет замеров</p>';
        return;
    }
    list.innerHTML = state.bodyMetrics.map(m => {
        const date = new Date(m.date);
        const dateStr = date.toLocaleDateString('ru-RU') + ' ' + date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
        const parts = [];
        if (m.weight) parts.push(`⚖️ ${m.weight} кг`);
        if (m.chest) parts.push(`📏 ${m.chest} см`);
        if (m.waist) parts.push(`📏 ${m.waist} см`);
        if (m.hips) parts.push(`📏 ${m.hips} см`);
        if (m.arms) parts.push(`💪 ${m.arms} см`);
        if (m.legs) parts.push(`🦵 ${m.legs} см`);
        return `
            <div class="exercise-ref-item">
                <div>
                    <div style="font-weight:500;">${dateStr}</div>
                    <div class="text-small text-muted">${parts.join(' • ') || '—'}</div>
                </div>
                <div style="display:flex; gap:4px;">
                    <button class="icon-btn" onclick="ML.editBodyMetric('${m.id}')">✎</button>
                    <button class="icon-btn danger" onclick="ML.deleteMetric('${m.id}')">✕</button>
                </div>
            </div>
        `;
    }).join('');
}

window.SettingsLogic = {
    show: showSettings,
    addRefExercise, deleteRefExercise, updateRefExerciseType,
    editRefExercise, clearAllData,
    _renderRefExercises, _renderBodyMetricsList,
};