// 🎸 Foundational Template Generators for Cipher Handlers
// Location: .vscode-extensions/cipher-autonomous-dev/src/shared/templateGenerators.ts
// Purpose: Component, route, and handler templates for 37-handler ecosystem
// Music Focus: Rock, Metal, Blues, Country Rock, Modern Christian Contemporary
// Self-Generation: Supports Cipher's self-evolving template system

import { AnalysisResult } from "./types";

// ===== ENHANCED COMPONENT SNIPPETS =====

export function generateComponentSnippet(type: string, name: string): string {
  const templates = {
    guitar: `// 🎸 ${name} - Generated by Cipher Autonomous
import React, { useState, useCallback, useEffect } from 'react';

interface ${name}Props {
  genre?: 'rock' | 'metal' | 'blues' | 'country' | 'worship';
  tuning?: 'standard' | 'dropD' | 'openG' | 'dadgad';
}

const ${name}: React.FC<${name}Props> = ({ 
  genre = 'rock', 
  tuning = 'standard' 
}) => {
  const [isActive, setIsActive] = useState(false);
  const [currentChord, setCurrentChord] = useState('');
  const [audioContext, setAudioContext] = useState<AudioContext | null>(null);

  useEffect(() => {
    // Initialize Web Audio API for real-time analysis
    if (typeof window !== 'undefined' && window.AudioContext) {
      setAudioContext(new AudioContext());
    }
  }, []);

  const handleToggle = useCallback(() => {
    setIsActive(prev => !prev);
  }, []);

  const getGenreChords = useCallback(() => {
    const chordSets = {
      rock: ['C5', 'F5', 'G5', 'Am'],
      metal: ['Em', 'C5', 'D5', 'B5'],
      blues: ['E7', 'A7', 'B7', 'E7'],
      country: ['G', 'C', 'D', 'Em'],
      worship: ['Cadd9', 'G/B', 'Am7', 'F2']
    };
    return chordSets[genre] || chordSets.rock;
  }, [genre]);

  return (
    <div className="p-6 bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 text-white">
      <h2 className="text-3xl font-bold mb-4">🎸 ${name}</h2>
      <div className="mb-4">
        <span className="text-sm text-gray-300">Genre: {genre} | Tuning: {tuning}</span>
      </div>
      
      <div className="grid grid-cols-4 gap-2 mb-6">
        {getGenreChords().map(chord => (
          <button
            key={chord}
            onClick={() => setCurrentChord(chord)}
            className="p-2 bg-blue-600 hover:bg-blue-700 rounded transition-colors"
          >
            {chord}
          </button>
        ))}
      </div>
      
      <button 
        onClick={handleToggle}
        className="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg transition-colors"
      >
        {isActive ? '⏹️ Stop' : '▶️ Start'} Practice
      </button>
      
      {currentChord && (
        <div className="mt-4 p-4 bg-black/30 rounded">
          <p className="text-lg">Current: <strong>{currentChord}</strong></p>
        </div>
      )}
    </div>
  );
};

export default React.memo(${name});`,

    voice: `// 🎤 ${name} - Generated by Cipher Autonomous
import React, { useState, useCallback, useEffect } from 'react';

interface ${name}Props {
  style?: 'rock' | 'country' | 'worship' | 'blues';
  range?: 'soprano' | 'alto' | 'tenor' | 'bass';
}

const ${name}: React.FC<${name}Props> = ({ 
  style = 'worship', 
  range = 'alto' 
}) => {
  const [isRecording, setIsRecording] = useState(false);
  const [pitch, setPitch] = useState(0);
  const [breathControl, setBreathControl] = useState(0);

  const handleRecord = useCallback(() => {
    setIsRecording(prev => !prev);
  }, []);

  const getStyleExercises = useCallback(() => {
    const exercises = {
      rock: ['Power breathing', 'Grit control', 'High energy'],
      country: ['Vocal twang', 'Natural vibrato', 'Storytelling'],
      worship: ['Smooth transitions', 'Sustained notes', 'Gentle vibrato'],
      blues: ['Emotional expression', 'Vocal bends', 'Raw delivery']
    };
    return exercises[style] || exercises.worship;
  }, [style]);

  return (
    <div className="p-6 bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 text-white">
      <h2 className="text-3xl font-bold mb-4">🎤 ${name}</h2>
      <div className="mb-4">
        <span className="text-sm text-gray-300">Style: {style} | Range: {range}</span>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        {getStyleExercises().map(exercise => (
          <div key={exercise} className="p-3 bg-gray-800 rounded">
            <p className="text-sm">{exercise}</p>
          </div>
        ))}
      </div>
      
      <button 
        onClick={handleRecord}
        className="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg transition-colors mr-4"
      >
        {isRecording ? '⏹️ Stop' : '🎤 Record'}
      </button>
      
      <div className="mt-4 grid grid-cols-2 gap-4">
        <div className="p-3 bg-black/30 rounded">
          <p className="text-sm text-gray-300">Pitch</p>
          <p className="text-lg font-bold">{pitch}Hz</p>
        </div>
        <div className="p-3 bg-black/30 rounded">
          <p className="text-sm text-gray-300">Breath Control</p>
          <p className="text-lg font-bold">{breathControl}%</p>
        </div>
      </div>
    </div>
  );
};

export default React.memo(${name});`,

    quick: `// ⚡ ${name} - Generated by Cipher Autonomous
import React from 'react';

const ${name}: React.FC = () => {
  return (
    <div className="p-6 bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 text-white">
      <h2 className="text-2xl font-bold mb-4">⚡ ${name}</h2>
      <p className="text-gray-300">Quick component ready for music development!</p>
    </div>
  );
};

export default React.memo(${name});`,

    // New music-specific templates
    chordTrainer: `// 🎼 ${name} - Chord Trainer Component
import React, { useState, useCallback } from 'react';

const ${name}: React.FC = () => {
  const [genre, setGenre] = useState<'rock' | 'worship' | 'blues' | 'country'>('rock');
  const [currentProgression, setCurrentProgression] = useState<string[]>([]);

  const progressions = {
    rock: ['C5-F5-G5-C5', 'Am-F-C-G', 'Em-C-G-D'],
    worship: ['Cadd9-G/B-Am7-F2', 'C-Am-F-G', 'G-D-Em-C'],
    blues: ['E7-E7-E7-E7', 'A7-A7-E7-E7', 'B7-A7-E7-B7'],
    country: ['G-C-D-G', 'C-F-G-C', 'Am-F-C-G']
  };

  return (
    <div className="p-6 bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 text-white">
      <h2 className="text-3xl font-bold mb-4">🎼 ${name}</h2>
      <div className="mb-6">
        {Object.keys(progressions).map(g => (
          <button
            key={g}
            onClick={() => setGenre(g as any)}
            className={\`px-4 py-2 mr-2 rounded \${genre === g ? 'bg-blue-600' : 'bg-gray-600'}\`}
          >
            {g.charAt(0).toUpperCase() + g.slice(1)}
          </button>
        ))}
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {progressions[genre].map((prog, idx) => (
          <div key={idx} className="p-4 bg-black/30 rounded">
            <p className="font-mono text-lg">{prog}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default React.memo(${name});`,
  };

  return templates[type as keyof typeof templates] || templates.quick;
}

