src/components/ContentTransformer.tsx

import React, { useState } from 'react';
import { Wand2, FileText, List, BookOpen, MessageSquare, Loader2 } from 'lucide-react';
import { WikimediaAPI } from '../utils/wikimedia-api';

const ContentTransformer: React.FC = () => {
  const [inputUrl, setInputUrl] = useState('');
  const [transformationType, setTransformationType] = useState<'summary' | 'quiz' | 'outline' | 'flashcards'>('summary');
  const [loading, setLoading] = useState(false);
  const [transformedContent, setTransformedContent] = useState<any>(null);
  const [selectedAnswers, setSelectedAnswers] = useState<Record<number, number>>({});

  const transformationTypes = [
    {
      id: 'summary' as const,
      name: 'Summary',
      description: 'Create concise summaries',
      icon: FileText,
      color: 'bg-primary-500'
    },
    {
      id: 'quiz' as const,
      name: 'Quiz',
      description: 'Generate practice questions',
      icon: MessageSquare,
      color: 'bg-secondary-500'
    },
    {
      id: 'outline' as const,
      name: 'Study Outline',
      description: 'Structured learning outline',
      icon: List,
      color: 'bg-accent-500'
    },
    {
      id: 'flashcards' as const,
      name: 'Flashcards',
      description: 'Key concepts for memorization',
      icon: BookOpen,
      color: 'bg-success-500'
    }
  ];

  const extractTitleFromUrl = (url: string): string => {
    try {
      const urlObj = new URL(url);
      const pathParts = urlObj.pathname.split('/');
      const title = pathParts[pathParts.length - 1];
      return decodeURIComponent(title.replace(/_/g, ' '));
    } catch {
      return '';
    }
  };

  const detectProject = (url: string): string => {
    if (url.includes('wikipedia.org')) return 'wikipedia';
    if (url.includes('wikibooks.org')) return 'wikibooks';
    if (url.includes('wikiversity.org')) return 'wikiversity';
    if (url.includes('wikiquote.org')) return 'wikiquote';
    if (url.includes('wiktionary.org')) return 'wiktionary';
    if (url.includes('wikisource.org')) return 'wikisource';
    return 'wikipedia';
  };

  const handleTransform = async () => {
    if (!inputUrl.trim()) return;

    setLoading(true);
    setSelectedAnswers({});
    try {
      const title = extractTitleFromUrl(inputUrl);
      const project = detectProject(inputUrl);
      const content = await WikimediaAPI.getPageContent(title, project);
      
      // Simulate content transformation based on type
      let transformed;
      switch (transformationType) {
        case 'summary':
          transformed = generateSummary(content, title);
          break;
        case 'quiz':
          transformed = generateQuiz(content, title);
          break;
        case 'outline':
          transformed = generateOutline(content, title);
          break;
        case 'flashcards':
          transformed = generateFlashcards(content, title);
          break;
      }
      
      setTransformedContent(transformed);
    } catch (error) {
      console.error('Content transformation failed:', error);
    } finally {
      setLoading(false);
    }
  };

  const generateSummary = (content: string, title: string) => {
    const sentences = content.split('.').filter(s => s.trim().length > 20);
    const keySentences = sentences.slice(0, 5);
    
    return {
      type: 'summary',
      title: `Summary: ${title}`,
      content: keySentences.join('. ') + '.',
      keyPoints: sentences.slice(5, 10).map(s => s.trim()).filter(s => s.length > 0)
    };
  };

  const generateQuiz = (content: string, title: string) => {
    // Generate more realistic quiz questions based on the title
    const questions = [
      {
        question: `What is the main topic discussed in the article about ${title}?`,
        options: [
          `The fundamental concepts and principles of ${title}`,
          `The historical development of ${title}`,
          `The practical applications of ${title}`,
          `The criticism and controversies surrounding ${title}`
        ],
        correct: 0
      },
      {
        question: `Which of the following is a key characteristic of ${title}?`,
        options: [
          'It has no practical applications',
          'It is a recent development',
          'It has significant impact in its field',
          'It is purely theoretical'
        ],
        correct: 2
      },
      {
        question: `According to the article, what makes ${title} significant?`,
        options: [
          'Its complexity and difficulty to understand',
          'Its widespread adoption and influence',
          'Its controversial nature',
          'Its limited scope of application'
        ],
        correct: 1
      },
      {
        question: `What can be inferred about the future of ${title}?`,
        options: [
          'It will become obsolete soon',
          'It will continue to evolve and develop',
          'It has reached its peak development',
          'It will be replaced by newer concepts'
        ],
        correct: 1
      },
      {
        question: `How does ${title} relate to other concepts in its field?`,
        options: [
          'It exists in complete isolation',
          'It contradicts most established theories',
          'It builds upon and connects with related concepts',
          'It replaces all previous knowledge'
        ],
        correct: 2
      }
    ];

    return {
      type: 'quiz',
      title: `Quiz: ${title}`,
      questions
    };
  };

  const generateOutline = (content: string, title: string) => {
    return {
      type: 'outline',
      title: `Study Outline: ${title}`,
      sections: [
        {
          title: 'Introduction',
          points: [
            `Overview and definition of ${title}`,
            'Historical context and background',
            'Key terminology and concepts'
          ]
        },
        {
          title: 'Main Concepts',
          points: [
            'Core principles and theories',
            'Important characteristics and features',
            'Fundamental mechanisms and processes'
          ]
        },
        {
          title: 'Applications and Examples',
          points: [
            'Real-world applications and use cases',
            'Notable examples and case studies',
            'Current developments and innovations'
          ]
        },
        {
          title: 'Analysis and Evaluation',
          points: [
            'Advantages and benefits',
            'Limitations and challenges',
            'Critical perspectives and debates'
          ]
        },
        {
          title: 'Conclusion',
          points: [
            'Summary of key insights',
            'Future implications and trends',
            'Further reading and research directions'
          ]
        }
      ]
    };
  };

  const generateFlashcards = (content: string, title: string) => {
    const cards = [
      { 
        front: `What is ${title}?`, 
        back: `${title} is a comprehensive topic that encompasses various concepts, principles, and applications within its field of study.` 
      },
      { 
        front: 'Key characteristics', 
        back: `The main features include fundamental principles, practical applications, and significant impact on related areas.` 
      },
      { 
        front: 'Historical significance', 
        back: `${title} has evolved over time, building upon previous knowledge and contributing to current understanding.` 
      },
      { 
        front: 'Modern applications', 
        back: `Today, ${title} is applied in various contexts and continues to influence contemporary practices and research.` 
      },
      { 
        front: 'Related concepts', 
        back: `${title} connects with numerous other ideas and theories, forming part of a broader knowledge network.` 
      },
      { 
        front: 'Future implications', 
        back: `The continued development of ${title} promises new insights and applications in the coming years.` 
      }
    ];

    return {
      type: 'flashcards',
      title: `Flashcards: ${title}`,
      cards
    };
  };

  const handleAnswerSelect = (questionIndex: number, answerIndex: number) => {
    setSelectedAnswers(prev => ({
      ...prev,
      [questionIndex]: answerIndex
    }));
  };

  const renderTransformedContent = () => {
    if (!transformedContent) return null;

    switch (transformedContent.type) {
      case 'summary':
        return (
          <div className="space-y-4">
            <div className="prose max-w-none">
              <p className="text-gray-700 leading-relaxed">{transformedContent.content}</p>
            </div>
            <div>
              <h4 className="font-medium text-gray-900 mb-3">Key Points:</h4>
              <ul className="space-y-2">
                {transformedContent.keyPoints.map((point: string, index: number) => (
                  <li key={index} className="flex items-start space-x-2">
                    <div className="w-2 h-2 bg-primary-500 rounded-full mt-2 flex-shrink-0" />
                    <span className="text-gray-700">{point}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        );

      case 'quiz':
        return (
          <div className="space-y-6">
            {transformedContent.questions.map((q: any, index: number) => (
              <div key={index} className="p-6 bg-gray-50 rounded-xl">
                <h4 className="font-medium text-gray-900 mb-4 text-lg">
                  {index + 1}. {q.question}
                </h4>
                <div className="space-y-3">
                  {q.options.map((option: string, optIndex: number) => (
                    <label 
                      key={optIndex} 
                      className={`flex items-start space-x-3 cursor-pointer p-3 rounded-lg border-2 transition-all ${
                        selectedAnswers[index] === optIndex
                          ? selectedAnswers[index] === q.correct
                            ? 'border-success-500 bg-success-50'
                            : 'border-error-500 bg-error-50'
                          : 'border-gray-200 hover:border-gray-300 bg-white'
                      }`}
                    >
                      <input 
                        type="radio" 
                        name={`q${index}`} 
                        value={optIndex}
                        checked={selectedAnswers[index] === optIndex}
                        onChange={() => handleAnswerSelect(index, optIndex)}
                        className="mt-1 text-primary-600 focus:ring-primary-500" 
                      />
                      <span className="text-gray-700 flex-1">{option}</span>
                      {selectedAnswers[index] !== undefined && optIndex === q.correct && (
                        <span className="text-success-600 font-medium text-sm">✓ Correct</span>
                      )}
                    </label>
                  ))}
                </div>
                {selectedAnswers[index] !== undefined && (
                  <div className="mt-4 p-3 bg-blue-50 rounded-lg">
                    <p className="text-sm text-blue-800">
                      <strong>Explanation:</strong> The correct answer highlights the key aspect of this topic 
                      that is most relevant to understanding its fundamental nature and importance.
                    </p>
                  </div>
                )}
              </div>
            ))}
            
            {Object.keys(selectedAnswers).length === transformedContent.questions.length && (
              <div className="bg-primary-50 rounded-xl p-6 text-center">
                <h4 className="font-semibold text-primary-900 mb-2">Quiz Complete!</h4>
                <p className="text-primary-700">
                  You scored {Object.entries(selectedAnswers).filter(([qIndex, answer]) => 
                    answer === transformedContent.questions[parseInt(qIndex)].correct
                  ).length} out of {transformedContent.questions.length}
                </p>
              </div>
            )}
          </div>
        );

      case 'outline':
        return (
          <div className="space-y-6">
            {transformedContent.sections.map((section: any, index: number) => (
              <div key={index} className="border-l-4 border-primary-500 pl-6">
                <h4 className="font-semibold text-gray-900 mb-3 text-lg">{section.title}</h4>
                <ul className="space-y-2">
                  {section.points.map((point: string, pointIndex: number) => (
                    <li key={pointIndex} className="flex items-start space-x-2">
                      <div className="w-1.5 h-1.5 bg-primary-500 rounded-full mt-2 flex-shrink-0" />
                      <span className="text-gray-700">{point}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        );

      case 'flashcards':
        return (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {transformedContent.cards.map((card: any, index: number) => (
              <div key={index} className="group perspective-1000">
                <div className="relative w-full h-48 transition-transform duration-500 transform-style-preserve-3d group-hover:rotate-y-180">
                  {/* Front of card */}
                  <div className="absolute inset-0 w-full h-full backface-hidden bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl p-6 flex items-center justify-center text-white">
                    <div className="text-center">
                      <h4 className="font-semibold text-lg mb-2">Question {index + 1}</h4>
                      <p className="text-primary-100">{card.front}</p>
                    </div>
                  </div>
                  
                  {/* Back of card */}
                  <div className="absolute inset-0 w-full h-full backface-hidden rotate-y-180 bg-white border-2 border-primary-200 rounded-xl p-6 flex items-center justify-center">
                    <div className="text-center">
                      <p className="text-gray-700 leading-relaxed">{card.back}</p>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        );

      default:
        return null;
    }
  };

  return (
    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div className="mb-8">
        <div className="flex items-center space-x-3 mb-4">
          <div className="w-12 h-12 bg-gradient-to-r from-accent-500 to-warning-500 rounded-xl flex items-center justify-center">
            <Wand2 className="w-6 h-6 text-white" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Content Transformer</h1>
            <p className="text-gray-600">Transform Wikimedia content into interactive learning materials</p>
          </div>
        </div>
      </div>

      <div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm mb-8">
        <div className="space-y-6">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Wikimedia Article URL
            </label>
            <input
              type="url"
              value={inputUrl}
              onChange={(e) => setInputUrl(e.target.value)}
              placeholder="https://en.wikipedia.org/wiki/Machine_Learning"
              className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-3">
              Transformation Type
            </label>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
              {transformationTypes.map((type) => {
                const Icon = type.icon;
                return (
                  <button
                    key={type.id}
                    onClick={() => setTransformationType(type.id)}
                    className={`p-4 rounded-xl border-2 transition-all ${
                      transformationType === type.id
                        ? 'border-primary-500 bg-primary-50'
                        : 'border-gray-200 bg-white hover:border-gray-300'
                    }`}
                  >
                    <div className="text-center">
                      <div className={`w-10 h-10 ${type.color} rounded-lg flex items-center justify-center mx-auto mb-2`}>
                        <Icon className="w-5 h-5 text-white" />
                      </div>
                      <div className="font-medium text-gray-900">{type.name}</div>
                      <div className="text-xs text-gray-500 mt-1">{type.description}</div>
                    </div>
                  </button>
                );
              })}
            </div>
          </div>

          <button
            onClick={handleTransform}
            disabled={loading || !inputUrl.trim()}
            className="w-full flex items-center justify-center space-x-2 px-6 py-4 bg-gradient-to-r from-accent-600 to-warning-600 text-white rounded-xl hover:from-accent-700 hover:to-warning-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {loading ? (
              <>
                <Loader2 className="w-5 h-5 animate-spin" />
                <span>Transforming Content...</span>
              </>
            ) : (
              <>
                <Wand2 className="w-5 h-5" />
                <span>Transform Content</span>
              </>
            )}
          </button>
        </div>
      </div>

      {transformedContent && (
        <div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
          <h2 className="text-xl font-bold text-gray-900 mb-6">{transformedContent.title}</h2>
          {renderTransformedContent()}
        </div>
      )}
    </div>
  );
};

export default ContentTransformer;