import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import {
  Building2,
  Phone,
  Mail,
  MapPin,
  Clock,
  MessageCircle,
  Share2,
  Linkedin as LinkedinIcon,
  ArrowRight,
} from 'lucide-react';
import {
  COMPANY_INFO,
  FOOTER_LINKS,
  SOCIAL_MEDIA,
} from '../lib/constants';

/**
 * Footer 组件 - 企业官网页脚
 */

// 动画变体配置
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.5 },
  },
};

// 图标映射
const iconMap: Record<string, React.ComponentType<{ size?: number; className?: string }>> = {
  Wechat: MessageCircle,
  Weibo: Share2,
  Linkedin: LinkedinIcon,
};

/**
 * 联系方式项组件
 */
const ContactItem: React.FC<{
  icon: React.ComponentType<{ size?: number; className?: string }>;
  title: string;
  content: string;
}> = ({ icon: Icon, title, content }) => (
  <div className="flex items-start gap-3">
    <Icon size={18} className="text-accent mt-0.5 flex-shrink-0" />
    <div>
      <p className="text-xs text-gray-400 mb-0.5">{title}</p>
      <p className="text-sm text-gray-200">{content}</p>
    </div>
  </div>
);

/**
 * 链接列组件
 */
const LinkColumn: React.FC<{
  title: string;
  links: Array<{ label: string; path: string }>;
}> = ({ title, links }) => (
  <div>
    <h3 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">
      {title}
    </h3>
    <ul className="space-y-3">
      {links.map((link) => (
        <li key={link.path}>
          <Link
            to={link.path}
            className="flex items-center gap-2 text-sm text-gray-300 hover:text-accent transition-colors duration-200 group"
          >
            <ArrowRight
              size={14}
              className="opacity-0 -ml-4 group-hover:opacity-100 group-hover:ml-0 transition-all duration-200"
            />
            <span className="group-hover:translate-x-1 transition-transform duration-200">
              {link.label}
            </span>
          </Link>
        </li>
      ))}
    </ul>
  </div>
);

/**
 * Footer 组件
 */
export const Footer: React.FC = () => {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-primary-dark text-white" role="contentinfo">
      {/* 主内容区域 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
        <motion.div
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12"
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
        >
          {/* 企业信息 */}
          <motion.div className="lg:col-span-2 space-y-6" variants={itemVariants}>
            {/* Logo */}
            <Link to="/" className="flex items-center gap-3 group" aria-label="返回首页">
              <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-accent text-primary-dark">
                <Building2 size={28} />
              </div>
              <div>
                <span className="text-xl font-bold text-white group-hover:text-accent transition-colors">
                  示例集团
                </span>
                <p className="text-xs text-gray-400">Chengyu Group</p>
              </div>
            </Link>

            {/* 企业简介 */}
            <p className="text-sm text-gray-300 leading-relaxed max-w-sm">
              {COMPANY_INFO.description}
            </p>

            {/* 联系方式 */}
            <div className="space-y-3 pt-2">
              <ContactItem
                icon={MapPin}
                title="总部地址"
                content={COMPANY_INFO.headquarters}
              />
              <ContactItem
                icon={Phone}
                title="服务热线"
                content={COMPANY_INFO.phone}
              />
              <ContactItem
                icon={Mail}
                title="商务邮箱"
                content={COMPANY_INFO.email}
              />
              <ContactItem
                icon={Clock}
                title="工作时间"
                content={COMPANY_INFO.workingHours}
              />
            </div>
          </motion.div>

          {/* 产品服务 */}
          <motion.div variants={itemVariants}>
            <LinkColumn title="产品服务" links={FOOTER_LINKS.products} />
          </motion.div>

          {/* 公司信息 */}
          <motion.div variants={itemVariants}>
            <LinkColumn title="关于我们" links={FOOTER_LINKS.company} />
          </motion.div>

          {/* 社交媒体 */}
          <motion.div variants={itemVariants}>
            <h3 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">
              关注我们
            </h3>
            <p className="text-xs text-gray-400 mb-4">
              了解更多企业动态
            </p>
            <div className="flex flex-wrap gap-3">
              {SOCIAL_MEDIA.map((social) => {
                const Icon = iconMap[social.icon] || MessageCircle;
                return (
                  <motion.a
                    key={social.id}
                    href={social.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center gap-2 px-3 py-2 bg-white/10 rounded-lg text-sm text-gray-300 hover:bg-accent hover:text-primary-dark transition-all duration-200"
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                    aria-label={social.label}
                  >
                    <Icon size={18} />
                    <span className="hidden sm:inline">{social.label}</span>
                  </motion.a>
                );
              })}
            </div>
          </motion.div>
        </motion.div>
      </div>

      {/* 底部版权栏 */}
      <div className="border-t border-white/10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            {/* 版权信息 */}
            <motion.p
              className="text-sm text-gray-400"
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              viewport={{ once: true }}
            >
              © {currentYear} {COMPANY_INFO.fullName} 版权所有
            </motion.p>

            {/* 备案和链接 */}
            <motion.div
              className="flex flex-wrap items-center justify-center gap-4 text-sm text-gray-400"
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              viewport={{ once: true }}
              transition={{ delay: 0.1 }}
            >
              <span>京ICP备XXXXXXXX号</span>
              <span className="hidden sm:inline">|</span>
              <Link
                to="/privacy"
                className="hover:text-accent transition-colors duration-200"
              >
                隐私政策
              </Link>
              <span className="hidden sm:inline">|</span>
              <Link
                to="/terms"
                className="hover:text-accent transition-colors duration-200"
              >
                使用条款
              </Link>
            </motion.div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;