import React, { useState, useEffect } from 'react';
import {
Plus,
Copy,
Trash2,
ArrowRightLeft,
Book,
ChevronLeft,
ChevronRight,
Star,
AlertCircle,
Check,
X
} from 'lucide-react';
export default function TranslationApp() {
const [passages, setPassages] = useState([]);
const [currentPassageIndex, setCurrentPassageIndex] = useState(0);
const [studentTranslation, setStudentTranslation] = useState('');
const [evaluationResult, setEvaluationResult] = useState(null);
const [isProcessing, setIsProcessing] = useState(false);
const [showAddPassage, setShowAddPassage] = useState(false);
const [newPassageText, setNewPassageText] = useState('');
const [newPassageLang, setNewPassageLang] = useState('ar');
// تحميل القطع المحفوظة عند بدء التطبيق
useEffect(() => {
loadPassages();
}, []);
const loadPassages = async () => {
try {
const result = await window.storage.get('passages');
if (result && result.value) {
const loadedPassages = JSON.parse(result.value);
setPassages(loadedPassages);
} else {
// قطع افتراضية للبدء
const defaultPassages = [
{
id: 1,
text: 'التعليم هو أساس تقدم الأمم، فهو يبني العقول ويطور المهارات. من خلال التعليم الجيد، يستطيع الإنسان أن يحقق أحلامه ويساهم في بناء مجتمعه.',
lang: 'ar',
correctTranslation: 'Education is the foundation of nations\' progress, as it builds minds and develops skills. Through good education, a person can achieve their dreams and contribute to building their society.'
},
{
id: 2,
text: 'Technology has revolutionized the way we live and work. It connects people across the globe and provides access to information at our fingertips. However, we must use it responsibly.',
lang: 'en',
correctTranslation: 'لقد أحدثت التكنولوجيا ثورة في طريقة حياتنا وعملنا. إنها تربط الناس في جميع أنحاء العالم وتوفر الوصول إلى المعلومات في متناول أيدينا. ومع ذلك، يجب علينا استخدامها بمسؤولية.'
}
];
setPassages(defaultPassages);
await window.storage.set('passages', JSON.stringify(defaultPassages));
}
} catch (error) {
console.log('تحميل القطع الافتراضية');
const defaultPassages = [
{
id: 1,
text: 'التعليم هو أساس تقدم الأمم، فهو يبني العقول ويطور المهارات. من خلال التعليم الجيد، يستطيع الإنسان أن يحقق أحلامه ويساهم في بناء مجتمعه.',
lang: 'ar',
correctTranslation: 'Education is the foundation of nations\' progress, as it builds minds and develops skills. Through good education, a person can achieve their dreams and contribute to building their society.'
},
{
id: 2,
text: 'Technology has revolutionized the way we live and work. It connects people across the globe and provides access to information at our fingertips. However, we must use it responsibly.',
lang: 'en',
correctTranslation: 'لقد أحدثت التكنولوجيا ثورة في طريقة حياتنا وعملنا. إنها تربط الناس في جميع أنحاء العالم وتوفر الوصول إلى المعلومات في متناول أيدينا. ومع ذلك، يجب علينا استخدامها بمسؤولية.'
}
];
setPassages(defaultPassages);
}
};
const savePassages = async (updatedPassages) => {
try {
await window.storage.set('passages', JSON.stringify(updatedPassages));
} catch (error) {
console.error('خطأ في حفظ القطع:', error);
}
};
const addNewPassage = async () => {
if (!newPassageText.trim()) {
alert('الرجاء كتابة نص القطعة');
return;
}
const newPassage = {
id: Date.now(),
text: newPassageText.trim(),
lang: newPassageLang,
correctTranslation: '' // يمكن للمعلم إضافتها لاحقاً
};
const updatedPassages = [...passages, newPassage];
setPassages(updatedPassages);
await savePassages(updatedPassages);
setNewPassageText('');
setShowAddPassage(false);
setCurrentPassageIndex(updatedPassages.length - 1);
};
const switchPassageLanguage = () => {
if (passages.length === 0) return;
const currentPassage = passages[currentPassageIndex];
const updatedPassage = {
...currentPassage,
lang: currentPassage.lang === 'ar' ? 'en' : 'ar'
};
const updatedPassages = [...passages];
updatedPassages[currentPassageIndex] = updatedPassage;
setPassages(updatedPassages);
savePassages(updatedPassages);
setStudentTranslation('');
setEvaluationResult(null);
};
const nextPassage = () => {
if (currentPassageIndex < passages.length - 1) {
setCurrentPassageIndex(currentPassageIndex + 1);
setStudentTranslation('');
setEvaluationResult(null);
}
};
const previousPassage = () => {
if (currentPassageIndex > 0) {
setCurrentPassageIndex(currentPassageIndex - 1);
setStudentTranslation('');
setEvaluationResult(null);
}
};
const evaluateTranslation = async () => {
if (!studentTranslation.trim()) {
alert('الرجاء كتابة الترجمة أولاً');
return;
}
setIsProcessing(true);
const currentPassage = passages[currentPassageIndex];
const sourceLang = currentPassage.lang === 'ar' ? 'Arabic' : 'English';
const targetLang = currentPassage.lang === 'ar' ? 'English' : 'Arabic';
try {
// استدعاء AI لتقييم الترجمة
const response = await fetch("https://api.anthropic.com/v1/messages", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
model: "claude-sonnet-4-20250514",
max_tokens: 2000,
messages: [
{
role: "user",
content: `You are an expert translation evaluator. Evaluate this translation carefully and provide a detailed assessment.
Original Text (${sourceLang}):
"${currentPassage.text}"
Student's Translation (${targetLang}):
"${studentTranslation}"
Please provide your response in JSON format with the following structure:
{
"score": ,
"professionalTranslation": "",
"strengths": ["", "", ...],
"weaknesses": ["", "", ...],
"suggestions": ["", "", ...],
"overallComment": ""
}
Evaluation criteria:
1. Accuracy of meaning (40 points)
2. Natural expression in target language (30 points)
3. Grammar and syntax (20 points)
4. Style and fluency (10 points)
Important: Provide a PROFESSIONAL translation, not a literal word-by-word translation. Focus on conveying the meaning naturally in the target language.
Respond ONLY with the JSON object, no additional text.`
}
]
})
});
const data = await response.json();
let aiResponse = data.content[0].text.trim();
// إزالة backticks إذا وجدت
aiResponse = aiResponse.replace(/```json\n?/g, '').replace(/```\n?/g, '').trim();
const evaluation = JSON.parse(aiResponse);
// تحويل النتائج للعربية وتنسيقها
const feedback = [];
// نقاط القوة
if (evaluation.strengths && evaluation.strengths.length > 0) {
evaluation.strengths.forEach(strength => {
feedback.push({
type: 'positive',
text: `✓ ${strength}`
});
});
}
// نقاط الضعف
if (evaluation.weaknesses && evaluation.weaknesses.length > 0) {
evaluation.weaknesses.forEach(weakness => {
feedback.push({
type: 'negative',
text: `✗ ${weakness}`
});
});
}
// الاقتراحات
if (evaluation.suggestions && evaluation.suggestions.length > 0) {
evaluation.suggestions.forEach(suggestion => {
feedback.push({
type: 'suggestion',
text: `💡 ${suggestion}`
});
});
}
// التعليق العام
if (evaluation.overallComment) {
feedback.push({
type: 'comment',
text: `📝 ${evaluation.overallComment}`
});
}
// الترجمة الاحترافية
if (evaluation.professionalTranslation) {
feedback.push({
type: 'professional',
text: evaluation.professionalTranslation
});
}
setEvaluationResult({
score: evaluation.score || 0,
feedback: feedback
});
} catch (error) {
console.error('خطأ في التقييم:', error);
alert('حدث خطأ أثناء التقييم. الرجاء المحاولة مرة أخرى.');
}
setIsProcessing(false);
};
const clearTranslation = () => {
setStudentTranslation('');
setEvaluationResult(null);
};
const currentPassage = passages[currentPassageIndex];
const isRTL = currentPassage?.lang === 'ar';
const targetLang = currentPassage?.lang === 'ar' ? 'en' : 'ar';
const isTargetRTL = targetLang === 'ar';
return (