// ===== ENHANCED PAGE CONTENT GENERATION =====

export function generatePageContent(
  componentName: string,
  moduleName: string
): string {
  return `// 🎵 ${componentName} Page - Generated by Cipher Autonomous
import React from 'react';
import ${componentName}Component from '../../src/components/${moduleName}/${componentName}';

export default function ${componentName}Page() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900">
      <${componentName}Component />
    </div>
  );
}

// Route: localhost:3000/${moduleName}
// Generated: ${new Date().toISOString()}
// Music App: Supports Rock, Metal, Blues, Country, Worship`;
}

// ===== ENHANCED MODULE COMPONENT GENERATION =====

export function generateModuleComponent(
  componentName: string,
  moduleName: string
): string {
  const moduleDescriptions: { [key: string]: string } = {
    practice: "Advanced Practice Tools & Session Management",
    tuner: "Professional Guitar & Instrument Tuning",
    metronome: "Smart Metronome & Timing Tools",
    jam: "Collaborative Music Creation & Jamming",
    vocal: "Vocal Training & Pitch Analysis",
    tabs: "Interactive Tab Player & Learning",
    "guitar-scales": "Guitar Scale Practice for Rock/Metal/Blues",
    "chord-trainer": "Chord Progression Training",
    "worship-songs": "Contemporary Worship Song Library",
    "country-tabs": "Country & Country Rock Tablature",
  };

  const description = moduleDescriptions[moduleName] || "Custom Music Module";

  return `// 🎵 ${componentName} Component - Generated by Cipher Autonomous
import React, { useState, useEffect, useCallback } from 'react';

interface ${componentName}Props {
  genre?: 'rock' | 'metal' | 'blues' | 'country' | 'worship';
  difficulty?: 'beginner' | 'intermediate' | 'advanced';
}

const ${componentName}: React.FC<${componentName}Props> = ({ 
  genre = 'rock', 
  difficulty = 'beginner' 
}) => {
  const [isActive, setIsActive] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const [session, setSession] = useState({
    startTime: null as Date | null,
    duration: 0,
    progress: 0
  });

  useEffect(() => {
    setIsLoaded(true);
  }, []);

  const handleToggle = useCallback(() => {
    setIsActive(prev => {
      if (!prev) {
        setSession(s => ({ ...s, startTime: new Date() }));
      }
      return !prev;
    });
  }, []);

  const getGenreFeatures = useCallback(() => {
    const features = {
      rock: ['Power chords', 'Palm muting', 'Distortion control'],
      metal: ['Drop tuning', 'Speed picking', 'Heavy riffs'],
      blues: ['Bend techniques', '12-bar progression', 'Pentatonic scales'],
      country: ['Chicken picking', 'Open chords', 'Capo usage'],
      worship: ['Fingerpicking', 'Suspended chords', 'Ambient effects']
    };
    return features[genre] || features.rock;
  }, [genre]);

  if (!isLoaded) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-white text-xl">Loading ${componentName}...</div>
      </div>
    );
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="text-center mb-8">
        <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
          🎵 ${componentName}
        </h1>
        <p className="text-gray-300 text-lg">
          ${description}
        </p>
        <div className="mt-4">
          <span className="px-3 py-1 bg-blue-600 rounded-full text-sm mr-2">Genre: {genre}</span>
          <span className="px-3 py-1 bg-green-600 rounded-full text-sm">Level: {difficulty}</span>
        </div>
      </div>

      <div className="bg-gray-800/50 backdrop-blur rounded-xl p-8 border border-gray-700">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div className="bg-gray-900 rounded-lg p-6">
            <h3 className="text-xl font-semibold mb-3">🎯 Core Features</h3>
            <ul className="text-gray-400 mb-4 space-y-1">
              {getGenreFeatures().map(feature => (
                <li key={feature}>• {feature}</li>
              ))}
            </ul>
            <button 
              onClick={handleToggle}
              className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
            >
              {isActive ? '⏹️ Stop' : '▶️ Start'} ${moduleName}
            </button>
          </div>
          
          <div className="bg-gray-900 rounded-lg p-6">
            <h3 className="text-xl font-semibold mb-3">⚙️ Settings</h3>
            <p className="text-gray-400 mb-4">Customize your ${moduleName} experience for {genre} music</p>
            <button className="w-full px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg transition-colors">
              🔧 Configure
            </button>
          </div>
          
          <div className="bg-gray-900 rounded-lg p-6">
            <h3 className="text-xl font-semibold mb-3">📊 Session Analytics</h3>
            <div className="text-gray-400 mb-4">
              <p>Duration: {session.duration}min</p>
              <p>Progress: {session.progress}%</p>
            </div>
            <button className="w-full px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg transition-colors">
              📈 View Stats
            </button>
          </div>
        </div>

        <div className="mt-8 text-center">
          <div className="inline-flex items-center space-x-2 text-sm text-gray-400">
            <span>🤖 Generated by Cipher Autonomous</span>
            <span>•</span>
            <span>Ready for {genre} music development</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default React.memo(${componentName});`;
}

