'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useEffect, useState } from 'react'
import { BrandLogo } from '@/components/shared/BrandLogo'
import { BRAND_NAME } from '@/lib/brand'
import { backend, type BackendSiteAboutContent } from '@/lib/backend'

const links = {
  业务服务: [
    { label: '规划咨询', href: '/consulting' },
    { label: '培训课程', href: '/courses' },
    { label: '活动报名', href: '/events' },
    { label: '数据服务', href: '/data' },
    { label: '智能体产品', href: '/agents' },
    { label: '专家咨询', href: '/experts' },
  ],
  关于研究院: [
    { label: '院所简介', href: '/about' },
    { label: '资质荣誉', href: '/about#qualifications' },
    { label: '合作伙伴', href: '/about#partners' },
    { label: '新闻资讯', href: '/news' },
  ],
}

export function Footer() {
  const pathname = usePathname()
  const [contact, setContact] = useState<BackendSiteAboutContent | null>(null)

  useEffect(() => {
    void backend.siteAbout()
      .then((about) => setContact(about.content))
      .catch(() => setContact(null))
  }, [])

  if (pathname.startsWith('/admin') || pathname.startsWith('/staff') || pathname.startsWith('/account') || pathname.startsWith('/cart') || pathname.startsWith('/checkout') || pathname.startsWith('/consulting/apply/success') || pathname.startsWith('/login-required') || pathname.startsWith('/login') || pathname.startsWith('/onboarding')) return null

  const footerDescription = contact?.serviceDescription || contact?.heroDescription || ''
  const contactRows = [
    contact?.contactAddress ? `地址：${contact.contactAddress}` : '',
    contact?.contactPhone ? `电话：${contact.contactPhone}` : '',
    contact?.contactEmail ? `邮箱：${contact.contactEmail}` : '',
    contact?.contactHours ? `时间：${contact.contactHours}` : '',
  ].filter(Boolean)

  return (
    <footer className="bg-[#0b0e17]">
      <div className="mx-auto max-w-[1280px] px-6 pb-7 pt-12">
        <div className="grid gap-10 lg:grid-cols-[1.15fr_1fr]">
          <div>
            <div className="flex items-center gap-3">
              <BrandLogo className="h-11 w-11 rounded-full bg-white" />
              <div>
                <div className="text-[15px] font-bold text-white">{BRAND_NAME}</div>
              </div>
            </div>
            {footerDescription && <p className="mt-3 max-w-sm text-[13px] leading-7 text-white/45">{footerDescription}</p>}
            {contactRows.length ? <div className="mt-5 space-y-1 text-[13px] text-white/45">
              {contactRows.map((row) => <div key={row}>{row}</div>)}
            </div> : <div className="mt-5 text-[13px] text-white/35">联系信息待后台配置</div>}
          </div>

          <div className="grid grid-cols-2 gap-8 md:gap-12">
            {Object.entries(links).map(([group, items]) => (
              <div key={group}>
                <h4 className="mb-3 text-[13px] font-bold text-white">{group}</h4>
                <ul className="space-y-2">
                  {items.map((item) => (
                    <li key={item.href}>
                      <Link href={item.href} className="text-[13px] text-white/45 hover:text-white">
                        {item.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        <div className="mt-10 flex flex-col justify-between gap-3 border-t border-white/10 pt-5 text-xs text-white/30 md:flex-row">
          <p>© 2026 {BRAND_NAME} · 版权所有</p>
          <div className="flex flex-wrap gap-5">
            <Link href="/privacy" className="hover:text-white/70">隐私政策</Link>
            <Link href="/terms" className="hover:text-white/70">使用条款</Link>
            <span>辽ICP备2024000000号</span>
          </div>
        </div>
      </div>
    </footer>
  )
}
