---
import DefaultLayout from "../../layouts/DefaultLayout.astro";
import yaml from "js-yaml";
import fs from "node:fs";
import Markdown from "../../islands/Markdown.jsx";
import AddonChannelsGrid from "../../islands/jambox/AddonChannelsModal.jsx";
import "../../styles/jambox-tematyczne.css";

/** Typy minimalne */
type AddonPriceRow = {
  pakiety?: string[] | any;
  "12m"?: number | string;
  bezterminowo?: number | string;
};

type TvAddon = {
  id?: string;
  nazwa?: string;
  tid?: number;
  typ?: string;
  opis?: string;
  image?: string;
  cena?: AddonPriceRow[];
};

type TvAddonsDoc = {
  tytul?: string;
  opis?: string;
  cena_opis?: string;
  dodatki?: TvAddon[];
};

const doc = yaml.load(
  fs.readFileSync("./src/content/internet-telewizja/tv-addons.yaml", "utf8"),
) as TvAddonsDoc;

const pageTitle = doc?.tytul ?? "Dodatkowe pakiety TV";
const pageDesc = doc?.opis ?? "";
const addons: TvAddon[] = Array.isArray(doc?.dodatki) ? doc.dodatki : [];
---

<DefaultLayout title={pageTitle} description={pageDesc}>
  <section class="f-section">
    <div class="f-section-grid-single">
      <h1 class="f-section-title">{pageTitle}</h1>
      {pageDesc && <Markdown text={pageDesc} />}
    </div>
  </section>

  {
    addons.map((addon: TvAddon, index: number) => {
      const isAboveFold = index === 0;

      const hasYamlImage = !!String(addon?.image ?? "").trim();
      const pkgName = String(addon?.nazwa ?? "").trim();

      const assumeHasMedia = pkgName ? true : hasYamlImage;
      const anchorId = addon?.tid != null ? `tid-${addon.tid}` : undefined;

      return (
        <section class="f-section" id={anchorId}>
          <div
            class={`f-section-grid f-addon-grid f-addon-section ${
              assumeHasMedia ? "md:grid-cols-2" : "md:grid-cols-1"
            }`}
            data-addon-section
            data-has-media={assumeHasMedia ? "1" : "0"}
          >
            <div class="f-addon-text">
              {pkgName && <h2 class="f-section-title">{pkgName}</h2>}
              {addon?.opis && <Markdown text={addon.opis} />}
            </div>

            <div class="f-addon-media">
              {pkgName ? (
                <AddonChannelsGrid
                  client:idle
                  packageName={pkgName}
                  fallbackImage={String(addon?.image ?? "")}
                  aboveFold={isAboveFold}
                  title={pkgName}
                />
              ) : null}
            </div>
          </div>
        </section>
      );
    })
  }

<script is:inline>
  function __scrollToHashWithOffset(behavior = "auto") {
    if (!location.hash) return;

    const id = decodeURIComponent(location.hash.slice(1));
    const el = document.getElementById(id);
    if (!el) return;

    // znajdź navbar (dopasuj selektor do siebie)
    const nav =
      document.querySelector(".f-navbar") ||
      document.querySelector("header") ||
      document.querySelector("[data-navbar]");

    const navH = nav ? nav.getBoundingClientRect().height : 84;
    const extra = 8;

    const top = el.getBoundingClientRect().top + window.pageYOffset - navH - extra;

    window.scrollTo({ top: Math.max(0, top), behavior });
  }

  function __runFix() {
    // po wejściu na stronę z hashem przeglądarka może już coś przewinąć,
    // więc poprawiamy po renderze i po dociągnięciu treści
    __scrollToHashWithOffset("auto");
    requestAnimationFrame(() => __scrollToHashWithOffset("auto"));
    setTimeout(() => __scrollToHashWithOffset("auto"), 120);
    setTimeout(() => __scrollToHashWithOffset("auto"), 600);
  }

  window.addEventListener("load", __runFix);
  window.addEventListener("hashchange", () => __scrollToHashWithOffset("smooth"));
</script>

</DefaultLayout>