// Workout Logger — mobile-first, 4 layout variations.
// Active workout: list of exercises, each with sets {weight, reps, done}.

const { useState: useStateL, useEffect: useEffectL, useRef: useRefL } = React;

// Build an active session from a template
function sessionFromTemplate(tplId, dayIndex = null) {
  const tpl = TEMPLATES.find(t => String(t.id) === String(tplId)) || TEMPLATES[0];
  const rawDays = Array.isArray(tpl?.raw?.days) ? tpl.raw.days : [];
  const selectedDay = dayIndex !== null && rawDays[dayIndex] ? rawDays[dayIndex] : null;
  const templateExercises = selectedDay
    ? (selectedDay.exercises || []).map(ex => ({
      exerciseId:ex.exerciseId,
      sets:ex.sets || ex.targetSets || 3,
      repsRange:String(ex.reps || ex.targetReps || 10),
      restSeconds:Number(ex.restSeconds ?? ex.rest ?? 90)
    }))
    : (Array.isArray(tpl?.exercises) ? tpl.exercises : []);
  return {
    templateId: tpl?.id,
    name: selectedDay?.name ? `${tpl?.name || "Workout"} · ${selectedDay.name}` : (tpl?.name || "Workout"),
    templateDayNumber: selectedDay?.dayNumber || (dayIndex !== null ? dayIndex + 1 : null),
    startedAt: Date.now(),
    exercises: templateExercises.map(te => {
      const ex = EXERCISES.find(e => String(e.id) === String(te.exerciseId));
      const exMeta = ex || { id: te.exerciseId, name: String(te.exerciseId || "Exercise"), muscle: "core", equipment: "bodyweight" };
      const setCount = Number(te.sets) || 3;
      const repTarget = te.repsRange || te.reps || 8;
      const lastWorkout = HISTORY.find(w => (w.exercises || []).find(e => String(e.exerciseId) === String(te.exerciseId)));
      const lastEx = lastWorkout?.exercises.find(e => String(e.exerciseId) === String(te.exerciseId));
      const lastSets = lastEx?.sets.slice(0, setCount) || [];
      const baseRep = parseInt(repTarget) || 8;
      const baseWeight = lastSets[0]?.weight || (exMeta.equipment === "bodyweight" ? 0 : 40);
      return {
        exerciseId: exMeta.id,
        name: exMeta.name,
        muscle: exMeta.muscle,
        targetReps: repTarget,
        restSeconds: Number(te.restSeconds ?? te.rest ?? 90),
        last: lastSets,
        sets: Array.from({ length: setCount }, () => ({
          weight: baseWeight,
          reps: baseRep,
          done: false,
          isPR: false,
        })),
      };
    }),
  };
}

function loggerExerciseFromMeta(exMeta, opts = {}) {
  const setCount = Number(opts.sets || 3);
  const reps = opts.reps || 10;
  const restSeconds = Number(opts.restSeconds ?? 90);
  const lastWorkout = HISTORY.find(w => (w.exercises || []).find(e => String(e.exerciseId) === String(exMeta.id)));
  const lastEx = lastWorkout?.exercises.find(e => String(e.exerciseId) === String(exMeta.id));
  const lastSets = lastEx?.sets.slice(0, setCount) || [];
  const baseWeight = lastSets[0]?.weight || (exMeta.equipment === "bodyweight" ? 0 : 20);
  return {
    exerciseId:exMeta.id,
    name:exMeta.name,
    muscle:exMeta.muscle,
    targetReps:String(reps),
    restSeconds,
    last:lastSets,
    sets:Array.from({ length:setCount }, () => ({
      weight:baseWeight,
      reps:Number(reps) || 10,
      done:false,
      isPR:false
    }))
  };
}

function blankWorkoutSession(name, selectedExercises = []) {
  return {
    templateId:null,
    name:name || "Workout",
    startedAt:Date.now(),
    exercises:selectedExercises.map(item => {
      const ex = EXERCISES.find(e => String(e.id) === String(item.exerciseId || item.id)) || item;
      return loggerExerciseFromMeta(ex, item);
    })
  };
}

