"use client"

import type React from "react"
import { useState } from "react"
import { usePathname, useRouter } from "next/navigation"
import { useAuth } from "@/lib/auth-context"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  LayoutDashboard,
  Users,
  FileText,
  UserCog,
  Menu,
  X,
  Leaf,
  LogOut,
  ChevronDown,
  Building2,
  MapPin,
  Package,
  Calendar,
  Plus,
  BarChart3,
  Tractor,
  CloudRain,
  ClipboardList,
  Wrench,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { ModeToggle } from "@/components/mode-toggle"

interface DashboardLayoutProps {
  children: React.ReactNode
}

export function DashboardLayout({ children }: DashboardLayoutProps) {
  const { user, logout } = useAuth()
  const [sidebarOpen, setSidebarOpen] = useState(false)
  const pathname = usePathname()
  const router = useRouter()

  const handleLogout = () => {
    logout()
    router.push("/login")
  }

  const isAdmin = user?.role === "admin"

  const navigation = [
    {
      name: "Dashboard",
      href: "/dashboard",
      icon: LayoutDashboard,
      show: true,
    },
    {
      name: "Análisis de Producción",
      href: "/dashboard/analisis",
      icon: BarChart3,
      show: true,
    },
    {
      name: "Productores",
      href: "/dashboard/productores",
      icon: Users,
      show: true,
    },
    {
      name: "Establecimientos",
      href: "/dashboard/establecimientos",
      icon: MapPin,
      show: true,
    },
    {
      name: "Insumos",
      href: "/dashboard/insumos",
      icon: Package,
      show: true,
    },
    {
      name: "Labores",
      href: "/dashboard/labores",
      icon: Wrench,
      show: true,
    },
    {
      name: "Prestadores",
      href: "/dashboard/prestadores",
      icon: Tractor,
      show: true,
    },
    {
      name: "Campañas",
      href: "/dashboard/campanas",
      icon: Calendar,
      show: true,
    },
    {
      name: "Recetas",
      href: "/dashboard/recetas",
      icon: FileText,
      show: true,
    },
    {
      name: "Historial de Lotes",
      href: "/dashboard/historial-lotes",
      icon: FileText,
      show: true,
    },
    {
      name: "Precipitaciones",
      href: "/dashboard/precipitaciones",
      icon: CloudRain,
      show: true,
    },
    {
      name: "Monitoreo de Campo",
      href: "/dashboard/visitas",
      icon: ClipboardList,
      show: true,
    },
    {
      name: "Usuarios",
      href: "/dashboard/usuarios",
      icon: UserCog,
      show: isAdmin,
    },
    {
      name: "Configuración",
      href: "/dashboard/configuracion",
      icon: UserCog,
      show: isAdmin,
    },
  ]

  const visibleNavigation = navigation.filter((item) => item.show)

  const getInitials = (name: string) => {
    return name
      .split(" ")
      .map((n) => n[0])
      .join("")
      .toUpperCase()
      .slice(0, 2)
  }

  const getPageTitle = () => {
    const exactMatch = visibleNavigation.find((item) => item.href === pathname)
    if (exactMatch) return exactMatch.name

    const partialMatch = visibleNavigation.find(
      (item) => item.href !== "/dashboard" && pathname.startsWith(item.href)
    )
    if (partialMatch) return partialMatch.name

    return "Dashboard"
  }

  return (
    <div className="flex h-screen w-full overflow-hidden bg-background print:h-auto print:overflow-visible">
      {/* Sidebar Desktop */}
      <aside className="hidden w-64 flex-col border-r border-border bg-sidebar lg:flex print:hidden">
        <div className="flex h-24 items-center justify-center border-b border-sidebar-border px-6">
          <div className="flex items-center justify-center h-full py-4">
            <img src="/logo_transparent.png" alt="AgroRecetas" className="h-16 w-auto object-contain dark:hidden" />
            <img src="/logo_transparent.png" alt="AgroRecetas" className="h-16 w-auto object-contain hidden dark:block" />
          </div>
        </div>

        <ScrollArea className="flex-1 px-3 py-4">
          <nav className="space-y-1">
            {visibleNavigation.map((item) => {
              const Icon = item.icon
              const isActive = pathname === item.href || (item.href !== "/dashboard" && pathname.startsWith(item.href))
              return (
                <Button
                  key={item.name}
                  variant={isActive ? "secondary" : "ghost"}
                  className={cn(
                    "w-full justify-start gap-3",
                    isActive
                      ? "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
                      : "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                  )}
                  onClick={() => router.push(item.href)}
                >
                  <Icon className="h-5 w-5" />
                  {item.name}
                </Button>
              )
            })}
          </nav>

          <div className="mt-6 px-2">
            <Button
              className="w-full justify-start gap-3 bg-primary hover:bg-primary/90"
              onClick={() => router.push("/dashboard/recetas/nueva")}
            >
              <Plus className="h-5 w-5" />
              Nueva Receta
            </Button>
          </div>
        </ScrollArea>

        <div className="border-t border-sidebar-border p-4">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="w-full justify-start gap-3 hover:bg-sidebar-accent">
                <Avatar className="h-8 w-8">
                  <AvatarFallback className="bg-primary text-xs text-primary-foreground">
                    {user && getInitials(user.name)}
                  </AvatarFallback>
                </Avatar>
                <div className="flex flex-1 flex-col items-start text-left">
                  <span className="text-sm font-medium text-sidebar-foreground">{user?.name}</span>
                  <span className="text-xs text-sidebar-foreground/60 capitalize">{user?.role}</span>
                </div>
                <ChevronDown className="h-4 w-4 text-sidebar-foreground/60" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-56">
              <DropdownMenuLabel>Mi Cuenta</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={handleLogout}>
                <LogOut className="mr-2 h-4 w-4" />
                Cerrar Sesión
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </aside>

      {/* Sidebar Mobile */}
      {sidebarOpen && (
        <div className="fixed inset-0 z-50 lg:hidden">
          <div className="fixed inset-0 bg-background/80 backdrop-blur-sm" onClick={() => setSidebarOpen(false)} />
          <aside className="fixed inset-y-0 left-0 w-64 flex-col border-r border-border bg-sidebar flex">
            <div className="flex h-20 items-center justify-between border-b border-sidebar-border px-6">
              <div className="flex flex-1 items-center justify-center">
                <div className="flex items-center justify-center h-full py-2">
                  <img src="/logo_transparent.png" alt="AgroRecetas" className="h-14 w-auto object-contain dark:hidden" />
                  <img src="/logo_transparent.png" alt="AgroRecetas" className="h-14 w-auto object-contain hidden dark:block" />
                </div>
              </div>
              <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(false)} className="absolute right-4 top-5">
                <X className="h-5 w-5" />
              </Button>
            </div>

            <ScrollArea className="flex-1 px-3 py-4">
              <nav className="space-y-1">
                {visibleNavigation.map((item) => {
                  const Icon = item.icon
                  const isActive = pathname === item.href || (item.href !== "/dashboard" && pathname.startsWith(item.href))
                  return (
                    <Button
                      key={item.name}
                      variant={isActive ? "secondary" : "ghost"}
                      className={cn(
                        "w-full justify-start gap-3",
                        isActive
                          ? "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
                          : "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                      )}
                      onClick={() => {
                        router.push(item.href)
                        setSidebarOpen(false)
                      }}
                    >
                      <Icon className="h-5 w-5" />
                      {item.name}
                    </Button>
                  )
                })}
              </nav>

              <div className="mt-6 px-2">
                <Button
                  className="w-full justify-start gap-3 bg-primary hover:bg-primary/90"
                  onClick={() => {
                    router.push("/dashboard/recetas/nueva")
                    setSidebarOpen(false)
                  }}
                >
                  <Plus className="h-5 w-5" />
                  Nueva Receta
                </Button>
              </div>
            </ScrollArea>

            <div className="border-t border-sidebar-border p-4">
              <div className="flex items-center gap-3 px-3 py-2">
                <Avatar className="h-8 w-8">
                  <AvatarFallback className="bg-primary text-xs text-primary-foreground">
                    {user && getInitials(user.name)}
                  </AvatarFallback>
                </Avatar>
                <div className="flex flex-1 flex-col">
                  <span className="text-sm font-medium text-sidebar-foreground">{user?.name}</span>
                  <span className="text-xs text-sidebar-foreground/60 capitalize">{user?.role}</span>
                </div>
              </div>
              <Button variant="ghost" className="w-full justify-start gap-2 mt-2" onClick={handleLogout}>
                <LogOut className="h-4 w-4" />
                Cerrar Sesión
              </Button>
            </div>
          </aside>
        </div>
      )}

      {/* Main Content */}
      <div className="flex flex-1 flex-col overflow-hidden print:overflow-visible">
        {/* Header */}
        <header className="flex h-16 items-center gap-4 border-b border-border bg-card px-4 lg:px-6 print:hidden">
          <Button variant="ghost" size="icon" className="lg:hidden" onClick={() => setSidebarOpen(true)}>
            <Menu className="h-5 w-5" />
          </Button>
          <div className="flex flex-1 items-center justify-between">
            <div>
              <h2 className="text-lg font-semibold text-foreground">
                {getPageTitle()}
              </h2>
            </div>
            <div className="flex items-center gap-4">
              <div className="flex items-center gap-2">
                <span className="hidden text-sm text-muted-foreground sm:inline-block">{user?.email}</span>
                <div className="hidden h-6 w-px bg-border sm:block" />
                <span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary capitalize">
                  {user?.role}
                </span>
              </div>
              <ModeToggle />
            </div>
          </div>
        </header>

        {/* Page Content */}
        <main className="flex-1 overflow-auto bg-background p-4 lg:p-6 print:overflow-visible print:p-0">{children}</main>
      </div>
    </div>
  )
}