{% extends "base.html" %}
{% block title %}Settings · hevy2garmin{% endblock %}

{% block head %}
<style>
    .formula-box {
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 14px 18px;
        margin: 12px 0;
        font-family: 'Courier New', Courier, monospace;
        font-size: 14px;
        color: var(--accent);
        overflow-x: auto;
    }
    .section-description {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 16px;
        line-height: 1.6;
    }
    details.advanced-section > summary {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0;
        list-style: none;
    }
    details.advanced-section > summary::-webkit-details-marker { display: none; }
    details.advanced-section > summary svg { transition: transform 0.2s; }
    details.advanced-section[open] > summary svg { transform: rotate(90deg); }
    details.advanced-section > .advanced-content { margin-top: 16px; }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Settings</h1>
</div>

<form method="post" action="/settings">
    <!-- Credentials Section -->
    <div class="card section">
        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            <span class="card-title">Credentials</span>
        </div>
        <div class="form-group">
            <label class="form-label" for="hevy_api_key">Hevy API Key</label>
            <input class="form-input" type="password" id="hevy_api_key" name="hevy_api_key" placeholder="Leave blank to keep current">
        </div>
        <div class="form-grid">
            <div class="form-group">
                <label class="form-label" for="garmin_email">Garmin Email</label>
                <input class="form-input" type="password" id="garmin_email" name="garmin_email" placeholder="Leave blank to keep current">
            </div>
            <div class="form-group">
                <label class="form-label" for="garmin_password">Garmin Password</label>
                <input class="form-input" type="password" id="garmin_password" name="garmin_password" placeholder="Leave blank to keep current">
            </div>
        </div>
    </div>

    <!-- Profile Section -->
    <div class="card section">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
            <div style="display: flex; align-items: center; gap: 8px;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--blue)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                <span class="card-title">Profile</span>
            </div>
            <button
                type="button"
                class="btn btn-secondary btn-sm"
                hx-post="/api/pull-garmin-profile"
                hx-target="#garmin-profile-result"
                hx-indicator="#garmin-pull-ind"
            >
                <span class="htmx-hide">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
                    Pull from Garmin
                </span>
                <span class="htmx-indicator" id="garmin-pull-ind"><span class="spinner"></span></span>
            </button>
        </div>
        <div id="garmin-profile-result"></div>
        <p class="section-description">
            Used to estimate calories burned. The Keytel formula uses your weight, age, heart rate, and VO2max to compute kcal burned during each workout.
        </p>
        <div class="form-grid">
            <div class="form-group">
                <label class="form-label" for="weight_kg">Weight (kg)</label>
                <input class="form-input" type="number" id="weight_kg" name="weight_kg" value="{{ config.get('user_profile', {}).get('weight_kg', 80) }}" step="0.1">
            </div>
            <div class="form-group">
                <label class="form-label" for="birth_year">Birth Year</label>
                <input class="form-input" type="number" id="birth_year" name="birth_year" value="{{ config.get('user_profile', {}).get('birth_year', 1990) }}">
            </div>
            <div class="form-group">
                <label class="form-label" for="sex">Sex</label>
                <select class="form-select" id="sex" name="sex">
                    <option value="male" {{ 'selected' if config.get('user_profile', {}).get('sex', 'male') == 'male' }}>Male</option>
                    <option value="female" {{ 'selected' if config.get('user_profile', {}).get('sex') == 'female' }}>Female</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label" for="vo2max">VO2max</label>
                <input class="form-input" type="number" id="vo2max" name="vo2max" value="{{ config.get('user_profile', {}).get('vo2max', 45) }}" step="0.1">
                <div class="form-hint">Used in calorie formula. Auto-filled by "Pull from Garmin".</div>
            </div>
        </div>

        <!-- Calorie formula explanation -->
        <details style="margin-top: 16px;">
            <summary style="cursor: pointer; font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px;">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
                How are calories calculated?
            </summary>
            <div style="margin-top: 12px;">
                <div class="formula-box">kcal/min = (-95.7735 + 0.634 &times; <span style="color: #f43f5e;">HR</span> + 0.404 &times; <span style="color: #818cf8;">VO&#8322;max</span> + 0.394 &times; <span style="color: #fbbf24;">Weight</span> + 0.271 &times; <span style="color: #c084fc;">Age</span>) / 4.184</div>
                <div style="display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 12px;">
                    <span><span style="color: #f43f5e;">HR</span> = Garmin watch or default <strong>90 bpm</strong></span>
                    <span><span style="color: #818cf8;">VO&#8322;max</span> = <strong>{{ config.get('user_profile', {}).get('vo2max', 45) }}</strong></span>
                    <span><span style="color: #fbbf24;">Weight</span> = <strong>{{ config.get('user_profile', {}).get('weight_kg', 80) }} kg</strong></span>
                    <span><span style="color: #c084fc;">Age</span> = from birth year <strong>{{ config.get('user_profile', {}).get('birth_year', 1990) }}</strong></span>
                </div>
                <p style="font-size: 12px; color: var(--text-muted); margin-top: 10px; line-height: 1.6;">
                    Based on the <a href="https://pubmed.ncbi.nlm.nih.gov/15966347/" target="_blank" rel="noopener">Keytel et al. (2005)</a> prediction equation.
                    HR comes from Garmin daily monitoring if available, otherwise defaults to 90 bpm.
                    The rate is multiplied by workout duration to compute total kcal.
                </p>
            </div>
        </details>
    </div>

    <!-- HR Fusion Section -->
    <div class="card section">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
            <div style="display: flex; align-items: center; gap: 8px;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#f43f5e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
                <span class="card-title">Heart Rate Data</span>
            </div>
            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                <input type="hidden" name="hr_fusion_enabled" value="off">
                <input type="checkbox" name="hr_fusion_enabled" value="on" {{ 'checked' if config.get('hr_fusion', {}).get('enabled', True) }} style="width: 18px; height: 18px; accent-color: var(--accent);">
                <span style="font-size: 13px; color: var(--text-secondary);">Enabled</span>
            </label>
        </div>
        <p class="section-description">
            When enabled, your Garmin daily heart rate data is fetched and overlaid on workout charts — showing your actual HR during each exercise with color-coded segments.
            This requires a Garmin watch or HR monitor that records to Garmin Connect. Data is cached locally after first load.
        </p>
    </div>

    <!-- Enhance Watch Activities Section -->
    <div class="card section">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
            <div style="display: flex; align-items: center; gap: 8px;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
                <span class="card-title">Enhance Watch Activities</span>
            </div>
            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                <input type="hidden" name="merge_mode" value="off">
                <input type="checkbox" name="merge_mode" value="on" {{ 'checked' if config.get('merge_mode', True) }} style="width: 18px; height: 18px; accent-color: var(--accent);">
                <span style="font-size: 13px; color: var(--text-secondary);">Enabled</span>
            </label>
        </div>
        <p class="section-description">
            When you start a <strong>Strength Training</strong> activity on your Garmin watch at the gym, hevy2garmin will detect it and push your Hevy exercise data into that activity instead of creating a new one.
            You get 1-second HR sampling, training effect, EPOC, and recovery data. If no matching watch activity is found, it falls back to the normal upload.
        </p>
    </div>

    <!-- Activity Description Section -->
    <div class="card section">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
            <div style="display: flex; align-items: center; gap: 8px;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                <span class="card-title">Activity Description</span>
            </div>
            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                <input type="hidden" name="description_enabled" value="off">
                <input type="checkbox" name="description_enabled" value="on" {{ 'checked' if config.get('description_enabled', True) }} style="width: 18px; height: 18px; accent-color: var(--accent);">
                <span style="font-size: 13px; color: var(--text-secondary);">Enabled</span>
            </label>
        </div>
        <p class="section-description">
            Adds a summary of your exercises, sets, reps, weights, and calories to the Garmin activity description. Visible in Garmin Connect and connected apps like Strava.
        </p>
    </div>

    <!-- Advanced Section (FIT Timing) -->
    <div class="card section">
        <details class="advanced-section">
            <summary>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
                Advanced
            </summary>
            <div class="advanced-content">
                <!-- Merge Mode Parameters -->
                <p class="section-description" style="margin-top: 0; font-weight: 600; color: var(--text-secondary);">Watch Activity Matching</p>
                <p class="section-description">How closely a Garmin watch activity must match a Hevy workout to be enhanced. Lower overlap = more lenient matching, higher = stricter.</p>
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label" for="merge_overlap_pct">Overlap Threshold (%)</label>
                        <input class="form-input" type="number" id="merge_overlap_pct" name="merge_overlap_pct" value="{{ config.get('merge_overlap_pct', 70) }}" min="50" max="95" step="5">
                        <div class="form-hint">Minimum temporal overlap between watch and Hevy workout (default 70%)</div>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="merge_max_drift_min">Start Time Tolerance (minutes)</label>
                        <input class="form-input" type="number" id="merge_max_drift_min" name="merge_max_drift_min" value="{{ config.get('merge_max_drift_min', 20) }}" min="5" max="60" step="5">
                        <div class="form-hint">Max difference between Hevy and Garmin start times (default 20 min)</div>
                    </div>
                </div>

                <hr style="border: none; border-top: 1px solid var(--border); margin: 20px 0;">

                <!-- FIT Timing -->
                <p class="section-description" style="font-weight: 600; color: var(--text-secondary);">FIT File Timing</p>
                <p class="section-description">Controls how set durations are estimated in the FIT file when exact timing is not available from Hevy.</p>
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label" for="working_set_seconds">Working Set (seconds)</label>
                        <input class="form-input" type="number" id="working_set_seconds" name="working_set_seconds" value="{{ config.get('timing', {}).get('working_set_seconds', 40) }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="warmup_set_seconds">Warmup Set (seconds)</label>
                        <input class="form-input" type="number" id="warmup_set_seconds" name="warmup_set_seconds" value="{{ config.get('timing', {}).get('warmup_set_seconds', 25) }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="rest_between_sets_seconds">Rest Between Sets (seconds)</label>
                        <input class="form-input" type="number" id="rest_between_sets_seconds" name="rest_between_sets_seconds" value="{{ config.get('timing', {}).get('rest_between_sets_seconds', 75) }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="rest_between_exercises_seconds">Rest Between Exercises (seconds)</label>
                        <input class="form-input" type="number" id="rest_between_exercises_seconds" name="rest_between_exercises_seconds" value="{{ config.get('timing', {}).get('rest_between_exercises_seconds', 120) }}">
                    </div>
                </div>
            </div>
        </details>
    </div>

    <button type="submit" class="btn btn-primary">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
        Save Settings
    </button>
</form>

{% if unmapped %}
<div class="card" style="margin-top: 28px;">
    <div class="card-header">
        <span class="card-title">Unmapped Exercises ({{ unmapped|length }})</span>
    </div>
    <div class="form-hint" style="margin-bottom: 12px;">These show as "Unknown" in Garmin. Use <code>hevy2garmin map</code> to fix.</div>
    {% for name, count in unmapped %}
    <div class="list-item">
        <span style="font-size: 14px;">{{ name }} <span style="color: var(--text-muted); font-size: 12px;">({{ count }}x)</span></span>
        <span class="badge badge-pending">unmapped</span>
    </div>
    {% endfor %}
</div>
{% endif %}
{% endblock %}