<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Training Tracker</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>
<body>
    <div id="app">

        <!-- ==================== LOGIN / REGISTRO ==================== -->
        <div id="auth-screen" class="auth-screen">
            <div class="auth-card">
                <h1 class="app-logo auth-logo">Training Tracker</h1>

                <!-- Login form -->
                <div id="auth-login">
                    <h2 class="card-title">Iniciar sesión</h2>
                    <div class="form-group">
                        <label class="field-label">Usuario</label>
                        <input type="text" id="login-user" class="input-field" placeholder="Nombre de usuario" autocomplete="username">
                    </div>
                    <div class="form-group">
                        <label class="field-label">Contraseña</label>
                        <input type="password" id="login-pass" class="input-field" placeholder="Contraseña" autocomplete="current-password">
                    </div>
                    <button id="btn-login" class="btn btn-primary btn-block">Entrar</button>
		    <p class="auth-switch"><a href="#" id="show-register"></a></p>
                </div>

                <!-- Register form -->
                <div id="auth-register" style="display:none;">
                    <h2 class="card-title">Crear cuenta</h2>
                    <div class="form-group">
                        <label class="field-label">Usuario</label>
                        <input type="text" id="reg-user" class="input-field" placeholder="Nombre de usuario" autocomplete="username">
                    </div>
                    <div class="form-group">
                        <label class="field-label">Correo</label>
                        <input type="email" id="reg-email" class="input-field" placeholder="correo@ejemplo.com" autocomplete="email">
                    </div>
                    <div class="form-group">
                        <label class="field-label">Contraseña</label>
                        <input type="password" id="reg-pass" class="input-field" placeholder="Mínimo 4 caracteres" autocomplete="new-password">
                    </div>
                    <div class="form-group">
                        <label class="field-label">Edad (opcional)</label>
                        <input type="number" id="reg-age" class="input-field" placeholder="Edad" min="10" max="120">
                    </div>
                    <button id="btn-register" class="btn btn-primary btn-block">Crear cuenta</button>
                    <p class="auth-switch">¿Ya tienes cuenta? <a href="#" id="show-login">Inicia sesión</a></p>
                </div>

                <div id="auth-error" class="auth-error"></div>
            </div>
        </div>

        <!-- ==================== APP PRINCIPAL ==================== -->
        <div id="main-app" style="display:none;">

            <!-- Header -->
            <header class="app-header">
                <h1 class="app-logo">Training Tracker</h1>
                <div class="header-right">
                    <span id="header-user" class="header-user"></span>
                    <button id="btn-logout" class="btn-icon" title="Cerrar sesión">
                        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
                            <polyline points="16 17 21 12 16 7"/>
                            <line x1="21" y1="12" x2="9" y2="12"/>
                        </svg>
                    </button>
                </div>
            </header>

            <!-- Navigation -->
            <nav class="bottom-nav">
                <button class="nav-btn active" data-section="entrenar">
                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6.5 6.5h11M12 3v3M4 12h2m12 0h2M6 12a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM18 12a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM6 12h12M6 15a1.5 1.5 0 100-3M18 15a1.5 1.5 0 100-3"/></svg>
                    <span>Entrenar</span>
                </button>
                <button class="nav-btn" data-section="perfil">
                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M5 20c0-4 3.5-7 7-7s7 3 7 7"/></svg>
                    <span>Perfil</span>
                </button>
                <button class="nav-btn" data-section="informes">
                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="M7 16l4-6 4 4 5-8"/></svg>
                    <span>Informes</span>
                </button>
            </nav>

            <!-- SECTION: Entrenar -->
            <section id="sec-entrenar" class="section active">
                <div class="section-content">
                    <div class="card">
                        <label class="field-label">Fecha del entreno</label>
                        <input type="date" id="workout-date" class="input-field">
                    </div>

                    <!-- Quick-add: ejercicios programados para hoy -->
                    <div id="today-exercises" class="card today-exercises-card" style="display:none;">
                        <h2 class="card-title">Ejercicios de hoy</h2>
                        <div id="today-exercises-chips" class="chips-container"></div>
                    </div>

                    <div id="exercises-container"></div>
                    <button id="btn-add-exercise" class="btn btn-outline btn-block">
                        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                        Añadir ejercicio
                    </button>
                    <button id="btn-save-workout" class="btn btn-primary btn-block">
                        Guardar entreno
                    </button>
                </div>
            </section>

            <!-- SECTION: Perfil -->
            <section id="sec-perfil" class="section">
                <div class="section-content">
                    <div class="card">
                        <h2 class="card-title">Datos de usuario</h2>
                        <div class="form-group">
                            <label class="field-label">Nombre de usuario</label>
                            <input type="text" id="profile-name" class="input-field" disabled placeholder="Tu nombre">
                        </div>
                        <div class="form-group">
                            <label class="field-label">Correo</label>
                            <input type="email" id="profile-email" class="input-field" placeholder="correo@ejemplo.com">
                        </div>
                        <div class="form-group">
                            <label class="field-label">Edad</label>
                            <input type="number" id="profile-age" class="input-field" placeholder="Edad" min="10" max="120">
                        </div>
                        <button id="btn-save-profile" class="btn btn-primary btn-block">Guardar perfil</button>
                    </div>

                    <div class="card">
                        <h2 class="card-title">Registro de peso corporal</h2>
                        <div class="form-row">
                            <div class="form-group flex-1">
                                <label class="field-label">Peso (kg)</label>
                                <div class="stepper-control">
                                    <button class="stepper-btn" data-target="weight-input" data-step="-0.5">&minus;</button>
                                    <input type="number" id="weight-input" class="input-field input-center" step="0.1" min="20" max="300" placeholder="0.0">
                                    <button class="stepper-btn" data-target="weight-input" data-step="0.5">+</button>
                                </div>
                            </div>
                            <div class="form-group flex-1">
                                <label class="field-label">Fecha</label>
                                <input type="date" id="weight-date" class="input-field">
                            </div>
                        </div>
                        <button id="btn-save-weight" class="btn btn-primary btn-block">Registrar peso</button>
                    </div>

                    <!-- Historial + gráfica de peso lado a lado -->
                    <div class="card weight-history-card">
                        <h2 class="card-title">Historial de peso</h2>
                        <div class="weight-history-row">
                            <div class="weight-history-list-col">
                                <div id="weight-history" class="history-list"></div>
                            </div>
                            <div class="weight-history-chart-col">
                                <div class="chart-wrapper chart-wrapper-sm"><canvas id="chart-weight-evolution"></canvas></div>
                            </div>
                        </div>
                    </div>

                    <!-- Gestión de ejercicios -->
                    <div class="card exercises-config-card">
                        <h2 class="card-title">Mis ejercicios</h2>
                        <p class="text-muted" style="margin-bottom:12px;">Añade ejercicios, asigna categoría y días. Arrastra para reordenar.</p>

                        <!-- Añadir nuevo -->
                        <div class="config-add-row">
                            <input type="text" id="config-new-name" class="input-field" placeholder="Nombre del ejercicio" list="config-exercises-datalist">
                            <datalist id="config-exercises-datalist"></datalist>
                            <select id="config-new-cat" class="input-field input-cat">
                                <option value="no_categorizado">Sin cat.</option>
                                <option value="push">Push</option>
                                <option value="pull">Pull</option>
                                <option value="legs">Legs</option>
                            </select>
                            <button id="btn-config-add" class="btn btn-primary btn-sm">Añadir</button>
                        </div>

                        <!-- Lista editable y sortable -->
                        <div id="config-exercises-list" class="config-list"></div>

                        <button id="btn-config-save" class="btn btn-primary btn-block" style="margin-top:12px;">
                            Guardar orden y cambios
                        </button>
                    </div>

                    <!-- Vista previa del orden final -->
                    <div class="card exercises-config-card">
                        <h2 class="card-title">Orden en el desplegable</h2>
                        <p class="text-muted" style="margin-bottom:8px;">Así aparecerán los ejercicios al registrar un entreno.</p>
                        <ol id="config-preview-list" class="config-preview-list"></ol>
                    </div>
                </div>
            </section>

            <!-- SECTION: Informes -->
            <section id="sec-informes" class="section">
                <div class="section-content">
                    <div class="card">
                        <h2 class="card-title">Filtros</h2>
                        <div class="form-group">
                            <label class="field-label">Ejercicio</label>
                            <select id="report-exercise" class="input-field">
                                <option value="">-- Selecciona --</option>
                            </select>
                        </div>
                        <div class="form-row">
                            <div class="form-group flex-1">
                                <label class="field-label">Desde</label>
                                <input type="date" id="report-from" class="input-field">
                            </div>
                            <div class="form-group flex-1">
                                <label class="field-label">Hasta</label>
                                <input type="date" id="report-to" class="input-field">
                            </div>
                        </div>
                        <button id="btn-generate-reports" class="btn btn-primary btn-block">Generar informes</button>
                    </div>

                    <div class="card chart-card">
                        <h2 class="card-title">Peso máximo (PR)</h2>
                        <div class="chart-wrapper"><canvas id="chart-pr"></canvas></div>
                    </div>
                    <div class="card chart-card">
                        <h2 class="card-title">Volumen (Tonelaje)</h2>
                        <div class="chart-wrapper"><canvas id="chart-volume"></canvas></div>
                    </div>
                    <div class="card chart-card">
                        <h2 class="card-title">Repeticiones totales</h2>
                        <div class="chart-wrapper"><canvas id="chart-reps"></canvas></div>
                    </div>
                    <div class="card">
                        <h2 class="card-title">Resumen de progresos</h2>
                        <div id="progress-summary" class="history-list"></div>
                    </div>
                    <div class="card chart-card">
                        <h2 class="card-title">Fuerza relativa (peso levantado / peso corporal)</h2>
                        <div class="chart-wrapper"><canvas id="chart-relative"></canvas></div>
                    </div>
                </div>
            </section>

            <!-- Toast notifications -->
            <div id="toast-container"></div>

        </div><!-- /main-app -->

        <!-- Loading overlay -->
        <div id="loading-overlay" class="loading-overlay active">
            <div class="spinner"></div>
            <p>Conectando...</p>
        </div>
    </div>

    <script src="js/logger.js"></script>
    <script src="js/db.js"></script>
    <script src="js/app.js"></script>
</body>
</html>
