learning randomization

src/app/(app)/collections/[id]/page.tsx

@@ -313,32 +313,40 @@ export default function CollectionDetailPage() {
             </p>
           </div>
 
-          {canModify && (
-            <div className="flex gap-2">
-              <button
-                onClick={() => setShowAddModal(true)}
-                disabled={actionLoading}
-                className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:bg-gray-400"
-              >
-                Add Hanzi
-              </button>
-              {collection.hanziCount > 0 && (
+          <div className="flex gap-2">
+            <Link
+              href={`/learn/${collection.id}`}
+              className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 inline-block"
+            >
+              Start Learning
+            </Link>
+            {canModify && (
+              <>
                 <button
-                  onClick={() => setSelectionMode(!selectionMode)}
-                  className="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700"
+                  onClick={() => setShowAddModal(true)}
+                  disabled={actionLoading}
+                  className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:bg-gray-400"
                 >
-                  {selectionMode ? "Cancel" : "Select"}
+                  Add Hanzi
                 </button>
-              )}
-              <button
-                onClick={handleDeleteCollection}
-                disabled={actionLoading}
-                className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 disabled:bg-gray-400"
-              >
-                Delete
-              </button>
-            </div>
-          )}
+                {collection.hanziCount > 0 && (
+                  <button
+                    onClick={() => setSelectionMode(!selectionMode)}
+                    className="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700"
+                  >
+                    {selectionMode ? "Cancel" : "Select"}
+                  </button>
+                )}
+                <button
+                  onClick={handleDeleteCollection}
+                  disabled={actionLoading}
+                  className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 disabled:bg-gray-400"
+                >
+                  Delete
+                </button>
+              </>
+            )}
+          </div>
         </div>
 
         {selectionMode && selectedHanziIds.size > 0 && (

src/app/(app)/dashboard/page.tsx

@@ -132,6 +132,17 @@ export default async function DashboardPage() {
             Quick Actions
           </h3>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <Link
+              href="/learn/all"
+              className="bg-white dark:bg-gray-800 p-4 rounded-lg hover:shadow-md transition-shadow border-2 border-blue-500"
+            >
+              <h4 className="font-semibold text-gray-900 dark:text-white mb-1">
+                Start Learning
+              </h4>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                Begin a learning session with all cards
+              </p>
+            </Link>
             <Link
               href="/collections"
               className="bg-white dark:bg-gray-800 p-4 rounded-lg hover:shadow-md transition-shadow"
@@ -143,17 +154,6 @@ export default async function DashboardPage() {
                 View and manage your hanzi collections
               </p>
             </Link>
-            <Link
-              href="/collections/new"
-              className="bg-white dark:bg-gray-800 p-4 rounded-lg hover:shadow-md transition-shadow"
-            >
-              <h4 className="font-semibold text-gray-900 dark:text-white mb-1">
-                Create Collection
-              </h4>
-              <p className="text-sm text-gray-600 dark:text-gray-400">
-                Start a new hanzi collection
-              </p>
-            </Link>
             <Link
               href="/hanzi"
               className="bg-white dark:bg-gray-800 p-4 rounded-lg hover:shadow-md transition-shadow"
@@ -166,9 +166,6 @@ export default async function DashboardPage() {
               </p>
             </Link>
           </div>
-          <p className="text-sm text-blue-800 dark:text-blue-400 mt-4">
-            More features coming soon: Learning sessions, progress tracking, and more!
-          </p>
         </div>
       </main>
     </div>

src/app/(app)/learn/[collectionId]/page.tsx

@@ -0,0 +1,347 @@
+"use client"
+
+import { useState, useEffect, useCallback } from "react"
+import { useParams, useRouter } from "next/navigation"
+import { startLearningSession, submitAnswer, endSession } from "@/actions/learning"
+
+interface Card {
+  hanziId: string
+  simplified: string
+  options: string[]
+  correctPinyin: string
+  meaning: string
+}
+
+interface SessionSummary {
+  totalCards: number
+  correctCount: number
+  incorrectCount: number
+  accuracyPercent: number
+  durationMinutes: number
+}
+
+export default function LearnPage() {
+  const params = useParams()
+  const router = useRouter()
+  const collectionId = params.collectionId as string
+
+  // Session state
+  const [sessionId, setSessionId] = useState<string | null>(null)
+  const [cards, setCards] = useState<Card[]>([])
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  // Card state
+  const [selectedOption, setSelectedOption] = useState<number | null>(null)
+  const [showFeedback, setShowFeedback] = useState(false)
+  const [isCorrect, setIsCorrect] = useState(false)
+  const [answerStartTime, setAnswerStartTime] = useState<number>(Date.now())
+
+  // Summary state
+  const [showSummary, setShowSummary] = useState(false)
+  const [summary, setSummary] = useState<SessionSummary | null>(null)
+
+  const currentCard = cards[currentIndex]
+  const progress = ((currentIndex / cards.length) * 100) || 0
+
+  // Start learning session
+  useEffect(() => {
+    const startSession = async () => {
+      setLoading(true)
+      setError(null)
+
+      const collectionIdParam = collectionId === "all" ? undefined : collectionId
+
+      const result = await startLearningSession(collectionIdParam)
+
+      if (result.success && result.data) {
+        setSessionId(result.data.sessionId)
+        setCards(result.data.cards)
+        setAnswerStartTime(Date.now())
+      } else {
+        setError(result.message || "Failed to start learning session")
+      }
+
+      setLoading(false)
+    }
+
+    startSession()
+  }, [collectionId])
+
+  // Handle answer selection
+  const handleSelectAnswer = useCallback((index: number) => {
+    if (showFeedback) return // Prevent changing answer after submission
+
+    setSelectedOption(index)
+  }, [showFeedback])
+
+  // Submit answer
+  const handleSubmitAnswer = useCallback(async () => {
+    if (selectedOption === null || !currentCard || !sessionId) return
+    if (showFeedback) return // Already submitted
+
+    const selectedPinyin = currentCard.options[selectedOption]
+    const correct = selectedPinyin === currentCard.correctPinyin
+    const timeSpentMs = Date.now() - answerStartTime
+
+    setIsCorrect(correct)
+    setShowFeedback(true)
+
+    // Submit to backend
+    await submitAnswer(
+      sessionId,
+      currentCard.hanziId,
+      selectedPinyin,
+      correct,
+      timeSpentMs
+    )
+  }, [selectedOption, currentCard, sessionId, showFeedback, answerStartTime])
+
+  // Continue to next card or end session
+  const handleContinue = useCallback(async () => {
+    if (currentIndex < cards.length - 1) {
+      setCurrentIndex(prev => prev + 1)
+      setSelectedOption(null)
+      setShowFeedback(false)
+      setAnswerStartTime(Date.now())
+    } else {
+      // End session and show summary
+      if (sessionId) {
+        const result = await endSession(sessionId)
+        if (result.success && result.data) {
+          setSummary(result.data)
+        }
+      }
+      setShowSummary(true)
+    }
+  }, [currentIndex, cards.length, sessionId])
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      // Numbers 1-4 for answer selection
+      if (["1", "2", "3", "4"].includes(e.key)) {
+        const index = parseInt(e.key) - 1
+        if (index < currentCard?.options.length) {
+          if (!showFeedback) {
+            handleSelectAnswer(index)
+            // Auto-submit after selection
+            setTimeout(() => {
+              handleSubmitAnswer()
+            }, 100)
+          }
+        }
+      }
+
+      // Space to continue
+      if (e.key === " " && showFeedback) {
+        e.preventDefault()
+        handleContinue()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyPress)
+    return () => window.removeEventListener("keydown", handleKeyPress)
+  }, [currentCard, showFeedback, handleSelectAnswer, handleSubmitAnswer, handleContinue])
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600 dark:text-gray-400">Loading cards...</p>
+        </div>
+      </div>
+    )
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-md">
+          <div className="text-red-600 dark:text-red-400 text-center mb-4">
+            <svg className="w-16 h-16 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <h2 className="text-2xl font-bold text-center mb-4">No Cards Available</h2>
+          <p className="text-gray-600 dark:text-gray-400 text-center mb-6">{error}</p>
+          <button
+            onClick={() => router.push("/collections")}
+            className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-md font-medium"
+          >
+            Go to Collections
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  // Summary screen
+  if (showSummary && summary) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
+          <div className="text-center mb-6">
+            <div className="text-6xl mb-4">🎉</div>
+            <h2 className="text-3xl font-bold mb-2">Session Complete!</h2>
+            <p className="text-gray-600 dark:text-gray-400">Great work!</p>
+          </div>
+
+          <div className="space-y-4 mb-6">
+            <div className="flex justify-between items-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+              <span className="text-gray-600 dark:text-gray-400">Total Cards</span>
+              <span className="text-2xl font-bold">{summary.totalCards}</span>
+            </div>
+
+            <div className="flex justify-between items-center p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
+              <span className="text-green-600 dark:text-green-400">Correct</span>
+              <span className="text-2xl font-bold text-green-600 dark:text-green-400">{summary.correctCount}</span>
+            </div>
+
+            <div className="flex justify-between items-center p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
+              <span className="text-red-600 dark:text-red-400">Incorrect</span>
+              <span className="text-2xl font-bold text-red-600 dark:text-red-400">{summary.incorrectCount}</span>
+            </div>
+
+            <div className="flex justify-between items-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+              <span className="text-blue-600 dark:text-blue-400">Accuracy</span>
+              <span className="text-2xl font-bold text-blue-600 dark:text-blue-400">{summary.accuracyPercent}%</span>
+            </div>
+
+            <div className="flex justify-between items-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+              <span className="text-gray-600 dark:text-gray-400">Duration</span>
+              <span className="text-2xl font-bold">{summary.durationMinutes} min</span>
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            <button
+              onClick={() => window.location.reload()}
+              className="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-md font-medium"
+            >
+              Start New Session
+            </button>
+            <button
+              onClick={() => router.push("/dashboard")}
+              className="w-full py-3 px-4 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 rounded-md font-medium"
+            >
+              Back to Dashboard
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Learning card screen
+  if (!currentCard) {
+    return <div>No cards available</div>
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      {/* Progress bar */}
+      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+        <div className="max-w-4xl mx-auto px-4 py-4">
+          <div className="flex justify-between items-center mb-2">
+            <span className="text-sm text-gray-600 dark:text-gray-400">
+              Card {currentIndex + 1} of {cards.length}
+            </span>
+            <span className="text-sm font-semibold text-blue-600 dark:text-blue-400">
+              {Math.round(progress)}%
+            </span>
+          </div>
+          <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+            <div
+              className="bg-blue-600 h-2 rounded-full transition-all duration-300"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Main card area */}
+      <div className="max-w-4xl mx-auto px-4 py-12">
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 relative overflow-hidden">
+          {/* Feedback overlay */}
+          {showFeedback && (
+            <div
+              className={`absolute inset-0 flex items-center justify-center z-10 ${
+                isCorrect
+                  ? "bg-green-500/10 dark:bg-green-500/20"
+                  : "bg-red-500/10 dark:bg-red-500/20"
+              }`}
+            >
+              <div className="text-center">
+                <div className={`text-8xl mb-4 ${isCorrect ? "text-green-600" : "text-red-600"}`}>
+                  {isCorrect ? "✓" : "✗"}
+                </div>
+                <p className={`text-2xl font-bold mb-2 ${isCorrect ? "text-green-600" : "text-red-600"}`}>
+                  {isCorrect ? "Correct!" : "Incorrect"}
+                </p>
+                {!isCorrect && (
+                  <p className="text-lg text-gray-700 dark:text-gray-300">
+                    Correct answer: <span className="font-bold">{currentCard.correctPinyin}</span>
+                  </p>
+                )}
+                {currentCard.meaning && (
+                  <p className="text-lg text-gray-600 dark:text-gray-400 mt-3 italic">
+                    {currentCard.meaning}
+                  </p>
+                )}
+                <button
+                  onClick={handleContinue}
+                  className="mt-6 py-2 px-6 bg-blue-600 hover:bg-blue-700 text-white rounded-md font-medium"
+                >
+                  Continue (Space)
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Hanzi display */}
+          <div className="text-center mb-12">
+            <div className="text-9xl font-bold mb-4">{currentCard.simplified}</div>
+            <p className="text-gray-500 dark:text-gray-400">Select the correct pinyin</p>
+          </div>
+
+          {/* Answer options in 2x2 grid */}
+          <div className="grid grid-cols-2 gap-4 max-w-2xl mx-auto">
+            {currentCard.options.map((option, index) => (
+              <button
+                key={index}
+                onClick={() => {
+                  handleSelectAnswer(index)
+                  // Auto-submit after a brief delay
+                  setTimeout(() => handleSubmitAnswer(), 100)
+                }}
+                disabled={showFeedback}
+                className={`p-6 text-2xl font-medium rounded-lg transition-all ${
+                  selectedOption === index && !showFeedback
+                    ? "bg-blue-600 text-white scale-105"
+                    : showFeedback && option === currentCard.correctPinyin
+                    ? "bg-green-600 text-white"
+                    : showFeedback && selectedOption === index
+                    ? "bg-red-600 text-white"
+                    : "bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
+                } ${showFeedback ? "cursor-not-allowed" : "cursor-pointer"}`}
+              >
+                <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">{index + 1}</div>
+                {option}
+              </button>
+            ))}
+          </div>
+
+          {/* Keyboard shortcuts hint */}
+          <div className="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
+            <p>Press 1-4 to select • Space to continue</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}