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

let _cb = null;
let _names = [];

export function showExerciseDialog(workoutType, callback) {
    _cb = callback;
    const nameCount = {};
    state.exerciseRef.forEach(ex => {
        const bonus = (workoutType && ex.workoutType === workoutType) ? 100 : 10;
        nameCount[ex.name] = (nameCount[ex.name] || 0) + bonus;
    });
    state.workouts.forEach(w => w.exercises.forEach(ex => {
        nameCount[ex.name] = (nameCount[ex.name] || 0) + 1;
    }));
    _names = Object.keys(nameCount).sort((a, b) => {
        const d = nameCount[b] - nameCount[a];
        return d !== 0 ? d : a.localeCompare(b);
    });

    showModal(`<div class="modal-content">
        <h3 class="modal-title">Добавить упражнение</h3>
        <div class="field-group">
            <label>Название</label>
            <input type="text" id="m-ex-name" placeholder="Начните вводить..." oninput="ExerciseModal.filter()" autocomplete="off">
            <div id="m-ex-autocomplete" class="autocomplete-list"></div>
        </div>
        <div class="btn-row">
            <button class="btn btn-secondary" onclick="ModalBase.closeOnBg({target:document.querySelector('.modal-overlay')})">Отмена</button>
            <button class="btn" onclick="ExerciseModal.submit()">Добавить</button>
        </div>
    </div>`);
    setTimeout(() => { document.getElementById('m-ex-name').focus(); filter(); }, 50);
}

export function filter() {
    const q = document.getElementById('m-ex-name').value.trim().toLowerCase();
    const list = document.getElementById('m-ex-autocomplete');
    let f = _names;
    if (q) f = f.filter(n => n.toLowerCase().includes(q));
    if (!f.length) { list.innerHTML = '<div class="autocomplete-item text-muted">Нет совпадений</div>'; return; }
    list.innerHTML = f.slice(0, 15).map(name => {
        const count = state.workouts.reduce((s, w) => s + w.exercises.filter(e => e.name === name).length, 0);
        return `<div class="autocomplete-item" onclick="ExerciseModal.select('${name.replace(/'/g, "\\'")}')">${name}${count ? `<span class="freq">${count}×</span>` : ''}</div>`;
    }).join('');
}

export function select(name) {
    document.getElementById('m-ex-name').value = name;
    document.getElementById('m-ex-autocomplete').innerHTML = '';
}

export function submit() {
    const name = document.getElementById('m-ex-name').value.trim();
    closeModal();
    if (name && _cb) _cb(name);
}

window.ExerciseModal = { filter, select, submit };