React Integration

import React, { useState } from 'react';
import { useWebMCPOptimizer } from '@webmcp/react';

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  // Initialize webMCP optimizer
  const { 
    optimizeForm, 
    isOptimizing, 
    optimizationResult, 
    error 
  } = useWebMCPOptimizer({
    model: 'gpt-4o',
    aggressiveness: 'moderate',
    preserveSemantics: true,
    
    // Optimization settings
    settings: {
      enableRealTime: true,
      trackAnalytics: true,
      cacheResults: true
    },
    
    // Event handlers
    onOptimizationComplete: (result) => {
      console.log('Optimization complete:', result);
    },
    onError: (error) => {
      console.error('Optimization failed:', error);
    }
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      // Get the form element
      const formElement = e.target;
      
      // Optimize the form before submission
      const optimizedForm = await optimizeForm(formElement, {
        contextData: formData,
        userPreferences: {
          language: 'en',
          accessibility: true
        }
      });
      
      // Submit optimized form data
      await submitForm(optimizedForm.data);
      
    } catch (error) {
      console.error('Form submission failed:', error);
    }
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <div className="contact-form">
      <form onSubmit={handleSubmit} data-webmcp-optimize="true">
        {/* Form fields */}
        <div className="form-group">
          <label htmlFor="name">Name</label>
          <input
            type="text"
            id="name"
            name="name"
            value={formData.name}
            onChange={handleInputChange}
            data-webmcp-field="name"
            required
          />
        </div>

        <div className="form-group">
          <label htmlFor="email">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            value={formData.email}
            onChange={handleInputChange}
            data-webmcp-field="email"
            required
          />
        </div>

        <div className="form-group">
          <label htmlFor="message">Message</label>
          <textarea
            id="message"
            name="message"
            value={formData.message}
            onChange={handleInputChange}
            data-webmcp-field="message"
            rows={4}
            required
          />
        </div>

        {/* Optimization status */}
        {isOptimizing && (
          <div className="optimization-status">
            <div className="spinner" />
            Optimizing form...
          </div>
        )}

        {optimizationResult && (
          <div className="optimization-result">
            <p>Token reduction: {optimizationResult.tokenReduction}%</p>
            <p>Cost savings: ${optimizationResult.costSavings}</p>
          </div>
        )}

        {error && (
          <div className="error-message">
            Optimization failed: {error.message}
          </div>
        )}

        <button 
          type="submit" 
          disabled={isOptimizing}
          className="submit-button"
        >
          {isOptimizing ? 'Optimizing...' : 'Send Message'}
        </button>
      </form>
    </div>
  );
}

export default ContactForm;

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { 
  useWebMCPOptimizer, 
  useFormAnalytics, 
  usePerformanceMonitor 
} from '@webmcp/react';

