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

{% block content %}
<div style="max-width: 560px; margin: 0 auto;">
    <div class="page-header" style="text-align: center; margin-bottom: 36px;">
        <img src="/static/favicon.svg" width="56" height="56" alt="hevy2garmin" style="border-radius: 14px; margin-bottom: 16px;">
        <h1>Welcome to hevy2garmin</h1>
        <p>Get your Hevy gym workouts on Garmin Connect.<br>Set up takes about 2 minutes.</p>
    </div>

    {% if garmin_cooldown and garmin_cooldown > 0 %}
    <div class="card" style="margin-bottom: 20px; border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.06);">
        <div style="display: flex; align-items: center; gap: 8px;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--amber)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
            <span style="font-weight: 600; color: var(--amber);">Garmin rate-limited, cooling down for {{ garmin_cooldown_str }}</span>
        </div>
        <p style="font-size: 13px; color: var(--text-secondary); margin-top: 6px;">
            Leave it be. Retrying resets the timer. Come back once it clears, and sync will resume automatically.
        </p>
    </div>
    {% endif %}

    {% if garmin_error %}
    <div class="card" style="margin-bottom: 20px; border-color: rgba(59, 130, 246, 0.4); background: rgba(59, 130, 246, 0.06);">
        <div style="display: flex; align-items: center; gap: 8px;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--blue, #3b82f6)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
            <span style="font-weight: 600; color: var(--blue, #3b82f6);">Sign into Garmin manually</span>
        </div>
        <p style="font-size: 13px; color: var(--text-secondary); margin-top: 6px;">
            Automatic login isn't available from this server. Sign in with your browser instead (takes 30 seconds):
        </p>
        <ol style="font-size: 13px; color: var(--text-secondary); margin: 10px 0; padding-left: 20px; line-height: 2;">
            <li>Tap <strong>Sign into Garmin</strong> below (opens a new tab)</li>
            <li>Log in with your Garmin email and password</li>
            <li>After login, <strong>copy the URL</strong> from the address bar</li>
            <li>Come back here and <strong>paste it</strong> in the box below</li>
        </ol>
        <a href="https://sso.garmin.com/sso/signin?id=gauth-widget&embedWidget=true&gauthHost=https%3A%2F%2Fsso.garmin.com%2Fsso&service=https%3A%2F%2Fsso.garmin.com%2Fsso%2Fembed&source=https%3A%2F%2Fsso.garmin.com%2Fsso%2Fembed&redirectAfterAccountLoginUrl=https%3A%2F%2Fsso.garmin.com%2Fsso%2Fembed&redirectAfterAccountCreationUrl=https%3A%2F%2Fsso.garmin.com%2Fsso%2Fembed"
           target="_blank" rel="noopener" class="btn btn-primary btn-sm" style="margin-bottom: 12px;">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
            Sign into Garmin
        </a>
        <div class="form-group" style="margin-bottom: 8px;">
            <label class="form-label" style="font-size: 12px;">Paste the URL here after signing in:</label>
            <div style="display: flex; gap: 8px;">
                <input class="form-input" type="text" id="garmin_ticket_url" placeholder="https://sso.garmin.com/sso/embed?ticket=ST-..." style="flex: 1; font-size: 13px;">
                <button type="button" class="btn btn-primary btn-sm" onclick="exchangeTicket()" style="white-space: nowrap;">Connect</button>
            </div>
            <div id="ticket-result" style="margin-top: 4px;"></div>
        </div>
        {% if allow_skip %}
        <div style="margin-top: 6px;">
            <a href="/" class="btn btn-secondary btn-sm" style="font-size: 12px;">Skip for now</a>
        </div>
        {% endif %}
    </div>
    {% endif %}

    <form method="post" action="/setup">
        <div class="card section">
            <div class="card-title" style="margin-bottom: 16px;">1. Hevy API Key <span style="font-size: 12px; font-weight: 400; color: var(--text-muted);">(requires <a href="https://hevyapp.com" target="_blank" rel="noopener">Hevy Pro</a>)</span></div>
            <div class="form-group">
                <label class="form-label" for="hevy_api_key">API Key</label>
                <div style="display: flex; gap: 8px;">
                    <input class="form-input" type="password" id="hevy_api_key" name="hevy_api_key" placeholder="{{ '••••••••' ~ config.get('hevy_api_key', '')[-4:] if config.get('hevy_api_key') else 'Paste your Hevy API key' }}" {{ '' if config.get('hevy_api_key') else 'required' }} autocomplete="off" style="flex: 1;">
                    <button type="button" class="btn btn-secondary btn-sm" onclick="validateHevyKey()" style="white-space: nowrap;">Test Key</button>
                </div>
                <div id="hevy-validate-result" style="margin-top: 4px;"></div>
                {% if not config.get('hevy_api_key') %}
                <div class="form-hint" style="line-height: 1.8;">
                    <strong>How to get your key:</strong><br>
                    1. Open <a href="https://hevy.com/settings" target="_blank" rel="noopener">hevy.com/settings</a> (or Hevy app &rarr; Settings)<br>
                    2. Scroll to <strong>Integrations &amp; API</strong><br>
                    3. Click <strong>Generate API Key</strong> and copy it here
                </div>
                {% endif %}
            </div>
        </div>

        <div class="card section">
            <div class="card-title" style="margin-bottom: 16px;">2. Garmin Connect</div>
            <div class="form-group">
                <label class="form-label" for="garmin_email">Email</label>
                <input class="form-input" type="password" id="garmin_email" name="garmin_email" placeholder="{{ '••••••••' ~ config.get('garmin_email', '')[-4:] if config.get('garmin_email') else 'your@email.com' }}" autocomplete="email">
            </div>
            <div class="form-group">
                <label class="form-label" for="garmin_password">Password</label>
                <div style="display: flex; gap: 8px;">
                    <input class="form-input" type="password" id="garmin_password" name="garmin_password" placeholder="{% if is_cloud %}Pre-filled from deploy{% else %}Stored locally only{% endif %}" autocomplete="current-password" style="flex: 1;">
                    <button type="button" class="btn btn-primary btn-sm" id="garmin_connect_btn" onclick="garminConnect()" style="white-space: nowrap;" {{ 'disabled' if garmin_cooldown and garmin_cooldown > 0 }}>Connect</button>
                </div>
                <div id="garmin_connect_result" style="margin-top: 6px; font-size: 12px;"></div>
            </div>
            <div class="form-group" id="garmin_mfa_row" style="display: none;">
                <label class="form-label" for="garmin_mfa_code">Garmin sent you a verification code</label>
                <div style="display: flex; gap: 8px;">
                    <input class="form-input" type="text" id="garmin_mfa_code" placeholder="6-digit code" inputmode="numeric" autocomplete="one-time-code" style="flex: 1; font-family: monospace; letter-spacing: 2px;">
                    <button type="button" class="btn btn-primary btn-sm" id="garmin_mfa_btn" onclick="garminSubmitMfa()" style="white-space: nowrap;">Verify</button>
                </div>
                <div class="form-hint" style="font-size: 11px; margin-top: 4px;">Check your email / authenticator app. Code is valid for a few minutes.</div>
            </div>
        </div>

        <div class="card section">
            <div class="card-title" style="margin-bottom: 16px;">3. Your Profile</div>
            <div class="form-hint" style="margin-bottom: 12px;">Used for calorie estimation in FIT files.</div>
            <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>
        </div>

        <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center;">
            Save &amp; Continue
            <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="M5 12h14M12 5l7 7-7 7"/></svg>
        </button>

        <p style="font-size: 11px; color: var(--text-muted); margin-top: 12px; line-height: 1.6; text-align: center;">
            If your Garmin account is connected to Strava, synced workouts will also appear there.
        </p>
    </form>
