"use client"

import { useState }                      from "react";
import Link                              from "next/link";
import { usePathname }                   from "next/navigation";
import { cn }                            from "@/lib/utils";
import { Button }                        from "@/components/ui/button";
import { ChevronRight, ChevronLeft } from "lucide-react";

export function AppSidebar({
  open    = false,
  setOpenAction = (open) => {},
  navigation = [],
}: {
  open?:    boolean,
  setOpenAction?: (open: boolean) => void,
  navigation?: Array<{
    name: string,
    icon: any,
  } & ({ href: string } | {
    children: {
      name: string,
      href: string,
      icon: any,
    }[]
  })>;
}) {
  const pathname = usePathname();
  const [expanded, setExpanded] = useState<string[]>([]);

  const toggleExpand = (name: string) => {
    setExpanded((prev) =>
      prev.includes(name) ? prev.filter((n) => n !== name) : [...prev, name]
    );
  };

  return (
    <>
      <aside
        className={cn(
          'fixed inset-y-0 left-0 z-50 lg:z-40 w-64 bg-sidebar',
          'border-r border-sidebar-border transform',
          ' transition-transform duration-200 ease-in-out',
          'lg:translate-x-0',
          open ? "translate-x-0" : "-translate-x-full",
        )}
      >
        <div className="flex flex-col h-full">
          <div className="flex items-center justify-between gap-3 px-4 py-3 border-b border-transparent">
            <Link className="py-0.5 inline-block" href="/">
              <img src="/images/img-20251126-wa0012-1.jpg" alt="Kokotrack" className="h-8 w-auto" />
            </Link>
            <Button className="lg:hidden" variant="ghost" size="icon" onClick={() => setOpenAction(false)}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
          </div>

          <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
            {navigation.map((item) => {
              if ('children' in item) {
                const isExpanded = expanded.includes(item.name);
                const isActive = item.children.some((child: any) => child.href === pathname);

                return (
                  <div key={item.name}>
                    <button
                      onClick={() => toggleExpand(item.name)}
                      className={cn(
                        "w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors cursor-pointer",
                        isActive || isExpanded
                          ? "text-sidebar-foreground"
                          : "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground"
                      )}
                    >
                      <item.icon className="h-5 w-5 text-primary" />
                      <span className="flex-1 text-left">{item.name}</span>
                      <ChevronRight
                        className={cn(
                          "h-4 w-4 transition-transform duration-200",
                          isExpanded && "rotate-90"
                        )}
                      />
                    </button>
                    <div
                      className={cn(
                        "overflow-hidden transition-all duration-300 ease-in-out",
                        isExpanded ? "max-h-48 opacity-100" : "max-h-0 opacity-0"
                      )}
                    >
                      <div className="mt-1 space-y-1 pl-4">
                        {item.children.map((child: any) => {
                          const isChildActive = pathname === child.href;
                          return (
                            <Link
                              key={child.name}
                              href={child.href}
                              className={cn(
                                "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
                                isChildActive
                                  ? "bg-sidebar-accent text-sidebar-accent-foreground"
                                  : "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground"
                              )}
                              onClick={() => setOpenAction(false)}
                            >
                              <child.icon className="h-4 w-4 text-primary" />
                              {child.name}
                            </Link>
                          );
                        })}
                      </div>
                    </div>
                  </div>
                );
              }

              const isActive = pathname === item.href;
              return (
                <Link
                  key={item.name}
                  href={item.href}
                  className={cn(
                    "flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors",
                    isActive
                      ? "bg-sidebar-accent text-sidebar-accent-foreground"
                      : "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground",
                  )}
                  onClick={() => setOpenAction(false)}
                >
                  <item.icon className="h-5 w-5 text-primary" />
                  {item.name}
                </Link>
              )
            })}
          </nav>
{/* 
          <div className="p-4 border-t border-sidebar-border">
            <div className="text-xs text-sidebar-foreground/50 mb-2">Account Balance</div>
            <div className="text-2xl font-bold text-sidebar-foreground">$12,450</div>
            <div className="text-xs text-success mt-1">+$1,250 (11.2%) this month</div>
          </div> */}
        </div>
      </aside>

      {open && (
        <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setOpenAction(false)} />
      )}

    </>
  )
}