// // ENHANCED TECH STACK SUMMARY - Now navigates to Architecture Designer
// import React from 'react';
// import useProjectStore from '../../store/projectStore';

// export default function TechStackSummary() {
//   const { 
//     techStackRecommendations, 
//     finalProjectData,
//     setCurrentStep 
//   } = useProjectStore();

//   console.log('🔍 TechStackSummary - Recommendations:', techStackRecommendations);
//   console.log('🔍 TechStackSummary - Final Project Data:', finalProjectData);

//   if (!techStackRecommendations) {
//     return (
//       <div className="text-center py-8">
//         <p className="text-gray-500">Loading technology recommendations...</p>
//       </div>
//     );
//   }

//   const handleGenerateArchitecture = () => {
//     console.log('🏗️ Moving to Architecture Designer step...');
//     setCurrentStep('architecture');
//   };

//   const functional_requirements = techStackRecommendations.functional_requirements || {};
//   const claude_recommendations = techStackRecommendations.claude_recommendations || {};
//   const technology_recommendations = claude_recommendations.technology_recommendations || {};

//   return (
//     <div className="max-w-6xl mx-auto p-6 space-y-8">
//       {/* Header */}
//       <div className="text-center mb-8">
//         <h2 className="text-3xl font-bold text-gray-900 mb-2">
//           🛠️ Technology Stack Recommendations
//         </h2>
//         <p className="text-gray-600">
//           AI-powered technology recommendations for your project
//         </p>
//       </div>

//       {/* Functional Requirements Analysis */}
//       {functional_requirements.feature_name && (
//         <div className="bg-white rounded-xl shadow-sm border p-6">
//           <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
//             <span className="text-2xl mr-2">🎯</span>
//             Functional Requirements Analysis
//           </h3>
          
//           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
//             <div>
//               <h4 className="font-semibold text-gray-800 mb-2">Core Feature</h4>
//               <div className="bg-blue-50 rounded-lg p-4">
//                 <h5 className="font-medium text-blue-900">{functional_requirements.feature_name}</h5>
//                 <p className="text-blue-700 text-sm mt-1">{functional_requirements.description}</p>
//               </div>
//             </div>

//             <div>
//               <h4 className="font-semibold text-gray-800 mb-2">Complexity Level</h4>
//               <div className="bg-purple-50 rounded-lg p-4">
//                 <span className={`inline-block px-3 py-1 rounded-full text-sm font-medium ${
//                   functional_requirements.complexity_level === 'high' ? 'bg-red-100 text-red-800' :
//                   functional_requirements.complexity_level === 'medium' ? 'bg-yellow-100 text-yellow-800' :
//                   'bg-green-100 text-green-800'
//                 }`}>
//                   {functional_requirements.complexity_level || 'Medium'} Complexity
//                 </span>
//               </div>
//             </div>
//           </div>

//           {/* Technical Requirements */}
//           {functional_requirements.technical_requirements && functional_requirements.technical_requirements.length > 0 && (
//             <div className="mt-6">
//               <h4 className="font-semibold text-gray-800 mb-3">Technical Requirements</h4>
//               <div className="flex flex-wrap gap-2">
//                 {functional_requirements.technical_requirements.map((req, index) => (
//                   <span key={index} className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">
//                     {req}
//                   </span>
//                 ))}
//               </div>
//             </div>
//           )}

//           {/* Business Logic Rules */}
//           {functional_requirements.business_logic_rules && functional_requirements.business_logic_rules.length > 0 && (
//             <div className="mt-6">
//               <h4 className="font-semibold text-gray-800 mb-3">Business Logic Rules</h4>
//               <div className="space-y-2">
//                 {functional_requirements.business_logic_rules.map((rule, index) => (
//                   <div key={index} className="bg-orange-50 border-l-4 border-orange-400 p-3">
//                     <p className="text-orange-800 text-sm">{rule}</p>
//                   </div>
//                 ))}
//               </div>
//             </div>
//           )}

//           {/* All Features */}
//           {functional_requirements.all_features && functional_requirements.all_features.length > 0 && (
//             <div className="mt-6">
//               <h4 className="font-semibold text-gray-800 mb-3">All Features</h4>
//               <div className="flex flex-wrap gap-2">
//                 {functional_requirements.all_features.map((feature, index) => (
//                   <span key={index} className="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">
//                     {feature}
//                   </span>
//                 ))}
//               </div>
//             </div>
//           )}
//         </div>
//       )}

//       {/* Technology Recommendations */}
//       <div className="bg-white rounded-xl shadow-sm border p-6">
//         <h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center">
//           <span className="text-2xl mr-2">🤖</span>
//           AI Technology Recommendations
//         </h3>

//         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
//           {/* Frontend */}
//           {technology_recommendations.frontend && (
//             <div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-lg p-5">
//               <h4 className="font-bold text-blue-900 mb-3 flex items-center">
//                 <span className="text-xl mr-2">⚛️</span>
//                 Frontend
//               </h4>
//               <div className="space-y-3">
//                 <div>
//                   <p className="font-medium text-blue-800">Framework</p>
//                   <p className="text-blue-700">{technology_recommendations.frontend.framework}</p>
//                 </div>
//                 {technology_recommendations.frontend.libraries && (
//                   <div>
//                     <p className="font-medium text-blue-800">Libraries</p>
//                     <div className="flex flex-wrap gap-1 mt-1">
//                       {technology_recommendations.frontend.libraries.map((lib, index) => (
//                         <span key={index} className="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">
//                           {lib}
//                         </span>
//                       ))}
//                     </div>
//                   </div>
//                 )}
//                 {technology_recommendations.frontend.reasoning && (
//                   <div>
//                     <p className="font-medium text-blue-800">Reasoning</p>
//                     <p className="text-blue-600 text-sm">{technology_recommendations.frontend.reasoning}</p>
//                   </div>
//                 )}
//               </div>
//             </div>
//           )}

