import React, { useState, useEffect } from "react" import { useFireproof } from "use-fireproof" export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("study-flashcards-cats") const [currentIndex, setCurrentIndex] = useState(0) const [showAnswer, setShowAnswer] = useState(false) const [activeView, setActiveView] = useState("subjects") const [selectedSubject, setSelectedSubject] = useState(null) const [showAwardModal, setShowAwardModal] = useState(false) const [newAward, setNewAward] = useState(null) // Matching game state const [matchingCards, setMatchingCards] = useState([]) const [selectedMatch, setSelectedMatch] = useState(null) const [matchedPairs, setMatchedPairs] = useState([]) const [matchingScore, setMatchingScore] = useState(0) // Practice test state const [testQuestions, setTestQuestions] = useState([]) const [currentTestQuestion, setCurrentTestQuestion] = useState(0) const [testAnswers, setTestAnswers] = useState({}) const [showTestResults, setShowTestResults] = useState(false) const [testScore, setTestScore] = useState(0) const { doc: newCard, merge: mergeNewCard, submit: submitNewCard } = useDocument({ type: "flashcard", question: "", answer: "", topic: "", subject: "", masteryLevel: 0, lastReviewed: null, createdAt: Date.now() }) const { docs: allCards } = useLiveQuery("type", { key: "flashcard" }) const { docs: allSessions } = useLiveQuery("type", { key: "study-session" }) const { docs: allAwards } = useLiveQuery("type", { key: "award" }) // Get subject cards - filter by selected subject const subjectCards = selectedSubject ? allCards.filter(card => card.subject === selectedSubject) : [] // Group cards by subject with stats const subjectGroups = {} allCards.forEach(card => { const subject = card.subject || "Uncategorized" if (!subjectGroups[subject]) { subjectGroups[subject] = { name: subject, cards: [], totalCards: 0, masteredCards: 0, reviewNeeded: 0 } } subjectGroups[subject].cards.push(card) subjectGroups[subject].totalCards++ if (card.masteryLevel >= 3) { subjectGroups[subject].masteredCards++ } if (card.masteryLevel < 3) { subjectGroups[subject].reviewNeeded++ } }) const subjects = Object.values(subjectGroups).sort((a, b) => b.totalCards - a.totalCards ) const currentCard = subjectCards[currentIndex] // Check for streaks and award achievements const checkForAwards = async () => { const now = Date.now() const today = new Date(now).toDateString() // Get unique study dates const studyDates = [...new Set(allSessions.map(s => s.date))].sort() // Check for 7-day streak const last7Days = [] for (let i = 0; i < 7; i++) { const date = new Date(now - (i * 24 * 60 * 60 * 1000)) last7Days.push(date.toDateString()) } const has7DayStreak = last7Days.every(date => studyDates.includes(date)) const hasWeekAward = allAwards.some(a => a.awardType === "week-streak") if (has7DayStreak && !hasWeekAward) { const award = { type: "award", awardType: "week-streak", name: "Week Warrior Cat", description: "Studied for 7 days straight!", emoji: "😻", earnedAt: now, createdAt: now } await database.put(award) setNewAward(award) setShowAwardModal(true) } // Check for 30-day streak const last30Days = [] for (let i = 0; i < 30; i++) { const date = new Date(now - (i * 24 * 60 * 60 * 1000)) last30Days.push(date.toDateString()) } const has30DayStreak = last30Days.every(date => studyDates.includes(date)) const hasMonthAward = allAwards.some(a => a.awardType === "month-streak") if (has30DayStreak && !hasMonthAward) { const award = { type: "award", awardType: "month-streak", name: "Monthly Master Cat", description: "Studied for 30 days straight!", emoji: "😸", earnedAt: now, createdAt: now } await database.put(award) setNewAward(award) setShowAwardModal(true) } // Check for 100 cards milestone const has100CardsAward = allAwards.some(a => a.awardType === "100-cards") if (allCards.length >= 100 && !has100CardsAward) { const award = { type: "award", awardType: "100-cards", name: "Century Cat", description: "Created 100 flash cards!", emoji: "🎓", earnedAt: now, createdAt: now } await database.put(award) setNewAward(award) setShowAwardModal(true) } // Check for 500 sessions milestone const has500SessionsAward = allAwards.some(a => a.awardType === "500-sessions") if (allSessions.length >= 500 && !has500SessionsAward) { const award = { type: "award", awardType: "500-sessions", name: "Dedicated Scholar Cat", description: "Completed 500 study sessions!", emoji: "🏆", earnedAt: now, createdAt: now } await database.put(award) setNewAward(award) setShowAwardModal(true) } // Check for perfect week (100% accuracy) const weekAgo = now - (7 * 24 * 60 * 60 * 1000) const weekSessions = allSessions.filter(s => s.timestamp >= weekAgo) const weekCorrect = weekSessions.filter(s => s.correct).length const hasPerfectWeekAward = allAwards.some(a => a.awardType === "perfect-week") if (weekSessions.length >= 20 && weekCorrect === weekSessions.length && !hasPerfectWeekAward) { const award = { type: "award", awardType: "perfect-week", name: "Paw-fect Week Cat", description: "100% accuracy for a week!", emoji: "🌟", earnedAt: now, createdAt: now } await database.put(award) setNewAward(award) setShowAwardModal(true) } } const recordStudySession = async (correct) => { const now = Date.now() await database.put({ type: "study-session", cardId: currentCard._id, subject: currentCard.subject, topic: currentCard.topic, correct: correct, timestamp: now, date: new Date(now).toDateString(), createdAt: now }) // Check for awards after recording session setTimeout(checkForAwards, 500) } const handleCorrect = async () => { if (currentCard) { await recordStudySession(true) await database.put({ ...currentCard, masteryLevel: Math.min(5, currentCard.masteryLevel + 1), lastReviewed: Date.now() }) nextCard() } } const handleIncorrect = async () => { if (currentCard) { await recordStudySession(false) await database.put({ ...currentCard, masteryLevel: Math.max(0, currentCard.masteryLevel - 1), lastReviewed: Date.now() }) nextCard() } } const nextCard = () => { setShowAnswer(false) setCurrentIndex((currentIndex + 1) % Math.max(1, subjectCards.length)) } const previousCard = () => { setShowAnswer(false) setCurrentIndex((currentIndex - 1 + subjectCards.length) % Math.max(1, subjectCards.length)) } const deleteCard = async (id) => { await database.del(id) if (currentIndex >= subjectCards.length - 1) { setCurrentIndex(Math.max(0, subjectCards.length - 2)) } } const startStudyMode = (subject) => { setSelectedSubject(subject) setCurrentIndex(0) setShowAnswer(false) setActiveView("study") } const startMatchingGame = () => { const cardsToMatch = subjectCards.length >= 6 ? subjectCards.slice(0, 6).map(c => ({ ...c })) : subjectCards.map(c => ({ ...c })) if (cardsToMatch.length < 3) { alert("Need at least 3 cards to play matching game!") return } const questions = cardsToMatch.map((card, idx) => ({ id: `q-${idx}`, text: card.question, type: "question", cardId: card._id, matched: false })) const answers = cardsToMatch.map((card, idx) => ({ id: `a-${idx}`, text: card.answer, type: "answer", cardId: card._id, matched: false })) const shuffled = [...questions, ...answers].sort(() => Math.random() - 0.5) setMatchingCards(shuffled) setSelectedMatch(null) setMatchedPairs([]) setMatchingScore(0) setActiveView("matching") } const handleMatchClick = (card) => { if (card.matched) return if (!selectedMatch) { setSelectedMatch(card) } else { if (selectedMatch.id === card.id) { setSelectedMatch(null) return } if (selectedMatch.cardId === card.cardId && selectedMatch.type !== card.type) { const newMatched = [...matchedPairs, selectedMatch.cardId] setMatchedPairs(newMatched) setMatchingCards(prev => prev.map(c => c.cardId === card.cardId ? { ...c, matched: true } : c )) setMatchingScore(prev => prev + 10) setSelectedMatch(null) if (newMatched.length === matchingCards.length / 2) { setTimeout(() => { alert(`🎉 Purr-fect! You matched all pairs! Score: ${matchingScore + 10}`) }, 500) } } else { setTimeout(() => { setSelectedMatch(null) }, 800) } } } const startPracticeTest = () => { const testCards = subjectCards.length >= 5 ? subjectCards.slice(0, 10).map(c => ({ ...c })) : subjectCards.map(c => ({ ...c })) if (testCards.length < 3) { alert("Need at least 3 cards to create a practice test!") return } const questions = testCards.map((card, idx) => { const wrongAnswers = subjectCards .filter(c => c._id !== card._id) .map(c => c.answer) .sort(() => Math.random() - 0.5) .slice(0, 3) const allChoices = [card.answer, ...wrongAnswers].sort(() => Math.random() - 0.5) return { id: card._id, question: card.question, correctAnswer: card.answer, choices: allChoices, subject: card.subject, topic: card.topic } }) setTestQuestions(questions) setCurrentTestQuestion(0) setTestAnswers({}) setShowTestResults(false) setTestScore(0) setActiveView("test") } const handleTestAnswer = (questionId, answer) => { setTestAnswers(prev => ({ ...prev, [questionId]: answer })) } const submitTest = () => { let correct = 0 testQuestions.forEach(q => { if (testAnswers[q.id] === q.correctAnswer) { correct++ } }) setTestScore(correct) setShowTestResults(true) } const getMasteryEmoji = (level) => { if (level >= 5) return "😻" if (level >= 4) return "😸" if (level >= 3) return "😺" if (level >= 2) return "😿" if (level >= 1) return "🙀" return "😾" } const getMasteryColor = (level) => { if (level >= 4) return "bg-[#ec4899]" if (level >= 2) return "bg-[#f9a8d4]" return "bg-[#fce7f3]" } const getMasteryText = (level) => { if (level >= 5) return "Purr-fect!" if (level >= 4) return "Cat-tastic!" if (level >= 3) return "Meow-velous!" if (level >= 2) return "Fur-midable" if (level >= 1) return "Kitten Stage" return "Cat Nap Needed" } const getSubjectEmoji = (subject) => { const lowerSubject = subject.toLowerCase() if (lowerSubject.includes("math")) return "🔢" if (lowerSubject.includes("science") || lowerSubject.includes("biology") || lowerSubject.includes("chemistry") || lowerSubject.includes("physics")) return "🔬" if (lowerSubject.includes("history")) return "📜" if (lowerSubject.includes("english") || lowerSubject.includes("literature")) return "📚" if (lowerSubject.includes("language") || lowerSubject.includes("spanish") || lowerSubject.includes("french")) return "🗣️" if (lowerSubject.includes("art")) return "🎨" if (lowerSubject.includes("music")) return "🎵" if (lowerSubject.includes("geography")) return "🌍" if (lowerSubject.includes("computer") || lowerSubject.includes("coding")) return "💻" return "📖" } const getCurrentStreak = () => { const studyDates = [...new Set(allSessions.map(s => s.date))].sort().reverse() const now = Date.now() let streak = 0 for (let i = 0; i < 365; i++) { const checkDate = new Date(now - (i * 24 * 60 * 60 * 1000)).toDateString() if (studyDates.includes(checkDate)) { streak++ } else if (i > 0) { break } } return streak } const getWeeklyStats = () => { const now = Date.now() const weekAgo = now - (7 * 24 * 60 * 60 * 1000) const weekSessions = allSessions.filter(s => s.timestamp >= weekAgo) const dailyStats = {} for (let i = 6; i >= 0; i--) { const date = new Date(now - (i * 24 * 60 * 60 * 1000)) const dateStr = date.toDateString() dailyStats[dateStr] = { correct: 0, incorrect: 0, total: 0 } } weekSessions.forEach(session => { if (dailyStats[session.date]) { dailyStats[session.date].total++ if (session.correct) { dailyStats[session.date].correct++ } else { dailyStats[session.date].incorrect++ } } }) return dailyStats } const getMonthlyStats = () => { const now = new Date() const currentMonth = now.getMonth() const currentYear = now.getFullYear() const monthSessions = allSessions.filter(s => { const sessionDate = new Date(s.timestamp) return sessionDate.getMonth() === currentMonth && sessionDate.getFullYear() === currentYear }) const subjectStats = {} monthSessions.forEach(session => { const subject = session.subject || "Uncategorized" if (!subjectStats[subject]) { subjectStats[subject] = { correct: 0, incorrect: 0, total: 0 } } subjectStats[subject].total++ if (session.correct) { subjectStats[subject].correct++ } else { subjectStats[subject].incorrect++ } }) return { total: monthSessions.length, correct: monthSessions.filter(s => s.correct).length, incorrect: monthSessions.filter(s => !s.correct).length, subjects: subjectStats } } const weeklyStats = getWeeklyStats() const monthlyStats = getMonthlyStats() const maxDailyCards = Math.max(...Object.values(weeklyStats).map(d => d.total), 1) const currentStreak = getCurrentStreak() return (

