import React, { useState } from 'react';
import './MealPlanFeedback.css';

const MealPlanFeedback = ({ onSubmitFeedback }) => {
  const [feedback, setFeedback] = useState('');
  const [feedbackType, setFeedbackType] = useState('general');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  
  const handleSubmit = async () => {
    if (!feedback.trim()) return;
    
    setIsSubmitting(true);
    
    // In a real app, this would send the feedback to an API
    // For now, we'll just simulate a delay
    setTimeout(() => {
      if (onSubmitFeedback) {
        onSubmitFeedback({
          type: feedbackType,
          text: feedback,
          timestamp: new Date().toISOString()
        });
      }
      
      setIsSubmitting(false);
      setSubmitted(true);
      
      // Reset form after 3 seconds
      setTimeout(() => {
        setFeedback('');
        setFeedbackType('general');
        setSubmitted(false);
      }, 3000);
    }, 1000);
  };
  
  return (
    <div className="meal-plan-feedback">
      <h3>Customize Your Meal Plan</h3>
      
      {submitted ? (
        <div className="feedback-success">
          <p>Thank you for your feedback! Your meal plan will be updated shortly.</p>
        </div>
      ) : (
        <>
          <p className="feedback-intro">
            Not satisfied with your meal plan? Tell us what you'd like to change and we'll regenerate it.
          </p>
          
          <div className="feedback-form">
            <div className="feedback-type">
              <label>What would you like to change?</label>
              <select 
                value={feedbackType}
                onChange={(e) => setFeedbackType(e.target.value)}
              >
                <option value="general">General Feedback</option>
                <option value="taste">Flavor Preferences</option>
                <option value="complexity">Recipe Complexity</option>
                <option value="ingredients">Specific Ingredients</option>
                <option value="meals">Specific Meals</option>
                <option value="time">Cooking Time</option>
              </select>
            </div>
            
            <div className="feedback-text">
              <label>Your Feedback</label>
              <textarea
                value={feedback}
                onChange={(e) => setFeedback(e.target.value)}
                placeholder="Examples: 'Make the recipes simpler', 'Add more Italian dishes', 'Avoid bell peppers', 'Use the slow cooker more often'..."
                rows={4}
              />
            </div>
            
            <button 
              className="submit-button"
              onClick={handleSubmit}
              disabled={!feedback.trim() || isSubmitting}
            >
              {isSubmitting ? 'Submitting...' : 'Update Meal Plan'}
            </button>
          </div>
          
          <div className="feedback-examples">
            <h4>Example Feedback</h4>
            <ul>
              <li>"I'd like to have more vegetarian options during the week."</li>
              <li>"Can we include more pasta dishes?"</li>
              <li>"The meals are too complex, I need simpler recipes with fewer ingredients."</li>
              <li>"Please add more breakfast-for-dinner options."</li>
            </ul>
          </div>
        </>
      )}
    </div>
  );
};

export default MealPlanFeedback;