import { SITE_BRAND_NAME } from "../constants/brand.js";
import { SOCIAL } from "../data/social.js";
import { t, getSiteLogoUrl, getSiteLocale, bindLocaleSwitcher } from "../config/site.js";

const GENERAL_LINKS = [
  { href: "#/", labelKey: "navHome" },
  { href: "#/market", labelKey: "navMarket" },
  { href: "#/oyunlar", labelKey: "navGames" },
  { href: "#/liderlik", labelKey: "footerLeaderboard" },
  { href: "#/ozel-oranlar", labelKey: "navSpecialOdds" },
];

const CONTENT_LINKS = [
  { href: "#/bonuslar", labelKey: "navBonuses" },
  { href: "#/promosyon-kodlari", labelKey: "navPromoCodes" },
  { href: "#/ana-sponsorlar", labelKey: "navAnaSponsors" },
  { href: "#/sans-carki", labelKey: "navWheel" },
  { href: "#/affiliate-gecis", labelKey: "navAffiliate" },
];

const SUPPORT_LINKS = [
  { href: "#/profil", labelKey: "navProfile" },
  { href: "#/sikayet-oneri", labelKey: "navComplaints" },
  { href: "#/iletisim", labelKey: "navContact" },
];

const LEGAL_LINKS = [
  { href: "#/gizlilik-guvenlik", labelKey: "footerPrivacy" },
  { href: "#/kurallar-sartlar", labelKey: "footerTerms" },
  { href: "#/cerez-politikasi", labelKey: "footerCookies" },
];

const FOOTER_PROVIDER_URL = "https://t.me/zentracode";

function footerColTitle(text) {
  return `
    <div class="site-footer__col-head">
      <p class="site-footer__col-title">${text}</p>
      <div class="site-footer__col-rule" aria-hidden="true"></div>
    </div>
  `;
}

function footerLinkHtml(href, label) {
  return `
    <a href="${href}" class="site-footer__link">
      <span class="site-footer__link-dot" aria-hidden="true"></span>
      <span class="site-footer__link-label">${label}</span>
    </a>
  `;
}

function footerTopbarSocialHtml() {
  return (Array.isArray(SOCIAL) ? SOCIAL : [])
    .map(
      (s) => `
    <a
      href="${s.href}"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="${s.name}"
      class="site-footer__topbar-social-link"
    >
      <svg viewBox="0 0 24 24" aria-hidden="true">${s.icon}</svg>
    </a>
  `,
    )
    .join("");
}

function footerLocaleSwitcherHtml() {
  const locale = getSiteLocale();
  const code = locale === "en" ? "EN" : "TR";
  const flag = locale === "en" ? "🇬🇧" : "🇹🇷";
  return `
    <details id="footer-locale-details" class="site-footer__locale">
      <summary aria-label="${t("headerLangAria")}">
        <span class="site-footer__locale-flag" data-footer-locale-flag aria-hidden="true">${flag}</span>
        <span data-footer-locale-code>${code}</span>
        <svg class="site-footer__locale-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
        </svg>
      </summary>
      <div class="site-footer__locale-menu" role="group" aria-label="${t("headerLangAria")}">
        <button type="button" data-locale-switch="tr" class="site-footer__locale-option">
          <span aria-hidden="true">🇹🇷</span> TR
        </button>
        <button type="button" data-locale-switch="en" class="site-footer__locale-option">
          <span aria-hidden="true">🇬🇧</span> EN
        </button>
      </div>
    </details>
  `;
}

function footerTopbarHtml(logoSrc) {
  return `
    <div class="site-footer__topbar">
      <div class="site-footer__topbar-inner">
        <div class="site-footer__topbar-start">
          <a href="#/" class="site-footer__topbar-logo" aria-label="${SITE_BRAND_NAME}">
            <span class="site-footer__topbar-logo-box">
              <img src="${logoSrc}" alt="" loading="lazy" decoding="async" class="site-brand-logo site-brand-logo--footer-topbar" />
            </span>
          </a>
          ${footerLocaleSwitcherHtml()}
        </div>
        <div class="site-footer__topbar-end">
          <span class="site-footer__topbar-follow">${t("footerFollow")}</span>
          <div class="site-footer__topbar-social" id="footer-topbar-social">
            ${footerTopbarSocialHtml()}
          </div>
        </div>
      </div>
    </div>
  `;
}

function bindFooterTopbar(root) {
  bindLocaleSwitcher(root);

  const localeDetails = root.querySelector("#footer-locale-details");
  if (localeDetails instanceof HTMLDetailsElement) {
    localeDetails.querySelectorAll("[data-locale-switch]").forEach((btn) => {
      btn.addEventListener("click", () => {
        localeDetails.open = false;
      });
    });
  }
}

function footerBottomCreditHtml() {
  return `
    <span class="site-footer__bottom-credit">
      ${t("footerProvidedBy")}
      <a
        href="${FOOTER_PROVIDER_URL}"
        target="_blank"
        rel="noopener noreferrer"
        class="site-footer__bottom-link site-footer__bottom-link--brand"
      >${t("footerZentraCode")}</a>
    </span>
  `;
}

export function renderFooter(root) {
  const logoSrc = getSiteLogoUrl();
  const general = GENERAL_LINKS.map((l) => footerLinkHtml(l.href, t(l.labelKey))).join("");
  const content = CONTENT_LINKS.map((l) => footerLinkHtml(l.href, t(l.labelKey))).join("");
  const support = SUPPORT_LINKS.map((l) => footerLinkHtml(l.href, t(l.labelKey))).join("");
  const legal = LEGAL_LINKS.map((l) => footerLinkHtml(l.href, t(l.labelKey))).join("");

  root.innerHTML = `
    <footer class="k-footer site-footer">
      ${footerTopbarHtml(logoSrc)}
      <div class="site-footer__body">
        <div class="site-footer__inner">
          <div class="site-footer__grid">
            <div class="site-footer__col site-footer__col--general">
              ${footerColTitle(t("footerGeneral"))}
              <nav class="site-footer__nav" aria-label="${t("footerGeneralNav")}">
                ${general}
              </nav>
            </div>

            <div class="site-footer__col site-footer__col--content">
              ${footerColTitle(t("footerContent"))}
              <nav class="site-footer__nav" aria-label="${t("footerContentNav")}">
                ${content}
              </nav>
            </div>

            <div class="site-footer__col site-footer__col--account">
              ${footerColTitle(SITE_BRAND_NAME)}
              <nav class="site-footer__nav" aria-label="${t("footerAccountNav")}">
                ${support}
              </nav>
            </div>

            <div class="site-footer__col site-footer__col--legal">
              ${footerColTitle(t("footerLegal"))}
              <nav class="site-footer__nav" aria-label="${t("footerLegalNav")}">
                ${legal}
              </nav>
            </div>
          </div>

          <div class="site-footer__bottom">
            <p class="site-footer__disclaimer">${t("footerDisclaimer")}</p>
            <div class="site-footer__bottom-bar">
              <p class="site-footer__copyright">© ${new Date().getFullYear()} ${SITE_BRAND_NAME}. ${t("footerRights")}</p>
              <div class="site-footer__bottom-links">
                ${footerBottomCreditHtml()}
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  `;

  if (!(Array.isArray(SOCIAL) && SOCIAL.length)) {
    const topSocial = root.querySelector("#footer-topbar-social");
    if (topSocial) topSocial.innerHTML = "";
  }

  bindFooterTopbar(root);
}
