import { Link } from "@inertiajs/react";
import { useI18n } from "@/lib/i18n";
import { UserRound, Palette, ShieldCheck } from "lucide-react";
import type { PropsWithChildren } from "react";
import Heading from "@/components/heading";
import { useCurrentUrl } from "@/hooks/use-current-url";
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: UserRound },
    { title: "Security", href: editSecurity(), icon: ShieldCheck },
    { title: "Appearance", href: editAppearance(), icon: Palette },
];

export default function SettingsLayout({ children }: PropsWithChildren) {
    const { t } = useI18n();
    const { isCurrentOrParentUrl } = useCurrentUrl();
    return (
        <div className="mx-auto max-w-6xl px-4 py-7 sm:px-6">
            <div className="mb-5 min-w-0 rounded-2xl border border-white/[.07] bg-white/[.02] p-4 sm:mb-7 sm:p-6">
                <div className="text-[10px] font-bold uppercase tracking-[.2em] text-emerald-400">
                    {t("Account workspace")}</div>
                <Heading
                    title="Settings"
                    description="Manage your profile, security, and visual preferences in one place."
                />
            </div>
            <div className="grid gap-6 lg:grid-cols-[190px_1fr]">
                <aside>
                    <nav className="flex min-w-0 gap-2 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible lg:pb-0" aria-label="Settings">
                        {sidebarNavItems.map((item) => {
                            const Icon = item.icon;
                            const active = isCurrentOrParentUrl(item.href);
                            return (
                                <Link
                                    key={item.title}
                                    href={item.href}
                                    className={`flex min-w-max shrink-0 items-center gap-2.5 whitespace-nowrap rounded-xl px-3 py-2.5 text-xs font-semibold transition ${active ? "bg-emerald-400/10 text-emerald-300 ring-1 ring-emerald-400/10" : "text-slate-500 hover:bg-white/[.04] hover:text-slate-200"}`}
                                >
                                    {Icon && <Icon className="size-4" />}
                                    <span>{item.title}</span>
                                </Link>
                            );
                        })}
                    </nav>
                </aside>
                <main className="min-w-0 max-w-full rounded-2xl border border-white/[.07] bg-[#0a111c]/75 p-3 shadow-[0_20px_60px_rgba(0,0,0,.15)] sm:p-7">
                    <section className="max-w-2xl space-y-10">
                        {children}
                    </section>
                </main>
            </div>
        </div>
    );
}