import React, { useState } from 'react';
import useProjectStore from '../../store/projectStore';
import FeatureSuggestions from './FeatureSuggestions';
import EnhancedCustomFeatureCreator from './EnhancedCustomFeatureCreator';

export default function FeatureCardBoard() {
  const { 
    selectedFeatures, 
    availableSuggestions, 
    removeFeature,
    setCurrentStep 
  } = useProjectStore();
  
  const [showCustomCreator, setShowCustomCreator] = useState(false);

  const handleContinue = () => {
    if (selectedFeatures.length >= 3) {
      setCurrentStep('business-questions');
    }
  };

  const moveFeatureUp = (index) => {
    if (index > 0) {
      const newFeatures = [...selectedFeatures];
      [newFeatures[index], newFeatures[index - 1]] = [newFeatures[index - 1], newFeatures[index]];
      // We'll add reorderFeatures later
    }
  };

  const moveFeatureDown = (index) => {
    if (index < selectedFeatures.length - 1) {
      const newFeatures = [...selectedFeatures];
      [newFeatures[index], newFeatures[index + 1]] = [newFeatures[index + 1], newFeatures[index]];
      // We'll add reorderFeatures later
    }
  };

  return (
    <div className="space-y-6">
      <div className="text-center">
        <h2 className="text-2xl font-semibold text-gray-900 mb-2">
          Build Your Feature Set
        </h2>
        <p className="text-gray-600">
          Select features for your application. You can reorder them by priority.
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Selected Features */}
        <div className="lg:col-span-2">
          <div className="bg-gray-50 rounded-lg p-6 min-h-[500px]">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold text-gray-900">
                Selected Features ({selectedFeatures.length})
              </h3>
              <button
                onClick={() => setShowCustomCreator(true)}
                className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors text-sm font-medium"
              >
                + Add Custom Feature
              </button>
            </div>

            {selectedFeatures.length === 0 ? (
              <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
                <div className="text-gray-400 text-lg mb-2">🎯</div>
                <p className="text-gray-500">
                  No features selected yet. Choose from suggestions or create custom features.
                </p>
              </div>
            ) : (
              <div className="space-y-3">
                {selectedFeatures.map((feature, index) => (
                  <div key={feature.id} className="bg-white rounded-lg border border-gray-200 p-4 shadow-sm">
                    <div className="flex items-start space-x-3">
                      {/* Priority Number */}
                      <div className="flex-shrink-0 w-8 h-8 bg-blue-100 text-blue-600 rounded-md flex items-center justify-center font-bold text-sm">
                        {index + 1}
                      </div>

                      {/* Feature Content */}
                      <div className="flex-1">
                        <div className="flex items-start justify-between">
                          <div className="flex-1">
                            <h4 className="font-medium text-gray-900 mb-1">
                              {feature.type === 'essential' && '⭐ '}
                              {feature.type === 'suggested' && '💡 '}
                              {feature.type === 'custom' && '🎨 '}
                              {feature.name}
                            </h4>
                            <p className="text-sm text-gray-600 mb-2">
                              {feature.description}
                            </p>
                            <div className="flex items-center space-x-2">
                              <span className={`px-2 py-1 rounded-full text-xs font-medium border ${
                                feature.complexity === 'low' ? 'bg-green-100 text-green-800 border-green-200' :
                                feature.complexity === 'medium' ? 'bg-yellow-100 text-yellow-800 border-yellow-200' :
                                'bg-red-100 text-red-800 border-red-200'
                              }`}>
                                {feature.complexity} complexity
                              </span>
                              <span className="text-xs text-gray-500 capitalize">
                                {feature.type}
                              </span>
                            </div>
                          </div>

                          {/* Action Buttons */}
                          <div className="flex items-center space-x-1">
                            <button
                              onClick={() => moveFeatureUp(index)}
                              disabled={index === 0}
                              className="w-6 h-6 bg-gray-100 text-gray-600 rounded hover:bg-gray-200 transition-colors flex items-center justify-center disabled:opacity-50"
                              title="Move up"
                            >
                              ↑
                            </button>
                            <button
                              onClick={() => moveFeatureDown(index)}
                              disabled={index === selectedFeatures.length - 1}
                              className="w-6 h-6 bg-gray-100 text-gray-600 rounded hover:bg-gray-200 transition-colors flex items-center justify-center disabled:opacity-50"
                              title="Move down"
                            >
                              ↓
                            </button>
                            <button
                              onClick={() => removeFeature(feature.id)}
                              className="w-6 h-6 bg-red-100 text-red-600 rounded hover:bg-red-200 transition-colors flex items-center justify-center"
                              title="Remove"
                            >
                              ×
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}

            {/* Continue Button */}
            {selectedFeatures.length >= 1 && (
              <div className="mt-6 pt-4 border-t border-gray-200">
                <button
                  onClick={handleContinue}
                  className={`w-full py-3 px-4 rounded-md font-medium transition-colors ${
                    selectedFeatures.length >= 3
                      ? 'bg-green-600 text-white hover:bg-green-700'
                      : 'bg-gray-300 text-gray-500'
                  }`}
                >
                  {selectedFeatures.length >= 3 
                    ? 'Continue to Generate Code →' 
                    : `Add ${3 - selectedFeatures.length} more feature${3 - selectedFeatures.length !== 1 ? 's' : ''} to continue`
                  }
                </button>
              </div>
            )}
          </div>
        </div>

        {/* Feature Suggestions Panel */}
        <div className="space-y-6">
          <FeatureSuggestions suggestions={availableSuggestions} />
          
          {/* Quick Stats */}
          <div className="bg-white border border-gray-200 rounded-lg p-4">
            <h4 className="font-medium text-gray-900 mb-3">Project Overview</h4>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-gray-500">Features Selected:</span>
                <span className="font-medium">{selectedFeatures.length}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-500">Estimated Complexity:</span>
                <span className="font-medium">
                  {selectedFeatures.length <= 3 ? 'Simple' : selectedFeatures.length <= 6 ? 'Medium' : 'Complex'}
                </span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-500">Development Time:</span>
                <span className="font-medium">
                  {selectedFeatures.length <= 3 ? '2-3 weeks' : selectedFeatures.length <= 6 ? '4-6 weeks' : '8+ weeks'}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Custom Feature Creator Modal */}
      {showCustomCreator && (
        <EnhancedCustomFeatureCreator onClose={() => setShowCustomCreator(false)} />
      )}
    </div>
  );
}