// ===== ENHANCED HANDLER TEMPLATE GENERATION =====

export function generateHandlerTemplate(
  handlerType: string,
  name: string
): string {
  const templates = {
    // Music-specific handlers
    music: generateMusicHandlerTemplate(name),
    lyrics: generateLyricsHandlerTemplate(name),
    "guitar-analyzer": generateGuitarAnalyzerTemplate(name),
    "vocal-trainer": generateVocalTrainerTemplate(name),
    // @ts-expect-error future template will exist
    "chord-progresser": generateChordProgresserTemplate(name),
    // @ts-expect-error future template will exist
    "scale-practice": generateScalePracticeTemplate(name),
    // @ts-expect-error future template will exist
    "genre-trainer": generateGenreTrainerTemplate(name),

    // Project management handlers
    "route-manager": generateRouteManagerTemplate(name),
    // @ts-expect-error future template will exist
    "component-generator": generateComponentGeneratorTemplate(name),
    // @ts-expect-error future template will exist
    "deployment-handler": generateDeploymentTemplate(name),

    // Configuration handlers (dual-purpose)
    advanced: generateAdvancedHandlerTemplate(name),
    // @ts-expect-error future template will exist
    "config-manager": generateConfigManagerTemplate(name),
    // @ts-expect-error future template will exist
    "brain-coordinator": generateBrainCoordinatorTemplate(name),

    // Analytics handlers
    // @ts-expect-error future template will exist
    "performance-analyzer": generatePerformanceAnalyzerTemplate(name),
    // @ts-expect-error future template will exist
    "code-quality": generateCodeQualityTemplate(name),

    // Original handlers
    guitar: generateGuitarHandlerTemplate(name),
    vocal: generateVocalHandlerTemplate(name),
    generic: generateGenericHandlerTemplate(name),
  };
  // ⚠️ NOTE: Missing templates will be generated by Cipher soon
  return templates[handlerType as keyof typeof templates] || templates.generic;
}

