/* global React, WeatherIcon */
const { weatherSymbolToNorwegian } = (() => {
  // Tiny inline subset; full table is in yr-symbol-nb.js. Keeping it simple.
  const T = {
    clearsky_day: 'Klarvær', clearsky_night: 'Klarvær om natten',
    fair_day: 'Lettskyet', fair_night: 'Lettskyet om natten',
    partlycloudy_day: 'Delvis skyet', partlycloudy_night: 'Delvis skyet om natten',
    cloudy: 'Skyet', fog: 'Tåke',
    lightrain: 'Lett regn', rain: 'Regn', heavyrain: 'Kraftig regn',
    lightrainshowers_day: 'Lette regnbyger', rainshowers_day: 'Regnbyger',
    snow: 'Snø', lightsnow: 'Lett snø', heavysnow: 'Kraftig snø',
    sleet: 'Sludd',
  };
  return { weatherSymbolToNorwegian: (c) => T[c] || (c ? c.replace(/_/g, ' ') : '—') };
})();

function WeatherNow({ outdoor, summary }) {
  if (!outdoor || !outdoor.configured) {
    return <div className="wx-now"><div style={{ color: 'var(--ink-3)' }}>Vær ikke konfigurert</div></div>;
  }
  return (
    <>
      <div className="wx-now">
        <div className="wx-symbol"><WeatherIcon code={outdoor.symbolCode} size={76} /></div>
        <div>
          <div className="wx-now-temp">
            {outdoor.temperature != null ? Math.round(outdoor.temperature) : '—'}<span className="deg">°</span>
          </div>
          <div className="wx-now-desc">{weatherSymbolToNorwegian(outdoor.symbolCode)}</div>
        </div>
        <div className="wx-now-meta">
          {outdoor.windSpeed != null && (
            <div><strong>{outdoor.windSpeed} m/s</strong>{outdoor.windDirection ? ` ${outdoor.windDirection}` : ''}</div>
          )}
          <div>vind</div>
        </div>
      </div>
      {summary && summary.summary && (
        <p className="wx-summary">{summary.summary}</p>
      )}
    </>
  );
}

const DOW_NB = ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'];

function WeatherForecast({ forecast }) {
  if (!forecast || forecast.length === 0) return null;
  const todayKey = new Date().toISOString().slice(0, 10);
  return (
    <div className="wx-forecast">
      {forecast.slice(0, 7).map((d) => {
        const dt = new Date(d.date + 'T12:00:00');
        const isToday = d.date === todayKey;
        return (
          <div className={'wx-fc-day' + (isToday ? ' is-today' : '')} key={d.date}>
            <div className="wx-fc-dow">{isToday ? 'I dag' : DOW_NB[dt.getDay()]}</div>
            <div className="wx-fc-date">{dt.getDate()}.{dt.getMonth() + 1}</div>
            <div className="wx-fc-symbol"><WeatherIcon code={d.symbolCode} size={36} /></div>
            <div className="wx-fc-temps">
              <span className="wx-fc-hi">{Math.round(d.tempMax)}°</span>
              <span className="wx-fc-lo">{Math.round(d.tempMin)}°</span>
            </div>
            <div className="wx-fc-precip">{d.precip > 0 ? `${d.precip.toFixed(1)} mm` : ''}</div>
          </div>
        );
      })}
    </div>
  );
}

// Sun arc: a half-circle arc with a marker for current sun position.
function SunMoon({ sunrise, sunset, daylightMin }) {
  if (!sunrise || !sunset) {
    return (
      <div className="sun-card">
        <div className="sun-times" style={{ width: '100%', textAlign: 'center', color: 'var(--ink-3)' }}>
          {daylightMin >= 1440 ? 'Midnattsol' : 'Polarnatt'}
        </div>
      </div>
    );
  }
  // Compute sun progress today
  const now = new Date();
  const [srH, srM] = sunrise.split(':').map(Number);
  const [ssH, ssM] = sunset.split(':').map(Number);
  const nowMin = now.getHours() * 60 + now.getMinutes();
  const srMin = srH * 60 + srM;
  const ssMin = ssH * 60 + ssM;
  let t = (nowMin - srMin) / Math.max(1, (ssMin - srMin));
  t = Math.max(0, Math.min(1, t));
  const isUp = nowMin >= srMin && nowMin <= ssMin;
  // Arc: from (10, 80) to (190, 80), top at (100, 10)
  const angle = Math.PI * (1 - t);
  const cx = 100 + Math.cos(angle) * 90;
  const cy = 80 - Math.sin(angle) * 70;

  const hours = Math.floor(daylightMin / 60);
  const mins = daylightMin % 60;

  return (
    <div>
      <div className="sun-card">
        <div className="sun-arc">
          <svg viewBox="0 0 200 90" preserveAspectRatio="none">
            <path d="M 10 80 Q 100 -30 190 80" fill="none" stroke="var(--rule-strong)" strokeWidth="1" strokeDasharray="2 4" />
            <line x1="10" y1="80" x2="190" y2="80" stroke="var(--rule)" strokeWidth="1" />
            <circle cx={cx} cy={cy} r="6" fill={isUp ? 'var(--ember)' : 'var(--ink-faint)'} stroke="var(--paper)" strokeWidth="2" />
            <text x="10" y="88" fontFamily="var(--font-mono)" fontSize="8" fill="var(--ink-3)" textAnchor="start">{sunrise}</text>
            <text x="190" y="88" fontFamily="var(--font-mono)" fontSize="8" fill="var(--ink-3)" textAnchor="end">{sunset}</text>
          </svg>
        </div>
        <div className="sun-times">
          <div className="sun-times-row"><span>Opp</span><strong>{sunrise}</strong></div>
          <div className="sun-times-row"><span>Ned</span><strong>{sunset}</strong></div>
          <div className="sun-times-row"><span>Lys</span><strong>{hours}t {String(mins).padStart(2, '0')}m</strong></div>
        </div>
      </div>
    </div>
  );
}

window.WeatherNow = WeatherNow;
window.WeatherForecast = WeatherForecast;
window.SunMoon = SunMoon;