</div>

<script>
const GARMIN_WORKER_BASE = 'https://hevy2garmin-exchange-di.gkos.workers.dev';

// ── Garmin inline login (preferred UX, no copy-paste) ──────────────────────

let garminMfaSessionId = null;

async function garminConnect() {
    const email = document.getElementById('garmin_email').value.trim();
    const password = document.getElementById('garmin_password').value;
    const result = document.getElementById('garmin_connect_result');
    const btn = document.getElementById('garmin_connect_btn');
    if (!email || !password) {
        result.innerHTML = '<span style="color: var(--red);">Enter email and password first</span>';
        return;
    }
    btn.disabled = true;
    result.innerHTML = '<span style="color: var(--text-muted);">Connecting to Garmin...</span>';
    try {
        const resp = await fetch(GARMIN_WORKER_BASE + '/login', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ email: email, password: password }),
        });
        const data = await resp.json();
        await handleGarminLoginResponse(data);
    } catch (e) {
        result.innerHTML = '<span style="color: var(--red);">&#10007; Network error, try again</span>';
    } finally {
        btn.disabled = false;
    }
}

async function garminSubmitMfa() {
    const code = document.getElementById('garmin_mfa_code').value.trim();
    const result = document.getElementById('garmin_connect_result');
    const btn = document.getElementById('garmin_mfa_btn');
    if (!code) {
        result.innerHTML = '<span style="color: var(--red);">Enter the code first</span>';
        return;
    }
    if (!garminMfaSessionId) {
        result.innerHTML = '<span style="color: var(--red);">Session expired, click Connect again</span>';
        return;
    }
    btn.disabled = true;
    result.innerHTML = '<span style="color: var(--text-muted);">Verifying code...</span>';
    try {
        const resp = await fetch(GARMIN_WORKER_BASE + '/login-mfa', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ session_id: garminMfaSessionId, mfa_code: code }),
        });
        const data = await resp.json();
        await handleGarminLoginResponse(data);
    } catch (e) {
        result.innerHTML = '<span style="color: var(--red);">&#10007; Network error, try again</span>';
    } finally {
        btn.disabled = false;
    }
}

