"use client"

import {
  BookOpen,
  Bug,
  Crown,
  ExternalLink,
  Lightbulb,
  Mail,
  type LucideIcon,
} from "lucide-react"

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"
import { PageId } from "@/contexts/navigation-context"

const supportLinks = [
  {
    name: "Documentation",
    url: "https://www.swiftcommerce.io/documentation/",
    icon: BookOpen,
  },
  {
    name: "Bug Report",
    url: "https://www.swiftcommerce.io/bug-report/",
    icon: Bug,
  },
  {
    name: "Feature Request",
    url: "https://www.swiftcommerce.io/feature-request/",
    icon: Lightbulb,
  },
  {
    name: "Contact Support",
    url: "https://www.swiftcommerce.io/contact/",
    icon: Mail,
  },
]

export function NavProjects({
  projects,
  onNavigate,
}: {
  projects: {
    name: string
    url: string
    icon: LucideIcon
    pageId?: PageId
    isExternal?: boolean
    isSupport?: boolean
    proFeature?: boolean
  }[]
  onNavigate?: (pageId: PageId) => void
}) {
  const handleClick = (item: typeof projects[0], e: React.MouseEvent) => {
    // If it's an external link, let the browser handle it
    if (item.isExternal) {
      return // Don't prevent default - let the <a> navigate
    }
    // If it's support, don't navigate (popover will handle it)
    if (item.isSupport) {
      e.preventDefault()
      return
    }
    // If it has a pageId, use internal navigation
    if (item.pageId && onNavigate) {
      e.preventDefault()
      onNavigate(item.pageId)
    }
  }

  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
      <SidebarGroupLabel>Quick Access</SidebarGroupLabel>
      <SidebarMenu>
        {projects.map((item) => (
          <SidebarMenuItem key={item.name}>
            {item.isSupport ? (
              <Popover>
                <PopoverTrigger asChild>
                  <SidebarMenuButton className="cursor-pointer">
                    <item.icon />
                    <span>{item.name}</span>
                  </SidebarMenuButton>
                </PopoverTrigger>
                <PopoverContent 
                  side="right" 
                  align="start"
                  className="w-56 p-2"
                >
                  <div className="space-y-1">
                    {supportLinks.map((link) => (
                      <a
                        key={link.name}
                        href={link.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors hover:bg-muted"
                      >
                        <link.icon className="h-4 w-4 text-muted-foreground" />
                        <span>{link.name}</span>
                        <ExternalLink className="ml-auto h-3 w-3 text-muted-foreground" />
                      </a>
                    ))}
                  </div>
                </PopoverContent>
              </Popover>
            ) : (
              <SidebarMenuButton asChild>
                <a 
                  href={item.url} 
                  onClick={(e) => handleClick(item, e)}
                  target={item.isExternal ? "_blank" : undefined}
                  rel={item.isExternal ? "noopener noreferrer" : undefined}
                  className="cursor-pointer"
                >
                  <item.icon />
                  <span>{item.name}</span>
                  {item.proFeature && (
                    <Crown className="ml-auto h-3 w-3 shrink-0" style={{ color: '#002269' }} />
                  )}
                </a>
              </SidebarMenuButton>
            )}
          </SidebarMenuItem>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  )
}