import { ActivityLogSidebar } from '@/components/activity-log/ActivityLogSidebar';
import { useModelActivityLog } from '@/components/activity-log/useModelActivityLog';
import { cn } from '@/lib/utils';
import { Link, usePage } from '@inertiajs/react';
import { ChevronRight, Network, Palette, Settings, User } from 'lucide-react';
import { type PropsWithChildren, useMemo, useRef, useState } from 'react';
// Permission helper is globally injected; declare for TS

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

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

    const settingsTabs = [
        {
            id: 'platform',
            title: 'Platform',
            icon: User,
            status: true,
            items: [
                        { title: 'Product Unit', href: route('product-unit.index'), icon: Palette, status: true },
                        { title: 'Product Variant', href: route('product-variant.index'), icon: Palette, status: true },
                        { title: 'Product Channels', href: route('product-channel.index'), icon: Network, status: true },
                
                        // { title: 'Basic Information', href: route('product.basic.settings'), icon: Settings, status: true },
                        // { title: 'Basic SEO', href: route('product.basic.seo'), icon: Settings, status: true }
            ],
        },
    ];

    // Determine active section based on current URL
    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]);

    const activityLogCtl = useModelActivityLog();

    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">Settings</h1>
                                <p className="mt-1 text-xs text-gray-600 sm:text-sm">You can change your profile details here seamlessly</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 Container */}

            {/* 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 === 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>
            <ActivityLogSidebar
                open={activityLogCtl.open}
                onOpenChange={activityLogCtl.setOpen}
                modelClass={activityLogCtl.modelClass}
                modelId={activityLogCtl.modelId}
                title={activityLogCtl.title}
                action={activityLogCtl.action}
                actions={activityLogCtl.actions}
            />
        </div>
    );
}