import Link from "next/link";
import { getSiteSettings } from "@/lib/settings";
import { listPages, type ContentPageDTO, type FooterGroup } from "@/lib/pages";
import { pageHref } from "@/lib/page-href";
import { FooterGate } from "@/components/layout/FooterGate";
import { FooterNewsletter } from "@/components/layout/FooterNewsletter";
import { StoreContactBlock } from "@/components/layout/StoreContactBlock";
import { BrandLockup } from "@/components/brand/BrandMark";

const shopLinks = [
  { href: "/shop?category=women", label: "Women" },
  { href: "/shop?category=men", label: "Men" },
  { href: "/categories/kids", label: "Kids" },
  { href: "/categories/baby", label: "Baby" },
  { href: "/shop", label: "All products" },
];

const accountLinks = [
  { href: "/account/orders", label: "Track order" },
  { href: "/wishlist", label: "Wishlist" },
  { href: "/login", label: "Sign in" },
];

function groupPages(pages: ContentPageDTO[], group: FooterGroup) {
  return pages
    .filter((page) => page.footerGroup === group)
    .sort((a, b) => a.sortOrder - b.sortOrder);
}

/** Marketplace footer — CMS-driven policy links + brand settings. */
export async function Footer() {
  const [settings, pages] = await Promise.all([
    getSiteSettings(),
    listPages({ footerOnly: true }),
  ]);

  const company = groupPages(pages, "company");
  const support = groupPages(pages, "support");
  const legal = groupPages(pages, "legal");
  const noteParts = settings.footerNote
    .split(/[·|]/)
    .map((part) => part.trim())
    .filter(Boolean);

  const columns = [
    { title: "Shop", links: shopLinks },
    {
      title: "Company",
      links: [
        ...company.map((page) => ({
          href: pageHref(page.slug),
          label: page.title,
        })),
        ...accountLinks.slice(0, 2),
      ],
    },
    {
      title: "Support",
      links: [
        ...support.map((page) => ({
          href: pageHref(page.slug),
          label: page.title,
        })),
        ...accountLinks.slice(2),
      ],
    },
    {
      title: "Legal",
      links: legal.map((page) => ({
        href: pageHref(page.slug),
        label: page.title,
      })),
    },
  ].filter((column) => column.links.length > 0);

  return (
    <FooterGate>
      <footer className="relative mt-auto overflow-hidden border-t border-border">
        <div aria-hidden className="pointer-events-none absolute inset-0 bg-background" />
        <div className="atelier relative py-12">
          <div className="grid gap-12 lg:grid-cols-[1.05fr_1.95fr]">
            <div>
              <Link href="/" className="inline-flex items-center" aria-label={settings.siteName}>
                <BrandLockup
                  name={settings.siteName}
                  logoUrl={settings.logoUrl}
                  size="lg"
                />
              </Link>
              <p className="mt-4 max-w-sm text-sm leading-relaxed text-muted">
                {settings.footerTagline || settings.description}
              </p>
              <div className="mt-4">
                <StoreContactBlock settings={settings} showAddress />
              </div>
              <FooterNewsletter />
            </div>

            <div className="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-4 sm:gap-8">
              {columns.map((column) => (
                <div key={column.title}>
                  <p className="font-display text-lg text-foreground">
                    {column.title}
                  </p>
                  <ul className="mt-4 space-y-2.5">
                    {column.links.map((link) => (
                      <li key={`${column.title}-${link.href}-${link.label}`}>
                        <Link
                          href={link.href}
                          className="text-sm text-foreground/90 transition hover:text-foreground"
                        >
                          {link.label}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="relative border-t border-border/80 bg-card/40 backdrop-blur-sm">
          <div className="atelier flex flex-col gap-3 py-4 text-[11px] uppercase tracking-[0.12em] text-muted sm:flex-row sm:items-center sm:justify-between">
            <p>
              © {new Date().getFullYear()} {settings.siteName}. All rights
              reserved.
            </p>
            <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
              {noteParts.map((part) => (
                <span key={part}>{part}</span>
              ))}
            </div>
          </div>
        </div>
      </footer>
    </FooterGate>
  );
}