// ── Rest Timer (used by all variations) ────────────────────────────────────
function RestTimer({ seconds, onSkip }) {
  const [remaining, setRemaining] = useStateL(seconds);
  useEffectL(() => {
    if (remaining <= 0) return;
    const t = setTimeout(() => setRemaining(r => r - 1), 1000);
    return () => clearTimeout(t);
  }, [remaining]);
  const m = Math.floor(remaining / 60);
  const s = remaining % 60;
  const pct = remaining / seconds;
  if (remaining <= 0) return null;
  return (
    <div className="rest-timer">
      <div className="rt-bar"><div className="rt-bar-fill" style={{width: `${pct*100}%`}}></div></div>
      <div className="rt-row">
        <div className="rt-label">Rest</div>
        <div className="rt-time">{m}:{s.toString().padStart(2, "0")}</div>
        <button className="rt-skip" onClick={onSkip}>Skip</button>
      </div>
    </div>
  );
}

function updateExerciseRest(setSession, exIdx, value) {
  setSession(s => {
    const exercises = [...s.exercises];
    exercises[exIdx] = { ...exercises[exIdx], restSeconds:Number(value) || 0 };
    return { ...s, exercises };
  });
}

function RestSecondsControl({ value, onChange, lang }) {
  return (
    <label className="logger-rest-control">
      <span>{lang === "fr" ? "Pause entre séries" : "Rest between sets"}</span>
      <input type="number" min="0" step="5" value={value ?? 0} onChange={e => onChange(e.target.value)}/>
      <em>s</em>
    </label>
  );
}

// ── Numpad keyboard (variation: quick) ────────────────────────────────────
function Numpad({ onKey, onClose }) {
  const keys = ["1","2","3","4","5","6","7","8","9",".","0","⌫"];
  return (
    <div className="numpad">
      {keys.map(k => (
        <button key={k} className="np-key" onClick={() => onKey(k)}>{k}</button>
      ))}
    </div>
  );
}

