"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { FileText, Settings, Settings2 } from "lucide-react"
import { cn } from "@/lib/utils"

const menuItems = [
  {
    title: "Trámites",
    href: "/",
    icon: FileText,
    roles: ["lectura", "edicion", "admin"],
  },
  {
    title: "Configuraciones",
    href: "/catalogos",
    icon: Settings2,
    roles: ["lectura", "edicion", "admin"],
  },
  {
    title: "Configuración",
    href: "/configuracion",
    icon: Settings,
    roles: ["admin"],
  },
]

interface AppSidebarProps {
  userRole?: "lectura" | "edicion" | "admin"
}

export function AppSidebar({ userRole = "edicion" }: AppSidebarProps) {
  const pathname = usePathname()

  // Filtrar items según rol del usuario
  const filteredItems = menuItems.filter((item) => item.roles.includes(userRole))

  return (
    <aside className="fixed left-0 top-0 z-40 h-screen w-64 border-r border-sidebar-border bg-sidebar">
      <div className="flex h-full flex-col">
        {/* Logo / Branding */}
        <div className="flex h-16 items-center border-b border-sidebar-border px-6">
          <div className="flex items-center gap-2">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
              <FileText className="h-5 w-5 text-primary-foreground" />
            </div>
            <div className="flex flex-col">
              <span className="text-sm font-semibold text-sidebar-foreground">Gestión de Trámites</span>
              <span className="text-xs text-muted-foreground">Cooperativa</span>
            </div>
          </div>
        </div>

        {/* Navigation */}
        <nav className="flex-1 space-y-1 p-4">
          {filteredItems.map((item) => {
            const Icon = item.icon
            const isActive = pathname === item.href || pathname?.startsWith(item.href + "/")

            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                  isActive
                    ? "bg-sidebar-accent text-sidebar-accent-foreground"
                    : "text-sidebar-foreground hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground",
                )}
              >
                <Icon className="h-5 w-5" />
                {item.title}
              </Link>
            )
          })}
        </nav>

        {/* Footer con info de rol */}
        <div className="border-t border-sidebar-border p-4">
          <div className="rounded-lg bg-sidebar-accent/50 px-3 py-2">
            <p className="text-xs text-muted-foreground">Rol actual</p>
            <p className="text-sm font-medium text-sidebar-foreground capitalize">{userRole}</p>
          </div>
        </div>
      </div>
    </aside>
  )
}