---
export const prerender = false;

import path from "node:path";
import DefaultLayout from "../../layouts/DefaultLayout.astro";
import { loadYamlFile } from "../../lib/loadYaml";
import MozliwosciSearch from "../../islands/jambox/JamboxMozliwosciSearch.jsx";

type YamlSection = {
  title: string;
  image?: string;
  content?: string;
};

type YamlData = {
  sections?: YamlSection[];
};

function slugify(s: string) {
  return String(s || "")
    .toLowerCase()
    .replace(/[\u0105]/g, "a")
    .replace(/[\u0107]/g, "c")
    .replace(/[\u0119]/g, "e")
    .replace(/[\u0142]/g, "l")
    .replace(/[\u0144]/g, "n")
    .replace(/[\u00f3]/g, "o")
    .replace(/[\u015b]/g, "s")
    .replace(/[\u017a\u017c]/g, "z")
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/(^-|-$)/g, "");
}

let items: Array<{
  id: string;
  title: string;
  image?: string;
  content: string;
}> = [];

let err = "";

try {
  const data = loadYamlFile<YamlData>(
    path.join(
      process.cwd(),
      "src",
      "content",
      "internet-telewizja",
      "telewizja-mozliwosci.yaml"
    )
  );

  const sections = Array.isArray(data?.sections) ? data.sections : [];

  items = sections
    .filter((s) => s?.title)
    .map((s) => ({
      id: slugify(s.title),
      title: s.title,
      image: s.image,
      content: (s.content || "").trim(),
    }))
    .filter((x) => x.content);
} catch (e) {
  err = e instanceof Error ? e.message : String(e);
}
---

<DefaultLayout title="Możliwości JAMBOX">
  <!-- NAGŁÓWEK STRONY – zgodny z FUZ -->
  <section class="f-section" id="top">
    <div class="f-section-grid-single">
      <h1 class="f-section-title">Możliwości JAMBOX</h1>

      <div class="fuz-markdown max-w-none">
        <p>Funkcje i udogodnienia dostępne w JAMBOX.</p>
      </div>

      {!err && <MozliwosciSearch client:load items={items} />}
    </div>

    {
      err && (
        <div class="mt-6 max-w-7xl mx-auto text-left rounded-2xl border border-red-300 bg-red-50 p-4">
          <p class="font-bold">Nie udało się wczytać danych</p>
          <p class="opacity-80">{err}</p>
        </div>
      )
    }
  </section>

  {/* UWAGA: render sekcji przeniesiony do wyspy, żeby filtr działał */}
</DefaultLayout>
