import os
import cv2
import numpy as np
from ultralytics import YOLO
from sahi import AutoDetectionModel
from sahi.predict import get_sliced_prediction
import easyocr
from sklearn.cluster import DBSCAN
from PIL import Image
import json
import tempfile
import shutil
import base64
import io
import gradio as gr
import sys
import torch
import openai
import google.generativeai as genai
from dotenv import load_dotenv

# Fix for gradio-client schema generation bug
# This patches the TypeError: argument of type 'bool' is not iterable
# and APIInfoParseError: Cannot parse schema True
try:
    from gradio_client import utils as gradio_client_utils
    
    # Patch get_type to handle boolean schemas
    original_get_type = gradio_client_utils.get_type
    
    def patched_get_type(schema):
        # Handle case where schema is a boolean instead of dict
        if isinstance(schema, bool):
            return "bool"
        return original_get_type(schema)
    
    gradio_client_utils.get_type = patched_get_type
    
    # Patch _json_schema_to_python_type to handle boolean additionalProperties
    original_json_schema_to_python_type = gradio_client_utils._json_schema_to_python_type
    
    def patched_json_schema_to_python_type(schema, defs=None):
        # Handle case where schema itself is a boolean
        if isinstance(schema, bool):
            return "bool"
        # Handle case where additionalProperties is a boolean
        if isinstance(schema, dict) and 'additionalProperties' in schema:
            if isinstance(schema['additionalProperties'], bool):
                # If additionalProperties is True, it means any additional properties are allowed
                # Return a generic dict type
                return "dict"
        return original_json_schema_to_python_type(schema, defs)
    
    gradio_client_utils._json_schema_to_python_type = patched_json_schema_to_python_type
    print("✅ Applied gradio-client schema generation fix (comprehensive)")
except Exception as e:
    print(f"⚠️ Could not apply gradio-client fix: {e}")
    import traceback
    traceback.print_exc()

# Force UTF-8 encoding
try: sys.stdout.reconfigure(encoding='utf-8')
except: pass

# Check if running on Hugging Face Spaces
is_spaces_env = os.getenv('SPACE_ID') or os.getenv('SYSTEM') == 'spaces' or os.path.exists('/.dockerenv')

# Load environment variables
# Note: Don't use load_dotenv() on Spaces as it might interfere with HF secrets
if not is_spaces_env:
    load_dotenv()  # Only load .env file locally

# --- Configuration (Simulating Colab Secrets) ---
# Try multiple possible environment variable names
OPENAI_API_KEY = os.getenv('OPENAI_API_KEY') or os.getenv('OPENAI_KEY')
GEMINI_API_KEY = os.getenv('GEMINI_API_KEY') or os.getenv('GEMINI_KEY')
HF_TOKEN = os.getenv('HF_TOKEN')

# Strip whitespace if keys exist
if OPENAI_API_KEY:
    OPENAI_API_KEY = OPENAI_API_KEY.strip()
if GEMINI_API_KEY:
    GEMINI_API_KEY = GEMINI_API_KEY.strip()

# Validate API keys - OpenAI keys start with "sk-", Gemini keys start with "AIza"
if OPENAI_API_KEY and not OPENAI_API_KEY.startswith('sk-'):
    if OPENAI_API_KEY.startswith('AIza'):
        print("⚠️ WARNING: OPENAI_API_KEY appears to be a Gemini API key (starts with 'AIza')")
        print("   → OpenAI API keys should start with 'sk-'")
        print("   → Please get your OpenAI API key from: https://platform.openai.com/account/api-keys")
        print("   → For now, OPENAI_API_KEY will be ignored. Using Gemini only.")
        OPENAI_API_KEY = None  # Clear invalid key
    else:
        print(f"⚠️ WARNING: OPENAI_API_KEY format looks incorrect (should start with 'sk-')")
        print(f"   → Current key starts with: {OPENAI_API_KEY[:5]}...")
        print("   → Please verify your OpenAI API key at: https://platform.openai.com/account/api-keys")
        OPENAI_API_KEY = None  # Clear invalid key

# Validate API keys - OpenAI keys start with "sk-", Gemini keys start with "AIza"
if OPENAI_API_KEY and not OPENAI_API_KEY.startswith('sk-'):
    if OPENAI_API_KEY.startswith('AIza'):
        print("⚠️ WARNING: OPENAI_API_KEY appears to be a Gemini API key (starts with 'AIza')")
        print("   → OpenAI API keys should start with 'sk-'")
        print("   → Please get your OpenAI API key from: https://platform.openai.com/account/api-keys")
        print("   → For now, OPENAI_API_KEY will be ignored. Using Gemini only.")
        OPENAI_API_KEY = None  # Clear invalid key
    else:
        print(f"⚠️ WARNING: OPENAI_API_KEY format looks incorrect (should start with 'sk-')")
        OPENAI_API_KEY = None  # Clear invalid key

# Debug: Print API key status (without showing actual keys)
print("=" * 60)
print("🔑 API Keys Status Check (Startup):")
print(f"OPENAI_API_KEY: {'✅ Found' if OPENAI_API_KEY else '❌ Not Found'}")
print(f"GEMINI_API_KEY: {'✅ Found' if GEMINI_API_KEY else '❌ Not Found'}")
if OPENAI_API_KEY:
    print(f"  OpenAI Key Length: {len(OPENAI_API_KEY)} characters")
    print(f"  Preview: {OPENAI_API_KEY[:10]}...{OPENAI_API_KEY[-5:]}")
if GEMINI_API_KEY:
    print(f"  Gemini Key Length: {len(GEMINI_API_KEY)} characters")
    print(f"  Preview: {GEMINI_API_KEY[:10]}...{GEMINI_API_KEY[-5:]}")

# Debug: List all environment variables containing API/KEY
if is_spaces_env:
    print("\n🔍 All Environment Variables with 'API' or 'KEY':")
    api_env_vars = {k: v for k, v in os.environ.items() if 'API' in k.upper() or 'KEY' in k.upper()}
    if api_env_vars:
        for key in sorted(api_env_vars.keys()):
            val = api_env_vars[key]
            print(f"  {key}: {'*' * min(20, len(val))} (length: {len(val)})")
    else:
        print("  ⚠️ No environment variables found with 'API' or 'KEY' in name!")
        print("  → Make sure secrets are named EXACTLY: OPENAI_API_KEY and GEMINI_API_KEY")
        print("  → Go to Space Settings → Secrets to verify")
        print("  → **RESTART THE SPACE** after adding secrets")

print("=" * 60)

print(f"Device available: {'cuda:0' if torch.cuda.is_available() else 'cpu'}")