function AdvancedOptimizedForm({ 
  initialData = {},
  onSubmit,
  optimizationConfig = {},
  analyticsConfig = {}
}) {
  const [formData, setFormData] = useState(initialData);
  const [validationErrors, setValidationErrors] = useState({});
  const [submitStatus, setSubmitStatus] = useState('idle');

  // WebMCP Optimizer Hook
  const {
    optimizeForm,
    optimizeField,
    isOptimizing,
    optimizationResult,
    resetOptimization,
    error: optimizationError
  } = useWebMCPOptimizer({
    model: optimizationConfig.model || 'gpt-4o',
    aggressiveness: optimizationConfig.aggressiveness || 'moderate',
    
    // Advanced settings
    settings: {
      enableRealTime: true,
      enablePreemptiveOptimization: true,
      batchOptimization: true,
      cacheResults: true,
      fallbackModel: 'claude-3.5-sonnet',
      
      // Performance settings
      performance: {
        debounceMs: 300,
        throttleMs: 1000,
        maxConcurrentOptimizations: 3
      }
    },

    // Event callbacks
    onOptimizationStart: (fieldName) => {
      console.log(`Starting optimization for: ${fieldName}`);
    },
    
    onOptimizationComplete: (result) => {
      console.log('Optimization complete:', result);
      trackAnalytics('optimization_completed', result);
    },
    
    onOptimizationError: (error, context) => {
      console.error('Optimization error:', error, context);
      trackAnalytics('optimization_failed', { error: error.message, context });
    }
  });

  // Analytics Hook
  const {
    trackEvent,
    trackFieldInteraction,
    trackConversion,
    trackPerformanceMetric,
    analytics: analyticsData
  } = useFormAnalytics({
    formId: 'advanced-contact-form',
    trackUserBehavior: true,
    trackPerformance: true,
    trackConversions: true,
    
    // Custom events
    customEvents: [
      'field_focus',
      'field_blur',
      'validation_error',
      'optimization_triggered'
    ],
    
    // Analytics configuration
    config: {
      sessionTracking: true,
      heatmapTracking: true,
      scrollTracking: true,
      errorTracking: true
    }
  });

  // Performance Monitor Hook
  const {
    startProfiling,
    stopProfiling,
    getMetrics,
    performanceData
  } = usePerformanceMonitor({
    enableRealTimeTracking: true,
    trackRenderPerformance: true,
    trackMemoryUsage: true
  });

  // Memoized validation rules
  const validationRules = useMemo(() => ({
    name: {
      required: true,
      minLength: 2,
      pattern: /^[a-zA-Z\s]+$/,
      message: 'Name must contain only letters and spaces'
    },
    email: {
      required: true,
      pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
      message: 'Please enter a valid email address'
    },
    message: {
      required: true,
      minLength: 10,
      maxLength: 1000,
      message: 'Message must be between 10 and 1000 characters'
    }
  }), []);

  // Debounced field optimization
  const debouncedOptimizeField = useCallback(
    debounce(async (fieldName, value, element) => {
      if (!value || value.length < 3) return;
      
      try {
        startProfiling(`field_optimization_${fieldName}`);
        
        const result = await optimizeField(element, {
          context: formData,
          fieldValue: value,
          validationRules: validationRules[fieldName]
        });
        
        trackAnalytics('field_optimized', {
          fieldName,
          tokenReduction: result.tokenReduction,
          processingTime: result.processingTime
        });
        
      } catch (error) {
        console.error(`Field optimization error for ${fieldName}:`, error);
      } finally {
        stopProfiling(`field_optimization_${fieldName}`);
      }
    }, 500),
    [optimizeField, formData, validationRules, startProfiling, stopProfiling]
  );

  // Form validation
  const validateField = useCallback((name, value) => {
    const rules = validationRules[name];
    if (!rules) return null;

    if (rules.required && !value) {
      return 'This field is required';
    }

    if (rules.minLength && value.length < rules.minLength) {
      return `Minimum length is ${rules.minLength} characters`;
    }

    if (rules.maxLength && value.length > rules.maxLength) {
      return `Maximum length is ${rules.maxLength} characters`;
    }

    if (rules.pattern && !rules.pattern.test(value)) {
      return rules.message || 'Invalid format';
    }

    return null;
  }, [validationRules]);

  // Handle input change with optimization
  const handleInputChange = useCallback(async (e) => {
    const { name, value } = e.target;
    const element = e.target;

    // Update form data
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));

    // Track field interaction
    trackFieldInteraction(name, value, {
      timestamp: Date.now(),
      charactersTyped: value.length,
      timeSpent: Date.now() - (element.dataset.focusTime || Date.now())
    });

    // Validate field
    const error = validateField(name, value);
    setValidationErrors(prev => ({
      ...prev,
      [name]: error
    }));

    // Track validation errors
    if (error) {
      trackEvent('validation_error', { fieldName: name, error });
    }

    // Trigger field optimization
    if (!error && value.length > 2) {
      debouncedOptimizeField(name, value, element);
    }
  }, [validateField, trackFieldInteraction, trackEvent, debouncedOptimizeField]);

  // Handle field focus
  const handleFieldFocus = useCallback((e) => {
    const { name } = e.target;
    e.target.dataset.focusTime = Date.now();
    
    trackEvent('field_focus', { 
      fieldName: name,
      timestamp: Date.now()
    });
  }, [trackEvent]);

  // Handle field blur
  const handleFieldBlur = useCallback((e) => {
    const { name } = e.target;
    const focusTime = parseInt(e.target.dataset.focusTime || '0');
    const timeSpent = Date.now() - focusTime;
    
    trackEvent('field_blur', {
      fieldName: name,
      timeSpent,
      timestamp: Date.now()
    });
  }, [trackEvent]);

  // Handle form submission
  const handleSubmit = useCallback(async (e) => {
    e.preventDefault();
    setSubmitStatus('submitting');

    try {
      startProfiling('form_submission');
      
      // Validate all fields
      const errors = {};
      Object.keys(formData).forEach(field => {
        const error = validateField(field, formData[field]);
        if (error) errors[field] = error;
      });

      if (Object.keys(errors).length > 0) {
        setValidationErrors(errors);
        setSubmitStatus('error');
        trackEvent('form_validation_failed', { errors });
        return;
      }

      // Optimize entire form before submission
      const formElement = e.target;
      const optimizedForm = await optimizeForm(formElement, {
        contextData: formData,
        submissionContext: true,
        preserveValidation: true
      });

      // Submit form with optimized data
      const result = await onSubmit(optimizedForm.data, optimizedForm.metadata);

      // Track successful conversion
      trackConversion('form_submitted', {
        formData: optimizedForm.data,
        optimizationResult: optimizedForm.optimizationResult,
        submissionTime: Date.now()
      });

      setSubmitStatus('success');
      
      // Reset form if needed
      if (result.resetForm) {
        setFormData(initialData);
        setValidationErrors({});
        resetOptimization();
      }

    } catch (error) {
      console.error('Form submission error:', error);
      setSubmitStatus('error');
      trackEvent('form_submission_failed', { 
        error: error.message,
        formData 
      });
    } finally {
      stopProfiling('form_submission');
    }
  }, [
    formData, 
    validateField, 
    optimizeForm, 
    onSubmit, 
    trackConversion, 
    trackEvent,
    initialData,
    resetOptimization,
    startProfiling,
    stopProfiling
  ]);

  // Performance monitoring effect
  useEffect(() => {
    if (performanceData.renderTime > 100) {
      trackPerformanceMetric('slow_render', {
        renderTime: performanceData.renderTime,
        componentName: 'AdvancedOptimizedForm'
      });
    }
  }, [performanceData, trackPerformanceMetric]);

  return (
    <div className="advanced-optimized-form">
      {/* Performance indicators */}
      {performanceData.renderTime > 50 && (
        <div className="performance-warning">
          Slow render detected: {performanceData.renderTime}ms
        </div>
      )}

      {/* Optimization status */}
      {isOptimizing && (
        <div className="optimization-status">
          <div className="spinner" />
          Optimizing form...
        </div>
      )}

      {/* Analytics summary */}
      {analyticsData.interactionCount > 0 && (
        <div className="analytics-summary">
          <p>Interactions: {analyticsData.interactionCount}</p>
          <p>Time spent: {Math.round(analyticsData.timeSpent / 1000)}s</p>
        </div>
      )}

      <form onSubmit={handleSubmit} data-webmcp-optimize="true">
        {/* Form fields */}
        <div className="form-group">
          <label htmlFor="name">Name *</label>
          <input
            type="text"
            id="name"
            name="name"
            value={formData.name || ''}
            onChange={handleInputChange}
            onFocus={handleFieldFocus}
            onBlur={handleFieldBlur}
            data-webmcp-field="name"
            className={validationErrors.name ? 'error' : ''}
            required
          />
          {validationErrors.name && (
            <span className="error-message">{validationErrors.name}</span>
          )}
        </div>

        <div className="form-group">
          <label htmlFor="email">Email *</label>
          <input
            type="email"
            id="email"
            name="email"
            value={formData.email || ''}
            onChange={handleInputChange}
            onFocus={handleFieldFocus}
            onBlur={handleFieldBlur}
            data-webmcp-field="email"
            className={validationErrors.email ? 'error' : ''}
            required
          />
          {validationErrors.email && (
            <span className="error-message">{validationErrors.email}</span>
          )}
        </div>

        <div className="form-group">
          <label htmlFor="message">Message *</label>
          <textarea
            id="message"
            name="message"
            value={formData.message || ''}
            onChange={handleInputChange}
            onFocus={handleFieldFocus}
            onBlur={handleFieldBlur}
            data-webmcp-field="message"
            className={validationErrors.message ? 'error' : ''}
            rows={4}
            required
          />
          {validationErrors.message && (
            <span className="error-message">{validationErrors.message}</span>
          )}
        </div>

        {/* Optimization results */}
        {optimizationResult && (
          <div className="optimization-result">
            <h4>Optimization Results</h4>
            <p>Token reduction: {optimizationResult.tokenReduction}%</p>
            <p>Cost savings: ${optimizationResult.costSavings}</p>
            <p>Processing time: {optimizationResult.processingTime}ms</p>
          </div>
        )}

        {/* Error display */}
        {optimizationError && (
          <div className="error-message">
            Optimization error: {optimizationError.message}
          </div>
        )}

        {/* Submit button */}
        <button 
          type="submit" 
          disabled={isOptimizing || submitStatus === 'submitting'}
          className={`submit-button ${submitStatus}`}
        >
          {submitStatus === 'submitting' ? 'Submitting...' : 
           isOptimizing ? 'Optimizing...' : 
           'Send Message'}
        </button>

        {/* Status messages */}
        {submitStatus === 'success' && (
          <div className="success-message">
            Message sent successfully!
          </div>
        )}

        {submitStatus === 'error' && (
          <div className="error-message">
            Failed to send message. Please try again.
          </div>
        )}
      </form>
    </div>
  );
}

