import { ActivityLogSidebar } from '@/components/activity-log/ActivityLogSidebar';
import { useModelActivityLog } from '@/components/activity-log/useModelActivityLog';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { cn } from '@/lib/utils';
import { Link, usePage } from '@inertiajs/react';
import { Bell, ChevronRight, DollarSign, Footprints, Globe, Grid, Languages, LayoutTemplate, Mail, Palette, Settings, User } from 'lucide-react';
import { type PropsWithChildren, useEffect, useMemo, useRef, useState } from 'react';
// Permission helper is globally injected; declare for TS

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

export default function SettingsLayout({ children, tab }: SettingsLayoutProps) {
    const { url } = usePage();
    const [openAccordionItem, setOpenAccordionItem] = useState<string>(tab);
    const [isMobileDropdownOpen, setIsMobileDropdownOpen] = useState(false);
    const dropdownRef = useRef<HTMLDivElement>(null);

    // Separate menu items that will appear outside accordion
    const separateMenuItems = [
        { title: 'Email Templates', href: route('settings.email-templates.index'), icon: LayoutTemplate, status: true },
        { title: 'Notification Settings', href: route('settings.notification.edit'), icon: Bell, status: true },
    ];

    const settingsTabs = [
        {
            id: 'platform',
            title: 'Platform',
            icon: User,
            status: true,
            items: [
                { title: 'Company Information', href: route('settings.company.edit'), icon: Settings, status: true },
                { title: 'Branding', href: route('settings.appearance.index'), icon: Palette, status: true },
                { title: 'System Settings', href: route('settings.system.edit'), icon: Grid, status: true },
                { title: 'Email Settings', href: route('settings.email.edit'), icon: Mail, status: true },
                { title: 'Email Layouts', href: route('settings.email.layouts.index'), icon: LayoutTemplate, status: true },
                { title: 'Language', href: route('language.index'), icon: Languages, status: true },
                { title: 'Branches', href: route('branch.index'), icon: Languages, status: true },
                { title: 'Payment Provider', href: route('settings.payment-provider.edit'), icon: DollarSign, status: true },
                { title: 'SMS Provider', href: route('settings.twilio.edit'), icon: Footprints, status: true },
                { title: 'Taxes', href: route('tax.index'), icon: Languages, 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);

        // Check if current URL matches any separate menu items
        if (separateMenuItems.some((item) => url.startsWith(getPath(item.href)))) {
            return null; // No accordion section should be active
        }

        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, settingsTabs, tab, openAccordionItem]);

    useEffect(() => {
        if (activeSectionFromUrl && openAccordionItem !== activeSectionFromUrl) {
            setOpenAccordionItem(activeSectionFromUrl);
        }
    }, [activeSectionFromUrl]);

    // Close mobile dropdown when clicking outside
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
                setIsMobileDropdownOpen(false);
            }
        };

        if (isMobileDropdownOpen) {
            document.addEventListener('mousedown', handleClickOutside);
        }

        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [isMobileDropdownOpen]);

    const handleAccordionChange = (value: string) => {
        setOpenAccordionItem(value);
    };

    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">
                        {/* Accordion for other settings - At the top */}
                        <Accordion type="single" value={openAccordionItem || ''} onValueChange={handleAccordionChange} className="w-full" collapsible>
                            {settingsTabs
                                .filter((section) => section.status)
                                .map((section) => {
                                    const IconComponent = section.icon;
                                    return (
                                        <AccordionItem key={section.id} value={section.id} className="mb-2 rounded-lg border border-gray-200">
                                            <AccordionTrigger className="cursor-pointer px-4 py-3 hover:no-underline">
                                                <div className="flex items-center gap-3">
                                                    <IconComponent className="h-4 w-4" />
                                                    <span className="font-medium">{section.title} Settings</span>
                                                </div>
                                            </AccordionTrigger>
                                            <AccordionContent className="px-4 pb-3">
                                                <nav className="space-y-1">
                                                    {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>
                                            </AccordionContent>
                                        </AccordionItem>
                                    );
                                })}
                        </Accordion>

                        {/* Separate Menu Items for Mobile - At the bottom */}
                        <div className="mt-4 space-y-2">
                            {separateMenuItems.map((item, index) => {
                                const isActive = url === item.href;
                                const ItemIcon = item.icon;
                                return (
                                    <Link
                                        key={`mobile-separate-${item.href}-${index}`}
                                        href={item.href}
                                        className={cn(
                                            'flex items-center gap-3 rounded-lg border border-gray-200 px-4 py-3 text-sm font-medium transition-colors',
                                            {
                                                'bg-primary text-white': isActive,
                                                'bg-white text-gray-700 hover:bg-gray-50': !isActive,
                                            },
                                        )}
                                    >
                                        {ItemIcon && <ItemIcon className="h-4 w-4" />}
                                        {item.title}
                                    </Link>
                                );
                            })}
                        </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>

                                    {/* Accordion for other settings - At the top */}
                                    <Accordion
                                        type="single"
                                        value={openAccordionItem || ''}
                                        onValueChange={handleAccordionChange}
                                        className="w-full"
                                        collapsible
                                    >
                                        {settingsTabs
                                            .filter((section) => section.status)
                                            .map((section) => {
                                                const IconComponent = section.icon;
                                                return (
                                                    <AccordionItem
                                                        key={section.id}
                                                        value={section.id}
                                                        className="border-b border-gray-200 last:border-b-0"
                                                    >
                                                        <AccordionTrigger className="cursor-pointer py-3 hover:no-underline">
                                                            <div className="flex items-center gap-3">
                                                                <IconComponent className="h-4 w-4" />
                                                                <span className="text-sm font-medium">{section.title}</span>
                                                            </div>
                                                        </AccordionTrigger>
                                                        <AccordionContent className="pb-3">
                                                            <nav className="space-y-1">
                                                                {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>
                                                        </AccordionContent>
                                                    </AccordionItem>
                                                );
                                            })}
                                    </Accordion>

                                    {/* Divider */}
                                    <div className="my-3 border-t border-gray-200"></div>

                                    {/* Separate Menu Items - At the bottom */}
                                    <nav className="mt-4 space-y-1">
                                        {separateMenuItems.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={`separate-${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>
    );
}