'use client';

import { StaticLink } from '@/components/ui/static-link';
import { usePathname } from 'next/navigation';
import { Home, Lightbulb, Package, FolderOpen, User } from 'lucide-react';
import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';

// 关于页让位给案例页：转化路径上「看实证」优先于「看介绍」，
// 关于/新闻等仍可通过汉堡抽屉（header）到达。
const tabs = [
  { id: 'home', label: '首页', href: '/', icon: Home },
  { id: 'products', label: '产品', href: '/products', icon: Package },
  { id: 'solutions', label: '方案', href: '/solutions', icon: Lightbulb },
  { id: 'cases', label: '案例', href: '/cases', icon: FolderOpen },
  { id: 'contact', label: '联系', href: '/contact', icon: User },
];

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

  const isActive = (_href: string, id: string) => {
    if (id === 'home') {
      return pathname === '/';
    }
    if (id === 'contact') {
      return pathname === '/contact';
    }
    if (id === 'products') {
      return pathname === '/products' || pathname.startsWith('/products/');
    }
    if (id === 'solutions') {
      return pathname === '/solutions' || pathname.startsWith('/solutions/');
    }
    if (id === 'cases') {
      return pathname === '/cases' || pathname.startsWith('/cases/');
    }
    return false;
  };

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 md:hidden bg-bg-primary/95 backdrop-blur-xl border-t border-border-primary" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}>
      <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 duration-300',
                    active ? 'text-brand-ink' : 'text-text-muted group-hover:text-text-secondary'
                  )}
                />
                <span
                  className={cn(
                    'text-xs mt-1 transition-colors duration-300',
                    active ? 'text-brand-ink font-medium' : 'text-text-muted'
                  )}
                >
                  {tab.label}
                </span>
                {active && (
                  /* critique P2(2026-09-19)：双下划线为同状态冗余编码，只保留 tab 惯例的
                      底部指示条；spring 违反「内容入场禁回弹」，改 ease-ink 200ms。 */
                  <motion.div
                    layoutId="activeTab"
                    className="absolute -bottom-1 w-8 h-0.5 bg-brand"
                    transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}
                  />
                )}
              </div>
            </StaticLink>
          );
        })}
      </div>
    </nav>
  );
}