class GodModeDetector:
    def __init__(self, model_path):
        print("Loading YOLO + SAHI...")
        
        # Check if model file exists and is valid
        if not os.path.exists(model_path):
            raise FileNotFoundError(f"Model file not found: {model_path}")
        
        # Check file size (should be at least 1MB for a valid model)
        file_size = os.path.getsize(model_path)
        print(f"Model file size: {file_size / (1024*1024):.2f} MB")
        
        if file_size < 1024 * 1024:  # Less than 1MB is suspicious
            raise ValueError(f"Model file too small ({file_size} bytes). File might be corrupted or incomplete.")
        
        # Check if file starts with valid PyTorch magic bytes
        with open(model_path, 'rb') as f:
            first_bytes = f.read(4)
            # PyTorch files typically start with specific bytes
            if first_bytes[:2] != b'PK':  # ZIP format (PyTorch models are ZIP archives)
                print(f"⚠️ Warning: File doesn't appear to be a valid PyTorch model (first bytes: {first_bytes.hex()})")
        
        # Local adaptation: Auto-select device to prevent crash
        device = 'cuda:0' if torch.cuda.is_available() else 'cpu'
        
        try:
            self.yolo = AutoDetectionModel.from_pretrained(
                model_type='yolov8', model_path=model_path, 
                confidence_threshold=0.2, device=device
            )
            print("✅ YOLO model loaded successfully")
        except Exception as e:
            error_msg = f"Failed to load YOLO model from {model_path}.\n"
            error_msg += f"Error: {str(e)}\n\n"
            error_msg += "Possible causes:\n"
            error_msg += "1. Model file is corrupted or incomplete\n"
            error_msg += "2. Model file is not a valid PyTorch .pt file\n"
            error_msg += "3. File upload was incomplete\n\n"
            error_msg += "Solution: Re-upload the best.pt file to your Space."
            raise RuntimeError(error_msg) from e
        print("Loading EasyOCR...")
        # Local adaptation: Auto-select GPU
        self.ocr = easyocr.Reader(['en'], gpu=torch.cuda.is_available())
    
    def enhance_image(self, image):
        """CLAHE: Contrast Limited Adaptive Histogram Equalization"""
        if len(image.shape) == 3:
            lab = cv2.cvtColor(image, cv2.COLOR_BGR2LAB)
            l, a, b = cv2.split(lab)
            clahe = cv2.createCLAHE(clipLimit=2.0, tileGridSize=(8,8))
            l = clahe.apply(l)
            enhanced = cv2.merge([l, a, b])
            return cv2.cvtColor(enhanced, cv2.COLOR_LAB2BGR)
        return image

    def merge_paragraphs(self, text_detections, eps=30, min_samples=2):
        """DBSCAN: Merges fragmented text into paragraphs"""
        if len(text_detections) < 2: return text_detections
        
        centroids = [[(d['bbox'][0]+d['bbox'][2])/2, (d['bbox'][1]+d['bbox'][3])/2] for d in text_detections]
        clustering = DBSCAN(eps=eps, min_samples=min_samples).fit(centroids)
        
        merged = []
        for label in set(clustering.labels_):
            if label == -1: # Noise
                for i, l in enumerate(clustering.labels_):
                    if l == -1: merged.append(text_detections[i])
            else:
                cluster_texts = [text_detections[i] for i, l in enumerate(clustering.labels_) if l == label]
                x1 = min([t['bbox'][0] for t in cluster_texts])
                y1 = min([t['bbox'][1] for t in cluster_texts])
                x2 = max([t['bbox'][2] for t in cluster_texts])
                y2 = max([t['bbox'][3] for t in cluster_texts])
                text = " ".join([t['text'] for t in cluster_texts])
                merged.append({'class': 'paragraph', 'text': text, 'bbox': [x1, y1, x2, y2]})
        return merged

    def add_cognition(self, detections, img_w, img_h):
        """Cognition Engine: Adds Size, Shape, Position logic"""
        for det in detections:
            x1, y1, x2, y2 = det['bbox']
            w, h = x2-x1, y2-y1
            area = w * h
            
            # Size
            if area > (img_w * img_h * 0.3): det['size'] = "Large Container"
            elif area > (img_w * img_h * 0.05): det['size'] = "Medium Element"
            else: det['size'] = "Small/Icon"
            
            # Shape
            ratio = w / h if h > 0 else 1
            if 0.9 <= ratio <= 1.1: det['shape'] = "Square"
            elif ratio > 2: det['shape'] = "Wide Rectangle"
            else: det['shape'] = "Rectangle"
            
            # Position
            cx, cy = (x1+x2)/2, (y1+y2)/2
            det['position'] = "Top" if cy < img_h*0.33 else "Bottom" if cy > img_h*0.66 else "Middle"
            det['position'] += " Left" if cx < img_w*0.33 else " Right" if cx > img_w*0.66 else " Center"
        return detections

    def detect(self, img_path):
        img = cv2.imread(img_path)
        img = self.enhance_image(img) # CLAHE
        h, w = img.shape[:2]
        
        # 1. YOLO + SAHI
        res = get_sliced_prediction(img, self.yolo, slice_height=640, slice_width=640, overlap_height_ratio=0.2, overlap_width_ratio=0.2)
        dets = [{'class': p.category.name, 'bbox': [int(p.bbox.minx), int(p.bbox.miny), int(p.bbox.maxx), int(p.bbox.maxy)]} for p in res.object_prediction_list]
        
        # 2. OCR
        text_dets = []
        for bbox, text, conf in self.ocr.readtext(img):
            x = [p[0] for p in bbox]; y = [p[1] for p in bbox]
            text_dets.append({'class': 'text', 'text': text, 'bbox': [int(min(x)), int(min(y)), int(max(x)), int(max(y))]})
            
        # 3. DBSCAN Merging
        merged_text = self.merge_paragraphs(text_dets)
        
        # 4. Combine & Cognition
        all_dets = dets + merged_text
        final_dets = self.add_cognition(all_dets, w, h)
        
        return final_dets

    def visualize(self, img_path, dets):
        img = cv2.imread(img_path)
        for d in dets:
            color = (0,255,0) if d.get('class') == 'paragraph' else (255,0,0)
            cv2.rectangle(img, (d['bbox'][0], d['bbox'][1]), (d['bbox'][2], d['bbox'][3]), color, 2)
        return cv2.cvtColor(img, cv2.COLOR_BGR2RGB)

