import { useEffect, useMemo, useState } from "preact/hooks";
import useDraggableFloating from "../hooks/useDraggableFloating.js";

import "../../styles/modal.css";
import "../../styles/addons.css";

function formatFeatureValue(val) {
  if (val === true || val === "true") return "✓";
  if (val === false || val === "false" || val == null) return "✕";
  return val;
}

function money(amount) {
  const n = Number(amount || 0);
  return n.toFixed(2).replace(".", ",");
}

/** telefon z YAML (phone/cards.yaml -> cards[]) => { id, name, price_monthly, features[] } */
function mapPhoneYamlToPlans(phoneCards) {
  const list = Array.isArray(phoneCards) ? phoneCards : [];
  return list
    .filter((c) => c?.widoczny !== false)
    .map((c, idx) => ({
      id: String(c?.id ?? c?.nazwa ?? idx),
      name: c?.nazwa ?? "—",
      price_monthly: Number(c?.cena?.wartosc ?? 0),
      features: (Array.isArray(c?.parametry) ? c.parametry : []).map((p) => ({
        label: p.label,
        value: p.value,
      })),
    }));
}

/** dekodery z YAML */
function normalizeDecoders(list) {
  const arr = Array.isArray(list) ? list : [];
  return arr
    .filter((d) => d?.id && d?.nazwa)
    .map((d) => ({
      id: String(d.id),
      nazwa: String(d.nazwa),
      opis: d.opis ? String(d.opis) : "",
      cena: Number(d.cena ?? 0),
    }));
}

/** dodatki z YAML (tv-addons.yaml / addons.yaml) */
function normalizeAddons(addons) {
  const list = Array.isArray(addons) ? addons : [];
  return list
    .filter((a) => a?.id && a?.nazwa)
    .map((a) => ({
      id: String(a.id),
      nazwa: String(a.nazwa),
      typ: String(a.typ ?? a.type ?? "checkbox"),
      ilosc: !!a.ilosc,
      min: a.min != null ? Number(a.min) : 0,
      max: a.max != null ? Number(a.max) : 10,
      krok: a.krok != null ? Number(a.krok) : 1,
      opis: a.opis ? String(a.opis) : "",
      cena: a.cena ?? 0,
      tid: String(a.tid),
    }));
}

function normKey(s) {
  return String(s || "").trim().toLowerCase().replace(/\s+/g, " ");
}

/** TV: wybór wariantu ceny po pkg.name, albo fallback "*" */
function pickTvVariant(addon, pkgName) {
  const c = addon?.cena;
  if (!Array.isArray(c)) return null;

  const wanted = normKey(pkgName);

  for (const row of c) {
    const pk = row?.pakiety;
    if (!Array.isArray(pk)) continue;
    if (pk.some((p) => normKey(p) === wanted)) return row;
  }

  for (const row of c) {
    const pk = row?.pakiety;
    if (!Array.isArray(pk)) continue;
    if (pk.some((p) => String(p).trim() === "*")) return row;
  }

  return null;
}

function isTvAddonAvailableForPkg(addon, pkg) {
  if (!pkg) return false;
  const v = pickTvVariant(addon, String(pkg?.name ?? ""));
  return !!v;
}

function hasTvTermPricing(addon, pkg) {
  const c = addon?.cena;
  if (!Array.isArray(c)) return false;

  const v = pickTvVariant(addon, String(pkg?.name ?? ""));
  if (!v || typeof v !== "object") return false;

  return v["12m"] != null && v.bezterminowo != null;
}

/**
 * ✅ cena jednostkowa:
 * - addons.yaml: number / string / legacy {default, by_name}
 * - tv-addons.yaml: tablica wariantów
 */
