import { Fragment } from "react";
import Link from "next/link";

import { getSiteNavFlat } from "@/lib/betaVisibility";
import type { PublicFooter } from "@/lib/site-content";

type SiteFooterProps = {
  cmsFooter?: PublicFooter | null;
};

export function SiteFooter({ cmsFooter }: SiteFooterProps) {
  const fallbackNav = getSiteNavFlat();
  const companyName = cmsFooter?.companyName?.trim() || "CỔ THƯ KỲ PHỔ";
  const description =
    cmsFooter?.description?.trim() ||
    "Sổ bài, lá số và quẻ Dịch — mỗi thứ một nhịp; không vội, không ồn.";
  const copyright =
    cmsFooter?.copyrightText?.trim() ||
    `© ${new Date().getFullYear()} · Tĩnh lặng để nghe lời xưa`;
  const links =
    cmsFooter?.links && cmsFooter.links.length > 0
      ? cmsFooter.links.map((l) => ({ href: l.href, label: l.label }))
      : fallbackNav;

  return (
    <footer className="mt-auto border-t border-stone-900/55 bg-[#0c0a09]/80 py-12 text-center sm:py-14">
      <div className="mx-auto max-w-[1100px] px-4 sm:px-8">
        <div className="ctkp-rule mx-auto mb-6 max-w-xs opacity-60" aria-hidden />
        <p className="font-ctkp-display text-[11px] tracking-[0.32em] text-amber-200/35">
          {companyName.toUpperCase()}
        </p>
        <p className="mx-auto mt-2 max-w-2xl text-xs leading-relaxed text-stone-600">{description}</p>
        {(cmsFooter?.address || cmsFooter?.phone || cmsFooter?.email) && (
          <p className="mx-auto mt-3 max-w-xl text-xs leading-relaxed text-stone-600">
            {[cmsFooter.address, cmsFooter.phone, cmsFooter.email].filter(Boolean).join(" · ")}
          </p>
        )}
        <nav
          aria-label="Liên kết chân trang"
          className="mx-auto mt-6 flex max-w-xl flex-wrap items-center justify-center gap-x-1 gap-y-2 sm:gap-x-0"
        >
          {links.map((item, i) => (
            <Fragment key={item.href}>
              {i > 0 ? (
                <span className="hidden px-2 text-stone-700 sm:inline" aria-hidden>
                  ·
                </span>
              ) : null}
              <Link href={item.href} className="ctkp-footer-nav-link px-2 sm:px-1">
                {item.label}
              </Link>
            </Fragment>
          ))}
        </nav>
        <p className="mt-8 text-xs leading-relaxed text-stone-600">{copyright}</p>
      </div>
    </footer>
  );
}