import { getCachedGlobal } from '@/utilities/getGlobals'
import Link from 'next/link'
import React from 'react'
import type { Footer } from '@/payload-types'
import { CMSLink } from '@/components/Link'
import { Logo } from '@/components/Logo/Logo'

export async function Footer() {
  const footerData = await getCachedGlobal("footer", 1)() as unknown as Footer
  const columns = footerData?.columns || []
  const navItems = footerData?.navItems || []
  const hasColumns = columns.length > 0

  const bottomLeft = (footerData?.bottomLeftText || '© {year} Fiber Direkt. Alla rättigheter förbehållna.').replace('{year}', new Date().getFullYear().toString())
  const bottomRight = footerData?.bottomRightText || 'Svenskt datacenter · ISO 27001 · ISO 14001'

  return (
    <footer className="mt-auto bg-fd-navy text-white">
      <div className="max-w-[1200px] mx-auto px-6 md:px-8 py-12 md:py-16 flex flex-col gap-10">
        {/* Top section: Logo + columns or simple nav */}
        <div className="flex flex-col lg:flex-row gap-10 lg:gap-16">
          {/* Logo column */}
          <div className="flex-shrink-0">
            <Link className="flex items-center" href="/">
              <Logo variant="white" className="max-w-[120px]" />
            </Link>
          </div>

          {/* Sitemap columns */}
          {hasColumns ? (
            <div className="flex-1 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 md:gap-10">
              {columns.map((column, colIndex) => (
                <div key={colIndex} className="flex flex-col gap-4">
                  <span className="font-joey-bold text-fd-yellow text-base md:text-lg">
                    {column.heading}
                  </span>
                  <nav className="flex flex-col gap-2.5">
                    {column.links?.map(({ link }, linkIndex) => (
                      <CMSLink
                        className="font-joey text-white/70 hover:text-white text-sm md:text-base transition-colors no-underline"
                        key={linkIndex}
                        {...link}
                      />
                    ))}
                  </nav>
                </div>
              ))}
            </div>
          ) : (
            <nav className="flex flex-col md:flex-row md:items-center gap-4 md:ml-auto">
              {navItems.map(({ link }, i) => (
                <CMSLink
                  className="font-joey text-white hover:text-fd-yellow transition-colors no-underline"
                  key={i}
                  {...link}
                />
              ))}
            </nav>
          )}
        </div>

        {/* Divider */}
        <hr className="border-white/20" />

        {/* Bottom row */}
        <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
          <p className="font-joey text-white/60 text-sm">{bottomLeft}</p>
          <p className="font-joey text-white/60 text-sm">{bottomRight}</p>
        </div>
      </div>
    </footer>
  )
}