import { cn } from '@admin/lib/utils';
import { Link, usePage } from '@inertiajs/react';
import { Bell, ChevronRight, LayoutTemplate, Mail, Settings } from 'lucide-react';
import { type PropsWithChildren, useEffect, useMemo, useRef, useState } from 'react';

type AdminSettingsLayoutProps = PropsWithChildren<{
    activeTab?: string;
}>;

export default function AdminSettingsLayout({ children, activeTab = 'general' }: AdminSettingsLayoutProps) {
    const { url } = usePage();
    const [isMobileDropdownOpen, setIsMobileDropdownOpen] = useState(false);
    const dropdownRef = useRef<HTMLDivElement>(null);

    // Settings navigation items
    const settingsItems = [
        { title: 'General Settings', href: '/admin/settings/general', icon: Settings, exact: true },
        { title: 'Email Settings', href: '/admin/settings/email', icon: Mail, exact: false },
        { title: 'Email Templates', href: '/admin/settings/email-templates', icon: LayoutTemplate, exact: false },
        { title: 'Email Layouts', href: '/admin/settings/email-layouts', icon: LayoutTemplate, exact: false },
        { title: 'Notification Settings', href: '/admin/settings/notifications', icon: Bell, exact: false },
    ];

    // Determine active item based on current URL
    const activeItem = useMemo(() => {
        return (
            settingsItems.find((item) =>
                item.exact ? url === item.href || url === item.href + '?' : url.startsWith(item.href),
            )?.title || 'General Settings'
        );
    }, [url]);

    // 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]);

    return (
        <div className="min-h-screen bg-background">
            {/* Header */}
            <div className="border-b border-gray-200">
                <div className="mx-auto px-4">
                    <div className="py-4">
                        <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">Admin Settings</h1>
                                <p className="mt-1 text-xs text-gray-600 sm:text-sm">Manage global application settings</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">{activeItem}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Main Content Container */}
            <div className="min-w-0 flex-1">
                <div className="mx-auto w-full py-4 sm:px-4">
                    {/* Mobile Navigation */}
                    <div className="mb-4 block lg:hidden">
                        <div className="space-y-2 px-4">
                            {settingsItems.map((item) => {
                                const isActive = item.exact ? url === item.href || url === item.href + '?' : url.startsWith(item.href);
                                const ItemIcon = item.icon;
                                return (
                                    <Link
                                        key={item.href}
                                        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 hover:bg-gray-50 text-gray-700': !isActive,
                                            },
                                        )}
                                    >
                                        {ItemIcon && <ItemIcon className="h-4 w-4" />}
                                        {item.title}
                                    </Link>
                                );
                            })}
                        </div>
                    </div>

                    {/* Page Content */}
                    <div className="flex gap-6">
                        {/* Sticky Sidebar - Desktop */}
                        <div className="hidden lg:block">
                            <div className="sticky top-20 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">
                                        {settingsItems.map((item) => {
                                            const isActive = item.exact ? url === item.href || url === item.href + '?' : url.startsWith(item.href);
                                            const ItemIcon = item.icon;

                                            return (
                                                <Link
                                                    key={item.href}
                                                    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,
                                                            'hover:bg-gray-100 text-gray-700': !isActive,
                                                        },
                                                    )}
                                                >
                                                    {ItemIcon && <ItemIcon className="h-4 w-4" />}
                                                    {item.title}
                                                </Link>
                                            );
                                        })}
                                    </nav>
                                </div>
                            </div>
                        </div>

                        {/* Main Content */}
                        <div className="w-full flex-1 px-4 lg:px-0">{children}</div>
                    </div>
                </div>
            </div>
        </div>
    );
}