// 🎯 ADD THE NEW FUNCTION HERE ⬇️
interface ComponentProp {
  name: string;
  type: string;
}

interface ComponentConfig {
  componentName: string;
  componentType?: "functional" | "class";
  props?: ComponentProp[];
}

export function generateReactComponentTemplate(
  config: ComponentConfig
): string {
  const { componentName, componentType = "functional", props = [] } = config;

  return `import React${componentType === "functional" ? ", { useState, useEffect }" : ", { Component }"} from 'react';

interface ${componentName}Props {
  ${props.map((prop: ComponentProp) => `${prop.name}: ${prop.type};`).join("\n  ")}
}

${
  componentType === "functional"
    ? `const ${componentName}: React.FC<${componentName}Props> = ({ ${props.map((p: ComponentProp) => p.name).join(", ")} }) => {
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    // Component initialization
  }, []);

  return (
    <div className="${componentName.toLowerCase()}-container">
      <h2>${componentName}</h2>
      {/* Component content */}
    </div>
  );
};`
    : `class ${componentName} extends Component<${componentName}Props> {
  render() {
    return (
      <div className="${componentName.toLowerCase()}-container">
        <h2>${componentName}</h2>
        {/* Component content */}
      </div>
    );
  }
}`
}

export default ${componentName};`;
}

// ===== MISSING EXPORT FUNCTIONS =====

export function generateAdvancedHandlerTemplate(name: string): string {
  return `import * as vscode from 'vscode';
import { BrainConnector } from '../brain/BrainConnector';
import { displayAnalysisResults } from '../shared/displayUtils';

export async function ${name}(): Promise<void> {
try {
  console.log('🚀 ${name} - Advanced analysis with brain integration...');
  
  const brain = BrainConnector.getInstance();
  const workspace = vscode.workspace.workspaceFolders?.[0]?.uri;
  if (!workspace) {
    vscode.window.showErrorMessage('No workspace found');
    return;
  }

  const analysis = await brain.analyzeProjectWithBrain(workspace);
  const suggestions = await brain.getPersonalizedSuggestions();
  
  await displayAnalysisResults(analysis);
  
  if (suggestions.length > 0) {
    const choice = await vscode.window.showQuickPick(suggestions, {
      placeHolder: '🧠 Select a brain-powered suggestion'
    });
    if (choice) {
      vscode.window.showInformationMessage(\`🎯 \${choice}\`);
    }
  }
  
} catch (error) {
  console.error('❌ ${name} failed:', error);
  vscode.window.showErrorMessage(\`Advanced handler failed: \${error}\`);
}
}`;
}

export function generateLyricsHandlerTemplate(name: string): string {
  return `import * as vscode from 'vscode';
import { BrainConnector } from '../brain/BrainConnector';

export async function ${name}(): Promise<void> {
try {
  console.log('🎤 ${name} - Lyrics generation and analysis...');
  
  const brain = BrainConnector.getInstance();
  
  const theme = await vscode.window.showInputBox({
    prompt: '🎵 Enter song theme or mood',
    placeHolder: 'e.g., hope, love, journey, worship...'
  });
  
  if (!theme) return;
  
  const genre = await vscode.window.showQuickPick([
    '🎸 Rock', '🎸 Metal', '🎵 Blues', '🤠 Country', '🙏 Worship'
  ], { placeHolder: 'Select music genre' });
  
  if (!genre) return;
  
  vscode.window.showInformationMessage(
    \`🎤 Generating \${genre} lyrics for theme: "\${theme}"\\n\\n🧠 Brain-powered creativity coming soon!\`
  );
  
  // Share with brain for learning
  await brain.shareIntelligence('lyrics-generation', {
    theme,
    genre: genre.toLowerCase().replace(/[^\w\s]/g, '').trim(),
    timestamp: Date.now()
  });
  
} catch (error) {
  console.error('❌ ${name} failed:', error);
  vscode.window.showErrorMessage(\`Lyrics handler failed: \${error}\`);
}
}`;
}

