"use client"

import { useState, useEffect } from "react"
import { useSession, signOut } from "next-auth/react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Menu, X, User as UserIcon } 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 { PeriodicAlerts } from "@/components/PeriodicAlerts"
import type { Documento, Evento } from "@/lib/notifications"
import { useModuleAccess } from "@/hooks/use-module-access"
import { ModuleGuard } from "@/components/ModuleGuard"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const { data: session, status } = useSession()
  const router = useRouter()
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const { t } = useI18n()
  const [documentos, setDocumentos] = useState<Documento[]>([])
  const [eventos, setEventos] = useState<Evento[]>([])
  const hasEquipamentosAccess = useModuleAccess("equipamentos")

  useEffect(() => {
    if (status !== "authenticated") return

    const fetchData = async () => {
      try {
        const [docsRes, eventsRes] = await Promise.all([
          fetch("/api/documentos"),
          fetch("/api/eventos"),
        ])

        if (docsRes.ok) {
          const docs = await docsRes.json()
          setDocumentos(docs)
        }

        if (eventsRes.ok) {
          const events = await eventsRes.json()
          setEventos(events)
        }
      } catch (error) {

      }
    }

    fetchData()

    const interval = setInterval(fetchData, 5 * 60 * 1000)
    return () => clearInterval(interval)
  }, [status])

  useEffect(() => {
    if (status === "authenticated" && session?.user) {
      const user = session.user as any

      if (user.role === "ADMIN" || user.role === "SUPER_ADMIN") {
        return
      }

      if (hasEquipamentosAccess === false) {
        router.push("/modules")
      }
    }
  }, [status, hasEquipamentosAccess, router, session])

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

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

  const user = session.user as any

  if (user.role === "ADMIN" || user.role === "SUPER_ADMIN") {

  } else if (status === "authenticated" && hasEquipamentosAccess === null) {

    return <LoadingSpinner />
  }

  return (
    <ModuleGuard module="equipamentos">
      <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="/modules" className="flex items-center gap-2">
                    <Logo size="medium" />
                    <span className="text-xl font-bold dark:text-white">
                      Módulos
                    </span>
                  </Link>
                  <span className="hidden lg:inline text-sm text-gray-500 dark:text-gray-400 truncate max-w-[220px]">
                    / {t("modules.equipment.title") || t("nav.vehicles")}
                  </span>
                </div>
                <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                  <Link
                    href="/module-equipament/admin/equipment"
                    className="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 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
                  >
                    {t("nav.vehicles")}
                  </Link>
                  <Link
                    href="/module-equipament/admin/documents"
                    className="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 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
                  >
                    {t("nav.documents")}
                  </Link>
                  <Link
                    href="/module-equipament/admin/events"
                    className="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 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
                  >
                    {t("nav.events")}
                  </Link>
                </div>
              </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>
                <Button
                  variant="ghost"
                  size="icon"
                  className="sm:hidden"
                  onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                  aria-label="Toggle menu"
                >
                  {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
                </Button>
              </div>
            </div>
          </div>
          { }
          {mobileMenuOpen && (
            <>
              { }
              <div
                className="fixed top-16 left-0 right-0 bottom-0 bg-black/50 z-40 sm:hidden"
                onClick={() => setMobileMenuOpen(false)}
              />
              { }
              <div className="fixed top-16 left-0 right-0 bg-white dark:bg-gray-800 border-b dark:border-gray-700 shadow-lg z-50 sm:hidden max-h-[calc(100vh-4rem)] overflow-y-auto">
                <div className="px-4 py-4 space-y-1">
                  <Link
                    href="/module-equipament/admin/equipment"
                    className="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("nav.vehicles")}
                  </Link>
                  <Link
                    href="/module-equipament/admin/documents"
                    className="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("nav.documents")}
                  </Link>
                  <Link
                    href="/module-equipament/admin/events"
                    className="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("nav.events")}
                  </Link>
                  <Link
                    href="/account/profile"
                    className="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("nav.profile")}
                  </Link>
                  {(user.role === "ADMIN" || user.role === "SUPER_ADMIN") && (
                    <>
                      <Link
                        href="/admin/users"
                        className="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md transition-colors"
                        onClick={() => setMobileMenuOpen(false)}
                      >
                        {t("nav.users")}
                      </Link>
                      <Link
                        href="/admin/audit"
                        className="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md transition-colors"
                        onClick={() => setMobileMenuOpen(false)}
                      >
                        {t("nav.audit")}
                      </Link>
                    </>
                  )}

                  { }
                  <div className="border-t dark:border-gray-700 my-3" />

                  { }
                  <div className="px-3 py-2">
                    <div className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
                      {user.name || user.email}
                    </div>
                    <Button
                      variant="outline"
                      className="w-full"
                      onClick={() => {
                        signOut({ callbackUrl: "/login" })
                      }}
                    >
                      {t("nav.logout")}
                    </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>
        <PeriodicAlerts documentos={documentos} eventos={eventos} intervalMinutes={30} />
      </div>
    </ModuleGuard>
  )
}