class GodModeGenerator:
    def __init__(self):
        # Check OpenAI first - if available, prefer it over Gemini
        # User can set prefer_gemini = False to use OpenAI directly
        self.use_openai = False
        self.prefer_gemini = False  # Changed to False - use OpenAI if available
        
        # Check for OpenAI key (try multiple sources)
        openai_key = OPENAI_API_KEY or os.getenv('OPENAI_API_KEY') or os.getenv('OPENAI_KEY')
        if openai_key:
            openai_key = openai_key.strip()
            if len(openai_key) >= 10:  # Valid key length
                try:
                    self.openai_available = True
                    self.client = openai.OpenAI(api_key=openai_key)
                    print(f"✅ OpenAI initialized (key length: {len(openai_key)})")
                except Exception as e:
                    print(f"❌ OpenAI initialization failed: {e}")
                    self.openai_available = False
            else:
                print(f"⚠️ OpenAI key too short ({len(openai_key)} chars), ignoring")
                self.openai_available = False
        else:
            self.openai_available = False
            print("❌ OpenAI key not found at initialization")
        
        # Fallback Gemini setup
        self.models_to_try = []
        try:
            if GEMINI_API_KEY: genai.configure(api_key=GEMINI_API_KEY)
            
            available = [m.name.replace("models/", "") for m in genai.list_models()]
            # Priority: gemini-1.5-flash has the BEST free tier limits (60 requests/minute)
            # STRICTLY avoid ALL experimental models (exp, pro-exp, etc.)
            priority = [
                "gemini-1.5-flash",  # BEST free tier: 60 req/min, 1500 req/day
                "gemini-1.5-pro",   # Good free tier: 2 req/min, 50 req/day
            ]
            # STRICT filtering: Only add stable models, EXCLUDE all experimental ones
            for p in priority:
                if p in available:
                    # Double check: no "exp" anywhere in name
                    if "exp" not in p.lower() and "experimental" not in p.lower():
                        self.models_to_try.append(p)
            if not self.models_to_try: 
                self.models_to_try = ["gemini-1.5-flash"]
            
            # If OpenAI is available, we can skip Gemini on quota errors
            print(f"Available Gemini models to try: {self.models_to_try}")
            if self.openai_available:
                print("✅ OpenAI available as fallback if Gemini quota exceeded")
            
            print(f"Available Gemini models to try: {self.models_to_try}")
        except: 
            self.models_to_try = ["gemini-1.5-flash"]

    def encode_image(self, image_path):
        with open(image_path, "rb") as image_file:
            return base64.b64encode(image_file.read()).decode('utf-8')

    def generate(self, img_path, dets, fw):
        # Declare global variables at the start of function
        global GEMINI_API_KEY
        
        print(f"Starting Generation for {fw}...")
        
        # Re-check API keys at runtime (in case they were added after app start)
        # Try multiple methods to get keys
        current_openai_key = os.getenv('OPENAI_API_KEY') or os.getenv('OPENAI_KEY') or OPENAI_API_KEY
        current_gemini_key = os.getenv('GEMINI_API_KEY') or os.getenv('GEMINI_KEY') or GEMINI_API_KEY
        
        # Strip whitespace if keys exist
        if current_openai_key:
            current_openai_key = current_openai_key.strip()
        if current_gemini_key:
            current_gemini_key = current_gemini_key.strip()
        
        # Filter out empty strings
        if current_openai_key and len(current_openai_key) < 10:
            current_openai_key = None
        if current_gemini_key and len(current_gemini_key) < 10:
            current_gemini_key = None
        
        print(f"🔍 Runtime API Key Check:")
        print(f"  OPENAI_API_KEY: {'✅ Found' if current_openai_key else '❌ Not Found'}")
        if current_openai_key:
            print(f"    Length: {len(current_openai_key)} chars")
            print(f"    Preview: {current_openai_key[:10]}...{current_openai_key[-5:]}")
        print(f"  GEMINI_API_KEY: {'✅ Found' if current_gemini_key else '❌ Not Found'}")
        if current_gemini_key:
            print(f"    Length: {len(current_gemini_key)} chars")
            print(f"    Preview: {current_gemini_key[:10]}...{current_gemini_key[-5:]}")
        
        # Also check self.openai_available (from initialization)
        print(f"  self.openai_available: {self.openai_available}")
        print(f"  Global OPENAI_API_KEY: {'✅' if OPENAI_API_KEY else '❌'}")
        print(f"  Global GEMINI_API_KEY: {'✅' if GEMINI_API_KEY else '❌'}")
        
        # Update availability if keys are now present
        openai_available_now = bool(current_openai_key) or self.openai_available
        gemini_available_now = bool(current_gemini_key) or bool(GEMINI_API_KEY)
        
        if current_openai_key and not self.openai_available:
            print("🔄 OpenAI key detected at runtime, initializing...")
            try:
                self.openai_available = True
                self.client = openai.OpenAI(api_key=current_openai_key)
                print("✅ OpenAI client initialized successfully")
            except Exception as e:
                print(f"❌ Failed to initialize OpenAI client: {e}")
                openai_available_now = False
        
        if current_gemini_key:
            if not GEMINI_API_KEY:
                print("🔄 Gemini key detected at runtime...")
                try:
                    genai.configure(api_key=current_gemini_key)
                    print("✅ Gemini configured successfully")
                except Exception as e:
                    print(f"❌ Failed to configure Gemini: {e}")
            # Update global variable for this session
            GEMINI_API_KEY = current_gemini_key
        
        # Final check - use the best available option
        print(f"\n📊 Final API Availability:")
        print(f"  OpenAI: {openai_available_now} (self.openai_available: {self.openai_available})")
        print(f"  Gemini: {gemini_available_now} (GEMINI_API_KEY: {bool(GEMINI_API_KEY)})")
        
        # Check if API keys are available (use current runtime values)
        if not openai_available_now and not gemini_available_now:
            error_msg = "❌ No API keys found!\n\n"
            error_msg += "🔍 Debugging Info:\n"
            error_msg += f"- OPENAI_API_KEY: {'✅ Found' if current_openai_key else '❌ Not Found'}\n"
            error_msg += f"- GEMINI_API_KEY: {'✅ Found' if current_gemini_key else '❌ Not Found'}\n\n"
            error_msg += "💡 Solutions:\n"
            error_msg += "1. Go to Space Settings → Secrets\n"
            error_msg += "2. Verify keys are named EXACTLY: OPENAI_API_KEY and GEMINI_API_KEY\n"
            error_msg += "3. Make sure keys don't have extra spaces\n"
            error_msg += "4. **RESTART THE SPACE** after adding secrets (Settings → Restart this Space)\n"
            error_msg += "5. Check Logs tab to see if keys are detected at startup\n\n"
            error_msg += "📝 Note: After adding secrets, you MUST restart the Space for them to load!"
            return {"error": error_msg}
        
        # Track which API was used
        self.api_used = None
        
        # Construct Ultimate Prompt
        prompt = f"""
        You are a **World-Class Senior Full-Stack Engineer**. 
        Convert this UI Image and JSON detections into **100% Complete, Pixel-Perfect, Fully Interactive {fw} Code**.

        ### 🔴 CRITICAL - FRAMEWORK REQUIREMENT:
        **SELECTED FRAMEWORK: {fw}**
        
        You MUST generate code ONLY for {fw}. Do NOT mix frameworks.
        
        **IF SELECTED = "HTML/CSS":**
        - Generate: `index.html`, `style.css`, `script.js`
        - Use: Vanilla JavaScript, FontAwesome icons
        - NO React, NO Vue, NO other frameworks
        
        **IF SELECTED = "React":**
        - Generate: ONLY React components (`src/components/*.jsx` files)
        - DO NOT generate: package.json, App.jsx, public/index.html, or any other project files
        - Use: React hooks, lucide-react icons, Tailwind CSS classes
        - MANDATORY: Use Tailwind CSS utility classes ONLY (NO separate CSS files, NO inline styles)
        - All styling MUST be done with Tailwind classes like: `className="flex items-center justify-between p-4 bg-white rounded-lg shadow-md"`
        - NO vanilla HTML files with `<script>` tags
        
        **IF SELECTED = "Vue":**
        - Generate: `package.json`, `src/App.vue`, `src/components/*.vue`
        - Use: Vue composition API, Vue icons
        
        **IF SELECTED = "Angular":**
        - Generate: `package.json`, `src/app/app.component.ts`, `src/app/app.component.html`, `src/app/app.component.css`
        - Use: Angular components, Angular Material icons
        
        **IF SELECTED = "Flutter":**
        - Generate: `pubspec.yaml`, `lib/main.dart`, `lib/screens/*.dart`, `lib/widgets/*.dart`
        - Use: Flutter widgets, Material icons
        
        **IF SELECTED = "Next.js":**
        - Generate: `package.json`, `pages/index.js`, `components/*.jsx`, `styles/globals.css`
        - Use: Next.js pages, lucide-react icons
        
        **IF SELECTED = "Svelte":**
        - Generate: `package.json`, `src/App.svelte`, `src/components/*.svelte`
        - Use: Svelte reactive syntax
        
        **IF SELECTED = "SolidJS":**
        - Generate: `package.json`, `src/App.jsx`, `src/components/*.jsx`
        - Use: Solid.js reactive primitives

        ### ⚠️ CRITICAL REQUIREMENT - CLICKABILITY:
        **ABSOLUTELY MANDATORY:** EVERY interactive element MUST have a working click handler. NO EXCEPTIONS.
        
        ### 🎯 CLICKABILITY IMPLEMENTATION BY FRAMEWORK:
        
        **FOR HTML/CSS/JavaScript:**
        ```html
        <!-- Button Example -->
        <button onclick="handleLogin()" class="btn-primary">Login</button>
        
        <!-- Text Link Example -->
        <a href="#" onclick="showForgotPassword(); return false;">Forgot Password?</a>
        
        <!-- Icon Example -->
        <i class="fa-solid fa-bell" onclick="showNotifications()" style="cursor: pointer;"></i>
        
        <!-- Card Example -->
        <div class="card" onclick="openDetails(1)" style="cursor: pointer;">
            <h3>Product Title</h3>
        </div>
        ```
        
        **JavaScript MUST include all handlers:**
        ```javascript
        function handleLogin() {{
            document.getElementById('loginBtn').innerHTML = 'Loading...';
            setTimeout(() => {{
                alert('Login Successful!');
                window.location.href = '#dashboard';
            }}, 1500);
        }}
        
        function showForgotPassword() {{
            document.getElementById('forgotModal').style.display = 'block';
        }}
        
        function showNotifications() {{
            alert('Notifications clicked');
        }}
        
        function openDetails(id) {{
            alert('Opening details for item ' + id);
        }}
        ```
        
        **FOR REACT (Tailwind CSS ONLY):**
        ```jsx
        import {{ useState }} from 'react';
        import {{ Bell, Menu, User, Heart }} from 'lucide-react';
        
        export default function LoginComponent() {{
            const [isLoggedIn, setIsLoggedIn] = useState(false);
            const [showModal, setShowModal] = useState(false);
            
            const handleLogin = () => {{
                setIsLoading(true);
                setTimeout(() => {{
                    setIsLoggedIn(true);
                    alert('Login Successful!');
                }}, 1500);
            }};
            
            return (
                <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 p-6">
                    {{/* Button with handler - Tailwind classes only */}}
                    <button 
                        onClick={{handleLogin}}
                        className="px-6 py-3 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 transition-colors cursor-pointer shadow-md hover:shadow-lg"
                    >
                        Login
                    </button>
                    
                    {{/* Icon with handler - Tailwind classes only */}}
                    <button 
                        onClick={{() => alert('Notifications')}}
                        className="p-2 hover:bg-gray-100 rounded-full transition-colors cursor-pointer"
                    >
                        <Bell size={{20}} className="text-gray-700" />
                    </button>
                    
                    {{/* Text link with handler - Tailwind classes only */}}
                    <span 
                        onClick={{() => setShowModal(true)}} 
                        className="text-blue-500 hover:text-blue-600 cursor-pointer underline text-sm font-medium"
                    >
                        Forgot Password?
                    </span>
                    
                    {{/* Card with handler - Tailwind classes only */}}
                    <div 
                        onClick={{() => alert('Card clicked')}} 
                        className="p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow cursor-pointer border border-gray-200"
                    >
                        <h3 className="text-lg font-semibold text-gray-800">Product Title</h3>
                    </div>
                </div>
            );
        }}
        ```

        ### 🎯 MANDATORY CLICKABILITY CHECKLIST:
        Go through EVERY element and ask:
        
        1. ✅ **Is it a button?** → Add `onclick` (HTML) or `onClick` (React) handler
        2. ✅ **Is it text that looks like a link?** → Wrap in clickable element with handler
        3. ✅ **Is it an icon?** → Wrap in button or add click handler with `cursor: pointer`
        4. ✅ **Is it a card/list item?** → Add click handler to open details
        5. ✅ **Is it a profile picture?** → Add click handler
        6. ✅ **Is it ANY navigation element?** → Add handler to switch views
        
        **IF ANY ELEMENT COULD POSSIBLY BE CLICKED, IT MUST HAVE A HANDLER.**

        ### 🎨 ICONS (WITH CLICK HANDLERS) - CRITICAL:
        
        **⚠️ MANDATORY: Every icon MUST be visible and properly loaded. Use these EXACT implementations:**
        
        **HTML/CSS - FontAwesome 6.4.0 (MUST USE CDN):**
        ```html
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>App</title>
            <!-- CRITICAL: FontAwesome CDN - MUST BE IN <head> -->
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        </head>
        <body>
            <!-- Every icon MUST be clickable and use fa-solid class -->
            <button onclick="toggleMenu()" class="icon-btn" style="cursor: pointer; border: none; background: transparent; padding: 8px;">
                <i class="fa-solid fa-bars" style="font-size: 20px; color: #333;"></i>
            </button>
            
            <button onclick="showProfile()" class="icon-btn" style="cursor: pointer; border: none; background: transparent; padding: 8px;">
                <i class="fa-solid fa-user" style="font-size: 20px; color: #333;"></i>
            </button>
            
            <button onclick="showNotifications()" style="cursor: pointer; border: none; background: transparent; padding: 8px;">
                <i class="fa-solid fa-bell" style="font-size: 20px; color: #333;"></i>
            </button>
            
            <button onclick="search()" style="cursor: pointer; border: none; background: transparent; padding: 8px;">
                <i class="fa-solid fa-magnifying-glass" style="font-size: 20px; color: #333;"></i>
            </button>
            
            <!-- Common icons: fa-heart, fa-shopping-cart, fa-trash, fa-edit, fa-share, fa-xmark, fa-plus, fa-minus -->
        </body>
        </html>
        ```
        
        **React - Lucide React with Tailwind (NO inline styles):**
        ```jsx
        import {{ Bell, Menu, User, Search, Heart, ShoppingCart, Trash2, Edit, Share2, X, Plus, Minus, Home, Settings, LogOut }} from 'lucide-react';
        
        export default function IconButtons() {{
            return (
                <div className="flex items-center gap-4 p-4">
                    <button 
                        onClick={{() => setShowMenu(!showMenu)}} 
                        className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
                    >
                        <Menu size={{20}} className="text-gray-700" />
                    </button>
                    
                    <button 
                        onClick={{() => setShowProfile(true)}} 
                        className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
                    >
                        <User size={{20}} className="text-gray-700" />
                    </button>
                    
                    <button 
                        onClick={{() => alert('Notifications')}} 
                        className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
                    >
                        <Bell size={{20}} className="text-gray-700" />
                    </button>
                    
                    <button 
                        onClick={{() => handleSearch()}} 
                        className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
                    >
                        <Search size={{20}} className="text-gray-700" />
                    </button>
                </div>
            );
        }}
        ```
        
        **⚠️ ICON MAPPING GUIDE:**
        - Menu/Hamburger → `fa-bars` (HTML) or `<Menu />` (React)
        - User/Profile → `fa-user` (HTML) or `<User />` (React)
        - Notifications → `fa-bell` (HTML) or `<Bell />` (React)
        - Search → `fa-magnifying-glass` (HTML) or `<Search />` (React)
        - Heart/Like → `fa-heart` (HTML) or `<Heart />` (React)
        - Cart → `fa-shopping-cart` (HTML) or `<ShoppingCart />` (React)
        - Delete → `fa-trash` (HTML) or `<Trash2 />` (React)
        - Edit → `fa-edit` (HTML) or `<Edit />` (React)
        - Share → `fa-share` (HTML) or `<Share2 />` (React)
        - Close → `fa-xmark` (HTML) or `<X />` (React)
        - Add → `fa-plus` (HTML) or `<Plus />` (React)
        
        **✅ VERIFICATION CHECKLIST:**
        - [ ] FontAwesome CDN link is in <head> section (HTML)
        - [ ] All icons use `fa-solid` class (HTML)
        - [ ] All icons are imported at top of file (React)
        - [ ] Icons have proper size attributes (size={{20}} for React)
        - [ ] Icons have click handlers
        - [ ] Icons have `cursor-pointer` class (Tailwind) or `cursor: pointer` style (HTML)
        - [ ] **React: NO inline styles, ONLY Tailwind classes**
        - [ ] **React: NO separate CSS files, all styling with Tailwind**
        - [ ] **React: Components only, NO full project files**
        - [ ] **Labels are exact size as shown in image**
        - [ ] **Positioning is exact (pixel-perfect match)**

        ### 📂 COMPLETE FILE STRUCTURE (MANDATORY):
        
        **For HTML/CSS - Generate ALL 3 files:**
        
        1. **index.html** - Must include:
           - Proper DOCTYPE and meta tags
           - **CRITICAL: FontAwesome 6.4.0 CDN link in <head> section:**
             ```html
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
             ```
           - All HTML structure with proper icon usage (`<i class="fa-solid fa-*"></i>`)
           - Embedded or linked CSS/JS
           - **VERIFY: All icons use `fa-solid` class, NOT `fa` or `fas`**
        
        2. **style.css** - Must include:
           - Reset styles
           - All component styles
           - Hover effects (`:hover`)
           - Responsive breakpoints (`@media`)
           - Cursor pointer for clickable elements
        
        3. **script.js** - Must include:
           - ALL event handler functions
           - State management variables
           - Modal open/close functions
           - Form validation
           - View switching logic
        
        **For React - Generate ONLY Components (NOT full project):**
        
        **CRITICAL: Generate ONLY component files, NO project structure files!**
        
        1. **src/components/Navbar.jsx** - Navbar component with Tailwind classes
        2. **src/components/Card.jsx** - Card component with Tailwind classes
        3. **src/components/Button.jsx** - Button component with Tailwind classes
        4. **src/components/Modal.jsx** - Modal component with Tailwind classes
        (Generate only the components that exist in the UI image)
        
        **MANDATORY TAILWIND REQUIREMENTS:**
        - Every component MUST use Tailwind CSS utility classes
        - NO separate CSS files
        - NO inline styles (style={{}})
        - NO className with custom CSS classes
        - Use Tailwind classes like: `className="flex items-center justify-center p-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"`
        - For exact positioning: Use `absolute`, `relative`, `top-*`, `left-*`, `right-*`, `bottom-*` classes
        - For exact sizing: Use `w-*`, `h-*`, `min-w-*`, `max-w-*` classes
        - For exact spacing: Use `p-*`, `m-*`, `gap-*`, `space-*` classes
        - For exact colors: Use Tailwind color classes like `bg-[#hex]` or standard Tailwind colors
        - For fonts: Use `text-sm`, `text-base`, `text-lg`, `text-xl`, `font-bold`, `font-semibold`, etc.
        
        **Example React Component with Tailwind:**
        ```jsx
        import {{ Bell, Menu, User }} from 'lucide-react';
        
        export default function Navbar() {{
          return (
            <nav className="flex items-center justify-between px-6 py-4 bg-white shadow-md">
              <button 
                onClick={{() => alert('Menu clicked')}}
                className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
              >
                <Menu size={{20}} className="text-gray-700" />
              </button>
              <h1 className="text-xl font-bold text-gray-800">App Title</h1>
              <button 
                onClick={{() => alert('Notifications')}}
                className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
              >
                <Bell size={{20}} className="text-gray-700" />
              </button>
            </nav>
          );
        }}
        ```

        ### 🎨 PIXEL-PERFECT STYLING REQUIREMENTS (CRITICAL):
        
        **1. EXACT UI MATCH - MANDATORY:**
        - Extract EXACT colors from the image (use color picker values)
        - Match EXACT positioning (use absolute/relative positioning with exact pixel values)
        - Match EXACT font sizes (labels should be exact size, not too small or too large)
        - Match EXACT spacing, padding, margins (measure from image)
        - Match EXACT border radius, shadows, borders
        - Match EXACT layout structure (flex, grid with exact gaps)
        
        **2. LABELS AND TEXT - EXACT SIZE:**
        - Labels MUST be the exact size as shown in the image
        - Use Tailwind text size classes: `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl`, etc.
        - If exact size needed, use: `text-[14px]` for custom sizes
        - Font weights: `font-normal`, `font-medium`, `font-semibold`, `font-bold`
        - NO labels should be too small or too large - match the image exactly
        
        **3. POSITIONING - EXACT LOCATION:**
        - Use Tailwind positioning classes: `absolute`, `relative`, `fixed`
        - Use exact positioning: `top-[20px]`, `left-[30px]`, `right-[40px]`, `bottom-[50px]`
        - Use flexbox/grid for layouts: `flex`, `grid`, `items-center`, `justify-between`, `gap-4`
        - Match exact alignment from the image
        
        **4. TAILWIND CSS ONLY (React):**
        - Add `cursor-pointer` class to EVERY clickable element
        - Add hover effects: `hover:bg-gray-100`, `hover:shadow-lg`, `hover:scale-105`
        - Use exact colors: `bg-[#hexcode]` or standard Tailwind colors
        - Add smooth transitions: `transition-all`, `transition-colors`, `duration-200`
        - Make it responsive: `sm:`, `md:`, `lg:`, `xl:` breakpoints
        - NO inline styles, NO separate CSS files
        
        **5. HTML/CSS (if selected):**
        - Add `cursor: pointer` to EVERY clickable element
        - Add `:hover` effects (shadow, scale, color change)
        - Use exact colors from the image
        - Make it responsive
        - Add smooth transitions

        ### 📋 JSON OUTPUT FORMAT:
        
        **For React (Components Only):**
        ```json
        {{
          "files": [
            {{ "path": "src/components/Navbar.jsx", "content": "import {{ ... }} from 'lucide-react';\\n\\nexport default function Navbar() {{ ... }}" }},
            {{ "path": "src/components/Card.jsx", "content": "import {{ ... }} from 'lucide-react';\\n\\nexport default function Card() {{ ... }}" }},
            {{ "path": "src/components/Button.jsx", "content": "import {{ ... }} from 'lucide-react';\\n\\nexport default function Button() {{ ... }}" }}
          ],
          "instructions": "1. These are React components only\\n2. Use Tailwind CSS classes (no separate CSS files)\\n3. Import and use in your React project\\n4. Make sure Tailwind CSS is configured in your project"
        }}
        ```
        
        **For HTML/CSS:**
        ```json
        {{
          "files": [
            {{ "path": "index.html", "content": "<!DOCTYPE html>..." }},
            {{ "path": "style.css", "content": "/* Complete CSS */" }},
            {{ "path": "script.js", "content": "// All event handlers" }}
          ],
          "instructions": "1. Extract all files\\n2. Open index.html in browser\\n3. All elements are clickable"
        }}
        ```

        ### DETECTED UI ELEMENTS:
        ```json
        {json.dumps(dets, indent=2)}
        ```
        
        ### 🚨 ULTRA-STRICT FINAL REQUIREMENTS:
        
        **1. CLICKABILITY - ABSOLUTE RULE:**
        EVERY element that a human could possibly click MUST have a handler:
        - Buttons → `onclick`/`onClick` with specific actions (login, submit, cancel, etc.)
        - Icons → Wrapped in clickable elements with handlers
        - Text links ("Forgot Password?", "Sign Up", "Terms", etc.) → Click handlers
        - Cards, items, thumbnails → Click to show details/modal
        - Profile pictures → Click to view profile or enlarge
        - Navigation items → Click to switch views
        
        **2. EVENT MESSAGES - SHOW USER FEEDBACK:**
        Every click must give feedback:
        - Login button → Show "Logging in...", then "Login Successful!" alert or message
        - Register button → Show "Creating account...", then redirect or show success
        - "Forgot Password?" → Open modal or show reset form
        - Card click → Open modal with item details or show alert
        - Icon clicks → Show appropriate message ("Opening notifications", "Profile settings", etc.)
        
        **3. MODERN ICONS - MANDATORY (MUST BE VISIBLE):**
        - **HTML/CSS:** Use FontAwesome 6.4.0 CDN (MUST include in <head>):
          ```html
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
          ```
          - Use `fa-solid` class for all icons
          - Example: `<i class="fa-solid fa-bars"></i>`
          - Icons MUST have size: `style="font-size: 20px;"`
        
        - **React/Next.js:** Use lucide-react (MUST be in package.json):
          ```json
          "lucide-react": "^0.263.1"
          ```
          - Import icons: `import {{ Bell, Menu, User }} from 'lucide-react';`
          - Use with size: `<Bell size={{20}} />`
          - Icons MUST be imported, not used as strings
        
        - **Flutter:** Use Material Icons from `flutter/material.dart`
        - **Vue:** Use Heroicons or lucide-vue
        
        **ALL icons MUST:**
        - ✅ Be properly imported/loaded (CDN for HTML, npm package for React)
        - ✅ Have visible size (font-size: 20px for HTML, size={{20}} for React)
        - ✅ Have color attributes (color="#333" or style="color: #333")
        - ✅ Be clickable (wrapped in buttons or have click handlers)
        - ✅ Have cursor: pointer style
        - ✅ Have hover effects (opacity change, scale, etc.)
        - ✅ NEVER use placeholder text like "[icon]" or "🔍" - use actual icon components
        
        **4. EXACT UI MATCH:**
        - Extract exact colors from image (use color picker logic)
        - Match fonts (use Google Fonts if needed)
        - Match spacing, padding, margins precisely
        - Match shadows, borders, border-radius
        - Make it pixel-perfect
        
        **5. COMPLETE CODE - NO SHORTCUTS:**
        - Generate EVERY file needed
        - Include ALL functions referenced in HTML/JSX
        - NO placeholder comments like "// Add more here"
        - NO TODO comments
        - COMPLETE, working, production-ready code
        
        **EXAMPLE - Perfect Login Button (HTML):**
        ```html
        <button onclick="handleLogin()" class="login-btn" style="cursor: pointer;">
            Login
        </button>
        
        <script>
        function handleLogin() {{
            const btn = event.target;
            btn.disabled = true;
            btn.innerHTML = 'Logging in...';
            
            // Simulate API call
            setTimeout(() => {{
                alert('Login Successful!');
                btn.innerHTML = 'Login';
                btn.disabled = false;
                // Redirect or change view
                window.location.href = '#dashboard';
            }}, 1500);
        }}
        </script>
        ```
        
        **EXAMPLE - Perfect Icon Button (React):**
        ```jsx
        // MUST import at top of file
        import {{ Bell }} from 'lucide-react';
        
        function NotificationButton() {{
            return (
                <button 
                    onClick={{() => {{
                        alert('You have 3 new notifications');
                        setShowNotifications(true);
                    }}}}
                    style={{{{ 
                        padding: '8px', 
                        border: 'none', 
                        background: 'transparent',
                        cursor: 'pointer',
                        borderRadius: '50%',
                        transition: 'all 0.2s'
                    }}}}
                    onMouseEnter={{e => e.currentTarget.style.backgroundColor = '#f3f4f6'}}
                    onMouseLeave={{e => e.currentTarget.style.backgroundColor = 'transparent'}}
                    aria-label="Notifications"
                >
                    <Bell size={{20}} color="#374151" />
                </button>
            );
        }}
        ```
        
        **EXAMPLE - Perfect Icon Button (HTML):**
        ```html
        <head>
            <!-- MUST include FontAwesome CDN -->
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        </head>
        <body>
            <button 
                onclick="showNotifications()" 
                style="padding: 8px; border: none; background: transparent; cursor: pointer; border-radius: 50%; transition: all 0.2s;"
                onmouseover="this.style.backgroundColor='#f3f4f6'"
                onmouseout="this.style.backgroundColor='transparent'"
                aria-label="Notifications"
            >
                <i class="fa-solid fa-bell" style="font-size: 20px; color: #374151;"></i>
            </button>
        </body>
        ```
        
        **EXAMPLE - Perfect "Forgot Password" Link (HTML):**
        ```html
        <a href="#" onclick="showForgotPassword(); return false;" class="forgot-link">
            Forgot Password?
        </a>
        
        <script>
        function showForgotPassword() {{
            document.getElementById('forgotModal').style.display = 'block';
            // Or show inline form
            document.getElementById('forgotForm').classList.remove('hidden');
        }}
        </script>
        ```
        
        ### ✅ PRE-OUTPUT VALIDATION CHECKLIST:
        Before generating output, verify you have:
        - [ ] Identified ALL clickable elements in the UI
        - [ ] Added click handlers to EVERY button
        - [ ] **ICONS: Made EVERY icon clickable and VISIBLE**
        - [ ] **ICONS (HTML): FontAwesome CDN link is in <head>, all icons use `fa-solid` class**
        - [ ] **ICONS (React): lucide-react is in package.json, all icons are imported and used as components**
        - [ ] **ICONS: All icons have proper size (font-size: 20px or size={{20}})**
        - [ ] **ICONS: All icons have color attributes**
        - [ ] Added handlers to ALL text links
        - [ ] Made ALL cards/items clickable
        - [ ] Used modern icon libraries (FontAwesome 6.4.0 CDN for HTML, lucide-react ^0.263.1 for React)
        - [ ] Added feedback messages for ALL user actions
        - [ ] Included ALL CSS with cursor:pointer for clickable elements
        - [ ] Included ALL JavaScript/React handler functions
        - [ ] Generated complete file structure for selected framework
        - [ ] Matched UI colors, fonts, spacing exactly
        - [ ] Added hover effects to clickable elements
        - [ ] NO incomplete code, NO TODOs, NO placeholders
        - [ ] **NO icon placeholders like "[icon]" or emoji - use actual icon components**
        
        ### 🎯 FINAL CRITICAL REQUIREMENTS:
        
        **FOR REACT:**
        1. ✅ Generate ONLY component files (NO package.json, NO App.jsx, NO project structure)
        2. ✅ Use Tailwind CSS classes ONLY (NO inline styles, NO separate CSS files)
        3. ✅ Exact pixel-perfect match (colors, positioning, sizing, spacing)
        4. ✅ Labels exact size (not too small, not too large)
        5. ✅ All components in `src/components/` folder
        6. ✅ Each component is a separate .jsx file
        7. ✅ All styling with Tailwind utility classes
        
        **FOR HTML/CSS:**
        1. ✅ Generate index.html, style.css, script.js
        2. ✅ Exact pixel-perfect match
        3. ✅ Labels exact size
        4. ✅ All styling in CSS file
        
        **GENERATE PERFECT, COMPLETE, FULLY FUNCTIONAL CODE NOW.**
        """

        # --- OPTION 1: OPENAI GPT-4o (Paid - Preferred if available) ---
        # Try OpenAI first if available (better accuracy)
        if self.openai_available:
            try:
                print("Using OpenAI GPT-4o (High Accuracy)...")
                base64_image = self.encode_image(img_path)
                response = self.client.chat.completions.create(
                    model="gpt-4o",
                    messages=[
                        {
                            "role": "user",
                            "content": [
                                {"type": "text", "text": prompt},
                                {
                                    "type": "image_url",
                                    "image_url": {"url": f"data:image/png;base64,{base64_image}"}
                                }
                            ]
                        }
                    ],
                    response_format={"type": "json_object"}, # Guarantees valid JSON
                    max_tokens=4096
                )
                self.api_used = "OpenAI GPT-4o (Paid)"
                return json.loads(response.choices[0].message.content)
            except Exception as e:
                error_str = str(e)
                print(f"⚠️ OpenAI Failed: {error_str}")
                
                # Check if it's an invalid API key error
                if "401" in error_str or "invalid_api_key" in error_str.lower() or "incorrect api key" in error_str.lower():
                    error_msg = "❌ OpenAI API Key is Invalid!\n\n"
                    error_msg += "🔍 Problem Detected:\n"
                    error_msg += "- Your OPENAI_API_KEY appears to be incorrect\n"
                    error_msg += "- OpenAI keys should start with 'sk-'\n"
                    error_msg += "- If your key starts with 'AIza', that's a Gemini key, not OpenAI\n\n"
                    error_msg += "💡 Solutions:\n"
                    error_msg += "1. Get a valid OpenAI API key from: https://platform.openai.com/account/api-keys\n"
                    error_msg += "2. Update OPENAI_API_KEY in .env file or environment variables\n"
                    error_msg += "3. Restart the application\n\n"
                    error_msg += "✅ Falling back to Gemini (if available)."
                    # Continue to Gemini fallback
                else:
                    print(f"⚠️ OpenAI error, falling back to Gemini: {error_str}")
                    # Continue to Gemini fallback
        
        # --- OPTION 2: GEMINI (Free - Fallback if OpenAI not available) ---
        # Try Gemini if OpenAI is not available or failed
        if GEMINI_API_KEY:
            last_error = ""
            import time
            
            for model_name in self.models_to_try:
                # Safety check: NEVER use experimental models
                if "exp" in model_name.lower() or "experimental" in model_name.lower():
                    print(f"⚠️ Skipping experimental model: {model_name}")
                    continue
                    
                try:
                    print(f"Using Gemini Model: {model_name} (Free)...")
                    model = genai.GenerativeModel(model_name)
                    res = model.generate_content([prompt, Image.open(img_path)])
                    
                    if not res.text: raise ValueError("Empty response (Safety Filter?)")
                    print(f"Gemini Raw Output (First 100 chars): {res.text[:100]}...")
                    
                    # Robust JSON Extraction
                    import re
                    json_match = re.search(r'\{.*\}', res.text, re.DOTALL)
                    if json_match:
                        txt = json_match.group(0)
                    else:
                        # Fallback cleanup
                        txt = res.text.replace("```json", "").replace("```", "").strip()
                    
                    self.api_used = f"Gemini {model_name} (Free)"
                    return json.loads(txt)
                except Exception as e:
                    error_str = str(e)
                    print(f"Failed with {model_name}: {error_str}")
                    
                    # Check if it's a quota error - if OpenAI available, skip retry and go straight to OpenAI
                    if "429" in error_str or "quota" in error_str.lower() or "exceeded" in error_str.lower():
                        print(f"❌ Quota exceeded for {model_name}")
                        if self.openai_available:
                            print("🚀 Skipping Gemini retry, using OpenAI immediately...")
                            last_error = f"Gemini quota exceeded. Switching to OpenAI."
                            break  # Break out of Gemini loop, go to OpenAI
                        else:
                            # Only retry if OpenAI is not available
                            import re
                            retry_match = re.search(r'retry.*?(\d+\.?\d*)\s*s', error_str, re.IGNORECASE)
                            if retry_match:
                                wait_time = float(retry_match.group(1)) + 2
                                print(f"⏳ Waiting {wait_time:.1f} seconds before retry (no OpenAI fallback)...")
                                time.sleep(min(wait_time, 60))
                                try:
                                    print(f"🔄 Retrying with {model_name}...")
                                    model = genai.GenerativeModel(model_name)
                                    res = model.generate_content([prompt, Image.open(img_path)])
                                    if res.text:
                                        import re
                                        json_match = re.search(r'\{.*\}', res.text, re.DOTALL)
                                        if json_match:
                                            txt = json_match.group(0)
                                        else:
                                            txt = res.text.replace("```json", "").replace("```", "").strip()
                                        self.api_used = f"Gemini {model_name} (Free)"
                                        return json.loads(txt)
                                except Exception as retry_e:
                                    print(f"Retry also failed: {retry_e}")
                                    last_error = f"Quota exceeded. Please wait or add OPENAI_API_KEY."
                            else:
                                last_error = f"Quota exceeded for {model_name}. Please wait or add OPENAI_API_KEY."
                    else:
                        import traceback
                        traceback.print_exc()
                        last_error = error_str
            
            # If Gemini fails and OpenAI is available, fallback to OpenAI
            if self.openai_available:
                print("⚠️ Gemini quota exceeded, switching to OpenAI GPT-4o immediately...")
            else:
                error_msg = f"Gemini quota exceeded. Last error: {last_error}\n\n"
                error_msg += "💡 Solutions:\n"
                error_msg += "1. Wait a few minutes and try again\n"
                error_msg += "2. Check your Gemini API quota: https://ai.dev/usage?tab=rate-limit\n"
                error_msg += "3. Add OPENAI_API_KEY as fallback option"
                return {"error": error_msg}
        
        # If we reach here, no API keys are available
        return {"error": "No API keys available. Please configure OPENAI_API_KEY or GEMINI_API_KEY in .env file or environment variables."}
    
    def zip_project(self, data):
        if 'error' in data:
            return None
            
        tmp = tempfile.mkdtemp()
        if 'files' in data:
            for f in data['files']:
                # Ensure path is safe and correct extension
                clean_path = f['path'].lstrip('/').replace('\\', '/')
                p = os.path.join(tmp, clean_path)
                os.makedirs(os.path.dirname(p), exist_ok=True)
                with open(p, 'w', encoding='utf-8') as o: o.write(f['content'])
        shutil.make_archive("project", 'zip', tmp)
        return "project.zip"