function getAddonUnitPrice(addon, pkg, term /* "12m"|"bezterminowo"|null */) {
  const c = addon?.cena;

  if (typeof c === "number") return c;
  if (typeof c === "string" && c.trim() !== "" && !Number.isNaN(Number(c))) return Number(c);

  if (Array.isArray(c)) {
    const v = pickTvVariant(addon, String(pkg?.name ?? ""));
    if (!v) return 0;

    const t = term || "12m";
    if (v[t] != null) return Number(v[t]) || 0;

    if (v.bezterminowo != null) return Number(v.bezterminowo) || 0;
    if (v["12m"] != null) return Number(v["12m"]) || 0;
    return 0;
  }

  if (c && typeof c === "object") {
    const name = String(pkg?.name ?? "");
    const wanted = normKey(name);

    const byName = c.by_name || c.byName || c.by_nazwa || c.byNazwa;
    if (byName && typeof byName === "object" && name) {
      for (const k of Object.keys(byName)) {
        if (normKey(k) === wanted) return Number(byName[k]) || 0;
      }
    }

    if (c.default != null) return Number(c.default) || 0;
  }

  return 0;
}

/** ✅ Sekcja-akordeon (jak w internet modal) */
function SectionAccordion({ title, right, open, onToggle, children }) {
  return (
    <div class={`f-accordion-item f-section-acc ${open ? "is-open" : ""}`}>
      <button type="button" class="f-accordion-header" onClick={onToggle}>
        <span class="f-accordion-header-left">
          <span class="f-modal-phone-name">{title}</span>
        </span>
        <span class="f-accordion-header-right">
          {right}
          <span class="f-acc-chevron" aria-hidden="true">
            {open ? "▲" : "▼"}
          </span>
        </span>
      </button>

      {open && <div class="f-accordion-body">{children}</div>}
    </div>
  );
}

