import React, { useState } from ‘react’;
import { Card, CardContent, CardHeader, CardTitle } from ‘@/components/ui/card’;
import { Button } from ‘@/components/ui/button’;
import { Loader2, Upload } from ‘lucide-react’;

const PDFQuizGenerator = () => {
const [pdfText, setPdfText] = useState(”);
const [questions, setQuestions] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(”);
const [quizConfig, setQuizConfig] = useState({
numQuestions: 5,
includeMultipleChoice: true,
includeTrueFalse: true,
includeMatching: false,
difficulty: ‘mixed’
});

const handleTextInput = (e) => {
setPdfText(e.target.value);
};

const generateQuestions = async () => {
if (!pdfText.trim()) {
setError(‘Bitte fügen Sie zuerst Text ein.’);
return;
}

setIsLoading(true);
setError(”);

try {
// Hier würde die Verbindung zur OpenAI API erfolgen
// Beispielfragen für Demo
const demoQuestions = [
{
type: ‘multiple-choice’,
question: ‘Beispielfrage aus Ihrem Text?’,
options: [‘Option A’, ‘Option B’, ‘Option C’, ‘Option D’],
correctAnswer: 0
},
{
type: ‘true-false’,
question: ‘Ist diese Aussage aus dem Text korrekt?’,
correctAnswer: true
}
];

setQuestions(demoQuestions);
} catch (err) {
setError(‘Fehler bei der Fragengenerierung. Bitte versuchen Sie es erneut.’);
} finally {
setIsLoading(false);
}
};

return (
<div className=”w-full max-w-4xl mx-auto p-4″>
<Card>
<CardHeader>
<CardTitle>PDF Quiz Generator</CardTitle>
</CardHeader>
<CardContent>
<div className=”space-y-4″>
{/* Text Input */}
<div>
<label className=”block text-sm font-medium mb-2″>
Text aus PDF einfügen:
</label>
<textarea
className=”w-full h-40 p-2 border rounded-md”
value={pdfText}
onChange={handleTextInput}
placeholder=”Fügen Sie hier den Text aus Ihrem PDF ein…”
/>
</div>

{/* Quiz Configuration */}
<div className=”grid grid-cols-2 gap-4″>
<div>
<label className=”block text-sm font-medium mb-2″>
Anzahl Fragen:
</label>
<select
className=”w-full p-2 border rounded-md”
value={quizConfig.numQuestions}
onChange={(e) => setQuizConfig({
…quizConfig,
numQuestions: parseInt(e.target.value)
})}
>
{[3, 5, 10, 15, 20].map(num => (
<option key={num} value={num}>{num}</option>
))}
</select>
</div>

<div>
<label className=”block text-sm font-medium mb-2″>
Schwierigkeitsgrad:
</label>
<select
className=”w-full p-2 border rounded-md”
value={quizConfig.difficulty}
onChange={(e) => setQuizConfig({
…quizConfig,
difficulty: e.target.value
})}
>
<option value=”easy”>Einfach</option>
<option value=”medium”>Mittel</option>
<option value=”hard”>Schwierig</option>
<option value=”mixed”>Gemischt</option>
</select>
</div>
</div>

{/* Question Types */}
<div className=”space-y-2″>
<label className=”block text-sm font-medium mb-2″>
Fragetypen:
</label>
<div className=”flex gap-4″>
<label className=”flex items-center”>
<input
type=”checkbox”
checked={quizConfig.includeMultipleChoice}
onChange={(e) => setQuizConfig({
…quizConfig,
includeMultipleChoice: e.target.checked
})}
className=”mr-2″
/>
Multiple Choice
</label>
<label className=”flex items-center”>
<input
type=”checkbox”
checked={quizConfig.includeTrueFalse}
onChange={(e) => setQuizConfig({
…quizConfig,
includeTrueFalse: e.target.checked
})}
className=”mr-2″
/>
Wahr/Falsch
</label>
<label className=”flex items-center”>
<input
type=”checkbox”
checked={quizConfig.includeMatching}
onChange={(e) => setQuizConfig({
…quizConfig,
includeMatching: e.target.checked
})}
className=”mr-2″
/>
Zuordnung
</label>
</div>
</div>

{/* Generate Button */}
<Button
onClick={generateQuestions}
disabled={isLoading || !pdfText.trim()}
className=”w-full”
>
{isLoading ? (
<>
<Loader2 className=”mr-2 h-4 w-4 animate-spin” />
Generiere Fragen…
</>
) : (
<>
<Upload className=”mr-2 h-4 w-4″ />
Quiz generieren
</>
)}
</Button>

{/* Error Message */}
{error && (
<div className=”text-red-500 text-sm mt-2″>
{error}
</div>
)}

{/* Generated Questions */}
{questions.length > 0 && (
<div className=”mt-6 space-y-4″>
<h3 className=”text-lg font-medium”>Generierte Fragen:</h3>
{questions.map((q, idx) => (
<div key={idx} className=”p-4 border rounded-md”>
<p className=”font-medium mb-2″>
{idx + 1}. {q.question}
</p>
{q.type === ‘multiple-choice’ && (
<div className=”space-y-2″>
{q.options.map((option, optIdx) => (
<label key={optIdx} className=”flex items-center”>
<input
type=”radio”
name={`question-${idx}`}
className=”mr-2″
/>
{option}
</label>
))}
</div>
)}
{q.type === ‘true-false’ && (
<div className=”space-x-4″>
<label className=”inline-flex items-center”>
<input
type=”radio”
name={`question-${idx}`}
className=”mr-2″
/>
Wahr
</label>
<label className=”inline-flex items-center”>
<input
type=”radio”
name={`question-${idx}`}
className=”mr-2″
/>
Falsch
</label>
</div>
)}
</div>
))}
</div>
)}
</div>
</CardContent>
</Card>
</div>
);
};

export default PDFQuizGenerator;