// Utility function for debouncing
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

export default AdvancedOptimizedForm;

// redux/webmcpSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { WebMCPProcessor } from '@webmcp/core';

// Async thunk for form optimization
export const optimizeForm = createAsyncThunk(
  'webmcp/optimizeForm',
  async ({ formData, config }, { rejectWithValue, getState }) => {
    try {
      const state = getState();
      const processor = new WebMCPProcessor({
        ...config,
        apiKey: state.auth.apiKey
      });

      const result = await processor.optimize(formData, {
        preserveSemantics: true,
        trackAnalytics: true,
        contextData: state.forms.currentContext
      });

      return result;
    } catch (error) {
      return rejectWithValue({
        message: error.message,
        code: error.code,
        timestamp: Date.now()
      });
    }
  }
);

// Async thunk for batch optimization
export const optimizeBatch = createAsyncThunk(
  'webmcp/optimizeBatch',
  async ({ forms, config }, { rejectWithValue, dispatch }) => {
    try {
      const results = [];
      
      for (const form of forms) {
        dispatch(setCurrentOptimization({ formId: form.id, status: 'processing' }));
        
        const result = await dispatch(optimizeForm({ formData: form.data, config }));
        results.push({ formId: form.id, result: result.payload });
        
        dispatch(setCurrentOptimization({ formId: form.id, status: 'completed' }));
      }
      
      return results;
    } catch (error) {
      return rejectWithValue(error.message);
    }
  }
);

