import React from 'react';
import useProjectStore from '../../store/projectStore';
import ProjectTypeSelector from './ProjectTypeSelector';
import FeatureCardBoard from './FeatureCardBoard';
import BusinessQuestionsScreen from './BusinessQuestionsScreen';
import TechStackSummary from './TechStackSummary';
import ArchitectureDesigner from './ArchitectureDesigner';

export default function ProjectBuilder() {
  const { currentStep, projectType, projectName } = useProjectStore();

  const steps = [
    { id: 'project-type', name: 'Project Type', number: 1 },
    { id: 'features', name: 'Features', number: 2 },
    { id: 'business-questions', name: 'Business Context', number: 3 },
    { id: 'summary', name: 'Generate', number: 4 },
    { id: 'architecture', name: 'Architecture', number: 5 }
  ];

  const getCurrentStepNumber = () => {
    const step = steps.find(s => s.id === currentStep);
    return step ? step.number : 1;
  };

  return (
    <div className="space-y-8">
      {/* Progress Steps */}
      <div className="flex items-center justify-center space-x-4">
        {steps.map((step, index) => (
          <React.Fragment key={step.id}>
            <div className={`flex items-center space-x-2 ${
              getCurrentStepNumber() >= step.number ? 'text-blue-600' : 'text-gray-400'
            }`}>
              <div className={`w-8 h-8 rounded-full flex items-center justify-center font-medium text-sm ${
                getCurrentStepNumber() >= step.number 
                  ? 'bg-blue-600 text-white' 
                  : 'bg-gray-200 text-gray-600'
              }`}>
                {getCurrentStepNumber() > step.number ? '✓' : step.number}
              </div>
              <span className="font-medium text-sm">{step.name}</span>
            </div>
            
            {index < steps.length - 1 && (
              <div className={`w-12 h-0.5 ${
                getCurrentStepNumber() > step.number ? 'bg-blue-600' : 'bg-gray-300'
              }`}></div>
            )}
          </React.Fragment>
        ))}
      </div>

      {/* Project Info Bar */}
      {projectType && (
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
          <div className="flex items-center justify-between">
            <div>
              <span className="text-sm text-gray-500">Project:</span>
              <span className="ml-2 font-medium text-gray-900">
                {projectName || 'Unnamed Project'}
              </span>
            </div>
            <div>

              <span className="text-sm text-gray-500">Type:</span>
              <span className="ml-2 font-medium text-gray-900 capitalize">
                {projectType.replace('_', ' ')}
              </span>
            </div>
          </div>
        </div>
      )}

      {/* Step Content */}
      <div className="bg-white rounded-lg shadow-lg p-6 min-h-[600px]">
        {currentStep === 'project-type' && <ProjectTypeSelector />}
        {currentStep === 'features' && <FeatureCardBoard />}
        {currentStep === 'business-questions' && <BusinessQuestionsScreen />}
        {currentStep === 'summary' && <TechStackSummary />}
        {currentStep === 'architecture' && <ArchitectureDesigner />}
      </div>
    </div>
  );
}
