"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  Home, Users, BookOpen, FileText, CreditCard, Scissors, Gift, RefreshCw,
  Settings, BarChart3, ClipboardCheck, Building2, BadgePercent
} from "lucide-react";

const menuItems = [
  { name: "Inicio", href: "/", icon: Home },
  { name: "Socios", href: "/socios", icon: Users },
  { name: "Lecturas", href: "/lecturas", icon: BookOpen },
  { name: "Facturación", href: "/facturacion", icon: FileText },
  { name: "Pagos", href: "/pagos", icon: CreditCard },
  { name: "Condonaciones", href: "/condonaciones", icon: BadgePercent },
  { name: "Cortes", href: "/cortes", icon: Scissors },
  { name: "Subsidios", href: "/subsidios", icon: Gift },
  { name: "Repactaciones", href: "/repactaciones", icon: RefreshCw },
  { name: "Cierre Mensual", href: "/cierre", icon: ClipboardCheck },
  { name: "Reportes", href: "/reportes", icon: BarChart3 },
  { name: "Mantenedores", href: "/mantenedores", icon: Building2 },
  { name: "Configuración", href: "/configuracion", icon: Settings },
];

export default function Sidebar() {
  const pathname = usePathname();

  return (
    <aside className="hidden md:flex fixed left-0 top-0 h-full w-64 bg-gray-900 text-white z-30 flex-col">
      {/* Título arriba */}
      <div className="p-4 border-b border-gray-700 flex-shrink-0">
        <h1 className="text-xl font-bold">Sistema APR</h1>
        <p className="text-xs text-gray-400">Agua Potable Rural</p>
      </div>

      {/* Menú en el medio - scrollable */}
      <nav className="flex-1 overflow-y-auto p-4">
        <ul className="space-y-1">
          {menuItems.map((item) => {
            const isActive = pathname === item.href || 
              (item.href !== "/" && pathname.startsWith(item.href));
            const isReportes = item.href === "/reportes";
            const reportesOpen = isReportes && (pathname === "/reportes" || pathname.startsWith("/reportes/"));
            const isMantenedores = item.href === "/mantenedores";
            const mantenedoresOpen =
              isMantenedores && (pathname === "/mantenedores" || pathname.startsWith("/mantenedores/"));
            
            return (
              <li key={item.name}>
                <Link
                  href={item.href}
                  className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
                    isActive
                      ? "bg-blue-600 text-white"
                      : "text-gray-300 hover:bg-gray-800 hover:text-white"
                  }`}
                >
                  <item.icon className="w-5 h-5" />
                  <span className="text-sm">{item.name}</span>
                </Link>

                {isReportes && reportesOpen && (
                  <ul className="mt-1 ml-6 space-y-1">
                    <li>
                      <Link
                        href="/reportes/boletas"
                        className={`block px-3 py-2 rounded-lg text-sm transition-colors ${
                          pathname.startsWith("/reportes/boletas")
                            ? "bg-gray-800 text-white"
                            : "text-gray-300 hover:bg-gray-800 hover:text-white"
                        }`}
                      >
                        Boletas por Sector
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/reportes/pagos"
                        className={`block px-3 py-2 rounded-lg text-sm transition-colors ${
                          pathname.startsWith("/reportes/pagos")
                            ? "bg-gray-800 text-white"
                            : "text-gray-300 hover:bg-gray-800 hover:text-white"
                        }`}
                      >
                        Histórico de Pagos
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/reportes/subsidios"
                        className={`block px-3 py-2 rounded-lg text-sm transition-colors ${
                          pathname.startsWith("/reportes/subsidios")
                            ? "bg-gray-800 text-white"
                            : "text-gray-300 hover:bg-gray-800 hover:text-white"
                        }`}
                      >
                        Subsidios Otorgados
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/reportes/consumo"
                        className={`block px-3 py-2 rounded-lg text-sm transition-colors ${
                          pathname.startsWith("/reportes/consumo")
                            ? "bg-gray-800 text-white"
                            : "text-gray-300 hover:bg-gray-800 hover:text-white"
                        }`}
                      >
                        Consumo Mensual
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/reportes/deudas"
                        className={`block px-3 py-2 rounded-lg text-sm transition-colors ${
                          pathname.startsWith("/reportes/deudas")
                            ? "bg-gray-800 text-white"
                            : "text-gray-300 hover:bg-gray-800 hover:text-white"
                        }`}
                      >
                        Reporte de Deudas
                      </Link>
                    </li>
                  </ul>
                )}

                {isMantenedores && mantenedoresOpen && (
                  <ul className="mt-1 ml-6 space-y-1">
                    <li>
                      <Link
                        href="/mantenedores/sectores"
                        className={`block px-3 py-2 rounded-lg text-sm transition-colors ${
                          pathname.startsWith("/mantenedores/sectores")
                            ? "bg-gray-800 text-white"
                            : "text-gray-300 hover:bg-gray-800 hover:text-white"
                        }`}
                      >
                        Sectores
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/mantenedores/tramos"
                        className={`block px-3 py-2 rounded-lg text-sm transition-colors ${
                          pathname.startsWith("/mantenedores/tramos")
                            ? "bg-gray-800 text-white"
                            : "text-gray-300 hover:bg-gray-800 hover:text-white"
                        }`}
                      >
                        Tramos
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/mantenedores/tipo-medidores"
                        className={`block px-3 py-2 rounded-lg text-sm transition-colors ${
                          pathname.startsWith("/mantenedores/tipo-medidores")
                            ? "bg-gray-800 text-white"
                            : "text-gray-300 hover:bg-gray-800 hover:text-white"
                        }`}
                      >
                        Tipo Medidores
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/mantenedores/tipos-documento"
                        className={`block px-3 py-2 rounded-lg text-sm transition-colors ${
                          pathname.startsWith("/mantenedores/tipos-documento")
                            ? "bg-gray-800 text-white"
                            : "text-gray-300 hover:bg-gray-800 hover:text-white"
                        }`}
                      >
                        Tipos Documento
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/mantenedores/ciudades"
                        className={`block px-3 py-2 rounded-lg text-sm transition-colors ${
                          pathname.startsWith("/mantenedores/ciudades")
                            ? "bg-gray-800 text-white"
                            : "text-gray-300 hover:bg-gray-800 hover:text-white"
                        }`}
                      >
                        Ciudades
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/mantenedores/comunas"
                        className={`block px-3 py-2 rounded-lg text-sm transition-colors ${
                          pathname.startsWith("/mantenedores/comunas")
                            ? "bg-gray-800 text-white"
                            : "text-gray-300 hover:bg-gray-800 hover:text-white"
                        }`}
                      >
                        Comunas
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/mantenedores/bancos"
                        className={`block px-3 py-2 rounded-lg text-sm transition-colors ${
                          pathname.startsWith("/mantenedores/bancos")
                            ? "bg-gray-800 text-white"
                            : "text-gray-300 hover:bg-gray-800 hover:text-white"
                        }`}
                      >
                        Bancos
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/mantenedores/cuentas-banco"
                        className={`block px-3 py-2 rounded-lg text-sm transition-colors ${
                          pathname.startsWith("/mantenedores/cuentas-banco")
                            ? "bg-gray-800 text-white"
                            : "text-gray-300 hover:bg-gray-800 hover:text-white"
                        }`}
                      >
                        Cuentas Banco
                      </Link>
                    </li>
                  </ul>
                )}
              </li>
            );
          })}
        </ul>
      </nav>

      {/* Footer abajo */}
      <div className="p-4 border-t border-gray-700 flex-shrink-0">
        <p className="text-xs text-gray-400">v1.0.0</p>
      </div>
    </aside>
  );
}