const webmcpSlice = createSlice({
  name: 'webmcp',
  initialState: {
    // Optimization state
    currentOptimization: null,
    optimizationQueue: [],
    optimizationHistory: [],
    
    // Configuration
    config: {
      model: 'gpt-4o',
      aggressiveness: 'moderate',
      cacheResults: true,
      trackAnalytics: true
    },
    
    // Analytics data
    analytics: {
      totalOptimizations: 0,
      totalTokensSaved: 0,
      totalCostSavings: 0,
      averageReduction: 0,
      optimizationsByModel: {}
    },
    
    // Performance metrics
    performance: {
      averageProcessingTime: 0,
      successRate: 0,
      errorRate: 0,
      throughput: 0
    },
    
    // UI state
    isOptimizing: false,
    error: null,
    status: 'idle' // 'idle' | 'loading' | 'succeeded' | 'failed'
  },
  
  reducers: {
    // Configuration actions
    updateConfig: (state, action) => {
      state.config = { ...state.config, ...action.payload };
    },
    
    resetConfig: (state) => {
      state.config = {
        model: 'gpt-4o',
        aggressiveness: 'moderate',
        cacheResults: true,
        trackAnalytics: true
      };
    },
    
    // Queue management
    addToQueue: (state, action) => {
      const { formId, formData, priority = 'normal', timestamp = Date.now() } = action.payload;
      
      state.optimizationQueue.push({
        id: `${formId}_${timestamp}`,
        formId,
        formData,
        priority,
        timestamp,
        status: 'queued'
      });
      
      // Sort by priority and timestamp
      state.optimizationQueue.sort((a, b) => {
        const priorityOrder = { high: 3, normal: 2, low: 1 };
        if (priorityOrder[a.priority] !== priorityOrder[b.priority]) {
          return priorityOrder[b.priority] - priorityOrder[a.priority];
        }
        return a.timestamp - b.timestamp;
      });
    },
    
    removeFromQueue: (state, action) => {
      const { id } = action.payload;
      state.optimizationQueue = state.optimizationQueue.filter(item => item.id !== id);
    },
    
    clearQueue: (state) => {
      state.optimizationQueue = [];
    },
    
    // Current optimization tracking
    setCurrentOptimization: (state, action) => {
      state.currentOptimization = action.payload;
    },
    
    clearCurrentOptimization: (state) => {
      state.currentOptimization = null;
    },
    
    // Analytics updates
    updateAnalytics: (state, action) => {
      const { result } = action.payload;
      
      state.analytics.totalOptimizations += 1;
      state.analytics.totalTokensSaved += result.tokensSaved || 0;
      state.analytics.totalCostSavings += result.costSavings || 0;
      
      // Update model-specific analytics
      const model = result.model || 'unknown';
      if (!state.analytics.optimizationsByModel[model]) {
        state.analytics.optimizationsByModel[model] = {
          count: 0,
          totalReduction: 0,
          totalCostSavings: 0
        };
      }
      
      const modelStats = state.analytics.optimizationsByModel[model];
      modelStats.count += 1;
      modelStats.totalReduction += result.tokenReduction || 0;
      modelStats.totalCostSavings += result.costSavings || 0;
      
      // Calculate averages
      state.analytics.averageReduction = 
        Object.values(state.analytics.optimizationsByModel)
          .reduce((sum, model) => sum + model.totalReduction, 0) / 
        Object.values(state.analytics.optimizationsByModel)
          .reduce((sum, model) => sum + model.count, 0);
    },
    
    // Performance tracking
    updatePerformance: (state, action) => {
      const { processingTime, success } = action.payload;
      
      // Update processing time average
      const totalProcessingTime = state.performance.averageProcessingTime * state.analytics.totalOptimizations;
      state.performance.averageProcessingTime = 
        (totalProcessingTime + processingTime) / (state.analytics.totalOptimizations + 1);
      
      // Update success/error rates
      const totalAttempts = state.analytics.totalOptimizations;
      if (success) {
        state.performance.successRate = 
          (state.performance.successRate * totalAttempts + 1) / (totalAttempts + 1);
      } else {
        state.performance.errorRate = 
          (state.performance.errorRate * totalAttempts + 1) / (totalAttempts + 1);
      }
    },
    
    // Error handling
    clearError: (state) => {
      state.error = null;
    }
  },
  
  extraReducers: (builder) => {
    builder
      // Single form optimization
      .addCase(optimizeForm.pending, (state, action) => {
        state.isOptimizing = true;
        state.status = 'loading';
        state.error = null;
        
        const { formData } = action.meta.arg;
        state.currentOptimization = {
          formId: formData.id || 'unknown',
          status: 'processing',
          startTime: Date.now()
        };
      })
      .addCase(optimizeForm.fulfilled, (state, action) => {
        state.isOptimizing = false;
        state.status = 'succeeded';
        
        const result = action.payload;
        
        // Update optimization history
        state.optimizationHistory.unshift({
          id: `opt_${Date.now()}`,
          formId: state.currentOptimization?.formId,
          result,
          timestamp: Date.now(),
          processingTime: Date.now() - (state.currentOptimization?.startTime || Date.now())
        });
        
        // Keep only last 100 optimizations in history
        if (state.optimizationHistory.length > 100) {
          state.optimizationHistory = state.optimizationHistory.slice(0, 100);
        }
        
        // Update analytics
        webmcpSlice.caseReducers.updateAnalytics(state, { payload: { result } });
        webmcpSlice.caseReducers.updatePerformance(state, { 
          payload: { 
            processingTime: Date.now() - (state.currentOptimization?.startTime || Date.now()),
            success: true 
          }
        });
        
        state.currentOptimization = null;
      })
      .addCase(optimizeForm.rejected, (state, action) => {
        state.isOptimizing = false;
        state.status = 'failed';
        state.error = action.payload;
        
        // Update performance metrics
        webmcpSlice.caseReducers.updatePerformance(state, { 
          payload: { 
            processingTime: Date.now() - (state.currentOptimization?.startTime || Date.now()),
            success: false 
          }
        });
        
        state.currentOptimization = null;
      })
      
      // Batch optimization
      .addCase(optimizeBatch.pending, (state) => {
        state.isOptimizing = true;
        state.status = 'loading';
        state.error = null;
      })
      .addCase(optimizeBatch.fulfilled, (state, action) => {
        state.isOptimizing = false;
        state.status = 'succeeded';
        
        // Process batch results
        action.payload.forEach(({ formId, result }) => {
          state.optimizationHistory.unshift({
            id: `batch_${formId}_${Date.now()}`,
            formId,
            result,
            timestamp: Date.now(),
            batch: true
          });
          
          webmcpSlice.caseReducers.updateAnalytics(state, { payload: { result } });
        });
      })
      .addCase(optimizeBatch.rejected, (state, action) => {
        state.isOptimizing = false;
        state.status = 'failed';
        state.error = action.payload;
      });
  }
});