async function handleGarminLoginResponse(data) {
    const result = document.getElementById('garmin_connect_result');
    const mfaRow = document.getElementById('garmin_mfa_row');

    if (data.status === 'success') {
        // Hide MFA row if it was shown
        mfaRow.style.display = 'none';
        garminMfaSessionId = null;
        // Persist tokens on our server
        const storeResp = await fetch('/api/garmin-ticket', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ tokens: {
                di_token: data.di_token,
                di_refresh_token: data.di_refresh_token,
                di_client_id: data.di_client_id,
            }}),
        });
        const storeData = await storeResp.json();
        if (storeData.ok) {
            result.innerHTML = '<span style="color: var(--accent);">&#10003; Connected to Garmin</span>';
        } else {
            result.innerHTML = '<span style="color: var(--red);">&#10007; ' + (storeData.error || 'Failed to save tokens') + '</span>';
        }
        return;
    }

    if (data.status === 'needs_mfa') {
        garminMfaSessionId = data.session_id;
        mfaRow.style.display = '';
        const method = data.mfa_method || 'email';
        result.innerHTML = '<span style="color: var(--text-muted);">Garmin sent a verification code to your ' + method + '. Enter it below.</span>';
        document.getElementById('garmin_mfa_code').focus();
        return;
    }

    if (data.status === 'mfa_failed') {
        result.innerHTML = '<span style="color: var(--red);">&#10007; ' + (data.message || 'Code rejected, try again') + '</span>';
        document.getElementById('garmin_mfa_code').select();
        return;
    }

    if (data.status === 'invalid_credentials') {
        result.innerHTML = '<span style="color: var(--red);">&#10007; Invalid email or password</span>';
        return;
    }

    if (data.status === 'rate_limited') {
        // Record the cooldown server-side so the dashboard can display it,
        // then disable the Connect button so the user can't retry and reset Garmin's timer.
        fetch('/api/garmin-rate-limited', { method: 'POST' }).catch(function() {});
        var connectBtn = document.getElementById('garmin_connect_btn');
        if (connectBtn) { connectBtn.disabled = true; }
        result.innerHTML = '<span style="color: var(--red);">&#10007; Garmin rate-limited this account on their side (separate from your password, your Garmin app still works). It clears on its own, usually within a few hours. Repeated retries just reset the timer, so leave it a while and try once more.</span>';
        return;
    }

    if (data.status === 'needs_captcha') {
        // Worker returns needs_captcha for both actual captcha challenges AND
        // Garmin's 427 response which appears when MFA-enabled accounts try the
        // direct portal API flow (Garmin forces those through the embed widget
        // browser flow instead). Either way, the fix is the same: show the
        // manual sign-in UI so the user can complete setup via their browser.
        const detail = data.message || 'Garmin requires the browser sign-in flow for this account.';
        result.innerHTML = '<span style="color: var(--text-secondary); font-size: 11px;">&#9888; ' + detail + ' Use the manual sign-in below:</span>';
        revealManualFallback();
        return;
    }

    // Unknown / error status — reveal the manual fallback so the user has a path forward.
    const msg = (data && (data.message || data.error)) || 'Unexpected error';
    result.innerHTML = '<span style="color: var(--red);">&#10007; ' + msg + '. Try the manual sign-in below.</span>';
    revealManualFallback();
}