# --- Rate Limiting & Security ---
from collections import defaultdict
from datetime import datetime, timedelta
import time

# Simple rate limiting: track requests per IP/session
request_tracker = defaultdict(list)
MAX_REQUESTS_PER_HOUR = 10  # Maximum requests per hour per user
MAX_REQUESTS_PER_DAY = 50   # Maximum requests per day per user

def check_rate_limit():
    """Check if user has exceeded rate limits"""
    # For simplicity, use timestamp-based tracking
    # In production, use proper session/IP tracking
    current_time = time.time()
    hour_ago = current_time - 3600
    day_ago = current_time - 86400
    
    # Clean old entries
    for key in list(request_tracker.keys()):
        request_tracker[key] = [t for t in request_tracker[key] if t > day_ago]
    
    # Simple session-based tracking (in production, use IP address)
    session_id = "default"  # In real app, get from Gradio request
    
    recent_requests = [t for t in request_tracker[session_id] if t > hour_ago]
    daily_requests = [t for t in request_tracker[session_id] if t > day_ago]
    
    if len(recent_requests) >= MAX_REQUESTS_PER_HOUR:
        return False, f"⚠️ Rate limit exceeded! Maximum {MAX_REQUESTS_PER_HOUR} requests per hour. Please wait and try again later."
    
    if len(daily_requests) >= MAX_REQUESTS_PER_DAY:
        return False, f"⚠️ Daily limit exceeded! Maximum {MAX_REQUESTS_PER_DAY} requests per day. Please try again tomorrow."
    
    # Record this request
    request_tracker[session_id].append(current_time)
    return True, None

