import Logo from "@/components/logo";
import Link from "next/link";
import { getWhatsAppUrl } from "@/lib/whatsapp";
import { WhatsAppIcon } from "@/components/ui/whatsapp-icon";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import PortableTextRenderer from "@/components/portable-text-renderer";
import {
  fetchSanityNavigation,
  fetchSanitySettings,
  getCurrentYear,
} from "@/sanity/lib/fetch";
import {
  getDynamicFetchOptions,
  type DynamicFetchOptions,
} from "@/sanity/lib/live";
import { NAVIGATION_QUERY_RESULT, SETTINGS_QUERY_RESULT } from "@/sanity.types";

type SanityLink = NonNullable<NAVIGATION_QUERY_RESULT[0]["links"]>[number];

type FooterProps = {
  settings: SETTINGS_QUERY_RESULT;
  navigation: NAVIGATION_QUERY_RESULT;
  year: number;
};

export function Footer({ settings, navigation, year }: FooterProps) {
  return (
    <footer className="bg-brand-dark text-brand-sand border-t border-brand-border/20">
      <div className="container mx-auto px-4 lg:px-8 pt-16 pb-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-10 lg:gap-8 pb-12 border-b border-white/10">
          {/* Brand Col */}
          <div className="lg:col-span-4 space-y-4">
            <Link href="/" aria-label="Vietnam Wedding Guide Home" className="inline-block">
              <span className="font-title text-2xl font-bold text-brand-sand tracking-wide">
                VIETNAM WEDDING GUIDE
              </span>
            </Link>
            <p className="text-sm text-stone-400 leading-relaxed max-w-sm">
              The premier editorial authority and bespoke planning advisory for destination weddings, luxury venues, and editorial celebrations across Vietnam.
            </p>
            <div className="pt-2">
              <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-gold/10 border border-brand-gold/30 text-xs text-brand-gold font-medium">
                <span className="w-1.5 h-1.5 rounded-full bg-brand-gold animate-pulse" />
                Concierge Advisory Available
              </span>
            </div>
          </div>

          {/* Guides Col */}
          <div className="lg:col-span-3 space-y-3">
            <h4 className="font-title text-base font-bold text-white uppercase tracking-wider">
              Wedding Guides
            </h4>
            <ul className="space-y-2 text-sm text-stone-400">
              <li>
                <Link href="/blog?tag=venue" className="hover:text-brand-gold transition-colors">
                  Venue Guides
                </Link>
              </li>
              <li>
                <Link href="/blog?tag=budget" className="hover:text-brand-gold transition-colors">
                  Budget Guides
                </Link>
              </li>
              <li>
                <Link href="/blog?tag=destination" className="hover:text-brand-gold transition-colors">
                  Destination Guides
                </Link>
              </li>
              <li>
                <Link href="/blog?tag=planning" className="hover:text-brand-gold transition-colors">
                  Planning Guides
                </Link>
              </li>
            </ul>
          </div>

          {/* Services Col */}
          <div className="lg:col-span-2 space-y-3">
            <h4 className="font-title text-base font-bold text-white uppercase tracking-wider">
              Advisory
            </h4>
            <ul className="space-y-2 text-sm text-stone-400">
              <li>
                <Link href="/services/private-consultant" className="hover:text-brand-gold transition-colors">
                  For Couples
                </Link>
              </li>
              <li>
                <Link href="/services/b2b" className="hover:text-brand-gold transition-colors">
                  For Professionals
                </Link>
              </li>
              <li>
                <Link href="/partnership" className="hover:text-brand-gold transition-colors">
                  Partnership
                </Link>
              </li>
              <li>
                <Link href="/about" className="hover:text-brand-gold transition-colors">
                  About the Founder
                </Link>
              </li>
            </ul>
          </div>

          {/* Direct Inquiries Col */}
          <div className="lg:col-span-3 space-y-3">
            <h4 className="font-title text-base font-bold text-white uppercase tracking-wider">
              Direct Contact
            </h4>
            <div className="space-y-2.5 text-sm text-stone-400">
              <p>
                <a
                  href={getWhatsAppUrl("Hello Nhi, I would like to inquire about wedding advisory in Vietnam.")}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 text-brand-gold hover:text-white font-medium transition-colors"
                >
                  <WhatsAppIcon className="w-3.5 h-3.5 fill-[#25D366] shrink-0" />
                  <span>WhatsApp Concierge &rarr;</span>
                </a>
              </p>
              <p>
                <a
                  href={`mailto:${settings?.contactEmail || "info@weddinginvietnam.com"}`}
                  className="hover:text-brand-gold transition-colors"
                >
                  {settings?.contactEmail || "info@weddinginvietnam.com"}
                </a>
              </p>
              <p className="text-xs text-stone-400">
                Vietnam Destination Wedding Network
              </p>
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="pt-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-stone-400">
          <div>
            &copy; {year} Vietnam Wedding Guide (weddinginvietnam.com). All rights reserved.
          </div>
          <div className="flex items-center gap-6">
            <Link href="/about" className="hover:text-brand-gold transition-colors">
              About
            </Link>
            <Link href="/services" className="hover:text-brand-gold transition-colors">
              Consulting
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
}

export function FooterFallback() {
  return (
    <footer aria-busy>
      <div className="bg-brand-dark pb-5 xl:pb-5 text-center">
        <div className="container h-24" />
      </div>
    </footer>
  );
}

export async function DynamicFooter() {
  const { perspective, stega } = await getDynamicFetchOptions();
  return <CachedFooter perspective={perspective} stega={stega} />;
}

export async function CachedFooter({
  perspective,
  stega,
}: DynamicFetchOptions) {
  const [settings, navigation, year] = await Promise.all([
    fetchSanitySettings({ perspective, stega }),
    fetchSanityNavigation({ perspective, stega }),
    getCurrentYear(),
  ]);

  return <Footer settings={settings} navigation={navigation} year={year} />;
}