function revealManualFallback() {
    // If the server didn't pre-render the garmin_error block, synthesize a link
    // that opens Garmin's embed widget so the user can paste the URL back.
    const existing = document.getElementById('ticket-result');
    if (existing) return; // already visible
    const container = document.createElement('div');
    container.className = 'card';
    container.style.marginTop = '12px';
    container.innerHTML = '<p style="font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;">' +
        'Sign in with your browser and paste the URL back here:' +
        '</p>' +
        '<a href="https://sso.garmin.com/sso/signin?id=gauth-widget&embedWidget=true&gauthHost=https%3A%2F%2Fsso.garmin.com%2Fsso&service=https%3A%2F%2Fsso.garmin.com%2Fsso%2Fembed&source=https%3A%2F%2Fsso.garmin.com%2Fsso%2Fembed&redirectAfterAccountLoginUrl=https%3A%2F%2Fsso.garmin.com%2Fsso%2Fembed&redirectAfterAccountCreationUrl=https%3A%2F%2Fsso.garmin.com%2Fsso%2Fembed" ' +
        'target="_blank" rel="noopener" class="btn btn-primary btn-sm" style="margin-bottom: 8px;">Sign into Garmin</a>' +
        '<div style="display: flex; gap: 8px;">' +
        '<input class="form-input" type="text" id="garmin_ticket_url" placeholder="https://sso.garmin.com/sso/embed?ticket=ST-..." style="flex: 1; font-size: 13px;">' +
        '<button type="button" class="btn btn-primary btn-sm" onclick="exchangeTicket()" style="white-space: nowrap;">Connect</button>' +
        '</div>' +
        '<div id="ticket-result" style="margin-top: 4px;"></div>';
    document.getElementById('garmin_connect_result').after(container);
}

