import { GenericPageData } from '../../pageInterface';
import { FaBuilding } from 'react-icons/fa';
import { IoMdSend } from 'react-icons/io';
import PekLocationInput from './pek/PekLocationInput';
import PekMapView from './pek/PekMapView';
import { usePek } from '../../../../hooks/usePek';
import PekPageWrapper from './pek/PekPageWrapper';
import { getUserDataCache } from '../../../../utils/userCache';

// Hook factory for PEK page
const createPekHook = () => {
    return () => {
        const pekData = usePek();
        
        const handleSubmit = async () => {
            await pekData.processCommand(pekData.commandInput);
        };
        
        return {
            // Messages for command results
            messages: pekData.commandResults,
            // Loading states
            loading: pekData.isProcessingCommand || pekData.isSearchingParcel,
            error: pekData.commandError || pekData.parcelSearchError || pekData.locationError,
            // Empty data array for compatibility
            data: [],
            // Input form properties (for command input)
            inputValue: pekData.commandInput,
            onInputChange: pekData.setCommandInput,
            handleSubmit,
            isSubmitting: pekData.isProcessingCommand
        };
    };
};

export const pekPageData: GenericPageData = {
    id: 'pek',
    path: 'start/real-estate/pek',
    name: 'projects.title',
    description: 'projects.description',
    
    // Parent page
    parentPath: 'start.real-estate',
    
    // Visual
    icon: FaBuilding,
    title: 'projects.title',
    subtitle: 'projects.subtitle',
    
    // Header buttons
    headerButtons: [],
    
    // Content sections
    content: [
        {
            id: 'pek-description',
            type: 'paragraph',
            content: 'projects.description_text'
        },
        {
            id: 'pek-location-input',
            type: 'custom',
            customComponent: PekLocationInput
        },
        {
            id: 'pek-map-view',
            type: 'custom',
            customComponent: PekMapView
        },
        {
            id: 'pek-command-input',
            type: 'inputForm',
            inputFormConfig: {
                hookFactory: createPekHook,
                placeholder: 'projects.command.placeholder',
                buttonLabel: 'Senden',
                buttonIcon: IoMdSend,
                buttonVariant: 'primary',
                buttonSize: 'md',
                textFieldSize: 'md'
            }
        },
        {
            id: 'pek-command-results',
            type: 'messages',
            messagesConfig: {
                variant: 'chat',
                showDocuments: false,
                showMetadata: false,
                showProgress: false,
                emptyMessage: 'projects.command.empty'
            }
        }
    ],
    
    // Page behavior
    persistent: false,
    preload: false,
    preserveState: true,
    moduleEnabled: true,
    
    // Sidebar
    order: 10,
    
    // Privilege checker: deny access for "user" role
    privilegeChecker: async () => {
        const userData = getUserDataCache();
        const roleLabels = Array.isArray(userData?.roleLabels) ? userData.roleLabels : [];
        // Deny access if user has "user" role
        return !roleLabels.includes('user');
    },
    
    // Custom component wrapper with PekProvider
    customComponent: PekPageWrapper,
    
    // Lifecycle hooks
    onActivate: async () => {
        if (import.meta.env.DEV) console.log('PEK page activated');
    },
    onDeactivate: async () => {
        if (import.meta.env.DEV) console.log('PEK page deactivated');
    }
};