//           {/* Backend */}
//           {technology_recommendations.backend && (
//             <div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg p-5">
//               <h4 className="font-bold text-green-900 mb-3 flex items-center">
//                 <span className="text-xl mr-2">🟢</span>
//                 Backend
//               </h4>
//               <div className="space-y-3">
//                 <div>
//                   <p className="font-medium text-green-800">Language</p>
//                   <p className="text-green-700">{technology_recommendations.backend.language}</p>
//                 </div>
//                 <div>
//                   <p className="font-medium text-green-800">Framework</p>
//                   <p className="text-green-700">{technology_recommendations.backend.framework}</p>
//                 </div>
//                 {technology_recommendations.backend.libraries && (
//                   <div>
//                     <p className="font-medium text-green-800">Libraries</p>
//                     <div className="flex flex-wrap gap-1 mt-1">
//                       {technology_recommendations.backend.libraries.map((lib, index) => (
//                         <span key={index} className="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">
//                           {lib}
//                         </span>
//                       ))}
//                     </div>
//                   </div>
//                 )}
//                 {technology_recommendations.backend.reasoning && (
//                   <div>
//                     <p className="font-medium text-green-800">Reasoning</p>
//                     <p className="text-green-600 text-sm">{technology_recommendations.backend.reasoning}</p>
//                   </div>
//                 )}
//               </div>
//             </div>
//           )}

//           {/* Database */}
//           {technology_recommendations.database && (
//             <div className="bg-gradient-to-br from-purple-50 to-indigo-50 rounded-lg p-5">
//               <h4 className="font-bold text-purple-900 mb-3 flex items-center">
//                 <span className="text-xl mr-2">🗄️</span>
//                 Database
//               </h4>
//               <div className="space-y-3">
//                 <div>
//                   <p className="font-medium text-purple-800">Primary</p>
//                   <p className="text-purple-700">{technology_recommendations.database.primary}</p>
//                 </div>
//                 {technology_recommendations.database.secondary && technology_recommendations.database.secondary.length > 0 && (
//                   <div>
//                     <p className="font-medium text-purple-800">Secondary</p>
//                     <div className="flex flex-wrap gap-1 mt-1">
//                       {technology_recommendations.database.secondary.map((db, index) => (
//                         <span key={index} className="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">
//                           {db}
//                         </span>
//                       ))}
//                     </div>
//                   </div>
//                 )}
//                 {technology_recommendations.database.reasoning && (
//                   <div>
//                     <p className="font-medium text-purple-800">Reasoning</p>
//                     <p className="text-purple-600 text-sm">{technology_recommendations.database.reasoning}</p>
//                   </div>
//                 )}
//               </div>
//             </div>
//           )}
//         </div>
//       </div>

//       {/* Implementation Strategy */}
//       {claude_recommendations.implementation_strategy && (
//         <div className="bg-white rounded-xl shadow-sm border p-6">
//           <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
//             <span className="text-2xl mr-2">📋</span>
//             Implementation Strategy
//           </h3>
//           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
//             <div>
//               <h4 className="font-semibold text-gray-800 mb-2">Architecture Pattern</h4>
//               <p className="text-gray-700 bg-gray-50 rounded-lg p-3">
//                 {claude_recommendations.implementation_strategy.architecture_pattern}
//               </p>
//             </div>
//             <div>
//               <h4 className="font-semibold text-gray-800 mb-2">Deployment Strategy</h4>
//               <p className="text-gray-700 bg-gray-50 rounded-lg p-3">
//                 {claude_recommendations.implementation_strategy.deployment_strategy}
//               </p>
//             </div>
//           </div>
//         </div>
//       )}

//       {/* Business Alignment */}
//       {claude_recommendations.business_alignment && (
//         <div className="bg-white rounded-xl shadow-sm border p-6">
//           <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
//             <span className="text-2xl mr-2">🎯</span>
//             Business Alignment
//           </h3>
//           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
//             {Object.entries(claude_recommendations.business_alignment).map(([key, value]) => (
//               <div key={key} className="bg-blue-50 rounded-lg p-4">
//                 <h4 className="font-semibold text-blue-900 capitalize mb-1">
//                   {key.replace(/_/g, ' ')}
//                 </h4>
//                 <p className="text-blue-700 text-sm">{value}</p>
//               </div>
//             ))}
//           </div>
//         </div>
//       )}

//       {/* Generate Architecture Button */}
//       <div className="text-center py-8">
//         <button
//           onClick={handleGenerateArchitecture}
//           className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:from-indigo-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105 shadow-lg flex items-center space-x-3 mx-auto"
//         >
//           <span className="text-2xl">🏗️</span>
//           <span>Generate Architecture Design</span>
//           <span className="text-xl">→</span>
//         </button>
//         <p className="text-gray-600 mt-2 text-sm">
//           AI will design complete React + Node.js + PostgreSQL architecture
//         </p>
//       </div>
//     </div>
//   );
// }



// ENHANCED TECH STACK SUMMARY - With Edit Functionality for User Customization
import React, { useState, useEffect } from 'react';
import useProjectStore from '../../store/projectStore';

