"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 { useModuleAccess } from "@/hooks/use-module-access"
import { ModuleGuard } from "@/components/ModuleGuard"
import { PeriodicAlerts } from "@/components/PeriodicAlerts"
import type { Documento as EquipDoc, Evento as EquipEvent } from "@/lib/notifications"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function PeopleAdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const { data: session, status } = useSession()
  const router = useRouter()
  const { t } = useI18n()
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const hasPeopleAccess = useModuleAccess("people")
  const [alertDocs, setAlertDocs] = useState<EquipDoc[]>([])

  const safeT = (key: string, fallback: string) => {
    const value = t(key)
    if (!value || value === key) return fallback
    return value
  }

  useEffect(() => {
    if (status === "authenticated" && hasPeopleAccess === false) {
      router.push("/modules")
    }
  }, [status, hasPeopleAccess, router])

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

    const fetchDocs = async () => {
      try {
        const res = await fetch("/api/people-documents")
        if (!res.ok) return

        const data = await res.json()
        if (!Array.isArray(data)) return

        const mapped: EquipDoc[] = data.map((doc: any) => ({
          id: doc.id,
          titulo: doc.titulo,
          dataVencimento: doc.dataValidade || undefined,
          equipamento: {
            matricula: doc.person?.nomeCompleto,
            parque: doc.person?.departamento || undefined,
            modelo: "Pessoa",
          },
        }))

        setAlertDocs(mapped)
      } catch {

      }
    }

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

  if (status === "loading" || (status === "authenticated" && hasPeopleAccess === null)) {
    return <LoadingSpinner />
  }

  if (!session || hasPeopleAccess === false) {
    router.push("/modules")
    return null
  }

  const user = session.user as any

  return (
    <ModuleGuard module="people">
      <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]">
                    / {safeT("modules.people.title", "Gestão de pessoas")}
                  </span>
                </div>
                <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                  <Link
                    href="/module-people/admin"
                    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"
                  >
                    {safeT("nav.dashboard", "Dashboard")}
                  </Link>
                  <Link
                    href="/module-people/admin/people"
                    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"
                  >
                    {safeT("modules.people.title", "Pessoas")}
                  </Link>
                  <Link
                    href="/module-people/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"
                  >
                    {safeT("documents.title", "Documentos")}
                  </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="sm:hidden border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
              <div className="px-4 py-4 space-y-1">
                <Link
                  href="/module-people/admin"
                  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)}
                >
                  {safeT("nav.dashboard", "Dashboard")}
                </Link>
                <Link
                  href="/module-people/admin/people"
                  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)}
                >
                  {safeT("modules.people.title", "Pessoas")}
                </Link>
                <Link
                  href="/module-people/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)}
                >
                  {safeT("documents.title", "Documentos")}
                </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={alertDocs} eventos={[]} intervalMinutes={30} />
      </div>
    </ModuleGuard>
  )
}