// Race Predictor — Riegel formula.
// T2 = T1 × (D2 / D1)^k.  Default k = 1.06 for trained recreational runners.

window.TOOL_HANDLERS['race-predictor'] = function RacePredictorTool() {
  const S = window.MMSports;
  const [unit, setUnit] = React.useState('km');
  const [knownDist, setKnownDist] = React.useState('5');
  const [knownTime, setKnownTime] = React.useState('22:30');
  const [exponent, setExponent] = React.useState(1.06);

  const knownMeters = S.distanceToMeters(knownDist, unit);
  const knownSeconds = S.parseTimeToSeconds(knownTime);

  const predictions = React.useMemo(() => {
    if (!knownMeters || !knownSeconds) return [];
    return S.RACE_DISTANCES.map((race) => {
      const t = S.riegel(knownSeconds, knownMeters, race.m, exponent);
      const pacePerKm = t / (race.m / 1000);
      const pacePerMi = pacePerKm * (1609.344 / 1000);
      return { ...race, time: t, pacePerKm, pacePerMi };
    });
  }, [knownMeters, knownSeconds, exponent]);

  return (
    <div className="mini-tool sport-tool">
      <S.SportsToolHeader title="Race Predictor" sub="Project marathon times from your 5 K — Riegel formula." icon="target" />

      <div className="sport-mode-row">
        <div className="sport-mode-spacer" />
        <S.UnitToggle unit={unit} setUnit={setUnit} />
      </div>

      <div className="sport-input-grid">
        <div className="mini-field">
          <label className="mini-label">Known distance ({unit})</label>
          <input type="number" min="0" step="0.1" className="mini-input"
                 value={knownDist} onChange={(e) => setKnownDist(e.target.value)} />
        </div>
        <div className="mini-field">
          <label className="mini-label">Time for that distance</label>
          <input type="text" className="mini-input" placeholder="hh:mm:ss"
                 value={knownTime} onChange={(e) => setKnownTime(e.target.value)} />
        </div>
        <div className="mini-field">
          <label className="mini-label">Fatigue factor</label>
          <select className="mini-input" value={exponent} onChange={(e) => setExponent(Number(e.target.value))}>
            <option value="1.04">1.04 — elite</option>
            <option value="1.06">1.06 — recreational (default)</option>
            <option value="1.08">1.08 — beginner</option>
          </select>
        </div>
      </div>

      <div className="sport-table-wrap">
        <table className="sport-table">
          <thead>
            <tr>
              <th>Distance</th>
              <th>Predicted time</th>
              <th>Pace / km</th>
              <th>Pace / mi</th>
            </tr>
          </thead>
          <tbody>
            {predictions.length === 0 && (
              <tr><td colSpan="4" className="sport-empty-row">Enter a recent race time to project your other distances.</td></tr>
            )}
            {predictions.map((r) => (
              <tr key={r.id} className={Math.abs(r.m - knownMeters) < 100 ? 'sport-row-current' : ''}>
                <td><strong>{r.label}</strong></td>
                <td>{S.formatHMS(r.time, { alwaysHours: r.m >= 21000 })}</td>
                <td>{S.formatPace(r.pacePerKm)}</td>
                <td>{S.formatPace(r.pacePerMi)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="sport-helper">
        Riegel's formula assumes ideal training and pacing. Real-world marathons are 5–10 % slower than 5 K-projected times for most runners.
      </div>
    </div>
  );
};