// Example configurations showing how to add subpages with the new generic system

import { PageConfig } from './pageConfigInterface';
import { privilegeCheckers, createCustomPrivilegeChecker } from '../../hooks/privilegeCheckers';
import { lazy } from 'react';

// Example 1: Admin section with multiple subpages
export const adminPageConfig: PageConfig = {
    path: 'admin',
    component: lazy(() => import('../../pages/Home/Admin')),
    persistent: false,
    preload: true,
    moduleEnabled: true,
    id: 'admin',
    name: 'Admin',
    icon: () => null, // Your admin icon
    order: 10,
    showInSidebar: true,
    // Generic subpage support
    hasSubpages: true,
    subpagePrefix: 'admin',
    privilegeChecker: privilegeCheckers.adminRole, // Only show subpages to admins
    onActivate: async () => {
        console.log('Admin section activated');
    }
};

// Example 2: Premium features with expiration-based access
export const premiumPageConfig: PageConfig = {
    path: 'premium',
    component: lazy(() => import('../../pages/Home/Premium')),
    persistent: false,
    preload: true,
    moduleEnabled: true,
    id: 'premium',
    name: 'Premium',
    icon: () => null, // Your premium icon
    order: 11,
    showInSidebar: true,
    // Generic subpage support
    hasSubpages: true,
    subpagePrefix: 'premium',
    privilegeChecker: privilegeCheckers.premiumUser, // Only show subpages to premium users
    onActivate: async () => {
        console.log('Premium section activated');
    }
};

// Example 3: Beta features with feature flag
export const betaPageConfig: PageConfig = {
    path: 'beta',
    component: lazy(() => import('../../pages/Home/Beta')),
    persistent: false,
    preload: false,
    moduleEnabled: true,
    id: 'beta',
    name: 'Beta Features',
    icon: () => null, // Your beta icon
    order: 12,
    showInSidebar: true,
    // Generic subpage support
    hasSubpages: true,
    subpagePrefix: 'beta',
    privilegeChecker: privilegeCheckers.betaFeatures, // Only show subpages if beta features are enabled
    onActivate: async () => {
        console.log('Beta section activated');
    }
};

// Example 4: Custom privilege checker
const customPrivilegeChecker = createCustomPrivilegeChecker(async () => {
    // Your custom logic here
    const userLevel = localStorage.getItem('userLevel');
    const hasSpecialAccess = userLevel === 'vip' || userLevel === 'premium';
    
    console.log('Custom privilege check:', { userLevel, hasSpecialAccess });
    return hasSpecialAccess;
});

export const customPageConfig: PageConfig = {
    path: 'custom',
    component: lazy(() => import('../../pages/Home/Custom')),
    persistent: false,
    preload: true,
    moduleEnabled: true,
    id: 'custom',
    name: 'Custom Features',
    icon: () => null, // Your custom icon
    order: 13,
    showInSidebar: true,
    // Generic subpage support
    hasSubpages: true,
    subpagePrefix: 'custom',
    privilegeChecker: customPrivilegeChecker,
    onActivate: async () => {
        console.log('Custom section activated');
    }
};

// Example subpage configurations
export const exampleSubpages: PageConfig[] = [
    // Admin subpages
    {
        path: 'admin/users',
        component: lazy(() => import('../../pages/Home/AdminUsers')),
        persistent: false,
        preload: false,
        moduleEnabled: true,
        id: 'admin-users',
        name: 'User Management',
        icon: () => null,
        order: 1,
        showInSidebar: false, // Important: subpages should not show as main items
        onActivate: async () => {
            console.log('Admin Users activated');
        }
    },
    {
        path: 'admin/settings',
        component: lazy(() => import('../../pages/Home/AdminSettings')),
        persistent: false,
        preload: false,
        moduleEnabled: true,
        id: 'admin-settings',
        name: 'System Settings',
        icon: () => null,
        order: 2,
        showInSidebar: false,
        onActivate: async () => {
            console.log('Admin Settings activated');
        }
    },
    {
        path: 'admin/analytics',
        component: lazy(() => import('../../pages/Home/AdminAnalytics')),
        persistent: false,
        preload: false,
        moduleEnabled: true,
        id: 'admin-analytics',
        name: 'Analytics',
        icon: () => null,
        order: 3,
        showInSidebar: false,
        onActivate: async () => {
            console.log('Admin Analytics activated');
        }
    },
    
    // Premium subpages
    {
        path: 'premium/advanced-tools',
        component: lazy(() => import('../../pages/Home/PremiumAdvancedTools')),
        persistent: false,
        preload: false,
        moduleEnabled: true,
        id: 'premium-advanced',
        name: 'Advanced Tools',
        icon: () => null,
        order: 1,
        showInSidebar: false,
        onActivate: async () => {
            console.log('Premium Advanced Tools activated');
        }
    },
    {
        path: 'premium/priority-support',
        component: lazy(() => import('../../pages/Home/PremiumSupport')),
        persistent: false,
        preload: false,
        moduleEnabled: true,
        id: 'premium-support',
        name: 'Priority Support',
        icon: () => null,
        order: 2,
        showInSidebar: false,
        onActivate: async () => {
            console.log('Premium Support activated');
        }
    },
    
    // Beta subpages
    {
        path: 'beta/experimental-features',
        component: lazy(() => import('../../pages/Home/BetaExperimental')),
        persistent: false,
        preload: false,
        moduleEnabled: true,
        id: 'beta-experimental',
        name: 'Experimental Features',
        icon: () => null,
        order: 1,
        showInSidebar: false,
        onActivate: async () => {
            console.log('Beta Experimental Features activated');
        }
    },
    
    // Custom subpages
    {
        path: 'custom/special-tools',
        component: lazy(() => import('../../pages/Home/CustomSpecialTools')),
        persistent: false,
        preload: false,
        moduleEnabled: true,
        id: 'custom-special',
        name: 'Special Tools',
        icon: () => null,
        order: 1,
        showInSidebar: false,
        onActivate: async () => {
            console.log('Custom Special Tools activated');
        }
    }
];

// How to add these to your main pageConfigs array:
/*
// In your main pageConfigs.ts file, you would add:

// 1. Add the main page configs
...adminPageConfig,
...premiumPageConfig,
...betaPageConfig,
...customPageConfig,

// 2. Add the subpage configs
...exampleSubpages,

// The system will automatically:
// - Detect pages with hasSubpages: true
// - Find subpages with matching subpagePrefix
// - Check privileges using the privilegeChecker
// - Show/hide submenus accordingly
*/