import React, { useState } from 'react';
import useProjectStore from '../../store/projectStore';
import { FEATURE_TYPES, COMPLEXITY_LEVELS } from '../../types/project.types';

export default function CustomFeatureCreator({ onClose }) {
  const [featureName, setFeatureName] = useState('');
  const [featureDescription, setFeatureDescription] = useState('');
  const [complexity, setComplexity] = useState(COMPLEXITY_LEVELS.MEDIUM);
  const [isAnalyzing, setIsAnalyzing] = useState(false);
  
  const { addFeature } = useProjectStore();

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!featureName.trim() || !featureDescription.trim()) {
      return;
    }

    setIsAnalyzing(true);

    // Simulate AI analysis (we'll connect to real AI later)
    setTimeout(() => {
      const customFeature = {
        id: `custom_${Date.now()}`,
        name: featureName.trim(),
        description: featureDescription.trim(),
        type: FEATURE_TYPES.CUSTOM,
        complexity: complexity,
        order: 0 // Will be set by addFeature
      };

      addFeature(customFeature);
      setIsAnalyzing(false);
      onClose();
    }, 1500);
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
        <div className="p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold text-gray-900">
              Create Custom Feature
            </h3>
            <button
              onClick={onClose}
              className="text-gray-400 hover:text-gray-600 transition-colors"
            >
              <span className="text-xl">×</span>
            </button>
          </div>

          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Feature Name
              </label>
              <input
                type="text"
                value={featureName}
                onChange={(e) => setFeatureName(e.target.value)}
                placeholder="e.g., Retell AI Integration, Payment Dashboard"
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Feature Description
              </label>
              <textarea
                value={featureDescription}
                onChange={(e) => setFeatureDescription(e.target.value)}
                placeholder="Describe what this feature should do, how it works, and any specific requirements..."
                rows={4}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Complexity Level
              </label>
              <select
                value={complexity}
                onChange={(e) => setComplexity(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              >
                <option value={COMPLEXITY_LEVELS.LOW}>Low - Simple functionality</option>
                <option value={COMPLEXITY_LEVELS.MEDIUM}>Medium - Moderate complexity</option>
                <option value={COMPLEXITY_LEVELS.HIGH}>High - Complex implementation</option>
              </select>
            </div>

            {isAnalyzing && (
              <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
                <div className="flex items-center space-x-2">
                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600"></div>
                  <span className="text-blue-700 text-sm">
                    🤖 AI is analyzing your feature requirements...
                  </span>
                </div>
              </div>
            )}

            <div className="flex space-x-3 pt-4">
              <button
                type="button"
                onClick={onClose}
                className="flex-1 py-2 px-4 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
                disabled={isAnalyzing}
              >
                Cancel
              </button>
              <button
                type="submit"
                disabled={!featureName.trim() || !featureDescription.trim() || isAnalyzing}
                className={`flex-1 py-2 px-4 rounded-md font-medium transition-colors ${
                  !featureName.trim() || !featureDescription.trim() || isAnalyzing
                    ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
                    : 'bg-blue-600 text-white hover:bg-blue-700'
                }`}
              >
                {isAnalyzing ? 'Analyzing...' : 'Add Feature'}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}
