#!/usr/bin/env python3
"""
Debug Frontend Issues - Capture JavaScript errors and console logs
"""

import os
import time
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By

def debug_frontend():
    print("🔍 Debugging Frontend JavaScript Issues...")
    
    chrome_options = Options()
    chrome_options.add_argument("--headless")
    chrome_options.add_argument("--no-sandbox")
    chrome_options.add_argument("--disable-dev-shm-usage")
    chrome_options.add_argument("--disable-gpu")
    chrome_options.add_argument("--window-size=1920,1080")
    chrome_options.add_argument("--enable-logging")
    chrome_options.add_argument("--log-level=0")
    
    driver = webdriver.Chrome(options=chrome_options)
    
    try:
        print("🌐 Loading http://localhost:3000...")
        driver.get("http://localhost:3000")
        
        # Wait for page to fully load
        time.sleep(5)
        
        print("📋 Page Title:", driver.title)
        print("🔗 Current URL:", driver.current_url)
        
        # Get page source and check for root element
        page_source = driver.page_source
        print("📄 Page source length:", len(page_source))
        
        # Check if root div has content
        try:
            root_element = driver.find_element(By.ID, "root")
            print("🏠 Root element innerHTML length:", len(root_element.get_attribute("innerHTML")))
            print("🏠 Root element text content:", root_element.text[:200] + "..." if len(root_element.text) > 200 else root_element.text)
        except Exception as e:
            print(f"❌ Error finding root element: {e}")
        
        # Get console logs (newer Selenium API)
        print("\n🐛 JavaScript Console Logs:")
        try:
            logs = driver.get_log('browser')
            if logs:
                for log in logs:
                    level = log['level']
                    message = log['message']
                    print(f"   [{level}] {message}")
            else:
                print("   No console logs found")
        except Exception as e:
            print(f"   Could not get console logs: {e}")
        
        # Check for specific error patterns
        if "Failed to import" in page_source or "import" in str(logs):
            print("\n❌ Import Error Detected!")
            
        if len(root_element.get_attribute("innerHTML")) < 100:
            print("\n❌ Root element is nearly empty - React app not loading!")
            
        # Take screenshot for debugging
        screenshot_path = "/tmp/debug_frontend.png"
        driver.save_screenshot(screenshot_path)
        print(f"\n📸 Debug screenshot saved: {screenshot_path}")
        
    except Exception as e:
        print(f"❌ Error during debugging: {e}")
    finally:
        driver.quit()

if __name__ == "__main__":
    debug_frontend()