/**
 * Workflow Step Component Example Usage
 * 
 * This file demonstrates how to use the workflow step component dispatching system
 * and provides examples for developers who want to create new workflow steps.
 */

import { 
    getStepComponent, 
    registerStepComponent, 
    hasStepComponent,
    getWorkflowComponents,
    getRegisteredWorkflowTypes 
} from './ComponentRegistry.js';

/**
 * Example: Creating and registering a new workflow step component
 */

// 1. Create your step component (example)
const ExampleWorkflowStep1 = {
    name: 'ExampleWorkflowStep1',
    props: {
        workflowInstance: { type: Object, required: true },
        step: { type: String, required: true },
        payload: { type: Object, default: () => ({}) }
    },
    template: `
        <div class="example-step">
            <h4>Example Workflow - Step 1</h4>
            <p>This is a custom workflow step component.</p>
            <button @click="$emit('next')" class="btn btn-primary">
                Next Step
            </button>
        </div>
    `
};

// 2. Register the component
registerStepComponent('example-workflow', '1', ExampleWorkflowStep1);

/**
 * Example: Using the component registry programmatically
 */
export function demonstrateComponentRegistry() {
    console.log('=== Workflow Component Registry Demo ===');
    
    // Check if a component exists
    console.log('Has foto-first step 1:', hasStepComponent('foto-first-bulk-import', '1'));
    console.log('Has non-existent step:', hasStepComponent('non-existent', '999'));
    
    // Get a specific component
    const step1Component = getStepComponent('foto-first-bulk-import', '1');
    console.log('Retrieved component:', step1Component?.name);
    
    // Get all components for a workflow
    const fotoFirstComponents = getWorkflowComponents('foto-first-bulk-import');
    console.log('Foto First components:', Object.keys(fotoFirstComponents));
    
    // Get all registered workflow types
    const workflowTypes = getRegisteredWorkflowTypes();
    console.log('Registered workflow types:', workflowTypes);
    
    return {
        availableWorkflows: workflowTypes,
        fotoFirstSteps: Object.keys(fotoFirstComponents),
        totalComponents: workflowTypes.reduce((total, type) => {
            return total + Object.keys(getWorkflowComponents(type)).length;
        }, 0)
    };
}

/**
 * Example: Dynamic component loading in a Vue component
 */
export const WorkflowStepLoader = {
    name: 'WorkflowStepLoader',
    props: {
        workflowType: { type: String, required: true },
        currentStep: { type: [String, Number], required: true },
        workflowInstance: { type: Object, required: true },
        payload: { type: Object, default: () => ({}) }
    },
    computed: {
        stepComponent() {
            return getStepComponent(this.workflowType, this.currentStep);
        },
        hasStepComponent() {
            return hasStepComponent(this.workflowType, this.currentStep);
        }
    },
    template: `
        <div class="workflow-step-loader">
            <!-- Custom step component if available -->
            <component 
                v-if="stepComponent"
                :is="stepComponent"
                :workflow-instance="workflowInstance"
                :step="currentStep.toString()"
                :payload="payload"
                @update="$emit('update', $event)"
                @next="$emit('next')"
                @prev="$emit('prev')"
                @complete="$emit('complete')"
            />
            
            <!-- Fallback content if no custom component -->
            <div v-else class="default-step-content">
                <h5>{{ workflowType }} - Step {{ currentStep }}</h5>
                <p class="text-muted">No custom component found for this step.</p>
                <div class="d-flex justify-content-between">
                    <button @click="$emit('prev')" class="btn btn-outline-secondary">
                        Previous
                    </button>
                    <button @click="$emit('next')" class="btn btn-primary">
                        Next
                    </button>
                </div>
            </div>
        </div>
    `
};

/**
 * Development utilities for workflow components
 */
export const WorkflowDevUtils = {
    /**
     * List all available workflow steps
     */
    listAllSteps() {
        const workflowTypes = getRegisteredWorkflowTypes();
        const allSteps = {};
        
        workflowTypes.forEach(type => {
            allSteps[type] = Object.keys(getWorkflowComponents(type));
        });
        
        return allSteps;
    },

    /**
     * Validate workflow step coverage
     */
    validateWorkflowCoverage(workflowDefinitions) {
        const results = {};
        
        Object.entries(workflowDefinitions).forEach(([type, definition]) => {
            const requiredSteps = definition.getStepDefinitions().map(s => s.step.toString());
            const availableSteps = Object.keys(getWorkflowComponents(type));
            
            results[type] = {
                required: requiredSteps,
                available: availableSteps,
                missing: requiredSteps.filter(step => !availableSteps.includes(step)),
                coverage: (availableSteps.length / requiredSteps.length) * 100
            };
        });
        
        return results;
    },

    /**
     * Generate component registry report
     */
    generateReport() {
        const workflowTypes = getRegisteredWorkflowTypes();
        const report = {
            totalWorkflowTypes: workflowTypes.length,
            totalComponents: 0,
            workflows: {}
        };

        workflowTypes.forEach(type => {
            const components = getWorkflowComponents(type);
            const stepCount = Object.keys(components).length;
            
            report.totalComponents += stepCount;
            report.workflows[type] = {
                steps: stepCount,
                stepNumbers: Object.keys(components).sort((a, b) => parseInt(a) - parseInt(b))
            };
        });

        return report;
    }
};

export default {
    demonstrateComponentRegistry,
    WorkflowStepLoader,
    WorkflowDevUtils
};
