import React, { useEffect, useState } from "react";
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
} from "@/components/ui/navigation-menu";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuLabel,
} from "@/components/ui/dropdown-menu";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { CircleHelp, FileText, Headset, User } from "lucide-react";
import { __ } from "@wordpress/i18n";
import { NavLink, useRouter } from "@/utils/Router";
import SFLogo from "../../assets/images/settings/surefeedback-logo-img.svg"
import AutomationIcon from "../../assets/images/settings/automation.svg"
import SettingsIcon from "../../assets/images/settings/settings.svg"
import DashboardCustomizeIcon from "../../assets/images/settings/dashboard_customize.svg"

// Create icon components that accept className prop
const ConnectionIcon = ({ className }) => <img src={AutomationIcon} alt="" className={className} />;
const SettingsIconComponent = ({ className }) => <img src={SettingsIcon} alt="" className={className} />;
const WidgetControlIcon = ({ className }) => <img src={DashboardCustomizeIcon} alt="" className={className} />;

const NavMenu = () => {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const { currentRoute, navigate } = useRouter();

  const isActive = (path) => currentRoute === path;

  const handleRedirect = (url) => {
    window.open(url, "_blank");
    setIsDropdownOpen(false);
  };

  // Check if website is connected
  const isConnected = window.sureFeedbackAdmin?.connection?.connected || false;

  // Filter nav items based on connection status
  const allNavItems = [
    { label: __("Connections", "surefeedback-cloud"), path: "connections", icon: ConnectionIcon, showWhenConnected: true },
    { label: __("Widget Control", "surefeedback-cloud"), path: "widget-control", icon: WidgetControlIcon, showWhenConnected: true },
    { label: __("Settings", "surefeedback-cloud"), path: "settings", icon: SettingsIconComponent, showWhenConnected: true },
  ];

  const navItems = allNavItems.filter(item =>
    isConnected ? item.showWhenConnected : true
  );

  return (
    <div
      className="surefeedback-nav-menu w-full px-6 py-3 grid grid-cols-3 items-center bg-white border-b border-gray-200"
      style={{ zIndex: 9 }}
    >
      {/* Left: Logo */}
      <div className="flex items-center justify-start min-w-0">
        <NavLink to="connections" className="focus:outline-none flex-shrink-0">
          <img
            src={SFLogo}
            alt="SureFeedback"
            className="h-[25px] w-auto cursor-pointer focus:outline-none"
          />
        </NavLink>
      </div>

      {/* Center: Navigation Tabs */}
      <div className="flex items-center justify-center min-w-0">
        <NavigationMenu>
          <NavigationMenuList className="flex gap-4 justify-center">
            {navItems.map(({ label, path, icon: Icon }) => (
              <NavigationMenuItem key={path}>
                <NavigationMenuLink
                  href={`#${path}`}
                  onClick={(e) => {
                    e.preventDefault();
                    navigate(path);
                  }}
                  className={cn(
                    "px-2 py-1.5 text-sm font-medium transition-colors border-b-2 focus:outline-none focus-visible:outline-none whitespace-nowrap flex items-center gap-1.5 cursor-pointer",
                    isActive(path)
                      ? "text-gray-900 border-[#455AFB]"
                      : "text-gray-600 border-transparent hover:text-gray-900 hover:border-gray-300"
                  )}
                >
                  <Icon className="w-4 h-4" />
                  {label}
                </NavigationMenuLink>
              </NavigationMenuItem>
            ))}
          </NavigationMenuList>
        </NavigationMenu>
      </div>

      {/* Right: Actions */}
      <div className="flex items-center justify-end gap-3 min-w-0">

        {/* Help Dropdown */}
        <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
          <DropdownMenuTrigger asChild>
            <CircleHelp className="cursor-pointer flex-shrink-0 w-5 h-5" />
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-64 bg-white rounded-lg border border-border">
            <DropdownMenuLabel>
              {__("Useful Resources", "surefeedback-cloud")}
            </DropdownMenuLabel>
            {[
              {
                label: __("Getting Started", "surefeedback-cloud"),
                url: "https://surefeedback.com/docs/plugin-set-up-guide/",
                icon: <FileText />,
              },
              {
                label: __("How to add comments?", "surefeedback-cloud"),
                url: "https://surefeedback.com/docs/start-adding-comments/",
                icon: <FileText />,
              },
              {
                label: __("Contact us", "surefeedback-cloud"),
                url: "https://surefeedback.com/contact-us/",
                icon: <Headset />,
              },
            ].map(({ label, url, icon }) => (
              <DropdownMenuItem
                key={label}
                onClick={() => handleRedirect(url)}
                className="flex items-center gap-2 text-gray-800 cursor-pointer hover:border-gray-200 transition-all duration-200"
              >
                {icon}
                {label}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>

      </div>
    </div>
  );
};

export default NavMenu;