import Link from "next/link";
import { formatAddress } from "./hours";
import { marketplaceUrl, pagePath, type StorefrontRenderContext } from "./links";

const SOCIAL_LABELS: Record<string, string> = {
  instagram: "Instagram",
  facebook: "Facebook",
  tiktok: "TikTok",
  x: "X",
  pinterest: "Pinterest",
  youtube: "YouTube",
  website: "Website",
};

export function StorefrontFooter({ ctx }: { ctx: StorefrontRenderContext }) {
  const { shell } = ctx;
  const store = shell.store;
  const address = formatAddress(store);
  const socials = (shell.social_links ?? []).filter((link) => Boolean(link?.url));
  const year = new Date().getFullYear();

  return (
    <footer
      className="mt-auto px-6 py-12"
      style={{ borderTop: "1px solid var(--sf-border)", backgroundColor: "var(--sf-surface)" }}
    >
      <div className="mx-auto grid max-w-6xl gap-8 sm:grid-cols-3">
        <div>
          <p className="text-base font-semibold">{store?.name}</p>
          {shell.tagline && (
            <p className="mt-1 text-sm" style={{ color: "var(--sf-muted)" }}>
              {shell.tagline}
            </p>
          )}
          {address && (
            <address className="mt-3 not-italic text-sm" style={{ color: "var(--sf-muted)" }}>
              {address}
            </address>
          )}
        </div>

        <div>
          <p className="text-sm font-semibold">Pages</p>
          <ul className="mt-3 space-y-2">
            {(shell.nav ?? []).map((link) => (
              <li key={link.slug}>
                <Link
                  href={pagePath(ctx, link.slug ?? "home")}
                  className="text-sm hover:underline"
                  style={{ color: "var(--sf-muted)" }}
                >
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <p className="text-sm font-semibold">Contact</p>
          <ul className="mt-3 space-y-2 text-sm" style={{ color: "var(--sf-muted)" }}>
            {shell.contact_email && (
              <li>
                <a href={`mailto:${shell.contact_email}`} className="hover:underline">
                  {shell.contact_email}
                </a>
              </li>
            )}
            {shell.contact_phone && (
              <li>
                <a
                  href={`tel:${shell.contact_phone.replace(/[^\d+]/g, "")}`}
                  className="hover:underline"
                >
                  {shell.contact_phone}
                </a>
              </li>
            )}
            {socials.map((link) => (
              <li key={`${link.platform}-${link.url}`}>
                <a
                  href={link.url}
                  target="_blank"
                  rel="noopener noreferrer nofollow"
                  className="hover:underline"
                >
                  {SOCIAL_LABELS[link.platform ?? ""] ?? link.platform}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div
        className="mx-auto mt-10 flex max-w-6xl flex-wrap items-center justify-between gap-3 pt-6 text-xs"
        style={{ borderTop: "1px solid var(--sf-border)", color: "var(--sf-muted)" }}
      >
        <p>
          © {year} {store?.name}
        </p>
        {/* Provenance: a visitor on a seller's own domain should still be able
            to find the marketplace the store actually sells through. */}
        <p>
          Powered by{" "}
          <a
            href={marketplaceUrl(shell, "/")}
            className="font-medium hover:underline"
            style={{ color: "var(--sf-primary)" }}
          >
            Alqove
          </a>
        </p>
      </div>
    </footer>
  );
}