import { cn } from '@/lib/utils';
import { Link, usePage } from '@inertiajs/react';
import { ChevronRight, CornerUpLeft } from 'lucide-react';
import { type PropsWithChildren, useMemo } from 'react';

declare const route: (...args: any[]) => string;

type PurchaseSettingsLayoutProps = PropsWithChildren<{
    tab: string;
}>;

export default function PurchaseSettingsLayout({ children, tab }: PurchaseSettingsLayoutProps) {
    const { url } = usePage();

    const settingsTabs = [
        {
            id: 'purchase',
            title: 'Purchase',
            status: true,
            items: [
                { title: 'Return Reasons', href: route('purchase.return-reason.index'), icon: CornerUpLeft, status: true },
            ],
        },
    ];

    const activeSectionFromUrl = useMemo(() => {
        const rootUrl = typeof window !== 'undefined' ? window.location.origin : '';
        const getPath = (href: string) => (rootUrl ? href.replace(rootUrl, '') : href);

        for (const section of settingsTabs.filter((t) => t.status)) {
            if (section.items?.filter((i) => i?.status).some((item) => url.startsWith(getPath(item.href)))) {
                return section.id;
            }
        }
        return tab;
    }, [url, tab]);

    return (
        <div className="no-scrollbar min-h-screen bg-background">
            {/* Header */}
            <div className="border-b border-gray-200">
                <div className="mx-auto px-2">
                    <div className="py-2">
                        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                            <div>
                                <h1 className="text-xl font-semibold text-primary sm:text-2xl">Purchase Settings</h1>
                                <p className="mt-1 text-xs text-gray-600 sm:text-sm">Configure purchase options and lookup values</p>
                            </div>
                            <div className="hidden items-center space-x-2 text-sm text-gray-500 sm:flex">
                                <span>Settings</span>
                                <ChevronRight className="h-4 w-4" />
                                <span className="font-medium text-primary">
                                    {settingsTabs.find((t) => t.id === activeSectionFromUrl && t.status)?.title}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Main Content Area */}
            <div className="min-w-0 flex-1">
                <div className="mx-auto w-full py-2 sm:px-2">
                    {/* Mobile Navigation */}
                    <div className="mb-4 block lg:hidden">
                        <div className="rounded-lg border border-gray-200 bg-white p-4">
                            <nav className="space-y-1">
                                {settingsTabs
                                    .filter((section) => section.status)
                                    .flatMap((section) =>
                                        section.items
                                            ?.filter((i) => i?.status)
                                            .map((item, index) => {
                                                const isActive = url === item.href;
                                                const ItemIcon = item.icon;
                                                return (
                                                    <Link
                                                        key={`mobile-${item.href}-${index}`}
                                                        href={item.href}
                                                        className={cn(
                                                            'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
                                                            {
                                                                'bg-primary text-white': isActive,
                                                                'text-gray-700 hover:bg-gray-100': !isActive,
                                                            },
                                                        )}
                                                    >
                                                        {ItemIcon && <ItemIcon className="h-4 w-4" />}
                                                        {item.title}
                                                    </Link>
                                                );
                                            }) || [],
                                    )}
                            </nav>
                        </div>
                    </div>

                    {/* Page Content */}
                    <div className="flex">
                        {/* Sticky Sidebar */}
                        <div className="hidden lg:block">
                            <div className="sticky top-2 w-56 pr-4 xl:w-64 2xl:w-72">
                                <div className="rounded-lg border bg-muted p-4">
                                    <div className="mb-4">
                                        <h3 className="text-sm font-medium tracking-wide text-gray-500">Settings Navigation</h3>
                                    </div>
                                    <nav className="space-y-1">
                                        {settingsTabs
                                            .filter((section) => section.status)
                                            .flatMap((section) =>
                                                section.items
                                                    ?.filter((i) => i?.status)
                                                    .map((item, index) => {
                                                        const rootUrl = window.location.origin;
                                                        const path = item.href.replace(rootUrl, '');
                                                        const isActive = url.startsWith(path);
                                                        const ItemIcon = item.icon;
                                                        return (
                                                            <Link
                                                                key={`${item.href}-${index}`}
                                                                href={item.href}
                                                                className={cn(
                                                                    'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
                                                                    {
                                                                        'bg-primary text-white': isActive,
                                                                        'text-gray-700 hover:bg-gray-100': !isActive,
                                                                    },
                                                                )}
                                                            >
                                                                {ItemIcon && <ItemIcon className="h-3 w-3" />}
                                                                {item.title}
                                                            </Link>
                                                        );
                                                    }) || [],
                                            )}
                                    </nav>
                                </div>
                            </div>
                        </div>
                        <div className="sticky top-2 w-full bg-background">{children}</div>
                    </div>
                </div>
            </div>
        </div>
    );
}