/* global React, WeatherIcon */

function ClimateOutdoor({ outdoor }) {
  if (!outdoor || !outdoor.configured) return null;
  return (
    <div className="climate-outdoor">
      <span>Utendørs · nå</span>
      <span className="climate-outdoor-temp">{outdoor.temperature != null ? Math.round(outdoor.temperature) : '—'}°</span>
    </div>
  );
}

function ClimateIndoor({ indoor }) {
  if (!indoor || !indoor.configured) {
    return <div style={{ color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', fontSize: '0.78rem' }}>
      {indoor && indoor.error ? indoor.error : 'Inne ikke konfigurert'}
    </div>;
  }
  const rooms = indoor.rooms || [];
  if (rooms.length === 0) return null;
  return (
    <div className="climate-list">
      {rooms.map((r) => {
        const t = r.temperature;
        const cold = t != null && t < 12;
        const warm = t != null && t > 22;
        return (
          <div className={'climate-row ' + (cold ? 'cold' : warm ? 'warm' : '')} key={r.label}>
            <span className="climate-row-label">{r.label}</span>
            <span className="climate-row-temp">
              {r.error ? '—' : (t != null ? `${t.toFixed(1)}°` : '—')}
            </span>
            <span className="climate-row-hum">
              {r.humidity != null && !Number.isNaN(r.humidity) ? `${Math.round(r.humidity)}% RH` : ''}
            </span>
          </div>
        );
      })}
    </div>
  );
}

window.ClimateOutdoor = ClimateOutdoor;
window.ClimateIndoor = ClimateIndoor;