import { Tabs, TabsList, TabsTrigger } from '@admin/components/ui/tabs';
import { cn } from '@admin/lib/utils';
import { PageProps } from '@admin/types/global';
import { Link, router, usePage } from '@inertiajs/react';
import {
    BarChart3,
    Bell,
    CheckSquare,
    ChevronDown,
    ChevronRight,
    ClipboardList,
    FileText,
    Grid,
    LayoutDashboard,
    LayoutTemplate,
    Mail,
    MessageSquare,
    Palette,
    Phone,
    Plug,
    Settings,
    User,
} from 'lucide-react';
import { type PropsWithChildren, useEffect, useRef, useState } from 'react';

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

export default function SettingsLayout({ children, tab }: SettingsLayoutProps) {
    const { url } = usePage();
    // @ts-ignore
    const { moduleStatus } = usePage<PageProps>().props;

    const [activeTab, setActiveTab] = useState(tab);
    const [isMobileDropdownOpen, setIsMobileDropdownOpen] = useState(false);
    const dropdownRef = useRef<HTMLDivElement>(null);

    const settingsTabs = [
                {
                    id: 'platform',
                    title: 'Platform',
                    icon: User,
                    status: true,
                    items: [
                        { title: 'Activity Log Settings', href: route('audit.index'), icon: LayoutDashboard, status: true },
                        { title: 'Email Log', href: route('email-log.index'), icon: Grid, status: true },
                    ],
                },
        {
            id: 'productivity',
            title: 'Productivity',
            icon: Settings,
            status: moduleStatus?.Productivity || false,
            items: [
                { title: 'Module Settings', href: route('settings.email.edit'), icon: Grid, status: true },
                { title: 'ToDo list Settings', href: '#', icon: CheckSquare, status: true },
                { title: 'Note Settings', href: '#', icon: FileText, status: true },
                { title: 'Task Settings', href: '#', icon: ClipboardList, status: true },
                { title: 'Email Template', href: '#', icon: Mail, status: true },
                { title: 'Reporting Settings', href: '#', icon: BarChart3, status: true },
                { title: 'Dashboard Settings', href: '#', icon: LayoutDashboard, status: true },
            ],
        },
        {
            id: 'communication',
            title: 'Communication',
            icon: Mail,
            status: moduleStatus?.Communication || false,
            items: [
                { title: 'Email Settings', href: route('settings.email.edit'), icon: Mail, status: true },
                { title: 'Email Templates', href: '/settings/email-templates', icon: LayoutTemplate, status: true },
                { title: 'Notification Settings', href: '#', icon: Bell, status: true },
                { title: 'Chat Settings', href: '#', icon: MessageSquare, status: true },
                { title: 'SMS Settings', href: '#', icon: Phone, status: true },
            ],
        },
    ];

    useEffect(() => {
        const currentPath = url;

        for (const tab of settingsTabs.filter((t) => t.status)) {
            const hasMatchingItem = tab.items
                .filter((i) => i.status)
                .some((item) => {
                    const itemHref = item.href;
                    return currentPath.startsWith(itemHref);
                });

            if (hasMatchingItem) {
                setActiveTab(tab.id);
                break;
            }
        }
    }, [url, settingsTabs]);

    // 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 handleTabChange = (newTabId: string) => {
        setActiveTab(newTabId);

        const selectedTab = settingsTabs.find((tab) => tab.id === newTabId && tab.status);
        if (selectedTab) {
            const firstItem = selectedTab.items.find((i) => i.status);
            if (firstItem) {
                router.visit(firstItem.href);
            }
        }
    };

    return (
        <div className="min-h-screen bg-background">
            {/* Main Content */}
            <div className="mx-auto w-full py-2 sm:px-2">
                <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
                    {/* Content Layout */}
                    <div className="flex flex-col gap-2 lg:flex-row">
                        {/* Main Content */}
                        <div className="min-w-0 flex-1">
                            <div className="bg-background">{children}</div>
                        </div>
                    </div>
                </Tabs>
            </div>
        </div>
    );
}