import {Outlet, useLocation, useNavigate} from 'react-router-dom';
import {Activity, Bell, ChevronLeft, ChevronRight, Key, KeyRound, Settings, Shield, User} from 'lucide-react';
import {cn} from '@/lib/utils';
import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from '@/components/ui/tooltip';
import {SidebarSystem} from '@/components/layout/sidebar-system';
import {SidebarUser} from '@/components/layout/sidebar-user';
import {useSidebarCollapse} from '@/hooks/use-sidebar-collapse';

type SidebarItem = {
    title: string;
    icon: React.ReactNode;
    url: string;
    exact?: boolean;
};

const items: SidebarItem[] = [
    {
        title: 'Profile',
        icon: <User className="h-4 w-4"/>,
        url: '/settings/profile',
        exact: true,
    },
    {
        title: 'Account',
        icon: <Settings className="h-4 w-4"/>,
        url: '/settings/account',
    },
    {
        title: 'Security',
        icon: <Shield className="h-4 w-4"/>,
        url: '/settings/security',
    },
    {
        title: 'Tokens',
        icon: <Key className="h-4 w-4"/>,
        url: '/settings/tokens',
    },
    {
        title: 'SSH Keys',
        icon: <KeyRound className="h-4 w-4"/>,
        url: '/settings/ssh-keys',
    },
    {
        title: 'Preferences',
        icon: <Bell className="h-4 w-4"/>,
        url: '/settings/preferences',
    },
    {
        title: 'Activity',
        icon: <Activity className="h-4 w-4"/>,
        url: '/settings/activity',
    },
];

function SettingsSidebar() {
    const navigate = useNavigate();
    const location = useLocation();
    const {collapsed, setCollapsed} = useSidebarCollapse();

    return (
        <TooltipProvider>
            <aside
                className={cn(
                    'hidden md:flex h-full flex-col border-r bg-background transition-all duration-200',
                    collapsed ? 'w-16' : 'w-64',
                )}
            >
                <div
                    className={cn('border-b px-3 h-12 flex items-center', collapsed ? 'justify-center' : 'justify-between')}>
                    {!collapsed && (
                        <div className="flex min-w-0 items-center gap-3 overflow-hidden">
                            <div className="bg-muted rounded-full w-8 h-8 flex items-center justify-center">
                                <Settings className="h-4 w-4 text-muted-foreground"/>
                            </div>
                            <div className="min-w-0 flex-1 truncate text-sm font-semibold">
                                Settings
                            </div>
                        </div>
                    )}

                    <button
                        type="button"
                        className="flex h-9 w-9 items-center justify-center rounded-md hover:bg-muted cursor-pointer bg-transparent border-0"
                        onClick={() => setCollapsed(!collapsed)}
                    >
                        {collapsed ? (
                            <ChevronRight className="h-4 w-4"/>
                        ) : (
                            <ChevronLeft className="h-4 w-4"/>
                        )}
                    </button>
                </div>

                <nav className="flex-1 p-2">
                    <ul className="space-y-1">
                        {items.map((item) => {
                            const isActive = item.exact
                                ? location.pathname === item.url
                                : location.pathname === item.url ||
                                location.pathname.startsWith(`${item.url}/`);

                            const content = (
                                <button
                                    type="button"
                                    onClick={() => navigate(item.url)}
                                    className={cn(
                                        'flex w-full h-9 justify-start items-center rounded-md font-medium hover:bg-muted cursor-pointer bg-transparent border-0 text-left text-sm',
                                        isActive && 'bg-primary/10 text-primary',
                                        collapsed ? 'justify-center px-0' : 'justify-start px-2',
                                    )}
                                >
                                    <span
                                        className={cn('flex h-6 items-center shrink-0', collapsed ? 'w-6 justify-center' : 'w-6')}>
                                        {item.icon}
                                    </span>
                                    {!collapsed && item.title}
                                </button>
                            );

                            return (
                                <li key={item.title}>
                                    {collapsed ? (
                                        <Tooltip>
                                            <TooltipTrigger className="w-full">{content}</TooltipTrigger>
                                            <TooltipContent side="right">
                                                {item.title}
                                            </TooltipContent>
                                        </Tooltip>
                                    ) : (
                                        content
                                    )}
                                </li>
                            );
                        })}
                    </ul>
                </nav>

                <div className="border-t flex flex-col justify-end">
                    <SidebarSystem collapsed={collapsed}/>
                    <SidebarUser collapsed={collapsed}/>
                </div>
            </aside>
        </TooltipProvider>
    );
}

export function SettingsLayout() {
    return (
        <div className="flex h-screen w-full bg-background">
            <SettingsSidebar/>
            <main className="flex-1 h-screen overflow-auto">
                <Outlet/>
            </main>
        </div>
    );
}
