interface VoiceAIConfig {
  // Core settings
  speechToText: SpeechToTextConfig;
  textToSpeech: TextToSpeechConfig;
  aiProvider: AIProviderConfig;
  responseMode?: ResponseMode;
  
  // NEW: Mode system
  interfaceMode?: VoiceInterfaceMode; // 'developer' | 'project' | 'end-user'
  visibility?: VisibilityConfig;       // Override what's visible
  
  // Existing settings...
  apiBaseUrl?: string;
  context?: Record<string, any>;
}

// Mode types
type VoiceInterfaceMode = 'developer' | 'project' | 'end-user';

interface VisibilityConfig {
  // Provider information
  showProviders?: boolean;           // Show AI provider names
  showProviderStatus?: boolean;      // Show online/offline status
  
  // Debug and technical info
  showDebugInfo?: boolean;           // Show processing times, internal data
  showConfidenceScores?: boolean;    // Show confidence percentages
  showTechnicalErrors?: boolean;     // Show stack traces
  
  // User interface features
  showAdvancedSettings?: boolean;    // Show configuration panel
  showAnalytics?: boolean;           // Show metrics and insights
  showMiniCenter?: boolean;          // Show mini command center
  
  // Labeling
  useGenericLabels?: boolean;        // Use "Voice Assistant" vs "OpenAI"
  customLabels?: CustomLabels;       // Custom text overrides
}

interface VoiceButtonProps {
  config: VoiceAIConfig;
  
  // Mode overrides (optional)
  mode?: VoiceInterfaceMode;                    // Override global mode
  visibilityOverrides?: Partial<VisibilityConfig>; // Override visibility
  customLabels?: Partial<CustomLabels>;        // Override labels
  
  // Existing props...
  size?: 'sm' | 'md' | 'lg' | 'xl';
  variant?: 'primary' | 'secondary' | 'ghost';
  onCommand?: (command: VoiceCommand) => void;
  onResponse?: (response: VoiceResponse) => void;
  onError?: (error: VoiceAIError) => void;
}

// Example: Component-level mode override
<VoiceButton
  config={globalConfig}      // Global: project mode
  mode="end-user"            // This component: end-user mode
  customLabels={{
    voiceButton: { startText: 'Ask Question' }
  }}
/>

// Commands are filtered based on current mode
interface VoiceCommand {
  intent: string;                    // Always included
  rawText: string;                   // Always included
  timestamp: Date;                   // Always included
  
  // Mode-dependent fields
  entities?: Record<string, any>;    // Hidden in end-user mode
  confidence?: number;               // Hidden if showConfidenceScores: false
  provider?: AIProvider;             // Hidden if showProviders: false
}

// Responses are filtered to match mode
interface VoiceResponse {
  text: string;                      // Always included
  success: boolean;                  // Always included
  data?: any;                        // Always included
  
  // Mode-dependent metadata
  metadata?: {
    provider?: AIProvider;           // Hidden if showProviders: false
    confidence?: number;             // Hidden if showConfidenceScores: false
    processingTime?: number;         // Hidden if showProcessingTimes: false
  };
}

const {
  isListening,
  startListening,
  stopListening,
  
  // NEW: Mode-aware properties
  visibility,  // Resolved visibility settings
  labels      // Resolved label configuration
} = useVoiceAI({
  config,
  mode: 'end-user',                 // Component mode override
  visibilityOverrides: {            // Fine-tune visibility
    showMiniCenter: false
  },
  onCommand: (command) => {
    // Command object filtered based on mode
    console.log(command.intent);    // Always available
    console.log(command.confidence); // May be undefined in end-user mode
  }
});

// config/voice.ts - Environment-based setup
const getVoiceMode = (): VoiceInterfaceMode => {
  if (process.env.NODE_ENV === 'development') return 'developer';
  if (process.env.REACT_APP_USER_TYPE === 'admin') return 'project';
  return 'end-user';
};

export const voiceConfig = {
  speechToText: { provider: 'web-speech' as any },
  textToSpeech: { provider: 'web-speech' as any },
  aiProvider: { provider: 'openai' as any },
  responseMode: 'both' as any,
  interfaceMode: getVoiceMode(),
};

// Different modes for different user types in same app
function StaffluentApp() {
  const user = useUser();
  
  // Determine mode based on user role
  const getVoiceMode = () => {
    if (user.role === 'admin') return 'project';
    if (user.role === 'customer') return 'end-user';
    return 'end-user'; // Default for employees
  };

  return (
    <div>
      {/* Admin section - project mode */}
      {user.role === 'admin' && (
        <VoiceCommandCenter
          config={baseConfig}
          mode="project"
          isOpen={true}
        />
      )}
      
      {/* User help - end-user mode */}
      <VoiceButton
        config={baseConfig}
        mode={getVoiceMode()}
        customLabels={{
          voiceButton: {
            startText: user.role === 'customer' ? 'Ask for Help' : 'Voice Command'
          }
        }}
      />
    </div>
  );
}

function DevelopmentConsole() {
  const [currentMode, setCurrentMode] = useState<VoiceInterfaceMode>('project');
  
  return (
    <div>
      {/* Mode selector for testing */}
      <select value={currentMode} onChange={(e) => setCurrentMode(e.target.value as any)}>
        <option value="developer">Developer Mode</option>
        <option value="project">Project Mode</option>
        <option value="end-user">End-User Mode</option>
      </select>
      
      {/* Voice interface that adapts to selected mode */}
      <VoiceButton
        config={baseConfig}
        mode={currentMode}
        onCommand={(cmd) => {
          // Command details vary by mode
          console.log('Mode:', currentMode);
          console.log('Command:', cmd);
        }}
      />
    </div>
  );
}

// Before (v1.x)
const voiceAI = new VoiceAI({
  speechToText: { provider: 'web-speech' },
  aiProvider: { provider: 'openai' },
  // Fixed interface for everyone
});

// After (v2.x) - Choose your mode
const voiceAI = new VoiceAI({
  speechToText: { provider: 'web-speech' },
  aiProvider: { provider: 'openai' },
  
  // NEW: Choose interface mode
  interfaceMode: 'end-user', // or 'project' or 'developer'
  
  // NEW: Customize what's visible
  visibility: {
    showProviders: false,      // Hide "OpenAI" from end users
    useGenericLabels: true,    // Show "Voice Assistant"
    showDebugInfo: false       // No technical details
  }
});