"use client"

import { useState, useEffect } from "react"
import { useSession, signOut } from "next-auth/react"
import { useRouter, usePathname } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Menu, X, User as UserIcon, Shield, LayoutDashboard, Building2, LogOut } from "lucide-react"
import { ThemeToggle } from "@/components/ThemeToggle"
import { LanguageToggle } from "@/components/LanguageToggle"
import { useI18n } from "@/contexts/I18nContext"
import { LoadingSpinner } from "@/components/ui/loading-spinner"
import { Logo } from "@/components/Logo"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function SuperAdminLayout({
    children,
}: {
    children: React.ReactNode
}) {
    const { data: session, status } = useSession()
    const pathname = usePathname()
    const router = useRouter()
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
    const { t } = useI18n()

    useEffect(() => {
        if (status === "unauthenticated") {
            router.push("/login")
        }
    }, [status, router])

    if (status === "loading") {
        return <LoadingSpinner />
    }

    if (!session) return null

    const user = session.user as any

    if (user.role !== "SUPER_ADMIN") {
        router.push("/modules")
        return null
    }

    const navItems = [
        { href: "/super-admin", label: "Dashboard", icon: LayoutDashboard },
        { href: "/super-admin/organizations", label: "Organizações", icon: Building2 },
    ]

    return (
        <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
            <nav className="bg-white dark:bg-gray-800 border-b dark:border-gray-700 relative z-50">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="flex justify-between h-16">
                        <div className="flex">
                            <div className="flex-shrink-0 flex items-center gap-3">
                                <Link href="/super-admin" className="flex items-center gap-2">
                                    <Logo size="medium" />
                                    <span className="text-xl font-bold dark:text-white flex items-center gap-2">
                                        <Shield className="h-5 w-5 text-red-600" />
                                        Super Admin
                                    </span>
                                </Link>
                            </div>
                            <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                                {navItems.map((item) => {
                                    const isActive = item.href === "/super-admin"
                                        ? pathname === "/super-admin"
                                        : pathname.startsWith(item.href);

                                    return (
                                        <Link
                                            key={item.href}
                                            href={item.href}
                                            className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors ${isActive
                                                ? "border-blue-500 text-gray-900 dark:text-white"
                                                : "border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-200"
                                                }`}
                                        >
                                            {item.label}
                                        </Link>
                                    );
                                })}
                            </div>
                        </div>

                        <div className="flex items-center gap-2 sm:gap-3">
                            <ThemeToggle />
                            <LanguageToggle />

                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        className="rounded-full border border-gray-300 dark:border-gray-700"
                                    >
                                        {user.name ? (
                                            <span className="text-xs font-semibold uppercase">
                                                {user.name
                                                    .split(" ")
                                                    .map((n: string) => n[0])
                                                    .join("")
                                                    .slice(0, 2)}
                                            </span>
                                        ) : (
                                            <UserIcon className="h-4 w-4" />
                                        )}
                                    </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end" className="w-56">
                                    <div className="px-2 py-1.5 text-xs text-gray-500 dark:text-gray-400">
                                        <div className="font-medium text-gray-900 dark:text-gray-100 truncate">
                                            {user.name || user.email}
                                        </div>
                                        {user.email && user.name && (
                                            <div className="truncate">{user.email}</div>
                                        )}
                                    </div>
                                    <DropdownMenuSeparator />
                                    <DropdownMenuItem asChild>
                                        <Link href="/account/profile">{t("nav.profile") || "Perfil"}</Link>
                                    </DropdownMenuItem>
                                    <DropdownMenuSeparator />
                                    <DropdownMenuItem asChild>
                                        <Link href="/modules">Voltar para Módulos</Link>
                                    </DropdownMenuItem>
                                    <DropdownMenuSeparator />
                                    <DropdownMenuItem onClick={() => signOut({ callbackUrl: "/login" })}>
                                        {t("nav.logout") || "Sair"}
                                    </DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>

                            <Button
                                variant="ghost"
                                size="icon"
                                className="sm:hidden"
                                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                            >
                                {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
                            </Button>
                        </div>
                    </div>
                </div>

                {mobileMenuOpen && (
                    <div className="sm:hidden border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 animate-in slide-in-from-top duration-300">
                        <div className="px-2 pt-2 pb-3 space-y-1">
                            {navItems.map((item) => {
                                const isActive = item.href === "/super-admin"
                                    ? pathname === "/super-admin"
                                    : pathname.startsWith(item.href);

                                return (
                                    <Link
                                        key={item.href}
                                        href={item.href}
                                        className={`block px-3 py-2 rounded-md text-base font-medium ${isActive
                                            ? "bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white"
                                            : "text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
                                            }`}
                                        onClick={() => setMobileMenuOpen(false)}
                                    >
                                        <div className="flex items-center gap-3">
                                            <item.icon className="h-5 w-5" />
                                            {item.label}
                                        </div>
                                    </Link>
                                )
                            })}

                            <div className="border-t dark:border-gray-700 my-2 pt-2">
                                <Link
                                    href="/modules"
                                    className="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
                                    onClick={() => setMobileMenuOpen(false)}
                                >
                                    <div className="flex items-center gap-3">
                                        <LayoutDashboard className="h-5 w-5" />
                                        Voltar para Módulos
                                    </div>
                                </Link>
                                <Button
                                    variant="ghost"
                                    className="w-full justify-start gap-3 px-3 py-2 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20"
                                    onClick={() => signOut({ callbackUrl: "/login" })}
                                >
                                    <LogOut className="h-5 w-5" />
                                    {t("nav.logout") || "Sair"}
                                </Button>
                            </div>
                        </div>
                    </div>
                )}
            </nav>
            <main className="max-w-7xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8">
                {children}
            </main>
        </div>
    )
}