"use client"

import { useAuth } from "@/contexts/auth-context"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Badge } from "@/components/ui/badge"
import { 
  Bell, 
  Settings, 
  LogOut, 
  User, 
  Shield, 
  ArrowLeft,
  LayoutDashboard,
  Files,
  Zap,
  Users,
  BarChart3,
  FileText,
  Cog,
  HelpCircle,
  ChevronLeft,
  ChevronRight
} from "lucide-react"
import { useState } from "react"
import { AdminNotificationsPanel } from "@/components/admin/admin-notifications-panel"
import { useAdminNotifications } from "@/contexts/AdminNotificationContext"
import { cn } from "@/lib/utils"

interface AdminSidebarLayoutProps {
  children: React.ReactNode
}

interface SidebarItem {
  id: string
  label: string
  icon: React.ComponentType<{ className?: string }>
  href?: string
  badge?: number
  subItems?: SidebarItem[]
}

export function AdminSidebarLayout({ children }: AdminSidebarLayoutProps) {
  const [isLoggingOut, setIsLoggingOut] = useState(false)
  const [showNotifications, setShowNotifications] = useState(false)
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
  const pathname = usePathname()
  const { user, logout, isAdmin } = useAuth()
  const { unreadCount } = useAdminNotifications()

  // Handle logout with loading state
  const handleLogout = async () => {
    try {
      setIsLoggingOut(true)
      await logout()
    } catch (error) {
      console.error('Logout failed:', error)
      setIsLoggingOut(false)
    }
  }

  // Sidebar navigation items
  const sidebarItems: SidebarItem[] = [
    {
      id: "dashboard",
      label: "Dashboard",
      icon: LayoutDashboard,
      href: "/admin"
    },
    {
      id: "features",
      label: "Custom Features",
      icon: Zap,
      href: "/admin?tab=features",
      badge: 0 // This will be updated dynamically
    },
    {
      id: "templates",
      label: "Templates",
      icon: Files,
      href: "/admin/templates"
    },
    {
      id: "users",
      label: "User Management",
      icon: Users,
      href: "/admin/users"
    },
    {
      id: "analytics",
      label: "Analytics",
      icon: BarChart3,
      href: "/admin/analytics"
    },
    {
      id: "settings",
      label: "Settings",
      icon: Cog,
      href: "/admin/settings"
    },
    {
      id: "help",
      label: "Help & Support",
      icon: HelpCircle,
      href: "/admin/help"
    }
  ]

  // Redirect non-admin users
  if (!isAdmin) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-red-600 mb-4">Access Denied</h1>
          <p className="text-gray-600 mb-4">You don&apos;t have permission to access the admin panel.</p>
          <Link href="/">
            <Button>Go to Home</Button>
          </Link>
        </div>
      </div>
    )
  }

  const SidebarItem = ({ item, level = 0 }: { item: SidebarItem; level?: number }) => {
    const [isExpanded, setIsExpanded] = useState(false)
    const hasSubItems = item.subItems && item.subItems.length > 0
    const isActive = pathname === item.href || (item.href && pathname.startsWith(item.href))

    return (
      <div>
        <Link
          href={item.href || "#"}
          onClick={hasSubItems ? (e) => {
            e.preventDefault()
            setIsExpanded(!isExpanded)
          } : undefined}
          className={cn(
            "flex items-center justify-between w-full px-3 py-2 text-sm rounded-lg transition-colors",
            level > 0 && "ml-4 pl-6",
            isActive 
              ? "bg-orange-500 text-black font-medium" 
              : "text-white/80 hover:bg-white/10 hover:text-white",
            sidebarCollapsed && level === 0 && "justify-center px-2"
          )}
        >
          <div className="flex items-center space-x-3">
            <item.icon className={cn("h-5 w-5", sidebarCollapsed && level === 0 && "h-6 w-6")} />
            {(!sidebarCollapsed || level > 0) && (
              <span className="truncate">{item.label}</span>
            )}
          </div>
          
          {!sidebarCollapsed && (
            <div className="flex items-center space-x-2">
              {item.badge !== undefined && item.badge > 0 && (
                <Badge className="bg-red-500 text-white text-xs h-5 w-5 rounded-full p-0 flex items-center justify-center">
                  {item.badge}
                </Badge>
              )}
              {hasSubItems && (
                <ChevronRight className={cn("h-4 w-4 transition-transform", isExpanded && "rotate-90")} />
              )}
            </div>
          )}
        </Link>

        {hasSubItems && isExpanded && !sidebarCollapsed && (
          <div className="mt-1 space-y-1">
            {item.subItems!.map((subItem) => (
              <SidebarItem key={subItem.id} item={subItem} level={level + 1} />
            ))}
          </div>
        )}
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-black text-white flex">
      {/* Sidebar */}
      <div className={cn(
        "bg-gray-900 border-r border-white/10 transition-all duration-300 flex flex-col",
        sidebarCollapsed ? "w-16" : "w-64"
      )}>
        {/* Sidebar Header */}
        <div className="p-4 border-b border-white/10">
          <div className="flex items-center justify-between">
            {!sidebarCollapsed && (
              <div className="flex items-center space-x-2">
                <div className="w-8 h-8 bg-orange-500 rounded-lg flex items-center justify-center">
                  <span className="text-black font-bold text-sm">C</span>
                </div>
                <span className="text-lg font-bold">Admin</span>
                <Badge className="bg-orange-500 text-black text-xs">
                  <Shield className="h-3 w-3 mr-1" />
                  Panel
                </Badge>
              </div>
            )}
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
              className="text-white/70 hover:text-white hover:bg-white/10"
            >
              {sidebarCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
            </Button>
          </div>
        </div>

        {/* Navigation */}
        <nav className="flex-1 p-4 space-y-2">
          {sidebarItems.map((item) => (
            <SidebarItem key={item.id} item={item} />
          ))}
        </nav>

        {/* Sidebar Footer */}
        <div className="p-4 border-t border-white/10">
          {!sidebarCollapsed ? (
            <div className="flex items-center space-x-3">
              <Avatar className="h-8 w-8">
                <AvatarImage src="/avatars/01.png" alt={user?.username || user?.email || "User"} />
                <AvatarFallback className="bg-orange-500 text-black">
                  {(user?.username && user.username.charAt(0)) || (user?.email && user.email.charAt(0)) || "U"}
                </AvatarFallback>
              </Avatar>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-white truncate">
                  {user?.username || user?.email || "User"}
                </p>
                <p className="text-xs text-white/60 truncate">Administrator</p>
              </div>
            </div>
          ) : (
            <div className="flex justify-center">
              <Avatar className="h-8 w-8">
                <AvatarImage src="/avatars/01.png" alt={user?.username || user?.email || "User"} />
                <AvatarFallback className="bg-orange-500 text-black">
                  {(user?.username && user.username.charAt(0)) || (user?.email && user.email.charAt(0)) || "U"}
                </AvatarFallback>
              </Avatar>
            </div>
          )}
        </div>
      </div>

      {/* Main Content */}
      <div className="flex-1 flex flex-col">
        {/* Top Header */}
        <header className="bg-black/90 text-white border-b border-white/10 backdrop-blur">
          <div className="px-6 py-4">
            <div className="flex h-8 justify-between items-center">
              {/* Back to Main Site */}
              <div className="flex items-center space-x-4">
                <Link href="/" className="flex items-center space-x-2 text-white/70 hover:text-white">
                  <ArrowLeft className="h-5 w-5" />
                  <span className="text-sm">Back to Site</span>
                </Link>
              </div>

              {/* Right side */}
              <div className="flex items-center space-x-4">
                {/* Notifications */}
                <Button 
                  variant="ghost" 
                  size="sm" 
                  className="relative text-white/80 hover:text-white hover:bg-white/5"
                  onClick={() => setShowNotifications(true)}
                >
                  <Bell className="h-5 w-5" />
                  {unreadCount > 0 && (
                    <Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs bg-orange-500 text-black">
                      {unreadCount}
                    </Badge>
                  )}
                </Button>

                {/* User Menu */}
                {user && user.email && (
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" className="relative h-8 w-8 rounded-full cursor-pointer hover:bg-white/5">
                        <Avatar className="h-8 w-8">
                          <AvatarImage src="/avatars/01.png" alt={user.username || user.email || "User"} />
                          <AvatarFallback>
                            {(user.username && user.username.charAt(0)) || (user.email && user.email.charAt(0)) || "U"}
                          </AvatarFallback>
                        </Avatar>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent className="w-56 bg-black text-white border-white/10" align="end" forceMount>
                      <DropdownMenuLabel className="font-normal">
                        <div className="flex flex-col space-y-1">
                          <p className="text-sm font-medium leading-none">{user.username || user.email || "User"}</p>
                          <p className="text-xs leading-none text-white/60">{user.email || "No email"}</p>
                          <Badge className="w-fit bg-orange-500 text-black text-xs">
                            <Shield className="h-3 w-3 mr-1" />
                            Admin
                          </Badge>
                        </div>
                      </DropdownMenuLabel>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem className="hover:bg-white/5 cursor-pointer">
                        <User className="mr-2 h-4 w-4" />
                        <span>Profile</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem className="hover:bg-white/5 cursor-pointer">
                        <Settings className="mr-2 h-4 w-4" />
                        <span>Settings</span>
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem onClick={handleLogout} className="hover:bg-white/5 cursor-pointer" disabled={isLoggingOut}>
                        <LogOut className="mr-2 h-4 w-4" />
                        <span>{isLoggingOut ? "Logging out..." : "Log out"}</span>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                )}
              </div>
            </div>
          </div>
        </header>

        {/* Main Content Area */}
        <main className="flex-1 px-6 py-8 overflow-auto">
          {children}
        </main>
      </div>

      {/* Notifications Panel */}
      <AdminNotificationsPanel
        open={showNotifications}
        onOpenChange={setShowNotifications}
      />
    </div>
  )
}