async function exchangeTicket() {
    const urlInput = document.getElementById('garmin_ticket_url');
    const result = document.getElementById('ticket-result');
    const raw = urlInput.value.trim();
    if (!raw) { result.innerHTML = '<span style="font-size: 12px; color: var(--red);">Paste the URL first</span>'; return; }

    // Extract ticket from URL or raw ticket string
    let ticket = '';
    const ticketMatch = raw.match(/ticket=([^&\s]+)/);
    if (ticketMatch) {
        ticket = ticketMatch[1];
    } else if (raw.startsWith('ST-')) {
        ticket = raw;
    } else {
        result.innerHTML = '<span style="font-size: 12px; color: var(--red);">No ticket found in URL. Make sure you copied the full URL after signing in.</span>';
        return;
    }

    result.innerHTML = '<span style="font-size: 12px; color: var(--text-muted);">Connecting to Garmin...</span>';
    try {
        // Step 1: Exchange ticket for a Garmin DI OAuth token via the Cloudflare Worker
        // (the Worker runs from Cloudflare's edge IPs which Garmin does not block).
        // The "-di" worker is the garmin-auth >= 0.3.0 variant; the legacy
        // `hevy2garmin-exchange` worker stays alive for older deployments.
        // Worker returns {di_token, di_refresh_token, di_client_id, expires_in, ...}
        const exchResp = await fetch('https://hevy2garmin-exchange-di.gkos.workers.dev/exchange', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ ticket: ticket })
        });
        const exchData = await exchResp.json();
        if (exchData.error) {
            result.innerHTML = '<span style="font-size: 12px; color: var(--red);">&#10007; ' + exchData.error + '</span>';
            return;
        }
        if (!exchData.di_token || !exchData.di_refresh_token || !exchData.di_client_id) {
            result.innerHTML = '<span style="font-size: 12px; color: var(--red);">&#10007; Worker returned unexpected response shape</span>';
            return;
        }
        // Step 2: Store tokens on our server (garmin-auth >= 0.3.0 single-file DI format)
        const storeResp = await fetch('/api/garmin-ticket', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ tokens: {
                di_token: exchData.di_token,
                di_refresh_token: exchData.di_refresh_token,
                di_client_id: exchData.di_client_id,
            }})
        });
        const storeData = await storeResp.json();
        if (storeData.ok) {
            result.innerHTML = '<span style="font-size: 12px; color: var(--accent);">&#10003; Connected to Garmin!</span>'
                + '<p style="font-size: 11px; color: var(--text-muted); margin-top: 8px; line-height: 1.5;">'
                + 'If your first sync fails with an upload error, go to '
                + '<a href="https://connect.garmin.com/modern/settings" target="_blank" style="color: var(--accent);">Garmin Connect Settings</a>'
                + ' > Data > enable <strong>Device Upload</strong>. This is a one-time requirement for some accounts.</p>';
            setTimeout(function() { window.location.href = '/'; }, 5000);
        } else {
            result.innerHTML = '<span style="font-size: 12px; color: var(--red);">&#10007; ' + (storeData.error || 'Failed to save tokens') + '</span>';
        }
    } catch (e) {
        result.innerHTML = '<span style="font-size: 12px; color: var(--red);">&#10007; Network error — try again</span>';
    }
}

async function validateHevyKey() {
    const key = document.getElementById('hevy_api_key').value.trim();
    const result = document.getElementById('hevy-validate-result');
    if (!key) { result.innerHTML = '<span style="font-size: 12px; color: var(--red);">Enter a key first</span>'; return; }
    result.innerHTML = '<span style="font-size: 12px; color: var(--text-muted);">Testing...</span>';
    try {
        const resp = await fetch('https://api.hevyapp.com/v1/workouts/count', {
            headers: { 'api-key': key, 'Accept': 'application/json' }
        });
        if (resp.ok) {
            const data = await resp.json();
            result.innerHTML = '<span style="font-size: 12px; color: var(--accent);">&#10003; Valid — ' + data.workout_count + ' workouts found</span>';
        } else {
            result.innerHTML = '<span style="font-size: 12px; color: var(--red);">&#10007; Invalid key (HTTP ' + resp.status + ')</span>';
        }
    } catch (e) {
        result.innerHTML = '<span style="font-size: 12px; color: var(--red);">&#10007; Network error</span>';
    }
}
</script>
{% endblock %}