'use client';

import { useState, useLayoutEffect, useRef } from 'react';
import { StaticLink } from '@/components/ui/static-link';
import { usePathname, useSearchParams } 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 searchParams = useSearchParams();
  const [hash, setHash] = useState('');
  const isInitializedRef = useRef(false);

  useLayoutEffect(() => {
    if (!isInitializedRef.current) {
      isInitializedRef.current = true;
      setHash(window.location.hash.slice(1));
    }
    
    const handleHashChange = () => {
      setHash(window.location.hash.slice(1));
    };
    
    window.addEventListener('hashchange', handleHashChange);
    return () => window.removeEventListener('hashchange', handleHashChange);
  }, []);

  const isActive = (_href: string, id: string) => {
    if (id === 'contact') {
      return pathname === '/contact';
    }
    
    if (pathname === '/') {
      const section = searchParams.get('section');
      const currentSection = section || hash;
      
      if (id === 'home') {
        return !currentSection || currentSection === 'home';
      }
      return currentSection === id;
    }
    
    return false;
  };

  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, tab.id);

          return (
            <StaticLink
              key={tab.id}
              href={tab.href}
              className="flex flex-col items-center justify-center flex-1 h-full relative group min-h-12"
            >
              <div className="relative flex flex-col items-center justify-center py-2">
                <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-1 w-8 h-0.5 bg-[#C41E3A] rounded-full"
                    transition={{ type: 'spring', stiffness: 380, damping: 30 }}
                  />
                )}
              </div>
            </StaticLink>
          );
        })}
      </div>
    </nav>
  );
}