export function generateMusicHandlerTemplate(name: string): string {
  return `import * as vscode from 'vscode';
import { BrainConnector } from '../brain/BrainConnector';

export async function ${name}(): Promise<void> {
try {
  console.log('🎵 ${name} - Music development tools...');
  
  const brain = BrainConnector.getInstance();
  
  const musicAction = await vscode.window.showQuickPick([
    '🎸 Guitar Analysis',
    '🎤 Vocal Training', 
    '🎼 Chord Progression',
    '📊 Practice Analytics',
    '🎧 Audio Processing'
  ], { placeHolder: 'Select music development action' });
  
  if (!musicAction) return;
  
  const actionKey = musicAction.toLowerCase().replace(/[^\w\s]/g, '').trim();
  
  switch (actionKey) {
    case 'guitar analysis':
      await vscode.commands.executeCommand('cipher.analyzeGuitarComponents');
      break;
    case 'vocal training':
      await vscode.commands.executeCommand('cipher.analyzeVocalComponents');
      break;
    case 'chord progression':
      vscode.window.showInformationMessage('🎼 Chord progression tools coming soon!');
      break;
    case 'practice analytics':
      vscode.window.showInformationMessage('📊 Practice analytics coming soon!');
      break;
    case 'audio processing':
      vscode.window.showInformationMessage('🎧 Audio processing tools coming soon!');
      break;
    default:
      vscode.window.showInformationMessage(\`🎵 \${musicAction} selected\`);
  }
  
  // Share with brain for learning
  await brain.shareIntelligence('music-tool-usage', {
    action: actionKey,
    timestamp: Date.now()
  });
  
} catch (error) {
  console.error('❌ ${name} failed:', error);
  vscode.window.showErrorMessage(\`Music handler failed: \${error}\`);
}
}`;
}
// ===== SPECIFIC HANDLER TEMPLATES =====

function generateGuitarAnalyzerTemplate(name: string): string {
  return `import * as vscode from 'vscode';
import { BrainConnector } from '../brain/BrainConnector';

export async function ${name}(): Promise<void> {
  try {
    console.log('🎸 ${name} analyzing guitar performance...');
    
    const brainConnector = BrainConnector.getInstance();
    
    // Genre selection
    const genre = await vscode.window.showQuickPick(
      ['🎸 Rock', '🎸 Metal', '🎵 Blues', '🤠 Country Rock', '🙏 Contemporary Worship'],
      { placeHolder: 'Select music genre for analysis' }
    );
    
    if (!genre) return;
    
    const genreKey = genre.toLowerCase().replace(/[^\w\s]/g, '').trim();
    
    // Audio analysis with genre context
    const audioData = new ArrayBuffer(0); // Mock data
    const analysis = await brainConnector.analyzeGuitar(audioData);
    
    // Genre-specific analysis enhancement
    const enhancedAnalysis = {
      ...analysis,
      genre: genreKey,
      styleSpecific: getGenreSpecificFeedback(analysis, genreKey)
    };
    
    // Display results with genre-specific metrics
    const message = \`🎸 \${genre} Guitar Analysis:
🎵 Key: \${analysis.key || 'C Major'}
🎯 Tempo: \${analysis.tempo || 120} BPM
📊 Chord Clarity: \${Math.round((analysis.chords_clarity?.clarity || 0.8) * 100)}%
🎼 Technique: \${Math.round((analysis.technique?.fingerPosition || 0.8) * 100)}%
🎸 Chords: \${analysis.chords?.join(', ') || 'C, Am, F, G'}

🎶 \${genreKey} Style Tips:
\${enhancedAnalysis.styleSpecific?.join('\\n') || '• Focus on genre-specific techniques'}
\`;
    
    vscode.window.showInformationMessage(message, { modal: true });
    
    // Share with Brain for learning
    await brainConnector.shareCodeAnalysis({
      type: 'guitar-genre-analysis',
      handler: '${name}',
      genre: genreKey,
      analysis: enhancedAnalysis,
      timestamp: Date.now()
    });
    
  } catch (error) {
    console.error('❌ ${name} failed:', error);
    vscode.window.showErrorMessage(\`Guitar analysis failed: \${error}\`);
  }
}

function getGenreSpecificFeedback(analysis: any, genre: string): string[] {
  const feedback = {
    rock: [
      '• Focus on power chord clarity',
      '• Practice palm muting techniques',
      '• Work on consistent pick attack'
    ],
    metal: [
      '• Ensure clean downpicking',
      '• Practice tremolo picking',
      '• Focus on tight rhythm'
    ],
    blues: [
      '• Work on string bending accuracy',
      '• Practice vibrato control',
      '• Focus on emotional expression'
    ],
    'country rock': [
      '• Practice hybrid picking',
      '• Work on open chord clarity',
      '• Focus on chicken picking technique'
    ],
    'contemporary worship': [
      '• Practice fingerpicking patterns',
      '• Work on sustained chord voicings',
      '• Focus on smooth transitions'
    ]
  };
  return feedback[genre as keyof typeof feedback] || feedback.rock;
}`;
}