🐱

🐾

Study Cats Flash Cards 🐱

Organize by subject and earn cute cat awards!

{currentStreak > 0 && (

🔥 {currentStreak} Day Streak!

)}

{showAwardModal && newAward && (

{newAward.emoji}

{newAward.name}

{newAward.description}

)} {activeView === "subjects" && (

📚 My Subjects

{subjects.length > 0 ? (

{subjects.map(subject => (

{getSubjectEmoji(subject.name)}

{subject.name}

Total Cards: {subject.totalCards}

Mastered: {subject.masteredCards}

Need Review: {subject.reviewNeeded}

))}

) : (

😿

No subjects yet. Create your first flash card to get started!

)}

)} {activeView === "awards" && (

🏆 Cat Awards Collection

Keep studying consistently to earn adorable cat awards! Study for 7 days straight to earn the Week Warrior Cat 😻, or go for 30 days to unlock the Monthly Master Cat 😸!

Complete milestones like creating 100 cards, achieving perfect accuracy, or reaching 500 study sessions to collect more cats!

{allAwards.length > 0 ? (

{allAwards.map(award => (

{award.emoji}

{award.name}

{award.description}

Earned: {new Date(award.earnedAt).toLocaleDateString()}

))}

) : (

😺

No awards yet. Start studying to earn your first cat!

Study for 7 consecutive days to unlock your first achievement!

)}

🎯 Available Awards

😻

Week Warrior Cat

Study for 7 days straight

😸

Monthly Master Cat

Study for 30 days straight

🎓

Century Cat

Create 100 flash cards

🏆

Dedicated Scholar Cat

Complete 500 study sessions

🌟

Paw-fect Week Cat

100% accuracy for a week (minimum 20 cards)

)} {activeView === "create" && (

Create New Card

😸

{ e.preventDefault() submitNewCard() checkForAwards() setActiveView("subjects") }} className="space-y-4">

Subject 📚 mergeNewCard({ subject: e.target.value })} className="w-full border-4 border-[#ec4899] p-3 font-bold text-[#be185d]" placeholder="Math, History, Biology..." required />

