"use client"

import * as React from "react"
import {
  Coins,
  CreditCard,
  Crown,
  Globe,
  HelpCircle,
  Key,
  LayoutDashboard,
  Package,
  Megaphone,
  Shield,
  Store,
  Truck,
  Zap,
  Server,
  UserPlus,
} from "lucide-react"

import { cn } from "@/lib/utils"
import { NavMain } from "@/components/nav-main"
import { NavProjects } from "@/components/nav-projects"
import { NavUser } from "@/components/nav-user"
import { TeamSwitcher } from "@/components/team-switcher"
import { GlobalsSidebar } from "@/features/globals/components/globals-sidebar"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
} from "@/components/ui/sidebar"
import { useNavigation, PageId } from "@/contexts/navigation-context"

// Get site data from WordPress
const synkData = window.swiftCommerceData || {}
const siteName = synkData.siteName || "Your Store"
const isPro = synkData.isPro || false
const license = synkData.license || {}

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const { currentPage, navigateTo } = useNavigation()

  // Navigation data for WooCommerce addon
  const data = {
    teams: [
      {
        name: "Swift Commerce",
        logo: isPro ? Crown : Zap,
        plan: isPro ? "Pro" : "Free",
      },
      {
        name: siteName,
        logo: Store,
        plan: "WooCommerce",
      },
    ],
    navMain: [
      {
        title: "Dashboard",
        url: "#",
        icon: LayoutDashboard,
        isActive: currentPage === 'dashboard' || currentPage.startsWith('dashboard/'),
        pageId: "dashboard" as PageId,
        items: [],
      },
      {
        title: "Spam",
        url: "#",
        icon: Shield,
        isActive: currentPage.startsWith('spam/'),
        items: [
          {
            title: "reCAPTCHA",
            url: "#",
            pageId: "spam/recaptcha" as PageId,
            isActive: currentPage === 'spam/recaptcha',
          },
          {
            title: "Email Verification",
            url: "#",
            pageId: "spam/email-verification" as PageId,
            isActive: currentPage === 'spam/email-verification',
          },
        ],
      },
      {
        title: "Popups",
        url: "#",
        icon: Megaphone,
        isActive: currentPage.startsWith('popups/'),
        items: [
          {
            title: "Add to Cart Popup",
            url: "#",
            pageId: "popups/added-to-cart" as PageId,
            isActive: currentPage === 'popups/added-to-cart',
          },
        ],
      },
      {
        title: "Sales Recovery",
        url: "#",
        icon: Zap,
        isActive: currentPage.startsWith('notifications/'),
        items: [
          {
            title: "Back In Stock",
            url: "#",
            pageId: "notifications/back-in-stock" as PageId,
            isActive: currentPage === 'notifications/back-in-stock',
          },
          {
            title: "Cart Recovery",
            url: "#",
            pageId: "notifications/abandoned-cart" as PageId,
            isActive: currentPage === 'notifications/abandoned-cart',
          },
        ],
      },
      {
        title: "Shipping",
        url: "#",
        icon: Truck,
        isActive: currentPage.startsWith('shipping/'),
        items: [
          {
            title: "Tracking",
            url: "#",
            pageId: "shipping/tracking" as PageId,
            isActive: currentPage === 'shipping/tracking',
          },
        ],
      },
      {
        title: "Currencies",
        url: "#",
        icon: Coins,
        isActive: currentPage.startsWith('currencies/'),
        items: [
          {
            title: "Currency Switcher",
            url: "#",
            pageId: "currencies/switcher" as PageId,
            isActive: currentPage === 'currencies/switcher',
          },
        ],
      },
      {
        title: "Products",
        url: "#",
        icon: Package,
        isActive: currentPage === 'products' || currentPage.startsWith('products/'),
        items: [
          {
            title: "Product Bundles",
            url: "#",
            pageId: "products/bundles" as PageId,
            isActive: currentPage === 'products/bundles',
          },
          {
            title: "Product Addons",
            url: "#",
            pageId: "products/addons" as PageId,
            isActive: currentPage === 'products/addons',
          },
          {
            title: "Subscriptions",
            url: "#",
            pageId: "products/subscriptions" as PageId,
            isActive: currentPage === 'products/subscriptions',
          },
          {
            title: "Quantity Limits",
            url: "#",
            pageId: "products/quantity-limits" as PageId,
            isActive: currentPage === 'products/quantity-limits',
          },
          {
            title: "Wishlist",
            url: "#",
            pageId: "products/wishlist" as PageId,
            isActive: currentPage === 'products/wishlist',
          },
          {
            title: "Ajax Search",
            url: "#",
            pageId: "products/ajax-search" as PageId,
            isActive: currentPage === 'products/ajax-search',
          },
        ],
      },
      {
        title: "Checkout",
        url: "#",
        icon: CreditCard,
        isActive: currentPage.startsWith('checkout/'),
        items: [
          {
            title: "Field Editor",
            url: "#",
            pageId: "checkout/field-editor" as PageId,
            isActive: currentPage === 'checkout/field-editor',
          },
        ],
      },
      {
        title: "Customization",
        url: "#",
        icon: UserPlus,
        isActive: currentPage.startsWith('customization/'),
        items: [
          {
            title: "Registration Form",
            url: "#",
            pageId: "customization/registration-form" as PageId,
            isActive: currentPage === 'customization/registration-form',
          },
        ],
      },
      {
        title: "Compliance",
        url: "#",
        icon: Shield,
        isActive: currentPage.startsWith('compliance/'),
        items: [
          {
            title: "Cookie Consent",
            url: "#",
            pageId: "compliance/cookie-consent" as PageId,
            isActive: currentPage === 'compliance/cookie-consent',
          },
        ],
      },
    ],
    projects: [
      {
        name: "Globals",
        url: "#",
        icon: Globe,
        pageId: "globals" as PageId,
        proFeature: true,
      },
      {
        name: isPro 
          ? "License" 
          : license.hasProPlugin 
            ? "Activate License" 
            : "Upgrade to Pro",
        url: isPro || license.hasProPlugin
          ? (synkData.adminUrl ? `${synkData.adminUrl}admin.php?page=swift-commerce-account` : "/wp-admin/admin.php?page=swift-commerce-account")
          : "https://swiftcommerce.io/pricing",
        icon: isPro ? Key : license.hasProPlugin ? Key : Crown,
        isExternal: true, // Opens in new tab
      },
      {
        name: "System Info",
        url: "#",
        icon: Server,
        pageId: "system/info" as PageId,
      },
      {
        name: "Support",
        url: "#",
        icon: HelpCircle,
        isSupport: true, // Shows popover with support links
      },
    ],
  }

  const isGlobals = currentPage === 'globals' && isPro

  return (
    <Sidebar collapsible="icon" {...props}>
      <SidebarHeader>
        <TeamSwitcher teams={data.teams} />
      </SidebarHeader>

      {/* Animated container — slides between normal nav and globals nav */}
      <div className="flex-1 min-h-0 relative overflow-hidden">
        {/* Normal navigation */}
        <div
          className={cn(
            'absolute inset-0 flex flex-col transition-transform duration-300 ease-in-out',
            isGlobals ? '-translate-x-full' : 'translate-x-0',
          )}
        >
          <SidebarContent>
            <NavMain items={data.navMain} onNavigate={navigateTo} />
            <NavProjects projects={data.projects} onNavigate={navigateTo} />
          </SidebarContent>
          <SidebarFooter>
            <NavUser />
          </SidebarFooter>
        </div>

        {/* Globals navigation */}
        <div
          className={cn(
            'absolute inset-0 flex flex-col transition-transform duration-300 ease-in-out',
            isGlobals ? 'translate-x-0' : 'translate-x-full',
          )}
        >
          <GlobalsSidebar />
        </div>
      </div>
    </Sidebar>
  )
}