import Link from "next/link";
import { getSettings } from "@/lib/settings";
import {
  FacebookIcon,
  XIcon,
  LinkedInIcon,
  YouTubeIcon,
  InstagramIcon,
} from "@/components/icons";
import { CookiePreferencesButton } from "@/components/CookiePreferencesButton";

export async function SiteFooter() {
  const s = await getSettings([
    "site_name",
    "site_tagline",
    "footer_description",
    "social_facebook",
    "social_x",
    "social_linkedin",
    "social_youtube",
    "social_instagram",
    "footer_show_social",
    "footer_show_legal",
    "footer_show_resources",
    "footer_show_company",
    "footer_show_cookie_preferences",
    "footer_copyright_text",
  ]);

  const year = new Date().getFullYear();
  const siteName = s.site_name || "SmartTools AI";
  const copyright = s.footer_copyright_text
    ? s.footer_copyright_text.replace("{year}", String(year)).replace("{site}", siteName)
    : `© ${year} ${siteName}. All rights reserved.`;

  const socials = [
    { name: "Facebook", href: s.social_facebook, Icon: FacebookIcon },
    { name: "X", href: s.social_x, Icon: XIcon },
    { name: "LinkedIn", href: s.social_linkedin, Icon: LinkedInIcon },
    { name: "YouTube", href: s.social_youtube, Icon: YouTubeIcon },
    { name: "Instagram", href: s.social_instagram, Icon: InstagramIcon },
  ].filter((x) => x.href && x.href.trim().length > 0);

  const legal = [
    { label: "Privacy Policy", href: "/privacy-policy" },
    { label: "Terms & Conditions", href: "/terms" },
    { label: "Cookie Policy", href: "/cookie-policy" },
    { label: "Disclaimer", href: "/disclaimer" },
    { label: "Content Guidelines", href: "/content-guidelines" },
    { label: "Reviewer Guidelines", href: "/reviewer-guidelines" },
  ];

  const resources = [
    { label: "AI Tools", href: "/tools" },
    { label: "All Tools", href: "/tools" },
    { label: "Blog", href: "/blog" },
    { label: "Guides", href: "/blog" },
    { label: "Categories", href: "/blog" },
    { label: "FAQ", href: "/#faq" },
  ];

  const company = [
    { label: "About Us", href: "/about" },
    { label: "Contact Us", href: "/contact" },
    { label: "System Status", href: "/status" },
  ];

  return (
    <footer className="border-t border-slate-200 bg-white">
      <div className="mx-auto max-w-6xl px-4 py-14 sm:px-6">
        <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-12">
          {/* Brand + follow */}
          <div className="lg:col-span-4">
            <Link href="/" className="flex items-center gap-2 font-bold text-slate-900">
              <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-600 to-violet-600 text-lg text-white">
                ⚡
              </span>
              <span className="text-lg tracking-tight">{siteName}</span>
            </Link>
            <p className="mt-4 max-w-sm text-sm leading-relaxed text-slate-500">
              {s.footer_description || s.site_tagline || "Simple AI tools for smarter work."}
            </p>

            {s.footer_show_social !== "0" && socials.length > 0 && (
              <div className="mt-6">
                <p className="text-xs font-semibold uppercase tracking-wider text-slate-400">
                  Follow Us
                </p>
                <div className="mt-3 flex gap-2">
                  {socials.map(({ name, href, Icon }) => (
                    <a
                      key={name}
                      href={href}
                      target="_blank"
                      rel="noopener noreferrer"
                      aria-label={name}
                      className="flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-500 transition hover:border-indigo-200 hover:bg-indigo-50 hover:text-indigo-600"
                    >
                      <Icon className="h-4 w-4" />
                    </a>
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* Legal */}
          {s.footer_show_legal !== "0" && (
            <div className="lg:col-span-3">
              <p className="text-sm font-semibold text-slate-900">Legal</p>
              <ul className="mt-4 space-y-2.5">
                {legal.map((l) => (
                  <li key={l.href}>
                    <Link
                      href={l.href}
                      className="text-sm text-slate-500 transition hover:text-slate-900"
                    >
                      {l.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* Resources */}
          {s.footer_show_resources !== "0" && (
            <div className="lg:col-span-3">
              <p className="text-sm font-semibold text-slate-900">Resources</p>
              <ul className="mt-4 space-y-2.5">
                {resources.map((l) => (
                  <li key={l.label}>
                    <Link
                      href={l.href}
                      className="text-sm text-slate-500 transition hover:text-slate-900"
                    >
                      {l.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* Company */}
          {s.footer_show_company !== "0" && (
            <div className="lg:col-span-2">
              <p className="text-sm font-semibold text-slate-900">Company</p>
              <ul className="mt-4 space-y-2.5">
                {company.map((l) => (
                  <li key={l.label}>
                    <Link
                      href={l.href}
                      className="text-sm text-slate-500 transition hover:text-slate-900"
                    >
                      {l.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>

        {/* Bottom bar */}
        <div className="mt-12 flex flex-col items-start justify-between gap-4 border-t border-slate-100 pt-6 sm:flex-row sm:items-center">
          <p className="text-sm text-slate-400">{copyright}</p>
          {s.footer_show_cookie_preferences !== "0" && <CookiePreferencesButton />}
        </div>
      </div>
    </footer>
  );
}