import { Bell, ChevronLeft, UserPlus } from "lucide-react";
import { Outlet, useNavigate } from "react-router-dom";
import { SidebarSystem } from "@/components/layout/sidebar-system";
import { SidebarUser } from "@/components/layout/sidebar-user";
import { useSidebarCollapse } from "@/hooks/use-sidebar-collapse";
import { cn } from "@/lib/utils";
import { useLocation } from "react-router-dom";

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

    return (
        <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 h-12 flex items-center", collapsed ? "justify-center" : "justify-between")}
            >
                {!collapsed && (
                    <div className="flex min-w-0 items-center gap-3 overflow-hidden px-3">
                        <div className="bg-muted rounded-full w-8 h-8 flex items-center justify-center">
                            <UserPlus className="h-4 w-4 text-muted-foreground" />
                        </div>
                        <div className="min-w-0 flex-1 truncate text-sm font-semibold">
                            My Invitations
                        </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)}
                >
                    <ChevronLeft className="h-4 w-4" />
                </button>
            </div>

            <nav className="flex-1 p-2">
                <div className="space-y-1">
                    <button
                        type="button"
                        onClick={() => navigate("/invitations")}
                        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",
                            location.pathname === "/invitations" && "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")}>
                            <UserPlus className="h-4 w-4" />
                        </span>
                        {!collapsed && "Invitations"}
                    </button>
                    <button
                        type="button"
                        onClick={() => navigate("/notify")}
                        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",
                            location.pathname === "/notify" && "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")}>
                            <Bell className="h-4 w-4" />
                        </span>
                        {!collapsed && "Notifications"}
                    </button>
                </div>
            </nav>

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

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