function generateVocalTrainerTemplate(name: string): string {
  return `import * as vscode from 'vscode';
import { BrainConnector } from '../brain/BrainConnector';

export async function ${name}(): Promise<void> {
  try {
    console.log('🎤 ${name} vocal training session...');
    
    const brainConnector = BrainConnector.getInstance();
    
    // Style selection
    const style = await vscode.window.showQuickPick(
      ['🎤 Rock Vocals', '🎤 Country Vocals', '🎤 Blues Vocals', '🎤 Worship Vocals'],
      { placeHolder: 'Select vocal style for training' }
    );
    
    if (!style) return;
    
    const styleKey = style.toLowerCase().replace(/[^\w\s]/g, '').trim();
    
    // Vocal analysis with style context
    const audioData = new ArrayBuffer(0); // Mock data
    const analysis = await brainConnector.analyzeVocal(audioData);
    
    // Style-specific training recommendations
    const trainingPlan = getVocalTrainingPlan(analysis, styleKey);
    
    const message = \`🎤 \${style} Training Results:
🎵 Range: \${analysis.range?.low || 220}Hz - \${analysis.range?.high || 880}Hz
🎯 Tone Quality: \${analysis.tone || 'warm'}
💨 Breath Control: \${analysis.breath || 'good'}
📊 Pitch Stability: \${Math.round((analysis.pitch_stability?.stability || 0.88) * 100)}%

🎶 \${styleKey} Training Plan:
\${trainingPlan.join('\\n')}
\`;
    
    const action = await vscode.window.showInformationMessage(
      message, 
      { modal: true },
      'Start Exercise', 'Save Plan', 'OK'
    );
    
    if (action === 'Start Exercise') {
      vscode.commands.executeCommand('cipher.startVocalExercise', styleKey);
    } else if (action === 'Save Plan') {
      // Save training plan to file
      const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
      if (workspaceFolder) {
        const planPath = vscode.Uri.joinPath(workspaceFolder.uri, '.cipher', 'training-plans', \`vocal-\${styleKey}-plan.md\`);
        const planContent = \`# \${style} Training Plan\\n\\n\${trainingPlan.map(item => \`- \${item}\`).join('\\n')}\`;
        await vscode.workspace.fs.writeFile(planPath, Buffer.from(planContent));
        vscode.window.showInformationMessage('Training plan saved!');
      }
    }
    
    await brainConnector.shareCodeAnalysis({
      type: 'vocal-style-training',
      handler: '${name}',
      style: styleKey,
      analysis,
      trainingPlan,
      timestamp: Date.now()
    });
    
  } catch (error) {
    console.error('❌ ${name} failed:', error);
    vscode.window.showErrorMessage(\`Vocal training failed: \${error}\`);
  }
}

function getVocalTrainingPlan(analysis: any, style: string): string[] {
  const plans = {
    'rock vocals': [
      '• Power breathing exercises (5 min daily)',
      '• Vocal fry control practice',
      '• High energy sustained notes',
      '• Distortion control without strain'
    ],
    'country vocals': [
      '• Natural vibrato development',
      '• Vocal twang exercises',
      '• Storytelling expression work',
      '• Open vowel clarity practice'
    ],
    'blues vocals': [
      '• Emotional expression techniques',
      '• Vocal bend exercises',
      '• Raw delivery practice',
      '• Call and response patterns'
    ],
    'worship vocals': [
      '• Smooth transition exercises',
      '• Sustained note practice',
      '• Gentle vibrato control',
      '• Breath support for long phrases'
    ]
  };
  return plans[style as keyof typeof plans] || plans['worship vocals'];
}`;
}