export const {
  updateConfig,
  resetConfig,
  addToQueue,
  removeFromQueue,
  clearQueue,
  setCurrentOptimization,
  clearCurrentOptimization,
  updateAnalytics,
  updatePerformance,
  clearError
} = webmcpSlice.actions;

// Selectors
export const selectWebMCPState = (state) => state.webmcp;
export const selectIsOptimizing = (state) => state.webmcp.isOptimizing;
export const selectOptimizationQueue = (state) => state.webmcp.optimizationQueue;
export const selectOptimizationHistory = (state) => state.webmcp.optimizationHistory;
export const selectAnalytics = (state) => state.webmcp.analytics;
export const selectPerformance = (state) => state.webmcp.performance;
export const selectConfig = (state) => state.webmcp.config;

export default webmcpSlice.reducer;

// React Hook for Redux Integration
import { useSelector, useDispatch } from 'react-redux';
import { useCallback } from 'react';

export function useWebMCPRedux() {
  const dispatch = useDispatch();
  const webmcpState = useSelector(selectWebMCPState);
  const isOptimizing = useSelector(selectIsOptimizing);
  const analytics = useSelector(selectAnalytics);
  const performance = useSelector(selectPerformance);
  const config = useSelector(selectConfig);

  const optimizeFormWithRedux = useCallback((formData, optimizationConfig = {}) => {
    return dispatch(optimizeForm({ 
      formData, 
      config: { ...config, ...optimizationConfig } 
    }));
  }, [dispatch, config]);

  const optimizeBatchWithRedux = useCallback((forms, optimizationConfig = {}) => {
    return dispatch(optimizeBatch({ 
      forms, 
      config: { ...config, ...optimizationConfig } 
    }));
  }, [dispatch, config]);

  const updateConfiguration = useCallback((newConfig) => {
    dispatch(updateConfig(newConfig));
  }, [dispatch]);

  const addToOptimizationQueue = useCallback((formId, formData, priority) => {
    dispatch(addToQueue({ formId, formData, priority }));
  }, [dispatch]);

  return {
    // State
    ...webmcpState,
    isOptimizing,
    analytics,
    performance,
    config,
    
    // Actions
    optimizeForm: optimizeFormWithRedux,
    optimizeBatch: optimizeBatchWithRedux,
    updateConfig: updateConfiguration,
    addToQueue: addToOptimizationQueue,
    removeFromQueue: (id) => dispatch(removeFromQueue({ id })),
    clearQueue: () => dispatch(clearQueue()),
    clearError: () => dispatch(clearError())
  };
}

