---
import DefaultLayout from "../../layouts/DefaultLayout.astro";
import SectionRenderer from "../../components/sections/SectionRenderer.astro";
import InternetCards from "../../islands/Internet/InternetCards.jsx";
import { loadYaml, safeArray } from "../../lib/astro-helpers";
import NoteAccordion from "../../components/ui/NoteAccordion.astro";

type InternetParam = { klucz: string; label: string; value: string | number };
type InternetCena = {
  budynek: number | string;
  umowa: number | string;
  miesiecznie: number;
  aktywacja?: number;
};
type InternetCard = {
  nazwa: string;
  widoczny?: boolean;
  popularny?: boolean;
  parametry?: InternetParam[];
  ceny?: InternetCena[];
};
type InternetCardsYaml = {
  tytul?: string;
  opis?: string;
  uwaga?: string;
  waluta?: string;
  cena_opis?: string;
  cards?: InternetCard[];
};

type PhoneParam = { klucz: string; label: string; value: string | number };
type PhoneCard = {
  nazwa: string;
  widoczny?: boolean;
  popularny?: boolean;
  cena?: { wartosc: number; opis?: string };
  parametry?: PhoneParam[];
};
type PhoneCardsYaml = { cards?: PhoneCard[] };

type Addon = {
  id: string;
  nazwa: string;
  typ?: string;
  ilosc?: boolean;
  min?: number;
  max?: number;
  krok?: number;
  opis?: string;
  cena: number;
};
type AddonsYaml = { cena_opis?: string; dodatki?: Addon[] };

type SwitchOption = { id: string | number; nazwa: string };
type SwitchDef = {
  id: string;
  etykieta?: string;
  title?: string;
  domyslny?: string | number;
  opcje: SwitchOption[];
};
type SwitchesYaml = { switches?: SwitchDef[] };

const seo = loadYaml("./src/content/internet-swiatlowodowy/seo.yaml");
const data = loadYaml<InternetCardsYaml>(
  "./src/content/internet-swiatlowodowy/cards.yaml",
);
const phoneData = loadYaml<PhoneCardsYaml>("./src/content/telefon/cards.yaml");
const addonsData = loadYaml<AddonsYaml>(
  "./src/content/internet-swiatlowodowy/addons.yaml",
);
const switchesData = loadYaml<SwitchesYaml>("./src/content/site/switches.yaml");

const tytul = data?.tytul ?? "";
const opis = data?.opis ?? "Wybierz rodzaj budynku i czas trwania umowy";
const uwaga = data?.uwaga ?? "";
const waluta = data?.waluta ?? "PLN";
const cenaOpis = data?.cena_opis ?? "zł/mies.";

const cards = safeArray<InternetCard>(data?.cards).filter(
  (c) => c?.widoczny === true,
);
const phoneCards = safeArray<PhoneCard>(phoneData?.cards).filter(
  (c) => c?.widoczny === true,
);
const addons = safeArray<Addon>(addonsData?.dodatki);
const switches = safeArray<SwitchDef>(switchesData?.switches);

const addonsCenaOpis = addonsData?.cena_opis ?? cenaOpis;
---

<DefaultLayout seo={seo}>
  <section class="f-section">
    <div class="f-section-grid-single md:grid-cols-1">
      <InternetCards
        client:load
        title={tytul}
        description={opis}
        uwaga={uwaga}
        cards={cards}
        waluta={waluta}
        cenaOpis={cenaOpis}
        phoneCards={phoneCards}
        addons={addons}
        addonsCenaOpis={addonsCenaOpis}
        switches={switches}
      />
      <NoteAccordion text={uwaga} star={true} />
    </div>
  </section>

  <SectionRenderer src="./src/content/internet-swiatlowodowy/section.yaml" />
</DefaultLayout>