export default function JamboxAddonsModal({
  isOpen,
  onClose,
  pkg,

  phoneCards = [],
  tvAddons = [],
  addons = [],
  decoders = [],

  cenaOpis = "zł/mies.",
}) {
  const phonePlans = useMemo(() => mapPhoneYamlToPlans(phoneCards), [phoneCards]);

  const tvAddonsList = useMemo(() => normalizeAddons(tvAddons), [tvAddons]);
  const addonsList = useMemo(() => normalizeAddons(addons), [addons]);

  const decodersList = useMemo(() => normalizeDecoders(decoders), [decoders]);
  const floating = useDraggableFloating("fuz_floating_total_pos_tv_v1");

  const tvAddonsVisible = useMemo(() => {
    if (!pkg) return [];
    return tvAddonsList.filter((a) => isTvAddonAvailableForPkg(a, pkg));
  }, [tvAddonsList, pkg]);

  // wybory
  const [selectedPhoneId, setSelectedPhoneId] = useState(null);
  const [openPhoneId, setOpenPhoneId] = useState(null);

  const [selectedDecoderId, setSelectedDecoderId] = useState(null);

  const [selectedQty, setSelectedQty] = useState({});

  const [tvTerm, setTvTerm] = useState({}); // { [id]: "12m" | "bezterminowo" }

  // ✅ sekcje (jedna otwarta naraz)
  const [openSections, setOpenSections] = useState({
    base: true,
    decoder: false,
    tv: false,
    phone: false,
    addons: false,
    summary: false,
  });

  const toggleSection = (key) => {
    setOpenSections((prev) => {
      const nextOpen = !prev[key];
      return {
        base: false,
        decoder: false,
        tv: false,
        phone: false,
        addons: false,
        summary: false,
        [key]: nextOpen,
      };
    });
  };

  // reset po otwarciu / zmianie pakietu
  useEffect(() => {
    if (!isOpen) return;

    setSelectedPhoneId(null);
    setOpenPhoneId(null);
    setSelectedDecoderId(null);
    setSelectedQty({});
    setTvTerm({});

    setOpenSections({
      base: true,
      decoder: false,
      tv: false,
      phone: false,
      addons: false,
      summary: false,
    });

    const d0 =
      (Array.isArray(decodersList) && decodersList.find((d) => Number(d.cena) === 0)) ||
      (Array.isArray(decodersList) ? decodersList[0] : null);

    setSelectedDecoderId(d0 ? String(d0.id) : null);
  }, [isOpen, pkg?.id, decodersList]);

  if (!isOpen || !pkg) return null;

  const basePrice = Number(pkg.price_monthly || 0);

  const phonePrice = useMemo(() => {
    if (!selectedPhoneId) return 0;
    const p = phonePlans.find((x) => String(x.id) === String(selectedPhoneId));
    return Number(p?.price_monthly || 0);
  }, [selectedPhoneId, phonePlans]);

  const decoderPrice = useMemo(() => {
    if (!selectedDecoderId) return 0;
    const d = decodersList.find((x) => String(x.id) === String(selectedDecoderId));
    return Number(d?.cena || 0);
  }, [selectedDecoderId, decodersList]);

  const tvAddonsPrice = useMemo(() => {
    return tvAddonsVisible.reduce((sum, a) => {
      const qty = Number(selectedQty[a.id] || 0);
      if (qty <= 0) return sum;

      const termPricing = hasTvTermPricing(a, pkg);
      const term = tvTerm[a.id] || "12m";
      const unit = getAddonUnitPrice(a, pkg, termPricing ? term : null);

      return sum + qty * unit;
    }, 0);
  }, [selectedQty, tvAddonsVisible, tvTerm, pkg]);

  const addonsOnlyPrice = useMemo(() => {
    return addonsList.reduce((sum, a) => {
      const qty = Number(selectedQty[a.id] || 0);
      const unit = getAddonUnitPrice(a, pkg, null);
      return sum + qty * unit;
    }, 0);
  }, [selectedQty, addonsList, pkg]);

  const addonsPrice = tvAddonsPrice + addonsOnlyPrice;
  const totalMonthly = basePrice + phonePrice + decoderPrice + addonsPrice;

  const handlePhoneSelect = (id) => {
    if (id === null) {
      setSelectedPhoneId(null);
      setOpenPhoneId(null);
      return;
    }
    setSelectedPhoneId(id);
    setOpenPhoneId((prev) => (String(prev) === String(id) ? null : id));
  };

  const toggleCheckboxAddon = (id) => {
    setSelectedQty((prev) => {
      const next = { ...prev };
      next[id] = (next[id] || 0) > 0 ? 0 : 1;
      return next;
    });
  };

  const setQtyAddon = (id, qty, min, max) => {
    const safe = Math.max(min, Math.min(max, qty));
    setSelectedQty((prev) => ({ ...prev, [id]: safe }));
  };

  const renderAddonRow = (a, isTv = false) => {
    const qty = Number(selectedQty[a.id] || 0);
    const isQty = a.typ === "quantity" || a.ilosc === true;

    const termPricing = isTv && hasTvTermPricing(a, pkg);
    const term = tvTerm[a.id] || "12m";
    const unit = getAddonUnitPrice(a, pkg, termPricing ? term : null);

    if (!isQty) {
      return (
        <label class="f-addon-item" key={(isTv ? "tv-" : "a-") + a.id}>
          <div class="f-addon-checkbox">
            <input
              type="checkbox"
              checked={qty > 0}
              onChange={() => toggleCheckboxAddon(a.id)}
            />
          </div>

          <div class="f-addon-main">
            <div class="f-addon-name">{a.nazwa}</div>
            {/* {a.opis && <div class="f-addon-desc">{a.opis}</div>} */}
            <a
              href={`/internet-telewizja/pakiety-tematyczne#${a.tid}`}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={`Więcej informacji o pakiecie ${a.nazwa ?? ""} (otwiera się w nowej karcie)`}
              title={`Więcej o pakiecie ${a.nazwa ?? ""}`}
            >
              Przejdź do szczegółowch informacji o pakiecie tematycznnym
            </a>

            {termPricing && (
              <div class="mt-2 flex flex-wrap gap-3 text-sm" onClick={(e) => e.stopPropagation()}>
                <label class="inline-flex items-center gap-2">
                  <input
                    type="radio"
                    name={`term-${a.id}`}
                    checked={(tvTerm[a.id] || "12m") === "12m"}
                    onChange={() => setTvTerm((p) => ({ ...p, [a.id]: "12m" }))}
                  />
                  <span>12 miesięcy</span>
                </label>

                <label class="inline-flex items-center gap-2">
                  <input
                    type="radio"
                    name={`term-${a.id}`}
                    checked={(tvTerm[a.id] || "12m") === "bezterminowo"}
                    onChange={() => setTvTerm((p) => ({ ...p, [a.id]: "bezterminowo" }))}
                  />
                  <span>Bezterminowo</span>
                </label>
              </div>
            )}
          </div>

          <div class="f-addon-price">
            {money(unit)} {cenaOpis}
          </div>
        </label>
      );
    }

    const min = Number.isFinite(a.min) ? a.min : 0;
    const max = Number.isFinite(a.max) ? a.max : 10;
    const step = Number.isFinite(a.krok) ? a.krok : 1;
    const lineTotal = qty * unit;

    return (
      <div class="f-addon-item f-addon-item--qty" key={(isTv ? "tvq-" : "aq-") + a.id}>
        <div class="f-addon-checkbox" aria-hidden="true"></div>

        <div class="f-addon-main">
          <div class="f-addon-name">{a.nazwa}</div>
          {a.opis && <div class="f-addon-desc">{a.opis}</div>}
        </div>

        <div class="f-addon-qty" onClick={(e) => e.stopPropagation()}>
          <button
            type="button"
            class="btn btn-outline"
            onClick={() => setQtyAddon(a.id, qty - step, min, max)}
            disabled={qty <= min}
          >
            −
          </button>

          <span class="f-addon-qty-value">{qty}</span>

          <button
            type="button"
            class="btn btn-outline"
            onClick={() => setQtyAddon(a.id, qty + step, min, max)}
            disabled={qty >= max}
          >
            +
          </button>
        </div>

        <div class="f-addon-price">
          <div>
            {money(unit)} {cenaOpis}
          </div>
          <div class="f-addon-price-total">{qty > 0 ? `${money(lineTotal)} ${cenaOpis}` : "—"}</div>
        </div>
      </div>
    );
  };

  // ---------
  const LS_KEY = "fuz_offer_config_v1";

  function buildOfferPayload() {
    const phone = selectedPhoneId
      ? phonePlans.find((p) => String(p.id) === String(selectedPhoneId))
      : null;

    const decoder = selectedDecoderId
      ? decodersList.find((d) => String(d.id) === String(selectedDecoderId))
      : null;

    const tvChosen = tvAddonsVisible
      .map((a) => {
        const qty = Number(selectedQty[a.id] || 0);
        if (qty <= 0) return null;

        const termPricing = hasTvTermPricing(a, pkg);
        const term = tvTerm[a.id] || "12m";
        const unit = getAddonUnitPrice(a, pkg, termPricing ? term : null);

        return {
          id: a.id,
          nazwa: a.nazwa,
          qty,
          term: termPricing ? term : null,
          unit,
        };
      })
      .filter(Boolean);

    const addonsChosen = addonsList
      .map((a) => {
        const qty = Number(selectedQty[a.id] || 0);
        if (qty <= 0) return null;

        const unit = getAddonUnitPrice(a, pkg, null);
        return { id: a.id, nazwa: a.nazwa, qty, unit };
      })
      .filter(Boolean);

    return {
      createdAt: new Date().toISOString(),
      pkg: { id: pkg?.id ?? null, name: pkg?.name ?? "", price: basePrice },
      phone: phone ? { id: phone.id, name: phone.name, price: phone.price_monthly } : null,
      decoder: decoder ? { id: decoder.id, name: decoder.nazwa, price: decoder.cena } : null,
      tvAddons: tvChosen,
      addons: addonsChosen,
      totals: {
        base: basePrice,
        phone: phonePrice,
        decoder: decoderPrice,
        tv: tvAddonsPrice,
        addons: addonsOnlyPrice,
        total: totalMonthly,
        currencyLabel: cenaOpis,
      },
    };
  }

  function saveOfferToLocalStorage() {
    try {
      const payload = buildOfferPayload();
      localStorage.setItem(LS_KEY, JSON.stringify(payload));
    } catch { }
  }

  //-- dopisane
  function moneyWithLabel(v) {
    return `${money(v)} ${cenaOpis}`;
  }

  function buildOfferMessage(payload) {
    const lines = [];

    // nagłówek
    lines.push(`Wybrana oferta: ${payload?.pkg?.name || "—"}`);
    lines.push("");

    // ✅ WSZYSTKIE linie jak w podsumowaniu
    lines.push(`Pakiet: ${moneyWithLabel(payload?.totals?.base ?? 0)}`);
    lines.push(`Telefon: ${payload?.phone ? moneyWithLabel(payload.totals.phone) : "—"}`);
    lines.push(`Dekoder: ${payload?.decoder ? moneyWithLabel(payload.totals.decoder) : "—"}`);
    lines.push(`Dodatki TV: ${payload?.tvAddons?.length ? moneyWithLabel(payload.totals.tv) : "—"}`);
    lines.push(`Dodatkowe usługi: ${payload?.addons?.length ? moneyWithLabel(payload.totals.addons) : "—"}`);
    lines.push(`Łącznie: ${moneyWithLabel(payload?.totals?.total ?? 0)}`);

    // szczegóły (pozycje)
    if (payload?.phone) {
      lines.push("");
      lines.push(`Telefon: ${payload.phone.name} (${moneyWithLabel(payload.phone.price)})`);
    }

    if (payload?.decoder) {
      lines.push("");
      lines.push(`Dekoder: ${payload.decoder.name} (${moneyWithLabel(payload.decoder.price)})`);
    }

    if (Array.isArray(payload?.tvAddons) && payload.tvAddons.length) {
      lines.push("");
      lines.push("Pakiety dodatkowe TV:");
      for (const it of payload.tvAddons) {
        const termTxt = it.term ? `, ${it.term}` : "";
        lines.push(
          `- ${it.nazwa} x${it.qty}${termTxt} @ ${moneyWithLabel(it.unit)}`
        );
      }
    }

    if (Array.isArray(payload?.addons) && payload.addons.length) {
      lines.push("");
      lines.push("Dodatkowe usługi:");
      for (const it of payload.addons) {
        lines.push(`- ${it.nazwa} x${it.qty} @ ${moneyWithLabel(it.unit)}`);
      }
    }

    return lines.join("\n");
  }

  function saveOfferToLocalStorage() {
    try {
      const payload = buildOfferPayload();
      payload.message = buildOfferMessage(payload); // ✅ gotowy tekst
      localStorage.setItem(LS_KEY, JSON.stringify(payload));
    } catch { }
  }


  // ---------

  return (
    <div class="f-modal-overlay" onClick={onClose}>
      <button
        class="f-modal-close"
        type="button"
        aria-label="Zamknij"
        onClick={(e) => {
          e.stopPropagation();
          onClose();
        }}
      >
        ✕
      </button>

      <div class="f-modal-panel f-modal-panel--compact" onClick={(e) => e.stopPropagation()}>
        <div class="f-modal-inner">
          <h2 class="f-modal-title">{pkg.name} — konfiguracja usług</h2>

          {/* ✅ PAKIET (sekcja) */}
          <div class="f-modal-section">
            <SectionAccordion
              title={pkg.name}
              right={<span class="f-modal-phone-price">{money(basePrice)} {cenaOpis}</span>}
              open={openSections.base}
              onToggle={() => toggleSection("base")}
            >
              {pkg.features?.length ? (
                <ul class="f-card-features">
                  {pkg.features.map((f, idx) => (
                    <li class="f-card-row" key={idx}>
                      <span class="f-card-label">{f.label}</span>
                      <span class="f-card-value">{formatFeatureValue(f.value)}</span>
                    </li>
                  ))}
                </ul>
              ) : (
                <p class="opacity-80">Brak szczegółów pakietu.</p>
              )}
            </SectionAccordion>
          </div>

          {/* DEKODER */}
          <div class="f-modal-section">
            <SectionAccordion
              title="Wybór dekodera"
              right={
                <span class="f-modal-phone-price">
                  {decoderPrice ? `${money(decoderPrice)} ${cenaOpis}` : "—"}
                </span>
              }
              open={openSections.decoder}
              onToggle={() => toggleSection("decoder")}
            >

              {decodersList.length === 0 ? (
                <p>Brak dostępnych dekoderów.</p>
              ) : (
                <div class="f-radio-list">
                  {decodersList.map((d) => {
                    const isSelected = String(selectedDecoderId) === String(d.id);

                    return (
                      <label class={`f-radio-item ${isSelected ? "is-selected" : ""}`} key={d.id}>
                        <div class="f-radio-check">
                          <input
                            type="radio"
                            name="decoder"
                            checked={isSelected}
                            onChange={() => setSelectedDecoderId(String(d.id))}
                          />
                        </div>

                        <div class="f-radio-main">
                          <div class="f-radio-name">{d.nazwa}</div>
                          {d.opis && <div class="f-addon-desc">{d.opis}</div>}
                        </div>

                        <div class="f-radio-price">
                          {money(d.cena)} {cenaOpis}
                        </div>
                      </label>
                    );
                  })}
                </div>
              )}



            </SectionAccordion>
          </div>

          {/* TV ADDONS */}
          <div class="f-modal-section">
            <SectionAccordion
              title="Pakiety dodatkowe TV"
              right={
                <span class="f-modal-phone-price">
                  {tvAddonsPrice ? `${money(tvAddonsPrice)} ${cenaOpis}` : "—"}
                </span>
              }
              open={openSections.tv}
              onToggle={() => toggleSection("tv")}
            >
              {tvAddonsVisible.length === 0 ? (
                <p>Brak pakietów dodatkowych TV.</p>
              ) : (
                <div class="f-addon-list">{tvAddonsVisible.map((a) => renderAddonRow(a, true))}</div>
              )}
            </SectionAccordion>
          </div>

          {/* TELEFON */}
          <div class="f-modal-section">
            <SectionAccordion
              title="Usługa telefoniczna"
              right={
                <span class="f-modal-phone-price">
                  {phonePrice ? `${money(phonePrice)} ${cenaOpis}` : "—"}
                </span>
              }
              open={openSections.phone}
              onToggle={() => toggleSection("phone")}
            >
              {phonePlans.length === 0 ? (
                <p>Brak dostępnych pakietów telefonicznych.</p>
              ) : (
                <div class="f-radio-list">
                  {/* brak telefonu */}
                  <label class={`f-radio-item ${selectedPhoneId === null ? "is-selected" : ""}`}>
                    <div class="f-radio-check">
                      <input
                        type="radio"
                        name="phone-plan"
                        checked={selectedPhoneId === null}
                        onChange={() => handlePhoneSelect(null)}
                      />
                    </div>

                    <div class="f-radio-main">
                      <div class="f-radio-name">Nie potrzebuję telefonu</div>
                    </div>

                    <div class="f-radio-price">0,00 {cenaOpis}</div>
                  </label>

                  {/* pakiety */}
                  {phonePlans.map((p) => {
                    const isSelected = String(selectedPhoneId) === String(p.id);

                    return (
                      <div class="f-radio-block" key={p.id}>
                        <label class={`f-radio-item ${isSelected ? "is-selected" : ""}`}>
                          <div class="f-radio-check">
                            <input
                              type="radio"
                              name="phone-plan"
                              checked={isSelected}
                              onChange={() => handlePhoneSelect(p.id)}
                            />
                          </div>

                          <div class="f-radio-main">
                            <div class="f-radio-name">{p.name}</div>
                          </div>

                          <div class="f-radio-price">
                            {money(p.price_monthly)} {cenaOpis}
                          </div>
                        </label>

                        {/* ✅ detale ZAWSZE widoczne */}
                        {p.features?.length > 0 && (
                          <div class="f-radio-details">
                            <ul class="f-card-features">
                              {p.features
                                .filter(
                                  (f) =>
                                    !String(f.label || "").toLowerCase().includes("aktyw"),
                                )
                                .map((f, idx) => (
                                  <li class="f-card-row" key={idx}>
                                    <span class="f-card-label">{f.label}</span>
                                    <span class="f-card-value">{formatFeatureValue(f.value)}</span>
                                  </li>
                                ))}
                            </ul>
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>

              )}

            </SectionAccordion>
          </div>

          {/* DODATKI */}
          <div class="f-modal-section">
            <SectionAccordion
              title="Dodatkowe usługi"
              right={
                <span class="f-modal-phone-price">
                  {addonsOnlyPrice ? `${money(addonsOnlyPrice)} ${cenaOpis}` : "—"}
                </span>
              }
              open={openSections.addons}
              onToggle={() => toggleSection("addons")}
            >
              {addonsList.length === 0 ? (
                <p>Brak usług dodatkowych.</p>
              ) : (
                <div class="f-addon-list">{addonsList.map((a) => renderAddonRow(a, false))}</div>
              )}
            </SectionAccordion>
          </div>

          {/* PODSUMOWANIE */}
          <div class="f-modal-section">
            <SectionAccordion
              title="Podsumowanie miesięczne"
              right={<span class="f-modal-phone-price">{money(totalMonthly)} {cenaOpis}</span>}
              open={openSections.summary}
              onToggle={() => toggleSection("summary")}
            >
              <div class="f-summary">
                <div class="f-summary-list">
                  <div class="f-summary-row">
                    <span>Pakiet</span>
                    <span>{money(basePrice)} {cenaOpis}</span>
                  </div>

                  <div class="f-summary-row">
                    <span>Telefon</span>
                    <span>{phonePrice ? `${money(phonePrice)} ${cenaOpis}` : "—"}</span>
                  </div>

                  <div class="f-summary-row">
                    <span>Dekoder</span>
                    <span>{decoderPrice ? `${money(decoderPrice)} ${cenaOpis}` : "—"}</span>
                  </div>

                  <div class="f-summary-row">
                    <span>Dodatki TV</span>
                    <span>{tvAddonsPrice ? `${money(tvAddonsPrice)} ${cenaOpis}` : "—"}</span>
                  </div>

                  <div class="f-summary-row">
                    <span>Dodatkowe usługi</span>
                    <span>{addonsOnlyPrice ? `${money(addonsOnlyPrice)} ${cenaOpis}` : "—"}</span>
                  </div>

                  <div class="f-summary-total">
                    <span>Łącznie</span>
                    <span>{money(totalMonthly)} {cenaOpis}</span>

                  </div>

                  <a
                    href="/kontakt"
                    class="btn btn-primary w-full mt-4"
                    onClick={() => saveOfferToLocalStorage()}
                  >
                    Wyślij zapytanie z tym wyborem
                  </a>

                </div>
              </div>
            </SectionAccordion>
          </div>

          <div
            ref={floating.ref}
            class="f-floating-total"
            style={floating.style}
            {...floating.handlers}
            onClick={(e) => e.stopPropagation()}
          >
            <div class="f-floating-total-circle" role="status" aria-label="Cena miesięczna">
              <span class="f-floating-total-unit">
                Razem
              </span>
              <span class="f-floating-total-amount">
                {money(totalMonthly)}
              </span>
              <span class="f-floating-total-unit">
                {cenaOpis}
              </span>
            </div>
          </div>

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