# --- Main Application ---
if __name__ == "__main__":
    if os.path.exists("best.pt"):
        print("Initializing God Mode System...")
        detector = GodModeDetector("best.pt")
        generator = GodModeGenerator()

        def run_god_mode(img, fw):
            print("\n--- NEW REQUEST ---")
            
            # Rate limiting check
            allowed, error_msg = check_rate_limit()
            if not allowed:
                print(f"Rate limit exceeded: {error_msg}")
                return None, error_msg, None
            
            if not (detector and generator):
                print("System not initialized.")
                return None, "System not initialized. Check console logs.", None
            
            if not img: 
                print("No image provided.")
                return None, "Upload Image!", None
            
            try:
                print("Saving temp.png...")
                img.save("temp.png")
                
                # 1. Detect
                print("Starting Detection...")
                dets = detector.detect("temp.png")
                print(f"Detection Done. Found {len(dets)} items.")
                vis = detector.visualize("temp.png", dets)
                
                # 2. Generate
                print(f"Starting Generation with Framework: {fw}")
                code_data = generator.generate("temp.png", dets, fw)
                
                if "error" in code_data: 
                    print(f"Generation Error: {code_data['error']}")
                    return vis, f"Error Generating Code:\n{code_data['error']}", None
                
                # 3. Zip
                print("Zipping project...")
                zip_path = generator.zip_project(code_data)
                
                mode_used = getattr(generator, 'api_used', 'Unknown')
                print(f"Success! Mode: {mode_used}")
                
                report = f"✅ Generated {fw} Project!\n\nFound {len(dets)} elements.\nAPI Used: {mode_used}"
                return vis, report, zip_path
            except Exception as e:
                import traceback
                print("!!! CRITICAL EXCEPTION !!!")
                traceback.print_exc()
                return None, f"Critical Error: {str(e)}\nSee Console for details.", None

        with gr.Blocks(title="God Mode") as app:
            gr.Markdown(f"""
# 🚀 God Mode: Ultimate UI to Code System

**Convert any UI screenshot into fully functional, pixel-perfect code!**

<div style="background-color: #fff3cd; border: 1px solid #ffc107; padding: 15px; border-radius: 5px; margin: 20px 0;">
    <strong>⚠️ Usage Limits:</strong><br>
    • Maximum {MAX_REQUESTS_PER_HOUR} requests per hour per user<br>
    • Maximum {MAX_REQUESTS_PER_DAY} requests per day per user<br>
    • Free Gemini API is preferred to save costs<br>
    • OpenAI (paid) is used only as fallback if Gemini fails
</div>

### ✨ Features:
- **100% Element Detection:** YOLO11 + SAHI + EasyOCR + DBSCAN
- **90%+ Code Accuracy:** Gemini (Free) preferred, GPT-4o (Paid) as fallback
- **Universal Semantics:** Understands EVERY interaction (Icons, Cards, Lists)
- **Interactive Clickable UI:** JS Logic + State Management
- **Cognition Engine:** Understands Size, Shape, Position & Semantics
- **Full Project ZIP:** Download ready-to-use code

### 📋 How to Use:
1. Upload a UI screenshot/image
2. Select your framework (React, HTML/CSS, Flutter, etc.)
3. Click "Generate Code"
4. Download the complete project ZIP file

### ⚠️ API Quota Notes:
- **Gemini Free Tier:** 60 requests/minute, 1500 requests/day (gemini-1.5-flash)
- If you see quota errors, wait a few minutes or add OPENAI_API_KEY as fallback
- Check your quota: https://ai.dev/usage?tab=rate-limit
""")
            with gr.Row():
                with gr.Column():
                    i = gr.Image(type="pil", label="UI Image")
                    f = gr.Dropdown(
                        ["React", "HTML/CSS", "Flutter", "Vue", "Angular", "Next.js", "Svelte", "SolidJS"], 
                        value="React", label="Frontend Framework"
                    )
                    btn = gr.Button("Generate Code")
                with gr.Column():
                    o_i = gr.Image(label="Detections")
                    o_t = gr.Textbox(label="Status")
                    o_f = gr.File(label="Download ZIP")
            btn.click(run_god_mode, [i, f], [o_i, o_t, o_f])

        # For Hugging Face Spaces compatibility
        import os
        # Check if running on Hugging Face Spaces
        is_spaces = os.getenv('SPACE_ID') or os.getenv('SYSTEM') == 'spaces' or os.path.exists('/.dockerenv')
        
        if is_spaces:
            print("🚀 Running on Hugging Face Spaces")
            print("=" * 70)
            print("🔑 API Keys Status at Startup:")
            print(f"Environment: SPACE_ID={os.getenv('SPACE_ID')}, SYSTEM={os.getenv('SYSTEM')}")
            
            # Check API keys status
            openai_found = bool(OPENAI_API_KEY and len(OPENAI_API_KEY) >= 10)
            gemini_found = bool(GEMINI_API_KEY and len(GEMINI_API_KEY) >= 10)
            
            if openai_found:
                print(f"✅ OpenAI API Key found (Length: {len(OPENAI_API_KEY)} chars)")
                print(f"   Preview: {OPENAI_API_KEY[:15]}...{OPENAI_API_KEY[-5:]}")
            else:
                print("❌ OpenAI API Key NOT found")
                if OPENAI_API_KEY:
                    print(f"   ⚠️ Key exists but too short: {len(OPENAI_API_KEY)} chars")
            
            if gemini_found:
                print(f"✅ Gemini API Key found (Length: {len(GEMINI_API_KEY)} chars)")
                print(f"   Preview: {GEMINI_API_KEY[:15]}...{GEMINI_API_KEY[-5:]}")
            else:
                print("❌ Gemini API Key NOT found")
                if GEMINI_API_KEY:
                    print(f"   ⚠️ Key exists but too short: {len(GEMINI_API_KEY)} chars")
            
            if not openai_found and not gemini_found:
                print("\n⚠️ WARNING: No valid API keys found!")
                print("   → Go to Space Settings → Secrets")
                print("   → Verify names are EXACTLY: OPENAI_API_KEY and GEMINI_API_KEY")
                print("   → Check keys don't have extra spaces")
                print("   → **RESTART THE SPACE** (Settings → Restart this Space)")
                print("\n🔍 Debugging: Listing all env vars with 'API' or 'KEY':")
                for key in sorted(os.environ.keys()):
                    if 'API' in key.upper() or 'KEY' in key.upper():
                        val = os.environ[key]
                        print(f"   {key}: {'*' * min(30, len(val))} (length: {len(val)})")
            else:
                print("\n✅ At least one API key is available!")
            print("=" * 70)
            
            # For Spaces, let Gradio handle configuration automatically
            # The monkey patch above should fix the schema generation bug
            print("🚀 Launching app on Hugging Face Spaces...")
            app.launch()
        else:  # Running locally
            print("💻 Running locally")
            app.launch(share=False, debug=True, server_name="127.0.0.1", server_port=7860, inbrowser=True)
    else:
        print("=" * 70)
        print("❌ ERROR: Model file 'best.pt' not found or corrupted!")
        print("=" * 70)
        print("Please upload 'best.pt' to your Hugging Face Space:")
        print("1. Go to Space → Files tab")
        print("2. Click 'Add file' → 'Upload files'")
        print("3. Upload the best.pt file (should be ~50-200 MB)")
        print("4. Wait for upload to complete")
        print("5. Space will automatically restart")
        print("\n⚠️ If file exists but shows error, it might be corrupted.")
        print("   Try re-uploading the file.")
        print("=" * 70)