/* global React, HyttenCalendar, HyttenVideo, WeatherNow, WeatherForecast, SunMoon, ClimateOutdoor, ClimateIndoor */

// "Felt" — alternate direction. Same data, flatter / more dashboard-y,
// dot-grid bg, single sans, less ornamentation. Reuses same components;
// CSS scopes via body[data-direction="felt"].
function FeltLayout(props) {
  const { data, plannedMap, currentYear, currentMonth, setMonth, sun, daysSince, daysUntil } = props;
  const todayStr = new Date().toLocaleDateString('nb-NO', { weekday: 'long', day: 'numeric', month: 'long' });
  const lastFetch = data?.occupancy?.lastFetch;
  const ageMs = lastFetch ? Date.now() - new Date(lastFetch).getTime() : null;
  const freshClass = ageMs == null ? '' : ageMs < 24 * 3600e3 ? '' : ageMs < 7 * 86400e3 ? 'stale' : 'very-stale';

  return (
    <div className="shell">
      <div className="topo-bg" aria-hidden="true" />

      <header className="masthead">
        <div className="masthead-left">
          <div className="masthead-meta">
            <dt>Felt-rapport</dt>
            <dd>{todayStr}</dd>
          </div>
        </div>
        <div className="masthead-title">
          <div className="masthead-eyebrow">Hytten — Telemark</div>
          <h1 className="masthead-name">Felt</h1>
          <div className="masthead-sub">Status &amp; observasjoner</div>
        </div>
        <div className="masthead-right">
          <div className="masthead-meta">
            <dt>Utgave</dt>
            <dd>{new Date().toISOString().slice(0, 10)}</dd>
          </div>
        </div>
      </header>

      <div className="almanakk-grid">
        <section className="col col-left">
          <div className="sec-head"><h2>Kalender</h2><span className="sec-num">01</span></div>
          <HyttenCalendar data={data} plannedMap={plannedMap} currentYear={currentYear} currentMonth={currentMonth} setMonth={setMonth} />

          {(daysSince != null || daysUntil != null) && (
            <div className="counter">
              {daysSince != null && (
                <div className="counter-cell">
                  <div className="counter-label">Dager siden besøk</div>
                  <div className="counter-value">{daysSince}</div>
                </div>
              )}
              {daysUntil != null && (
                <div className="counter-cell">
                  <div className="counter-label">Til {daysUntil.label}</div>
                  <div className="counter-value">{daysUntil.days}</div>
                  <div className="counter-unit">dager</div>
                </div>
              )}
            </div>
          )}
        </section>

        <section className="col col-mid">
          <div className="sec-head"><h2>Live</h2><span className="sec-num">02</span></div>
          <HyttenVideo url={data?.config?.videoEmbedUrl} posterUrl={data?.config?.videoPosterUrl} />
          <div className="sec-head" style={{ marginTop: 8 }}><h2>Vær</h2><span className="sec-num">03</span></div>
          <WeatherNow outdoor={data?.weatherOutdoor} summary={data?.weatherSummary} />
          <WeatherForecast forecast={data?.weatherForecast} />
        </section>

        <section className="col col-right">
          <div className="sec-head"><h2>Inneklima</h2><span className="sec-num">04</span></div>
          <ClimateOutdoor outdoor={data?.weatherOutdoor} />
          <ClimateIndoor indoor={data?.climateIndoor} />
          {sun && (
            <>
              <div className="sec-head" style={{ marginTop: 8 }}><h2>Sol</h2><span className="sec-num">05</span></div>
              <SunMoon sunrise={sun.sunrise} sunset={sun.sunset} daylightMin={sun.daylightMin} />
            </>
          )}
        </section>
      </div>

      <footer className="colophon">
        <span>Hytten · Felt</span>
        <span className="colophon-fresh">
          <span className={'fresh-dot ' + freshClass} />
          {lastFetch ? `Oppdatert ${new Date(lastFetch).toLocaleString('nb-NO')}` : 'Ingen oppdateringstid'}
        </span>
        <span>MET · UniFi · HA</span>
      </footer>
    </div>
  );
}

window.FeltLayout = FeltLayout;