import React from 'react';
import { Home, ShoppingBag, Grid3X3, Phone, Search, User } from 'lucide-react';
import { CustomerUser } from './AuthModal';

interface MobileBottomNavProps {
  currentView: string;
  onNavigate: (view: string) => void;
  cartCount: number;
  onCartClick: () => void;
  theme?: string;
  customerUser?: CustomerUser | null;
  onOpenAuth?: (tab?: 'login' | 'register') => void;
}

const THEME_COLORS: Record<string, { primary: string; glow: string; bg: string; activeBg: string }> = {
  '01': { primary: '#634C9F', glow: 'rgba(99,76,159,0.35)',   bg: 'rgba(99,76,159,0.12)',  activeBg: 'linear-gradient(135deg,#634C9F,#8B5CF6)' },
  '02': { primary: '#1E1B4B', glow: 'rgba(30,27,75,0.3)',    bg: 'rgba(30,27,75,0.1)',    activeBg: 'linear-gradient(135deg,#1E1B4B,#4338CA)' },
  '03': { primary: '#E91E63', glow: 'rgba(233,30,99,0.35)',  bg: 'rgba(233,30,99,0.1)',   activeBg: 'linear-gradient(135deg,#E91E63,#F472B6)' },
  '04': { primary: '#F37021', glow: 'rgba(243,112,33,0.35)', bg: 'rgba(243,112,33,0.1)',  activeBg: 'linear-gradient(135deg,#F37021,#FB923C)' },
  '05': { primary: '#1A1A1A', glow: 'rgba(26,26,26,0.25)',  bg: 'rgba(26,26,26,0.08)',   activeBg: 'linear-gradient(135deg,#1A1A1A,#374151)' },
};

const MobileBottomNav: React.FC<MobileBottomNavProps> = ({
  currentView, onNavigate, cartCount, onCartClick, theme = '01', customerUser, onOpenAuth,
}) => {
  const tc = THEME_COLORS[theme] || THEME_COLORS['01'];

  const tabs = [
    { id: 'home',     label: 'Home',     icon: Home },
    { id: 'shop',     label: 'Shop',     icon: Grid3X3 },
    { id: 'trending', label: 'Trending', icon: Search },
    { id: 'contact',  label: 'Contact',  icon: Phone },
  ];

  const isActive = (id: string) =>
    currentView === id || (id === 'home' && (!currentView || currentView === 'home'));

  return (
    <>
      {/* Bottom spacer — height equals nav bar + device safe area */}
      <div
        className="block md:hidden"
        style={{ height: 'calc(64px + env(safe-area-inset-bottom, 0px))' }}
      />

      <nav
        className="fixed bottom-0 inset-x-0 z-50 block md:hidden"
        style={{
          /* Solid background — prevents any scroll bleed-through */
          background: '#ffffff',
          borderTop: `1.5px solid ${tc.bg}`,
          boxShadow: '0 -2px 16px rgba(0,0,0,0.07)',
          /*
           * GPU compositing trick:
           * Forces the nav onto its own compositor layer so the browser
           * never repaints it during page scroll — eliminates the "jitter".
           */
          transform: 'translate3d(0,0,0)',
          WebkitTransform: 'translate3d(0,0,0)',
          willChange: 'transform',
          /* Bottom safe area for iPhone home indicator */
          paddingBottom: 'env(safe-area-inset-bottom, 0px)',
          isolation: 'isolate',
        }}
      >
        <div className="flex items-stretch h-16 px-1">
          {tabs.map(tab => {
            const active = isActive(tab.id);
            return (
              <button
                key={tab.id}
                onClick={() => onNavigate(tab.id)}
                className="flex flex-col items-center justify-center gap-0.5 flex-1 select-none active:opacity-60 transition-opacity duration-75"
              >
                <div
                  className="w-9 h-9 rounded-2xl flex items-center justify-center transition-all duration-200"
                  style={active ? {
                    background: tc.activeBg,
                    boxShadow: `0 3px 10px ${tc.glow}`,
                  } : {}}
                >
                  <tab.icon
                    size={19}
                    style={{ color: active ? '#fff' : '#94a3b8' }}
                    strokeWidth={active ? 2.5 : 1.8}
                  />
                </div>
                <span
                  className="text-[9px] font-bold tracking-wide"
                  style={{ color: active ? tc.primary : '#94a3b8' }}
                >
                  {tab.label}
                </span>
              </button>
            );
          })}

          {/* Account / Login */}
          <button
            onClick={() => onOpenAuth?.(customerUser ? 'login' : 'login')}
            className="flex flex-col items-center justify-center gap-0.5 flex-1 select-none active:opacity-60 transition-opacity duration-75"
          >
            <div
              className="w-9 h-9 rounded-2xl flex items-center justify-center transition-all duration-200 relative"
              style={customerUser ? {
                background: tc.activeBg,
                boxShadow: `0 3px 10px ${tc.glow}`,
              } : {}}
            >
              {customerUser ? (
                <span className="text-white text-[11px] font-black">
                  {customerUser.name.charAt(0).toUpperCase()}
                </span>
              ) : (
                <User size={19} style={{ color: '#94a3b8' }} strokeWidth={1.8} />
              )}
            </div>
            <span
              className="text-[9px] font-bold tracking-wide max-w-[40px] truncate"
              style={{ color: customerUser ? tc.primary : '#94a3b8' }}
            >
              {customerUser ? customerUser.name.split(' ')[0] : 'Account'}
            </span>
          </button>

          {/* Cart */}
          <button
            onClick={onCartClick}
            className="flex flex-col items-center justify-center gap-0.5 flex-1 select-none active:opacity-60 transition-opacity duration-75 relative"
          >
            <div
              className="w-9 h-9 rounded-2xl flex items-center justify-center transition-all duration-200 relative"
              style={currentView === 'cart' ? {
                background: tc.activeBg,
                boxShadow: `0 3px 10px ${tc.glow}`,
              } : {}}
            >
              <ShoppingBag
                size={19}
                style={{ color: currentView === 'cart' ? '#fff' : '#94a3b8' }}
                strokeWidth={currentView === 'cart' ? 2.5 : 1.8}
              />
              {cartCount > 0 && (
                <span
                  className="absolute -top-1 -right-1 min-w-[16px] h-4 px-0.5 rounded-full text-white text-[8px] font-black flex items-center justify-center leading-none"
                  style={{ background: tc.activeBg, boxShadow: `0 2px 6px ${tc.glow}` }}
                >
                  {cartCount > 99 ? '99+' : cartCount}
                </span>
              )}
            </div>
            <span
              className="text-[9px] font-bold tracking-wide"
              style={{ color: currentView === 'cart' ? tc.primary : '#94a3b8' }}
            >
              Cart
            </span>
          </button>
        </div>
      </nav>
    </>
  );
};

export default MobileBottomNav;
