232 lines
11 KiB
TypeScript
232 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import { Edit2, Trash2, Volume2, Sparkles, Globe } from 'lucide-react';
|
|
|
|
interface QuestionBankCardProps {
|
|
question: any;
|
|
onEdit: () => void;
|
|
onDelete: () => void;
|
|
}
|
|
|
|
export default function QuestionBankCard({ question, onEdit, onDelete }: QuestionBankCardProps): React.JSX.Element {
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
const [audio, setAudio] = useState<HTMLAudioElement | null>(null);
|
|
const safeQuestionText: React.ReactNode =
|
|
typeof question.question_text === 'string' ? question.question_text : '';
|
|
|
|
const getQuestionTypeLabel = (type: string) => {
|
|
const labels: Record<string, string> = {
|
|
'multiple-choice': 'Opción Múltiple',
|
|
'true-false': 'Verdadero/Falso',
|
|
'short-answer': 'Respuesta Corta',
|
|
'essay': 'Ensayo',
|
|
'matching': 'Emparejamiento',
|
|
'ordering': 'Ordenar',
|
|
'fill-in-the-blanks': 'Completar',
|
|
'audio-response': 'Respuesta Audio',
|
|
'hotspot': 'Hotspot',
|
|
'code-lab': 'Código',
|
|
};
|
|
return labels[type] || type;
|
|
};
|
|
|
|
const getDifficultyColor = (difficulty?: string) => {
|
|
switch (difficulty) {
|
|
case 'easy': return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';
|
|
case 'medium': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
|
|
case 'hard': return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';
|
|
default: return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400';
|
|
}
|
|
};
|
|
|
|
const sourceBadge = (() => {
|
|
switch (question.source) {
|
|
case 'imported-mysql':
|
|
case 'sam-diagnostico':
|
|
return (
|
|
<span className="flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400">
|
|
<Globe className="w-3 h-3" /> MySQL
|
|
</span>
|
|
);
|
|
case 'imported-material':
|
|
return (
|
|
<span className="flex items-center gap-1 text-xs text-emerald-600 dark:text-emerald-400">
|
|
<Globe className="w-3 h-3" /> Materiales ZIP
|
|
</span>
|
|
);
|
|
case 'ai-generated':
|
|
return (
|
|
<span className="flex items-center gap-1 text-xs text-purple-600 dark:text-purple-400">
|
|
<Sparkles className="w-3 h-3" /> IA
|
|
</span>
|
|
);
|
|
case 'manual':
|
|
return <span className="text-xs text-gray-500 dark:text-gray-400">Manual</span>;
|
|
default:
|
|
return question.source ? (
|
|
<span className="text-xs text-gray-500 dark:text-gray-400">{question.source}</span>
|
|
) : null;
|
|
}
|
|
})();
|
|
|
|
const handlePlayAudio = () => {
|
|
if (!question.audio_url) return;
|
|
|
|
if (audio) {
|
|
audio.remove();
|
|
}
|
|
|
|
const audioEl = new Audio(question.audio_url);
|
|
audioEl.onended = () => setIsPlaying(false);
|
|
audioEl.onerror = () => {
|
|
setIsPlaying(false);
|
|
alert('Error al reproducir el audio');
|
|
};
|
|
|
|
setAudio(audioEl);
|
|
setIsPlaying(true);
|
|
audioEl.play();
|
|
};
|
|
|
|
const handleStopAudio = () => {
|
|
if (audio) {
|
|
audio.pause();
|
|
audio.currentTime = 0;
|
|
}
|
|
setIsPlaying(false);
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-lg transition-shadow">
|
|
{/* Header */}
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-2 flex-wrap">
|
|
<span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-xs font-medium rounded">
|
|
{getQuestionTypeLabel(question.question_type)}
|
|
</span>
|
|
<span className={`px-2 py-1 text-xs font-medium rounded ${getDifficultyColor(question.difficulty)}`}>
|
|
{question.difficulty || 'Medium'}
|
|
</span>
|
|
{question.skill_assessed && (
|
|
<span className="px-2 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 text-xs font-medium rounded capitalize">
|
|
📊 {question.skill_assessed}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
{question.audio_url && (
|
|
<button
|
|
onClick={isPlaying ? handleStopAudio : handlePlayAudio}
|
|
className="p-1.5 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 rounded transition-colors"
|
|
title={isPlaying ? 'Detener audio' : 'Reproducir audio'}
|
|
>
|
|
<Volume2 className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={onEdit}
|
|
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded transition-colors"
|
|
title="Editar"
|
|
>
|
|
<Edit2 className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={onDelete}
|
|
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors"
|
|
title="Eliminar"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Question Text */}
|
|
<p className="text-gray-900 dark:text-white font-medium mb-3 line-clamp-3">
|
|
{safeQuestionText as any}
|
|
</p>
|
|
|
|
{/* Matching Pairs Preview */}
|
|
{question.question_type === 'matching' && (
|
|
<div className="mb-3 space-y-2">
|
|
{(() => {
|
|
// Try to get pairs from different possible locations
|
|
let pairs = question.pairs ||
|
|
(question.correct_answer && Array.isArray(question.correct_answer) ? question.correct_answer : null) ||
|
|
(question.correct_answer && question.correct_answer.pairs ? question.correct_answer.pairs : null);
|
|
|
|
if (!Array.isArray(pairs) || pairs.length === 0) {
|
|
return <div className="text-xs text-gray-400">Sin pares definidos</div>;
|
|
}
|
|
|
|
return pairs.slice(0, 3).map((pair: any, idx: number) => (
|
|
<div key={idx} className="text-xs bg-gray-50 dark:bg-gray-700/50 p-2 rounded flex items-center gap-2">
|
|
<span className="flex-1 text-gray-700 dark:text-gray-300">{pair.left || pair[0]}</span>
|
|
<span className="text-gray-400">→</span>
|
|
<span className="flex-1 text-gray-600 dark:text-gray-400 line-clamp-1">{pair.right || pair[1]}</span>
|
|
</div>
|
|
));
|
|
})()}
|
|
{(() => {
|
|
let pairs = question.pairs ||
|
|
(question.correct_answer && Array.isArray(question.correct_answer) ? question.correct_answer : null) ||
|
|
(question.correct_answer && question.correct_answer.pairs ? question.correct_answer.pairs : null);
|
|
return Array.isArray(pairs) && pairs.length > 3 ? (
|
|
<div className="text-xs text-gray-400">+{pairs.length - 3} pares más</div>
|
|
) : null;
|
|
})()}
|
|
</div>
|
|
)}
|
|
|
|
{/* Audio Player */}
|
|
{question.audio_url && (
|
|
<div className="mb-3">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<Volume2 className="w-3 h-3 text-green-600" />
|
|
<span className="text-xs text-gray-500 dark:text-gray-400">Audio disponible</span>
|
|
</div>
|
|
<audio controls src={question.audio_url} className="w-full h-8" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Options Preview */}
|
|
{question.options && (
|
|
<div className="mb-3 space-y-1">
|
|
{Array.isArray(question.options) && question.options.slice(0, 3).map((opt: string, idx: number) => (
|
|
<div key={idx} className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-2">
|
|
<span className="w-4 h-4 rounded border border-gray-300 dark:border-gray-600 flex items-center justify-center text-[10px]">
|
|
{String.fromCharCode(65 + idx)}
|
|
</span>
|
|
<span className="line-clamp-1">{opt}</span>
|
|
</div>
|
|
))}
|
|
{Array.isArray(question.options) && question.options.length > 3 && (
|
|
<div className="text-xs text-gray-400">+{question.options.length - 3} opciones más</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Footer */}
|
|
<div className="pt-3 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xs font-medium text-gray-600 dark:text-gray-400">
|
|
{question.points} pts
|
|
</span>
|
|
{sourceBadge && <div className="flex items-center gap-1">{sourceBadge}</div>}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Usage Stats */}
|
|
{question.usage_count && question.usage_count > 0 && (
|
|
<div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
|
|
<span className="text-xs text-gray-500 dark:text-gray-400">
|
|
Usada {question.usage_count} veces
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|