// More pages — charts, biometrics, nutrition, profile, admin

const { useState: useStateP2, useEffect: useEffectP2, useMemo: useMemoP2 } = React;

// ── CHARTS / PROGRESS ─────────────────────────────────────────────────────
function ChartsPage({ t, lang }) {
  const chartExercises = EXERCISES.filter(e => ["barbell","dumbbell"].includes(e.equipment));
  const exerciseOptions = chartExercises.length ? chartExercises : EXERCISES;
  const fallbackExercise = exerciseOptions[0] || { id:"", name:lang === "fr" ? "Exercice" : "Exercise" };
  const [exerciseId, setExerciseId] = useStateP2(fallbackExercise.id);
  const [range, setRange] = useStateP2("3m");
  const [metric, setMetric] = useStateP2("e1rm");

  const dataset = useMemoP2(() => {
    const points = [];
    const days = range === "1m" ? 30 : range === "3m" ? 90 : range === "6m" ? 180 : 365;
    let val = metric === "e1rm" ? 78 : metric === "volume" ? 4200 : 70;
    for (let i = 0; i < days; i += 5) {
      val += (Math.random() - 0.4) * (metric === "volume" ? 200 : 1.5);
      val = Math.max(metric === "e1rm" ? 70 : metric === "volume" ? 3500 : 60, val);
      points.push({ day: i, value: Math.round(val * 10) / 10 });
    }
    return points;
  }, [exerciseId, range, metric]);

  const ex = EXERCISES.find(e => String(e.id) === String(exerciseId)) || fallbackExercise;
  const cur = dataset[dataset.length - 1].value;
  const start = dataset[0].value;
  const change = ((cur - start) / start * 100).toFixed(1);

  return (
    <>
      <div className="page-head">
        <div>
          <h1>{t.progress}</h1>
          <p className="page-sub">{lang === "fr" ? "Visualise tes gains au fil du temps." : "See your gains over time."}</p>
        </div>
      </div>

      <div className="chart-controls">
        <div style={{display:"flex",gap:8,alignItems:"center",flexWrap:"wrap"}}>
          <select value={exerciseId} onChange={e => setExerciseId(e.target.value)}
                  style={{padding:"8px 12px",borderRadius:8,border:"1px solid var(--border)",background:"var(--surface)",fontSize:13,fontWeight:500}}>
            {exerciseOptions.slice(0, 60).map(e => (
              <option key={e.id} value={e.id}>{lang === "fr" && e.fr ? e.fr : e.name}</option>
            ))}
          </select>
          <div className="seg sm">
            <button className={metric==="e1rm"?"active":""} onClick={() => setMetric("e1rm")}>e1RM</button>
            <button className={metric==="volume"?"active":""} onClick={() => setMetric("volume")}>{t.volume}</button>
            <button className={metric==="bestSet"?"active":""} onClick={() => setMetric("bestSet")}>{lang === "fr" ? "Meilleure série" : "Best set"}</button>
          </div>
        </div>
        <div className="seg">
          {["1m","3m","6m","1y"].map(r => (
            <button key={r} className={range===r?"active":""} onClick={() => setRange(r)}>
              {r === "1m" ? (lang==="fr"?"1 mois":"1M") : r === "3m" ? (lang==="fr"?"3 mois":"3M") : r === "6m" ? (lang==="fr"?"6 mois":"6M") : (lang==="fr"?"1 an":"1Y")}
            </button>
          ))}
        </div>
      </div>

      <div className="chart-card">
        <div className="chart-current">
          <div className="cc-label">{ex.name} · {metric === "e1rm" ? "Estimated 1RM" : metric === "volume" ? "Volume / session" : "Best set"}</div>
          <div className="cc-val">
            {cur}<span>{metric === "volume" ? " kg" : metric === "e1rm" ? " kg" : " kg"}</span>
          </div>
          <div className={"cc-trend " + (parseFloat(change) > 0 ? "pos" : "")}>
            {parseFloat(change) > 0 ? "+" : ""}{change}% {lang === "fr" ? "sur la période" : "over period"}
          </div>
        </div>
        <LineChart data={dataset} height={260}/>
      </div>

      <h2 style={{marginTop:24,marginBottom:12}}>{lang === "fr" ? "Aperçu" : "At a glance"}</h2>
      <div className="chart-grid">
        <ChartMini label={lang === "fr" ? "Volume hebdo" : "Weekly volume"} value="42.3" unit="t" data={generateMiniData(12, 30, 50)} color="var(--primary)"/>
        <ChartMini label={lang === "fr" ? "Fréquence" : "Frequency"} value="4.2" unit={lang === "fr" ? "/sem" : "/wk"} data={generateMiniData(12, 3, 5)} color="oklch(0.55 0.16 240)"/>
        <ChartMini label={lang === "fr" ? "Durée moy." : "Avg duration"} value="68" unit="min" data={generateMiniData(12, 55, 80)} color="oklch(0.55 0.16 145)"/>
      </div>

      <h2 style={{marginTop:24,marginBottom:12}}>{lang === "fr" ? "Volume par groupe musculaire" : "Volume by muscle group"}</h2>
      <div className="chart-card">
        <BarChart data={[
          { label: lang === "fr" ? "Pectoraux" : "Chest", value: 14200 },
          { label: lang === "fr" ? "Dos" : "Back", value: 18400 },
          { label: lang === "fr" ? "Jambes" : "Legs", value: 22800 },
          { label: lang === "fr" ? "Épaules" : "Shoulders", value: 8200 },
          { label: lang === "fr" ? "Biceps" : "Biceps", value: 4600 },
          { label: lang === "fr" ? "Triceps" : "Triceps", value: 5100 },
          { label: lang === "fr" ? "Abdos" : "Core", value: 3200 },
        ]}/>
      </div>
    </>
  );
}

function generateMiniData(n, lo, hi) {
  return Array.from({ length: n }, () => lo + Math.random() * (hi - lo));
}

