// Pace Calculator — convert between pace, time and distance.
// Three modes: solve for Pace, Time, or Distance. Switches km ↔ mi.

window.TOOL_HANDLERS['pace-calculator'] = function PaceCalculatorTool() {
  const S = window.MMSports;
  // If the dashboard navigated here via window.MMSavesPreload, use those values
  // as the initial state (one-shot consume so a fresh open is clean).
  const preload = window.MMSavesPreload?.['pace-calculator'];
  if (preload) delete window.MMSavesPreload['pace-calculator'];

  const [mode, setMode] = React.useState(preload?.mode || 'pace');
  const [unit, setUnit] = React.useState(preload?.unit || 'km');
  const [distance, setDistance] = React.useState(preload?.distance ?? '5');
  const [time, setTime] = React.useState(preload?.time ?? '25:00');
  const [pace, setPace] = React.useState(preload?.pace ?? '5:00');
  const [saveLabel, setSaveLabel] = React.useState('');
  const [savedToast, setSavedToast] = React.useState('');
  const saves = window.MMSaves?.useSaves('pace-calculator') || [];

  const result = React.useMemo(() => {
    const d = Number(distance);
    const tSec = S.parseTimeToSeconds(time);
    const pSec = S.parseTimeToSeconds(pace);
    if (mode === 'pace') {
      if (!d || !Number.isFinite(tSec)) return null;
      return { kind: 'pace', value: tSec / d, speed: d / (tSec / 3600) };
    }
    if (mode === 'time') {
      if (!d || !Number.isFinite(pSec)) return null;
      return { kind: 'time', value: d * pSec };
    }
    if (mode === 'distance') {
      if (!Number.isFinite(tSec) || !Number.isFinite(pSec) || pSec === 0) return null;
      return { kind: 'distance', value: tSec / pSec };
    }
    return null;
  }, [mode, unit, distance, time, pace]);

  const otherUnit = unit === 'km' ? 'mi' : 'km';
  const convertedPace = result?.kind === 'pace'
    ? (unit === 'km' ? S.paceKmToMile(result.value) : S.paceMileToKm(result.value))
    : null;

  return (
    <div className="mini-tool sport-tool">
      <S.SportsToolHeader title="Pace Calculator" sub="Solve for pace, time or distance — works in km or miles." icon="stopwatch" />

      <div className="sport-mode-row">
        {[
          { id: 'pace',     label: 'Find Pace' },
          { id: 'time',     label: 'Find Time' },
          { id: 'distance', label: 'Find Distance' },
        ].map((m) => (
          <button key={m.id} type="button"
                  className={`sport-mode-btn ${mode === m.id ? 'active' : ''}`}
                  onClick={() => setMode(m.id)}>
            {m.label}
          </button>
        ))}
        <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">Distance ({unit})</label>
          <input type="number" min="0" step="0.01" className="mini-input"
                 disabled={mode === 'distance'}
                 value={distance} onChange={(e) => setDistance(e.target.value)} />
        </div>
        <div className="mini-field">
          <label className="mini-label">Time (hh:mm:ss)</label>
          <input type="text" className="mini-input"
                 disabled={mode === 'time'}
                 value={time} onChange={(e) => setTime(e.target.value)} placeholder="0:25:00" />
        </div>
        <div className="mini-field">
          <label className="mini-label">Pace (mm:ss / {unit})</label>
          <input type="text" className="mini-input"
                 disabled={mode === 'pace'}
                 value={pace} onChange={(e) => setPace(e.target.value)} placeholder="5:00" />
        </div>
      </div>

      <div className="sport-results">
        {result?.kind === 'pace' && (
          <>
            <S.ResultTile label={`Pace per ${unit}`} value={S.formatPace(result.value)} sub={`mm:ss / ${unit}`} accent="#16a34a" />
            <S.ResultTile label={`Pace per ${otherUnit}`} value={S.formatPace(convertedPace)} sub={`mm:ss / ${otherUnit}`} />
            <S.ResultTile label="Speed" value={`${result.speed.toFixed(2)} ${unit}/h`} />
          </>
        )}
        {result?.kind === 'time' && (
          <>
            <S.ResultTile label="Total time" value={S.formatHMS(result.value, { alwaysHours: true })} sub="hh:mm:ss" accent="#16a34a" />
            <S.ResultTile label="Average speed" value={`${(distance / (result.value / 3600)).toFixed(2)} ${unit}/h`} />
          </>
        )}
        {result?.kind === 'distance' && (
          <S.ResultTile label="Distance" value={`${result.value.toFixed(2)} ${unit}`} sub={`= ${(unit === 'km' ? result.value * 1000 : result.value * 1609.344).toFixed(0)} m`} accent="#16a34a" />
        )}
        {!result && <div className="sport-empty">Enter the values above to see the result.</div>}
      </div>

      <div className="sport-helper">
        Tip: pace is how long it takes to cover one unit of distance. Type
        <code> 4:30 </code>for "4 minutes 30 seconds per km" or
        <code> 0:42:00 </code>for total race time.
      </div>

      {/* ---- Save & history ---- */}
      <div className="sport-save-bar">
        <input type="text" className="mini-input"
               placeholder="Optional label — e.g. 'Sub-50 10K plan'"
               value={saveLabel}
               maxLength={80}
               onChange={(e) => setSaveLabel(e.target.value)} />
        <button type="button" className="btn btn-primary"
                disabled={!result}
                onClick={() => {
                  if (!result) return;
                  const summary = result.kind === 'pace'
                    ? `${distance} ${unit} · ${time} · ${S.formatPace(result.value)}/${unit}`
                    : result.kind === 'time'
                    ? `${distance} ${unit} · ${pace}/${unit} · ${S.formatHMS(result.value, { alwaysHours: true })}`
                    : `${pace}/${unit} for ${time} → ${result.value.toFixed(2)} ${unit}`;
                  window.MMSaves.add('pace-calculator', {
                    mode, unit, distance, time, pace, summary,
                  }, saveLabel.trim() || summary);
                  setSaveLabel('');
                  setSavedToast('Saved · view in dashboard');
                  setTimeout(() => setSavedToast(''), 2400);
                }}>
          <window.Icon name="check" size={14} /> Save calculation
        </button>
      </div>
      {savedToast && (
        <div className="sport-save-toast">
          <window.Icon name="check" size={14} strokeWidth={2.5} />
          <span>{savedToast}</span>
          <button type="button" className="dash-linkbtn" onClick={() => window.mmNavigate?.('dashboard')}>
            Open dashboard →
          </button>
        </div>
      )}

      {saves.length > 0 && (
        <details className="sport-save-history" open>
          <summary>
            <span>{saves.length} saved calculation{saves.length === 1 ? '' : 's'}</span>
            <span className="cmp-meta">stored on this device · syncs when signed in</span>
          </summary>
          <div className="sport-save-list">
            {saves.slice(0, 6).map((s) => (
              <div key={s.id} className="sport-save-row">
                <div className="ssr-row-main">
                  <div className="ssr-row-label">{s.label || 'Untitled'}</div>
                  <div className="ssr-row-summary">{s.data?.summary || ''}</div>
                </div>
                <div className="ssr-row-time">{new Date(s.ts).toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' })}</div>
                <button className="icon-btn" title="Load these values"
                        onClick={() => {
                          setMode(s.data.mode); setUnit(s.data.unit);
                          setDistance(s.data.distance); setTime(s.data.time); setPace(s.data.pace);
                        }}>
                  <window.Icon name="upload" size={14} style={{ transform: 'rotate(180deg)' }} />
                </button>
                <button className="icon-btn" title="Delete this save"
                        onClick={() => window.MMSaves.remove('pace-calculator', s.id)}>
                  <window.Icon name="x" size={14} />
                </button>
              </div>
            ))}
            {saves.length > 6 && (
              <button className="dash-linkbtn" onClick={() => window.mmNavigate?.('dashboard')}>
                + {saves.length - 6} more — open dashboard
              </button>
            )}
          </div>
        </details>
      )}
    </div>
  );
};