import React, { useState } from 'react';

export default function CustomCategoryCreator({ onClose, onCreateCategory }) {
  const [categoryName, setCategoryName] = useState('');
  const [categoryDescription, setCategoryDescription] = useState('');
  const [categoryIcon, setCategoryIcon] = useState('🎯');
  const [features, setFeatures] = useState(['']);

  const iconOptions = [
    '🎯', '🚀', '⚡', '🔥', '💡', '🛠️', '🎨', '🎪', '🎭', '🎬',
    '🎮', '🎲', '🎸', '🎵', '🎺', '🎻', '🥁', '🎤', '🎧', '📱',
    '💻', '⌚', '📷', '📺', '📹', '📞', '☎️', '📠', '🔌', '💡',
    '🔦', '🕯️', '🛋️', '🚪', '🧲', '💎', '⚖️', '🔧', '🔨', '⛏️'
  ];

  const addFeature = () => {
    setFeatures([...features, '']);
  };

  const updateFeature = (index, value) => {
    const newFeatures = [...features];
    newFeatures[index] = value;
    setFeatures(newFeatures);
  };

  const removeFeature = (index) => {
    const newFeatures = features.filter((_, i) => i !== index);
    setFeatures(newFeatures);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (!categoryName.trim() || !categoryDescription.trim()) {
      return;
    }

    const validFeatures = features.filter(f => f.trim());
    if (validFeatures.length === 0) {
      return;
    }

    const customCategory = {
      type: `custom_${categoryName.toLowerCase().replace(/\s+/g, '_')}`,
      title: categoryName.trim(),
      description: categoryDescription.trim(),
      icon: categoryIcon,
      gradient: 'from-indigo-50 to-indigo-100',
      border: 'border-indigo-200',
      text: 'text-indigo-900',
      subtext: 'text-indigo-700',
      features: validFeatures,
      isCustom: true
    };

    onCreateCategory(customCategory);
    onClose();
  };

  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-lg w-full max-h-[90vh] overflow-y-auto">
        <div className="p-6">
          <div className="flex items-center justify-between mb-6">
            <h3 className="text-xl font-semibold text-gray-900">
              Create Custom Project Category
            </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-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Category Name
              </label>
              <input
                type="text"
                value={categoryName}
                onChange={(e) => setCategoryName(e.target.value)}
                placeholder="e.g., Legal Practice Management, Veterinary Clinic"
                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">
                Description
              </label>
              <textarea
                value={categoryDescription}
                onChange={(e) => setCategoryDescription(e.target.value)}
                placeholder="Describe what type of applications this category covers..."
                rows={3}
                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">
                Icon
              </label>
              <div className="grid grid-cols-10 gap-2 p-3 border border-gray-300 rounded-md max-h-32 overflow-y-auto">
                {iconOptions.map((icon) => (
                  <button
                    key={icon}
                    type="button"
                    onClick={() => setCategoryIcon(icon)}
                    className={`w-8 h-8 rounded flex items-center justify-center text-lg hover:bg-gray-100 transition-colors ${
                      categoryIcon === icon ? 'bg-blue-100 ring-2 ring-blue-500' : ''
                    }`}
                  >
                    {icon}
                  </button>
                ))}
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Key Features (at least 3)
              </label>
              <div className="space-y-2">
                {features.map((feature, index) => (
                  <div key={index} className="flex items-center space-x-2">
                    <input
                      type="text"
                      value={feature}
                      onChange={(e) => updateFeature(index, e.target.value)}
                      placeholder={`Feature ${index + 1}`}
                      className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    />
                    {features.length > 1 && (
                      <button
                        type="button"
                        onClick={() => removeFeature(index)}
                        className="w-8 h-8 bg-red-100 text-red-600 rounded hover:bg-red-200 transition-colors flex items-center justify-center"
                      >
                        ×
                      </button>
                    )}
                  </div>
                ))}
              </div>
              <button
                type="button"
                onClick={addFeature}
                className="mt-2 text-blue-600 hover:text-blue-700 text-sm font-medium"
              >
                + Add another feature
              </button>
            </div>

            <div className="flex space-x-3 pt-4 border-t border-gray-200">
              <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"
              >
                Cancel
              </button>
              <button
                type="submit"
                disabled={!categoryName.trim() || !categoryDescription.trim() || features.filter(f => f.trim()).length < 3}
                className={`flex-1 py-2 px-4 rounded-md font-medium transition-colors ${
                  !categoryName.trim() || !categoryDescription.trim() || features.filter(f => f.trim()).length < 3
                    ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
                    : 'bg-blue-600 text-white hover:bg-blue-700'
                }`}
              >
                Create Category
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}
