// Solkart — main app
const { useEffect, useMemo, useRef, useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "rotationSeconds": 5,
  "showLegend": true,
  "showSpotlight": true,
  "fakeTime": "live",
  "background": "summer"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { FYLKER, KOMMUNER } = window.SOLKART_DATA;
  const { LiveTicker, StatTile, formatKW, formatKWh, LivePulse } = window.SOLKART_UI;

  // ── forecast loading ────────────────────────────────────────
  const [forecastReady, setForecastReady] = useState(false);
  const [forecastError, setForecastError] = useState(null);
  useEffect(() => {
    window.SOLKART_SIM.init().then(() => {
      setForecastReady(true);
      if (window.SOLKART_SIM.error) setForecastError(window.SOLKART_SIM.error);
    });
  }, []);

  // ── live clock ───────────────────────────────────────────────
  const [now, setNow] = useState(() => simulatedNow(tweaks.fakeTime));
  useEffect(() => {
    const id = setInterval(() => setNow(simulatedNow(tweaks.fakeTime)), 1000);
    return () => clearInterval(id);
  }, [tweaks.fakeTime]);

  // ── snapshot ─────────────────────────────────────────────────
  const snapshot = useMemo(
    () => forecastReady ? window.SOLKART_SIM.snapshot(now) : { perFylke: {}, totalKW: 0, isNight: false },
    [now, forecastReady]
  );

  // ── cumulative today (recompute when day changes) ───────────
  const [todayBaseKWh, setTodayBaseKWh] = useState(0);
  useEffect(() => {
    if (!forecastReady) return;
    setTodayBaseKWh(window.SOLKART_SIM.cumulativeTodayKWh(now));
    const id = setInterval(() => {
      setTodayBaseKWh(window.SOLKART_SIM.cumulativeTodayKWh(simulatedNow(tweaks.fakeTime)));
    }, 60000);
    return () => clearInterval(id);
    // eslint-disable-next-line
  }, [forecastReady, tweaks.fakeTime, isoDate(now)]);

  // ── rotating spotlight (all kommuner rotate) ────────────────
  const [spotlightIdx, setSpotlightIdx] = useState(0);
  useEffect(() => {
    if (!tweaks.showSpotlight) return;
    const id = setInterval(() => {
      setSpotlightIdx((i) => {
        let next;
        do { next = Math.floor(Math.random() * KOMMUNER.length); } while (next === i);
        return next;
      });
    }, Math.max(1500, tweaks.rotationSeconds * 1000));
    return () => clearInterval(id);
  }, [tweaks.rotationSeconds, tweaks.showSpotlight, KOMMUNER.length]);

  const spotlight = useMemo(() => {
    if (!tweaks.showSpotlight || !forecastReady) return null;
    const k = KOMMUNER[spotlightIdx];
    // Find parent fylke — match by id (lowercase) or name prefix
    const fylke = FYLKER.find((f) => f.name === k.fylke) || FYLKER[0];
    const fylkeTotalKWp = fylke.capacity * 1000;
    const fylkeKW = snapshot.perFylke[fylke.id] || 0;
    const fIntensity = fylkeTotalKWp > 0 ? fylkeKW / fylkeTotalKWp : 0;
    const kommuneKW = fylkeTotalKWp > 0 ? fylkeKW * (k.kWp / fylkeTotalKWp) : 0;
    return { id: k.name + "-" + spotlightIdx, kommune: k, kW: kommuneKW, intensityPct: fIntensity };
  }, [spotlightIdx, snapshot, tweaks.showSpotlight, forecastReady, FYLKER, KOMMUNER]);

  // ── hover state for fylke tooltip ────────────────────────────
  const [hoveredFylke, setHoveredFylke] = useState(null);
  const hoveredData = hoveredFylke ? FYLKER.find((f) => f.id === hoveredFylke) : null;
  const hoveredKW = hoveredFylke ? (snapshot.perFylke[hoveredFylke] || 0) : 0;

  // ── derived top stats ────────────────────────────────────────
  const totalKW = snapshot.totalKW;
  const totalCapMW = FYLKER.reduce((a, f) => a + f.capacity, 0);
  const utilizationPct = totalCapMW > 0 ? (totalKW / (totalCapMW * 1000)) * 100 : 0;

  const topFylke = FYLKER
    .map((f) => ({ f, kW: snapshot.perFylke[f.id] || 0 }))
    .sort((a, b) => b.kW - a.kW)[0];

  // ── render ───────────────────────────────────────────────────
  return (
    <div className={"solkart-root bg-" + tweaks.background}>
      <Header now={now} />

      {forecastError && (
        <div className="forecast-error-banner">
          {forecastError}
        </div>
      )}

      <main className="solkart-grid">
        {/* LEFT — ticker + intro */}
        <section className="panel-left">
          <div className="hero-block">
            <div className="kicker">
              <LivePulse />
              <span>{forecastReady ? "Live · EnergiSmart solprognose" : "Laster prognosedata…"}</span>
            </div>
            <h1 className="hero-h1">
              Sola jobber<br />
              over <em>hele Norge</em><br />
              akkurat nå.
            </h1>
            <p className="hero-lede">
              Solkart viser estimert solenergi produsert av norske solcelleanlegg.
              Tallene oppdateres hvert sekund basert på EnergiSmarts prognosemodell —
              bygget på 30 år med MET-kvalitetssikrede soldata og maskinlæring.
            </p>
          </div>

          <div className="ticker-card">
            <LiveTicker
              label="Produsert i dag — hele Norge"
              sublabel="kilowattimer (kWh) siden midnatt"
              baseKWh={todayBaseKWh}
              currentRateKW={totalKW}
              size={86}
            />
            <div className="stat-row">
              <StatTile label="Akkurat nå" value={totalKW} unit="kW" accent="oklch(0.55 0.18 35)" />
              <StatTile label="Utnyttelse" value={`${utilizationPct.toFixed(1)} %`} />
              <StatTile
                label="Toppfylke"
                value={topFylke && topFylke.kW > 0 ? topFylke.f.name.split(" ")[0] : "—"}
              />
            </div>
          </div>

          <Promo />
        </section>

        {/* RIGHT — map */}
        <section className="panel-right">
          <div className="map-card">
            <div className="map-header">
              <div>
                <div className="kicker dark"><LivePulse /> Sanntid</div>
                <h2 className="map-title">Solproduksjon i sanntid</h2>
              </div>
              <Legend />
            </div>
            <div className="map-stage">
              <window.NorwayMap
                snapshot={snapshot}
                spotlight={spotlight}
                hoveredFylke={hoveredFylke}
                setHoveredFylke={setHoveredFylke}
              />
              {hoveredData && (
                <div className="hover-tip">
                  <div className="hover-tip__name">{hoveredData.name}</div>
                  <div className="hover-tip__row">
                    <span>Akkurat nå</span>
                    <strong>{formatKW(hoveredKW)}</strong>
                  </div>
                  <div className="hover-tip__row">
                    <span>Installert</span>
                    <strong>{hoveredData.capacity} MWp</strong>
                  </div>
                </div>
              )}
              {snapshot.isNight && (
                <div className="night-banner">
                  Sola er nede over hele Norge — produksjon på pause til daggry.
                </div>
              )}
            </div>
            <Footer now={now} />
          </div>
        </section>
      </main>

      {/* Embed widget demo */}
      <EmbedDemo snapshot={snapshot} now={now} />

      {/* API subscription section */}
      <ApiSection />

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Animasjon">
          <TweakSlider
            label="Rotasjonsintervall (sek)"
            value={tweaks.rotationSeconds}
            min={2} max={15} step={1}
            onChange={(v) => setTweak("rotationSeconds", v)}
          />
          <TweakToggle
            label="Vis kommune-spotlight"
            checked={tweaks.showSpotlight}
            onChange={(v) => setTweak("showSpotlight", v)}
          />
        </TweakSection>
        <TweakSection title="Tid">
          <TweakRadio
            label="Klokke"
            value={tweaks.fakeTime}
            options={[
              { value: "live", label: "Live" },
              { value: "noon", label: "12:00" },
              { value: "evening", label: "18:00" },
            ]}
            onChange={(v) => setTweak("fakeTime", v)}
          />
        </TweakSection>
        <TweakSection title="Bakgrunn">
          <TweakRadio
            label="Tema"
            value={tweaks.background}
            options={[
              { value: "summer", label: "Sommer" },
              { value: "morning", label: "Morgen" },
              { value: "calm", label: "Rolig" },
            ]}
            onChange={(v) => setTweak("background", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
function simulatedNow(mode) {
  const real = new Date();
  if (mode === "noon") {
    const d = new Date(real);
    d.setUTCHours(10, 0, real.getUTCSeconds());
    return d;
  }
  if (mode === "evening") {
    const d = new Date(real);
    d.setUTCHours(16, 0, real.getUTCSeconds());
    return d;
  }
  return real;
}
function isoDate(d) { return d.toISOString().slice(0, 10); }

// ── header / footer / promo / legend ─────────────────────────────
function Header({ now }) {
  const time = now.toLocaleTimeString("nb-NO", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
  const date = now.toLocaleDateString("nb-NO", { weekday: "long", day: "numeric", month: "long" });
  return (
    <header className="solkart-header">
      <div className="brand">
        <SunMark />
        <div>
          <div className="brand__wordmark">SOLKART</div>
          <div className="brand__sub">Sanntidsestimat for norsk solenergi</div>
        </div>
      </div>
      <div className="header-meta">
        <div className="header-meta__date">{date}</div>
        <div className="header-meta__clock">
          <span style={{ fontVariantNumeric: "tabular-nums" }}>{time}</span>
          <span className="muted"> CEST</span>
        </div>
      </div>
    </header>
  );
}

function SunMark() {
  return (
    <svg width="44" height="44" viewBox="0 0 44 44" aria-hidden="true">
      <circle cx="22" cy="22" r="9" fill="oklch(0.78 0.19 75)" />
      {Array.from({ length: 12 }).map((_, i) => {
        const a = (i / 12) * Math.PI * 2;
        const x1 = 22 + Math.cos(a) * 13;
        const y1 = 22 + Math.sin(a) * 13;
        const x2 = 22 + Math.cos(a) * 19;
        const y2 = 22 + Math.sin(a) * 19;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="oklch(0.7 0.18 70)" strokeWidth="2" strokeLinecap="round" />;
      })}
    </svg>
  );
}

function Legend() {
  const stops = [0, 0.25, 0.5, 0.75, 1];
  return (
    <div className="legend">
      <div className="legend__row">
        {stops.map((s, i) => (
          <span key={i} className="legend__swatch" style={{ background: window.SOLKART_HEAT(s) }} />
        ))}
      </div>
      <div className="legend__labels">
        <span>Lav</span>
        <span>Høy utnyttelse</span>
      </div>
    </div>
  );
}

function Promo() {
  return (
    <div className="promo">
      <div className="promo__row">
        <div className="promo__col">
          <div className="promo__tag">For næring &amp; eiendom</div>
          <div className="promo__logo">☼ Solcellespesialisten</div>
          <p>
            Vi prosjekterer og monterer solcelleanlegg for bedrifter, lager,
            næringsbygg og eiendomsselskaper over hele Norge. Hvert anlegg vi
            setter opp legger seg til tellerverket over.
          </p>
          <a className="promo__cta" href="#">Be om en bedriftsvurdering →</a>
        </div>
        <div className="promo__col">
          <div className="promo__tag alt">Batteri + prognose</div>
          <div className="promo__logo alt">⚡ Smartere batteridrift</div>
          <p>
            Vi vet hvor mye sola kommer til å skinne på akkurat ditt tak de
            neste dagene. Det betyr at batteriet ditt lades og selges på
            riktig tidspunkt — og tjener mer penger enn et batteri uten
            værprognose i ryggen.
          </p>
          <a className="promo__cta alt" href="#">Se hvordan batteri + prognose lønner seg →</a>
        </div>
      </div>
    </div>
  );
}

function Footer({ now }) {
  return (
    <div className="map-footer">
      <span>
        Estimert basert på EnergiSmarts solprognosemodell (maskinlæring + MET Nordic værvarsling)
        og rapportert installert effekt per fylke (NVE). Tall er retningsgivende, ikke målte verdier.
      </span>
      <span className="muted">Oppdatert {now.toLocaleTimeString("nb-NO")}</span>
    </div>
  );
}

// ── Embed widget demo ────────────────────────────────────────────
function EmbedDemo({ snapshot, now }) {
  const { FYLKER, KOMMUNER } = window.SOLKART_DATA;
  const { formatKW } = window.SOLKART_UI;

  const [mode, setMode] = React.useState("fylke"); // "fylke" or "kommune"
  const [regionFylke, setRegionFylke] = React.useState("vestland");
  const [regionKommune, setRegionKommune] = React.useState("Bergen");

  // Kommuner grouped by fylke for the dropdown
  const kommunerByFylke = React.useMemo(() => {
    const groups = {};
    for (const f of FYLKER) groups[f.name] = [];
    for (const k of KOMMUNER) {
      if (groups[k.fylke]) groups[k.fylke].push(k);
    }
    // Sort kommuner alphabetically within each fylke
    for (const key of Object.keys(groups)) {
      groups[key].sort((a, b) => a.name.localeCompare(b.name, "nb"));
    }
    return groups;
  }, [FYLKER, KOMMUNER]);

  const isFylke = mode === "fylke";
  const fylke = FYLKER.find((f) => f.id === regionFylke) || FYLKER[0];
  const kommune = KOMMUNER.find((k) => k.name === regionKommune);

  // Compute values for the preview
  const regionName = isFylke ? fylke.name : (kommune ? kommune.name : "—");
  const regionId = isFylke ? fylke.id : regionKommune.toLowerCase().replace(/\s+/g, "-").replace(/[æ]/g,"ae").replace(/[ø]/g,"o").replace(/[å]/g,"a");
  let kW, kWp, regionLabel;
  if (isFylke) {
    kW = snapshot.perFylke[fylke.id] || 0;
    kWp = fylke.capacity * 1000;
    regionLabel = fylke.name;
  } else if (kommune) {
    const pf = FYLKER.find((f) => f.name === kommune.fylke) || FYLKER[0];
    const fylkeKW = snapshot.perFylke[pf.id] || 0;
    const fylkeKWp = pf.capacity * 1000;
    kW = fylkeKWp > 0 ? fylkeKW * (kommune.kWp / fylkeKWp) : 0;
    kWp = kommune.kWp;
    regionLabel = kommune.name + ", " + kommune.fylke;
  } else {
    kW = 0; kWp = 0; regionLabel = "—";
  }
  const utilPct = kWp > 0 ? (kW / kWp) * 100 : 0;

  const embedType = isFylke ? "region" : "kommune";
  const embedCode =
`<iframe src="https://solkart.no/embed?${embedType}=${regionId}"
        width="360" height="220" frameborder="0"
        title="Live solproduksjon i ${regionName}">
</iframe>`;

  const [copied, setCopied] = React.useState(false);
  const copy = () => {
    navigator.clipboard?.writeText(embedCode);
    setCopied(true);
    setTimeout(() => setCopied(false), 1600);
  };

  return (
    <section className="embed-section">
      <div className="embed-section__inner">
        <div className="embed-section__intro">
          <div className="kicker dark">For kommuner og fylker</div>
          <h2 className="embed-section__title">Vis sanntidsproduksjon på deres egne sider</h2>
          <p className="embed-section__lede">
            Ta med live solenergi-tall fra deres kommune eller fylke rett inn i
            kommunens nettsider. Lim inn en linje kode — widgeten oppdaterer seg
            selv automatisk.
          </p>

          <div className="embed-pickers">
            <div className="embed-mode-toggle">
              <button className={isFylke ? "active" : ""} onClick={() => setMode("fylke")}>Fylke</button>
              <button className={!isFylke ? "active" : ""} onClick={() => setMode("kommune")}>Kommune</button>
            </div>

            {isFylke ? (
              <label className="embed-region-picker">
                <span>Velg fylke</span>
                <select value={regionFylke} onChange={(e) => setRegionFylke(e.target.value)}>
                  {FYLKER.map((f) => (
                    <option key={f.id} value={f.id}>{f.name}</option>
                  ))}
                </select>
              </label>
            ) : (
              <label className="embed-region-picker">
                <span>Velg kommune</span>
                <select value={regionKommune} onChange={(e) => setRegionKommune(e.target.value)}>
                  {Object.entries(kommunerByFylke).map(([fylkeName, kommuner]) => (
                    kommuner.length > 0 && (
                      <optgroup key={fylkeName} label={fylkeName}>
                        {kommuner.map((k) => (
                          <option key={k.name} value={k.name}>{k.name}</option>
                        ))}
                      </optgroup>
                    )
                  ))}
                </select>
              </label>
            )}
          </div>

          <div className="embed-code">
            <pre>{embedCode}</pre>
            <button onClick={copy}>{copied ? "Kopiert ✓" : "Kopier"}</button>
          </div>
        </div>

        <div className="embed-preview-stage">
          <div className="embed-preview-frame-label">Forhåndsvisning</div>
          <div className="embed-widget" role="figure" aria-label="Live solproduksjon-widget">
            <div className="embed-widget__head">
              <span className="embed-widget__pulse"></span>
              <span>LIVE · {regionLabel.toUpperCase()}</span>
            </div>
            <div className="embed-widget__title">Solenergi i {regionName}</div>
            <div className="embed-widget__value">
              {formatKW(kW)}
            </div>
            <div className="embed-widget__sub">produseres av solceller akkurat nå</div>
            <div className="embed-widget__bar">
              <div className="embed-widget__bar-fill" style={{
                width: Math.min(100, utilPct) + "%",
                background: window.SOLKART_HEAT(utilPct / 100),
              }} />
            </div>
            <div className="embed-widget__meta">
              <span>{utilPct.toFixed(1)} % utnyttelse</span>
              <span>{kWp >= 1000 ? (kWp / 1000).toFixed(1) + " MWp" : kWp + " kWp"} installert</span>
            </div>
            <div className="embed-widget__explainer">
              Sanntidsestimat for hvor mye strøm solcelleanleggene i {regionName.toLowerCase()} produserer
              akkurat nå. Basert på maskinlæringsmodell og MET-kvalitetssikrede soldata.
            </div>
            <div className="embed-widget__foot">
              Tjenesten er levert av <strong>EnergiSmart Norge AS</strong> — leverandør av solceller og batterianlegg.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── API / Forecast subscription section ─────────────────────────
function ApiSection() {
  return (
    <section className="api-section">
      <div className="api-section__inner">
        <div className="api-section__intro">
          <div className="kicker dark">For utviklere og energiselskaper</div>
          <h2 className="api-section__title">Norges mest presise solprognose — som API</h2>
          <p className="api-section__lede">
            Få tilgang til produksjonsprognoser for ethvert solcelleanlegg i Norge.
            Modellen er utviklet av EnergiSmart Norges ingeniører og bygger på
            30 år med kvalitetssikrede soldata fra Meteorologisk institutt (1991–2020),
            sanntids værvarsling fra MET Nordic-modellen, og avansert maskinlæring
            som forstår lokale forhold over hele Norge.
          </p>
        </div>

        <div className="api-section__why">
          <h3>Hvorfor vår modell leverer bedre</h3>
          <div className="api-features">
            <div className="api-feature">
              <div className="api-feature__icon">☀️</div>
              <div>
                <strong>1 km oppløsning</strong>
                <p>
                  Vi beregner solinnstråling med 1×1 km oppløsning for de første 60 timene
                  og 3×3 km for utvidet prognose — over hele Norge. Du får prognosen for
                  akkurat der anlegget ditt står, ikke et regionalt gjennomsnitt.
                </p>
              </div>
            </div>
            <div className="api-feature">
              <div className="api-feature__icon">🧠</div>
              <div>
                <strong>Maskinlæring med norske data</strong>
                <p>
                  Modellen er trent på millioner av timer med historisk soldata fra hele
                  Norge — kvalitetssikret av Meteorologisk institutt over perioden 1991–2020.
                  Versjon 2 vil inkludere faktiske produksjonsdata fra hundrevis av norske
                  anlegg for enda høyere presisjon.
                </p>
              </div>
            </div>
            <div className="api-feature">
              <div className="api-feature__icon">⚡</div>
              <div>
                <strong>Oppdateres hver time</strong>
                <p>
                  Prognosen oppdateres hver time med ferske værdata.
                  Du får alltid de nyeste modellkjøringene — opp til 60 timer frem i tid
                  med 1 km oppløsning, eller 10 dager med utvidet prognose.
                </p>
              </div>
            </div>
            <div className="api-feature">
              <div className="api-feature__icon">🔧</div>
              <div>
                <strong>Tilpasset ditt anlegg</strong>
                <p>
                  Send inn panelvinkler, orientering og kapasitet — modellen beregner
                  produksjonen for akkurat ditt anlegg med Klucher anisotropisk
                  strålemodell, temperaturkorreksjon og realistiske systemtap.
                </p>
              </div>
            </div>
          </div>
        </div>

        <div className="api-section__plans">
          <h3>Velg abonnement</h3>
          <div className="api-plans">

            <div className="api-plan">
              <div className="api-plan__name">Gratis</div>
              <div className="api-plan__price">0 kr<span>/mnd</span></div>
              <ul className="api-plan__features">
                <li>10 forespørsler per dag</li>
                <li>1 anlegg</li>
                <li>Maks 10 kWp</li>
                <li>Siste prognose (59 timer)</li>
                <li>Redusert oppløsning</li>
              </ul>
              <a className="api-plan__cta" href="https://solcellespesialisten.no/api">Kom i gang</a>
            </div>

            <div className="api-plan featured">
              <div className="api-plan__badge">Mest populær</div>
              <div className="api-plan__name">Basic</div>
              <div className="api-plan__price">Kontakt oss<span></span></div>
              <ul className="api-plan__features">
                <li>1 000 forespørsler per dag</li>
                <li>5 anlegg</li>
                <li>Maks 50 kWp</li>
                <li>Daglig prognose fra midnatt</li>
                <li>10-dagers utvidet prognose</li>
                <li>1 km oppløsning (0–60 t)</li>
              </ul>
              <a className="api-plan__cta featured" href="mailto:carl@energismartnorge.no?subject=Solprognose%20API%20–%20Basic">Kontakt oss</a>
            </div>

            <div className="api-plan">
              <div className="api-plan__name">Pro</div>
              <div className="api-plan__price">Kontakt oss<span></span></div>
              <ul className="api-plan__features">
                <li>10 000 forespørsler per dag</li>
                <li>50 anlegg</li>
                <li>Maks 500 kWp</li>
                <li>Daglig prognose fra midnatt</li>
                <li>10-dagers utvidet prognose</li>
                <li>1 km oppløsning (0–60 t)</li>
              </ul>
              <a className="api-plan__cta" href="mailto:carl@energismartnorge.no?subject=Solprognose%20API%20–%20Pro">Kontakt oss</a>
            </div>

            <div className="api-plan">
              <div className="api-plan__name">Enterprise</div>
              <div className="api-plan__price">Skreddersydd<span></span></div>
              <ul className="api-plan__features">
                <li>Ubegrenset forespørsler</li>
                <li>Ubegrenset anlegg</li>
                <li>Ubegrenset kapasitet</li>
                <li>Alle prognoser inkludert</li>
                <li>Dedikert support</li>
                <li>SLA-avtale</li>
              </ul>
              <a className="api-plan__cta" href="mailto:carl@energismartnorge.no?subject=Solprognose%20API%20–%20Enterprise">Kontakt oss</a>
            </div>

          </div>
        </div>
      </div>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);