---
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[];
  group?: string;
  group_mode?: string;
};

// ✅ OPCJA A: metadane grupy + CTA
type GroupCta = {
  label?: string;
  href?: string;
  title?: string;
  opis?: string;
};

type GroupMeta = {
  tytul?: string;
  rejestracja?: GroupCta;
};

type TvAddonsDoc = {
  tytul?: string;
  opis?: string;
  cena_opis?: string;
  dodatki?: TvAddon[];
  grupy?: Record<string, GroupMeta>;
};

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 : [];

// ✅ mapa meta grup
const groupMeta: Record<string, GroupMeta> = doc?.grupy ?? {};

// --- dynamic param ---
const tidParam = Astro.params.tid; // np. "49"
const tid = Number(tidParam);

const picked =
  Number.isFinite(tid)
    ? addons.find((a) => Number(a?.tid) === tid)
    : null;

if (!picked) {
  return new Response("Nie znaleziono pakietu dla podanego tid.", { status: 404 });
}

// --- jeśli jest group => bierzemy całą grupę ---
const pickedGroup = String(picked?.group ?? "").trim();

let viewAddons: TvAddon[] = [];
if (pickedGroup) {
  viewAddons = addons.filter((a) => String(a?.group ?? "").trim() === pickedGroup);
} else {
  viewAddons = [picked];
}

// (jak miałeś) sortowanie w grupie — możesz zostawić albo wywalić
viewAddons = viewAddons
  .slice()
  .sort((a, b) => Number(a?.tid ?? 0) - Number(b?.tid ?? 0));

// tytuł/description strony
const singleTitle = pickedGroup
  ? (groupMeta[pickedGroup]?.tytul ?? pickedGroup.toUpperCase() ?? pageTitle)
  : (String(picked?.nazwa ?? "").trim() || pageTitle);

const singleDesc = pageDesc;

// ✅ CTA dla tej grupy (jeśli istnieje)
const footerCta: GroupCta | undefined =
  pickedGroup ? groupMeta[pickedGroup]?.rejestracja : undefined;
---

<DefaultLayout title={singleTitle} description={singleDesc}>
  {/* Opcjonalnie: box jak na stronie ogólnej, tylko jeśli jesteśmy w grupie */}
  <div class={pickedGroup ? "f-addon-group" : ""}>
    {
      viewAddons.map((addon: TvAddon, index: number) => {
        const isAboveFold = index === 0;

        const pkgName = String(addon?.nazwa ?? "").trim();
        const hasYamlImage = !!String(addon?.image ?? "").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>
        );
      })
    }

    {/* ✅ STOPKA GRUPY: tylko na stronach grupowych */}
    {pickedGroup && footerCta?.href && footerCta?.label ? (
      <div class="f-addon-group-footer fuz-markdown max-w-none">
        {footerCta.opis ? <p>{footerCta.opis}</p> : null}

        <a
          class="btn btn-primary"
          href={footerCta.href}
          title={footerCta.title ?? footerCta.label}
          target="_blank"
          rel="noopener noreferrer"
        >
          {footerCta.label}
        </a>
      </div>
    ) : null}
  </div>

</DefaultLayout>