import React, { useState, useEffect } from ‘react’;
import { initializeApp } from ‘firebase/app’;
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from ‘firebase/auth’;
import { getFirestore } from ‘firebase/firestore’;

// Icon cho nút đọc âm thanh
const SpeakerIcon = () => (

);

// Hàm tiện ích để trộn mảng
const shuffleArray = (array) => {
for (let i = array.length – 1; i > 0; i–) {
const j = Math.floor(Math.random() * (i + 1));
// Sửa lỗi: Đảm bảo cú pháp hoán đổi mảng là đúng
[array[i], array[j]] = [array[j], array[i]];
}
return array;
};

// Dữ liệu từ vựng mẫu (chỉ tập trung vào Hiragana và Katakana)
const vocabularyData = {
“Hiragana”: [
{ character: “あ”, reading: “a”, meaning: “a”, exampleWord: “あおい”, exampleReading: “aoi”, exampleMeaning: “xanh (màu)” },
{ character: “い”, reading: “i”, meaning: “i”, exampleWord: “いぬ”, exampleReading: “inu”, exampleMeaning: “chó” },
{ character: “う”, reading: “u”, meaning: “u”, exampleWord: “うみ”, exampleReading: “umi”, exampleMeaning: “biển” },
{ character: “え”, reading: “e”, meaning: “e”, exampleWord: “えき”, exampleReading: “eki”, exampleMeaning: “nhà ga” },
{ character: “お”, reading: “o”, meaning: “o”, exampleWord: “おとこ”, exampleReading: “otoko”, exampleMeaning: “đàn ông” },
{ character: “か”, reading: “ka”, meaning: “ka”, exampleWord: “かさ”, exampleReading: “kasa”, exampleMeaning: “ô (dù)” },
{ character: “き”, reading: “ki”, meaning: “ki”, exampleWord: “きょう”, exampleReading: “kyou”, exampleMeaning: “hôm nay” },
{ character: “く”, reading: “ku”, meaning: “ku”, exampleWord: “くち”, exampleReading: “kuchi”, exampleMeaning: “miệng” },
{ character: “け”, reading: “ke”, meaning: “ke”, exampleWord: “けいけん”, exampleReading: “keiken”, exampleMeaning: “kinh nghiệm” },
{ character: “こ”, reading: “ko”, meaning: “ko”, exampleWord: “こども”, exampleReading: “kodomo”, exampleMeaning: “trẻ em” },
],
“Katakana”: [
{ character: “ア”, reading: “a”, meaning: “a”, exampleWord: “アメリカ”, exampleReading: “Amerika”, exampleMeaning: “Mỹ” },
{ character: “イ”, reading: “i”, meaning: “i”, exampleWord: “イギリス”, exampleReading: “Igirisu”, exampleMeaning: “Anh” },
{ character: “ウ”, reading: “u”, meaning: “u”, exampleWord: “ウイスキー”, exampleReading: “Uisukī”, exampleMeaning: “rượu whisky” },
{ character: “エ”, reading: “e”, meaning: “e”, exampleWord: “エネルギー”, exampleReading: “Enerugī”, exampleMeaning: “năng lượng” },
{ character: “オ”, reading: “o”, meaning: “o”, exampleWord: “オレンジ”, exampleReading: “Orenji”, exampleMeaning: “cam (quả)” },
{ character: “カ”, reading: “ka”, meaning: “ka”, exampleWord: “カメラ”, exampleReading: “Kamera”, exampleMeaning: “máy ảnh” },
{ character: “キ”, reading: “ki”, meaning: “ki”, exampleWord: “キロ”, exampleReading: “Kiro”, exampleMeaning: “kilogram” },
{ character: “ク”, reading: “ku”, meaning: “ku”, exampleWord: “クリスマス”, exampleReading: “Kurisumasu”, exampleMeaning: “Giáng sinh” },
{ character: “ケ”, reading: “ke”, meaning: “ke”, exampleWord: “ケーキ”, exampleReading: “Kēki”, exampleMeaning: “bánh ngọt” },
{ character: “コ”, reading: “ko”, meaning: “ko”, exampleWord: “コーヒー”, exampleReading: “Kōhī”, exampleMeaning: “cà phê” },
],
};

const App = () => {
const [db, setDb] = useState(null);
const [auth, setAuth] = useState(null);
const [userId, setUserId] = useState(null);
const [selectedLevel, setSelectedLevel] = useState(null);
const [currentWordIndex, setCurrentWordIndex] = useState(0);
const [currentVocabularyList, setCurrentVocabularyList] = useState([]);
const [message, setMessage] = useState(”);

// Firebase Initialization
useEffect(() => {
try {
const appId = typeof __app_id !== ‘undefined’ ? __app_id : ‘default-app-id’;
const firebaseConfig = JSON.parse(typeof __firebase_config !== ‘undefined’ ? __firebase_config : ‘{}’);

if (Object.keys(firebaseConfig).length > 0) {
const app = initializeApp(firebaseConfig);
const firestoreDb = getFirestore(app);
const firebaseAuth = getAuth(app);
setDb(firestoreDb);
setAuth(firebaseAuth);

onAuthStateChanged(firebaseAuth, async (user) => {
if (user) {
setUserId(user.uid);
console.log(“Firebase user ID:”, user.uid);
} else {
// Sign in anonymously if no user is authenticated
try {
if (typeof __initial_auth_token !== ‘undefined’) {
await signInWithCustomToken(firebaseAuth, __initial_auth_token);
} else {
await signInAnonymously(firebaseAuth);
}
setUserId(firebaseAuth.currentUser?.uid || crypto.randomUUID());
console.log(“Signed in anonymously. User ID:”, firebaseAuth.currentUser?.uid);
} catch (error) {
console.error(“Error signing in anonymously:”, error);
setUserId(crypto.randomUUID()); // Fallback to random ID
}
}
});
} else {
console.warn(“Firebase config is empty. Firestore will not be initialized.”);
setUserId(crypto.randomUUID()); // Use a random ID if Firebase is not configured
}
} catch (error) {
console.error(“Error initializing Firebase:”, error);
setUserId(crypto.randomUUID()); // Fallback to random ID on error
}
}, []);

useEffect(() => {
if (selectedLevel) {
const words = vocabularyData[selectedLevel];
setCurrentVocabularyList(shuffleArray([…words])); // Shuffle words for a new session
setCurrentWordIndex(0);
}
}, [selectedLevel]);

const handleLevelSelect = (level) => {
setSelectedLevel(level);
setMessage(”); // Clear any previous messages
};

const handleNextWord = () => {
if (currentWordIndex < currentVocabularyList.length - 1) { setCurrentWordIndex(prevIndex => prevIndex + 1);
} else {
setMessage(“Bạn đã hoàn thành tất cả các chữ cái trong cấp độ này! Hãy chọn cấp độ khác hoặc bắt đầu lại.”);
}
};

const handlePreviousWord = () => {
if (currentWordIndex > 0) {
setCurrentWordIndex(prevIndex => prevIndex – 1);
} else {
setMessage(“Đây là chữ cái đầu tiên trong cấp độ này.”);
}
};

const speakText = (text) => {
if (‘speechSynthesis’ in window) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = ‘ja-JP’; // Đặt ngôn ngữ là tiếng Nhật
window.speechSynthesis.speak(utterance);
} else {
console.warn(“Trình duyệt của bạn không hỗ trợ Speech Synthesis API.”);
setMessage(“Trình duyệt của bạn không hỗ trợ tính năng đọc âm thanh.”);
}
};

const currentWord = currentVocabularyList[currentWordIndex];

return (

);
};

export default App;