/* global React, HyttenCalendar, HyttenVideo, WeatherNow, WeatherForecast, SunMoon, ClimateOutdoor, ClimateIndoor */
const { useState, useEffect } = React;

function AlmanakkLayout({ data, plannedMap, currentYear, currentMonth, setMonth, sun, daysSince, daysUntil }) {
  const todayStr = new Date().toLocaleDateString('nb-NO', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
  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>Telemark · 59,55° N</dt>
            <dd>{todayStr}</dd>
          </div>
        </div>
        <div className="masthead-title">
          <div className="masthead-eyebrow">Almanakk · Vol. I</div>
          <h1 className="masthead-name">Hytten</h1>
          <div className="masthead-sub">Levende oversikt</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">
        {/* LEFT — Calendar + counter */}
        <section className="col col-left">
          <div className="sec-head">
            <h2>Kalender</h2>
            <span className="sec-num">§ 01 · besøk</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">Siden sist besøk</div>
                  <div className="counter-value">{daysSince}</div>
                  <div className="counter-unit">{daysSince === 1 ? 'dag' : 'dager'}</div>
                </div>
              )}
              {daysUntil != null && (
                <div className="counter-cell">
                  <div className="counter-label">Til neste tur</div>
                  <div className="counter-value">{daysUntil.days}</div>
                  <div className="counter-unit">{daysUntil.days === 1 ? 'dag' : 'dager'}</div>
                  <div className="counter-sub">{daysUntil.label}</div>
                </div>
              )}
            </div>
          )}
        </section>

        {/* MIDDLE — Video + Weather */}
        <section className="col col-mid">
          <div className="sec-head">
            <h2>Fra hytten</h2>
            <span className="sec-num">§ 02 · live</span>
          </div>
          <HyttenVideo url={data?.config?.videoEmbedUrl} posterUrl={data?.config?.videoPosterUrl} />

          <div className="sec-head" style={{ marginTop: '8px' }}>
            <h2>Vær</h2>
            <span className="sec-num">§ 03 · yr.no</span>
          </div>
          <WeatherNow outdoor={data?.weatherOutdoor} summary={data?.weatherSummary} />
          <WeatherForecast forecast={data?.weatherForecast} />
        </section>

        {/* RIGHT — Climate + Sun */}
        <section className="col col-right">
          <div className="sec-head">
            <h2>Inneklima</h2>
            <span className="sec-num">§ 04 · sensorer</span>
          </div>
          <ClimateOutdoor outdoor={data?.weatherOutdoor} />
          <ClimateIndoor indoor={data?.climateIndoor} />

          {sun && (
            <>
              <div className="sec-head" style={{ marginTop: '8px' }}>
                <h2>Sol</h2>
                <span className="sec-num">§ 05 · dagslys</span>
              </div>
              <SunMoon sunrise={sun.sunrise} sunset={sun.sunset} daylightMin={sun.daylightMin} />
            </>
          )}

          <div className="ornament">· · ·</div>
        </section>
      </div>

      <footer className="colophon">
        <span>Hytten · Almanakk for daglig bruk</span>
        <span className="colophon-fresh">
          <span className={'fresh-dot ' + freshClass} />
          {lastFetch ? `Sist oppdatert ${new Date(lastFetch).toLocaleString('nb-NO')}` : 'Ingen oppdateringstid'}
        </span>
        <span>MET Norge · UniFi · Home Assistant</span>
      </footer>
    </div>
  );
}

window.AlmanakkLayout = AlmanakkLayout;