import { Link } from "@inertiajs/react";
import type { PropsWithChildren } from "react";
import Heading from "@/components/heading";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { useCurrentUrl } from "@/hooks/use-current-url";
import { cn, toUrl } from "@/lib/utils";
import { edit as editAppearance } from "@/routes/appearance";
import { edit } from "@/routes/profile";
import { edit as editSecurity } from "@/routes/security";
import type { NavItem } from "@/types";

const sidebarNavItems: NavItem[] = [
    {
        title: "Profile",
        href: edit(),
        icon: null,
    },
    {
        title: "Security",
        href: editSecurity(),
        icon: null,
    },
    {
        title: "Appearance",
        href: editAppearance(),
        icon: null,
    },
];

export default function SettingsLayout({ children }: PropsWithChildren) {
    const { isCurrentOrParentUrl } = useCurrentUrl();

    return (
        <div className="px-4 py-6 sm:px-6">
            <Heading
                title="Settings"
                description="Manage your profile, security, and appearance preferences"
            />

            <div className="mt-8 flex flex-col gap-6 lg:flex-row lg:items-start lg:gap-10">
                <aside className="w-full lg:w-52 lg:shrink-0">
                    <nav
                        className="flex overflow-x-auto rounded-xl border border-border/70 bg-card/70 p-1 lg:flex-col lg:overflow-visible"
                        aria-label="Settings"
                    >
                        {sidebarNavItems.map((item, index) => (
                            <Button
                                key={`${toUrl(item.href)}-${index}`}
                                size="sm"
                                variant="ghost"
                                asChild
                                className={cn(
                                    "shrink-0 justify-start rounded-lg px-3",
                                    "lg:w-full",
                                    {
                                        "bg-primary/10 text-primary": isCurrentOrParentUrl(item.href),
                                    },
                                )}
                            >
                                <Link href={item.href}>
                                    {item.icon && (
                                        <item.icon className="h-4 w-4" />
                                    )}
                                    {item.title}
                                </Link>
                            </Button>
                        ))}
                    </nav>
                </aside>

                <Separator className="my-6 lg:hidden" />

                <div className="min-w-0 flex-1">
                    <section className="max-w-2xl space-y-10">
                        {children}
                    </section>
                </div>
            </div>
        </div>
    );
}