// Coach role + meal logging + body view toggle.
// Adds: AthletesList, AthleteDetail, PlanBuilder, MealPlanBuilder,
// CustomExerciseBuilder, CoachMessages, LogMealSheet, AthleteMealPlan, BodyView.
const { useState: useStateC, useMemo: useMemoC, useEffect: useEffectC } = React;

// Filled by api-adapter.jsx from /api/users.
window.COACH_ATHLETES = window.COACH_ATHLETES || [];

window.MEAL_PLANS = [
  { id: 1, name: "Cutting 2400", target: { kcal: 2400, protein: 200, carbs: 240, fat: 70 },
    note: "Higher protein, moderate carbs cycling around training",
    suggestions: { breakfast: ["Oats + whey + berries", "3 eggs + toast"],
                   lunch: ["Chicken rice bowl", "Tuna pasta"],
                   dinner: ["Lean beef + sweet potato", "Salmon + greens"],
                   snack: ["Greek yogurt + nuts", "Protein shake"] } },
  { id: 2, name: "Lean Bulk 3200", target: { kcal: 3200, protein: 200, carbs: 380, fat: 90 },
    note: "Surplus on training days, maintenance on rest days",
    suggestions: { breakfast: ["Big oats bowl + 2 eggs", "Protein pancakes"],
                   lunch: ["Chicken + jasmine rice + avocado", "Beef burrito bowl"],
                   dinner: ["Salmon + potatoes", "Steak + rice + veg"],
                   snack: ["PB+J+banana", "Trail mix + shake"] } },
  { id: 3, name: "Maintenance 2100", target: { kcal: 2100, protein: 150, carbs: 220, fat: 70 },
    note: "Flexible, intuitive eating with macro guardrails",
    suggestions: { breakfast: ["Greek yogurt parfait"], lunch: ["Salad + protein"],
                   dinner: ["Stir-fry"], snack: ["Fruit + nuts"] } },
];

window.FOOD_DB = [
  { id: 1, name: "Chicken breast (100g)", kcal: 165, p: 31, c: 0, f: 3.6 },
  { id: 2, name: "White rice (100g cooked)", kcal: 130, p: 2.7, c: 28, f: 0.3 },
  { id: 3, name: "Whey protein (1 scoop)", kcal: 120, p: 24, c: 3, f: 1.5 },
  { id: 4, name: "Banana (medium)", kcal: 105, p: 1.3, c: 27, f: 0.4 },
  { id: 5, name: "Greek yogurt (170g)", kcal: 100, p: 17, c: 6, f: 0 },
  { id: 6, name: "Eggs (2 large)", kcal: 140, p: 12, c: 1, f: 10 },
  { id: 7, name: "Oats (50g dry)", kcal: 190, p: 6.5, c: 33, f: 3.5 },
  { id: 8, name: "Almonds (30g)", kcal: 175, p: 6, c: 6, f: 15 },
  { id: 9, name: "Salmon (150g)", kcal: 280, p: 30, c: 0, f: 17 },
  { id: 10, name: "Sweet potato (200g)", kcal: 180, p: 4, c: 41, f: 0.3 },
  { id: 11, name: "Avocado (1/2)", kcal: 160, p: 2, c: 9, f: 15 },
  { id: 12, name: "Lean beef 90/10 (100g)", kcal: 175, p: 22, c: 0, f: 9 },
];

window.RECIPES = [
  { id: 1, name: "Post-workout shake", time: "2 min", kcal: 350, p: 40, c: 35, f: 7,
    ingredients: ["1 scoop whey", "1 banana", "300ml milk", "1 tbsp PB"] },
  { id: 2, name: "Chicken rice bowl", time: "15 min", kcal: 580, p: 50, c: 70, f: 10,
    ingredients: ["150g chicken", "150g rice", "Veggies", "Soy sauce"] },
  { id: 3, name: "Overnight oats", time: "5 min + overnight", kcal: 420, p: 30, c: 55, f: 10,
    ingredients: ["50g oats", "1 scoop whey", "Berries", "200ml milk"] },
];

window.CUSTOM_EXERCISES = [
  { id: 1001, name: "Banded glute bridge", muscle: "legs", equipment: "bands",
    visibility: "shared", videos: 1, photos: 2, sharedWith: 4,
    cues: ["Drive through heels", "Squeeze at top", "Don't arch lower back"] },
  { id: 1002, name: "Landmine press", muscle: "shoulders", equipment: "barbell",
    visibility: "shared", videos: 1, photos: 1, sharedWith: 8,
    cues: ["Brace core", "Press from shoulder", "Full extension"] },
  { id: 1003, name: "Single-arm cable row (rotation)", muscle: "back", equipment: "cable",
    visibility: "private", videos: 0, photos: 1, sharedWith: 0, cues: ["Rotate as you pull"] },
];

