// Hydration Planner — fluid + sodium based on duration, temperature, weight and sweat rate.
// Sweat rate from weight × intensity × temperature factor (ACSM heuristics).

window.TOOL_HANDLERS['hydration-planner'] = function HydrationPlannerTool() {
  const S = window.MMSports;
  const [durationMin, setDurationMin] = React.useState(120);
  const [tempC, setTempC] = React.useState(20);
  const [weightKg, setWeightKg] = React.useState(70);
  const [intensity, setIntensity] = React.useState('moderate'); // easy | moderate | hard
  const [sweat, setSweat] = React.useState('average');           // low | average | heavy

  const intensityFactor = { easy: 0.7, moderate: 1.0, hard: 1.25 }[intensity];
  const sweatFactor = { low: 0.7, average: 1.0, heavy: 1.4 }[sweat];

  // Base sweat rate ~12 ml / kg / hour at 20 °C, scaled.
  const tempScale = 1 + Math.max(0, tempC - 15) * 0.025;
  const sweatRate = 12 * weightKg * intensityFactor * sweatFactor * tempScale; // ml / hour
  const totalFluid = sweatRate * (durationMin / 60);
  const intakeRate = Math.min(800, sweatRate * 0.7); // body absorbs ~70 % of sweat rate
  const totalIntake = intakeRate * (durationMin / 60);

  // Sodium: 300–700 mg / L based on sweat type.
  const sodiumMgPerL = sweat === 'heavy' ? 700 : sweat === 'low' ? 300 : 500;
  const sodiumMg = (totalIntake / 1000) * sodiumMgPerL;

  const bottles500 = Math.ceil(totalIntake / 500);
  const sips = Math.round(totalIntake / 50);

  return (
    <div className="mini-tool sport-tool">
      <S.SportsToolHeader title="Hydration Planner" sub="Drink-and-electrolyte plan for any long effort." icon="droplet" accent="#0e9488" />

      <div className="sport-input-grid">
        <div className="mini-field">
          <label className="mini-label">Duration (min)</label>
          <input type="number" min="10" max="2000" className="mini-input"
                 value={durationMin} onChange={(e) => setDurationMin(Number(e.target.value) || 0)} />
        </div>
        <div className="mini-field">
          <label className="mini-label">Air temperature (°C)</label>
          <input type="number" min="-20" max="50" className="mini-input"
                 value={tempC} onChange={(e) => setTempC(Number(e.target.value) || 0)} />
        </div>
        <div className="mini-field">
          <label className="mini-label">Body weight (kg)</label>
          <input type="number" min="30" max="200" className="mini-input"
                 value={weightKg} onChange={(e) => setWeightKg(Number(e.target.value) || 0)} />
        </div>
        <div className="mini-field">
          <label className="mini-label">Intensity</label>
          <select className="mini-input" value={intensity} onChange={(e) => setIntensity(e.target.value)}>
            <option value="easy">Easy</option>
            <option value="moderate">Moderate / long run</option>
            <option value="hard">Hard / race</option>
          </select>
        </div>
        <div className="mini-field">
          <label className="mini-label">Sweater type</label>
          <select className="mini-input" value={sweat} onChange={(e) => setSweat(e.target.value)}>
            <option value="low">Light sweater</option>
            <option value="average">Average</option>
            <option value="heavy">Heavy / salty</option>
          </select>
        </div>
      </div>

      <div className="sport-results">
        <S.ResultTile label="Sweat rate" value={`${Math.round(sweatRate)} ml/h`} sub={`× ${(durationMin / 60).toFixed(1)} h = ${(totalFluid / 1000).toFixed(2)} L lost`} />
        <S.ResultTile label="Drink target" value={`${(totalIntake / 1000).toFixed(2)} L`} sub={`≈ ${bottles500} bottles · ${sips} sips`} accent="#0e9488" />
        <S.ResultTile label="Sodium" value={`${Math.round(sodiumMg)} mg`} sub={`${sodiumMgPerL} mg / L · electrolyte tabs`} accent="#f97316" />
      </div>

      <div className="sport-helper">
        Sip every 15–20 minutes — about 200 ml / 7 oz at a time. The gut absorbs roughly 70 % of your sweat rate; the rest is replaced with food and post-run drinks.
      </div>
    </div>
  );
};