import { GenericPageData } from '../../pageInterface';
import { FaTable, FaBuilding } from 'react-icons/fa';
import { IoMdSend } from 'react-icons/io';
import { usePekTablesContext } from '../../../../contexts/PekTablesContext';
import PekTablesDropdown from './pek-tables/PekTablesDropdown';
import PekTablesPageWrapper from './pek-tables/PekTablesPageWrapper';
import PekTablesTable from './pek-tables/PekTablesTable';

// Hook factory for PEK Tables page
const createPekTablesHook = () => {
    return () => {
        const pekTablesData = usePekTablesContext();
        
        const handleSubmit = async () => {
            await pekTablesData.processCommand(pekTablesData.commandInput);
        };
        
        return {
            // Table data
            data: pekTablesData.tableData,
            loading: pekTablesData.isLoadingTableData || pekTablesData.isLoadingTables,
            error: pekTablesData.tableDataError || pekTablesData.tablesError,
            
            // Messages for command results
            messages: pekTablesData.messages.map(msg => ({
                id: msg.id,
                role: msg.role,
                message: msg.message,
                publishedAt: msg.timestamp.getTime(),
                ...(msg.data && { data: msg.data })
            })),
            
            // Input form properties (for command input)
            inputValue: pekTablesData.commandInput,
            onInputChange: pekTablesData.setCommandInput,
            handleSubmit,
            isSubmitting: pekTablesData.isProcessingCommand,
            
            // Refresh function
            onRefresh: pekTablesData.refreshTableData,
            isRefetching: false
        };
    };
};

export const pekTablesPageData: GenericPageData = {
    id: 'pek-tables',
    path: 'start/pek-tables',
    name: 'PEK Tabellen',
    description: 'PEK Datenverwaltung mit Tabellen',
    
    // Parent page
    parentPath: 'start',
    
    // Visual
    icon: FaTable,
    title: 'PEK Tabellen',
    subtitle: 'Datenverwaltung',
    
    // Header buttons
    headerButtons: [],
    
    // Content sections
    content: [
        {
            id: 'pek-tables-description',
            type: 'paragraph',
            content: 'Verwalten Sie PEK-Daten über Tabellen. Wählen Sie eine Tabelle aus oder verwenden Sie natürliche Sprache, um Befehle auszuführen.'
        },
        {
            id: 'pek-tables-dropdown',
            type: 'custom',
            customComponent: PekTablesDropdown
        },
        {
            id: 'pek-tables-command-input',
            type: 'inputForm',
            inputFormConfig: {
                hookFactory: createPekTablesHook,
                placeholder: 'Befehl eingeben (z.B., "Erstelle ein neues Projekt namens \'Hauptstrasse 42\'")',
                buttonLabel: 'Senden',
                buttonIcon: IoMdSend,
                buttonVariant: 'primary',
                buttonSize: 'md',
                textFieldSize: 'md'
            }
        },
        {
            id: 'pek-tables-command-results',
            type: 'messages',
            messagesConfig: {
                variant: 'chat',
                showDocuments: false,
                showMetadata: false,
                showProgress: false,
                emptyMessage: 'Noch keine Befehle ausgeführt. Senden Sie einen Befehl, um Ergebnisse hier zu sehen.'
            }
        },
        {
            id: 'pek-tables-table',
            type: 'custom',
            customComponent: PekTablesTable
        }
    ],
    
    // Page behavior
    persistent: false,
    preload: false,
    preserveState: true,
    moduleEnabled: true,
    
    // Sidebar
    order: 11,
    showInSidebar: true,
    
    // Custom component wrapper with PekTablesProvider
    customComponent: PekTablesPageWrapper,
    
    // Lifecycle hooks
    onActivate: async () => {
        if (import.meta.env.DEV) console.log('PEK Tables page activated');
    },
    onDeactivate: async () => {
        if (import.meta.env.DEV) console.log('PEK Tables page deactivated');
    }
};