function generateRouteManagerTemplate(name: string): string {
  return `import * as vscode from 'vscode';
import { analyzeRouteStructure } from '../shared/utils';
import { displayRouteAnalysis } from '../shared/displayUtils';
import { generateRouteMapHTML } from '../shared/templateGenerators';

export async function ${name}(): Promise<void> {
  try {
    console.log('🗺️ ${name} managing music app routes...');
    
    const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
    if (!workspaceFolder) {
      vscode.window.showErrorMessage('No workspace folder found.');
      return;
    }
    
    // Analyze current route structure
    const analysis = await analyzeRouteStructure(workspaceFolder.uri);
    
    // Display interactive route analysis
    await displayRouteAnalysis(analysis);
    
    // Generate visual route map (dual-purpose: analysis + HTML)
    const routeMapHTML = generateRouteMapHTML(analysis);
    
    // Create/update route map file
    const mapPath = vscode.Uri.joinPath(workspaceFolder.uri, '.cipher', 'route-map.html');
    await vscode.workspace.fs.writeFile(mapPath, Buffer.from(routeMapHTML));
    
    vscode.window.showInformationMessage(
      \`🗺️ Music app route map updated: \${analysis.routes.length} routes analyzed\`,
      'Open Map', 'Auto-Fix Missing', 'OK'
    ).then(action => {
      if (action === 'Open Map') {
        vscode.env.openExternal(mapPath);
      } else if (action === 'Auto-Fix Missing') {
        vscode.commands.executeCommand('cipher.autoFixMissingRoutes');
      }
    });
    
  } catch (error) {
    console.error('❌ ${name} failed:', error);
    vscode.window.showErrorMessage(\`Route management failed: \${error}\`);
  }
}`;
}

function generateGenericHandlerTemplate(name: string): string {
  return `import * as vscode from 'vscode';

export async function ${name}(): Promise<void> {
  try {
    console.log('🚀 ${name} executing...');
    
    // TODO: Implement ${name} functionality
    vscode.window.showInformationMessage('✅ ${name} completed successfully!');
    
  } catch (error) {
    console.error('❌ ${name} failed:', error);
    vscode.window.showErrorMessage(\`${name} failed: \${error}\`);
  }
}`;
}

// Original handler templates (maintained for compatibility)
function generateGuitarHandlerTemplate(name: string): string {
  return generateGuitarAnalyzerTemplate(name);
}

function generateVocalHandlerTemplate(name: string): string {
  return generateVocalTrainerTemplate(name);
}

// ===== ENHANCED ROUTE MAP GENERATION - FIXED =====

