'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

interface BottomNavProps {
  activeTab: 'home' | 'buses' | 'trips' | 'messages' | 'more';
}

export default function BottomNav({ activeTab }: BottomNavProps) {
  const tabs = [
    {
      id: 'home',
      label: 'الرئيسية',
      icon: 'ri-home-5-line',
      activeIcon: 'ri-home-5-fill',
      href: '/mobile/home',
    },
    {
      id: 'buses',
      label: 'الباصات',
      icon: 'ri-bus-2-line',
      activeIcon: 'ri-bus-2-fill',
      href: '/mobile/buses',
    },
    {
      id: 'trips',
      label: 'رحلاتي',
      icon: 'ri-route-line',
      activeIcon: 'ri-route-fill',
      href: '/mobile/trips',
    },
    {
      id: 'messages',
      label: 'المحادثات',
      icon: 'ri-chat-3-line',
      activeIcon: 'ri-chat-3-fill',
      href: '/mobile/contact',
    },
    {
      id: 'more',
      label: 'المزيد',
      icon: 'ri-grid-line',
      activeIcon: 'ri-grid-fill',
      href: '/mobile/settings',
    },
  ];

  return (
    <>
      <style>{`
        @keyframes popIn {
          0% { transform: scale(0.7) translateY(4px); opacity: 0; }
          60% { transform: scale(1.15) translateY(-2px); }
          100% { transform: scale(1) translateY(0); opacity: 1; }
        }
        @keyframes slideUp {
          from { transform: translateY(100%); opacity: 0; }
          to { transform: translateY(0); opacity: 1; }
        }
        .nav-bar {
          animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
          background: rgba(255,255,255,0.92);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
        }
        .tab-active-icon {
          animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
        .tab-pill {
          transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
      `}</style>

      <nav
        className="nav-bar fixed bottom-0 left-0 right-0 z-50 border-t border-slate-100/80"
        style={{
          maxWidth: '390px',
          margin: '0 auto',
          boxShadow: '0 -8px 32px rgba(0,0,0,0.08)',
        }}
      >
        <div className="flex items-center justify-around px-2 pt-2 pb-1">
          {tabs.map((tab) => {
            const isActive = activeTab === tab.id;
            return (
              <Link
                key={tab.id}
                href={tab.href}
                className="flex flex-col items-center justify-center flex-1 cursor-pointer group"
              >
                <div className="relative flex flex-col items-center gap-1">
                  {isActive && (
                    <div
                      className="absolute -top-1 left-1/2 -translate-x-1/2 rounded-full"
                      style={{
                        width: '44px',
                        height: '44px',
                        background: 'linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%)',
                        filter: 'blur(0px)',
                        zIndex: 0,
                        borderRadius: '14px',
                      }}
                    />
                  )}

                  <div
                    className="tab-pill relative z-10 flex items-center justify-center"
                    style={{
                      width: '44px',
                      height: '44px',
                      borderRadius: '14px',
                      background: isActive
                        ? 'linear-gradient(135deg, #059669 0%, #10b981 100%)'
                        : 'transparent',
                      boxShadow: isActive
                        ? '0 4px 14px rgba(16,185,129,0.35)'
                        : 'none',
                      transform: isActive ? 'translateY(-6px)' : 'translateY(0)',
                    }}
                  >
                    <i
                      className={`${isActive ? tab.activeIcon : tab.icon} ${
                        isActive ? 'tab-active-icon text-white' : 'text-slate-400 group-hover:text-slate-600'
                      }`}
                      style={{ fontSize: '22px', transition: 'color 0.2s' }}
                    />
                  </div>

                  <span
                    className="text-[10px] font-medium transition-all duration-300"
                    style={{
                      color: isActive ? '#059669' : '#94a3b8',
                      fontWeight: isActive ? '700' : '500',
                      transform: isActive ? 'translateY(-4px)' : 'translateY(0)',
                      transition: 'all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)',
                    }}
                  >
                    {tab.label}
                  </span>
                </div>
              </Link>
            );
          })}
        </div>

        <div className="bg-transparent" style={{ height: '20px' }} />
      </nav>
    </>
  );
}