// components/OptimizedForm.jsx
import React, { forwardRef, useImperativeHandle } from 'react';
import { useWebMCPOptimizer, useFormAnalytics } from '@webmcp/react';

const OptimizedForm = forwardRef(({
  children,
  onSubmit,
  onOptimizationComplete,
  optimizationConfig = {},
  analyticsConfig = {},
  className = '',
  ...props
}, ref) => {
  const {
    optimizeForm,
    isOptimizing,
    optimizationResult,
    error: optimizationError,
    resetOptimization
  } = useWebMCPOptimizer({
    ...optimizationConfig,
    onOptimizationComplete: (result) => {
      if (onOptimizationComplete) {
        onOptimizationComplete(result);
      }
    }
  });

  const {
    trackEvent,
    trackConversion,
    analytics
  } = useFormAnalytics(analyticsConfig);

  useImperativeHandle(ref, () => ({
    optimize: async (formElement) => {
      return await optimizeForm(formElement || ref.current);
    },
    reset: () => {
      resetOptimization();
    },
    getAnalytics: () => analytics,
    getOptimizationResult: () => optimizationResult
  }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      trackEvent('form_submission_started');
      
      const optimizedForm = await optimizeForm(e.target);
      
      if (onSubmit) {
        const result = await onSubmit(optimizedForm.data, optimizedForm.metadata);
        
        trackConversion('form_submitted', {
          optimizationResult: optimizedForm.optimizationResult,
          submissionResult: result
        });
      }
    } catch (error) {
      trackEvent('form_submission_failed', { error: error.message });
      throw error;
    }
  };

  return (
    <form
      ref={ref}
      onSubmit={handleSubmit}
      className={`webmcp-optimized-form ${className}`}
      data-webmcp-optimize="true"
      {...props}
    >
      {isOptimizing && (
        <div className="webmcp-optimization-overlay">
          <div className="webmcp-spinner" />
          <span>Optimizing form...</span>
        </div>
      )}
      
      {optimizationError && (
        <div className="webmcp-error">
          Optimization failed: {optimizationError.message}
        </div>
      )}
      
      {optimizationResult && (
        <div className="webmcp-result">
          <span>Token reduction: {optimizationResult.tokenReduction}%</span>
        </div>
      )}
      
      {children}
    </form>
  );
});