Topic 🏷️ mergeNewCard({ topic: e.target.value })} className="w-full border-4 border-[#ec4899] p-3 font-bold text-[#be185d]" placeholder="Chapter 5, WWII, Photosynthesis..." />

Question 🤔

mergeNewCard({ question: e.target.value })}
                    className="w-full border-4 border-[#ec4899] p-3 font-bold text-[#be185d] min-h-[100px]"
                    placeholder="What concept are you studying?"
                    required
                  />
                </div>
                <div>
                  <label className="block font-black text-[#be185d] mb-2">Answer 💡</label>
                  <textarea
                    value={newCard.answer}
                    onChange={(e) => mergeNewCard({ answer: e.target.value })}
                    className="w-full border-4 border-[#ec4899] p-3 font-bold text-[#be185d] min-h-[100px]"
                    placeholder="The answer or explanation..."
                    required
                  />
                </div>
                
                <button
                  type="submit"
                  className="w-full bg-[#ec4899] border-4 border-[#be185d] px-6 py-4 font-black text-[#ffffff] shadow-[6px_6px_0px_0px_#be185d] active:shadow-[2px_2px_0px_0px_#be185d] active:translate-x-1 active:translate-y-1"
                >
                  🐾 Create Card
                </button>
              </form>
            </div>
          </div>
        )}

