Update src/components/ResultView.tsx

src/components/ResultView.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Product } from '../types';
-import { RefreshCw, AlertCircle, Sparkles, ScanFace, Timer, Play } from 'lucide-react';
+import { RefreshCw, AlertCircle, Sparkles, ScanFace, Timer, Play, ChevronDown, ChevronUp, Bug } from 'lucide-react';
 
 interface ResultViewProps {
   originalImage: string;
@@ -25,6 +25,7 @@ const ResultView: React.FC<ResultViewProps> = ({
 }) => {
   const [progressStep, setProgressStep] = useState(0);
   const [timeLeft, setTimeLeft] = useState<number | null>(null);
+  const [showDetails, setShowDetails] = useState(false);
 
   useEffect(() => {
     if (loading) {
@@ -49,10 +50,10 @@ const ResultView: React.FC<ResultViewProps> = ({
   }, [retryAfter]);
 
   const loadingTexts = [
-    "Analyzing pose...",
-    "Fitting garment...",
-    "Adjusting shadows...",
-    "Finalizing..."
+    "Resizing to atomic scale...",
+    "Injecting garments...",
+    "Re-lighting scene...",
+    "Finalizing pixels..."
   ];
 
   return (
@@ -95,15 +96,15 @@ const ResultView: React.FC<ResultViewProps> = ({
                          <div className="bg-brand-500/20 p-5 rounded-full mb-6">
                             <Timer className="w-12 h-12 text-brand-400 animate-pulse" />
                          </div>
-                         <h4 className="text-2xl font-bold mb-3">AI is busy</h4>
+                         <h4 className="text-2xl font-bold mb-3">Rate Limit</h4>
                          <p className="text-slate-400 text-sm mb-8 max-w-xs">
-                             The free AI tier is at capacity. We can try again automatically in:
+                             Google's free tier allows 1 try-on every 60 seconds.
                          </p>
-                         <div className="text-5xl font-mono font-bold text-brand-400 mb-10">
+                         <div className="text-6xl font-mono font-bold text-brand-400 mb-10">
                              {timeLeft}s
                          </div>
                          <div className="flex gap-4">
-                            <button onClick={onRetake} className="px-6 py-3 bg-white/10 hover:bg-white/20 rounded-xl font-bold transition-all">Cancel</button>
+                            <button onClick={onRetake} className="px-6 py-3 bg-white/10 hover:bg-white/20 rounded-xl font-bold transition-all">Back</button>
                             <button 
                                 onClick={onRetry} 
                                 disabled={timeLeft > 0}
@@ -117,11 +118,27 @@ const ResultView: React.FC<ResultViewProps> = ({
                  )}
 
                  {error && timeLeft === null && (
-                     <div className="absolute inset-0 flex flex-col items-center justify-center p-8 text-center bg-slate-800">
-                         <AlertCircle className="w-12 h-12 text-red-500 mb-4" />
-                         <h4 className="text-white font-bold text-lg mb-2">Generation Error</h4>
-                         <p className="text-gray-400 text-sm mb-8">{error}</p>
-                         <button onClick={onRetake} className="px-8 py-3 bg-white text-black rounded-xl font-bold hover:bg-gray-100 transition-colors">Try Again</button>
+                     <div className="absolute inset-0 flex flex-col items-center justify-center p-8 text-center bg-slate-800 overflow-y-auto">
+                         <AlertCircle className="w-10 h-10 text-red-500 mb-4" />
+                         <h4 className="text-white font-bold text-lg mb-2">Service Limit Reached</h4>
+                         <p className="text-gray-400 text-sm mb-6 px-4">The free quota for this API key is currently exhausted. This usually resets in a few minutes.</p>
+                         
+                         <button 
+                            onClick={() => setShowDetails(!showDetails)}
+                            className="flex items-center gap-2 text-[10px] text-gray-500 uppercase tracking-widest mb-4 hover:text-gray-300 transition-colors"
+                         >
+                            <Bug className="w-3 h-3" />
+                            Technical Diagnostics
+                            {showDetails ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
+                         </button>
+
+                         {showDetails && (
+                             <div className="bg-black/50 p-3 rounded-lg border border-white/10 text-left mb-6 max-h-32 overflow-y-auto w-full">
+                                 <code className="text-[10px] text-red-400 break-all">{error}</code>
+                             </div>
+                         )}
+
+                         <button onClick={onRetake} className="px-8 py-3 bg-white text-black rounded-xl font-bold hover:bg-gray-100 transition-colors">Go Back</button>
                      </div>
                  )}
 
@@ -134,10 +151,10 @@ const ResultView: React.FC<ResultViewProps> = ({
                  <div className="grid grid-cols-2 gap-3 mt-2">
                      <button onClick={onRetake} className="flex items-center justify-center gap-2 py-4 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-bold transition-all">
                          <RefreshCw className="w-4 h-4" />
-                         Retake Photo
+                         New Photo
                      </button>
                      <button className="flex items-center justify-center gap-2 py-4 bg-brand-600 hover:bg-brand-700 text-white rounded-xl font-bold transition-all shadow-lg shadow-brand-200">
-                         Add to Wardrobe
+                         Save Look
                      </button>
                  </div>
              )}