import Link from "next/link";
import {
  COMPANY_SOCIAL_LINKS,
  FOOTER_BOTTOM_LEGAL_LINKS,
  FOOTER_NAV_COLUMNS,
  type CompanySocialLink,
  type FooterNavGroup,
} from "@/lib/footer-nav";
import { Logo } from "./Logo";
import { SocialProviderIcon } from "./dashboard/SocialProviderIcon";

const col = "mb-2 text-[0.9rem] text-ink-60";
const a =
  "rounded-sm transition-colors hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";

function FooterNavGroupBlock({ group }: { group: FooterNavGroup }) {
  return (
    <div>
      <h2 className="mb-3.5 font-display text-[0.7rem] font-medium tracking-[0.14em] text-ink-40 uppercase">
        {group.title}
      </h2>
      <ul>
        {group.links.map((link) => (
          <li key={`${group.title}-${link.label}`} className={col}>
            <Link className={a} href={link.href}>
              {link.label}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

function SocialIcon({ platform }: { platform: CompanySocialLink["platform"] }) {
  if (platform === "youtube") {
    return (
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        width="20"
        height="20"
        className="size-5"
      >
        <path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31.5 31.5 0 0 0 0 12a31.5 31.5 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31.5 31.5 0 0 0 24 12a31.5 31.5 0 0 0-.5-5.8ZM9.75 15.5v-7l6.5 3.5-6.5 3.5Z" />
      </svg>
    );
  }

  if (platform === "linkedin") {
    return (
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        width="20"
        height="20"
        className="size-5"
      >
        <path d="M4.98 3.5C4.98 4.88 3.88 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5ZM.5 8.5h4V23h-4V8.5Zm7.5 0h3.8v2h.05c.53-1 1.84-2.05 3.8-2.05 4.06 0 4.8 2.67 4.8 6.15V23h-4v-6.7c0-1.6-.03-3.65-2.23-3.65-2.23 0-2.57 1.74-2.57 3.54V23h-4V8.5Z" />
      </svg>
    );
  }

  return <SocialProviderIcon provider={platform} className="size-5" />;
}

function FooterSocialLinks() {
  if (COMPANY_SOCIAL_LINKS.length === 0) {
    return null;
  }

  return (
    <nav aria-label="Postvertise on social media" className="mt-4">
      <ul className="flex flex-wrap items-center gap-3">
        {COMPANY_SOCIAL_LINKS.map((link) => (
          <li key={link.platform}>
            <a
              className="inline-flex size-9 items-center justify-center rounded-full border border-line text-ink-40 transition-colors hover:border-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
              href={link.href}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={link.label}
              title={link.label}
            >
              <SocialIcon platform={link.platform} />
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}

export function Footer() {
  return (
    <footer className="border-t border-line bg-surface pt-[52px] pb-10">
      <div className="mx-auto w-full max-w-page px-4 md:px-6">
        <div className="grid grid-cols-2 gap-x-[26px] gap-y-9 min-[761px]:grid-cols-[1.4fr_repeat(3,minmax(0,1fr))] min-[761px]:gap-x-[30px] min-[761px]:gap-y-[30px]">
          <div className="col-span-2 min-[761px]:col-span-1">
            <Logo />
            <p className="mt-3 max-w-[34ch] text-[0.9rem] text-ink-60">
              The marketplace where brands discover creators, run campaigns, and review
              deliverables—with authorized social metrics where platforms support them.
            </p>
            <FooterSocialLinks />
          </div>
          {FOOTER_NAV_COLUMNS.map((column) => (
            <div key={column.map((group) => group.title).join("-")} className="flex flex-col gap-9">
              {column.map((group) => (
                <FooterNavGroupBlock key={group.title} group={group} />
              ))}
            </div>
          ))}
        </div>
        <div className="mt-11 flex flex-col gap-3 border-t border-line pt-[22px] text-[0.82rem] text-ink-40 min-[520px]:flex-row min-[520px]:flex-wrap min-[520px]:items-center min-[520px]:justify-between min-[520px]:gap-4">
          <span>© 2026 Postvertise</span>
          <nav
            aria-label="Legal policies"
            className="flex max-w-full flex-wrap items-center gap-x-4 gap-y-2"
          >
            {FOOTER_BOTTOM_LEGAL_LINKS.map((link) => (
              <Link key={`bottom-${link.href}`} className={a} href={link.href}>
                {link.label}
              </Link>
            ))}
          </nav>
        </div>
      </div>
    </footer>
  );
}