import { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { ChevronRight } from 'lucide-react';
import { usePermissions } from '../../hooks/usePermissions';
import { getFilteredNavSections, type NavSection as NavSectionType, type NavItem } from '../../lib/navigation';

interface SidebarProps {
    onItemClick?: () => void;
}

/**
 * Desktop sidebar navigation with collapsible sections
 * Linear-inspired design: minimal, clean, subtle animations
 */
export function Sidebar({ onItemClick }: SidebarProps) {
    const { role } = usePermissions();
    const sections = getFilteredNavSections(role);
    const location = useLocation();

    return (
        <nav className="flex-1 px-3 py-3 space-y-4 overflow-y-auto custom-scrollbar">
            {sections.map(section => (
                <NavSection
                    key={section.id}
                    section={section}
                    currentPath={location.pathname}
                    onItemClick={onItemClick}
                />
            ))}
        </nav>
    );
}

interface NavSectionProps {
    section: NavSectionType;
    currentPath: string;
    onItemClick?: () => void;
    defaultOpen?: boolean;
}

function NavSection({ section, currentPath, onItemClick, defaultOpen }: NavSectionProps) {
    const hasActiveItem = section.items.some(item => item.path === currentPath);
    const [isOpen, setIsOpen] = useState(hasActiveItem || defaultOpen !== false);

    return (
        <div>
            {/* Section Header */}
            <button
                onClick={() => setIsOpen(!isOpen)}
                className="w-full flex items-center gap-2 px-2 py-1.5 text-[11px] font-medium text-tertiary uppercase tracking-wider hover:text-secondary transition-colors duration-fast"
            >
                <ChevronRight
                    size={12}
                    className={`transition-transform duration-fast ${isOpen ? 'rotate-90' : ''}`}
                />
                <span>{section.label}</span>
            </button>

            {/* Section Items */}
            <div
                className={`
                    mt-1 space-y-0.5 overflow-hidden
                    transition-all duration-normal ease-out-expo
                    ${isOpen ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'}
                `}
            >
                {section.items.map(item => (
                    <NavItemLink
                        key={item.id}
                        item={item}
                        isActive={currentPath === item.path}
                        onClick={onItemClick}
                    />
                ))}
            </div>
        </div>
    );
}

interface NavItemLinkProps {
    item: NavItem;
    isActive: boolean;
    onClick?: () => void;
}

function NavItemLink({ item, isActive, onClick }: NavItemLinkProps) {
    const Icon = item.icon;

    return (
        <Link
            to={item.path}
            onClick={onClick}
            className={`
                group flex items-center gap-3 px-3 py-2 rounded-md
                transition-all duration-fast
                ${isActive
                    ? 'bg-tertiary text-primary font-medium'
                    : 'text-secondary hover:bg-tertiary hover:text-primary'
                }
            `}
            aria-current={isActive ? 'page' : undefined}
        >
            <Icon
                size={16}
                className={`
                    flex-shrink-0 transition-transform duration-fast
                    ${isActive ? 'text-accent' : 'group-hover:scale-105'}
                `}
                strokeWidth={isActive ? 2 : 1.5}
            />
            <span className="truncate text-[13px]">{item.label}</span>

            {/* Active indicator - subtle accent dot */}
            {isActive && (
                <div className="ml-auto w-1.5 h-1.5 rounded-full bg-accent" />
            )}
        </Link>
    );
}
