"use client"

import * as React from "react"
import { ChevronsUpDown, ExternalLink } from "lucide-react"

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from "@/components/ui/sidebar"
import { ProBadge } from "@/components/pro/upgrade-prompts"
import { SwiftCommerceIconSimple, WordPressColorIcon } from "@/components/icons"

// Swift Commerce Logo Component using our custom SVG
function SwiftCommerceLogo({ className }: { className?: string }) {
  return <SwiftCommerceIconSimple className={className} />
}

export function TeamSwitcher({
  teams,
}: {
  teams: {
    name: string
    logo: React.ElementType
    plan: string
  }[]
}) {
  const { isMobile } = useSidebar()
  const activeTeam = teams[0]

  if (!activeTeam) {
    return null
  }

  // Get WordPress admin URL and site URL
  const adminUrl = window.swiftCommerceData?.adminUrl || '/wp-admin/'
  const siteUrl = window.location.origin

  // Use Swift Commerce custom logo for the first team (Swift Commerce itself)
  const LogoComponent = activeTeam.name === "Swift Commerce" ? SwiftCommerceLogo : activeTeam.logo

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
            >
              <div className="flex aspect-square size-8 items-center justify-center rounded-lg overflow-hidden">
                <LogoComponent className="size-8 rounded-lg" />
              </div>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">{activeTeam.name}</span>
                {activeTeam.plan === "Pro" ? (
                  <ProBadge className="w-fit text-[10px] px-1.5 py-0 h-4" />
                ) : (
                  <span className="truncate text-xs text-muted-foreground">{activeTeam.plan}</span>
                )}
              </div>
              <ChevronsUpDown className="ml-auto" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
            align="start"
            side={isMobile ? "bottom" : "right"}
            sideOffset={4}
          >
            <DropdownMenuItem
              onClick={() => window.location.href = adminUrl}
              className="gap-2 p-2 cursor-pointer"
            >
              <div className="flex size-6 items-center justify-center rounded-md border">
                <WordPressColorIcon className="size-4 shrink-0" />
              </div>
              Exit to WordPress
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem
              onClick={() => window.open(siteUrl, '_blank')}
              className="gap-2 p-2 cursor-pointer"
            >
              <div className="flex size-6 items-center justify-center rounded-md border">
                <ExternalLink className="size-3.5 shrink-0" />
              </div>
              View Site
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}