window.MESSAGES = [
  { id: 1, athleteId: 1, lastAt: "10 min ago", unread: 2, snippet: "Quick question about Tuesday's session…",
    thread: [
      { from: "athlete", at: "Yesterday 18:42", text: "Yo coach — bench felt heavy today, 4×5 done @ 87.5kg" },
      { from: "coach", at: "Yesterday 19:10", text: "Nice work. RPE?" },
      { from: "athlete", at: "Yesterday 19:14", text: "Like 8.5. Last set was a grind." },
      { from: "athlete", at: "10 min ago", text: "Quick question about Tuesday's session — should I deload bench or keep pushing?" },
    ]},
  { id: 2, athleteId: 4, lastAt: "2h ago", unread: 0, snippet: "Macros hit, sleep was 7h",
    thread: [{ from: "athlete", at: "2h ago", text: "Macros hit, sleep was 7h" }] },
  { id: 3, athleteId: 5, lastAt: "Yesterday", unread: 0, snippet: "PR on squat! 160kg x 3",
    thread: [{ from: "athlete", at: "Yesterday", text: "PR on squat! 160kg x 3 🔥" },
             { from: "coach", at: "Yesterday", text: "Massive. Recovery first today." }] },
  { id: 4, athleteId: 8, lastAt: "Yesterday", unread: 1, snippet: "New plan looks great, starting Monday",
    thread: [{ from: "athlete", at: "Yesterday", text: "New plan looks great, starting Monday" }] },
];

// ── Body view toggle (front / back) ───────────────────────────────────────
function BodyView({ gender = "male", selected, onSelect, compact = false }) {
  const [view, setView] = useStateC("front");
  return (
    <div className="body-view">
      {!compact && (
        <div className="body-view-tabs">
          <button className={"bv-tab" + (view === "front" ? " active" : "")} onClick={() => setView("front")}>Front</button>
          <button className={"bv-tab" + (view === "back" ? " active" : "")} onClick={() => setView("back")}>Back</button>
        </div>
      )}
      <MuscleSilhouette gender={gender} view={view} selected={selected} onSelect={onSelect}/>
      {compact && (
        <div className="body-view-tabs compact">
          <button className={"bv-tab" + (view === "front" ? " active" : "")} onClick={() => setView("front")}>F</button>
          <button className={"bv-tab" + (view === "back" ? " active" : "")} onClick={() => setView("back")}>B</button>
        </div>
      )}
    </div>
  );
}

