import React from 'react'
import { useLocation, useNavigate } from '@tanstack/react-router'
import { p, div } from 'web-components'
import { Home, Store, Zap, RotateCcw, User } from 'lucide-react'

interface TabItem {
  name: string
  path: string
  label: string
  icon: React.ReactNode
  iconActive: React.ReactNode
  isCenter?: boolean
}

export function BottomNavigation() {
  const location = useLocation()
  const navigate = useNavigate()
  const currentPath = location.pathname

  const tabs: TabItem[] = [
    {
      name: 'home',
      path: '/home',
      label: 'Home',
      icon: <Home className="h-5 w-5" />,
      iconActive: <Home className="h-5 w-5 fill-current" />,
    },
    {
      name: 'stores',
      path: '/stores',
      label: 'Stores',
      icon: <Store className="h-5 w-5" />,
      iconActive: <Store className="h-5 w-5 fill-current" />,
    },
    {
      name: 'flash',
      path: '/flash',
      label: '1 Hr Delivery',
      icon: <Zap className="h-6 w-6" />,
      iconActive: <Zap className="h-6 w-6 fill-current" />,
      isCenter: true,
    },
    {
      name: 'order-again',
      path: '/me/orders',
      label: 'Order Again',
      icon: <RotateCcw className="h-5 w-5" />,
      iconActive: <RotateCcw className="h-5 w-5 fill-current" />,
    },
    {
      name: 'me',
      path: '/me',
      label: 'Me',
      icon: <User className="h-5 w-5" />,
      iconActive: <User className="h-5 w-5 fill-current" />,
    },
  ]

  const isActive = (path: string) => {
    if (path === '/home') return currentPath === '/home' || currentPath.startsWith('/home/')
    if (path === '/stores') return currentPath === '/stores' || currentPath.startsWith('/stores/')
    if (path === '/flash') return currentPath === '/flash' || currentPath.startsWith('/flash/')
    if (path === '/me/orders') return currentPath === '/me/orders' || currentPath.startsWith('/me/orders/')
    if (path === '/me') return currentPath === '/me' || (currentPath.startsWith('/me/') && !currentPath.startsWith('/me/orders/'))
    return currentPath === path || currentPath.startsWith(`${path}/`)
  }

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 border-t border-gray-200 bg-white pb-safe">
      <div className="flex h-16 items-center justify-around px-2">
        {tabs.map((tab) => {
          const active = isActive(tab.path)

          if (tab.isCenter) {
            // Center elevated button for Flash Delivery
            return (
              <div
                key={tab.name}
                onClick={() => navigate({ to: tab.path })}
                className="relative -top-3 flex flex-col items-center"
              >
                <div
                  className={`flex h-14 w-14 items-center justify-center rounded-full border-4 border-white shadow-lg transition-all ${
                    'bg-gradient-to-br from-brand-400 to-brand-600'
                  }`}
                >
                  <span className={active ? 'text-white' : 'text-white/80'}>{tab.icon}</span>
                </div>
                <p
                  className={`mt-0.5 text-[10px] font-bold ${active ? 'text-brand-600' : 'text-gray-500'}`}
                >
                  {tab.label}
                </p>
              </div>
            )
          }

          return (
            <div
              key={tab.name}
              onClick={() => navigate({ to: tab.path })}
              className="flex flex-1 flex-col items-center justify-center py-2"
            >
              <span className={active ? 'text-brand-600' : 'text-gray-500'}>
                {active ? tab.iconActive : tab.icon}
              </span>
              <p
                className={`mt-1 text-xs font-medium ${active ? 'text-brand-600' : 'text-gray-500'}`}
              >
                {tab.label}
              </p>
            </div>
          )
        })}
      </div>
    </nav>
  )
}
