"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,
  CheckCircle,
  UserCog,
  Menu,
  X,
  Building2,
  LogOut,
  ChevronDown,
  ClipboardList,
  DollarSign,
  Tag,
} 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: "Lista de Precios",
      href: "/dashboard/precios",
      icon: DollarSign,
      show: true,
    },
    {
      name: "Categorías",
      href: "/dashboard/categorias",
      icon: Tag,
      show: isAdmin,
    },
    {
      name: "Usuarios",
      href: "/dashboard/usuarios",
      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 "Panel de Control"
  }

  const SidebarContent = () => (
    <>
      <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>
      </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>
    </>
  )

  return (
    <div className="flex h-screen w-full overflow-hidden bg-background">
      {/* Sidebar Desktop */}
      <aside className="hidden w-64 flex-col border-r border-border bg-sidebar lg:flex">
        <div className="flex h-16 items-center gap-3 border-b border-sidebar-border px-6">
          <div className="flex items-center justify-center rounded-lg bg-yellow-100 p-1 w-14 h-10">
            <img src="/logo.png" alt="Logo Belén S.A." className="max-h-full max-w-full object-contain" />
          </div>
          <div>
            <h1 className="text-sm font-bold text-sidebar-foreground leading-tight">Belén S.A.</h1>
            <p className="text-xs text-sidebar-foreground/60">Gestor de Precios</p>
          </div>
        </div>
        <SidebarContent />
      </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-16 items-center justify-between border-b border-sidebar-border px-6">
              <div className="flex items-center gap-3">
                <div className="flex items-center justify-center rounded-lg bg-yellow-100 p-1 w-14 h-10">
                  <img src="/logo.png" alt="Logo Belén S.A." className="max-h-full max-w-full object-contain" />
                </div>
                <div>
                  <h1 className="text-sm font-bold text-sidebar-foreground leading-tight">Belén S.A.</h1>
                  <p className="text-xs text-sidebar-foreground/60">Gestor de Precios</p>
                </div>
              </div>
              <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(false)}>
                <X className="h-5 w-5" />
              </Button>
            </div>
            <SidebarContent />
          </aside>
        </div>
      )}

      {/* Main Content */}
      <div className="flex flex-1 flex-col overflow-hidden">
        {/* Header */}
        <header className="flex h-16 items-center gap-4 border-b border-border bg-card px-4 lg:px-6">
          <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?.name}
                </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">{children}</main>
      </div>
    </div>
  )
}