// components/SmartInput.jsx
import React, { useState, useEffect, useCallback } from 'react';
import { useWebMCPOptimizer } from '@webmcp/react';

export function SmartInput({
  name,
  value,
  onChange,
  onOptimization,
  optimizeOnBlur = true,
  optimizeOnChange = false,
  debounceMs = 500,
  className = '',
  ...props
}) {
  const [localValue, setLocalValue] = useState(value || '');
  const [isOptimized, setIsOptimized] = useState(false);
  
  const {
    optimizeField,
    isOptimizing,
    optimizationResult
  } = useWebMCPOptimizer({
    onOptimizationComplete: (result) => {
      setIsOptimized(true);
      if (onOptimization) {
        onOptimization(result);
      }
    }
  });

  const debouncedOptimize = useCallback(
    debounce(async (element, fieldValue) => {
      if (fieldValue && fieldValue.length > 2) {
        await optimizeField(element, { fieldValue });
      }
    }, debounceMs),
    [optimizeField, debounceMs]
  );

  const handleChange = (e) => {
    const newValue = e.target.value;
    setLocalValue(newValue);
    setIsOptimized(false);
    
    if (onChange) {
      onChange(e);
    }
    
    if (optimizeOnChange) {
      debouncedOptimize(e.target, newValue);
    }
  };

  const handleBlur = (e) => {
    if (optimizeOnBlur && localValue) {
      optimizeField(e.target, { fieldValue: localValue });
    }
    
    if (props.onBlur) {
      props.onBlur(e);
    }
  };

  useEffect(() => {
    setLocalValue(value || '');
  }, [value]);

  return (
    <div className="webmcp-smart-input-wrapper">
      <input
        {...props}
        name={name}
        value={localValue}
        onChange={handleChange}
        onBlur={handleBlur}
        className={`webmcp-smart-input ${className} ${isOptimized ? 'optimized' : ''} ${isOptimizing ? 'optimizing' : ''}`}
        data-webmcp-field={name}
      />
      
      {isOptimizing && (
        <div className="webmcp-input-spinner" />
      )}
      
      {isOptimized && optimizationResult && (
        <div className="webmcp-input-indicator">
          ✓ {optimizationResult.tokenReduction}% reduction
        </div>
      )}
    </div>
  );
}