// ── VARIATION 1: STACK (compact list, all sets visible) ───────────────────
function LoggerStack({ session, setSession, onFinish, t, lang }) {
  const [restFor, setRestFor] = useStateL(null);

  const updateSet = (exIdx, setIdx, key, val) => {
    setSession(s => {
      const ex = [...s.exercises];
      ex[exIdx] = { ...ex[exIdx], sets: [...ex[exIdx].sets] };
      ex[exIdx].sets[setIdx] = { ...ex[exIdx].sets[setIdx], [key]: val };
      return { ...s, exercises: ex };
    });
  };

  const completeSet = (exIdx, setIdx) => {
    updateSet(exIdx, setIdx, "done", !session.exercises[exIdx].sets[setIdx].done);
    if (!session.exercises[exIdx].sets[setIdx].done) {
      const seconds = Number(session.exercises[exIdx]?.restSeconds ?? 90);
      if (seconds > 0) setRestFor({ exIdx, setIdx, seconds, time: Date.now() });
    }
  };

  const addSet = (exIdx) => {
    setSession(s => {
      const ex = [...s.exercises];
      const last = ex[exIdx].sets[ex[exIdx].sets.length - 1];
      ex[exIdx] = {
        ...ex[exIdx],
        sets: [...ex[exIdx].sets, { weight: last?.weight || 0, reps: last?.reps || 8, done: false }],
      };
      return { ...s, exercises: ex };
    });
  };

  return (
    <div className="logger logger-stack">
      <header className="logger-head">
        <div>
          <div className="lh-name">{session.name}</div>
          <Timer startedAt={session.startedAt}/>
        </div>
        <button className="btn-finish" onClick={onFinish}>{t.finish}</button>
      </header>

      {restFor && <RestTimer seconds={restFor.seconds ?? 90} onSkip={() => setRestFor(null)}/>}

      <div className="logger-body">
        {session.exercises.map((ex, i) => (
          <section key={i} className="ex-block">
            <div className="ex-head">
              <ExerciseThumb exercise={ex} size={36}/>
              <h3>{ex.name}</h3>
              <button className="icon-btn"><Icon name="more" size={16}/></button>
            </div>
            <div className="ex-target">
              {t.target}: {ex.sets.length} × {ex.targetReps} {t.reps}
            </div>
            <RestSecondsControl value={ex.restSeconds} lang={lang} onChange={v => updateExerciseRest(setSession, i, v)}/>
            <table className="set-table">
              <thead>
                <tr>
                  <th>{t.set}</th>
                  <th className="prev-th">{t.last_time}</th>
                  <th>{t.kg}</th>
                  <th>{t.reps_short}</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {ex.sets.map((s, j) => (
                  <tr key={j} className={s.done ? "done" : ""}>
                    <td className="set-n">{j+1}</td>
                    <td className="prev-cell">
                      {ex.last[j] ? `${ex.last[j].weight}×${ex.last[j].reps}` : "—"}
                    </td>
                    <td>
                      <input type="number" inputMode="decimal" value={s.weight}
                             onChange={e => updateSet(i, j, "weight", parseFloat(e.target.value) || 0)}/>
                    </td>
                    <td>
                      <input type="number" inputMode="numeric" value={s.reps}
                             onChange={e => updateSet(i, j, "reps", parseInt(e.target.value) || 0)}/>
                    </td>
                    <td>
                      <button className={"set-check " + (s.done ? "done" : "")}
                              onClick={() => completeSet(i, j)}>
                        <Icon name="check" size={14}/>
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            <button className="add-set" onClick={() => addSet(i)}>
              <Icon name="plus" size={12}/> {lang === "fr" ? "Ajouter une série" : "Add set"}
            </button>
          </section>
        ))}
        <button className="add-ex"><Icon name="plus" size={14}/> {t.add_exercise}</button>
      </div>
    </div>
  );
}

// ── VARIATION 2: FOCUS (one set at a time, big numbers) ───────────────────
function LoggerFocus({ session, setSession, onFinish, t, lang }) {
  const [exIdx, setExIdx] = useStateL(0);
  const [setIdx, setSetIdx] = useStateL(0);
  const [restFor, setRestFor] = useStateL(null);

  const ex = session.exercises[exIdx];
  const set = ex.sets[setIdx];
  const last = ex.last[setIdx];

  const update = (key, val) => {
    setSession(s => {
      const exs = [...s.exercises];
      exs[exIdx] = { ...exs[exIdx], sets: [...exs[exIdx].sets] };
      exs[exIdx].sets[setIdx] = { ...exs[exIdx].sets[setIdx], [key]: val };
      return { ...s, exercises: exs };
    });
  };
  const updateRest = (value) => updateExerciseRest(setSession, exIdx, value);

  const next = () => {
    update("done", true);
    const seconds = Number(ex?.restSeconds ?? 90);
    if (seconds > 0) setRestFor({ seconds, time: Date.now() });
    setTimeout(() => {
      if (setIdx < ex.sets.length - 1) {
        setSetIdx(setIdx + 1);
      } else if (exIdx < session.exercises.length - 1) {
        setExIdx(exIdx + 1);
        setSetIdx(0);
      }
    }, 100);
  };

  const totalSets = session.exercises.reduce((s, e) => s + e.sets.length, 0);
  const doneSets = session.exercises.reduce((s, e) => s + e.sets.filter(x => x.done).length, 0);

  return (
    <div className="logger logger-focus">
      <header className="logger-head">
        <button className="hb" onClick={onFinish}><Icon name="x" size={18}/></button>
        <div className="lh-center">
          <div className="lh-name">{session.name}</div>
          <Timer startedAt={session.startedAt}/>
        </div>
        <div className="lh-progress">{doneSets}/{totalSets}</div>
      </header>

      <div className="focus-progress">
        <div className="fp-bar" style={{width: `${(doneSets/totalSets)*100}%`}}></div>
      </div>

      <div className="focus-body">
        <div style={{display:"flex",alignItems:"center",gap:12,justifyContent:"center"}}>
          <ExerciseThumb exercise={ex} size={48}/>
          <div className="focus-ex-name">{ex.name}</div>
        </div>
        <div className="focus-ex-meta">{lang === "fr" ? "Série" : "Set"} {setIdx+1} / {ex.sets.length}  ·  {t.target} {ex.targetReps} {t.reps}</div>
        <RestSecondsControl value={ex.restSeconds} lang={lang} onChange={updateRest}/>

        {last && (
          <div className="focus-last">
            <span className="muted">{t.last_time}:</span>
            <strong>{last.weight} {t.kg} × {last.reps}</strong>
          </div>
        )}

        <div className="focus-inputs">
          <div className="fi-block">
            <div className="fi-label">{t.weight}</div>
            <div className="fi-stepper">
              <button onClick={() => update("weight", Math.max(0, set.weight - 2.5))}><Icon name="minus" size={20}/></button>
              <input type="number" value={set.weight} onChange={e => update("weight", parseFloat(e.target.value) || 0)}/>
              <button onClick={() => update("weight", set.weight + 2.5)}><Icon name="plus" size={20}/></button>
            </div>
            <div className="fi-unit">{t.kg}</div>
          </div>
          <div className="fi-block">
            <div className="fi-label">{t.reps_short}</div>
            <div className="fi-stepper">
              <button onClick={() => update("reps", Math.max(0, set.reps - 1))}><Icon name="minus" size={20}/></button>
              <input type="number" value={set.reps} onChange={e => update("reps", parseInt(e.target.value) || 0)}/>
              <button onClick={() => update("reps", set.reps + 1)}><Icon name="plus" size={20}/></button>
            </div>
            <div className="fi-unit">{t.reps}</div>
          </div>
        </div>

        {restFor && <RestTimer seconds={restFor.seconds ?? 90} onSkip={() => setRestFor(null)}/>}

        <button className="focus-cta" onClick={next}>
          {set.done ? (lang === "fr" ? "Suivant" : "Next") : (lang === "fr" ? "Valider la série" : "Complete set")}
          <Icon name="check" size={18}/>
        </button>

        <div className="focus-list">
          {ex.sets.map((s, i) => (
            <button key={i} className={"fl-pill" + (s.done ? " done" : "") + (i === setIdx ? " active" : "")}
                    onClick={() => setSetIdx(i)}>
              {i+1}
              {s.done && <span>{s.weight}×{s.reps}</span>}
            </button>
          ))}
        </div>
      </div>

      <nav className="focus-nav">
        <button onClick={() => exIdx > 0 && (setExIdx(exIdx-1), setSetIdx(0))} disabled={exIdx === 0}>
          <Icon name="chevron-left" size={16}/> {lang === "fr" ? "Précédent" : "Prev"}
        </button>
        <div className="fn-list">
          {session.exercises.map((e, i) => (
            <button key={i} className={"fn-dot" + (i === exIdx ? " active" : "") + (e.sets.every(s=>s.done)?" done":"")}
                    onClick={() => { setExIdx(i); setSetIdx(0); }}/>
          ))}
        </div>
        <button onClick={() => exIdx < session.exercises.length-1 && (setExIdx(exIdx+1), setSetIdx(0))}
                disabled={exIdx === session.exercises.length-1}>
          {lang === "fr" ? "Suivant" : "Next"} <Icon name="chevron-right" size={16}/>
        </button>
      </nav>
    </div>
  );
}

// ── VARIATION 3: CARD (one exercise per screen, sets stacked) ─────────────
function LoggerCard({ session, setSession, onFinish, t, lang }) {
  const [exIdx, setExIdx] = useStateL(0);
  const [restFor, setRestFor] = useStateL(null);
  const ex = session.exercises[exIdx];

  const update = (sIdx, key, val) => {
    setSession(s => {
      const exs = [...s.exercises];
      exs[exIdx] = { ...exs[exIdx], sets: [...exs[exIdx].sets] };
      exs[exIdx].sets[sIdx] = { ...exs[exIdx].sets[sIdx], [key]: val };
      return { ...s, exercises: exs };
    });
  };
  const updateRest = (value) => updateExerciseRest(setSession, exIdx, value);

  const toggleDone = (sIdx) => {
    update(sIdx, "done", !ex.sets[sIdx].done);
    if (!ex.sets[sIdx].done) {
      const seconds = Number(ex?.restSeconds ?? 90);
      if (seconds > 0) setRestFor({ seconds, time: Date.now() });
    }
  };

  return (
    <div className="logger logger-card">
      <header className="logger-head">
        <button className="hb" onClick={onFinish}><Icon name="x" size={18}/></button>
        <div className="lh-center">
          <div className="lh-name">{session.name}</div>
          <Timer startedAt={session.startedAt}/>
        </div>
        <div className="lh-progress">{exIdx+1}/{session.exercises.length}</div>
      </header>

      <div className="card-pages">
        <div className="card-ex">
          <div className="card-ex-head">
            <div>
              <h2>{ex.name}</h2>
              <div className="muted">{ex.sets.length} × {ex.targetReps} {t.reps}</div>
            </div>
            <ExerciseThumb exercise={ex} size={64}/>
          </div>
          <RestSecondsControl value={ex.restSeconds} lang={lang} onChange={updateRest}/>

          {restFor && <RestTimer seconds={restFor.seconds ?? 90} onSkip={() => setRestFor(null)}/>}

          <div className="card-sets">
            <div className="cs-head-row">
              <span>{t.set}</span>
              <span>{t.last_time}</span>
              <span>{t.kg}</span>
              <span>{t.reps_short}</span>
              <span></span>
            </div>
            {ex.sets.map((s, i) => (
              <div key={i} className={"card-set-row" + (s.done ? " done" : "")}>
                <div className="csr-n">{i+1}</div>
                <div className="csr-prev">{ex.last[i] ? `${ex.last[i].weight}×${ex.last[i].reps}` : "—"}</div>
                <input type="number" inputMode="decimal" value={s.weight}
                       onChange={e => update(i, "weight", parseFloat(e.target.value) || 0)}/>
                <input type="number" inputMode="numeric" value={s.reps}
                       onChange={e => update(i, "reps", parseInt(e.target.value) || 0)}/>
                <button className={"set-check " + (s.done ? "done" : "")}
                        onClick={() => toggleDone(i)}><Icon name="check" size={14}/></button>
              </div>
            ))}
          </div>

          <button className="add-set" onClick={() => {
            setSession(s => {
              const exs = [...s.exercises];
              const last = exs[exIdx].sets[exs[exIdx].sets.length-1];
              exs[exIdx] = { ...exs[exIdx], sets: [...exs[exIdx].sets, { weight: last?.weight || 0, reps: last?.reps || 8, done: false }]};
              return { ...s, exercises: exs };
            });
          }}>
            <Icon name="plus" size={12}/> {lang === "fr" ? "Ajouter une série" : "Add set"}
          </button>
        </div>
      </div>

      <nav className="card-nav">
        <button onClick={() => exIdx > 0 && setExIdx(exIdx-1)} disabled={exIdx === 0}>
          <Icon name="chevron-left" size={18}/>
        </button>
        <div className="cn-pages">
          {session.exercises.map((e, i) => (
            <button key={i} className={"cn-dot" + (i === exIdx ? " active" : "") + (e.sets.every(s=>s.done)?" done":"")}
                    onClick={() => setExIdx(i)}/>
          ))}
        </div>
        {exIdx < session.exercises.length - 1 ? (
          <button onClick={() => setExIdx(exIdx+1)}><Icon name="chevron-right" size={18}/></button>
        ) : (
          <button className="finish-btn" onClick={onFinish}><Icon name="check" size={18}/></button>
        )}
      </nav>
    </div>
  );
}

// ── VARIATION 4: QUICK (numpad-style fast entry) ──────────────────────────
function LoggerQuick({ session, setSession, onFinish, t, lang }) {
  const [exIdx, setExIdx] = useStateL(0);
  const [setIdx, setSetIdx] = useStateL(0);
  const [field, setField] = useStateL("weight");
  const [restFor, setRestFor] = useStateL(null);
  const ex = session.exercises[exIdx];
  const set = ex.sets[setIdx];
  const last = ex.last[setIdx];

  const update = (key, val) => {
    setSession(s => {
      const exs = [...s.exercises];
      exs[exIdx] = { ...exs[exIdx], sets: [...exs[exIdx].sets] };
      exs[exIdx].sets[setIdx] = { ...exs[exIdx].sets[setIdx], [key]: val };
      return { ...s, exercises: exs };
    });
  };
  const updateRest = (value) => updateExerciseRest(setSession, exIdx, value);

  const onKey = (k) => {
    const cur = String(set[field]);
    if (k === "⌫") {
      update(field, parseFloat(cur.slice(0, -1)) || 0);
    } else if (k === "." && field === "reps") {
      // reps integer only
    } else {
      const next = cur === "0" ? k : cur + k;
      update(field, parseFloat(next) || 0);
    }
  };

  const commit = () => {
    update("done", true);
    const seconds = Number(ex?.restSeconds ?? 90);
    if (seconds > 0) setRestFor({ seconds, time: Date.now() });
    setTimeout(() => {
      if (setIdx < ex.sets.length - 1) {
        setSetIdx(setIdx + 1); setField("weight");
      } else if (exIdx < session.exercises.length - 1) {
        setExIdx(exIdx + 1); setSetIdx(0); setField("weight");
      }
    }, 200);
  };

  const totalSets = session.exercises.reduce((s, e) => s + e.sets.length, 0);
  const doneSets = session.exercises.reduce((s, e) => s + e.sets.filter(x => x.done).length, 0);

  return (
    <div className="logger logger-quick">
      <header className="logger-head">
        <button className="hb" onClick={onFinish}><Icon name="x" size={18}/></button>
        <div className="lh-center">
          <div style={{display:"flex",alignItems:"center",gap:8,justifyContent:"center"}}>
            <ExerciseThumb exercise={ex} size={24} showPlay={false}/>
            <div className="lh-name">{ex.name}</div>
          </div>
          <div className="lh-meta">
            <Timer startedAt={session.startedAt}/> · {doneSets}/{totalSets}
          </div>
        </div>
        <div className="lh-progress">{exIdx+1}/{session.exercises.length}</div>
      </header>

      <div className="quick-progress">
        <div className="qp-bar" style={{width: `${(doneSets/totalSets)*100}%`}}></div>
      </div>

      <div className="quick-body">
        <div className="qb-set-info">
          {lang === "fr" ? "Série" : "Set"} {setIdx+1} {lang === "fr" ? "sur" : "of"} {ex.sets.length}
        </div>
        <RestSecondsControl value={ex.restSeconds} lang={lang} onChange={updateRest}/>
        {last && (
          <div className="qb-last">
            <span className="muted">{t.last_time}</span>
            <strong>{last.weight} × {last.reps}</strong>
          </div>
        )}

        <div className="qb-display">
          <button className={"qb-field" + (field === "weight" ? " active" : "")}
                  onClick={() => setField("weight")}>
            <div className="qbf-label">{t.weight}</div>
            <div className="qbf-val">{set.weight}<span>{t.kg}</span></div>
          </button>
          <div className="qb-x">×</div>
          <button className={"qb-field" + (field === "reps" ? " active" : "")}
                  onClick={() => setField("reps")}>
            <div className="qbf-label">{t.reps_short}</div>
            <div className="qbf-val">{set.reps}</div>
          </button>
        </div>

        {restFor && <RestTimer seconds={restFor.seconds ?? 90} onSkip={() => setRestFor(null)}/>}

        <div className="qb-sets-strip">
          {ex.sets.map((s, i) => (
            <button key={i} className={"qbs-pill" + (s.done ? " done" : "") + (i === setIdx ? " active" : "")}
                    onClick={() => setSetIdx(i)}>
              {s.done ? `${s.weight}×${s.reps}` : `S${i+1}`}
            </button>
          ))}
        </div>
      </div>

      <Numpad onKey={onKey} onClose={() => {}}/>

      <button className="quick-cta" onClick={commit}>
        <Icon name="check" size={20}/> {lang === "fr" ? "Valider" : "Log set"}
      </button>
    </div>
  );
}

// Workout duration timer
function Timer({ startedAt }) {
  const [now, setNow] = useStateL(Date.now());
  useEffectL(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const sec = Math.floor((now - startedAt) / 1000);
  const m = Math.floor(sec / 60);
  const s = sec % 60;
  return <span className="lh-timer">{m}:{s.toString().padStart(2,"0")}</span>;
}

// ── Logger entry point — picks variation ───────────────────────────────────
function WorkoutLogger({ variant, session, setSession, onFinish, t, lang }) {
  if (!session) return null;
  const Comp = { stack: LoggerStack, focus: LoggerFocus, card: LoggerCard, quick: LoggerQuick }[variant] || LoggerStack;
  return <Comp session={session} setSession={setSession} onFinish={onFinish} t={t} lang={lang}/>;
}

Object.assign(window, { WorkoutLogger, sessionFromTemplate, blankWorkoutSession, loggerExerciseFromMeta });