'use client';

import { Menu } from "lucide-react";
import { Sprout } from 'lucide-react';
import { MessageBell } from './components/MessageBell';
import { UserProfile } from './components/UserProfile';
import { ThemeToggle } from './ThemeToggle';
import { usePathname, useRouter } from 'next/navigation';
import { Button } from "@/components/ui/button";
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
} from "@/components/ui/navigation-menu";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

interface MenuItem {
  title: string;
  url: string;
  description?: string;
  icon?: React.ReactNode;
  items?: MenuItem[];
}

interface Navbar1Props {
  navbarData: {
    logo: {
      url: string;
      src: string;
      alt: string;
      title: string;
    };
    menu: MenuItem[];
    auth: {
      login: {
        title: string;
        url: string;
      };
      signup: {
        title: string;
        url: string;
      };
    };
  };
}
const Navbar1 = ({ navbarData }: Navbar1Props) => {
    const logo = navbarData.logo
    const menu = navbarData.menu
    const auth = navbarData.auth
    const pathname = usePathname()
    const router = useRouter()
    const containerStyle = {
      maxWidth:"100%",marginLeft:"0px",marginRight:"0px",paddingLeft:"1rem",paddingRight:"0rem"
    }

  // 检查当前路径是否匹配菜单项
  const isMenuActive = (url: string) => {
    // 精确匹配
    if (pathname === url) return true;
    // 检查是否是该菜单下的子路径
    if (pathname.startsWith(url + '/')) return true;
    return false;
  }


  const handleMessageClick = () => {
    // 处理消息点击事件，可以跳转到消息中心页面
    console.log('Navigate to message center');
  };

  const handleProfileClick = () => {
    // 处理个人中心点击事件
    console.log('Navigate to profile page');
  };

  return (
    <section className="py-4">
        <div className="container" style = {containerStyle}>
        {/* Desktop Menu */}
        <nav className="hidden justify-between lg:flex">
          <div className="flex items-center gap-6">
            {/* Logo */}
            
            <span className="flex items-center gap-2">
            <div className="flex items-center gap-3 flex-shrink-0">
          <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center transition-colors">
            <Sprout className="w-6 h-6 text-primary-foreground" />
          </div>
          <div>
            <h1 className="text-primary transition-colors" style={{ color: 'var(--primary)' }}>智慧农业生产管理系统</h1>
            <p className="text-xs text-muted-foreground">Smart Agriculture Management System</p>
          </div>
        </div>
            </span>
            <div className="flex items-center gap-1 overflow-x-auto flex-1 min-w-0" style={{ maxWidth: '70vw' }}>
        <style jsx>{`
          div::-webkit-scrollbar {
            height: 6px;
          }
          div::-webkit-scrollbar-track {
            background: transparent;
          }
          div::-webkit-scrollbar-thumb {
            background-color: #d1d5db;
            border-radius: 3px;
          }
          div::-webkit-scrollbar-thumb:hover {
            background-color: #9ca3af;
          }
          div {
            scrollbar-width: thin;
            scrollbar-color: #d1d5db transparent;
          }
          .navigation-menu-container {
            max-width: 70vw;
          }
        `}</style>
              <NavigationMenu>
                <NavigationMenuList className="flex gap-1 min-w-max">
                  {menu.map((item) => renderMenuItem(item, isMenuActive, router))}
                </NavigationMenuList>
              </NavigationMenu>
            </div>
          </div>
          <div className="flex gap-2" style = {{alignItems:"center"}}>
            <ThemeToggle />
            <MessageBell onMessageClick={handleMessageClick} />
            <UserProfile onProfileClick={handleProfileClick} />
          </div>
        </nav>

        {/* Mobile Menu */}
        <div className="block lg:hidden">
          <div className="flex items-center justify-between">
            {/* Logo */}
            <a href={logo.url} className="flex items-center gap-2">
              <img
                src={logo.src}
                className="max-h-8 dark:invert"
                alt={logo.alt}
              />
            </a>
            <Sheet>
              <SheetTrigger asChild>
                <Button variant="outline" size="icon">
                  <Menu className="size-4" />
                </Button>
              </SheetTrigger>
              <SheetContent className="overflow-y-auto">
                <SheetHeader>
                  <SheetTitle>
                    <a href={logo.url} className="flex items-center gap-2">
                      <img
                        src={logo.src}
                        className="max-h-8 dark:invert"
                        alt={logo.alt}
                      />
                    </a>
                  </SheetTitle>
                </SheetHeader>
                <div className="flex flex-col gap-6 p-4">
                  {/* 简化移动端菜单，不再使用 Accordion */}
                  <div className="flex w-full flex-col gap-4">
                    {menu.map((item) => renderMobileMenuItem(item, isMenuActive, router))}
                  </div>

                  <div className="flex flex-col gap-3">
                    <div className="flex justify-center">
                      <ThemeToggle />
                    </div>
                    <div className="flex justify-center">
                      <MessageBell onMessageClick={handleMessageClick} />
                    </div>
                    <div className="flex justify-center">
                      <UserProfile onProfileClick={handleProfileClick} />
                    </div>
                  </div>
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </div>
    </section>
  );
};

