// Heart-Rate Zones — Karvonen (HRR) + Maffetone MAF (180-age).

window.TOOL_HANDLERS['heart-rate-zones'] = function HeartRateZonesTool() {
  const S = window.MMSports;
  const [age, setAge] = React.useState(30);
  const [resting, setResting] = React.useState(60);
  const [maxOverride, setMaxOverride] = React.useState('');
  const [maffetoneAdj, setMaffetoneAdj] = React.useState(0); // -10..+5

  const tanakaMax = Math.round(208 - 0.7 * age);
  const fallbackMax = Math.round(220 - age);
  const hrMax = Number(maxOverride) || tanakaMax;
  const hrr = hrMax - resting;

  const zones = [
    { id: 1, name: 'Z1 — Recovery',     min: 0.50, max: 0.60, color: '#22c55e', purpose: 'Active recovery, warm-up' },
    { id: 2, name: 'Z2 — Endurance',    min: 0.60, max: 0.70, color: '#16a34a', purpose: 'Long runs, fat burning' },
    { id: 3, name: 'Z3 — Tempo',        min: 0.70, max: 0.80, color: '#eab308', purpose: 'Aerobic conditioning' },
    { id: 4, name: 'Z4 — Threshold',    min: 0.80, max: 0.90, color: '#f97316', purpose: 'Lactate threshold' },
    { id: 5, name: 'Z5 — VO₂max',       min: 0.90, max: 1.00, color: '#dc2626', purpose: 'Intervals, top-end speed' },
  ].map((z) => ({
    ...z,
    bpmLow: Math.round(resting + hrr * z.min),
    bpmHigh: Math.round(resting + hrr * z.max),
  }));

  const maf = 180 - age + maffetoneAdj;
  const mafBand = [maf - 10, maf];

  return (
    <div className="mini-tool sport-tool">
      <S.SportsToolHeader title="Heart-Rate Zones" sub="Karvonen (HRR) + Maffetone (MAF) training zones." icon="heart" accent="#dc2626" />

      <div className="sport-input-grid">
        <div className="mini-field">
          <label className="mini-label">Age</label>
          <input type="number" min="10" max="100" className="mini-input"
                 value={age} onChange={(e) => setAge(Number(e.target.value) || 0)} />
        </div>
        <div className="mini-field">
          <label className="mini-label">Resting HR (bpm)</label>
          <input type="number" min="30" max="120" className="mini-input"
                 value={resting} onChange={(e) => setResting(Number(e.target.value) || 0)} />
        </div>
        <div className="mini-field">
          <label className="mini-label">Max HR override (optional)</label>
          <input type="number" min="120" max="230" className="mini-input"
                 placeholder={`${tanakaMax} (Tanaka)`}
                 value={maxOverride} onChange={(e) => setMaxOverride(e.target.value)} />
        </div>
      </div>

      <div className="sport-results">
        <S.ResultTile label="Max HR" value={`${hrMax} bpm`} sub={`Tanaka 208−0.7×age · 220−age = ${fallbackMax}`} accent="#dc2626" />
        <S.ResultTile label="Heart Rate Reserve" value={`${hrr} bpm`} sub="Karvonen HRR" />
        <S.ResultTile label="MAF (Maffetone)" value={`${mafBand[0]}–${mafBand[1]}`} sub="aerobic ceiling 180−age" accent="#16a34a" />
      </div>

      <div className="sport-zones">
        {zones.map((z) => (
          <div key={z.id} className="sport-zone-row" style={{ '--z-color': z.color }}>
            <div className="szr-name">{z.name}</div>
            <div className="szr-bar">
              <div className="szr-fill" style={{ left: `${z.min * 100}%`, width: `${(z.max - z.min) * 100}%`, background: z.color }} />
            </div>
            <div className="szr-bpm">{z.bpmLow}–{z.bpmHigh} bpm</div>
            <div className="szr-purpose">{z.purpose}</div>
          </div>
        ))}
      </div>

      <details className="sport-details">
        <summary>Maffetone adjustment (±)</summary>
        <div className="sport-input-grid" style={{ marginTop: 12 }}>
          <div className="mini-field">
            <label className="mini-label">Adjustment</label>
            <select className="mini-input" value={maffetoneAdj} onChange={(e) => setMaffetoneAdj(Number(e.target.value))}>
              <option value="-10">−10 (illness, beginner)</option>
              <option value="-5">−5 (returning, no progress)</option>
              <option value="0">0 (default)</option>
              <option value="5">+5 (2+ years injury-free)</option>
            </select>
          </div>
        </div>
      </details>
    </div>
  );
};