import { loadState, saveState, state, updateSyncStatus } from './state.js';
import { renderMainScreen } from './render/main-screen.js';
import { sync, initAppData } from './sync.js';

// Подключаем logic-модули
import './logic/workout.js';
import './logic/exercise.js';
import './logic/set.js';
import './logic/cardio.js';
import './logic/metrics.js';
import './logic/settings.js';

// Подключаем модалки
import './modals/modal-base.js';
import './modals/exercise-modal.js';
import './modals/set-modal.js';
import './modals/cardio-modal.js';
import './modals/metrics-modal.js';
import './modals/client-select-modal.js';
import './modals/edit-exercise-modal.js';
import './modals/edit-workout-date-modal.js';

function renderHeader() {
    const modeLabel = state.mode === 'trainer' ? '👨‍🏫 Тренер' : '👤 Личный';
    document.getElementById('app-header').innerHTML = `
        <div>
            <h2>Gym Bro <span style="font-size:0.8rem; color:var(--text-secondary); font-weight:400;">(${modeLabel})</span></h2>
            <div id="sync-status" class="sync-status">● Локально</div>
        </div>
        <div class="header-actions">
            <button class="icon-btn header-btn" onclick="App.toggleMode()" title="Сменить режим">🔄</button>
            <button class="icon-btn header-btn" onclick="ML.showBodyMetrics()" title="Личные замеры">📏</button>
            <button class="icon-btn header-btn" onclick="SettingsLogic.show()" title="Настройки">⚙️</button>
            <button class="btn btn-small btn-secondary" onclick="AppSync.sync()" title="Синхронизация">🔄</button>
        </div>
    `;
}

async function init() {
    loadState();
    renderHeader();
    renderMainScreen();
    updateSyncStatus();

    // Загружаем справочники с бэкенда в фоне
    await initAppData();
}

window.App = {
    getWorkout: (id) => state.workouts.find(w => w.id === id),
    saveAndRender: () => { saveState(); },
    toggleMode: () => {
        state.mode = state.mode === 'personal' ? 'trainer' : 'personal';
        saveState();
        renderHeader();
        renderMainScreen();
    },
    backToMain: () => renderMainScreen(),
};
window.AppSync = { sync };

// Делаем renderMainScreen доступным глобально
window.renderMainScreen = renderMainScreen;

document.addEventListener('DOMContentLoaded', init);