From f65cb59a9cf16dcf2c91f65690df24c9e232944e Mon Sep 17 00:00:00 2001
From: kikootwo <folcards@yahoo.com>
Date: Wed, 4 Mar 2026 19:50:00 -0500
Subject: [PATCH] Display AI recommendation reason in modal

Passes aiReason from the BookDate page into AudiobookDetailsModal and updates the modal to accept an optional aiReason prop (string | null). When provided, the modal renders a titled section "Why This Was Recommended" with styled content above the details grid. This includes prop/interface changes and a default value to preserve existing behavior when no reason is available.
---
 src/app/bookdate/page.tsx                        |  1 +
 .../audiobooks/AudiobookDetailsModal.tsx         | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/src/app/bookdate/page.tsx b/src/app/bookdate/page.tsx
index f8ce055..d2c3ba9 100644
--- a/src/app/bookdate/page.tsx
+++ b/src/app/bookdate/page.tsx
@@ -415,6 +415,7 @@ export default function BookDatePage() {
             isAvailable={currentRec.isAvailable}
             requestedByUsername={currentRec.requestedByUsername}
             hideRequestActions
+            aiReason={currentRec.aiReason}
           />
         ) : null;
       })()}
diff --git a/src/components/audiobooks/AudiobookDetailsModal.tsx b/src/components/audiobooks/AudiobookDetailsModal.tsx
index ebf5df7..c6c577b 100644
--- a/src/components/audiobooks/AudiobookDetailsModal.tsx
+++ b/src/components/audiobooks/AudiobookDetailsModal.tsx
@@ -34,6 +34,7 @@ interface AudiobookDetailsModalProps {
   requestedByUsername?: string | null;
   hideRequestActions?: boolean;
   hasReportedIssue?: boolean;
+  aiReason?: string | null;
 }
 
 // Status helper
@@ -74,6 +75,7 @@ export function AudiobookDetailsModal({
   requestedByUsername = null,
   hideRequestActions = false,
   hasReportedIssue = false,
+  aiReason = null,
 }: AudiobookDetailsModalProps) {
   const { user } = useAuth();
   const { squareCovers } = usePreferences();
@@ -455,6 +457,20 @@ export function AudiobookDetailsModal({
                 </div>
               )}
 
+              {/* AI Recommendation Reasoning */}
+              {aiReason && (
+                <div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700/50">
+                  <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
+                    Why This Was Recommended
+                  </h3>
+                  <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl">
+                    <p className="text-sm text-blue-700 dark:text-blue-300 leading-relaxed">
+                      {aiReason}
+                    </p>
+                  </div>
+                </div>
+              )}
+
               {/* Details Grid */}
               <div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700/50">
                 <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">