{activeView === "matching" && (
          <div className="space-y-6">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-2xl font-black text-[#be185d]">🎮 Matching Game - {selectedSubject}</h2>
              <button
                onClick={() => setActiveView("subjects")}
                className="bg-[#fbcfe8] border-4 border-[#ec4899] px-6 py-3 font-black text-[#be185d] shadow-[4px_4px_0px_0px_#ec4899] active:shadow-[2px_2px_0px_0px_#ec4899] active:translate-x-1 active:translate-y-1"
              >
                ← Back
              </button>
            </div>

<div className="bg-[#ffffff] border-4 border-[#ec4899] shadow-[8px_8px_0px_0px_#ec4899] p-6">
              <div className="flex justify-between items-center mb-6">
                <div className="text-2xl font-black text-[#ec4899]">Score: {matchingScore}</div>
              </div>
              <p className="text-[#db2777] mb-6">Match questions with their answers!</p>
              
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {matchingCards.map(card => (
                  <button
                    key={card.id}
                    onClick={() => handleMatchClick(card)}
                    disabled={card.matched}
                    className={`p-4 border-4 font-bold min-h-[120px] shadow-[4px_4px_0px_0px_#ec4899] active:shadow-[2px_2px_0px_0px_#ec4899] active:translate-x-1 active:translate-y-1 ${
                      card.matched
                        ? "bg-[#34d399] border-[#059669] text-[#0f172a] opacity-50"
                        : selectedMatch?.id === card.id
                        ? "bg-[#ec4899] border-[#be185d] text-[#ffffff]"
                        : card.type === "question"
                        ? "bg-[#fbcfe8] border-[#ec4899] text-[#be185d]"
                        : "bg-[#fce7f3] border-[#f9a8d4] text-[#be185d]"
                    }`}
                  >
                    <div className="text-xs mb-2 font-black">
                      {card.type === "question" ? "❓ Q" : "💡 A"}
                    </div>
                    <div className="text-sm break-words">{card.text}</div>
                  </button>
                ))}
              </div>

{matchedPairs.length === matchingCards.length / 2 && matchingCards.length > 0 && (
                <div className="mt-6 text-center">
                  <div className="text-6xl mb-4">😻</div>
                  <div className="text-2xl font-black text-[#be185d] mb-4">
                    Purr-fect! All pairs matched!
                  </div>
                  <button
                    onClick={startMatchingGame}
                    className="bg-[#ec4899] border-4 border-[#be185d] px-8 py-4 font-black text-[#ffffff] shadow-[6px_6px_0px_0px_#be185d] active:shadow-[2px_2px_0px_0px_#be185d] active:translate-x-1 active:translate-y-1"
                  >
                    🔄 Play Again
                  </button>
                </div>
              )}
            </div>
          </div>
        )}

{activeView === "test" && (
          <div className="space-y-6">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-2xl font-black text-[#be185d]">📝 Practice Test - {selectedSubject}</h2>
              <button
                onClick={() => setActiveView("subjects")}
                className="bg-[#fbcfe8] border-4 border-[#ec4899] px-6 py-3 font-black text-[#be185d] shadow-[4px_4px_0px_0px_#ec4899] active:shadow-[2px_2px_0px_0px_#ec4899] active:translate-x-1 active:translate-y-1"
              >
                ← Back
              </button>
            </div>

{!showTestResults ? (
                <>
                  {testQuestions.length > 0 && (
                    <div className="mb-6">
                      <div className="bg-[#fdf2f8] border-4 border-[#fbcfe8] p-6 mb-6">
                        <div className="flex gap-3 mb-4">
                          {testQuestions[currentTestQuestion].topic && (
                            <div className="inline-block bg-[#fce7f3] border-4 border-[#f9a8d4] px-3 py-1 font-bold text-[#be185d] text-sm">
                              {testQuestions[currentTestQuestion].topic}
                            </div>
                          )}
                        </div>
                        <div className="text-xl font-bold text-[#be185d]">
                          {testQuestions[currentTestQuestion].question}
                        </div>
                      </div>

<div className="space-y-4 mb-6">
                        {testQuestions[currentTestQuestion].choices.map((choice, idx) => (
                          <button
                            key={idx}
                            onClick={() => handleTestAnswer(testQuestions[currentTestQuestion].id, choice)}
                            className={`w-full p-4 border-4 font-bold text-left shadow-[4px_4px_0px_0px_#ec4899] active:shadow-[2px_2px_0px_0px_#ec4899] active:translate-x-1 active:translate-y-1 ${
                              testAnswers[testQuestions[currentTestQuestion].id] === choice
                                ? "bg-[#ec4899] border-[#be185d] text-[#ffffff]"
                                : "bg-[#ffffff] border-[#ec4899] text-[#be185d]"
                            }`}
                          >
                            {String.fromCharCode(65 + idx)}. {choice}
                          </button>
                        ))}
                      </div>

<div className="flex gap-4">
                        {currentTestQuestion > 0 && (
                          <button
                            onClick={() => setCurrentTestQuestion(prev => prev - 1)}
                            className="flex-1 bg-[#fbcfe8] border-4 border-[#ec4899] px-6 py-3 font-black text-[#be185d] shadow-[6px_6px_0px_0px_#ec4899] active:shadow-[2px_2px_0px_0px_#ec4899] active:translate-x-1 active:translate-y-1"
                          >
                            ← Previous
                          </button>
                        )}
                        {currentTestQuestion < testQuestions.length - 1 ? (
                          <button
                            onClick={() => setCurrentTestQuestion(prev => prev + 1)}
                            className="flex-1 bg-[#fbcfe8] border-4 border-[#ec4899] px-6 py-3 font-black text-[#be185d] shadow-[6px_6px_0px_0px_#ec4899] active:shadow-[2px_2px_0px_0px_#ec4899] active:translate-x-1 active:translate-y-1"
                          >
                            Next →
                          </button>
                        ) : (
                          <button
                            onClick={submitTest}
                            className="flex-1 bg-[#ec4899] border-4 border-[#be185d] px-6 py-3 font-black text-[#ffffff] shadow-[6px_6px_0px_0px_#be185d] active:shadow-[2px_2px_0px_0px_#be185d] active:translate-x-1 active:translate-y-1"
                          >
                            Submit Test
                          </button>
                        )}
                      </div>
                    </div>
                  )}

<div className="flex gap-2 flex-wrap">
                    {testQuestions.map((q, idx) => (
                      <button
                        key={q.id}
                        onClick={() => setCurrentTestQuestion(idx)}
                        className={`w-10 h-10 border-4 border-[#ec4899] font-black ${
                          currentTestQuestion === idx
                            ? "bg-[#ec4899] text-[#ffffff]"
                            : testAnswers[q.id]
                            ? "bg-[#f9a8d4] text-[#be185d]"
                            : "bg-[#ffffff] text-[#be185d]"
                        }`}
                      >
                        {idx + 1}
                      </button>
                    ))}
                  </div>
                </>
              ) : (
                <div>
                  <div className="text-center mb-8">
                    <div className="text-6xl mb-4">
                      {testScore / testQuestions.length >= 0.8 ? "😻" : testScore / testQuestions.length >= 0.6 ? "😺" : "😿"}
                    </div>
                    <div className="text-4xl font-black text-[#be185d] mb-2">
                      Score: {testScore} / {testQuestions.length}
                    </div>
                    <div className="text-2xl font-bold text-[#db2777]">
                      {Math.round((testScore / testQuestions.length) * 100)}%
                    </div>
                  </div>

<div className="space-y-4 mb-6">
                    {testQuestions.map((q, idx) => {
                      const userAnswer = testAnswers[q.id]
                      const isCorrect = userAnswer === q.correctAnswer
                      
                      return (
                        <div key={q.id} className={`border-4 p-4 ${
                          isCorrect ? "border-[#059669] bg-[#d1fae5]" : "border-[#dc2626] bg-[#fee2e2]"
                        }`}>
                          <div className="font-black text-[#0f172a] mb-2">
                            {idx + 1}. {q.question}
                          </div>
                          <div className="text-sm space-y-1">
                            <div className={`font-bold ${isCorrect ? "text-[#059669]" : "text-[#dc2626]"}`}>
                              Your answer: {userAnswer || "Not answered"}
                            </div>
                            {!isCorrect && (
                              <div className="font-bold text-[#059669]">
                                Correct answer: {q.correctAnswer}
                              </div>
                            )}
                          </div>
                        </div>
                      )
                    })}
                  </div>

<button
                    onClick={startPracticeTest}
                    className="w-full bg-[#ec4899] border-4 border-[#be185d] px-8 py-4 font-black text-[#ffffff] shadow-[6px_6px_0px_0px_#be185d] active:shadow-[2px_2px_0px_0px_#be185d] active:translate-x-1 active:translate-y-1"
                  >
                    🔄 New Practice Test
                  </button>
                </div>
              )}
            </div>
          </div>
        )}

{activeView === "study" && selectedSubject && (
          <div className="space-y-6">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-3xl font-black text-[#be185d] flex items-center gap-3">
                <span className="text-4xl">{getSubjectEmoji(selectedSubject)}</span>
                {selectedSubject}
              </h2>
              <button
                onClick={() => {
                  setActiveView("subjects")
                  setSelectedSubject(null)
                }}
                className="bg-[#fbcfe8] border-4 border-[#ec4899] px-6 py-3 font-black text-[#be185d] shadow-[4px_4px_0px_0px_#ec4899] active:shadow-[2px_2px_0px_0px_#ec4899] active:translate-x-1 active:translate-y-1"
              >
                ← Back to Subjects
              </button>
            </div>

{subjectCards.length > 0 ? (
              <div className="bg-[#ffffff] border-4 border-[#ec4899] shadow-[8px_8px_0px_0px_#ec4899] p-8">
                <div className="flex justify-between items-center mb-6">
                  <div className="flex gap-2">
                    {[...Array(5)].map((_, i) => (
                      <div
                        key={i}
                        className={`w-10 h-10 border-4 border-[#ec4899] flex items-center justify-center text-xl ${
                          i < currentCard.masteryLevel ? getMasteryColor(currentCard.masteryLevel) : "bg-[#fce7f3]"
                        }`}
                      >
                        {i < currentCard.masteryLevel ? "🐾" : ""}
                      </div>
                    ))}
                  </div>
                  <div className="text-[#db2777] font-bold flex items-center gap-2">
                    <span className="text-2xl">{getMasteryEmoji(currentCard.masteryLevel)}</span>
                    <span>{currentIndex + 1} / {subjectCards.length}</span>
                  </div>
                </div>

<div className="mb-6">
                  <div className="flex flex-wrap items-center gap-3 mb-4">
                    {currentCard.topic && (
                      <div className="inline-block bg-[#fce7f3] border-4 border-[#f9a8d4] px-4 py-2 font-bold text-[#be185d]">
                        {currentCard.topic}
                      </div>
                    )}
                    <div className="text-[#ec4899] font-black text-lg">
                      {getMasteryText(currentCard.masteryLevel)}
                    </div>
                  </div>
                  <div className="min-h-[200px] flex items-center justify-center bg-[#fdf2f8] border-4 border-[#fbcfe8] p-6 relative">
                    <div className="absolute top-2 left-2 text-2xl opacity-30">😺</div>
                    <div className="absolute bottom-2 right-2 text-2xl opacity-30">😸</div>
                    <div className="text-2xl font-bold text-[#be185d] text-center z-10">
                      {showAnswer ? currentCard.answer : currentCard.question}
                    </div>
                  </div>
                </div>

<div className="flex flex-col sm:flex-row gap-4 mb-4">
                  <button
                    onClick={() => setShowAnswer(!showAnswer)}
                    className="flex-1 bg-[#f9a8d4] border-4 border-[#ec4899] px-6 py-4 font-black text-[#be185d] shadow-[6px_6px_0px_0px_#ec4899] active:shadow-[2px_2px_0px_0px_#ec4899] active:translate-x-1 active:translate-y-1 text-lg"
                  >
                    {showAnswer ? "🙈 Hide Answer" : "😺 Show Answer"}
                  </button>
                </div>

{showAnswer && (
                  <div className="flex gap-4 mb-4">
                    <button
                      onClick={handleCorrect}
                      className="flex-1 bg-[#ec4899] border-4 border-[#be185d] px-6 py-4 font-black text-[#ffffff] shadow-[6px_6px_0px_0px_#be185d] active:shadow-[2px_2px_0px_0px_#be185d] active:translate-x-1 active:translate-y-1"
                    >
                      😻 Purr-fect!
                    </button>
                    <button
                      onClick={handleIncorrect}
                      className="flex-1 bg-[#fce7f3] border-4 border-[#ec4899] px-6 py-4 font-black text-[#be185d] shadow-[6px_6px_0px_0px_#ec4899] active:shadow-[2px_2px_0px_0px_#ec4899] active:translate-x-1 active:translate-y-1"
                    >
                      😿 Needs More Catnip
                    </button>
                  </div>
                )}

<div className="flex gap-4">
                  <button
                    onClick={previousCard}
                    className="flex-1 bg-[#fbcfe8] border-4 border-[#ec4899] px-6 py-3 font-black text-[#be185d] shadow-[6px_6px_0px_0px_#ec4899] active:shadow-[2px_2px_0px_0px_#ec4899] active:translate-x-1 active:translate-y-1"
                  >
                    ← Paw Back
                  </button>
                  <button
                    onClick={nextCard}
                    className="flex-1 bg-[#fbcfe8] border-4 border-[#ec4899] px-6 py-3 font-black text-[#be185d] shadow-[6px_6px_0px_0px_#ec4899] active:shadow-[2px_2px_0px_0px_#ec4899] active:translate-x-1 active:translate-y-1"
                  >
                    Paw Forward →
                  </button>
                  <button
                    onClick={() => deleteCard(currentCard._id)}
                    className="bg-[#fce7f3] border-4 border-[#ec4899] px-6 py-3 font-black text-[#be185d] shadow-[6px_6px_0px_0px_#ec4899] active:shadow-[2px_2px_0px_0px_#ec4899] active:translate-x-1 active:translate-y-1"
                  >
                    🗑️ Scratch
                  </button>
                </div>
              </div>
            ) : (
              <div className="bg-[#ffffff] border-4 border-[#ec4899] shadow-[8px_8px_0px_0px_#ec4899] p-12 text-center">
                <div className="text-6xl mb-4">😿</div>
                <p className="text-2xl font-bold text-[#db2777]">
                  No cards in this subject yet!
                </p>
              </div>
            )}
          </div>
        )}

{activeView === "stats" && (
          <div className="space-y-8">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-3xl font-black text-[#be185d]">📊 Progress Tracking</h2>
              <button
                onClick={() => setActiveView("subjects")}
                className="bg-[#fbcfe8] border-4 border-[#ec4899] px-6 py-3 font-black text-[#be185d] shadow-[4px_4px_0px_0px_#ec4899] active:shadow-[2px_2px_0px_0px_#ec4899] active:translate-x-1 active:translate-y-1"
              >
                ← Back to Subjects
              </button>
            </div>

<div className="bg-[#ffffff] border-4 border-[#ec4899] shadow-[8px_8px_0px_0px_#ec4899] p-6">
              <h2 className="text-2xl font-black text-[#be185d] mb-6 flex items-center gap-2">
                📅 Weekly Activity (Last 7 Days)
              </h2>
              
              <div className="grid grid-cols-7 gap-2 mb-6">
                {Object.entries(weeklyStats).map(([date, stats]) => {
                  const dateObj = new Date(date)
                  const dayName = dateObj.toLocaleDateString('en-US', { weekday: 'short' })
                  const barHeight = stats.total > 0 ? (stats.total / maxDailyCards) * 100 : 0
                  const accuracy = stats.total > 0 ? Math.round((stats.correct / stats.total) * 100) : 0
                  
                  return (
                    <div key={date} className="flex flex-col items-center">
                      <div className="text-xs font-bold text-[#be185d] mb-2">{dayName}</div>
                      <div className="w-full h-32 bg-[#fce7f3] border-4 border-[#ec4899] flex flex-col justify-end p-1 relative">
                        {stats.total > 0 ? (
                          <>
                            <div 
                              className="bg-[#ec4899] w-full transition-all"
                              style={{ height: `${barHeight}%` }}
                            />
                            <div className="absolute top-1 left-0 right-0 text-center">
                              <div className="text-xs font-black text-[#be185d]">{stats.total}</div>
                              {stats.total > 0 && (
                                <div className="text-xs font-bold text-[#db2777]">{accuracy}%</div>
                              )}
                            </div>
                          </>
                        ) : (
                          <div className="absolute inset-0 flex items-center justify-center text-2xl opacity-30">😴</div>
                        )}
                      </div>
                      <div className="text-xs text-[#64748b] mt-1">{dateObj.getDate()}</div>
                    </div>
                  )
                })}
              </div>

<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div className="bg-[#fdf2f8] border-4 border-[#fbcfe8] p-4">
                  <div className="text-3xl font-black text-[#be185d]">
                    {Object.values(weeklyStats).reduce((sum, day) => sum + day.total, 0)}
                  </div>
                  <div className="text-sm font-bold text-[#db2777]">Total Cards Studied</div>
                </div>
                <div className="bg-[#fdf2f8] border-4 border-[#fbcfe8] p-4">
                  <div className="text-3xl font-black text-[#ec4899]">
                    {Object.values(weeklyStats).reduce((sum, day) => sum + day.correct, 0)}
                  </div>
                  <div className="text-sm font-bold text-[#db2777]">Correct Answers</div>
                </div>
                <div className="bg-[#fdf2f8] border-4 border-[#fbcfe8] p-4">
                  <div className="text-3xl font-black text-[#be185d]">
                    {Object.values(weeklyStats).reduce((sum, day) => sum + day.total, 0) > 0
                      ? Math.round(
                          (Object.values(weeklyStats).reduce((sum, day) => sum + day.correct, 0) /
                            Object.values(weeklyStats).reduce((sum, day) => sum + day.total, 0)) *
                            100
                        )
                      : 0}%
                  </div>
                  <div className="text-sm font-bold text-[#db2777]">Weekly Accuracy</div>
                </div>
              </div>
            </div>

<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
                <div className="bg-[#fdf2f8] border-4 border-[#fbcfe8] p-4">
                  <div className="text-3xl font-black text-[#be185d]">{monthlyStats.total}</div>
                  <div className="text-sm font-bold text-[#db2777]">Total Cards This Month</div>
                </div>
                <div className="bg-[#fdf2f8] border-4 border-[#fbcfe8] p-4">
                  <div className="text-3xl font-black text-[#ec4899]">{monthlyStats.correct}</div>
                  <div className="text-sm font-bold text-[#db2777]">Correct Answers</div>
                </div>
                <div className="bg-[#fdf2f8] border-4 border-[#fbcfe8] p-4">
                  <div className="text-3xl font-black text-[#be185d]">
                    {monthlyStats.total > 0
                      ? Math.round((monthlyStats.correct / monthlyStats.total) * 100)
                      : 0}%
                  </div>
                  <div className="text-sm font-bold text-[#db2777]">Monthly Accuracy</div>
                </div>
              </div>

<h3 className="text-xl font-black text-[#be185d] mb-4">Performance by Subject 📚</h3>
              {Object.keys(monthlyStats.subjects).length > 0 ? (
                <div className="space-y-4">
                  {Object.entries(monthlyStats.subjects).map(([subject, stats]) => {
                    const accuracy = Math.round((stats.correct / stats.total) * 100)
                    return (
                      <div key={subject} className="bg-[#fdf2f8] border-4 border-[#fbcfe8] p-4">
                        <div className="flex justify-between items-center mb-2">
                          <div className="font-black text-[#be185d] flex items-center gap-2">
                            <span className="text-2xl">{getSubjectEmoji(subject)}</span>
                            {subject}
                          </div>
                          <div className="text-sm font-bold text-[#db2777]">
                            {stats.correct}/{stats.total} ({accuracy}%)
                          </div>
                        </div>
                        <div className="w-full h-6 bg-[#ffffff] border-4 border-[#ec4899]">
                          <div
                            className="h-full bg-[#ec4899] transition-all"
                            style={{ width: `${accuracy}%` }}
                          />
                        </div>
                        <div className="mt-2 flex gap-4 text-xs text-[#64748b]">
                          <span>✅ Correct: {stats.correct}</span>
                          <span>❌ Incorrect: {stats.incorrect}</span>
                          <span>📝 Total: {stats.total}</span>
                        </div>
                      </div>
                    )
                  })}
                </div>
              ) : (
                <div className="text-center p-8 bg-[#fdf2f8] border-4 border-[#fbcfe8]">
                  <div className="text-4xl mb-2">😿</div>
                  <p className="text-[#db2777] font-bold">No study sessions this month yet. Start studying to see your stats!</p>
                </div>
              )}
            </div>

<div className="bg-[#ffffff] border-4 border-[#ec4899] shadow-[8px_8px_0px_0px_#ec4899] p-6">
              <h2 className="text-2xl font-black text-[#be185d] mb-6 flex items-center gap-2">
                🐱 Cat Collection Progress
              </h2>
              
              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
                {[0, 1, 2, 3, 4, 5].map(level => {
                  const count = allCards.filter(c => c.masteryLevel === level).length
                  return (
                    <div key={level} className="bg-[#fdf2f8] border-4 border-[#fbcfe8] p-4 text-center">
                      <div className="text-4xl mb-2">{getMasteryEmoji(level)}</div>
                      <div className="text-2xl font-black text-[#be185d]">{count}</div>
                      <div className="text-xs font-bold text-[#db2777]">{getMasteryText(level)}</div>
                    </div>
                  )
                })}
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}</article></body></html>