export function generateRouteMapHTML(analysis: AnalysisResult): string {
  // ✅ FIXED: Use safe access with optional chaining and fallbacks
  const workingRoutes = analysis.routes?.filter((r) => r.exists) ?? [];
  const missingRoutes = analysis.routes?.filter((r) => !r.exists) ?? [];
  const totalRoutes = analysis.routes?.length ?? 0;

  return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🎵 Cipher Music App Route Map</title>
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            min-height: 100vh;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .header {
            text-align: center;
            margin-bottom: 40px;
        }
        .music-header {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 30px;
        }
        .route-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        .route-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .route-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        .route-working {
            border-left: 5px solid #10b981;
        }
        .route-missing {
            border-left: 5px solid #ef4444;
        }
        .route-music {
            border-left: 5px solid #8b5cf6;
        }
        .route-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        .route-title {
            font-size: 1.5em;
            font-weight: bold;
        }
        .route-status {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8em;
            font-weight: bold;
        }
        .status-working {
            background: #10b981;
            color: white;
        }
        .status-missing {
            background: #ef4444;
            color: white;
        }
        .route-url {
            font-family: 'Courier New', monospace;
            background: rgba(0, 0, 0, 0.3);
            padding: 10px;
            border-radius: 8px;
            margin: 10px 0;
            word-break: break-all;
        }
        .auto-fix-btn {
            background: #f59e0b;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }
        .auto-fix-btn:hover {
            background: #d97706;
        }
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        .stat-card {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }
        .stat-number {
            font-size: 2.5em;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .music-genres {
            background: rgba(139, 92, 246, 0.2);
            padding: 15px;
            border-radius: 10px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎵 Cipher Music App Route Analysis Map</h1>
            <p>Generated: ${new Date().toLocaleString()}</p>
        </div>

        <div class="music-header">
            <h2>🎸 Music App Features</h2>
            <p>Supporting: Rock • Metal • Blues • Country Rock • Contemporary Worship</p>
            <div class="music-genres">
                <strong>Available Modules:</strong> Guitar Practice • Vocal Training • Chord Progression • Scale Practice • Worship Songs • Country Tabs
            </div>
        </div>

        <div class="stats">
            <div class="stat-card">
                <div class="stat-number" style="color: #10b981;">${workingRoutes.length}</div>
                <div>Working Routes</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" style="color: #ef4444;">${missingRoutes.length}</div>
                <div>Missing Routes</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" style="color: #8b5cf6;">${totalRoutes}</div>
                <div>Total Routes</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" style="color: #f59e0b;">🎵</div>
                <div>Music-Focused</div>
            </div>
        </div>

        <h2>✅ Working Routes</h2>
        <div class="route-grid">
            ${workingRoutes
              .map(
                (route) => `
                <div class="route-card route-working">
                    <div class="route-header">
                        <div class="route-title">${route.path}</div>
                        <span class="route-status status-working">✅ WORKING</span>
                    </div>
                    <div class="route-url">${route.url || `localhost:3000${route.path}`}</div>
                    <p><strong>Component:</strong> ${route.component}</p>
                    <p><strong>Status:</strong> ${route.status}</p>
                    ${
                      route.isMusicRoute ||
                      route.path.includes("guitar") ||
                      route.path.includes("vocal") ||
                      route.path.includes("chord") ||
                      route.path.includes("worship")
                        ? '<div class="music-genres"><strong>🎵 Music Feature</strong></div>'
                        : ""
                    }
                </div>
            `
              )
              .join("")}
        </div>

        <h2>❌ Missing Routes</h2>
        <div class="route-grid">
            ${missingRoutes
              .map(
                (route) => `
                <div class="route-card route-missing">
                    <div class="route-header">
                        <div class="route-title">${route.path}</div>
                        <span class="route-status status-missing">❌ MISSING</span>
                    </div>
                    <div class="route-url">${route.url || `localhost:3000${route.path}`}</div>
                    <p><strong>Component:</strong> ${route.component}</p>
                    <p><strong>Status:</strong> ${route.status}</p>
                    ${
                      route.isMusicRoute ||
                      route.path.includes("guitar") ||
                      route.path.includes("vocal") ||
                      route.path.includes("chord") ||
                      route.path.includes("worship")
                        ? '<div class="music-genres"><strong>🎵 Music Feature</strong></div>'
                        : ""
                    }
                    <button class="auto-fix-btn" onclick="showAutoFix('${route.path}')">
                        🔧 Auto-Fix Available
                    </button>
                </div>
            `
              )
              .join("")}
        </div>
        
        ${
          totalRoutes === 0
            ? `
        <div class="route-card" style="text-align: center; margin: 20px auto; max-width: 500px;">
            <h3>🎵 No Routes Found</h3>
            <p>Start building your music app with Cipher's auto-generation!</p>
            <button class="auto-fix-btn" onclick="showAutoFix('/practice')">
                🚀 Create Music Routes
            </button>
        </div>
        `
            : ""
        }
    </div>

    <script>
        function showAutoFix(routePath) {
            alert('🤖 Cipher can auto-create the ' + routePath + ' route!\\n\\n' +
                  '🎵 This will include music-specific features for your app.\\n\\n' +
                  'Run: Cipher: Auto-Fix Routes in VS Code');
        }
    </script>
</body>
</html>`;
}
export function generateProgressReportTemplate() {
  return "// Progress report template placeholder";
}

export function generateTeamReportHTML(): string {
  // No parameters
  return `<h1>Team Report</h1>`;
}

export function generateTestContent(
  fileName: string,
  testType: string
): string {
  // Only 2 params
  return `// Test for ${fileName} - ${testType}`;
}