"use client"

import { useSession } from "next-auth/react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
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 { signOut } from "next-auth/react"
import { User as UserIcon } from "lucide-react"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function AccountLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const { data: session, status } = useSession()
  const router = useRouter()
  const { t } = useI18n()

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

  if (!session) {
    router.push("/login")
    return null
  }

  const user = session.user as any

  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">
        <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 items-center gap-3">
              <Link href="/modules" className="flex items-center gap-2">
                <Logo size="medium" />
                <span className="text-xl font-bold text-gray-900 dark:text-white">
                  Módulos
                </span>
              </Link>
            </div>
            <div className="flex items-center 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")}</Link>
                  </DropdownMenuItem>
                  {(user.role === "ADMIN" || user.role === "SUPER_ADMIN") && (
                    <>
                      <DropdownMenuItem asChild>
                        <Link href="/admin/users">{t("nav.users")}</Link>
                      </DropdownMenuItem>
                      <DropdownMenuItem asChild>
                        <Link href="/admin/audit">{t("nav.audit")}</Link>
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
                    </>
                  )}
                  <DropdownMenuItem
                    onClick={() => {
                      signOut({ callbackUrl: "/login" })
                    }}
                  >
                    {t("nav.logout")}
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        </div>
      </nav>

      <main className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
        {children}
      </main>
    </div>
  )
}