import React, { useState, useEffect } from 'react';
import { Button } from './ui/button';
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
import { Badge } from './ui/badge';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
  DropdownMenuLabel,
} from './ui/dropdown-menu';
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from './ui/sheet';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
import { navigateTo } from './Router';
import { useAuth } from './AuthContext';
import { useCart } from './CartContext';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { PrimaryCTAButton } from './PrimaryCTAButton';
import { StandardCTAButton } from './StandardCTAButton';
import klcLogo from 'figma:asset/e98caa8afd8d11246bbff1dde75bbaae6f6a0894.png';
import {
  Menu,
  ChevronDown,
  ChevronRight,
  Building2,
  User,
  Settings,
  LogOut,
  LayoutDashboard,
  Users,
  Target,
  Award,
  Lightbulb,
  GraduationCap,
  BookOpen,
  Video,
  FileText,
  Eye,
  Heart,
  MapPin,
  Calendar,
  Play,
  Home,
  Monitor,
  Headphones,
  Globe,
  Download,
  Clock,
  TrendingUp,
  Star,
  BookMarked,
  Podcast,
  Building,
  ShoppingCart,
  ArrowRight
} from 'lucide-react';

interface NavigationProps {
  currentPage?: string;
}

interface NavLink {
  label: string;
  href?: string;
  items?: { label: string; href: string; description?: string; icon?: any }[];
  icon?: any;
}

const navigationItems: NavLink[] = [
  {
    label: 'Services',
    items: [
      { 
        label: 'Leadership Development', 
        href: '/services/leadership-development', 
        description: 'Executive and senior leadership programs',
        icon: Target
      },
      { 
        label: 'Management Development', 
        href: '/services/management-development', 
        description: 'Middle management and team leader training',
        icon: Users
      },
      { 
        label: 'Culture Competence', 
        href: '/services/culture-competence', 
        description: 'Building inclusive and high-performance cultures',
        icon: Heart
      },
      { 
        label: 'Consulting', 
        href: '/services/consulting', 
        description: 'Strategic organizational transformation',
        icon: Lightbulb
      },
      { 
        label: 'Executive Coaching', 
        href: '/services/executive-coaching', 
        description: 'Personalized leadership development',
        icon: GraduationCap
      }
    ]
  },
  {
    label: 'About Us',
    items: [
      { 
        label: 'Our Vision', 
        href: '/about/our-vision', 
        description: 'Our mission to transform leadership globally',
        icon: Eye
      },
      { 
        label: 'Our Impact', 
        href: '/about/our-impact', 
        description: 'Real results and measurable outcomes',
        icon: TrendingUp
      },
      { 
        label: 'Our Expertise', 
        href: '/about/our-expertise', 
        description: 'Industry-leading knowledge and experience',
        icon: Star
      }
    ]
  },
  {
    label: 'Learning Facility',
    href: '/services/learning-facility'
  },
  {
    label: 'Resources',
    items: [
      { 
        label: 'Article Blog', 
        href: '/learning/articles', 
        description: 'Latest insights and thought leadership',
        icon: BookMarked
      },
      { 
        label: 'Webcast', 
        href: '/learning/webcast', 
        description: 'Live and recorded leadership sessions',
        icon: Podcast
      }
    ]
  },
  {
    label: 'Online Courses',
    href: '/learning-online'
  },
  {
    label: 'Contact Us',
    href: '/contact'
  }
];

const signInOptions = [
  { 
    label: 'Corporate HR', 
    href: '/signin/corporate-hr',
    description: 'HR dashboard, team management, and bulk enrollment tools'
  },
  { 
    label: 'Corporate Learner', 
    href: '/signin/corporate-learner',
    description: 'Employee learning dashboard and assigned programs'
  },
  { 
    label: 'Self-Learner', 
    href: '/signin/self-learner',
    description: 'Individual professional development access'
  }
];

