/* global React, WeatherData */

// Modely — which forecast model matches the station best right now. Order
// (WeatherData.compareFit): first how many of the five quantities are „v
// souladu“ with the measurement (same tolerances as Soulad s předpovědí,
// shown as „4/5“), then the weighted score (40 % temperature, 15 % each
// humidity, pressure, wind, gusts — WeatherData.scoreModel). Every row says it
// in plain numbers too: how far the model is off in temperature and wind.
// AUTO uses the first one; a click picks a model by hand.
window.ModelsWidget = function ModelsWidget({ scores, current, autoModel, autoPickId, onPick, onToggleAuto, config = {} }) {
  const showBar = config.showBar !== false;
  const showScore = config.showScore !== false;
  const sorted = [...scores].sort(WeatherData.compareFit);
  const wU = window.Units ? window.Units.windLabel() : 'm/s';
  const wC = (v) => (window.Units ? window.Units.wind(v) : v);
  const hasScores = sorted.some(m => m.score);
  return (
    <div className="models-widget">
      <div className="models-head">
        <window.Segmented
          value={autoModel ? 'auto' : 'manual'}
          options={[{ value: 'auto', label: 'Automaticky' }, { value: 'manual', label: 'Ručně' }]}
          onChange={(v) => onToggleAuto(v === 'auto')}
        />
        <span className="models-hint">{hasScores ? 'soulad se stanicí teď' : 'čeká na data stanice'}</span>
      </div>
      <div className="model-list compact">
        {sorted.map((m, i) => {
          const isActive = current === m.id;
          const isAutoPick = autoModel && autoPickId === m.id;
          const d = m.score?.diffs;
          return (
            <button type="button" key={m.id}
                    className={`model-row ${isActive ? 'active' : ''} ${isAutoPick ? 'auto-pick' : ''}`}
                    onClick={() => onPick(m.id)}
                    title={d ? `Odchylka od stanice: teplota ${window.czNum(d.dT, 1)} °C, vlhkost ${d.dH} %, tlak ${d.dP} hPa, vítr ${window.czNum(wC(d.dW), 1)} ${wU}, nárazy ${window.czNum(wC(d.dG), 1)} ${wU}` : 'Bez dat stanice'}>
              <span className="model-rank">{i + 1}</span>
              <span className="model-name">{m.name}{isAutoPick && <em>AUTO</em>}</span>
              {d && <span className="model-diff">±{window.czNum(d.dT, 1)} °C · ±{window.czNum(wC(d.dW), 1)} {wU}</span>}
              <span className={`model-ok ${m.score && m.score.ok === m.score.judged ? 'is-all' : ''}`}
                    title={m.score ? `${m.score.ok} z ${m.score.judged} veličin v souladu se stanicí` : undefined}>
                {m.score ? `${m.score.ok}/${m.score.judged}` : ''}
              </span>
              {showBar && (
                <span className="model-accuracy" aria-hidden="true"><i style={{ width: (m.score?.total || 0) + '%' }}></i></span>
              )}
              {showScore && <span className="model-score">{m.score ? Math.round(m.score.total) : '—'}</span>}
            </button>
          );
        })}
      </div>
    </div>
  );
};