gravl/frontend/src/pages/OnboardingWizard.jsx

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

const API = '/api';

const calcBodyFat = (gender, waist, neck, hip, height) => {
  if (!waist || !neck || !height) return null;
  if (gender === 'female' && !hip) return null;
  if (gender === 'male') return Math.max(0, 495 / (1.0324 - 0.19077 * Math.log10(waist - neck) + 0.15456 * Math.log10(height)) - 450).toFixed(1);
  return Math.max(0, 495 / (1.29579 - 0.35004 * Math.log10(waist + hip - neck) + 0.22100 * Math.log10(height)) - 450).toFixed(1);
};

export default function OnboardingWizard() {
  const [step, setStep] = useState(1);
  const [data, setData] = useState({ gender: '', age: '', height_cm: '', weight: '', neck_cm: '', waist_cm: '', hip_cm: '', experience_level: '', bench_1rm: '', squat_1rm: '', deadlift_1rm: '', goal: '', workouts_per_week: '' });
  const [saving, setSaving] = useState(false);
  const { token, updateProfile, refreshProfile } = useAuth();
  const navigate = useNavigate();

  const update = (field, value) => setData(d => ({ ...d, [field]: value }));
  const bodyFat = calcBodyFat(data.gender, parseFloat(data.waist_cm), parseFloat(data.neck_cm), parseFloat(data.hip_cm), parseFloat(data.height_cm));

  const finish = async () => {
    setSaving(true);
    try {
      // 1. Save profile
      await updateProfile({
        gender: data.gender,
        age: data.age,
        height_cm: data.height_cm,
        experience_level: data.experience_level,
        goal: data.goal,
        workouts_per_week: data.workouts_per_week,
        onboarding_complete: true
      });
      
      // 2. Save measurements
      if (data.weight || data.neck_cm || data.waist_cm) {
        await fetch(`${API}/user/measurements`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
          body: JSON.stringify({
            weight: data.weight,
            neck_cm: data.neck_cm,
            waist_cm: data.waist_cm,
            hip_cm: data.hip_cm,
            body_fat_pct: bodyFat
          })
        });
      }
      
      // 3. Save strength if provided
      if (data.bench_1rm || data.squat_1rm || data.deadlift_1rm) {
        await fetch(`${API}/user/strength`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
          body: JSON.stringify({
            bench_1rm: data.bench_1rm,
            squat_1rm: data.squat_1rm,
            deadlift_1rm: data.deadlift_1rm
          })
        });
      }
      
      if (refreshProfile) await refreshProfile();
      navigate('/');
    } catch (err) {
      console.error('Onboarding error:', err);
      setSaving(false);
    }
  };

  return (
    <div className="onboarding">
      <div className="onboarding-card">
        <div className="steps-indicator">
          {[1,2,3,4].map(s => <span key={s} className={step >= s ? 'active' : ''}>{s}</span>)}
        </div>

        {step === 1 && (
          <div className="step">
            <h2>Grundinfo</h2>
            <div className="field">
              <label>Kön</label>
              <div className="btn-group">
                <button className={data.gender === 'male' ? 'active' : ''} onClick={() => update('gender', 'male')}>Man</button>
                <button className={data.gender === 'female' ? 'active' : ''} onClick={() => update('gender', 'female')}>Kvinna</button>
              </div>
            </div>
            <div className="field">
              <label>Ålder</label>
              <input type="number" value={data.age} onChange={e => update('age', e.target.value)} placeholder="25" />
            </div>
            <div className="field">
              <label>Längd (cm)</label>
              <input type="number" value={data.height_cm} onChange={e => update('height_cm', e.target.value)} placeholder="175" />
            </div>
            <div className="field">
              <label>Vikt (kg)</label>
              <input type="number" step="0.1" value={data.weight} onChange={e => update('weight', e.target.value)} placeholder="75" />
            </div>
            <button className="next-btn" onClick={() => setStep(2)} disabled={!data.gender || !data.age || !data.height_cm || !data.weight}>Nästa →</button>
          </div>
        )}

        {step === 2 && (
          <div className="step">
            <h2>Kroppsmått</h2>
            <p className="hint">För att beräkna kroppsfett (US Navy-metoden)</p>
            <div className="field">
              <label>Hals (cm)</label>
              <input type="number" step="0.1" value={data.neck_cm} onChange={e => update('neck_cm', e.target.value)} placeholder="38" />
            </div>
            <div className="field">
              <label>Mage/midja (cm)</label>
              <input type="number" step="0.1" value={data.waist_cm} onChange={e => update('waist_cm', e.target.value)} placeholder="85" />
            </div>
            {data.gender === 'female' && (
              <div className="field">
                <label>Höft (cm)</label>
                <input type="number" step="0.1" value={data.hip_cm} onChange={e => update('hip_cm', e.target.value)} placeholder="95" />
              </div>
            )}
            {bodyFat && <div className="bodyfat-result">Beräknat kroppsfett: <strong>{bodyFat}%</strong></div>}
            <div className="nav-btns">
              <button onClick={() => setStep(1)}>← Tillbaka</button>
              <button className="next-btn" onClick={() => setStep(3)}>Nästa →</button>
            </div>
          </div>
        )}

        {step === 3 && (
          <div className="step">
            <h2>Erfarenhet & styrka</h2>
            <div className="field">
              <label>Träningserfarenhet</label>
              <div className="btn-group vertical">
                {['beginner', 'intermediate', 'advanced'].map(l => (
                  <button key={l} className={data.experience_level === l ? 'active' : ''} onClick={() => update('experience_level', l)}>
                    {l === 'beginner' ? 'Nybörjare (<1 år)' : l === 'intermediate' ? 'Medel (1-3 år)' : 'Avancerad (3+ år)'}
                  </button>
                ))}
              </div>
            </div>
            {(data.experience_level === 'intermediate' || data.experience_level === 'advanced') && (
              <>
                <p className="hint">1RM (valfritt)</p>
                <div className="rm-fields">
                  <div className="field"><label>Bänk</label><input type="number" value={data.bench_1rm} onChange={e => update('bench_1rm', e.target.value)} placeholder="kg" /></div>
                  <div className="field"><label>Knäböj</label><input type="number" value={data.squat_1rm} onChange={e => update('squat_1rm', e.target.value)} placeholder="kg" /></div>
                  <div className="field"><label>Marklyft</label><input type="number" value={data.deadlift_1rm} onChange={e => update('deadlift_1rm', e.target.value)} placeholder="kg" /></div>
                </div>
              </>
            )}
            <div className="nav-btns">
              <button onClick={() => setStep(2)}>← Tillbaka</button>
              <button className="next-btn" onClick={() => setStep(4)} disabled={!data.experience_level}>Nästa →</button>
            </div>
          </div>
        )}

        {step === 4 && (
          <div className="step">
            <h2>Mål & schema</h2>
            <div className="field">
              <label>Mål</label>
              <div className="btn-group vertical">
                {['strength', 'muscle', 'fat_loss', 'general'].map(g => (
                  <button key={g} className={data.goal === g ? 'active' : ''} onClick={() => update('goal', g)}>
                    {g === 'strength' ? '💪 Styrka' : g === 'muscle' ? '🏋️ Muskelmassa' : g === 'fat_loss' ? '🔥 Fettförbränning' : '⚖️ Allmän fitness'}
                  </button>
                ))}
              </div>
            </div>
            <div className="field">
              <label>Pass per vecka</label>
              <div className="btn-group">
                {[3,4,5,6].map(n => (
                  <button key={n} className={data.workouts_per_week == n ? 'active' : ''} onClick={() => update('workouts_per_week', n)}>{n}</button>
                ))}
              </div>
            </div>
            <div className="nav-btns">
              <button onClick={() => setStep(3)}>← Tillbaka</button>
              <button className="finish-btn" onClick={finish} disabled={!data.goal || !data.workouts_per_week || saving}>
                {saving ? 'Sparar...' : 'Starta träningen! 🚀'}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}