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

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

  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('🏗️ Navigating to Architecture Designer...');
    setCurrentStep('architecture');
    navigate('/project-builder/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>
  );
}
