import React, { useState } from 'react';
import { Sparkles, BookOpen, Clock, Target, Loader2, CheckCircle, ArrowRight } from 'lucide-react';
import { WikimediaAPI } from '../utils/wikimedia-api';
import { StudyPlan } from '../types';

interface AIStudyPlanGeneratorProps {
  onPlanGenerated: (plan: StudyPlan) => void;
}

const AIStudyPlanGenerator: React.FC<AIStudyPlanGeneratorProps> = ({ onPlanGenerated }) => {
  const [topic, setTopic] = useState('');
  const [difficulty, setDifficulty] = useState<'beginner' | 'intermediate' | 'advanced'>('beginner');
  const [loading, setLoading] = useState(false);
  const [generatedPlan, setGeneratedPlan] = useState<StudyPlan | null>(null);

  const handleGenerate = async () => {
    if (!topic.trim()) return;

    setLoading(true);
    try {
      const plan = await WikimediaAPI.generateStudyPlan(topic, difficulty);
      setGeneratedPlan(plan);
    } catch (error) {
      console.error('Failed to generate study plan:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleAcceptPlan = () => {
    if (generatedPlan) {
      onPlanGenerated(generatedPlan);
      setGeneratedPlan(null);
      setTopic('');
    }
  };

  const getDifficultyColor = (level: string) => {
    switch (level) {
      case 'beginner': return 'bg-success-100 text-success-800';
      case 'intermediate': return 'bg-warning-100 text-warning-800';
      case 'advanced': return 'bg-error-100 text-error-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  return (
    <div className="bg-gradient-to-br from-primary-50 to-secondary-50 rounded-2xl p-8 border border-primary-100">
      <div className="flex items-center space-x-3 mb-6">
        <div className="w-12 h-12 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-xl flex items-center justify-center">
          <Sparkles className="w-6 h-6 text-white" />
        </div>
        <div>
          <h2 className="text-2xl font-bold text-gray-900">AI Study Plan Generator</h2>
          <p className="text-gray-600">Create personalized learning paths from Wikimedia content</p>
        </div>
      </div>

      {!generatedPlan ? (
        <div className="space-y-6">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              What would you like to learn?
            </label>
            <input
              type="text"
              value={topic}
              onChange={(e) => setTopic(e.target.value)}
              placeholder="e.g., Machine Learning, Ancient History, Climate Science..."
              className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent text-lg"
              onKeyDown={(e) => e.key === 'Enter' && handleGenerate()}
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-3">
              Difficulty Level
            </label>
            <div className="grid grid-cols-3 gap-3">
              {(['beginner', 'intermediate', 'advanced'] as const).map((level) => (
                <button
                  key={level}
                  onClick={() => setDifficulty(level)}
                  className={`p-4 rounded-xl border-2 transition-all ${
                    difficulty === level
                      ? 'border-primary-500 bg-primary-50 text-primary-700'
                      : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'
                  }`}
                >
                  <div className="text-center">
                    <div className="font-medium capitalize">{level}</div>
                    <div className="text-sm text-gray-500 mt-1">
                      {level === 'beginner' && '3-5 topics'}
                      {level === 'intermediate' && '6-8 topics'}
                      {level === 'advanced' && '9-12 topics'}
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </div>

          <button
            onClick={handleGenerate}
            disabled={loading || !topic.trim()}
            className="w-full flex items-center justify-center space-x-2 px-6 py-4 bg-gradient-to-r from-primary-600 to-secondary-600 text-white rounded-xl hover:from-primary-700 hover:to-secondary-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {loading ? (
              <>
                <Loader2 className="w-5 h-5 animate-spin" />
                <span>Generating Study Plan...</span>
              </>
            ) : (
              <>
                <Sparkles className="w-5 h-5" />
                <span>Generate Study Plan</span>
              </>
            )}
          </button>
        </div>
      ) : (
        <div className="space-y-6">
          <div className="bg-white rounded-xl p-6 border border-gray-200">
            <div className="flex items-start justify-between mb-4">
              <div className="flex-1">
                <h3 className="text-xl font-bold text-gray-900 mb-2">{generatedPlan.title}</h3>
                <p className="text-gray-600 mb-4">{generatedPlan.description}</p>
                
                <div className="flex items-center space-x-4">
                  <span className={`px-3 py-1 rounded-full text-sm font-medium ${getDifficultyColor(generatedPlan.difficulty)}`}>
                    {generatedPlan.difficulty}
                  </span>
                  <div className="flex items-center text-sm text-gray-600">
                    <Clock className="w-4 h-4 mr-1" />
                    {generatedPlan.estimatedTime}
                  </div>
                  <div className="flex items-center text-sm text-gray-600">
                    <BookOpen className="w-4 h-4 mr-1" />
                    {generatedPlan.topics.length} topics
                  </div>
                </div>
              </div>
            </div>

            <div className="space-y-3">
              <h4 className="font-medium text-gray-900">Study Topics:</h4>
              {generatedPlan.topics.slice(0, 5).map((topic, index) => (
                <div key={topic.id} className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
                  <div className="w-6 h-6 bg-primary-100 rounded-full flex items-center justify-center text-primary-600 text-sm font-medium">
                    {index + 1}
                  </div>
                  <div className="flex-1">
                    <div className="font-medium text-gray-900">{topic.title}</div>
                    <div className="text-sm text-gray-600">{topic.estimatedTime}</div>
                  </div>
                  <CheckCircle className="w-5 h-5 text-gray-300" />
                </div>
              ))}
              {generatedPlan.topics.length > 5 && (
                <div className="text-sm text-gray-500 text-center py-2">
                  +{generatedPlan.topics.length - 5} more topics...
                </div>
              )}
            </div>
          </div>

          <div className="flex space-x-3">
            <button
              onClick={() => setGeneratedPlan(null)}
              className="flex-1 px-4 py-3 border border-gray-300 rounded-xl text-gray-700 hover:bg-gray-50 transition-colors"
            >
              Generate New Plan
            </button>
            <button
              onClick={handleAcceptPlan}
              className="flex-1 flex items-center justify-center space-x-2 px-4 py-3 bg-primary-600 text-white rounded-xl hover:bg-primary-700 transition-colors"
            >
              <span>Accept Plan</span>
              <ArrowRight className="w-4 h-4" />
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default AIStudyPlanGenerator;