const renderMenuItem = (item: MenuItem, isMenuActive: (url: string) => boolean, router: any) => {
  // 注释掉二级菜单相关代码，项目不需要二级菜单
  // if (item.items) {
  //   return (
  //     <NavigationMenuItem key={item.title}>
  //       <NavigationMenuTrigger className="whitespace-nowrap">{item.title}</NavigationMenuTrigger>
  //       <NavigationMenuContent className="bg-popover text-popover-foreground">
  //         {item.items.map((subItem) => (
  //
  //           <NavigationMenuLink asChild key={subItem.title} className="w-80">
  //             <SubMenuLink item={subItem} />
  //           </NavigationMenuLink>
  //         ))}
  //       </NavigationMenuContent>
  //     </NavigationMenuItem>
  //   );
  // }

  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault();
    router.push(item.url);
  };

  return (
    <NavigationMenuItem key={item.title}>
      <NavigationMenuLink
        href={item.url}
        onClick={handleClick}
        data-menu-item="true"
        data-menu-url={item.url}
        className={`
          inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium gap-2 whitespace-nowrap relative cursor-pointer
          ${isMenuActive(item.url)
            ? 'bg-primary/10'
            : 'bg-background hover:bg-muted hover:text-accent-foreground'
          }
          [&:not([data-active])]:text-foreground
        `}
      >
        {item.icon && (
          <span className={`
            shrink-0
            ${isMenuActive(item.url)
              ? 'text-primary'
              : 'text-muted-foreground'
            }
            hover:text-primary
            [&.group-data-[state=open]]:text-muted-foreground
          `}>
            {item.icon}
          </span>
        )}
        <span className={isMenuActive(item.url) ? 'text-primary' : ''}>
          {item.title}
        </span>
        {isMenuActive(item.url)  &&<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-green-600 dark:bg-green-400 rounded-full"></div>}
      </NavigationMenuLink>
    </NavigationMenuItem>
  );
};

const renderMobileMenuItem = (item: MenuItem, isMenuActive: (url: string) => boolean, router: any) => {
  // 注释掉移动端二级菜单相关代码
  // if (item.items) {
  //   return (
  //     <AccordionItem key={item.title} value={item.title} className="border-b-0">
  //       <AccordionTrigger className="text-md py-0 font-semibold hover:no-underline gap-2">
  //         {item.icon && <span className="shrink-0">{item.icon}</span>}
  //         {item.title}
  //       </AccordionTrigger>
  //       <AccordionContent className="mt-2">
  //         {item.items.map((subItem) => (
  //           <SubMenuLink key={subItem.title} item={subItem} />
  //         ))}
  //       </AccordionContent>
  //     </AccordionItem>
  //   );
  // }

  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault();
    router.push(item.url);
  };

  return (
    <div
      key={item.title}
      onClick={handleClick}
      className={`
        text-md font-semibold flex items-center gap-2 p-2 rounded-md transition-colors cursor-pointer
        ${isMenuActive(item.url)
          ? 'bg-primary/10 text-primary'
          : 'hover:bg-muted hover:text-accent-foreground'
        }
      `}
    >
      {item.icon && (
        <span className={`
          shrink-0
          ${isMenuActive(item.url) ? 'text-primary' : 'text-muted-foreground'}
        `}>
          {item.icon}
        </span>
      )}
      <span className={isMenuActive(item.url) ? 'text-primary' : ''}>
        {item.title}
      </span>
    </div>
  );
};

// 注释掉 SubMenuLink 组件，因为不再需要二级菜单
// const SubMenuLink = ({ item }: { item: MenuItem }) => {
//   return (
//     <a
//       className="hover:bg-muted hover:text-accent-foreground flex min-w-80 select-none flex-row gap-4 rounded-md p-3 leading-none no-underline outline-none transition-colors"
//       href={item.url}
//     >
//       <div className="text-foreground">{item.icon}</div>
//       <div>
//         <div className="text-sm font-semibold">{item.title}</div>
//         {item.description && (
//           <p className="text-muted-foreground text-sm leading-snug">
//             {item.description}
//           </p>
//         )}
//       </div>
//     </a>
//   );
// };

export { Navbar1 };