// components/AnalyticsDashboard.jsx
import React from 'react';
import { useFormAnalytics } from '@webmcp/react';

export function AnalyticsDashboard({ 
  formId, 
  className = '',
  showRealTime = true,
  showHistorical = true 
}) {
  const { analytics, performanceMetrics } = useFormAnalytics({ 
    formId,
    enableRealTimeTracking: showRealTime 
  });

  if (!analytics) {
    return <div className="webmcp-analytics-loading">Loading analytics...</div>;
  }

  return (
    <div className={`webmcp-analytics-dashboard ${className}`}>
      {showRealTime && (
        <div className="webmcp-analytics-section">
          <h3>Real-time Metrics</h3>
          <div className="webmcp-metrics-grid">
            <div className="webmcp-metric">
              <span className="webmcp-metric-label">Active Users</span>
              <span className="webmcp-metric-value">{analytics.activeUsers}</span>
            </div>
            <div className="webmcp-metric">
              <span className="webmcp-metric-label">Form Interactions</span>
              <span className="webmcp-metric-value">{analytics.interactionCount}</span>
            </div>
            <div className="webmcp-metric">
              <span className="webmcp-metric-label">Avg Session Time</span>
              <span className="webmcp-metric-value">
                {Math.round(analytics.averageSessionTime / 1000)}s
              </span>
            </div>
            <div className="webmcp-metric">
              <span className="webmcp-metric-label">Conversion Rate</span>
              <span className="webmcp-metric-value">
                {(analytics.conversionRate * 100).toFixed(1)}%
              </span>
            </div>
          </div>
        </div>
      )}
      
      {showHistorical && (
        <div className="webmcp-analytics-section">
          <h3>Optimization Performance</h3>
          <div className="webmcp-performance-grid">
            <div className="webmcp-performance-item">
              <span className="webmcp-performance-label">Total Optimizations</span>
              <span className="webmcp-performance-value">
                {analytics.totalOptimizations}
              </span>
            </div>
            <div className="webmcp-performance-item">
              <span className="webmcp-performance-label">Avg Token Reduction</span>
              <span className="webmcp-performance-value">
                {analytics.averageTokenReduction}%
              </span>
            </div>
            <div className="webmcp-performance-item">
              <span className="webmcp-performance-label">Total Cost Savings</span>
              <span className="webmcp-performance-value">
                ${analytics.totalCostSavings.toFixed(2)}
              </span>
            </div>
            <div className="webmcp-performance-item">
              <span className="webmcp-performance-label">Success Rate</span>
              <span className="webmcp-performance-value">
                {(performanceMetrics.successRate * 100).toFixed(1)}%
              </span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// components/OptimizationStatus.jsx
export function OptimizationStatus({ 
  optimizationResult, 
  isOptimizing, 
  error,
  showDetails = false,
  className = '' 
}) {
  if (isOptimizing) {
    return (
      <div className={`webmcp-status optimizing ${className}`}>
        <div className="webmcp-spinner" />
        <span>Optimizing...</span>
      </div>
    );
  }
  
  if (error) {
    return (
      <div className={`webmcp-status error ${className}`}>
        <span>❌ Optimization failed</span>
        {showDetails && (
          <div className="webmcp-error-details">
            {error.message}
          </div>
        )}
      </div>
    );
  }
  
  if (optimizationResult) {
    return (
      <div className={`webmcp-status success ${className}`}>
        <span>✅ Optimized</span>
        {showDetails && (
          <div className="webmcp-result-details">
            <div>Token reduction: {optimizationResult.tokenReduction}%</div>
            <div>Cost savings: ${optimizationResult.costSavings}</div>
            <div>Processing time: {optimizationResult.processingTime}ms</div>
          </div>
        )}
      </div>
    );
  }
  
  return null;
}

// Utility function
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

export { OptimizedForm };