'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Home, Briefcase, Package, FileText, User } from 'lucide-react';
import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';

const tabs = [
  { id: 'home', label: '首页', href: '/', icon: Home },
  { id: 'services', label: '服务', href: '/#services', icon: Briefcase },
  { id: 'products', label: '产品', href: '/#products', icon: Package },
  { id: 'news', label: '新闻', href: '/#news', icon: FileText },
  { id: 'contact', label: '联系', href: '/#contact', icon: User },
];

export function MobileTabBar() {
  const pathname = usePathname();

  const isActive = (href: string) => {
    if (href === '/') {
      return pathname === '/';
    }
    const basePath = href.split('#')[0] || href;
    return pathname.startsWith(basePath);
  };

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 md:hidden bg-white/95 backdrop-blur-xl border-t border-[#E5E5E5] safe-area-inset-bottom">
      <div className="flex items-center justify-around h-16">
        {tabs.map((tab) => {
          const Icon = tab.icon;
          const active = isActive(tab.href);

          return (
            <Link
              key={tab.id}
              href={tab.href}
              className="flex flex-col items-center justify-center flex-1 h-full relative group"
            >
              <div className="relative flex flex-col items-center justify-center">
                <Icon
                  className={cn(
                    'w-6 h-6 transition-colors',
                    active ? 'text-[#C41E3A]' : 'text-[#5C5C5C] group-hover:text-[#1C1C1C]'
                  )}
                />
                <span
                  className={cn(
                    'text-xs mt-1 transition-colors',
                    active ? 'text-[#C41E3A] font-medium' : 'text-[#5C5C5C]'
                  )}
                >
                  {tab.label}
                </span>
                {active && (
                  <motion.div
                    layoutId="activeTab"
                    className="absolute -bottom-2 w-8 h-0.5 bg-[#C41E3A] rounded-full"
                    transition={{ type: 'spring', stiffness: 380, damping: 30 }}
                  />
                )}
              </div>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}