import { GenericPageData } from '../../pageInterface';
import { LuTicket } from 'react-icons/lu';
import { IoMdSend } from 'react-icons/io';
import { MdStop } from 'react-icons/md';
import { HiOutlineCollection } from 'react-icons/hi';
import { createDashboardHook } from '../../../../hooks/usePlayground';

export const dashboardPageData: GenericPageData = {
    id: 'workflows-playground',
    path: 'workflows/playground',
    name: 'chatPlayground.title',
    description: 'chatPlayground.description',

    // Parent page - now under 'workflows' group
    parentPath: 'workflows',
    
    // Visual
    icon: LuTicket,
    title: 'chatPlayground.title',
    subtitle: 'chatPlayground.subtitle',
    
    // Header buttons
    headerButtons: [
        {
            id: 'workflow-selector',
            label: 'dashboard.workflow.selector',
            variant: 'primary',
            size: 'md',
            icon: HiOutlineCollection,
            dropdownConfig: {
                type: 'dropdown',
                items: [], // Will be populated from hookData
                placeholder: 'dashboard.workflow.select',
                emptyMessage: 'dashboard.workflow.empty',
                headerText: 'dashboard.workflow.header',
                onSelect: () => {}, // Placeholder - actual handler comes from dataSource.onSelectMethod
                dataSource: {
                    itemsProperty: 'workflowItems',
                    selectedIdProperty: 'selectedWorkflowId',
                    onSelectMethod: 'onWorkflowSelect'
                }
            }
        }
    ],
    
    // Content sections
    content: [
        {
            id: 'workflow-messages',
            type: 'messages',
            messagesConfig: {
                showDocuments: true,
                showMetadata: false,
                showProgress: false,
                emptyMessage: 'No messages yet. Start a workflow to see messages here.'
            }
        },
        {
            id: 'workflow-log',
            type: 'log',
            logConfig: {
                emptyMessage: 'No log information available'
            }
        },
        {
            id: 'workflow-input',
            type: 'inputForm',
            inputFormConfig: {
                hookFactory: createDashboardHook,
                placeholder: 'dashboard.input.placeholder',
                buttonLabel: 'dashboard.button.send',
                stopButtonLabel: 'dashboard.button.stop',
                buttonIcon: IoMdSend,
                stopButtonIcon: MdStop,
                buttonVariant: 'primary',
                stopButtonVariant: 'danger',
                buttonSize: 'md',
                textFieldSize: 'md'
            }
        }
    ],
    
    // Page behavior
    persistent: true,
    preserveState: true,
    preload: true,
    moduleEnabled: true,
    
    
    // Lifecycle hooks
    onActivate: async () => {
        if (import.meta.env.DEV) console.log('Dashboard activated - state preserved');
    },
    onDeactivate: async () => {
        if (import.meta.env.DEV) console.log('Dashboard deactivated - keeping state');
    }
};