function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean }) {
  const [isOpen, setIsOpen] = useState(false);

  if (item.href) {
    return (
      <Button 
        variant="ghost" 
        onClick={() => navigateTo(item.href!)}
        className={isMobile ? "w-full justify-start min-h-[44px]" : "min-h-[44px]"}
        style={{
          fontSize: '14px', // Reduced from var(--font-body) by 2px
          fontWeight: 'normal',
          fontFamily: 'var(--font-family-base)',
          color: 'var(--color-black)'
        }}
      >
        {item.icon && <item.icon className="w-4 h-4 mr-2" />}
        {item.label}
      </Button>
    );
  }

  if (isMobile) {
    return (
      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
        <CollapsibleTrigger asChild>
          <Button
            variant="ghost"
            className="w-full justify-between min-h-[44px]"
            style={{
              fontSize: '14px', // Reduced from var(--font-body) by 2px
              fontWeight: 'normal',
              fontFamily: 'var(--font-family-base)',
              color: 'var(--color-black)'
            }}
          >
            <span className="flex items-center">
              {item.icon && <item.icon className="w-4 h-4 mr-2" />}
              {item.label}
            </span>
            <ChevronRight className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-90' : ''}`} />
          </Button>
        </CollapsibleTrigger>
        <CollapsibleContent className="pl-4 space-y-1">
          {item.items?.map((subItem) => (
            <Button
              key={subItem.href}
              variant="ghost"
              onClick={() => navigateTo(subItem.href)}
              className="w-full justify-start min-h-[44px] pl-6"
              style={{
                fontSize: '14px', // Reduced from var(--font-body) by 2px
                fontWeight: 'normal',
                fontFamily: 'var(--font-family-base)',
                color: 'var(--color-black)'
              }}
            >
              {subItem.icon && <subItem.icon className="w-4 h-4 mr-2" />}
              {subItem.label}
            </Button>
          ))}
        </CollapsibleContent>
      </Collapsible>
    );
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button 
          variant="ghost" 
          className="flex items-center gap-1 min-h-[44px] transition-all duration-300 hover:transform hover:-translate-y-1"
          style={{
            fontSize: '14px', // Reduced from var(--font-body) by 2px
            fontWeight: 'normal',
            fontFamily: 'var(--font-family-base)',
            color: 'var(--color-black)'
          }}
        >
          {item.icon && <item.icon className="w-4 h-4 mr-2" />}
          {item.label}
          <ChevronDown className="w-4 h-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent 
        align="start" 
        className="w-80"
        style={{
          backgroundColor: 'var(--color-bg-white)',
          border: `1px solid var(--color-border)`,
          borderRadius: '12px',
          boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
          fontFamily: 'var(--font-family-base)'
        }}
      >
        {item.items?.map((subItem) => (
          <DropdownMenuItem
            key={subItem.href}
            onClick={() => navigateTo(subItem.href)}
            className="flex items-start gap-3 p-4 cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-1"
            style={{
              fontFamily: 'var(--font-family-base)'
            }}
          >
            {subItem.icon && (
              <div 
                className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-1"
                style={{
                  backgroundColor: 'rgba(4, 4, 91, 0.1)',
                  color: 'var(--color-brand-primary)'
                }}
              >
                <subItem.icon className="w-4 h-4" />
              </div>
            )}
            <div className="flex-1">
              <div 
                className="font-medium"
                style={{
                  fontSize: '14px', // Reduced from var(--font-body) by 2px
                  fontWeight: '400',
                  color: 'var(--color-black)',
                  fontFamily: 'var(--font-family-base)'
                }}
              >
                {subItem.label}
              </div>
              {subItem.description && (
                <div 
                  className="mt-1"
                  style={{
                    fontSize: '12px', // Reduced from var(--font-small) by 2px
                    color: 'var(--color-gray-muted)',
                    fontFamily: 'var(--font-family-base)',
                    lineHeight: 'var(--line-height-small)'
                  }}
                >
                  {subItem.description}
                </div>
              )}
            </div>
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

function ProfileDropdown({ user }: { user: any }) {
  const { signOut } = useAuth();

  const handleSignOut = () => {
    signOut();
    navigateTo('/');
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button 
          variant="ghost" 
          className="flex items-center gap-3 px-3 py-2 h-auto min-h-[44px]"
          style={{
            fontSize: '14px', // Reduced from var(--font-body) by 2px
            fontFamily: 'var(--font-family-base)'
          }}
        >
          <Avatar className="h-8 w-8">
            <AvatarImage src={user.avatar} alt={user.name} />
            <AvatarFallback 
              className="text-sm"
              style={{ fontFamily: 'var(--font-family-base)' }}
            >
              {user.name.split(' ').map((n: string) => n[0]).join('')}
            </AvatarFallback>
          </Avatar>
          <div className="text-left">
            <div 
              className="font-medium"
              style={{
                fontSize: '14px', // Reduced from var(--font-body) by 2px
                fontWeight: '400',
                fontFamily: 'var(--font-family-base)'
              }}
            >
              {user.corporateName}
            </div>
            <div 
              style={{
                fontSize: '12px', // Reduced from var(--font-small) by 2px
                color: 'var(--color-gray-muted)',
                fontFamily: 'var(--font-family-base)'
              }}
            >
              {user.name}
            </div>
          </div>
          <ChevronDown className="w-4 h-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent 
        align="end" 
        className="w-64"
        style={{
          backgroundColor: 'var(--color-bg-white)',
          border: `1px solid var(--color-border)`,
          borderRadius: '12px',
          fontFamily: 'var(--font-family-base)'
        }}
      >
        <DropdownMenuLabel 
          style={{
            fontSize: '14px', // Reduced from var(--font-body) by 2px
            fontFamily: 'var(--font-family-base)'
          }}
        >
          <div 
            className="font-medium"
            style={{ fontWeight: '400' }}
          >
            {user.corporateName}
          </div>
          <div 
            className="font-normal"
            style={{
              fontSize: '12px', // Reduced from var(--font-small) by 2px
              color: 'var(--color-gray-muted)'
            }}
          >
            {user.email}
          </div>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem 
          onClick={() => navigateTo('/dashboard')} 
          className="min-h-[44px]"
          style={{
            fontSize: '14px', // Reduced from var(--font-body) by 2px
            fontFamily: 'var(--font-family-base)'
          }}
        >
          <LayoutDashboard className="w-4 h-4 mr-2" />
          Dashboard
        </DropdownMenuItem>
        <DropdownMenuItem 
          onClick={() => navigateTo('/team')} 
          className="min-h-[44px]"
          style={{
            fontSize: '14px', // Reduced from var(--font-body) by 2px
            fontFamily: 'var(--font-family-base)'
          }}
        >
          <Users className="w-4 h-4 mr-2" />
          Team Management
        </DropdownMenuItem>
        <DropdownMenuItem 
          onClick={() => navigateTo('/profile')} 
          className="min-h-[44px]"
          style={{
            fontSize: '14px', // Reduced from var(--font-body) by 2px
            fontFamily: 'var(--font-family-base)'
          }}
        >
          <User className="w-4 h-4 mr-2" />
          Profile
        </DropdownMenuItem>
        <DropdownMenuItem 
          onClick={() => navigateTo('/settings')} 
          className="min-h-[44px]"
          style={{
            fontSize: '14px', // Reduced from var(--font-body) by 2px
            fontFamily: 'var(--font-family-base)'
          }}
        >
          <Settings className="w-4 h-4 mr-2" />
          Settings
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem 
          onClick={handleSignOut} 
          className="min-h-[44px]"
          style={{
            fontSize: '14px', // Reduced from var(--font-body) by 2px
            fontFamily: 'var(--font-family-base)',
            color: 'var(--destructive)'
          }}
        >
          <LogOut className="w-4 h-4 mr-2" />
          Sign Out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

function CartIcon() {
  const { cartCount } = useCart();

  const handleCartClick = () => {
    navigateTo('/cart');
  };

  return (
    <Button
      variant="ghost"
      size="icon"
      onClick={handleCartClick}
      className="relative min-h-[44px] min-w-[44px] hover:bg-gray-100 transition-all duration-300"
      aria-label={`Shopping cart with ${cartCount} items`}
    >
      <ShoppingCart className="w-5 h-5 text-gray-600" />
      
      {/* Cart Count Badge */}
      {cartCount > 0 && (
        <div 
          className="absolute -top-1 -right-1 min-w-[18px] h-[18px] flex items-center justify-center rounded-full text-xs font-medium text-white animate-in fade-in zoom-in duration-300"
          style={{ 
            backgroundColor: '#dc2626', // Red background for notification
            fontSize: '11px',
            fontFamily: 'var(--font-family-base)',
            lineHeight: '1'
          }}
        >
          {cartCount > 9 ? '9+' : cartCount}
        </div>
      )}
    </Button>
  );
}

export function Navigation({ currentPage }: NavigationProps) {
  const [isScrolled, setIsScrolled] = useState(false);
  const { user, isAuthenticated, signOut } = useAuth();

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10);
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const handleMobileSignOut = () => {
    signOut();
    navigateTo('/');
  };

  return (
    <>
      {/* Top notification bar - PRESERVED */}
      <div className="notification-strip">
        <span className="notification-text">
          Join Our Upcoming Leadership Webinars - Transform Your Leadership Journey
        </span>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => navigateTo('/enroll')}
          className="notification-button"
        >
          Enroll Now
          <ChevronRight className="w-4 h-4 ml-1" />
        </Button>
      </div>

      {/* Main navigation header - ENHANCED STICKY */}
      <header 
        className={`w-full border-b transition-all duration-300 navbar-sticky ${isScrolled ? 'shadow-lg scrolled' : 'shadow-sm'}`}
        style={{
          borderColor: 'var(--color-border)'
        }}
      >
        <nav className="container mx-auto px-4 lg:px-8">
          <div className="flex items-center justify-between h-20">
            {/* Logo */}
            <div className="flex items-center">
              <Button 
                variant="ghost" 
                className="p-2 hover:bg-transparent"
                onClick={() => navigateTo('/')}
              >
                <img 
                  src={klcLogo}
                  alt="Kautilya Leadership Centre" 
                  className="h-12 w-auto object-contain"
                />
              </Button>
            </div>

            {/* Desktop Navigation */}
            <div className="hidden lg:flex items-center gap-2">
              {navigationItems.map((item) => (
                <NavLink key={item.label} item={item} />
              ))}
            </div>

            {/* Right Side Actions */}
            <div className="flex items-center gap-4">

              {/* Cart Icon - Always visible */}
              <CartIcon />

              {/* Authentication Button/Profile */}
              {isAuthenticated && user ? (
                <div className="hidden md:flex">
                  <ProfileDropdown user={user} />
                </div>
              ) : (
                <div className="hidden md:flex items-center">
                  <Button 
                    onClick={() => navigateTo('/leadership-journey')}
                    className="management-dev-glassmorphic-btn text-body px-8 py-4 min-h-[52px] border transition-all duration-300 group"
                    style={{
                      fontFamily: 'var(--font-family-base)',
                      color: '#04045B'
                    }}
                  >
                    Start Leadership Journey
                    <ArrowRight 
                      className="w-5 h-5 ml-2 transition-transform duration-300 group-hover:translate-x-1" 
                      style={{ color: '#04045B' }}
                    />
                  </Button>
                </div>
              )}

              {/* Mobile Menu */}
              <Sheet>
                <SheetTrigger asChild>
                  <Button variant="ghost" size="icon" className="lg:hidden min-h-[44px] min-w-[44px]">
                    <Menu className="w-6 h-6" />
                  </Button>
                </SheetTrigger>
                <SheetContent 
                  side="right" 
                  className="w-80"
                  style={{
                    backgroundColor: 'var(--color-bg-white)',
                    fontFamily: 'var(--font-family-base)',
                    zIndex: 10000
                  }}
                >
                  <SheetHeader>
                    <SheetTitle 
                      style={{
                        fontSize: 'var(--font-h4)',
                        fontFamily: 'var(--font-family-base)',
                        color: 'var(--color-black)'
                      }}
                    >
                      Navigation
                    </SheetTitle>
                  </SheetHeader>
                  <div className="mt-6 space-y-4">
                    {navigationItems.map((item) => (
                      <NavLink key={item.label} item={item} isMobile />
                    ))}
                    
                    <div className="pt-4 border-t space-y-3">
                      
                      {isAuthenticated && user ? (
                        <div className="space-y-3">
                          <div 
                            className="flex items-center gap-3 p-3 rounded-lg"
                            style={{ backgroundColor: 'rgba(0, 0, 0, 0.05)' }}
                          >
                            <Avatar className="h-10 w-10">
                              <AvatarImage src={user.avatar} alt={user.name} />
                              <AvatarFallback style={{ fontFamily: 'var(--font-family-base)' }}>
                                {user.name.split(' ').map((n: string) => n[0]).join('')}
                              </AvatarFallback>
                            </Avatar>
                            <div>
                              <div 
                                className="font-medium"
                                style={{
                                  fontSize: '14px', // Reduced from var(--font-body) by 2px
                                  fontWeight: '400',
                                  fontFamily: 'var(--font-family-base)'
                                }}
                              >
                                {user.corporateName}
                              </div>
                              <div 
                                style={{
                                  fontSize: '12px', // Reduced from var(--font-small) by 2px
                                  color: 'var(--color-gray-muted)',
                                  fontFamily: 'var(--font-family-base)'
                                }}
                              >
                                {user.name}
                              </div>
                            </div>
                          </div>
                          <Button 
                            variant="outline"
                            className="w-full justify-start min-h-[44px]"
                            onClick={() => navigateTo('/dashboard')}
                            style={{
                              fontSize: '14px', // Reduced from var(--font-body) by 2px
                              fontFamily: 'var(--font-family-base)'
                            }}
                          >
                            <LayoutDashboard className="w-4 h-4 mr-2" />
                            Dashboard
                          </Button>
                          <Button 
                            variant="outline"
                            className="w-full justify-start min-h-[44px]"
                            onClick={() => navigateTo('/profile')}
                            style={{
                              fontSize: '14px', // Reduced from var(--font-body) by 2px
                              fontFamily: 'var(--font-family-base)'
                            }}
                          >
                            <User className="w-4 h-4 mr-2" />
                            Profile
                          </Button>
                          <Button 
                            variant="outline"
                            className="w-full justify-start min-h-[44px]"
                            onClick={handleMobileSignOut}
                            style={{
                              fontSize: '14px', // Reduced from var(--font-body) by 2px
                              fontFamily: 'var(--font-family-base)',
                              color: 'var(--destructive)'
                            }}
                          >
                            <LogOut className="w-4 h-4 mr-2" />
                            Sign Out
                          </Button>
                        </div>
                      ) : (
                        <div className="space-y-2">
                          <Button 
                            onClick={() => navigateTo('/leadership-journey')}
                            className="management-dev-glassmorphic-btn text-body px-8 py-4 min-h-[52px] border transition-all duration-300 w-full group"
                            style={{
                              fontFamily: 'var(--font-family-base)',
                              color: '#04045B'
                            }}
                          >
                            Start Leadership Journey
                            <ArrowRight 
                              className="w-5 h-5 ml-2 transition-transform duration-300 group-hover:translate-x-1" 
                              style={{ color: '#04045B' }}
                            />
                          </Button>
                        </div>
                      )}
                    </div>
                  </div>
                </SheetContent>
              </Sheet>
            </div>
          </div>
        </nav>
      </header>
    </>
  );
}