function LineChart({ data, height }) {
  const w = 800, h = height || 260;
  const pad = { l: 50, r: 16, t: 20, b: 30 };
  const min = Math.min(...data.map(d => d.value)) * 0.95;
  const max = Math.max(...data.map(d => d.value)) * 1.05;
  const xs = (i) => pad.l + (i / (data.length - 1)) * (w - pad.l - pad.r);
  const ys = (v) => pad.t + (1 - (v - min) / (max - min)) * (h - pad.t - pad.b);
  const path = data.map((d, i) => `${i === 0 ? "M" : "L"} ${xs(i)} ${ys(d.value)}`).join(" ");
  const area = `${path} L ${xs(data.length-1)} ${h - pad.b} L ${xs(0)} ${h - pad.b} Z`;
  const ticks = 4;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{width:"100%",height:"auto"}} preserveAspectRatio="none">
      <defs>
        <linearGradient id="lg" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--primary)" stopOpacity="0.18"/>
          <stop offset="100%" stopColor="var(--primary)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {Array.from({length: ticks+1}).map((_, i) => {
        const y = pad.t + (i / ticks) * (h - pad.t - pad.b);
        const v = max - (i / ticks) * (max - min);
        return (
          <g key={i}>
            <line x1={pad.l} x2={w-pad.r} y1={y} y2={y} stroke="oklch(0.92 0.005 70)" strokeWidth="1"/>
            <text x={pad.l - 8} y={y+3} textAnchor="end" fontSize="10" fill="var(--text-muted)" fontFamily="JetBrains Mono">
              {Math.round(v)}
            </text>
          </g>
        );
      })}
      <path d={area} fill="url(#lg)"/>
      <path d={path} fill="none" stroke="var(--primary)" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round"/>
      {data.map((d, i) => i % Math.ceil(data.length / 8) === 0 && (
        <circle key={i} cx={xs(i)} cy={ys(d.value)} r="3" fill="var(--surface)" stroke="var(--primary)" strokeWidth="2"/>
      ))}
    </svg>
  );
}

function ChartMini({ label, value, unit, data, color }) {
  const w = 200, h = 60;
  const min = Math.min(...data) * 0.9;
  const max = Math.max(...data) * 1.1;
  const xs = (i) => (i / (data.length - 1)) * w;
  const ys = (v) => (1 - (v - min) / (max - min)) * h;
  const path = data.map((v, i) => `${i === 0 ? "M" : "L"} ${xs(i)} ${ys(v)}`).join(" ");
  return (
    <div className="chart-mini">
      <div className="cm-label">{label}</div>
      <div className="cm-val">{value}<span> {unit}</span></div>
      <svg viewBox={`0 0 ${w} ${h}`} style={{width:"100%",height: 40}} preserveAspectRatio="none">
        <path d={path} fill="none" stroke={color} strokeWidth="2"/>
      </svg>
    </div>
  );
}

function BarChart({ data }) {
  const w = 800, h = 200, pad = { l: 80, r: 16, t: 10, b: 10 };
  const max = Math.max(...data.map(d => d.value));
  const barH = 22, gap = 6;
  return (
    <svg viewBox={`0 0 ${w} ${data.length * (barH + gap) + 20}`} style={{width:"100%",height:"auto"}}>
      {data.map((d, i) => {
        const y = i * (barH + gap) + 10;
        const barW = (d.value / max) * (w - pad.l - pad.r);
        return (
          <g key={i}>
            <text x={pad.l - 8} y={y + barH/2 + 4} textAnchor="end" fontSize="11" fill="var(--text)" fontWeight="500">{d.label}</text>
            <rect x={pad.l} y={y} width={barW} height={barH} fill="var(--primary)" rx="3"/>
            <text x={pad.l + barW + 6} y={y + barH/2 + 4} fontSize="10" fill="var(--text-muted)" fontFamily="JetBrains Mono">{(d.value/1000).toFixed(1)} t</text>
          </g>
        );
      })}
    </svg>
  );
}

