import type { Footer } from '@/payload-types'

import { FooterMenu } from '@/components/Footer/menu'
import { getCachedGlobal } from '@/utilities/getGlobals'
import { Facebook, Instagram, Leaf, Mail, MapPin, Megaphone, Phone, Users } from 'lucide-react'
import Link from 'next/link'
import React, { Suspense } from 'react'

const socialLinks = [
  { href: '#', icon: Facebook, label: 'Facebook' },
  { href: '#', icon: Megaphone, label: 'Brand' },
  { href: '#', icon: Instagram, label: 'Instagram' },
  { href: '#', icon: Users, label: 'Community' },
]

const supportLinks = [
  { href: '/find-order', label: 'Find My Order' },
  { href: '/shop', label: 'Shop' },
  { href: '/login', label: 'Customer Login' },
  { href: '/contact', label: 'Contact Us' },
]

const legalLinks = [
  { href: '/legal', label: 'Legal' },
  { href: '/shipping-returns', label: 'Shipping & Returns' },
  { href: '/support', label: 'Support' },
]

const contactItems = [
  {
    icon: Phone,
    text: 'Kontak utama akan dikonfigurasi di tahap berikutnya.',
  },
  {
    icon: Mail,
    text: 'Gunakan halaman contact untuk pertanyaan dan penawaran.',
  },
  {
    icon: MapPin,
    text: 'Berbasis di kawasan Cipanas, Cianjur, Jawa Barat.',
  },
]

function FooterIconLink({
  href,
  label,
  children,
}: {
  children: React.ReactNode
  href: string
  label: string
}) {
  const className = 'text-primary-foreground/85 transition-colors hover:text-primary-foreground'

  if (href === '#') {
    return (
      <span aria-disabled="true" aria-label={label} className={className}>
        {children}
      </span>
    )
  }

  return (
    <Link aria-label={label} className={className} href={href}>
      {children}
    </Link>
  )
}

function FooterTextLink({ href, label }: { href: string; label: string }) {
  const className = 'transition-colors hover:text-primary-foreground'

  if (href === '#') {
    return (
      <span aria-disabled="true" className={className}>
        {label}
      </span>
    )
  }

  return (
    <Link className={className} href={href}>
      {label}
    </Link>
  )
}

export async function Footer() {
  const footer: Footer = await getCachedGlobal('footer', 1)()
  const menu = footer.navItems || []
  const currentYear = new Date().getFullYear()
  const skeleton = 'w-full h-6 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700'
  const brandName = 'Bunga Mekarsari'

  return (
    <footer className="bg-primary py-14 text-primary-foreground">
      <div className="container">
        <div className="mb-12 grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-4 lg:gap-12">
          <div className="space-y-6">
            <Link className="flex items-center gap-3 text-primary-foreground" href="/">
              <span className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-primary-foreground/15 bg-primary-foreground/5">
                <Leaf className="h-4 w-4" strokeWidth={2.25} />
              </span>
              <span className="font-serif text-2xl font-semibold tracking-tight">{brandName}</span>
            </Link>

            <p className="max-w-xs text-sm leading-6 text-primary-foreground/80">
              Mitra suplai tanaman hias dan kebutuhan hijau untuk retail maupun proyek, dengan
              jaringan nursery yang terus berkembang.
            </p>

            <div className="flex gap-4">
              {socialLinks.map(({ href, icon: Icon, label }) => (
                <FooterIconLink href={href} key={label} label={label}>
                  <Icon className="h-5 w-5" />
                </FooterIconLink>
              ))}
            </div>
          </div>

          <Suspense
            fallback={
              <div className="flex h-[188px] w-[200px] flex-col gap-2">
                <div className={skeleton} />
                <div className={skeleton} />
                <div className={skeleton} />
                <div className={skeleton} />
                <div className={skeleton} />
                <div className={skeleton} />
              </div>
            }
          >
            <FooterMenu menu={menu} />
          </Suspense>

          <div className="space-y-6">
            <h4 className="text-xs font-semibold uppercase tracking-[0.18em] text-primary-foreground/75">
              Support
            </h4>
            <ul className="space-y-3">
              {supportLinks.map((link) => (
                <li key={link.label}>
                  <Link
                    className="text-sm text-primary-foreground/80 transition-colors hover:text-primary-foreground"
                    href={link.href}
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div className="space-y-6">
            <h4 className="text-xs font-semibold uppercase tracking-[0.18em] text-primary-foreground/75">
              Contact
            </h4>
            <ul className="space-y-4">
              {contactItems.map(({ icon: Icon, text }) => (
                <li className="flex items-start gap-3 text-sm text-primary-foreground/80" key={text}>
                  <Icon className="mt-0.5 h-4 w-4 shrink-0" />
                  <span className="leading-6">{text}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="flex flex-col items-center justify-between gap-4 border-t border-primary-foreground/15 pt-8 text-sm text-primary-foreground/70 md:flex-row">
          <p>{currentYear} © All rights reserved.</p>
          <div className="flex flex-wrap justify-center gap-6">
            {legalLinks.map((link) => (
              <FooterTextLink href={link.href} key={link.label} label={link.label} />
            ))}
          </div>
        </div>
      </div>
    </footer>
  )
}