feat: integrate reading plans with Bible reader

Bible Reader Integration:
- Fetch and display active reading plan progress in Bible reader
- Progress bar shows plan completion percentage when user has active plan
- Progress bar color changes to green for active plans
- Display "Plan Name Progress" with days completed below bar

Reading Plan Navigation:
- Add "Read the Bible" button to active reading plan detail page
- Button shows current/next reading selection (Day X: Book Chapter)
- Navigate directly to Bible reader with correct book and chapter
- Smart selection: current day if incomplete, next incomplete day if current is done
- Only shown for ACTIVE plans

Technical:
- Load active plans via /api/user/reading-plans endpoint
- Calculate progress from completedDays vs plan duration
- Use getCurrentReading() helper to determine next reading
- URL encoding for book names with spaces

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/[locale]/bible/reader.tsx

@@ -280,6 +280,9 @@ export default function BibleReaderNew({ initialVersion, initialBook, initialCha
   const [readingProgress, setReadingProgress] = useState<any>(null)
   const [hasLoadedInitialProgress, setHasLoadedInitialProgress] = useState(false)
 
+  // Active reading plan state
+  const [activeReadingPlan, setActiveReadingPlan] = useState<any>(null)
+
   // Page transition state
   const [isTransitioning, setIsTransitioning] = useState(false)
 
@@ -588,6 +591,33 @@ export default function BibleReaderNew({ initialVersion, initialBook, initialCha
     }
   }, [selectedVersion, debouncedVersion])
 
+  // Load active reading plan
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    const loadActiveReadingPlan = async () => {
+      if (user) {
+        const token = localStorage.getItem('authToken')
+        if (!token) return
+
+        try {
+          const response = await fetch('/api/user/reading-plans', {
+            headers: { 'Authorization': `Bearer ${token}` }
+          })
+          const data = await response.json()
+          if (data.success && data.plans) {
+            // Find the first active plan
+            const activePlan = data.plans.find((p: any) => p.status === 'ACTIVE')
+            setActiveReadingPlan(activePlan || null)
+          }
+        } catch (error) {
+          console.error('Error loading active reading plan:', error)
+        }
+      }
+    }
+    loadActiveReadingPlan()
+  }, [user])
+
   // Load reading progress when version changes
   useEffect(() => {
     // Only run on client side to avoid hydration mismatch
@@ -1501,6 +1531,16 @@ export default function BibleReaderNew({ initialVersion, initialBook, initialCha
 
   // Calculate reading progress percentage
   const calculateProgress = () => {
+    // If user has an active reading plan, show plan progress instead
+    if (activeReadingPlan) {
+      const planDuration = activeReadingPlan.plan?.duration || activeReadingPlan.targetEndDate
+        ? Math.ceil((new Date(activeReadingPlan.targetEndDate).getTime() - new Date(activeReadingPlan.startDate).getTime()) / (1000 * 60 * 60 * 24))
+        : 365
+      const completedDays = activeReadingPlan.completedDays || 0
+      return Math.min(Math.round((completedDays / planDuration) * 100), 100)
+    }
+
+    // Default: Calculate progress based on chapters read in entire Bible
     if (!books.length || !selectedBook || !selectedChapter) return 0
 
     // Find current book index and total chapters before current position
@@ -1939,7 +1979,7 @@ export default function BibleReaderNew({ initialVersion, initialBook, initialCha
         <Box sx={{ mt: 2, px: 1 }}>
           <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.5 }}>
             <Typography variant="caption" color="text.secondary">
-              Reading Progress
+              {activeReadingPlan ? `${activeReadingPlan.name} Progress` : 'Reading Progress'}
             </Typography>
             <Typography variant="caption" color="primary" sx={{ fontWeight: 'bold' }}>
               {calculateProgress()}%
@@ -1954,10 +1994,15 @@ export default function BibleReaderNew({ initialVersion, initialBook, initialCha
               backgroundColor: 'action.hover',
               '& .MuiLinearProgress-bar': {
                 borderRadius: 3,
-                backgroundColor: 'primary.main'
+                backgroundColor: activeReadingPlan ? 'success.main' : 'primary.main'
               }
             }}
           />
+          {activeReadingPlan && (
+            <Typography variant="caption" color="text.secondary" sx={{ mt: 0.5, display: 'block', fontSize: '0.65rem' }}>
+              {activeReadingPlan.completedDays} of {activeReadingPlan.plan?.duration || 'custom'} days completed
+            </Typography>
+          )}
         </Box>
       )}
     </Paper>