export default function TechStackSummary() {
  const { 
    techStackRecommendations, 
    finalProjectData,
    setCurrentStep 
  } = useProjectStore();

  // State for user's technology edits
  const [userTechStack, setUserTechStack] = useState({
    frontend: { framework: '', libraries: [] },
    backend: { language: '', framework: '', libraries: [] },
    database: { primary: '', secondary: [] }
  });
  
  // State for edit modes
  const [editMode, setEditMode] = useState({
    frontend: false,
    backend: false,
    database: false
  });

  // Initialize user tech stack with recommendations when component loads
  useEffect(() => {
    if (techStackRecommendations?.claude_recommendations?.technology_recommendations) {
      const tech = techStackRecommendations.claude_recommendations.technology_recommendations;
      setUserTechStack({
        frontend: tech.frontend || { framework: '', libraries: [] },
        backend: tech.backend || { language: '', framework: '', libraries: [] },
        database: tech.database || { primary: '', secondary: [] }
      });
    }
  }, [techStackRecommendations]);

  console.log('🔍 TechStackSummary - Recommendations:', techStackRecommendations);
  console.log('🔍 TechStackSummary - Final Project Data:', finalProjectData);
  console.log('🔍 TechStackSummary - User Tech Stack:', userTechStack);

  if (!techStackRecommendations) {
    return (
      <div className="text-center py-8">
        <p className="text-gray-500">Loading technology recommendations...</p>
      </div>
    );
  }

  // COMPREHENSIVE TECHNOLOGY OPTIONS - ALL POSSIBLE FRONTEND + BACKEND + DATABASE
  const techOptions = {
    frontend: {
      frameworks: [
        // === REACT ECOSYSTEM ===
        'React', 'Next.js', 'Gatsby', 'Remix', 'Create React App', 'Vite + React',
        'React Native', 'Expo', 'React Native Web', 'Preact',
        
        // === VUE ECOSYSTEM ===
        'Vue.js', 'Vue 3', 'Vue 2', 'Nuxt.js', 'Nuxt 3', 'Quasar Framework',
        'VuePress', 'Gridsome', 'Vue CLI', 'Vite + Vue',
        
        // === ANGULAR ECOSYSTEM ===
        'Angular', 'Angular 17', 'Angular 16', 'Angular 15', 'AngularJS', 
        'Angular Universal', 'Ionic Angular', 'Angular Material',
        
        // === MODERN FRAMEWORKS ===
        'Svelte', 'SvelteKit', 'Solid.js', 'SolidStart', 'Qwik', 'QwikCity',
        'Fresh', 'Marko', 'Lit', 'Stencil', 'Alpine.js', 'Hyperapp',
        
        // === STATIC SITE GENERATORS ===
        'Next.js', 'Gatsby', 'Nuxt.js', 'Hugo', 'Jekyll', 'Eleventy', '11ty',
        'Astro', 'Docusaurus', 'VuePress', 'Gridsome', 'Scully',
        
        // === MOBILE FRAMEWORKS ===
        'React Native', 'Flutter Web', 'Ionic', 'Cordova', 'PhoneGap',
        'Capacitor', 'NativeScript', 'Expo', 'Quasar', 'Framework7',
        
        // === MICRO FRONTENDS ===
        'Single-SPA', 'Module Federation', 'Bit', 'Piral', 'Luigi',
        
        // === TRADITIONAL & VANILLA ===
        'Vanilla JavaScript', 'TypeScript', 'jQuery', 'Backbone.js', 
        'Ember.js', 'Knockout.js', 'Mithril', 'Riot.js', 'Polymer',
        
        // === COMPONENT LIBRARIES ===
        'Material-UI (MUI)', 'Ant Design', 'Chakra UI', 'Mantine',
        'React Bootstrap', 'Semantic UI React', 'Grommet', 'Evergreen',
        
        // === CSS FRAMEWORKS ===
        'Tailwind CSS', 'Bootstrap', 'Bulma', 'Foundation', 'Materialize',
        'Semantic UI', 'Pure CSS', 'UIKit', 'Tachyons', 'Milligram',
        
        // === BUILD TOOLS & BUNDLERS ===
        'Webpack', 'Vite', 'Parcel', 'Rollup', 'esbuild', 'Snowpack',
        'Turbopack', 'SWC', 'Babel', 'TypeScript Compiler'
      ]
    },
    backend: {
      languages: [
        // === JAVASCRIPT ECOSYSTEM ===
        'Node.js', 'TypeScript', 'JavaScript', 'Deno', 'Bun',
        
        // === PYTHON ===
        'Python', 'Python 3.12', 'Python 3.11', 'Python 3.10', 'PyPy',
        
        // === JAVA ECOSYSTEM ===
        'Java', 'Java 21', 'Java 17', 'Java 11', 'Java 8', 'OpenJDK',
        'Kotlin', 'Scala', 'Groovy', 'Clojure',
        
        // === .NET ECOSYSTEM ===
        'C#', '.NET 8', '.NET 7', '.NET 6', '.NET Core', '.NET Framework',
        'F#', 'VB.NET', 'ASP.NET', 'Blazor Server', 'Blazor WebAssembly',
        
        // === SYSTEMS LANGUAGES ===
        'Rust', 'Go', 'C++', 'C', 'Zig', 'Nim', 'Crystal', 'D',
        
        // === FUNCTIONAL LANGUAGES ===
        'Haskell', 'Erlang', 'Elixir', 'OCaml', 'Elm', 'PureScript',
        'ReasonML', 'F#', 'Clojure', 'ClojureScript',
        
        // === WEB LANGUAGES ===
        'PHP', 'Ruby', 'Perl', 'R', 'Julia', 'Lua', 'Swift',
        
        // === JVM LANGUAGES ===
        'Kotlin', 'Scala', 'Groovy', 'Clojure', 'JRuby', 'Jython',
        
        // === EMERGING LANGUAGES ===
        'Dart', 'WebAssembly (WASM)', 'AssemblyScript', 'Grain'
      ],
      frameworks: {
        // === NODE.JS FRAMEWORKS ===
        'Node.js': [
          'Express.js', 'Fastify', 'Koa.js', 'NestJS', 'Hapi.js',
          'Restify', 'Meteor.js', 'AdonisJS', 'Sails.js', 'LoopBack',
          'Feathers.js', 'Total.js', 'Moleculer', 'Strapi', 'KeystoneJS',
          'Ghost', 'Nodemailer', 'Socket.io', 'Express Gateway'
        ],
        
        // === PYTHON FRAMEWORKS ===
        'Python': [
          'FastAPI', 'Django', 'Django REST Framework', 'Flask', 'Tornado',
          'Pyramid', 'Bottle', 'CherryPy', 'Falcon', 'Starlette', 'Quart',
          'Sanic', 'Connexion', 'Eve', 'Hug', 'APIFlask', 'Django Ninja',
          'Chalice', 'Zappa', 'Django Channels'
        ],
        
        // === JAVA FRAMEWORKS ===
        'Java': [
          'Spring Boot', 'Spring Framework', 'Spring MVC', 'Spring WebFlux',
          'Quarkus', 'Micronaut', 'Dropwizard', 'Vert.x', 'Play Framework',
          'Spark Java', 'Struts', 'JSF', 'Wicket', 'Vaadin', 'GWT',
          'Apache Camel', 'Jersey', 'RESTEasy', 'Helidon'
        ],
        
        // === C# FRAMEWORKS ===
        'C#': [
          'ASP.NET Core', 'ASP.NET Core Web API', '.NET 8', '.NET 7', '.NET 6',
          'ASP.NET Framework', 'ASP.NET Web API', 'ASP.NET MVC', 
          'Blazor Server', 'Blazor WebAssembly', 'Minimal APIs',
          'Nancy', 'ServiceStack', 'Carter', 'FastEndpoints',
          'Orchard Core', 'Umbraco', 'DotNetNuke'
        ],
        
        // === GO FRAMEWORKS ===
        'Go': [
          'Gin', 'Echo', 'Fiber', 'Gorilla Mux', 'Chi', 'Beego',
          'Revel', 'Buffalo', 'Iris', 'Martini', 'Negroni',
          'Goji', 'HttpRouter', 'Bone', 'Mango'
        ],
        
        // === PHP FRAMEWORKS ===
        'PHP': [
          'Laravel', 'Symfony', 'CodeIgniter', 'Zend Framework', 'Laminas',
          'CakePHP', 'Phalcon', 'Slim Framework', 'Yii Framework', 'Lumen',
          'Phalcon', 'FuelPHP', 'Aura', 'Flight', 'Fat-Free Framework',
          'WordPress', 'Drupal', 'Joomla', 'Magento'
        ],
        
        // === RUBY FRAMEWORKS ===
        'Ruby': [
          'Ruby on Rails', 'Sinatra', 'Hanami', 'Padrino', 'Grape',
          'Roda', 'Cuba', 'Camping', 'Ramaze', 'Merb', 'Volt'
        ],
        
        // === RUST FRAMEWORKS ===
        'Rust': [
          'Actix-web', 'Rocket', 'Warp', 'Tide', 'Axum', 'Tower',
          'Poem', 'Salvo', 'Thruster', 'Gotham', 'Iron', 'Nickel'
        ],
        
        // === KOTLIN FRAMEWORKS ===
        'Kotlin': [
          'Ktor', 'Spring Boot', 'Javalin', 'Vert.x', 'http4k',
          'Kweb', 'TornadoFX', 'Exposed'
        ],
        
        // === SCALA FRAMEWORKS ===
        'Scala': [
          'Play Framework', 'Akka HTTP', 'Finatra', 'Http4s', 'Scalatra',
          'Lift', 'Spray', 'Unfiltered', 'Colossus'
        ],
        
        // === ELIXIR FRAMEWORKS ===
        'Elixir': [
          'Phoenix', 'Phoenix LiveView', 'Plug', 'Cowboy', 'Sugar',
          'Trot', 'Maru', 'Hedwig'
        ],
        
        // === SWIFT FRAMEWORKS ===
        'Swift': [
          'Vapor', 'Perfect', 'Kitura', 'Zewo', 'Swifton', 'Marathon'
        ],
        
        // === DART FRAMEWORKS ===
        'Dart': [
          'Shelf', 'Angel3', 'Aqueduct', 'Jaguar', 'Start', 'Redstone'
        ],
        
        // === DENO FRAMEWORKS ===
        'Deno': [
          'Fresh', 'Oak', 'Aleph.js', 'Servest', 'Pogo', 'Drash'
        ]
      }
    },
    database: {
      primary: [
        // === RELATIONAL DATABASES ===
        'PostgreSQL', 'PostgreSQL 16', 'PostgreSQL 15', 'PostgreSQL 14',
        'MySQL', 'MySQL 8.0', 'MySQL 5.7', 'MariaDB', 'MariaDB 11',
        'Microsoft SQL Server', 'MS SQL Server 2022', 'MS SQL Server 2019',
        'SQLite', 'SQLite3', 'Oracle Database', 'Oracle 21c', 'Oracle 19c',
        'IBM DB2', 'IBM Db2 LUW', 'SAP HANA', 'Firebird', 'H2 Database',
        
        // === CLOUD RELATIONAL ===
        'Amazon RDS', 'Amazon Aurora', 'Amazon Aurora PostgreSQL',
        'Amazon Aurora MySQL', 'Google Cloud SQL', 'Google Cloud Spanner',
        'Azure SQL Database', 'Azure Database for PostgreSQL',
        'Azure Database for MySQL', 'PlanetScale', 'Neon', 'Supabase',
        
        // === NOSQL DOCUMENT DATABASES ===
        'MongoDB', 'MongoDB Atlas', 'CouchDB', 'Amazon DocumentDB',
        'Azure Cosmos DB', 'Firebase Firestore', 'RavenDB', 'OrientDB',
        'ArangoDB', 'BaseX', 'eXist-db', 'MarkLogic',
        
        // === KEY-VALUE STORES ===
        'Redis', 'Redis Cloud', 'Amazon DynamoDB', 'Azure Table Storage',
        'Riak', 'Berkeley DB', 'LevelDB', 'RocksDB', 'LMDB',
        'Amazon ElastiCache', 'Memcached', 'Hazelcast',
        
        // === COLUMN-FAMILY DATABASES ===
        'Apache Cassandra', 'DataStax Astra', 'HBase', 'Amazon SimpleDB',
        'Google Bigtable', 'Azure Cosmos DB Cassandra API',
        
        // === GRAPH DATABASES ===
        'Neo4j', 'Neo4j Aura', 'Amazon Neptune', 'ArangoDB', 'OrientDB',
        'JanusGraph', 'TigerGraph', 'Azure Cosmos DB Gremlin API',
        'Dgraph', 'FlockDB', 'InfiniteGraph',
        
        // === TIME SERIES DATABASES ===
        'InfluxDB', 'InfluxDB Cloud', 'TimescaleDB', 'Prometheus',
        'Amazon Timestream', 'Google Cloud Bigtable', 'OpenTSDB',
        'Kdb+', 'QuestDB', 'VictoriaMetrics', 'M3DB',
        
        // === IN-MEMORY DATABASES ===
        'Redis', 'Memcached', 'Apache Ignite', 'Hazelcast', 'GridGain',
        'SAP HANA', 'Oracle TimesTen', 'IBM solidDB', 'VoltDB',
        
        // === NEWSQL DATABASES ===
        'CockroachDB', 'TiDB', 'VoltDB', 'NuoDB', 'FoundationDB',
        'Google Spanner', 'Amazon Aurora', 'PingCAP TiDB',
        
        // === VECTOR DATABASES === 
        'Pinecone', 'Weaviate', 'Milvus', 'Qdrant', 'Chroma',
        'Vespa', 'OpenSearch', 'Faiss', 'Annoy',
        
        // === BLOCKCHAIN DATABASES ===
        'BigchainDB', 'Hyperledger Fabric', 'Ethereum', 'IPFS',
        
        // === EMBEDDED DATABASES ===
        'SQLite', 'H2', 'Derby', 'HSQLDB', 'BerkeleyDB', 'LevelDB',
        'RocksDB', 'Realm', 'ObjectBox'
      ],
      secondary: [
        // === CACHING SOLUTIONS ===
        'Redis', 'Redis Cluster', 'Redis Sentinel', 'Memcached',
        'Amazon ElastiCache', 'Azure Cache for Redis', 'Google Memorystore',
        'Hazelcast', 'Apache Ignite', 'Ehcache', 'Caffeine',
        
        // === SEARCH ENGINES ===
        'Elasticsearch', 'Elasticsearch Cloud', 'OpenSearch', 'Apache Solr',
        'Amazon CloudSearch', 'Azure Cognitive Search', 'Algolia',
        'Swiftype', 'Sphinx', 'Whoosh', 'Xapian', 'MeiliSearch',
        
        // === MESSAGE QUEUES & STREAMING ===
        'Apache Kafka', 'Confluent Cloud', 'Amazon Kinesis', 'RabbitMQ',
        'Amazon SQS', 'Amazon SNS', 'Azure Service Bus', 'Google Pub/Sub',
        'Redis Pub/Sub', 'Apache Pulsar', 'NATS', 'ZeroMQ',
        'ActiveMQ', 'IBM MQ', 'Apache RocketMQ',
        
        // === ANALYTICS & DATA WAREHOUSES ===
        'Apache Spark', 'Apache Flink', 'Amazon Redshift', 'Google BigQuery',
        'Azure Synapse Analytics', 'Snowflake', 'Databricks', 'ClickHouse',
        'Apache Druid', 'Apache Pinot', 'Presto', 'Trino',
        
        // === MONITORING & OBSERVABILITY ===
        'Prometheus', 'Grafana', 'InfluxDB', 'TimescaleDB', 'Jaeger',
        'Zipkin', 'OpenTelemetry', 'Datadog', 'New Relic', 'AppDynamics',
        
        // === FILE STORAGE ===
        'Amazon S3', 'Google Cloud Storage', 'Azure Blob Storage',
        'MinIO', 'Ceph', 'GlusterFS', 'HDFS', 'GridFS',
        
        // === SESSION STORES ===
        'Redis', 'Memcached', 'MongoDB', 'DynamoDB', 'Hazelcast',
        
        // === CONFIGURATION STORES ===
        'etcd', 'Consul', 'ZooKeeper', 'AWS Parameter Store',
        'Azure Key Vault', 'HashiCorp Vault',
        
        // === LOGGING ===
        'Elasticsearch + Logstash + Kibana (ELK)', 'Splunk', 'Fluentd',
        'Graylog', 'Loki', 'Amazon CloudWatch Logs'
      ]
    }
  };

  const handleEditToggle = (category) => {
    setEditMode(prev => ({
      ...prev,
      [category]: !prev[category]
    }));
  };

  const handleTechChange = (category, field, value) => {
    setUserTechStack(prev => ({
      ...prev,
      [category]: {
        ...prev[category],
        [field]: value
      }
    }));
  };

  const handleArrayChange = (category, field, index, value) => {
    setUserTechStack(prev => {
      const newArray = [...prev[category][field]];
      newArray[index] = value;
      return {
        ...prev,
        [category]: {
          ...prev[category],
          [field]: newArray
        }
      };
    });
  };

  const addArrayItem = (category, field) => {
    setUserTechStack(prev => ({
      ...prev,
      [category]: {
        ...prev[category],
        [field]: [...prev[category][field], '']
      }
    }));
  };

  const removeArrayItem = (category, field, index) => {
    setUserTechStack(prev => ({
      ...prev,
      [category]: {
        ...prev[category],
        [field]: prev[category][field].filter((_, i) => i !== index)
      }
    }));
  };

  const handleGenerateArchitecture = () => {
    console.log('🏗️ Moving to Architecture Designer with user-edited tech stack:', userTechStack);
    
    // Store user's final tech stack in project store
    useProjectStore.setState({
      userEditedTechStack: userTechStack
    });
    
    setCurrentStep('architecture');
  };

  const functional_requirements = techStackRecommendations.functional_requirements || {};
  const claude_recommendations = techStackRecommendations.claude_recommendations || {};
  const technology_recommendations = claude_recommendations.technology_recommendations || {};

  return (
    <div className="max-w-6xl mx-auto p-6 space-y-8">
      {/* Header */}
      <div className="text-center mb-8">
        <h2 className="text-3xl font-bold text-gray-900 mb-2">
          🛠️ Technology Stack Recommendations
        </h2>
        <p className="text-gray-600">
          AI-powered technology recommendations for your project
        </p>
        <div className="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
          <p className="text-blue-800 text-sm">
            <strong>💡 You can customize these recommendations!</strong> Click the "Edit" buttons to modify any technology choices before generating your architecture.
          </p>
        </div>
      </div>

      {/* Functional Requirements Analysis */}
      {functional_requirements.feature_name && (
        <div className="bg-white rounded-xl shadow-sm border p-6">
          <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
            <span className="text-2xl mr-2">🎯</span>
            Functional Requirements Analysis
          </h3>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h4 className="font-semibold text-gray-800 mb-2">Core Feature</h4>
              <div className="bg-blue-50 rounded-lg p-4">
                <h5 className="font-medium text-blue-900">{functional_requirements.feature_name}</h5>
                <p className="text-blue-700 text-sm mt-1">{functional_requirements.description}</p>
              </div>
            </div>

            <div>
              <h4 className="font-semibold text-gray-800 mb-2">Complexity Level</h4>
              <div className="bg-purple-50 rounded-lg p-4">
                <span className={`inline-block px-3 py-1 rounded-full text-sm font-medium ${
                  functional_requirements.complexity_level === 'high' ? 'bg-red-100 text-red-800' :
                  functional_requirements.complexity_level === 'medium' ? 'bg-yellow-100 text-yellow-800' :
                  'bg-green-100 text-green-800'
                }`}>
                  {functional_requirements.complexity_level || 'Medium'} Complexity
                </span>
              </div>
            </div>
          </div>

          {/* Technical Requirements */}
          {functional_requirements.technical_requirements && functional_requirements.technical_requirements.length > 0 && (
            <div className="mt-6">
              <h4 className="font-semibold text-gray-800 mb-3">Technical Requirements</h4>
              <div className="flex flex-wrap gap-2">
                {functional_requirements.technical_requirements.map((req, index) => (
                  <span key={index} className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">
                    {req}
                  </span>
                ))}
              </div>
            </div>
          )}

          {/* Business Logic Rules */}
          {functional_requirements.business_logic_rules && functional_requirements.business_logic_rules.length > 0 && (
            <div className="mt-6">
              <h4 className="font-semibold text-gray-800 mb-3">Business Logic Rules</h4>
              <div className="space-y-2">
                {functional_requirements.business_logic_rules.map((rule, index) => (
                  <div key={index} className="bg-orange-50 border-l-4 border-orange-400 p-3">
                    <p className="text-orange-800 text-sm">{rule}</p>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* All Features */}
          {functional_requirements.all_features && functional_requirements.all_features.length > 0 && (
            <div className="mt-6">
              <h4 className="font-semibold text-gray-800 mb-3">All Features</h4>
              <div className="flex flex-wrap gap-2">
                {functional_requirements.all_features.map((feature, index) => (
                  <span key={index} className="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">
                    {feature}
                  </span>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

      {/* Technology Recommendations - ENHANCED WITH EDIT FUNCTIONALITY */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center">
          <span className="text-2xl mr-2">🤖</span>
          Technology Stack - Customize Your Choices
        </h3>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {/* Frontend */}
          <div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-lg p-5">
            <div className="flex items-center justify-between mb-3">
              <h4 className="font-bold text-blue-900 flex items-center">
                <span className="text-xl mr-2">⚛️</span>
                Frontend
              </h4>
              <button
                onClick={() => handleEditToggle('frontend')}
                className={`px-3 py-1 rounded-md text-xs font-medium transition-colors ${
                  editMode.frontend 
                    ? 'bg-green-100 text-green-800 hover:bg-green-200' 
                    : 'bg-blue-100 text-blue-800 hover:bg-blue-200'
                }`}
              >
                {editMode.frontend ? '✅ Save' : '✏️ Edit'}
              </button>
            </div>

            <div className="space-y-3">
              <div>
                <p className="font-medium text-blue-800">Framework</p>
                {editMode.frontend ? (
                  <select
                    value={userTechStack.frontend.framework}
                    onChange={(e) => handleTechChange('frontend', 'framework', e.target.value)}
                    className="w-full mt-1 px-3 py-2 border border-blue-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  >
                    {techOptions.frontend.frameworks.map(framework => (
                      <option key={framework} value={framework}>{framework}</option>
                    ))}
                  </select>
                ) : (
                  <p className="text-blue-700 bg-blue-100 rounded px-2 py-1">{userTechStack.frontend.framework}</p>
                )}
              </div>

              {userTechStack.frontend.libraries && userTechStack.frontend.libraries.length > 0 && (
                <div>
                  <p className="font-medium text-blue-800">Libraries</p>
                  {editMode.frontend ? (
                    <div className="space-y-2 mt-1">
                      {userTechStack.frontend.libraries.map((lib, index) => (
                        <div key={index} className="flex items-center space-x-2">
                          <input
                            type="text"
                            value={lib}
                            onChange={(e) => handleArrayChange('frontend', 'libraries', index, e.target.value)}
                            className="flex-1 px-2 py-1 border border-blue-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
                          />
                          <button
                            onClick={() => removeArrayItem('frontend', 'libraries', index)}
                            className="text-red-600 hover:text-red-800 text-sm"
                          >
                            ✕
                          </button>
                        </div>
                      ))}
                      <button
                        onClick={() => addArrayItem('frontend', 'libraries')}
                        className="text-blue-600 hover:text-blue-800 text-sm font-medium"
                      >
                        + Add Library
                      </button>
                    </div>
                  ) : (
                    <div className="flex flex-wrap gap-1 mt-1">
                      {userTechStack.frontend.libraries.map((lib, index) => (
                        <span key={index} className="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">
                          {lib}
                        </span>
                      ))}
                    </div>
                  )}
                </div>
              )}

              {technology_recommendations.frontend?.reasoning && (
                <div>
                  <p className="font-medium text-blue-800">AI Reasoning</p>
                  <p className="text-blue-600 text-sm bg-blue-100 rounded p-2">{technology_recommendations.frontend.reasoning}</p>
                </div>
              )}
            </div>
          </div>

          {/* Backend */}
          <div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg p-5">
            <div className="flex items-center justify-between mb-3">
              <h4 className="font-bold text-green-900 flex items-center">
                <span className="text-xl mr-2">🟢</span>
                Backend
              </h4>
              <button
                onClick={() => handleEditToggle('backend')}
                className={`px-3 py-1 rounded-md text-xs font-medium transition-colors ${
                  editMode.backend 
                    ? 'bg-green-100 text-green-800 hover:bg-green-200' 
                    : 'bg-green-100 text-green-800 hover:bg-green-200'
                }`}
              >
                {editMode.backend ? '✅ Save' : '✏️ Edit'}
              </button>
            </div>

            <div className="space-y-3">
              <div>
                <p className="font-medium text-green-800">Language</p>
                {editMode.backend ? (
                  <select
                    value={userTechStack.backend.language}
                    onChange={(e) => {
                      handleTechChange('backend', 'language', e.target.value);
                      // Reset framework when language changes
                      handleTechChange('backend', 'framework', '');
                    }}
                    className="w-full mt-1 px-3 py-2 border border-green-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                  >
                    {techOptions.backend.languages.map(language => (
                      <option key={language} value={language}>{language}</option>
                    ))}
                  </select>
                ) : (
                  <p className="text-green-700 bg-green-100 rounded px-2 py-1">{userTechStack.backend.language}</p>
                )}
              </div>

              <div>
                <p className="font-medium text-green-800">Framework</p>
                {editMode.backend ? (
                  <select
                    value={userTechStack.backend.framework}
                    onChange={(e) => handleTechChange('backend', 'framework', e.target.value)}
                    className="w-full mt-1 px-3 py-2 border border-green-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                    disabled={!userTechStack.backend.language}
                  >
                    <option value="">Select Framework</option>
                    {userTechStack.backend.language && techOptions.backend.frameworks[userTechStack.backend.language]?.map(framework => (
                      <option key={framework} value={framework}>{framework}</option>
                    ))}
                  </select>
                ) : (
                  <p className="text-green-700 bg-green-100 rounded px-2 py-1">{userTechStack.backend.framework}</p>
                )}
              </div>

              {userTechStack.backend.libraries && userTechStack.backend.libraries.length > 0 && (
                <div>
                  <p className="font-medium text-green-800">Libraries</p>
                  {editMode.backend ? (
                    <div className="space-y-2 mt-1">
                      {userTechStack.backend.libraries.map((lib, index) => (
                        <div key={index} className="flex items-center space-x-2">
                          <input
                            type="text"
                            value={lib}
                            onChange={(e) => handleArrayChange('backend', 'libraries', index, e.target.value)}
                            className="flex-1 px-2 py-1 border border-green-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-green-500"
                          />
                          <button
                            onClick={() => removeArrayItem('backend', 'libraries', index)}
                            className="text-red-600 hover:text-red-800 text-sm"
                          >
                            ✕
                          </button>
                        </div>
                      ))}
                      <button
                        onClick={() => addArrayItem('backend', 'libraries')}
                        className="text-green-600 hover:text-green-800 text-sm font-medium"
                      >
                        + Add Library
                      </button>
                    </div>
                  ) : (
                    <div className="flex flex-wrap gap-1 mt-1">
                      {userTechStack.backend.libraries.map((lib, index) => (
                        <span key={index} className="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">
                          {lib}
                        </span>
                      ))}
                    </div>
                  )}
                </div>
              )}

              {technology_recommendations.backend?.reasoning && (
                <div>
                  <p className="font-medium text-green-800">AI Reasoning</p>
                  <p className="text-green-600 text-sm bg-green-100 rounded p-2">{technology_recommendations.backend.reasoning}</p>
                </div>
              )}
            </div>
          </div>

          {/* Database */}
          <div className="bg-gradient-to-br from-purple-50 to-indigo-50 rounded-lg p-5">
            <div className="flex items-center justify-between mb-3">
              <h4 className="font-bold text-purple-900 flex items-center">
                <span className="text-xl mr-2">🗄️</span>
                Database
              </h4>
              <button
                onClick={() => handleEditToggle('database')}
                className={`px-3 py-1 rounded-md text-xs font-medium transition-colors ${
                  editMode.database 
                    ? 'bg-green-100 text-green-800 hover:bg-green-200' 
                    : 'bg-purple-100 text-purple-800 hover:bg-purple-200'
                }`}
              >
                {editMode.database ? '✅ Save' : '✏️ Edit'}
              </button>
            </div>

            <div className="space-y-3">
              <div>
                <p className="font-medium text-purple-800">Primary</p>
                {editMode.database ? (
                  <select
                    value={userTechStack.database.primary}
                    onChange={(e) => handleTechChange('database', 'primary', e.target.value)}
                    className="w-full mt-1 px-3 py-2 border border-purple-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                  >
                    {techOptions.database.primary.map(db => (
                      <option key={db} value={db}>{db}</option>
                    ))}
                  </select>
                ) : (
                  <p className="text-purple-700 bg-purple-100 rounded px-2 py-1">{userTechStack.database.primary}</p>
                )}
              </div>

              {userTechStack.database.secondary && userTechStack.database.secondary.length > 0 && (
                <div>
                  <p className="font-medium text-purple-800">Secondary</p>
                  {editMode.database ? (
                    <div className="space-y-2 mt-1">
                      {userTechStack.database.secondary.map((db, index) => (
                        <div key={index} className="flex items-center space-x-2">
                          <select
                            value={db}
                            onChange={(e) => handleArrayChange('database', 'secondary', index, e.target.value)}
                            className="flex-1 px-2 py-1 border border-purple-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-purple-500"
                          >
                            <option value="">Select Database</option>
                            {techOptions.database.secondary.map(option => (
                              <option key={option} value={option}>{option}</option>
                            ))}
                          </select>
                          <button
                            onClick={() => removeArrayItem('database', 'secondary', index)}
                            className="text-red-600 hover:text-red-800 text-sm"
                          >
                            ✕
                          </button>
                        </div>
                      ))}
                      <button
                        onClick={() => addArrayItem('database', 'secondary')}
                        className="text-purple-600 hover:text-purple-800 text-sm font-medium"
                      >
                        + Add Database
                      </button>
                    </div>
                  ) : (
                    <div className="flex flex-wrap gap-1 mt-1">
                      {userTechStack.database.secondary.map((db, index) => (
                        <span key={index} className="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">
                          {db}
                        </span>
                      ))}
                    </div>
                  )}
                </div>
              )}

              {technology_recommendations.database?.reasoning && (
                <div>
                  <p className="font-medium text-purple-800">AI Reasoning</p>
                  <p className="text-purple-600 text-sm bg-purple-100 rounded p-2">{technology_recommendations.database.reasoning}</p>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* User Changes Summary */}
        <div className="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
          <h4 className="font-semibold text-yellow-800 mb-2">📝 Your Technology Choices</h4>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
            <div>
              <p className="font-medium text-yellow-800">Frontend:</p>
              <p className="text-yellow-700">{userTechStack.frontend.framework}</p>
            </div>
            <div>
              <p className="font-medium text-yellow-800">Backend:</p>
              <p className="text-yellow-700">{userTechStack.backend.language} + {userTechStack.backend.framework}</p>
            </div>
            <div>
              <p className="font-medium text-yellow-800">Database:</p>
              <p className="text-yellow-700">{userTechStack.database.primary}</p>
            </div>
          </div>
        </div>
      </div>

      {/* Implementation Strategy */}
      {claude_recommendations.implementation_strategy && (
        <div className="bg-white rounded-xl shadow-sm border p-6">
          <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
            <span className="text-2xl mr-2">📋</span>
            Implementation Strategy
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h4 className="font-semibold text-gray-800 mb-2">Architecture Pattern</h4>
              <p className="text-gray-700 bg-gray-50 rounded-lg p-3">
                {claude_recommendations.implementation_strategy.architecture_pattern}
              </p>
            </div>
            <div>
              <h4 className="font-semibold text-gray-800 mb-2">Deployment Strategy</h4>
              <p className="text-gray-700 bg-gray-50 rounded-lg p-3">
                {claude_recommendations.implementation_strategy.deployment_strategy}
              </p>
            </div>
          </div>
        </div>
      )}

      {/* Business Alignment */}
      {claude_recommendations.business_alignment && (
        <div className="bg-white rounded-xl shadow-sm border p-6">
          <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
            <span className="text-2xl mr-2">🎯</span>
            Business Alignment
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {Object.entries(claude_recommendations.business_alignment).map(([key, value]) => (
              <div key={key} className="bg-blue-50 rounded-lg p-4">
                <h4 className="font-semibold text-blue-900 capitalize mb-1">
                  {key.replace(/_/g, ' ')}
                </h4>
                <p className="text-blue-700 text-sm">{value}</p>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Generate Architecture Button */}
      <div className="text-center py-8">
        <button
          onClick={handleGenerateArchitecture}
          className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:from-indigo-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105 shadow-lg flex items-center space-x-3 mx-auto"
        >
          <span className="text-2xl">🏗️</span>
          <span>Generate Architecture Design</span>
          <span className="text-xl">→</span>
        </button>
        <p className="text-gray-600 mt-2 text-sm">
          AI will design architecture using your customized technology stack
        </p>
        <div className="mt-3 bg-green-50 border border-green-200 rounded-lg p-3 max-w-md mx-auto">
          <p className="text-green-800 text-sm font-medium">
            🎯 Using: {userTechStack.frontend.framework} + {userTechStack.backend.language} + {userTechStack.database.primary}
          </p>
        </div>
      </div>
    </div>
  );
}