// ── BIOMETRICS ────────────────────────────────────────────────────────────
function BiometricsPage({ t, lang }) {
  return (
    <>
      <div className="page-head">
        <div>
          <h1>{t.biometrics}</h1>
          <p className="page-sub">{lang === "fr" ? "Suivi du poids et des mesures." : "Track weight and measurements."}</p>
        </div>
        <button className="btn-primary"><Icon name="plus" size={14}/> {lang === "fr" ? "Nouvelle mesure" : "New measurement"}</button>
      </div>

      <div className="bio-hero">
        <div className="bio-stat hero">
          <div className="bs-label">{lang === "fr" ? "Poids actuel" : "Current weight"}</div>
          <div className="bs-val">82.4<span> kg</span></div>
          <div className="bs-change pos">↑ 1.8 kg <span className="muted">{lang === "fr" ? "/ 90 jours" : "/ 90 days"}</span></div>
          <LineChart data={generateMiniData(20, 79, 83).map((v, i) => ({ day: i, value: Math.round(v*10)/10 }))} height={140}/>
        </div>
        <div className="bio-stat hero">
          <div className="bs-label">{lang === "fr" ? "Masse grasse" : "Body fat"}</div>
          <div className="bs-val">14.2<span> %</span></div>
          <div className="bs-change pos">↓ 0.6 % <span className="muted">{lang === "fr" ? "/ 90 jours" : "/ 90 days"}</span></div>
          <LineChart data={generateMiniData(20, 13, 16).map((v, i) => ({ day: i, value: Math.round(v*10)/10 }))} height={140}/>
        </div>
      </div>

      <h2 style={{marginBottom: 12}}>{lang === "fr" ? "Mesures corporelles" : "Body measurements"}</h2>
      <div className="bio-measures">
        {[
          { label: lang === "fr" ? "Tour de bras" : "Arm", val: "39.5", change: "+0.5" },
          { label: lang === "fr" ? "Tour de poitrine" : "Chest", val: "104.0", change: "+1.2" },
          { label: lang === "fr" ? "Tour de taille" : "Waist", val: "78.5", change: "-1.0" },
          { label: lang === "fr" ? "Tour de cuisse" : "Thigh", val: "62.0", change: "+0.8" },
        ].map((m, i) => (
          <div key={i} className="bio-stat">
            <div className="bs-label">{m.label}</div>
            <div className="bs-val sm">{m.val}<span> cm</span></div>
            <div className={"bs-change " + (m.change.startsWith("+") ? "pos" : "neg")}>{m.change} cm</div>
          </div>
        ))}
      </div>

      <div className="bio-history">
        <h2>{lang === "fr" ? "Historique récent" : "Recent entries"}</h2>
        <table className="bio-table">
          <thead>
            <tr>
              <th>{lang === "fr" ? "Date" : "Date"}</th>
              <th>{lang === "fr" ? "Poids" : "Weight"}</th>
              <th>{lang === "fr" ? "Masse grasse" : "Body fat"}</th>
              <th>{lang === "fr" ? "Bras" : "Arm"}</th>
              <th>{lang === "fr" ? "Poitrine" : "Chest"}</th>
              <th>{lang === "fr" ? "Taille" : "Waist"}</th>
              <th>{lang === "fr" ? "Cuisse" : "Thigh"}</th>
            </tr>
          </thead>
          <tbody>
            {BIOMETRICS.map((b, i) => (
              <tr key={i}>
                <td>{new Date(b.date).toLocaleDateString(lang === "fr" ? "fr-FR" : "en-US", {month:"short",day:"numeric",year:"numeric"})}</td>
                <td>{b.weight} kg</td>
                <td>{b.bodyFat}%</td>
                <td>{b.arm} cm</td>
                <td>{b.chest} cm</td>
                <td>{b.waist} cm</td>
                <td>{b.thigh} cm</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

// ── NUTRITION ─────────────────────────────────────────────────────────────
function mapNutritionPlanForUi(p) {
  const target = p.target || p.goals || {
    kcal:Number(p.kcal || 2200),
    protein:Number(p.protein || 160),
    carbs:Number(p.carbs || 240),
    fat:Number(p.fat || 70)
  };
  return {
    id:p.id,
    name:p.name || "Plan alimentaire",
    note:p.description || p.note || "",
    target,
    sharedWith:p.sharedWith || [],
    days:Array.isArray(p.days) ? p.days : [],
    numDays:Number(p.numDays || (Array.isArray(p.days) ? p.days.length : 0) || 1),
    suggestions:p.suggestions || p.meals || { breakfast:[], lunch:[], dinner:[], snacks:[] },
    raw:p
  };
}

function MacroDots({ target }) {
  const macros = [
    { key:"kcal", label:"kcal", value:target?.kcal || 0, color:"var(--primary)" },
    { key:"protein", label:"P", value:target?.protein || 0, color:"oklch(0.6 0.18 25)" },
    { key:"carbs", label:"C", value:target?.carbs || 0, color:"oklch(0.65 0.16 70)" },
    { key:"fat", label:"F", value:target?.fat || 0, color:"oklch(0.55 0.14 240)" }
  ];
  return (
    <div className="macro-dots">
      {macros.map(m => (
        <div className="macro-dot" key={m.key} style={{"--dot":m.color}}>
          <strong>{Math.round(Number(m.value || 0))}</strong>
          <span>{m.label}</span>
        </div>
      ))}
    </div>
  );
}

function MealPlanCard({ plan, lang, onShare, onOpen }) {
  const daysCount = plan.numDays || plan.days?.length || 1;
  return (
    <div className="tpl-card meal-plan-card" key={plan.id} style={{"--accent":"#5B9E3C"}}>
      <div className="tpl-stripe"></div>
      <div className="tpl-head">
        <div>
          <div className="tpl-cat">Nutrition</div>
          <div className="tpl-name">{plan.name}</div>
        </div>
        {onShare && (
          <button className="icon-btn" onClick={() => onShare(plan)} title={lang === "fr" ? "Partager" : "Share"}>
            <Icon name="users" size={14}/>
          </button>
        )}
      </div>
      <div className="tpl-stats">
        <span>{daysCount} {lang === "fr" ? "jour" : "day"}{daysCount > 1 ? "s" : ""}</span>
        <span>·</span>
        <span>{(plan.sharedWith || []).length} {lang === "fr" ? "partage(s)" : "share(s)"}</span>
      </div>
      <MacroDots target={plan.target || {}}/>
      <p className="muted" style={{fontSize:12}}>{plan.note || (lang === "fr" ? "Aucune description" : "No description")}</p>
      {onOpen && (
        <button className="btn-secondary" onClick={() => onOpen(plan)}>
          <Icon name="clipboard" size={12}/> {lang === "fr" ? "Gérer" : "Manage"}
        </button>
      )}
    </div>
  );
}

function NutritionPage({ t, lang, onLogMeal }) {
  const [tab, setTab] = useStateP2("journal");
  const [plansOpen, setPlansOpen] = useStateP2(false);
  const [plans, setPlans] = useStateP2(window.MEAL_PLANS || []);
  const day = NUTRITION_TODAY;
  const goals = day.goals;
  const totals = day.totals;
  const loadPlans = async () => {
    const list = await window.GusApi.api("/nutrition/plans").catch(() => []);
    const mapped = list.map(mapNutritionPlanForUi);
    window.MEAL_PLANS = mapped;
    setPlans(mapped);
  };
  useEffectP2(() => { loadPlans(); }, []);

  return (
    <>
      <div className="page-head">
        <div>
          <h1>{t.nutrition}</h1>
          <p className="page-sub">{lang === "fr" ? "Aujourd'hui · " : "Today · "}{new Date().toLocaleDateString(lang === "fr" ? "fr-FR" : "en-US", {weekday:"long",month:"long",day:"numeric"})}</p>
        </div>
        <div style={{display:"flex",gap:8}}>
          {tab === "plans" && <button className="btn-secondary" onClick={() => setPlansOpen(true)}><Icon name="clipboard" size={14}/> {lang === "fr" ? "Nouveau plan" : "New plan"}</button>}
          {tab === "journal" && <button className="btn-primary" onClick={onLogMeal}><Icon name="plus" size={14}/> {lang === "fr" ? "Ajouter un repas" : "Log meal"}</button>}
        </div>
      </div>

      <div className="ath-tabs">
        <button className={"ath-tab " + (tab === "journal" ? "active" : "")} onClick={() => setTab("journal")}>{lang === "fr" ? "Journal" : "Log"}</button>
        <button className={"ath-tab " + (tab === "plans" ? "active" : "")} onClick={() => setTab("plans")}>{lang === "fr" ? "Plans alimentaires" : "Meal plans"}</button>
      </div>

      {tab === "journal" ? (
        <>
          <div className="nut-rings">
            <Ring label={lang === "fr" ? "Calories" : "Calories"} value={totals.kcal} goal={goals.kcal} color="var(--primary)" unit="kcal"/>
            <Ring label={lang === "fr" ? "Protéines" : "Protein"} value={totals.protein} goal={goals.protein} color="oklch(0.6 0.18 25)" unit="g"/>
            <Ring label={lang === "fr" ? "Glucides" : "Carbs"} value={totals.carbs} goal={goals.carbs} color="oklch(0.65 0.16 70)" unit="g"/>
            <Ring label={lang === "fr" ? "Lipides" : "Fat"} value={totals.fat} goal={goals.fat} color="oklch(0.55 0.14 240)" unit="g"/>
          </div>

          <h2 style={{marginBottom: 12}}>{lang === "fr" ? "Repas du jour" : "Today's meals"}</h2>
          <div className="meal-list">
            {day.meals.map((m, i) => (
              <div key={i} className="meal-card">
                <div className="meal-head">
                  <div>
                    <div className="meal-type">{lang === "fr" ? ({Breakfast:"Petit-déjeuner",Lunch:"Déjeuner",Snack:"Collation",Dinner:"Dîner"})[m.type] || m.type : m.type}</div>
                    <div className="meal-time">{m.time}</div>
                  </div>
                  <div className="meal-totals">
                    <span>{m.kcal} kcal</span>
                    <span className="muted">P {m.protein}g · C {m.carbs}g · F {m.fat}g</span>
                  </div>
                </div>
                <div className="meal-items">
                  {m.items.map((it, j) => (
                    <div key={j} className="meal-item">
                      <span>{lang === "fr" && it.fr ? it.fr : it.name}</span>
                      <span className="muted">{it.amount} · {it.kcal} kcal</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </>
      ) : (
        <>
          <div className="section-head">
            <h2>{lang === "fr" ? "Plans alimentaires" : "Meal plans"}</h2>
            <button className="btn-primary" onClick={() => setPlansOpen(true)}><Icon name="plus" size={14}/> {lang === "fr" ? "Créer un plan" : "Create plan"}</button>
          </div>
          {plans.length ? (
            <div className="nutrition-plan-grid page-plan-grid">
              {plans.map(p => <MealPlanCard key={p.id} plan={p} lang={lang} onOpen={() => setPlansOpen(true)}/>)}
            </div>
          ) : (
            <div className="empty-state">
              <h3>{lang === "fr" ? "Aucun plan alimentaire" : "No meal plans"}</h3>
              <p>{lang === "fr" ? "Crée un plan sur une semaine pour le retrouver ici." : "Create a weekly plan and it will appear here."}</p>
              <button className="btn-primary" onClick={() => setPlansOpen(true)}><Icon name="plus" size={14}/> {lang === "fr" ? "Créer un plan" : "Create plan"}</button>
            </div>
          )}
        </>
      )}
      {plansOpen && <NutritionPlansModal lang={lang} onClose={() => setPlansOpen(false)} onSaved={loadPlans}/>}
    </>
  );
}

function NutritionPlansModal({ lang, onClose, onSaved }) {
  const [plans, setPlans] = useStateP2(window.MEAL_PLANS || []);
  const [users, setUsers] = useStateP2([]);
  const [sharePlan, setSharePlan] = useStateP2(null);
  const [selectedUsers, setSelectedUsers] = useStateP2(new Set());
  const [form, setForm] = useStateP2({ name:"", description:"", kcal:2200, protein:160, carbs:240, fat:70 });
  const mealKeys = ["breakfast","lunch","dinner","snacks"];
  const mealLabels = lang === "fr"
    ? { breakfast:"Déjeuner", lunch:"Dîner", dinner:"Souper", snacks:"Collations" }
    : { breakfast:"Breakfast", lunch:"Lunch", dinner:"Dinner", snacks:"Snacks" };
  const [days, setDays] = useStateP2(Array.from({ length:7 }, (_, i) => ({
    dayNumber:i + 1,
    name:(lang === "fr" ? ["Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"] : ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"])[i],
    meals:{ breakfast:[], lunch:[], dinner:[], snacks:[] }
  })));
  const [targetDay, setTargetDay] = useStateP2(0);
  const [targetMeal, setTargetMeal] = useStateP2("breakfast");
  const [foodSearch, setFoodSearch] = useStateP2("");
  const [foodResults, setFoodResults] = useStateP2([]);
  const [foodPortions, setFoodPortions] = useStateP2({});
  const [busy, setBusy] = useStateP2(false);
  const [error, setError] = useStateP2("");
  const load = async () => {
    const list = await window.GusApi.api("/nutrition/plans").catch(() => []);
    const mapped = list.map(mapNutritionPlanForUi);
    window.MEAL_PLANS = mapped;
    setPlans(mapped);
    if (onSaved) onSaved(mapped);
  };
  useEffectP2(() => {
    load();
    window.GusApi.api("/users").then(u => setUsers(Array.isArray(u) ? u : [])).catch(() => setUsers([]));
  }, []);
  useEffectP2(() => {
    if (foodSearch.trim().length < 2) { setFoodResults([]); return; }
    let live = true;
    const timer = setTimeout(() => {
      window.GusApi.api(`/nutrition/search?q=${encodeURIComponent(foodSearch.trim())}&lang=${lang}`)
        .then(data => {
          if (!live) return;
          setFoodResults((data.products || []).map((p, i) => ({
            id:p.fdcId || p.code || `${p.product_name}-${i}`,
            name:p.product_name || p.product_name_en || "Food",
            kcal:p.nutriments?.["energy-kcal_100g"] || 0,
            protein:p.nutriments?.["proteins_100g"] || 0,
            carbs:p.nutriments?.["carbohydrates_100g"] || 0,
            fat:p.nutriments?.["fat_100g"] || 0
          })));
        })
        .catch(e => setError(e.message || "Erreur"));
    }, 350);
    return () => { live = false; clearTimeout(timer); };
  }, [foodSearch, lang]);
  const addFoodToPlan = food => {
    const grams = Number(foodPortions[food.id] || 100);
    const factor = grams / 100;
    const item = {
      name:food.name,
      amount:`${grams}g`,
      kcal:Math.round(Number(food.kcal || 0) * factor),
      protein:Number((Number(food.protein || 0) * factor).toFixed(1)),
      carbs:Number((Number(food.carbs || 0) * factor).toFixed(1)),
      fat:Number((Number(food.fat || 0) * factor).toFixed(1))
    };
    setDays(cur => cur.map((d, i) => i === targetDay ? {
      ...d,
      meals:{ ...d.meals, [targetMeal]:[...(d.meals[targetMeal] || []), item] }
    } : d));
  };
  const removeFoodFromPlan = (dayIndex, mealKey, itemIndex) => {
    setDays(cur => cur.map((d, i) => i === dayIndex ? {
      ...d,
      meals:{ ...d.meals, [mealKey]:(d.meals[mealKey] || []).filter((_, x) => x !== itemIndex) }
    } : d));
  };
  async function createPlan() {
    setBusy(true); setError("");
    try {
      if (!form.name.trim()) throw new Error(lang === "fr" ? "Nom requis" : "Name required");
      if (!days.some(d => mealKeys.some(k => (d.meals[k] || []).length))) throw new Error(lang === "fr" ? "Ajoute au moins un aliment" : "Add at least one food");
      await window.GusApi.api("/nutrition/plans", {
        method:"POST",
        body:JSON.stringify({
          name:form.name.trim(),
          description:form.description,
          numDays:7,
          target:{
            kcal:Number(form.kcal) || 0,
            protein:Number(form.protein) || 0,
            carbs:Number(form.carbs) || 0,
            fat:Number(form.fat) || 0
          },
          days,
          suggestions:days[0]?.meals || { breakfast:[], lunch:[], dinner:[], snacks:[] }
        })
      });
      setForm({ name:"", description:"", kcal:2200, protein:160, carbs:240, fat:70 });
      setDays(cur => cur.map(d => ({ ...d, meals:{ breakfast:[], lunch:[], dinner:[], snacks:[] } })));
      await load();
    } catch (e) {
      setError(e.message || "Erreur");
    } finally {
      setBusy(false);
    }
  }
  async function share() {
    if (!sharePlan) return;
    setBusy(true); setError("");
    try {
      await window.GusApi.api(`/nutrition/plans/${sharePlan.id}/share`, {
        method:"PATCH",
        body:JSON.stringify({ sharedWith:Array.from(selectedUsers) })
      });
      setSharePlan(null);
      setSelectedUsers(new Set());
      await load();
    } catch (e) {
      setError(e.message || (lang === "fr" ? "Partage réservé à l'admin" : "Admin only"));
    } finally {
      setBusy(false);
    }
  }
  const toggleUser = id => setSelectedUsers(cur => {
    const next = new Set(cur);
    next.has(id) ? next.delete(id) : next.add(id);
    return next;
  });
  return (
    <div className="modal-overlay">
      <div className="modal-card week-builder">
        <div className="modal-head">
          <h2>{lang === "fr" ? "Plans alimentaires" : "Meal plans"}</h2>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={14}/></button>
        </div>
        <div className="modal-body nutrition-plan-modal">
          <div className="nutrition-plan-form">
            <div className="form-row two">
              <div><label>{lang === "fr" ? "Nom" : "Name"}</label><input value={form.name} onChange={e => setForm(f => ({ ...f, name:e.target.value }))}/></div>
              <div><label>Description</label><input value={form.description} onChange={e => setForm(f => ({ ...f, description:e.target.value }))}/></div>
            </div>
            <div className="form-row four">
              {["kcal","protein","carbs","fat"].map(k => (
                <div key={k}><label>{k}</label><input type="number" value={form[k]} onChange={e => setForm(f => ({ ...f, [k]:e.target.value }))}/></div>
              ))}
            </div>
            <button className="btn-primary" onClick={createPlan} disabled={busy}><Icon name="plus" size={12}/> {lang === "fr" ? "Créer le plan" : "Create plan"}</button>
            {error && <div className="form-error">{error}</div>}
            <div className="meal-plan-food-picker">
              <div className="form-row two">
                <div>
                  <label>{lang === "fr" ? "Jour" : "Day"}</label>
                  <select value={targetDay} onChange={e => setTargetDay(Number(e.target.value))}>
                    {days.map((d, i) => <option key={d.dayNumber} value={i}>{d.name}</option>)}
                  </select>
                </div>
                <div>
                  <label>{lang === "fr" ? "Repas" : "Meal"}</label>
                  <select value={targetMeal} onChange={e => setTargetMeal(e.target.value)}>
                    {mealKeys.map(k => <option key={k} value={k}>{mealLabels[k]}</option>)}
                  </select>
                </div>
              </div>
              <div className="search-wrap inline">
                <Icon name="search" size={14} color="var(--text-muted)"/>
                <input value={foodSearch} onChange={e => setFoodSearch(e.target.value)} placeholder={lang === "fr" ? "Chercher un aliment..." : "Search food..."}/>
              </div>
              <div className="plan-food-results">
                {foodResults.map(f => (
                  <div className="plan-food-row" key={f.id}>
                    <span>{f.name}</span>
                    <small>{f.kcal} kcal / 100g</small>
                    <input type="number" min="1" step="5" value={foodPortions[f.id] || 100} onChange={e => setFoodPortions(p => ({ ...p, [f.id]:e.target.value }))}/>
                    <em>g</em>
                    <button className="add-btn" onClick={() => addFoodToPlan(f)}><Icon name="plus" size={12}/></button>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div className="nutrition-plan-workspace">
            <div className="week-grid meal-week-grid">
              {days.map((day, di) => (
                <div className="week-day" key={day.dayNumber}>
                  <input className="week-day-name" value={day.name} onChange={e => setDays(cur => cur.map((d, i) => i === di ? { ...d, name:e.target.value } : d))}/>
                  {mealKeys.map(k => (
                    <div className="meal-plan-day-block" key={k}>
                      <strong>{mealLabels[k]}</strong>
                      {(day.meals[k] || []).map((item, ii) => (
                        <div className="meal-plan-item" key={ii}>
                          <span>{item.name}</span>
                          <small>{item.amount} · {item.kcal} kcal</small>
                          <button className="icon-btn" onClick={() => removeFoodFromPlan(di, k, ii)}><Icon name="x" size={10}/></button>
                        </div>
                      ))}
                    </div>
                  ))}
                </div>
              ))}
            </div>
            <div className="nutrition-plan-grid">
              {plans.map(p => (
                <MealPlanCard
                  key={p.id}
                  plan={p}
                  lang={lang}
                  onShare={plan => { setSharePlan(plan); setSelectedUsers(new Set(plan.sharedWith || [])); }}
                />
              ))}
            </div>
          </div>
          {sharePlan && (
            <div className="share-panel">
              <div className="modal-head" style={{padding:"0 0 10px",borderBottom:0}}>
                <h2>{lang === "fr" ? "Partager" : "Share"} · {sharePlan.name}</h2>
                <button className="icon-btn" onClick={() => setSharePlan(null)}><Icon name="x" size={12}/></button>
              </div>
              <div className="share-list">
                {users.map(u => (
                  <label className="share-user" key={u.id}>
                    <input type="checkbox" checked={selectedUsers.has(u.id)} onChange={() => toggleUser(u.id)}/>
                    <span>{[u.firstName, u.lastName].filter(Boolean).join(" ") || u.username || u.email}</span>
                    <small>{u.email}</small>
                  </label>
                ))}
              </div>
              <button className="btn-primary" onClick={share} disabled={busy} style={{marginTop:10}}>{lang === "fr" ? "Partager" : "Share"}</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function Ring({ label, value, goal, color, unit }) {
  const pct = Math.min(value / goal, 1);
  const r = 38, c = 2 * Math.PI * r;
  return (
    <div className="ring-wrap">
      <svg width={100} height={100} viewBox="0 0 100 100">
        <circle cx={50} cy={50} r={r} fill="none" stroke="var(--surface-3)" strokeWidth="8"/>
        <circle cx={50} cy={50} r={r} fill="none" stroke={color} strokeWidth="8"
                strokeDasharray={c} strokeDashoffset={c * (1 - pct)}
                strokeLinecap="round" transform="rotate(-90 50 50)"
                style={{transition: "stroke-dashoffset 0.5s"}}/>
      </svg>
      <div className="ring-text">
        <div className="ring-val">{value}<span>{unit === "kcal" ? "" : unit}</span></div>
        <div className="ring-goal">/ {goal}{unit === "kcal" ? "" : unit}</div>
      </div>
      <div className="ring-label">{label}</div>
    </div>
  );
}

// ── PROFILE ───────────────────────────────────────────────────────────────
function ProfilePage({ t, lang }) {
  const [editing, setEditing] = useStateP2(false);
  const [, setVersion] = useStateP2(0);
  const name = USER.full || USER.name || USER.email || "GUS";
  const totalVolume = HISTORY.reduce((sum, w) => sum + (w.volume || 0), 0);
  const prs = HISTORY.reduce((sum, w) => sum + (w.prs || 0), 0);
  return (
    <>
      <div className="page-head">
        <div>
          <h1>{t.profile}</h1>
          <p className="page-sub">{lang === "fr" ? "Tes infos et préférences." : "Your info and preferences."}</p>
        </div>
      </div>

      <div className="profile-card">
        <div className="profile-head">
          <Avatar name={name} size={64} src={USER.avatar}/>
          <div>
            <div className="profile-name">{name}</div>
            <div className="profile-email">{USER.email || USER.username || ""}</div>
            <div className="profile-since">{USER.member_since ? (lang === "fr" ? "Membre depuis " : "Member since ") + USER.member_since : (lang === "fr" ? "Compte GUS" : "GUS account")}</div>
          </div>
          <button className="btn-secondary" onClick={() => setEditing(true)}><Icon name="edit" size={12}/> {lang === "fr" ? "Modifier" : "Edit"}</button>
        </div>

        <div className="profile-stats">
          <div><div className="ps-label">{lang === "fr" ? "Séances totales" : "Total workouts"}</div><div className="ps-val">{USER.totalWorkouts || HISTORY.length}</div></div>
          <div><div className="ps-label">{lang === "fr" ? "Volume total" : "Total volume"}</div><div className="ps-val">{Math.round(totalVolume / 1000)} t</div></div>
          <div><div className="ps-label">{lang === "fr" ? "Cette semaine" : "This week"}</div><div className="ps-val">{USER.thisWeek || 0}</div></div>
          <div><div className="ps-label">PRs</div><div className="ps-val">{prs}</div></div>
        </div>

        <h3 style={{marginBottom:12}}>{lang === "fr" ? "Personnel" : "Personal"}</h3>
        <div className="profile-fields">
          <div className="pf-row"><label>{lang === "fr" ? "Identifiant" : "Username"}</label><span>{USER.username || "—"}</span></div>
          <div className="pf-row"><label>{lang === "fr" ? "Sexe" : "Sex"}</label><span>{USER.gender || "—"}</span></div>
          <div className="pf-row"><label>{lang === "fr" ? "Taille" : "Height"}</label><span>{USER.height ? `${USER.height} cm` : "—"}</span></div>
          <div className="pf-row"><label>{lang === "fr" ? "Objectif principal" : "Primary goal"}</label><span>{USER.goal || "—"}</span></div>
          <div className="pf-row"><label>{lang === "fr" ? "Niveau d'expérience" : "Experience level"}</label><span>{USER.level || "—"}</span></div>
        </div>

        <h3 style={{margin:"20px 0 12px"}}>{lang === "fr" ? "Préférences" : "Preferences"}</h3>
        <div className="profile-fields">
          <div className="pf-row"><label>{lang === "fr" ? "Unités" : "Units"}</label><span>{lang === "fr" ? "Métrique (kg, cm)" : "Metric (kg, cm)"}</span></div>
          <div className="pf-row"><label>{lang === "fr" ? "Repos par défaut" : "Default rest"}</label><span>90s</span></div>
          <div className="pf-row"><label>{lang === "fr" ? "Premier jour de la semaine" : "Week starts on"}</label><span>{lang === "fr" ? "Lundi" : "Monday"}</span></div>
          <div className="pf-row"><label>{lang === "fr" ? "Rôle" : "Role"}</label><span>{USER.role || "—"}</span></div>
        </div>
      </div>
      {editing && <ProfileEditModal lang={lang} onClose={() => setEditing(false)} onSaved={async () => { await window.loadGusBackendData(); setEditing(false); setVersion(v => v + 1); }}/>}
    </>
  );
}

function ProfileEditModal({ lang, onClose, onSaved }) {
  const [firstName, setFirstName] = useStateP2(USER.firstName || "");
  const [lastName, setLastName] = useStateP2(USER.lastName || "");
  const [email, setEmail] = useStateP2(USER.email || "");
  const [avatar, setAvatar] = useStateP2(USER.avatar || "");
  const [busy, setBusy] = useStateP2(false);
  const [error, setError] = useStateP2("");
  const name = [firstName, lastName].filter(Boolean).join(" ") || USER.name || "GUS";
  const readAvatar = file => {
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => setAvatar(String(reader.result || ""));
    reader.readAsDataURL(file);
  };
  async function save() {
    setBusy(true); setError("");
    try {
      await window.GusApi.api(`/users/${USER.id}`, {
        method:"PUT",
        body:JSON.stringify({ firstName, lastName, email })
      });
      if (avatar && avatar !== USER.avatar) {
        await window.GusApi.api(`/users/${USER.id}/avatar`, {
          method:"POST",
          body:JSON.stringify({ avatar })
        });
      }
      await onSaved();
    } catch (e) {
      setError(e.message || "Erreur");
    } finally {
      setBusy(false);
    }
  }
  return (
    <div className="modal-overlay">
      <div className="modal-card compact-modal">
        <div className="modal-head">
          <h2>{lang === "fr" ? "Modifier le profil" : "Edit profile"}</h2>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={14}/></button>
        </div>
        <div className="modal-body">
          <div className="profile-edit-avatar">
            <Avatar name={name} size={72} src={avatar}/>
            <label className="btn-secondary">
              <Icon name="image" size={12}/> {lang === "fr" ? "Photo" : "Photo"}
              <input type="file" accept="image/*" onChange={e => readAvatar(e.target.files?.[0])} hidden/>
            </label>
          </div>
          <div className="form-row two">
            <div><label>{lang === "fr" ? "Prénom" : "First name"}</label><input value={firstName} onChange={e => setFirstName(e.target.value)}/></div>
            <div><label>{lang === "fr" ? "Nom" : "Last name"}</label><input value={lastName} onChange={e => setLastName(e.target.value)}/></div>
          </div>
          <div className="form-row">
            <label>Email</label>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)}/>
          </div>
          {error && <div className="form-error">{error}</div>}
        </div>
        <div className="modal-foot">
          <button className="btn-secondary" onClick={onClose}>{lang === "fr" ? "Annuler" : "Cancel"}</button>
          <button className="btn-primary" onClick={save} disabled={busy}>{busy ? "..." : (lang === "fr" ? "Sauver" : "Save")}</button>
        </div>
      </div>
    </div>
  );
}

function Avatar({ name, size = 32, src = "" }) {
  const safe = String(name || "GUS");
  const initials = safe.split(" ").map(s => s[0]).join("").slice(0,2).toUpperCase();
  const hue = safe.split("").reduce((a,c) => a + c.charCodeAt(0), 0) % 360;
  return (
    <div style={{
      width: size, height: size, borderRadius: "50%",
      background: `oklch(0.75 0.1 ${hue})`,
      backgroundImage: src ? `url(${src})` : "none",
      backgroundSize: "cover",
      backgroundPosition: "center",
      color: `oklch(0.3 0.1 ${hue})`,
      display: "flex", alignItems: "center", justifyContent: "center",
      fontWeight: 700, fontSize: size * 0.4, flexShrink: 0,
    }}>{src ? "" : initials}</div>
  );
}

function GusAssistant({ lang, onSaved }) {
  const [open, setOpen] = useStateP2(false);
  const [input, setInput] = useStateP2("");
  const [messages, setMessages] = useStateP2([{ role:"assistant", text:lang === "fr"
    ? "Je suis GUS. Demande-moi un plan alimentaire sur 7 jours ou un programme d'entraînement."
    : "I'm GUS. Ask me for a 7-day meal plan or a training program." }]);
  const [history, setHistory] = useStateP2([]);
  const [preview, setPreview] = useStateP2(null);
  const [busy, setBusy] = useStateP2(false);
  async function send() {
    const text = input.trim();
    if (!text || busy) return;
    setInput("");
    setMessages(m => [...m, { role:"user", text }]);
    setBusy(true);
    try {
      const resp = await window.GusApi.api("/ai/assist", {
        method:"POST",
        body:JSON.stringify({ message:text, history })
      });
      const reply = resp.message || JSON.stringify(resp);
      setMessages(m => [...m, { role:"assistant", text:reply }]);
      setHistory(h => [...h, { role:"user", content:text }, { role:"assistant", content:reply }].slice(-10));
      if (resp.plan && (resp.type === "nutrition_plan" || resp.type === "training_template")) setPreview(resp);
    } catch (e) {
      setMessages(m => [...m, { role:"assistant", text:e.message || "Erreur" }]);
    } finally {
      setBusy(false);
    }
  }
  async function savePreview() {
    if (!preview?.plan) return;
    if (preview.type === "nutrition_plan") {
      await window.GusApi.api("/nutrition/plans", { method:"POST", body:JSON.stringify(preview.plan) });
    } else if (preview.type === "training_template") {
      await window.GusApi.api("/templates", { method:"POST", body:JSON.stringify(preview.plan) });
    }
    setPreview(null);
    if (onSaved) await onSaved();
    setMessages(m => [...m, { role:"assistant", text:lang === "fr" ? "Plan sauvegardé." : "Plan saved." }]);
  }
  return (
    <>
      <button className="gus-float-btn" onClick={() => setOpen(true)}>
        <img src="/images/GUS-Face.png" alt="GUS"/>
        <span>GUS</span>
      </button>
      {open && (
        <div className="gus-panel">
          <div className="gus-head">
            <div><strong>GUS</strong><span>{lang === "fr" ? "Assistant IA" : "AI assistant"}</span></div>
            <button className="icon-btn" onClick={() => setOpen(false)}><Icon name="x" size={14}/></button>
          </div>
          <div className="gus-messages">
            {messages.map((m, i) => <div key={i} className={"gus-msg " + m.role}>{m.text}</div>)}
            {busy && <div className="gus-msg assistant">...</div>}
          </div>
          {preview && (
            <div className="gus-preview">
              <strong>{preview.plan.name || (lang === "fr" ? "Plan proposé" : "Suggested plan")}</strong>
              <button className="btn-primary" onClick={savePreview}>{lang === "fr" ? "Sauvegarder" : "Save"}</button>
            </div>
          )}
          <div className="gus-compose">
            <textarea value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => { if(e.key === "Enter" && !e.shiftKey){ e.preventDefault(); send(); } }} placeholder={lang === "fr" ? "Demande un plan alimentaire 7 jours..." : "Ask for a 7-day meal plan..."}/>
            <button className="btn-primary" onClick={send} disabled={busy}><Icon name="send" size={14}/></button>
          </div>
        </div>
      )}
    </>
  );
}

// ── ADMIN ────────────────────────────────────────────────────────────────
function AdminPage({ t, lang }) {
  const [tab, setTab] = useStateP2("members");
  const [exerciseRequests, setExerciseRequests] = useStateP2([]);
  const [, setVersion] = useStateP2(0);
  const members = Array.isArray(window.MEMBERS) ? window.MEMBERS : MEMBERS;
  const coaches = members.filter(m => m.role === "coach").length;
  const admins = members.filter(m => m.role === "admin").length;
  const workouts30 = members.reduce((sum, m) => sum + Number(m.workouts30 || 0), 0);
  const roleLabel = role => role === "admin" ? "Admin" : role === "coach" ? "Coach" : (lang === "fr" ? "Membre" : "Member");
  const changeRole = async (member, role) => {
    await window.GusApi.api(`/users/${member.id}`, {
      method:"PUT",
      body:JSON.stringify({ role })
    });
    if (window.loadGusBackendData) await window.loadGusBackendData();
    setVersion(v => v + 1);
  };
  const loadExerciseRequests = async () => {
    const list = await window.GusApi.api("/admin/exercise-requests").catch(() => []);
    setExerciseRequests(Array.isArray(list) ? list : []);
  };
  const reviewExerciseRequest = async (request, action) => {
    await window.GusApi.api(`/admin/exercise-requests/${request.id}`, {
      method:"PATCH",
      body:JSON.stringify({ action })
    });
    if (window.loadGusBackendData) await window.loadGusBackendData();
    await loadExerciseRequests();
    setVersion(v => v + 1);
  };
  useEffectP2(() => { loadExerciseRequests(); }, []);
  return (
    <>
      <div className="page-head">
        <div>
          <h1>{lang === "fr" ? "Admin" : "Admin"}</h1>
          <p className="page-sub">{lang === "fr" ? `${members.length} comptes actifs` : `${members.length} active accounts`}</p>
        </div>
        <button className="btn-primary"><Icon name="user-plus" size={14}/> {lang === "fr" ? "Inviter un membre" : "Invite member"}</button>
      </div>

      <div className="admin-stats">
        <div className="stat-card">
          <div className="stat-label"><Icon name="users" size={12}/> {lang === "fr" ? "Membres actifs" : "Active members"}</div>
          <div className="stat-value">{members.length}</div>
          <div className="stat-trend muted">{lang === "fr" ? "Depuis la DB" : "From DB"}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label"><Icon name="dumbbell" size={12}/> {lang === "fr" ? "Séances · 30j" : "Workouts · 30d"}</div>
          <div className="stat-value">{workouts30}</div>
          <div className="stat-trend muted">{lang === "fr" ? "Comptes accessibles" : "Accessible accounts"}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label"><Icon name="users" size={12}/> {lang === "fr" ? "Coachs" : "Coaches"}</div>
          <div className="stat-value">{coaches}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label"><Icon name="shield" size={12}/> Admins</div>
          <div className="stat-value">{admins}</div>
          <div className="stat-trend muted">{lang === "fr" ? "Rôles système" : "System roles"}</div>
        </div>
      </div>

      <div className="admin-tabs">
        <button className={tab==="members"?"active":""} onClick={() => setTab("members")}><Icon name="users" size={14}/> {lang === "fr" ? "Membres" : "Members"}</button>
        <button className={tab==="coaches"?"active":""} onClick={() => setTab("coaches")}><Icon name="user-check" size={14}/> {lang === "fr" ? "Coachs" : "Coaches"}</button>
        <button className={tab==="exerciseRequests"?"active":""} onClick={() => setTab("exerciseRequests")}><Icon name="database" size={14}/> {lang === "fr" ? "Demandes exercices" : "Exercise requests"}</button>
        <button className={tab==="programs"?"active":""} onClick={() => setTab("programs")}><Icon name="clipboard" size={14}/> {lang === "fr" ? "Programmes" : "Programs"}</button>
        <button className={tab==="billing"?"active":""} onClick={() => setTab("billing")}><Icon name="credit-card" size={14}/> {lang === "fr" ? "Facturation" : "Billing"}</button>
      </div>

      {tab === "exerciseRequests" ? (
        <div className="exercise-request-grid">
          {exerciseRequests.length ? exerciseRequests.map(r => (
            <div className="exercise-request-card" key={r.id}>
              {r.photo && <img src={r.photo} alt={r.machineName || r.proposal?.name}/>}
              <div className="tpl-cat">{r.status}</div>
              <h3>{r.proposal?.name || r.machineName || "Exercise"}</h3>
              <p className="muted">{r.machineName} · {Math.round((r.confidence || 0) * 100)}%</p>
              <div className="tpl-stats">
                <span>{r.proposal?.muscleGroup}</span><span>·</span><span>{r.proposal?.equipment}</span><span>·</span><span>{r.proposal?.difficulty}</span>
              </div>
              <p>{r.proposal?.description || r.reason}</p>
              <small className="muted">{lang === "fr" ? "Demandé par" : "Requested by"} {r.user?.email || r.requestedBy}</small>
              {r.status === "pending" && (
                <div className="request-actions">
                  <button className="btn-primary" onClick={() => reviewExerciseRequest(r, "approve")}><Icon name="check" size={12}/> {lang === "fr" ? "Approuver" : "Approve"}</button>
                  <button className="btn-secondary" onClick={() => reviewExerciseRequest(r, "reject")}><Icon name="x" size={12}/> {lang === "fr" ? "Refuser" : "Reject"}</button>
                </div>
              )}
            </div>
          )) : (
            <div className="empty-state">
              <h3>{lang === "fr" ? "Aucune demande" : "No requests"}</h3>
              <p>{lang === "fr" ? "Les demandes de création d'exercice apparaîtront ici." : "Exercise creation requests will appear here."}</p>
            </div>
          )}
        </div>
      ) : (
      <div className="admin-table-wrap">
        <div className="admin-table-head">
          <div className="search-wrap inline">
            <Icon name="search" size={14} color="var(--text-muted)"/>
            <input type="text" placeholder={lang === "fr" ? "Rechercher un membre…" : "Search members…"}/>
          </div>
          <div style={{display:"flex",gap:8}}>
            <button className="btn-ghost"><Icon name="filter" size={12}/> {lang === "fr" ? "Filtrer" : "Filter"}</button>
            <button className="btn-ghost"><Icon name="download" size={12}/> {lang === "fr" ? "Exporter" : "Export"}</button>
          </div>
        </div>
        <table className="admin-table">
          <thead>
            <tr>
              <th>{lang === "fr" ? "Membre" : "Member"}</th>
              <th>{lang === "fr" ? "Rôle" : "Role"}</th>
              <th>{lang === "fr" ? "Coach" : "Coach"}</th>
              <th>{lang === "fr" ? "Séances · 30j" : "Workouts · 30d"}</th>
              <th>{lang === "fr" ? "Dernière session" : "Last active"}</th>
              <th>{lang === "fr" ? "Adhésion" : "Plan"}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {members.map(m => (
              <tr key={m.id}>
                <td>
                  <div className="td-user"><Avatar name={m.name} size={28}/>{m.name}</div>
                </td>
                <td>
                  <div style={{display:"flex",alignItems:"center",gap:8}}>
                    <span className={"role-tag " + (m.role || "user")}>{roleLabel(m.role)}</span>
                    <select className="admin-role-select" value={m.role || "user"} onChange={e => changeRole(m, e.target.value)} disabled={String(m.id) === String(USER.id)}>
                      <option value="user">{lang === "fr" ? "Membre" : "Member"}</option>
                      <option value="coach">Coach</option>
                      <option value="admin">Admin</option>
                    </select>
                  </div>
                </td>
                <td>{m.coach || "—"}</td>
                <td>{m.workouts30}</td>
                <td>{m.lastActive}</td>
                <td>{m.plan}</td>
                <td><button className="icon-btn"><Icon name="more" size={14}/></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      )}
    </>
  );
}

Object.assign(window, { ChartsPage, BiometricsPage, NutritionPage, ProfilePage, AdminPage, GusAssistant });