"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { ChevronDown, ChevronRight, Menu, X } from "lucide-react";
import { cva, type VariantProps } from "class-variance-authority";

const sidebarVariants = cva("flex flex-col h-screen border-r bg-background transition-all duration-300 overflow-hidden", {
  variants: {
    variant: {
      default: "w-64",
      collapsible: "w-64 data-[collapsed=true]:w-16",
      floating: "w-64 m-4 h-[calc(100vh-2rem)] rounded-xl border shadow-lg",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

export interface SidebarItem {
  label: string;
  href?: string;
  icon?: React.ReactNode;
  active?: boolean;
  children?: SidebarItem[];
}

export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof sidebarVariants> {
  items: SidebarItem[];
  collapsed?: boolean;
  onToggle?: () => void;
  logo?: React.ReactNode;
  user?: {
    name: string;
    email: string;
    avatar?: string;
  };
}

/**
 * Sidebar — a collapsible app sidebar.
 *
 * `icon` is a lucide-react icon name, so items stay plain serialisable data.
 *
 * @example
 * <Sidebar
 *   logo="Acme Inc"
 *   items={[
 *     { label: "Dashboard", href: "/", icon: "home", active: true },
 *     { label: "Settings", href: "/settings", icon: "settings" },
 *   ]}
 * />
 */
export function Sidebar({
  className,
  variant,
  items,
  collapsed = false,
  onToggle,
  logo,
  user,
  ...props
}: SidebarProps) {
  const [expandedItems, setExpandedItems] = React.useState<Record<string, boolean>>({});

  const toggleExpand = (label: string) => {
    if (collapsed) return;
    setExpandedItems(prev => ({
      ...prev,
      [label]: !prev[label]
    }));
  };

  const renderItem = (item: SidebarItem, depth = 0) => {
    const isExpanded = expandedItems[item.label];
    const hasChildren = item.children && item.children.length > 0;
    const isCollapsible = variant === "collapsible" && collapsed;

    return (
      <div key={item.label} className={cn("w-full", isCollapsible && "group/item relative")}>
        <a
          href={item.href || "#"}
          onClick={(e) => {
            if (hasChildren) {
              e.preventDefault();
              toggleExpand(item.label);
            }
          }}
          className={cn(
            "flex items-center w-full px-3 py-2 text-sm font-medium rounded-md transition-all duration-150 hover:translate-x-0.5",
            item.active 
              ? "bg-secondary/80 text-secondary-foreground border-l-2 border-l-primary" 
              : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground border-l-2 border-transparent",
            isCollapsible ? "justify-center" : "justify-between",
            depth > 0 && !isCollapsible && "pl-9"
          )}
        >
          <div className="flex items-center gap-3 overflow-hidden">
            {item.icon && <span className="flex-shrink-0 w-5 h-5">{item.icon}</span>}
            <span className={cn(
              "transition-all duration-200 whitespace-nowrap",
              isCollapsible ? "opacity-0 w-0 hidden" : "opacity-100"
            )}>
              {item.label}
            </span>
          </div>
          {hasChildren && (
            <span className={cn(
              "flex-shrink-0 w-4 h-4 transition-all duration-200",
              isCollapsible ? "opacity-0 w-0 hidden" : "opacity-100"
            )}>
              {isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
            </span>
          )}
        </a>
        
        {isCollapsible && (
          <span className="absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 bg-popover text-popover-foreground text-xs rounded-md shadow-md opacity-0 group-hover/item:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
            {item.label}
          </span>
        )}

        {hasChildren && (
          <div className={cn(
            "grid transition-all duration-200 ease-in-out",
            !isCollapsible && isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
          )}>
            <div className="overflow-hidden">
              <div className="mt-1 space-y-1">
                {item.children!.map(child => renderItem(child, depth + 1))}
              </div>
            </div>
          </div>
        )}
      </div>
    );
  };

  return (
    <div 
      className={cn(sidebarVariants({ variant }), className)} 
      data-collapsed={collapsed}
      {...props}
    >
      <div className={cn(
        "flex items-center h-14 border-b px-4 flex-shrink-0 transition-all duration-300",
        collapsed && variant === "collapsible" ? "justify-center" : "justify-between"
      )}>
        <div className={cn(
          "flex items-center font-bold text-lg transition-all duration-200 overflow-hidden whitespace-nowrap",
          collapsed && variant === "collapsible" ? "opacity-0 w-0 hidden" : "opacity-100"
        )}>
          {logo || "Logo"}
        </div>
        
        {variant === "collapsible" && (
          <button 
            onClick={onToggle}
            className="p-1 rounded-md hover:bg-secondary text-muted-foreground flex-shrink-0"
          >
            {collapsed ? <Menu size={20} /> : <X size={20} />}
          </button>
        )}
      </div>

      <div className="flex-1 overflow-y-auto py-4 px-3 space-y-1">
        {items.map(item => renderItem(item))}
      </div>

      {user && (
        <div className={cn(
          "p-4 border-t transition-all duration-300",
          collapsed && variant === "collapsible" ? "flex justify-center" : ""
        )}>
          <div className={cn(
            "flex items-center",
            collapsed && variant === "collapsible" ? "justify-center" : "gap-3"
          )}>
            <div className="w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold flex-shrink-0">
              {user.avatar ? (
                <img src={user.avatar} alt={user.name} className="w-full h-full rounded-full" />
              ) : (
                user.name.charAt(0).toUpperCase()
              )}
            </div>
            
            <div className={cn(
              "flex flex-col transition-all duration-200 overflow-hidden whitespace-nowrap",
              collapsed && variant === "collapsible" ? "opacity-0 w-0 hidden" : "opacity-100"
            )}>
              <span className="text-sm font-medium truncate">{user.name}</span>
              <span className="text-xs text-muted-foreground truncate">{user.email}</span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
Sidebar Navigation
