From 390e979cdb3dfc70451b96937f433cfdbd97d418 Mon Sep 17 00:00:00 2001
From: Nils-Johan Gynther <nils-johan.gynther@neoleaf.se>
Date: Sun, 19 Apr 2026 20:28:04 +0200
Subject: [PATCH] feat(RecipeDetailClient): update inventory preview section
 and button labels for clarity

---
 .../app/recipes/[id]/RecipeDetailClient.tsx   | 80 ++++++++++++-------
 1 file changed, 52 insertions(+), 28 deletions(-)

diff --git a/frontend/app/recipes/[id]/RecipeDetailClient.tsx b/frontend/app/recipes/[id]/RecipeDetailClient.tsx
index 02a8aa7c..7c5502f1 100644
--- a/frontend/app/recipes/[id]/RecipeDetailClient.tsx
+++ b/frontend/app/recipes/[id]/RecipeDetailClient.tsx
@@ -254,7 +254,7 @@ export default function RecipeDetailClient({ recipe: initialRecipe }: { recipe:
               {isLiked ? '♥ Gillad' : '♡ Gilla'}
             </button>
             <button onClick={loadPreview} disabled={isPreviewing} style={btnStyle()}>
-              {isPreviewing ? 'Hämtar...' : 'Inventariegranskning'}
+              {isPreviewing ? 'Hämtar...' : '🛒 Vad behöver jag köpa?'}
             </button>
             <button onClick={() => setIsEditing(true)} style={btnStyle()}>Redigera</button>
             <button onClick={handleDelete} disabled={isDeleting} style={btnStyle('#e53e3e')}>
@@ -311,40 +311,64 @@ export default function RecipeDetailClient({ recipe: initialRecipe }: { recipe:
           </section>
         )}
 
-        {/* Inventarieförhandsgranskning */}
+        {/* Lagergranskning */}
         {(preview || previewError) && (
           <section style={{ ...sectionStyle, marginTop: '1.5rem' }}>
-            <h2 style={sectionTitle}>Inventariegranskning</h2>
+            <h2 style={sectionTitle}>🛒 Vad behöver jag köpa?</h2>
             {previewError && <p style={errorStyle}>{previewError}</p>}
             {preview && (
               <>
-                <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '1rem', fontSize: '0.9rem' }}>
-                  <span>Totalt: <strong>{preview.summary.totalIngredients}</strong></span>
-                  <span style={{ color: '#1f5f2c' }}>Räcker: <strong>{preview.summary.enoughCount}</strong></span>
-                  <span style={{ color: '#8b0000' }}>Saknas: <strong>{preview.summary.missingCount}</strong></span>
-                  {preview.summary.unitMismatchCount > 0 && (
-                    <span style={{ color: '#8a4b00' }}>Enhetskonflikt: <strong>{preview.summary.unitMismatchCount}</strong></span>
-                  )}
-                </div>
-                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: '0.5rem' }}>
-                  {preview.ingredients.map((ing) => (
-                    <li key={ing.ingredientId} style={{
-                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-                      padding: '0.5rem 0.75rem', borderRadius: '6px', border: '1px solid #eee',
-                      flexWrap: 'wrap', gap: '0.5rem',
-                    }}>
+                {/* Summerbanner */}
+                {preview.summary.canCookExactly ? (
+                  <div style={{ background: '#f0fdf4', border: '1px solid #86efac', borderRadius: '8px', padding: '0.875rem 1rem', marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '0.6rem', color: '#166534', fontWeight: 600 }}>
+                    <span style={{ fontSize: '1.3rem' }}>✅</span>
+                    <span>Du har allt hemma! Du kan laga det här receptet direkt.</span>
+                  </div>
+                ) : (
+                  <div style={{ background: '#fef2f2', border: '1px solid #fca5a5', borderRadius: '8px', padding: '0.875rem 1rem', marginBottom: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '0.75rem' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', color: '#991b1b', fontWeight: 600 }}>
+                      <span style={{ fontSize: '1.3rem' }}>🛒</span>
                       <span>
-                        <strong>{ing.productName}</strong>
-                        {' '}<span style={{ color: '#555', fontSize: '0.875rem' }}>
-                          {ing.requiredQuantity} {ing.requiredUnit}
-                          {ing.status !== 'enough' && ing.missingQuantity > 0 && (
-                            <> — saknar <strong>{ing.missingQuantity} {ing.requiredUnit}</strong></>
-                          )}
-                        </span>
+                        Du saknar {preview.summary.missingCount + preview.summary.unitMismatchCount} av {preview.summary.totalIngredients} ingredienser
                       </span>
-                      <StatusBadge status={ing.status} />
-                    </li>
-                  ))}
+                    </div>
+                    <button
+                      disabled
+                      title="Inköpslista kommer snart"
+                      style={{ padding: '0.45rem 1rem', background: '#e5e7eb', color: '#9ca3af', border: '1px solid #d1d5db', borderRadius: '6px', cursor: 'not-allowed', fontSize: '0.9rem', fontWeight: 500 }}
+                    >
+                      + Lägg till i inköpslista (kommer snart)
+                    </button>
+                  </div>
+                )}
+
+                {/* Ingredienslista med status */}
+                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: '0.4rem' }}>
+                  {preview.ingredients.map((ing) => {
+                    const rowBg = ing.status === 'enough' ? '#f0fdf4' : ing.status === 'missing' ? '#fef2f2' : '#fffbeb';
+                    const rowBorder = ing.status === 'enough' ? '#bbf7d0' : ing.status === 'missing' ? '#fca5a5' : '#fde68a';
+                    const icon = ing.status === 'enough' ? '✅' : ing.status === 'missing' ? '❌' : '⚠️';
+                    return (
+                      <li key={ing.ingredientId} style={{
+                        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+                        padding: '0.5rem 0.75rem', borderRadius: '6px',
+                        border: `1px solid ${rowBorder}`, background: rowBg,
+                        flexWrap: 'wrap', gap: '0.5rem',
+                      }}>
+                        <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                          <span>{icon}</span>
+                          <strong>{ing.productName}</strong>
+                          <span style={{ color: '#555', fontSize: '0.875rem' }}>
+                            {ing.requiredQuantity} {ing.requiredUnit}
+                            {ing.status !== 'enough' && ing.missingQuantity > 0 && (
+                              <> — saknar <strong>{ing.missingQuantity} {ing.requiredUnit}</strong></>
+                            )}
+                          </span>
+                        </span>
+                        <StatusBadge status={ing.status} />
+                      </li>
+                    );
+                  })}
                 </ul>
               </>
             )}