// ── Coach: Athletes list ─────────────────────────────────────────────────
function CoachAthletesPage({ t, lang, onOpenAthlete }) {
  const [search, setSearch] = useStateC("");
  const [manageOpen, setManageOpen] = useStateC(false);
  const [, setVersion] = useStateC(0);
  const filtered = COACH_ATHLETES.filter(a => a.name.toLowerCase().includes(search.toLowerCase()));
  const available = Array.isArray(window.COACH_AVAILABLE_USERS) ? window.COACH_AVAILABLE_USERS : [];
  const refreshTeam = async () => {
    if (window.loadGusBackendData) await window.loadGusBackendData();
    setVersion(v => v + 1);
  };
  const updateTeam = async (userId, action) => {
    await window.GusApi.api(`/coach/team/${userId}`, {
      method:"PATCH",
      body:JSON.stringify({ action })
    });
    await refreshTeam();
  };
  return (
    <>
      <div className="page-head">
        <div>
          <h1>{lang === "fr" ? "Mes athlètes" : "My athletes"}</h1>
          <p className="page-sub">{COACH_ATHLETES.length} {lang === "fr" ? "athlètes actifs" : "active athletes"}</p>
        </div>
        <button className="btn-primary" onClick={() => setManageOpen(true)}><Icon name="user-plus" size={14}/> {lang === "fr" ? "Ajouter à l'équipe" : "Add to team"}</button>
      </div>

      <div className="search-wrap" style={{maxWidth: 360, marginBottom: 16}}>
        <Icon name="search" size={14} color="var(--text-muted)"/>
        <input placeholder={lang === "fr" ? "Rechercher…" : "Search…"} value={search} onChange={e => setSearch(e.target.value)}/>
      </div>

      <div className="athletes-grid">
        {filtered.map(a => (
          <div key={a.id} className="athlete-card" role="button" tabIndex={0} onClick={() => onOpenAthlete(a)}>
            <Avatar name={a.name} size={48}/>
            <div className="athlete-card-main">
              <div className="athlete-card-name">{a.name}</div>
              <div className="athlete-card-meta">{a.goal} · {a.gender === "female" ? "F" : "M"}</div>
              <div className="athlete-card-stats">
                <span title={lang === "fr" ? "Compliance entraînement" : "Training compliance"}>
                  <Icon name="dumbbell" size={11}/> {a.complianceTraining}%
                </span>
                <span title={lang === "fr" ? "Compliance nutrition" : "Nutrition compliance"}>
                  <Icon name="apple" size={11}/> {a.complianceNutrition}%
                </span>
                {a.streak > 0 && <span style={{color:"var(--primary)"}}>🔥 {a.streak}d</span>}
              </div>
            </div>
            <div className="athlete-card-side">
              <div className="athlete-card-last">{a.lastWorkout}</div>
              <button className="icon-btn" title={lang === "fr" ? "Retirer de l'équipe" : "Remove from team"} onClick={e => { e.stopPropagation(); updateTeam(a.id, "remove"); }}>
                <Icon name="x" size={12}/>
              </button>
              <Icon name="chevron-right" size={14} color="var(--text-muted)"/>
            </div>
          </div>
        ))}
      </div>
      {manageOpen && (
        <div className="modal-overlay">
          <div className="modal-card compact-modal">
            <div className="modal-head">
              <h2>{lang === "fr" ? "Ajouter des utilisateurs" : "Add users"}</h2>
              <button className="icon-btn" onClick={() => setManageOpen(false)}><Icon name="x" size={14}/></button>
            </div>
            <div className="modal-body">
              <div className="share-list">
                {available.length ? available.map(u => (
                  <div className="share-user" key={u.id}>
                    <span>{u.name}</span>
                    <small>{u.email}</small>
                    <button className="btn-secondary" style={{gridColumn:"1 / -1",justifyContent:"center"}} onClick={() => updateTeam(u.id, "add")}>
                      <Icon name="user-plus" size={12}/> {lang === "fr" ? "Ajouter" : "Add"}
                    </button>
                  </div>
                )) : (
                  <p className="muted">{lang === "fr" ? "Aucun utilisateur disponible sans équipe." : "No unassigned users available."}</p>
                )}
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

// ── Coach: Single athlete detail ─────────────────────────────────────────
function AthleteDetailPage({ athlete, t, lang, onBack }) {
  const [tab, setTab] = useStateC("overview");
  return (
    <>
      <div className="page-head">
        <div style={{display:"flex",alignItems:"center",gap:12}}>
          <button className="icon-btn" onClick={onBack}><Icon name="chevron-right" size={18} color="currentColor"/></button>
          <Avatar name={athlete.name} size={48}/>
          <div>
            <h1 style={{fontSize:22}}>{athlete.name}</h1>
            <p className="page-sub">{athlete.goal} · {athlete.weight} kg ({athlete.weightDelta > 0 ? "+" : ""}{athlete.weightDelta} kg/30d)</p>
          </div>
        </div>
        <div style={{display:"flex",gap:8}}>
          <button className="btn-ghost"><Icon name="chat" size={14}/> {lang === "fr" ? "Message" : "Message"}</button>
          <button className="btn-primary"><Icon name="bolt" size={14}/> {lang === "fr" ? "Assigner plan" : "Assign plan"}</button>
        </div>
      </div>

      <div className="ath-tabs">
        {[
          ["overview", lang === "fr" ? "Vue d'ensemble" : "Overview"],
          ["training", lang === "fr" ? "Entraînement" : "Training"],
          ["nutrition", "Nutrition"],
          ["biometrics", lang === "fr" ? "Biométrie" : "Biometrics"],
          ["plans", "Plans"],
        ].map(([k, label]) => (
          <button key={k} className={"ath-tab" + (tab === k ? " active" : "")} onClick={() => setTab(k)}>{label}</button>
        ))}
      </div>

      {tab === "overview" && <AthleteOverview athlete={athlete} lang={lang} t={t}/>}
      {tab === "training" && <AthleteTraining athlete={athlete} lang={lang}/>}
      {tab === "nutrition" && <AthleteNutrition athlete={athlete} lang={lang}/>}
      {tab === "biometrics" && <AthleteBiometrics athlete={athlete} lang={lang}/>}
      {tab === "plans" && <AthletePlans athlete={athlete} lang={lang}/>}
    </>
  );
}

function AthleteOverview({ athlete, lang, t }) {
  return (
    <div className="ath-overview">
      <div className="stat-grid">
        <div className="stat-card">
          <div className="stat-label">{lang === "fr" ? "Séances 30j" : "Workouts 30d"}</div>
          <div className="stat-value">{Math.round(athlete.complianceTraining * 0.3)}<span className="stat-unit">/{Math.round(0.3 * 100/athlete.complianceTraining * Math.round(athlete.complianceTraining * 0.3))}</span></div>
          <div className="stat-trend pos">{athlete.complianceTraining}% compliance</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">{lang === "fr" ? "Poids" : "Weight"}</div>
          <div className="stat-value">{athlete.weight}<span className="stat-unit"> kg</span></div>
          <div className={"stat-trend " + (athlete.weightDelta < 0 ? "pos" : athlete.weightDelta > 0 ? "neg" : "muted")}>
            {athlete.weightDelta > 0 ? "+" : ""}{athlete.weightDelta} kg / 30d
          </div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Streak</div>
          <div className="stat-value">{athlete.streak}<span className="stat-unit"> j</span></div>
          <div className="stat-trend pos">{lang === "fr" ? "Régulier" : "Consistent"}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">{lang === "fr" ? "Compliance nutri." : "Nutri. compliance"}</div>
          <div className="stat-value">{athlete.complianceNutrition}<span className="stat-unit">%</span></div>
          <div className="stat-trend muted">30d</div>
        </div>
      </div>

      <div className="dash-cols" style={{marginTop: 24}}>
        <section className="dash-section">
          <h2>{lang === "fr" ? "Progression" : "Progress"}</h2>
          <div style={{padding: "16px 0"}}>
            <div className="muted" style={{fontSize: 12, marginBottom: 8}}>Bench press · e1RM (8 weeks)</div>
            <Sparkline data={[82, 84, 85, 85, 87, 88, 90, 92]} w={400} h={80} color="var(--primary)"/>
          </div>
          <div style={{padding: "8px 0"}}>
            <div className="muted" style={{fontSize: 12, marginBottom: 8}}>Squat · e1RM</div>
            <Sparkline data={[110, 112, 115, 118, 120, 122, 125, 128]} w={400} h={80} color="var(--brindle-2, #5C3D22)"/>
          </div>
        </section>
        <section className="dash-section">
          <h2>{lang === "fr" ? "Aperçu corporel" : "Muscle map"}</h2>
          <BodyView gender={athlete.gender}/>
        </section>
      </div>
    </div>
  );
}

function AthleteTraining({ athlete, lang }) {
  const recent = HISTORY.slice(0, 8);
  return (
    <div>
      <h2 style={{marginBottom: 12}}>{lang === "fr" ? "Séances récentes" : "Recent workouts"}</h2>
      <div className="workout-list">
        {recent.map(w => <WorkoutRow key={w.id} workout={w} lang={lang}/>)}
      </div>
    </div>
  );
}

function AthleteNutrition({ athlete, lang }) {
  return (
    <div>
      {athlete.mealPlan ? (
        <>
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
            <h2>{lang === "fr" ? "Plan actuel" : "Current plan"}: {athlete.mealPlan}</h2>
            <button className="btn-ghost"><Icon name="edit" size={12}/> {lang === "fr" ? "Modifier" : "Edit"}</button>
          </div>
          <div className="stat-grid">
            <div className="stat-card"><div className="stat-label">kcal</div><div className="stat-value">2,180<span className="stat-unit">/2,400</span></div><div className="stat-trend pos">7d avg</div></div>
            <div className="stat-card"><div className="stat-label">Protein</div><div className="stat-value">186<span className="stat-unit">g/200g</span></div><div className="stat-trend pos">93%</div></div>
            <div className="stat-card"><div className="stat-label">Carbs</div><div className="stat-value">218<span className="stat-unit">g/240g</span></div><div className="stat-trend muted">91%</div></div>
            <div className="stat-card"><div className="stat-label">Fat</div><div className="stat-value">62<span className="stat-unit">g/70g</span></div><div className="stat-trend muted">89%</div></div>
          </div>
        </>
      ) : (
        <div className="empty-state">
          <Icon name="apple" size={32} color="var(--text-dim)"/>
          <p style={{marginTop: 12}}>{lang === "fr" ? "Aucun plan alimentaire assigné" : "No meal plan assigned"}</p>
          <button className="btn-primary" style={{marginTop: 12}}>{lang === "fr" ? "Assigner un plan" : "Assign a plan"}</button>
        </div>
      )}
    </div>
  );
}

function AthleteBiometrics({ athlete, lang }) {
  return (
    <div>
      <h2 style={{marginBottom: 12}}>{lang === "fr" ? "Mesures (8 dernières)" : "Measurements (last 8)"}</h2>
      <table className="data-table">
        <thead><tr><th>Date</th><th>{lang === "fr" ? "Poids" : "Weight"}</th><th>Chest</th><th>Waist</th><th>Arm</th><th>Thigh</th></tr></thead>
        <tbody>
          {(window.BIOMETRICS || []).slice(0, 8).map((b, i) => (
            <tr key={i}><td>{b.date}</td><td>{(athlete.weight + (i * 0.1)).toFixed(1)} kg</td>
                        <td>{b.chest} cm</td><td>{b.waist} cm</td><td>{b.arm} cm</td><td>{b.thigh} cm</td></tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function AthletePlans({ athlete, lang }) {
  return (
    <div>
      <h2 style={{marginBottom: 12}}>{lang === "fr" ? "Plans assignés" : "Assigned plans"}</h2>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
        <div className="plan-card">
          <div className="plan-card-head"><Icon name="dumbbell" size={14}/> Training</div>
          <div className="plan-card-name">{athlete.plan || "—"}</div>
          {athlete.plan && <div className="plan-card-meta">{lang === "fr" ? "Assigné il y a 3 sem." : "Assigned 3w ago"} · 92% compliance</div>}
        </div>
        <div className="plan-card">
          <div className="plan-card-head"><Icon name="apple" size={14}/> Nutrition</div>
          <div className="plan-card-name">{athlete.mealPlan || "—"}</div>
          {athlete.mealPlan && <div className="plan-card-meta">{lang === "fr" ? "Assigné il y a 2 sem." : "Assigned 2w ago"} · 78% compliance</div>}
        </div>
      </div>
    </div>
  );
}

// ── Coach: Plans (training + nutrition) ──────────────────────────────────
function CoachPlansPage({ t, lang }) {
  const [tab, setTab] = useStateC("training");
  return (
    <>
      <div className="page-head">
        <div>
          <h1>Plans</h1>
          <p className="page-sub">{lang === "fr" ? "Crée et partage des plans avec tes athlètes" : "Create and share plans with your athletes"}</p>
        </div>
        <button className="btn-primary"><Icon name="plus" size={14}/> {lang === "fr" ? "Nouveau plan" : "New plan"}</button>
      </div>
      <div className="ath-tabs">
        <button className={"ath-tab" + (tab === "training" ? " active" : "")} onClick={() => setTab("training")}>
          {lang === "fr" ? "Entraînement" : "Training"} ({TEMPLATES.length})
        </button>
        <button className={"ath-tab" + (tab === "nutrition" ? " active" : "")} onClick={() => setTab("nutrition")}>
          Nutrition ({MEAL_PLANS.length})
        </button>
      </div>
      {tab === "training" ? <TrainingPlansList lang={lang}/> : <MealPlansList lang={lang}/>}
    </>
  );
}

function TrainingPlansList({ lang }) {
  return (
    <div className="tpl-grid">
      {TEMPLATES.map(tpl => (
        <div key={tpl.id} className="tpl-card" style={{"--accent": tpl.color}}>
          <div className="tpl-stripe"></div>
          <div className="tpl-head">
            <h3>{tpl.name}</h3>
            <span className="muted">{tpl.exercises.length} ex · ~{tpl.duration}min</span>
          </div>
          <div className="tpl-stats">
            <span>{lang === "fr" ? "Assigné à" : "Assigned to"} {Math.floor(Math.random()*6)+1} {lang === "fr" ? "athlètes" : "athletes"}</span>
          </div>
          <div className="tpl-ex">
            {tpl.exercises.slice(0, 4).map((e, i) => {
              const ex = EXERCISES.find(x => x.id === e.exerciseId);
              return (
                <div key={i} className="tpl-ex-row" style={{display:"flex",alignItems:"center",gap:8}}>
                  <ExerciseThumb exercise={ex} size={20} showPlay={false}/>
                  <span className="tpl-ex-name" style={{flex:1}}>{ex.name}</span>
                  <span className="tpl-ex-sets">{e.sets} × {e.repsRange}</span>
                </div>
              );
            })}
          </div>
          <div style={{display:"flex",gap:8,marginTop:8}}>
            <button className="btn-ghost" style={{flex:1}}><Icon name="edit" size={12}/> Edit</button>
            <button className="tpl-start" style={{flex:1}}><Icon name="user-plus" size={12}/> {lang === "fr" ? "Assigner" : "Assign"}</button>
          </div>
        </div>
      ))}
    </div>
  );
}

function MealPlansList({ lang }) {
  return (
    <div className="tpl-grid">
      {MEAL_PLANS.map(p => (
        <div key={p.id} className="tpl-card" style={{"--accent":"#5B9E3C"}}>
          <div className="tpl-stripe"></div>
          <div className="tpl-head">
            <h3>{p.name}</h3>
            <span className="muted">{p.target.kcal} kcal</span>
          </div>
          <div className="tpl-stats" style={{flexWrap:"wrap"}}>
            <span>P {p.target.protein}g</span><span>·</span>
            <span>C {p.target.carbs}g</span><span>·</span>
            <span>F {p.target.fat}g</span>
          </div>
          <p className="muted" style={{fontSize:12,marginTop:8}}>{p.note}</p>
          <div style={{marginTop:8}}>
            <div className="muted" style={{fontSize:11,textTransform:"uppercase",letterSpacing:".05em",marginBottom:4}}>
              {lang === "fr" ? "Suggestions de repas" : "Meal suggestions"}
            </div>
            {Object.entries(p.suggestions).slice(0,3).map(([k, items]) => (
              <div key={k} style={{display:"flex",fontSize:12,padding:"3px 0",borderBottom:"1px dashed var(--border)"}}>
                <span style={{textTransform:"capitalize",width:80,color:"var(--text-muted)"}}>{k}</span>
                <span>{items[0]}</span>
              </div>
            ))}
          </div>
          <div style={{display:"flex",gap:8,marginTop:12}}>
            <button className="btn-ghost" style={{flex:1}}><Icon name="edit" size={12}/> Edit</button>
            <button className="tpl-start" style={{flex:1}}><Icon name="user-plus" size={12}/> {lang === "fr" ? "Assigner" : "Assign"}</button>
          </div>
        </div>
      ))}
    </div>
  );
}

// ── Coach: Custom exercise builder ───────────────────────────────────────
function CoachLibraryPage({ t, lang }) {
  const [open, setOpen] = useStateC(false);
  return (
    <>
      <div className="page-head">
        <div>
          <h1>{lang === "fr" ? "Mes exercices" : "Custom library"}</h1>
          <p className="page-sub">{CUSTOM_EXERCISES.length} {lang === "fr" ? "exercices créés" : "custom exercises"}</p>
        </div>
        <button className="btn-primary" onClick={() => setOpen(true)}><Icon name="plus" size={14}/> {lang === "fr" ? "Nouvel exercice" : "New exercise"}</button>
      </div>

      <div className="custom-ex-grid">
        {CUSTOM_EXERCISES.map(ex => (
          <div key={ex.id} className="custom-ex-card">
            <div className="custom-ex-thumb">
              <ExerciseThumb exercise={ex} size={56}/>
              {ex.videos > 0 && <span className="custom-ex-badge"><Icon name="play" size={10}/> {ex.videos}</span>}
            </div>
            <div style={{flex:1}}>
              <div className="custom-ex-name">{ex.name}</div>
              <div className="muted" style={{fontSize:12}}>{ex.muscle} · {ex.equipment}</div>
              <div className="custom-ex-meta">
                <span className={"vis-tag vis-" + ex.visibility}>
                  <Icon name={ex.visibility === "private" ? "lock" : ex.visibility === "shared" ? "users" : "globe"} size={10}/>
                  {ex.visibility === "private" ? (lang === "fr" ? "Privé" : "Private") : ex.visibility === "shared" ? (lang === "fr" ? `Partagé (${ex.sharedWith})` : `Shared (${ex.sharedWith})`) : "Public"}
                </span>
                <span className="muted">{ex.photos} photos · {ex.videos} {lang === "fr" ? "vidéo" : "video"}</span>
              </div>
            </div>
            <button className="icon-btn"><Icon name="more" size={16}/></button>
          </div>
        ))}
      </div>

      {open && <CustomExerciseModal lang={lang} onClose={() => setOpen(false)}/>}
    </>
  );
}

function CustomExerciseModal({ lang, onClose }) {
  const [form, setForm] = useStateC({ name: "", muscle: "chest", equipment: "barbell", visibility: "private", cues: "" });
  const upd = (k, v) => setForm(f => ({...f, [k]: v}));
  return (
    <div className="modal-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal-card" style={{maxWidth: 640}}>
        <div className="modal-head">
          <h2>{lang === "fr" ? "Nouvel exercice" : "New exercise"}</h2>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={16}/></button>
        </div>
        <div className="modal-body">
          <div className="form-row">
            <label>{lang === "fr" ? "Nom" : "Name"}</label>
            <input value={form.name} onChange={e => upd("name", e.target.value)} placeholder={lang === "fr" ? "ex. Pompe diamant" : "e.g. Diamond push-up"}/>
          </div>
          <div className="form-row two">
            <div>
              <label>{lang === "fr" ? "Muscle ciblé" : "Target muscle"}</label>
              <select value={form.muscle} onChange={e => upd("muscle", e.target.value)}>
                {(window.MUSCLES || []).map(m => <option key={m.id} value={m.id}>{lang === "fr" ? m.fr : m.en}</option>)}
              </select>
            </div>
            <div>
              <label>{lang === "fr" ? "Équipement" : "Equipment"}</label>
              <select value={form.equipment} onChange={e => upd("equipment", e.target.value)}>
                {["barbell","dumbbell","machine","cable","bodyweight","kettlebell","bands"].map(eq => <option key={eq}>{eq}</option>)}
              </select>
            </div>
          </div>

          <div className="form-row">
            <label>{lang === "fr" ? "Photos" : "Photos"} (1+)</label>
            <div className="upload-grid">
              <button className="upload-slot"><Icon name="image" size={20}/><span>{lang === "fr" ? "Photo principale" : "Main photo"}</span></button>
              <button className="upload-slot"><Icon name="plus" size={16}/><span>{lang === "fr" ? "Ajouter" : "Add"}</span></button>
              <button className="upload-slot"><Icon name="plus" size={16}/><span>{lang === "fr" ? "Ajouter" : "Add"}</span></button>
            </div>
          </div>

          <div className="form-row">
            <label>{lang === "fr" ? "Vidéo de démo" : "Demo video"}</label>
            <button className="upload-video">
              <Icon name="play-circle" size={28}/>
              <div>
                <div style={{fontWeight:600}}>{lang === "fr" ? "Téléverser une vidéo" : "Upload video"}</div>
                <div className="muted" style={{fontSize:11}}>MP4, MOV · max 100 MB</div>
              </div>
            </button>
          </div>

          <div className="form-row">
            <label>{lang === "fr" ? "Visibilité" : "Visibility"}</label>
            <div className="vis-radio">
              {[
                ["private", "lock", lang === "fr" ? "Privé" : "Private", lang === "fr" ? "Visible par moi seulement" : "Only you can see this"],
                ["shared", "users", lang === "fr" ? "Mes athlètes" : "My athletes", lang === "fr" ? "Visible par les athlètes que je coach" : "Visible to your athletes"],
                ["public", "globe", "Public", lang === "fr" ? "Visible par tous les utilisateurs GUS" : "Visible to all GUS users"],
              ].map(([v, ic, lbl, sub]) => (
                <button key={v} className={"vis-opt" + (form.visibility === v ? " active" : "")} onClick={() => upd("visibility", v)}>
                  <Icon name={ic} size={16}/>
                  <div>
                    <div style={{fontWeight:600,fontSize:13}}>{lbl}</div>
                    <div className="muted" style={{fontSize:11}}>{sub}</div>
                  </div>
                </button>
              ))}
            </div>
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn-ghost" onClick={onClose}>{lang === "fr" ? "Annuler" : "Cancel"}</button>
          <button className="btn-primary">{lang === "fr" ? "Créer l'exercice" : "Create exercise"}</button>
        </div>
      </div>
    </div>
  );
}

// ── Coach: Messages ──────────────────────────────────────────────────────
function CoachMessagesPage({ t, lang }) {
  const [activeId, setActiveId] = useStateC(MESSAGES[0]?.id);
  const active = MESSAGES.find(m => m.id === activeId);
  const ath = active && COACH_ATHLETES.find(a => a.id === active.athleteId);
  return (
    <div className="msg-layout">
      <aside className="msg-list">
        <div className="msg-list-head">
          <h2>Messages</h2>
          <button className="icon-btn"><Icon name="edit" size={14}/></button>
        </div>
        {MESSAGES.map(m => {
          const a = COACH_ATHLETES.find(x => x.id === m.athleteId);
          return (
            <button key={m.id} className={"msg-item" + (m.id === activeId ? " active" : "")} onClick={() => setActiveId(m.id)}>
              <Avatar name={a.name} size={36}/>
              <div style={{flex:1,minWidth:0}}>
                <div className="msg-item-name">{a.name}</div>
                <div className="msg-item-snip">{m.snippet}</div>
              </div>
              <div style={{textAlign:"right"}}>
                <div className="msg-item-time">{m.lastAt}</div>
                {m.unread > 0 && <div className="msg-unread">{m.unread}</div>}
              </div>
            </button>
          );
        })}
      </aside>
      <section className="msg-thread">
        {active && ath ? (
          <>
            <div className="msg-thread-head">
              <Avatar name={ath.name} size={36}/>
              <div>
                <div style={{fontWeight:600}}>{ath.name}</div>
                <div className="muted" style={{fontSize:11}}>{ath.goal}</div>
              </div>
            </div>
            <div className="msg-thread-body">
              {active.thread.map((msg, i) => (
                <div key={i} className={"msg-bubble " + (msg.from === "coach" ? "from-coach" : "from-athlete")}>
                  <div className="msg-bubble-text">{msg.text}</div>
                  <div className="msg-bubble-time">{msg.at}</div>
                </div>
              ))}
            </div>
            <div className="msg-compose">
              <input placeholder={lang === "fr" ? "Écrire un message…" : "Write a message…"}/>
              <button className="btn-primary"><Icon name="send" size={14}/></button>
            </div>
          </>
        ) : <div className="empty-state"><Icon name="chat" size={32}/><p>Pick a conversation</p></div>}
      </section>
    </div>
  );
}

// ── Athlete: Log Meal sheet ──────────────────────────────────────────────
function LogMealSheet({ open, onClose, lang, onSaved }) {
  const [tab, setTab] = useStateC("search");
  const [search, setSearch] = useStateC("");
  const [selected, setSelected] = useStateC([]);
  const [results, setResults] = useStateC([]);
  const [portions, setPortions] = useStateC({});
  const [mealType, setMealType] = useStateC("snacks");
  const [busy, setBusy] = useStateC(false);
  const [error, setError] = useStateC("");
  useEffectC(() => {
    if (!open || tab !== "search" || search.trim().length < 2) { setResults([]); return; }
    let live = true;
    const timer = setTimeout(() => {
      setBusy(true); setError("");
      window.GusApi.api(`/nutrition/search?q=${encodeURIComponent(search.trim())}&lang=${lang}`)
        .then(data => {
          if (!live) return;
          setResults((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,
            p:p.nutriments?.["proteins_100g"] || 0,
            c:p.nutriments?.["carbohydrates_100g"] || 0,
            f:p.nutriments?.["fat_100g"] || 0,
            amount:"100g"
          })));
          setPortions({});
        })
        .catch(e => live && setError(e.message || "Erreur"))
        .finally(() => live && setBusy(false));
    }, 350);
    return () => { live = false; clearTimeout(timer); };
  }, [open, tab, search, lang]);
  if (!open) return null;
  const filtered = search.trim().length >= 2 ? results : [];
  const totals = selected.reduce((a, s) => ({
    kcal: a.kcal + s.kcal, p: a.p + s.p, c: a.c + s.c, f: a.f + s.f
  }), { kcal: 0, p: 0, c: 0, f: 0 });
  const addFood = (f) => {
    const grams = Number(portions[f.id] || 100);
    const factor = grams / 100;
    setSelected(s => [...s, {
      ...f,
      kcal:Math.round((f.kcal || 0) * factor),
      p:Number(((f.p || 0) * factor).toFixed(1)),
      c:Number(((f.c || 0) * factor).toFixed(1)),
      f:Number(((f.f || 0) * factor).toFixed(1)),
      amount:`${grams}g`,
      mealType
    }]);
  };
  const updateSelectedPortion = (idx, grams) => {
    setSelected(cur => cur.map((item, i) => {
      if (i !== idx) return item;
      const baseKcal = item.kcal / ((parseFloat(item.amount) || 100) / 100);
      const baseP = item.p / ((parseFloat(item.amount) || 100) / 100);
      const baseC = item.c / ((parseFloat(item.amount) || 100) / 100);
      const baseF = item.f / ((parseFloat(item.amount) || 100) / 100);
      const factor = (Number(grams) || 0) / 100;
      return { ...item, amount:`${Number(grams) || 0}g`, kcal:Math.round(baseKcal * factor), p:Number((baseP * factor).toFixed(1)), c:Number((baseC * factor).toFixed(1)), f:Number((baseF * factor).toFixed(1)) };
    }));
  };
  const updateSelectedMealType = (idx, nextType) => {
    setSelected(cur => cur.map((item, i) => i === idx ? { ...item, mealType:nextType } : item));
  };
  const today = (() => { const d = new Date(); return new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().slice(0,10); })();
  async function saveMeal() {
    if (!selected.length) return;
    setBusy(true); setError("");
    try {
      const log = await window.GusApi.api(`/nutrition/logs/${today}`);
      const meals = { breakfast:[], lunch:[], dinner:[], snacks:[], ...(log.meals || {}) };
      selected.forEach(f => {
        const targetMeal = f.mealType || mealType;
        meals[targetMeal] = [...(meals[targetMeal] || []), {
          name:f.name,
          amount:f.amount || "100g",
          kcal:Math.round(f.kcal || 0),
          protein:Number(f.p || 0),
          carbs:Number(f.c || 0),
          fat:Number(f.f || 0)
        }];
      });
      await window.GusApi.api(`/nutrition/logs/${today}`, { method:"PUT", body:JSON.stringify({ meals }) });
      if (onSaved) await onSaved();
      onClose();
    } catch (e) {
      setError(e.message || "Erreur");
    } finally {
      setBusy(false);
    }
  }
  return (
    <div className="modal-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal-card meal-sheet">
        <div className="modal-head">
          <h2>{lang === "fr" ? "Ajouter un repas" : "Log meal"}</h2>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={16}/></button>
        </div>

        <div className="meal-sheet-tabs">
          {[["search","search",lang === "fr" ? "Recherche" : "Search"],
            ["recent","clock","Recent"]].map(([k, ic, lbl]) => (
            <button key={k} className={"mst" + (tab === k ? " active" : "")} onClick={() => setTab(k)}>
              <Icon name={ic} size={14}/>{lbl}
            </button>
          ))}
        </div>

        <div className="meal-sheet-body">
          {tab === "search" && (
            <>
              <div className="search-wrap" style={{marginBottom:12}}>
                <Icon name="search" size={14} color="var(--text-muted)"/>
                <input placeholder={lang === "fr" ? "Rechercher un aliment…" : "Search a food…"} value={search} onChange={e => setSearch(e.target.value)} autoFocus/>
              </div>
              {busy && <div className="muted" style={{fontSize:12,marginBottom:8}}>{lang === "fr" ? "Recherche USDA..." : "Searching USDA..."}</div>}
              {error && <div className="form-error">{error}</div>}
              <div className="food-list">
                {filtered.map(f => (
                  <div key={f.id} className="food-row">
                    <div style={{flex:1}}>
                      <div className="food-name">{f.name}</div>
                      <div className="muted" style={{fontSize:11}}>P {f.p}g · C {f.c}g · F {f.f}g</div>
                    </div>
                  <div style={{textAlign:"right",marginRight:12}}>
                    <div style={{fontWeight:600}}>{f.kcal}</div>
                    <div className="muted" style={{fontSize:10}}>kcal</div>
                  </div>
                    <div className="food-portion">
                      <input type="number" min="1" step="5" value={portions[f.id] || 100} onChange={e => setPortions(p => ({ ...p, [f.id]:e.target.value }))}/>
                      <span>g</span>
                    </div>
                    <button className="add-btn" onClick={() => addFood(f)}>
                      <Icon name="plus" size={14}/>
                    </button>
                  </div>
                ))}
                {search.trim().length < 2 && <div className="muted" style={{fontSize:12}}>{lang === "fr" ? "Tape au moins 2 lettres pour chercher dans l'API nutrition." : "Type at least 2 letters to search the nutrition API."}</div>}
              </div>
            </>
          )}
          {tab === "barcode" && (
            <div className="barcode-mock">
              <div className="barcode-frame">
                <div className="barcode-corner tl"></div>
                <div className="barcode-corner tr"></div>
                <div className="barcode-corner bl"></div>
                <div className="barcode-corner br"></div>
                <div className="barcode-line"></div>
              </div>
              <p className="muted" style={{textAlign:"center",marginTop:16}}>
                {lang === "fr" ? "Pointe vers un code-barres" : "Point at a barcode"}
              </p>
              <button className="btn-ghost" style={{marginTop:8}}>
                <Icon name="edit" size={12}/> {lang === "fr" ? "Saisir manuellement" : "Enter manually"}
              </button>
            </div>
          )}
          {tab === "recipes" && (
            <div className="recipe-list">
              {RECIPES.map(r => (
                <div key={r.id} className="recipe-row">
                  <div style={{flex:1}}>
                    <div className="food-name">{r.name}</div>
                    <div className="muted" style={{fontSize:11,marginTop:2}}>{r.time} · {r.ingredients.length} {lang === "fr" ? "ingr." : "ingr."}</div>
                    <div style={{fontSize:11,marginTop:4}}>P {r.p}g · C {r.c}g · F {r.f}g</div>
                  </div>
                  <div style={{textAlign:"right",marginRight:12}}>
                    <div style={{fontWeight:600}}>{r.kcal}</div>
                    <div className="muted" style={{fontSize:10}}>kcal</div>
                  </div>
                  <button className="add-btn"><Icon name="plus" size={14}/></button>
                </div>
              ))}
            </div>
          )}
          {tab === "recent" && (
            <div className="food-list">
              {NUTRITION_TODAY.meals.flatMap(m => m.items || []).slice(0, 8).map((f, i) => (
                <div key={i} className="food-row">
                  <div style={{flex:1}}>
                    <div className="food-name">{f.name}</div>
                    <div className="muted" style={{fontSize:11}}>{lang === "fr" ? "Aujourd'hui" : "Today"} · {f.kcal} kcal</div>
                  </div>
                  <button className="add-btn" onClick={() => setSelected(s => [...s, { id:`recent-${i}`, name:f.name, kcal:f.kcal, p:f.protein || 0, c:f.carbs || 0, f:f.fat || 0, amount:f.amount || "100g", mealType }])}><Icon name="plus" size={14}/></button>
                </div>
              ))}
            </div>
          )}
        </div>

        {selected.length > 0 && (
          <div className="meal-sheet-cart">
            <div className="cart-summary">
              <div><strong>{selected.length}</strong> {lang === "fr" ? "items" : "items"}</div>
              <div className="muted" style={{fontSize:12}}>{totals.kcal} kcal · {Math.round(totals.p)}p / {Math.round(totals.c)}c / {Math.round(totals.f)}f</div>
              <div className="selected-foods">
                {selected.map((f, i) => (
                  <label key={i}>
                    <span>{f.name}</span>
                    <input type="number" min="1" step="5" value={parseFloat(f.amount) || 100} onChange={e => updateSelectedPortion(i, e.target.value)}/>
                    <em>g</em>
                    <select value={f.mealType || mealType} onChange={e => updateSelectedMealType(i, e.target.value)}>
                      <option value="breakfast">{lang === "fr" ? "Déjeuner" : "Breakfast"}</option>
                      <option value="lunch">{lang === "fr" ? "Dîner" : "Lunch"}</option>
                      <option value="dinner">{lang === "fr" ? "Souper" : "Dinner"}</option>
                      <option value="snacks">{lang === "fr" ? "Collation" : "Snack"}</option>
                    </select>
                  </label>
                ))}
              </div>
            </div>
            <select value={mealType} onChange={e => setMealType(e.target.value)}>
              <option value="breakfast">{lang === "fr" ? "Déjeuner" : "Breakfast"}</option>
              <option value="lunch">{lang === "fr" ? "Dîner" : "Lunch"}</option>
              <option value="dinner">{lang === "fr" ? "Souper" : "Dinner"}</option>
              <option value="snacks">{lang === "fr" ? "Collation" : "Snack"}</option>
            </select>
            <button className="btn-primary" onClick={saveMeal} disabled={busy}>{lang === "fr" ? "Ajouter au repas" : "Add to meal"}</button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, {
  BodyView, CoachAthletesPage, AthleteDetailPage, CoachPlansPage,
  CoachLibraryPage, CoachMessagesPage, LogMealSheet,
});