"use client"

import type React from "react"
import { useEffect, useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { LayoutDashboard, Users, Building2, MessageSquare, BarChart3, Upload, LogOut, Settings, Loader2, ClipboardCheck, MonitorPlay, Menu, X, CreditCard, ChevronDown, ChevronRight } from "lucide-react"
import { useRouter, usePathname, useSearchParams } from "next/navigation"
import { useAuth } from "@/hooks/use-auth"
import { DataAPI } from "@/lib/data-api"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const { user, isLoading } = useAuth()
  const [isChecking, setIsChecking] = useState(true)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const [expandedMenus, setExpandedMenus] = useState<string[]>(["Users"]) // Default expand Users for visibility

  // Toggle menu expansion
  const toggleMenu = (name: string) => {
    setExpandedMenus(prev =>
      prev.includes(name)
        ? prev.filter(item => item !== name)
        : [...prev, name]
    )
  }

  // Check authentication and role
  useEffect(() => {
    const checkAccess = async () => {
      // Wait for auth to initialize
      if (isLoading) {
        return
      }

      // Not authenticated - redirect to login
      if (!user) {
        console.log('[Admin Auth] Not authenticated, redirecting to login')
        router.push('/login?redirect=/admin/facilities')
        return
      }

      // Not an admin - redirect to appropriate dashboard
      if (user.role !== 'admin' && user.role !== 'super_admin') {
        console.log('[Admin Auth] Unauthorized role:', user.role, '- Redirecting to home')

        // Redirect based on role
        if (user.role === 'facility_owner') {
          router.push('/facility-owner/dashboard')
        } else if (user.role === 'family') {
          router.push('/family/dashboard')
        } else {
          router.push('/')
        }
        return
      }

      // User is admin - allow access
      console.log('[Admin Auth] Admin access granted:', user.email)
      setIsChecking(false)
    }

    checkAccess()
  }, [user, isLoading, router])

  const navigation = [
    { name: "Dashboard", href: "/admin/dashboard", icon: LayoutDashboard },
    {
      name: "Users",
      href: "/admin/users?tab=family", // Parent link now defaults to Family
      icon: Users,
      subItems: [
        { name: "Family", href: "/admin/users?tab=family" },
        { name: "Facility Owners", href: "/admin/users?tab=facility_owner" }
      ]
    },
    { name: "Facilities", href: "/admin/facilities", icon: Building2 },
    { name: "Claims", href: "/admin/facilities/claims", icon: ClipboardCheck },
    { name: "Reviews", href: "/admin/reviews", icon: MessageSquare },
    { name: "Campaigns", href: "/admin/ads", icon: MonitorPlay },
    { name: "Subscriptions", href: "/admin/subscriptions", icon: CreditCard },
    // { name: "Analytics", href: "/admin/analytics", icon: BarChart3 }, // Hidden for now
    { name: "Data Upload", href: "/admin/data-upload", icon: Upload },
  ]

  const handleLogout = async () => {
    await DataAPI.auth.logout()
    router.push("/login")
  }

  const handleSettings = () => {
    // In a real app, this would open settings modal or page
    router.push('/admin/settings')
  }

  // Show loading screen while checking auth
  if (isLoading || isChecking) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
        <div className="text-center">
          <Loader2 className="h-12 w-12 animate-spin text-blue-600 mx-auto mb-4" />
          <p className="text-gray-600 text-lg">Verifying admin access...</p>
          <p className="text-gray-400 text-sm mt-2">Please wait</p>
        </div>
      </div>
    )
  }

  // Don't render admin content for non-admins (they'll be redirected)
  if (!user || (user.role !== 'admin' && user.role !== 'super_admin')) {
    return null
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
      {/* Admin Header - Elegant Design */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm">
        <div className="px-3 md:px-6 lg:px-8 py-3 md:py-4">
          <div className="flex items-center justify-between">
            {/* Left Section - Mobile Menu & Logo */}
            <div className="flex items-center gap-2 md:gap-6">
              {/* Mobile Menu Button */}
              <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
                <SheetTrigger asChild>
                  <Button variant="ghost" size="icon" className="lg:hidden">
                    <Menu className="h-5 w-5" />
                  </Button>
                </SheetTrigger>
                <SheetContent side="left" className="w-72 p-0">
                  <div className="p-4 border-b">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-purple-600 rounded-xl flex items-center justify-center shadow-md">
                        <span className="text-white font-bold text-lg">GG</span>
                      </div>
                      <div className="flex flex-col">
                        <span className="text-lg font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                          Geezer Guide
                        </span>
                        <span className="text-xs text-gray-500 font-medium">Admin Panel</span>
                      </div>
                    </div>
                  </div>
                  <nav className="p-4">
                    <ul className="space-y-2">
                      {navigation.map((item: any) => {
                        const IconComponent = item.icon
                        const isActive = pathname === item.href
                        const hasSubItems = item.subItems && item.subItems.length > 0
                        const isExpanded = expandedMenus.includes(item.name)

                        if (hasSubItems) {
                          return (
                            <li key={item.name}>
                              <button
                                onClick={() => toggleMenu(item.name)}
                                className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 group ${isActive
                                  ? "bg-blue-50 text-blue-700 font-semibold"
                                  : "text-gray-700 hover:bg-gray-100 hover:text-gray-900"
                                  }`}
                              >
                                <IconComponent className={`h-5 w-5 ${isActive ? "text-blue-600" : "text-gray-500 group-hover:text-gray-700"}`} />
                                <span className="font-medium">{item.name}</span>
                                {isExpanded ? (
                                  <ChevronDown className="ml-auto h-4 w-4" />
                                ) : (
                                  <ChevronRight className="ml-auto h-4 w-4" />
                                )}
                              </button>

                              {isExpanded && (
                                <ul className="mt-1 ml-4 space-y-1 border-l-2 border-gray-100 pl-2">
                                  {item.subItems.map((subItem: any) => {
                                    const [path, query] = subItem.href.split('?')
                                    const isSubActive = pathname === path && (
                                      query
                                        ? searchParams?.get('tab') === new URLSearchParams(query).get('tab')
                                        : !searchParams?.get('tab')
                                    )

                                    return (
                                      <li key={subItem.name}>
                                        <Link
                                          href={subItem.href}
                                          onClick={() => setIsMobileMenuOpen(false)}
                                          className={`block px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${isSubActive
                                            ? "text-blue-600 font-semibold bg-blue-50"
                                            : "text-gray-600 hover:text-gray-900 hover:bg-gray-50"
                                            }`}
                                        >
                                          {subItem.name}
                                        </Link>
                                      </li>
                                    )
                                  })}
                                </ul>
                              )}
                            </li>
                          )
                        }

                        return (
                          <li key={item.name}>
                            <Link
                              href={item.href}
                              onClick={() => setIsMobileMenuOpen(false)}
                              className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 group ${isActive
                                ? "bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg"
                                : "text-gray-700 hover:bg-gray-100 hover:text-gray-900"
                                }`}
                            >
                              <IconComponent className={`h-5 w-5 ${isActive ? "text-white" : "text-gray-500 group-hover:text-gray-700"}`} />
                              <span className="font-medium">{item.name}</span>
                              {isActive && (
                                <div className="ml-auto w-2 h-2 bg-white rounded-full opacity-80"></div>
                              )}
                            </Link>
                          </li>
                        )
                      })}
                    </ul>
                  </nav>
                </SheetContent>
              </Sheet>

              <Link href="/" className="flex items-center gap-2 md:gap-3 group">
                <div className="w-9 h-9 md:w-11 md:h-11 bg-gradient-to-br from-blue-600 to-purple-600 rounded-xl flex items-center justify-center shadow-md group-hover:shadow-lg group-hover:scale-105 transition-all duration-200">
                  <span className="text-white font-bold text-lg md:text-xl">GG</span>
                </div>
                <div className="hidden sm:flex flex-col">
                  <span className="text-lg md:text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                    Geezer Guide
                  </span>
                  <span className="text-xs text-gray-500 font-medium hidden md:block">Senior Care Platform</span>
                </div>
              </Link>

              <div className="hidden lg:flex items-center">
                <div className="h-10 w-px bg-gradient-to-b from-gray-200 via-gray-300 to-gray-200 mx-4"></div>
                <div className="flex flex-col">
                  <h1 className="text-lg font-bold text-gray-900">Admin Panel</h1>
                  <span className="text-xs text-gray-500">Management Dashboard</span>
                </div>
              </div>
            </div>

            {/* Right Section - User Info & Actions */}
            <div className="flex items-center gap-1 md:gap-4">
              {/* User Profile */}
              <div className="hidden md:flex items-center gap-3 px-3 md:px-4 py-2 md:py-2.5 bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl border border-gray-200">
                <div className="w-8 h-8 md:w-9 md:h-9 bg-gradient-to-br from-blue-600 to-purple-600 rounded-full flex items-center justify-center shadow-sm">
                  <span className="text-white font-bold text-xs md:text-sm">
                    {user.firstName?.[0]?.toUpperCase() || user.email[0].toUpperCase()}
                  </span>
                </div>
                <div className="flex flex-col">
                  <span className="text-sm font-semibold text-gray-900">
                    {user.firstName} {user.lastName}
                  </span>
                  <span className="text-xs text-gray-500 hidden lg:block">{user.email}</span>
                </div>
              </div>

              {/* Action Buttons */}
              <div className="flex items-center gap-1 md:gap-2">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={handleSettings}
                  className="hover:bg-gray-100 hover:text-gray-900 text-gray-700 h-8 w-8 md:h-9 md:w-9 p-0"
                >
                  <Settings className="h-4 w-4" />
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={handleLogout}
                  className="border-red-200 text-red-600 hover:bg-red-50 hover:border-red-300 hover:text-red-700"
                >
                  <LogOut className="h-4 w-4 md:mr-2" />
                  <span className="hidden md:inline">Logout</span>
                </Button>
              </div>
            </div>
          </div>
        </div>
      </header>

      <div className="flex">
        {/* Enhanced Sidebar - Desktop Only */}
        <nav className="hidden lg:block w-64 bg-white/70 backdrop-blur-sm border-r border-gray-200/50 min-h-[calc(100vh-80px)] sticky top-20">
          <div className="p-4">
            <ul className="space-y-2">
              {navigation.map((item: any) => {
                const IconComponent = item.icon
                const isActive = pathname === item.href
                const hasSubItems = item.subItems && item.subItems.length > 0
                const isExpanded = expandedMenus.includes(item.name)

                if (hasSubItems) {
                  return (
                    <li key={item.name}>
                      <button
                        onClick={() => toggleMenu(item.name)}
                        className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 group ${isActive
                          ? "bg-blue-50 text-blue-700 font-semibold"
                          : "text-gray-700 hover:bg-gray-100 hover:text-gray-900"
                          }`}
                      >
                        <IconComponent className={`h-5 w-5 ${isActive ? "text-blue-600" : "text-gray-500 group-hover:text-gray-700"}`} />
                        <span className="font-medium">{item.name}</span>
                        {isExpanded ? (
                          <ChevronDown className="ml-auto h-4 w-4" />
                        ) : (
                          <ChevronRight className="ml-auto h-4 w-4" />
                        )}
                      </button>

                      {isExpanded && (
                        <ul className="mt-1 ml-4 space-y-1 border-l-2 border-gray-100 pl-2">
                          {item.subItems.map((subItem: any) => {
                            // Check exact match for query params if present
                            const [path, query] = subItem.href.split('?')
                            const isSubActive = pathname === path && (
                              query
                                ? searchParams?.get('tab') === new URLSearchParams(query).get('tab')
                                : !searchParams?.get('tab')
                            )

                            return (
                              <li key={subItem.name}>
                                <Link
                                  href={subItem.href}
                                  className={`block px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${isSubActive
                                    ? "text-blue-600 font-semibold bg-blue-50"
                                    : "text-gray-600 hover:text-gray-900 hover:bg-gray-50"
                                    }`}
                                >
                                  {subItem.name}
                                </Link>
                              </li>
                            )
                          })}
                        </ul>
                      )}
                    </li>
                  )
                }

                return (
                  <li key={item.name}>
                    <Link
                      href={item.href}
                      className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 group ${isActive
                        ? "bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg"
                        : "text-gray-700 hover:bg-gray-100 hover:text-gray-900"
                        }`}
                    >
                      <IconComponent className={`h-5 w-5 ${isActive ? "text-white" : "text-gray-500 group-hover:text-gray-700"}`} />
                      <span className="font-medium">{item.name}</span>
                      {isActive && (
                        <div className="ml-auto w-2 h-2 bg-white rounded-full opacity-80"></div>
                      )}
                    </Link>
                  </li>
                )
              })}
            </ul>
          </div>
        </nav>

        {/* Main Content */}
        <main className="flex-1 overflow-auto w-full">{children}</main>
      </div>
    </div>
  )
}