// Stride & Cadence — relate height, cadence, stride length, distance and steps.

window.TOOL_HANDLERS['stride-cadence'] = function StrideCadenceTool() {
  const S = window.MMSports;
  const [height, setHeight] = React.useState(175);
  const [heightUnit, setHeightUnit] = React.useState('cm');
  const [sex, setSex] = React.useState('m');
  const [cadence, setCadence] = React.useState(170);   // steps per minute
  const [pace, setPace] = React.useState('5:30');       // mm:ss / km
  const [weeklyMin, setWeeklyMin] = React.useState(180);

  // Convert height to metres.
  const heightM = heightUnit === 'in' ? height * 0.0254 : height / 100;
  // Estimated stride length from height (Brian Tracy / generic anthropometric ratio).
  const factor = sex === 'f' ? 0.413 : 0.415;
  const estStride = heightM * factor;

  // Distance per step from cadence × pace.
  const paceSec = S.parseTimeToSeconds(pace); // seconds per km
  const speedMps = paceSec ? 1000 / paceSec : 0;       // m/s
  const stepsPerSec = cadence / 60;
  const measuredStride = stepsPerSec ? speedMps / stepsPerSec : 0;

  const stepsPerKm = measuredStride ? 1000 / measuredStride : 0;
  const weeklySteps = stepsPerKm * (speedMps * weeklyMin * 60 / 1000);
  const weeklyKm = (speedMps * weeklyMin * 60) / 1000;

  return (
    <div className="mini-tool sport-tool">
      <S.SportsToolHeader title="Stride & Cadence" sub="Stride length, cadence, weekly mileage." icon="ruler" accent="#2563eb" />

      <div className="sport-input-grid">
        <div className="mini-field">
          <label className="mini-label">Height</label>
          <div style={{ display: 'flex', gap: 8 }}>
            <input type="number" min="100" max="250" className="mini-input"
                   value={height} onChange={(e) => setHeight(Number(e.target.value) || 0)} />
            <select className="mini-input" style={{ width: 90 }}
                    value={heightUnit} onChange={(e) => setHeightUnit(e.target.value)}>
              <option value="cm">cm</option>
              <option value="in">in</option>
            </select>
          </div>
        </div>
        <div className="mini-field">
          <label className="mini-label">Sex</label>
          <select className="mini-input" value={sex} onChange={(e) => setSex(e.target.value)}>
            <option value="m">Male</option>
            <option value="f">Female</option>
          </select>
        </div>
        <div className="mini-field">
          <label className="mini-label">Cadence (spm)</label>
          <input type="number" min="120" max="220" className="mini-input"
                 value={cadence} onChange={(e) => setCadence(Number(e.target.value) || 0)} />
        </div>
        <div className="mini-field">
          <label className="mini-label">Easy pace (mm:ss / km)</label>
          <input type="text" className="mini-input"
                 value={pace} onChange={(e) => setPace(e.target.value)} placeholder="5:30" />
        </div>
        <div className="mini-field">
          <label className="mini-label">Weekly running minutes</label>
          <input type="number" min="10" max="2000" className="mini-input"
                 value={weeklyMin} onChange={(e) => setWeeklyMin(Number(e.target.value) || 0)} />
        </div>
      </div>

      <div className="sport-results">
        <S.ResultTile label="Stride from height"   value={`${estStride.toFixed(2)} m`} sub={`height × ${factor}`} />
        <S.ResultTile label="Stride from pace"     value={`${measuredStride.toFixed(2)} m`} sub={`${stepsPerSec.toFixed(2)} steps/s`} accent="#2563eb" />
        <S.ResultTile label="Steps per km"          value={Math.round(stepsPerKm).toLocaleString()} />
        <S.ResultTile label="Weekly distance"      value={`${weeklyKm.toFixed(1)} km`} sub={`${(weeklyKm * 0.621371).toFixed(1)} mi · ${Math.round(weeklySteps).toLocaleString()} steps`} />
      </div>

      <div className="sport-helper">
        Most efficient runners land 170–180 steps per minute. A higher cadence with a shorter stride reduces vertical bounce and joint impact.
      </div>
    </div>
  );
};