import Link from "next/link";
import Image from "next/image";
import { Mail, Phone, MapPin, Download } from "lucide-react";
import {
  APP_DOWNLOAD_LINKS,
  BRAND,
  FOOTER_COMPANY_LINKS,
  FOOTER_RESOURCE_LINKS,
  FOOTER_SUPPORT_LINKS,
} from "@/lib/constants";
import { FALLBACK_SITE_CONFIG, type SiteConfig } from "@/lib/api/site";
import FooterTrustBlock from "@/components/layout/FooterTrustBlock";

export default function Footer({ siteConfig }: { siteConfig: SiteConfig | null }) {
  const currentYear = new Date().getFullYear();
  const resolvedSiteConfig: SiteConfig = siteConfig ?? FALLBACK_SITE_CONFIG;
  // Only real profile pages; an unset network is hidden, not guessed (B04).
  const socialLinks = [
    { letter: "f", href: resolvedSiteConfig.social.facebook, label: "Facebook" },
    { letter: "in", href: resolvedSiteConfig.social.linkedin, label: "LinkedIn" },
    { letter: "𝕏", href: resolvedSiteConfig.social.twitter, label: "X (Twitter)" },
    { letter: "◎", href: resolvedSiteConfig.social.instagram, label: "Instagram" },
    { letter: "▶", href: resolvedSiteConfig.social.youtube, label: "YouTube" },
  ].filter((link) => !!link.href);
  const { legal } = resolvedSiteConfig;
  const footerDescription =
    resolvedSiteConfig.shortAbout ||
    "India's leading B2B raw materials procurement and credit platform, dedicated to revolutionising the SME sector.";

  return (
    <footer className="bg-gray-900 text-gray-300">
      {/* Main Footer */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8">
          {/* Brand Column */}
          <div className="lg:col-span-2">
            <Link href="/" className="inline-flex items-center mb-4">
              <Image
                src="/logo-white.png"
                alt="Biznie"
                width={220}
                height={60}
                className="h-10 w-auto"
              />
            </Link>
            <p className="text-gray-400 text-sm leading-relaxed mb-4">
              {footerDescription}
            </p>

            {/* Social Icons */}
            {socialLinks.length > 0 && (
            <div className="flex items-center gap-3 mt-5">
              {socialLinks.map(({ letter, href, label }) => (
                <a
                  key={label}
                  href={href}
                  aria-label={label}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-[#CC1414] transition-colors text-xs font-bold"
                >
                  {letter}
                </a>
              ))}
            </div>
            )}

            {/* App Store Buttons — only once the apps are actually listed (B04). */}
            {(APP_DOWNLOAD_LINKS.appStore || APP_DOWNLOAD_LINKS.playStore) && (
            <div className="flex gap-2 mt-5">
              {APP_DOWNLOAD_LINKS.appStore && (
              <a
                href={APP_DOWNLOAD_LINKS.appStore}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 bg-gray-800 hover:bg-gray-700 transition-colors text-white text-xs px-3 py-2 rounded-lg border border-gray-600"
              >
                <Download size={13} />
                App Store
              </a>
              )}
              {APP_DOWNLOAD_LINKS.playStore && (
              <a
                href={APP_DOWNLOAD_LINKS.playStore}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 bg-gray-800 hover:bg-gray-700 transition-colors text-white text-xs px-3 py-2 rounded-lg border border-gray-600"
              >
                <Download size={13} />
                Play Store
              </a>
              )}
            </div>
            )}
          </div>

          {/* Company Links */}
          <div>
            <h3 className="text-white font-semibold text-sm mb-4 uppercase tracking-wider">Company</h3>
            <ul className="space-y-2">
              {FOOTER_COMPANY_LINKS.map((link) => (
                <li key={`${link.label}-${link.href}`}>
                  <Link
                    href={link.href}
                    className="text-gray-400 hover:text-white text-sm transition-colors"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Resource Links */}
          <div>
            <h3 className="text-white font-semibold text-sm mb-4 uppercase tracking-wider">Resources</h3>
            <ul className="space-y-2">
              {FOOTER_RESOURCE_LINKS.map((link) => (
                <li key={`${link.label}-${link.href}`}>
                  <Link
                    href={link.href}
                    className="text-gray-400 hover:text-white text-sm transition-colors"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Support Links */}
          <div>
            <h3 className="text-white font-semibold text-sm mb-4 uppercase tracking-wider">Support</h3>
            <ul className="space-y-2">
              {FOOTER_SUPPORT_LINKS.map((link) => (
                <li key={`${link.label}-${link.href}`}>
                  <Link
                    href={link.href}
                    className="text-gray-400 hover:text-white text-sm transition-colors"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>

            <div className="mt-5 space-y-2 text-xs text-gray-500">
              <div className="flex items-start gap-2">
                <MapPin size={13} className="mt-0.5 shrink-0 text-[#CC1414]" />
                <span>{resolvedSiteConfig.address}</span>
              </div>
              <div className="flex items-center gap-2">
                <Phone size={13} className="shrink-0 text-[#CC1414]" />
                <a href={`tel:${resolvedSiteConfig.phone}`} className="hover:text-white transition-colors">
                  {resolvedSiteConfig.phone}
                </a>
              </div>
              <div className="flex items-center gap-2">
                <Mail size={13} className="shrink-0 text-[#CC1414]" />
                <a href={`mailto:${resolvedSiteConfig.email}`} className="hover:text-white transition-colors">
                  {resolvedSiteConfig.email}
                </a>
              </div>
            </div>

            <FooterTrustBlock whatsapp={resolvedSiteConfig.whatsapp} />
          </div>
        </div>

        {/* Statutory identity + grievance officer (IT Rules 2021, Phase 4.2) */}
        <div className="mt-10 pt-6 border-t border-gray-800 grid gap-2 text-xs text-gray-500 sm:grid-cols-2">
          <p>
            <span className="text-gray-400">{legal.legalName}</span>
            {legal.llpin && <> · LLPIN: {legal.llpin}</>}
            {legal.gstin && <> · GSTIN: {legal.gstin}</>}
          </p>
          {legal.grievanceOfficer.name && (
            <p className="sm:text-right">
              Grievance Officer: <span className="text-gray-400">{legal.grievanceOfficer.name}</span>
              {legal.grievanceOfficer.email && (
                <> · <a href={`mailto:${legal.grievanceOfficer.email}`} className="hover:text-white">{legal.grievanceOfficer.email}</a></>
              )}
              {legal.grievanceOfficer.phone && <> · {legal.grievanceOfficer.phone}</>}
              {legal.grievanceOfficer.responseTime && <> · Response {legal.grievanceOfficer.responseTime}</>}
            </p>
          )}
        </div>

        {/* Bottom Bar */}
        <div className="mt-4 pt-4 border-t border-gray-800 flex flex-col sm:flex-row justify-between items-center gap-3 text-xs text-gray-500">
          <p>©{currentYear} {legal.legalName}. All Rights Reserved. B2B Raw Materials Platform</p>
          <div className="flex gap-4">
            <Link href="/privacy-policy" className="hover:text-white transition-colors">Privacy Policy</Link>
            <Link href="/terms" className="hover:text-white transition-colors">Terms & Conditions</Link>
            <Link href="/contact" className="hover:text-white transition-colors">Contact</Link>
            <Link href="/about" className="hover:text-white transition-colors">About</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}