// SEO Check Tool Implementation
const { useState, useEffect, useRef } = React;

const SeoCheck = () => {
  // State for SEO analysis
  const [url, setUrl] = useState('');
  const [isAnalyzing, setIsAnalyzing] = useState(false);
  const [analysisComplete, setAnalysisComplete] = useState(false);
  const [results, setResults] = useState(null);
  const [showDetails, setShowDetails] = useState(false);
  const [currentStep, setCurrentStep] = useState(0);
  const [error, setError] = useState(null);
  const [viewMode, setViewMode] = useState('mobile'); // 'mobile' or 'desktop'
  
  // Refs for animations
  const progressWheelRef = useRef(null);
  const scoreCounterRef = useRef(null);
  const chartRef = useRef(null);
  
  // Constants for demo data
  const SEO_FACTORS = [
    { id: 'title', name: 'Title Tag', description: 'Is the page title tag optimized?' },
    { id: 'meta_desc', name: 'Meta Description', description: 'Is meta description an appropriate length and relevant to content?' },
    { id: 'h1', name: 'H1 Heading', description: 'Is the H1 heading tag used correctly on the page?' },
    { id: 'heading_structure', name: 'Heading Structure', description: 'Are H1, H2, H3 headings hierarchical and properly structured?' },
    { id: 'img_alt', name: 'Image Alt Tags', description: 'Do images have appropriate alt tags?' },
    { id: 'content_length', name: 'Content Length', description: 'Is the page content of sufficient length? (min. 300 words)' },
    { id: 'keyword_density', name: 'Keyword Density', description: 'Are keywords used with appropriate frequency?' },
    { id: 'links', name: 'Links', description: 'Are internal and external links used correctly?' },
    { id: 'mobile_friendly', name: 'Mobile Friendliness', description: 'Is the page compatible with mobile devices?' },
    { id: 'page_speed', name: 'Page Speed', description: 'Is the page loading speed good enough?' },
    { id: 'https', name: 'Secure Connection (HTTPS)', description: 'Does the site use HTTPS protocol?' },
    { id: 'url_structure', name: 'URL Structure', description: 'Is the URL structure SEO-friendly and readable?' },
    { id: 'canonical', name: 'Canonical URL', description: 'Is the canonical URL defined correctly?' },
    { id: 'schema_markup', name: 'Schema Markup', description: 'Is schema markup used?' },
    { id: 'social_tags', name: 'Social Media Tags', description: 'Are Open Graph and Twitter cards properly configured?' },
  ];

  // Function to complete and validate URL
  const validateAndCompleteURL = (inputURL) => {
    let processedURL = inputURL.trim();
    
    // Add protocol if missing
    if (!processedURL.startsWith('http://') && !processedURL.startsWith('https://')) {
      processedURL = 'https://' + processedURL;
    }
    
    // Convert http to https
    if (processedURL.startsWith('http://')) {
      processedURL = processedURL.replace('http://', 'https://');
    }
    
    try {
      new URL(processedURL);
      return { isValid: true, url: processedURL };
    } catch (_) {
      return { isValid: false, url: processedURL };
    }
  };

  // Function to perform real SEO analysis using web scraping
  const analyzeSite = async () => {
    if (!url || isAnalyzing) return;
    
    // Define a function to gradually increase progress counter
    const simulateProgress = () => {
      let counter = 1;
      const interval = setInterval(() => {
        if (counter < 15) {
          counter++;
          setCurrentStep(counter);
        } else {
          clearInterval(interval);
        }
      }, 200); // Increment every 200ms
      
      return interval;
    };
    
    // Validate and complete URL
    const { isValid, url: processedURL } = validateAndCompleteURL(url);
    
    if (!isValid) {
      setError('Please enter a valid URL (e.g. example.com)');
      return;
    }
    
    // Update URL with processed version
    setUrl(processedURL);
    
    // Reset states
    setError(null);
    setIsAnalyzing(true);
    setAnalysisComplete(false);
    setResults(null);
    setCurrentStep(0);
    
    // Start the progress counter
    const progressInterval = simulateProgress();
    
    try {
      // Step counter for progress indicator
      const totalSteps = SEO_FACTORS.length + 2; // SEO factors + mobile & desktop speed
      let currentStepCount = 0;
      
      // Function to update step counter with detailed status messages
      const updateStep = (stepIndex, detailedMessage = null) => {
        currentStepCount = stepIndex;
        setCurrentStep(currentStepCount);
        
        // Log the current step for debugging
        console.log(`SEO Analysis Step ${currentStepCount}/${totalSteps}: ${detailedMessage || 'Processing...'}`);
      };
      
      // Start with first step: Fetching website
      updateStep(1, "Fetching website content")
      
      // Fetch website content using direct API call
      let htmlContent;
      
      try {
        // Use the direct URL approach, which uses server-side curl
        console.log("Fetching website content via server...");
        
        // Include a cache buster to prevent caching
        const cacheBuster = new Date().getTime();
        const response = await fetch(`fetch.php?url=${encodeURIComponent(processedURL)}&_=${cacheBuster}`);
        
        if (!response.ok) {
          throw new Error(`Server fetch failed: ${response.status}`);
        }
        
        // Get the HTML content directly
        htmlContent = await response.text();
        
        if (!htmlContent || htmlContent.trim() === '') {
          throw new Error('Empty response from server');
        }
        
        console.log("Successfully fetched content via server");
        
      } catch (fetchError) {
        console.error("Failed to fetch website content:", fetchError.message);
        throw new Error(`Could not access the website content. Please try a different URL or try again later: ${fetchError.message}`);
      }
      
      // Create a DOM parser to analyze the HTML
      const parser = new DOMParser();
      const doc = parser.parseFromString(htmlContent, 'text/html');
      
      // Initialize results object
      const realResults = {
        url: processedURL,
        htmlSize: htmlContent.length,
        overall_score: 0,
        mobile_score: 0,
        desktop_score: 0,
        factors: [],
        apiDetails: null // PageSpeed API yanıtı için yer tutucu
      };
      
      // Function to score a factor from 0-100
      const scoreFactor = (value, max, min = 0) => {
        return Math.max(0, Math.min(100, Math.round(((value - min) / (max - min)) * 100)));
      };
      
      // 1. Analyze title
      updateStep(2, "Analyzing page title tag");
      const titleElement = doc.querySelector('title');
      const title = titleElement ? titleElement.textContent.trim() : '';
      const titleScore = title ? 
        (title.length > 10 && title.length < 70 ? 
          scoreFactor(title.length, 60, 10) : 
          scoreFactor(title.length > 70 ? 130 - title.length : title.length, 60, 10)) : 0;
      
      // Determine recommendation text first
      const titleRecommendation = !title ? 'Add a title tag to your page.' :
        (title.length < 10 ? 'Title is too short. Aim for 50-60 characters.' :
         title.length > 70 ? 'Title is too long. Keep it under 70 characters.' :
         'Good title length.');
      
      // Set status based on the recommendation text instead of score
      // This ensures consistency between status icon and recommendation text
      const titleStatus = titleRecommendation === 'Good title length.' ? 'pass' : 
                         (titleRecommendation.includes('too long') || 
                          titleRecommendation.includes('too short')) ? 'warning' : 'fail';
      
      const titleDetails = {
        value: title || 'No title found',
        recommendation: titleRecommendation
      };
      
      realResults.factors.push({
        id: 'title',
        name: 'Title Tag',
        description: 'Is the page title tag optimized?',
        score: titleScore,
        status: titleStatus,
        details: titleDetails
      });
      
      // 2. Analyze meta description
      updateStep(3, "Analyzing meta description");
      const metaDesc = doc.querySelector('meta[name="description"]');
      const metaDescContent = metaDesc ? metaDesc.getAttribute('content') : '';
      const metaDescScore = metaDescContent ? 
        (metaDescContent.length > 50 && metaDescContent.length < 160 ? 
          scoreFactor(metaDescContent.length, 150, 50) : 
          scoreFactor(metaDescContent.length > 160 ? 320 - metaDescContent.length : metaDescContent.length, 150, 50)) : 0;
      
      // Determine recommendation text first
      const metaDescRecommendation = !metaDescContent ? 'Add a meta description to your page.' :
        (metaDescContent.length < 50 ? 'Meta description is too short. Aim for 120-150 characters.' :
         metaDescContent.length > 160 ? 'Meta description is too long. Keep it under 160 characters.' :
         'Good meta description length.');
      
      // Set status based on the recommendation text instead of score
      const metaDescStatus = metaDescRecommendation === 'Good meta description length.' ? 'pass' : 
                           (metaDescRecommendation.includes('too long') || 
                            metaDescRecommendation.includes('too short')) ? 'warning' : 'fail';
                            
      const metaDescDetails = {
        value: metaDescContent || 'No meta description found',
        recommendation: metaDescRecommendation
      };
      
      realResults.factors.push({
        id: 'meta_desc',
        name: 'Meta Description',
        description: 'Is meta description an appropriate length and relevant to content?',
        score: metaDescScore,
        status: metaDescStatus,
        details: metaDescDetails
      });
      
      // 3. Analyze H1 heading
      updateStep(4, "Checking H1 headings");
      const h1Elements = doc.querySelectorAll('h1');
      const h1Count = h1Elements.length;
      const h1Content = h1Elements.length > 0 ? h1Elements[0].textContent.trim() : '';
      
      // Determine recommendation text first
      const h1Recommendation = h1Count === 0 ? 'Add an H1 heading to your page.' :
        (h1Count > 1 ? 'Use only one H1 heading per page.' :
         h1Content.length < 5 ? 'H1 heading is too short.' :
         h1Content.length > 70 ? 'H1 heading is too long. Keep it concise.' :
         'Good H1 heading.');
      
      // Set score based on the actual content
      const h1Score = h1Count === 1 && h1Content.length > 0 ? 
        (h1Content.length > 5 && h1Content.length < 70 ? 100 : 70) : 
        (h1Count === 0 ? 0 : (h1Count > 1 ? 40 : 60));
      
      // Set status based on the recommendation text instead of score for consistency
      const h1Status = h1Recommendation === 'Good H1 heading.' ? 'pass' : 
                      (h1Recommendation.includes('too short') || 
                       h1Recommendation.includes('too long')) ? 'warning' : 'fail';
                       
      const h1Details = {
        value: h1Count === 0 ? 'No H1 heading found' : 
              (h1Count === 1 ? `"${h1Content}"` : `Multiple H1 headings (${h1Count})`),
        recommendation: h1Recommendation
      };
      
      realResults.factors.push({
        id: 'h1',
        name: 'H1 Heading',
        description: 'Is the H1 heading tag used correctly on the page?',
        score: h1Score,
        status: h1Status,
        details: h1Details
      });
      
      // 4. Analyze heading structure
      updateStep(5, "Analyzing heading structure");
      const h2Elements = doc.querySelectorAll('h2');
      const h3Elements = doc.querySelectorAll('h3');
      const h4Elements = doc.querySelectorAll('h4');
      const h5Elements = doc.querySelectorAll('h5');
      const h6Elements = doc.querySelectorAll('h6');
      
      // Determine recommendation text first
      const headingStructureRecommendation = h1Count === 0 ? 'Add an H1 heading to your page.' :
        (h1Count > 1 ? 'Use only one H1 heading per page.' :
         h2Elements.length === 0 ? 'Add H2 headings to structure your content.' :
         'Heading structure looks good.');
      
      // Calculate score based on actual content
      const headingStructureScore = h1Count === 1 && h2Elements.length > 0 ? 
        (h2Elements.length + h3Elements.length > 0 ? 100 : 80) : 
        (h1Count === 0 ? 0 : (h1Count > 1 ? 40 : 60));
      
      // Set status based on the recommendation text instead of score for consistency
      const headingStructureStatus = headingStructureRecommendation === 'Heading structure looks good.' ? 'pass' : 
                                    (headingStructureRecommendation.includes('Add H2 headings')) ? 'warning' : 'fail';
      
      const headingStructureDetails = {
        value: `${h1Count} H1, ${h2Elements.length} H2, ${h3Elements.length} H3, ${h4Elements.length} H4, ${h5Elements.length} H5, ${h6Elements.length} H6 tags`,
        recommendation: headingStructureRecommendation
      };
      
      realResults.factors.push({
        id: 'heading_structure',
        name: 'Heading Structure',
        description: 'Are H1, H2, H3 headings hierarchical and properly structured?',
        score: headingStructureScore,
        status: headingStructureStatus,
        details: headingStructureDetails
      });
      
      // 5. Analyze image alt tags
      updateStep(6, "Checking image alt attributes");
      const imgElements = doc.querySelectorAll('img');
      const imgCount = imgElements.length;
      let imgWithAlt = 0;
      
      imgElements.forEach(img => {
        if (img.hasAttribute('alt') && img.getAttribute('alt').trim() !== '') {
          imgWithAlt++;
        }
      });
      
      const imgAltScore = imgCount === 0 ? 100 : Math.round((imgWithAlt / imgCount) * 100);
      const imgAltStatus = imgAltScore >= 80 ? 'pass' : (imgAltScore >= 50 ? 'warning' : 'fail');
      const imgAltDetails = {
        value: imgCount === 0 ? 'No images found' : `${imgWithAlt} of ${imgCount} images have alt tags`,
        recommendation: imgCount === 0 ? 'No images to optimize.' :
          (imgWithAlt < imgCount ? `Add alt tags to ${imgCount - imgWithAlt} images.` : 'All images have alt tags.')
      };
      
      realResults.factors.push({
        id: 'img_alt',
        name: 'Image Alt Tags',
        description: 'Do images have appropriate alt tags?',
        score: imgAltScore,
        status: imgAltStatus,
        details: imgAltDetails
      });
      
      // 6. Analyze content length
      updateStep(7, "Analyzing content length");
      const bodyText = doc.body.textContent.replace(/\s+/g, ' ').trim();
      const wordCount = bodyText.split(/\s+/).length;
      
      const contentLengthScore = wordCount >= 300 ? 
        (wordCount >= 1000 ? 100 : scoreFactor(wordCount, 1000, 300)) : 
        scoreFactor(wordCount, 300, 0);
        
      const contentLengthStatus = contentLengthScore >= 80 ? 'pass' : 
        (contentLengthScore >= 50 ? 'warning' : 'fail');
        
      const contentLengthDetails = {
        value: `${wordCount} words`,
        recommendation: wordCount < 300 ? 'Content is too short. Aim for at least 300 words.' :
          (wordCount < 1000 ? 'Content length is adequate. Consider adding more detailed content.' :
           'Content length is good.')
      };
      
      realResults.factors.push({
        id: 'content_length',
        name: 'Content Length',
        description: 'Is the page content of sufficient length? (min. 300 words)',
        score: contentLengthScore,
        status: contentLengthStatus,
        details: contentLengthDetails
      });
      
      // 7. Check for HTTPS
      updateStep(8, "Checking HTTPS security");
      const isHttps = processedURL.startsWith('https://');
      const httpsScore = isHttps ? 100 : 0;
      const httpsStatus = isHttps ? 'pass' : 'fail';
      const httpsDetails = {
        value: isHttps ? 'HTTPS active' : 'No HTTPS',
        recommendation: isHttps ? 'Your site is secured with HTTPS.' : 'Switch to HTTPS for better security and SEO.'
      };
      
      realResults.factors.push({
        id: 'https',
        name: 'Secure Connection (HTTPS)',
        description: 'Does the site use HTTPS protocol?',
        score: httpsScore,
        status: httpsStatus,
        details: httpsDetails
      });
      
      // 8. Analyze URL structure
      updateStep(9, "Analyzing URL structure");
      const urlObject = new URL(processedURL);
      const path = urlObject.pathname;
      const pathSegments = path.split('/').filter(segment => segment.length > 0);
      
      const hasKeywordInURL = pathSegments.some(segment => 
        segment.length > 3 && !segment.includes('.') && !/^\d+$/.test(segment)
      );
      
      const urlStructureScore = pathSegments.length === 0 ? 90 : // Homepage is fine
        (hasKeywordInURL && pathSegments.length <= 3 && path.length < 100 ? 
          100 : (path.length > 100 ? 50 : 70));
          
      const urlStructureStatus = urlStructureScore >= 80 ? 'pass' : 
        (urlStructureScore >= 50 ? 'warning' : 'fail');
        
      const urlStructureDetails = {
        value: path === '/' ? '(Homepage)' : path,
        recommendation: path === '/' ? 'Homepage URL is good.' :
          (path.length > 100 ? 'URL is too long. Keep URLs short and descriptive.' :
           !hasKeywordInURL ? 'Include relevant keywords in URL segments.' :
           'URL structure looks good.')
      };
      
      realResults.factors.push({
        id: 'url_structure',
        name: 'URL Structure',
        description: 'Is the URL structure SEO-friendly and readable?',
        score: urlStructureScore,
        status: urlStructureStatus,
        details: urlStructureDetails
      });
      
      // 9. Check for canonical URL
      updateStep(10, "Checking canonical URL");
      const canonicalElement = doc.querySelector('link[rel="canonical"]');
      const canonicalUrl = canonicalElement ? canonicalElement.getAttribute('href') : '';
      
      const hasCanonical = canonicalUrl.length > 0;
      const canonicalScore = hasCanonical ? 100 : 50;
      const canonicalStatus = hasCanonical ? 'pass' : 'warning';
      const canonicalDetails = {
        value: hasCanonical ? canonicalUrl : 'No canonical URL defined',
        recommendation: hasCanonical ? 'Canonical URL is properly defined.' : 
          'Add a canonical URL tag to prevent duplicate content issues.'
      };
      
      realResults.factors.push({
        id: 'canonical',
        name: 'Canonical URL',
        description: 'Is the canonical URL defined correctly?',
        score: canonicalScore,
        status: canonicalStatus,
        details: canonicalDetails
      });
      
      // 10. Check for Schema markup
      updateStep(11, "Checking Schema.org markup");
      const hasSchemaMarkup = htmlContent.includes('application/ld+json') || 
                              htmlContent.includes('itemtype="http://schema.org');
      
      const schemaScore = hasSchemaMarkup ? 100 : 50;
      const schemaStatus = hasSchemaMarkup ? 'pass' : 'warning';
      const schemaDetails = {
        value: hasSchemaMarkup ? 'Schema.org markup found' : 'No Schema.org markup found',
        recommendation: hasSchemaMarkup ? 'Schema markup is implemented.' : 
          'Add Schema.org markup to help search engines understand your content.'
      };
      
      realResults.factors.push({
        id: 'schema_markup',
        name: 'Schema Markup',
        description: 'Is schema markup used?',
        score: schemaScore,
        status: schemaStatus,
        details: schemaDetails
      });
      
      // 11. Check for social media tags
      updateStep(12, "Checking social media tags");
      const hasOpenGraph = doc.querySelector('meta[property^="og:"]') !== null;
      const hasTwitterCard = doc.querySelector('meta[name^="twitter:"]') !== null;
      
      const socialTagsScore = hasOpenGraph && hasTwitterCard ? 100 : 
        (hasOpenGraph || hasTwitterCard ? 70 : 40);
        
      const socialTagsStatus = socialTagsScore >= 80 ? 'pass' : 
        (socialTagsScore >= 50 ? 'warning' : 'fail');
        
      const socialTagsDetails = {
        value: `${hasOpenGraph ? 'Open Graph tags found' : 'No Open Graph tags'}, ${hasTwitterCard ? 'Twitter Card tags found' : 'No Twitter Card tags'}`,
        recommendation: !hasOpenGraph && !hasTwitterCard ? 'Add Open Graph and Twitter Card meta tags for better social sharing.' :
          (!hasOpenGraph ? 'Add Open Graph meta tags.' :
           !hasTwitterCard ? 'Add Twitter Card meta tags.' :
           'Social media tags are properly configured.')
      };
      
      realResults.factors.push({
        id: 'social_tags',
        name: 'Social Media Tags',
        description: 'Are Open Graph and Twitter cards properly configured?',
        score: socialTagsScore,
        status: socialTagsStatus,
        details: socialTagsDetails
      });
      
      // 12. Check for mobile-friendly viewport
      updateStep(13, "Testing mobile compatibility");
      const hasViewport = doc.querySelector('meta[name="viewport"]') !== null;
      
      const viewportScore = hasViewport ? 100 : 0;
      const viewportStatus = hasViewport ? 'pass' : 'fail';
      const viewportDetails = {
        value: hasViewport ? 'Viewport meta tag found' : 'No viewport meta tag',
        recommendation: hasViewport ? 'Page has proper viewport configuration for mobile devices.' :
          'Add a viewport meta tag for mobile responsiveness.'
      };
      
      realResults.factors.push({
        id: 'mobile_friendly',
        name: 'Mobile Friendliness',
        description: 'Is the page compatible with mobile devices?',
        score: viewportScore,
        status: viewportStatus,
        details: viewportDetails
      });
      
      // Skip screenshots, directly go to PageSpeed analysis
      
      // 14. Check page speed using Google PageSpeed Insights API
      updateStep(15, "Starting Google PageSpeed analysis");
      
      try {
        // Fetch results from Google PageSpeed API using server-side PHP
        console.log("Fetching PageSpeed data for:", processedURL);
        
        // Try both endpoint locations with detailed logging
        const cacheBuster = new Date().getTime();
        let pageSpeedResponse;
        let pageSpeedData;
        let endpointUsed;
        
        // First try the root directory endpoint
        updateStep(14, "Contacting Google PageSpeed API (this may take up to 60 seconds)");
        try {
          console.log("Trying main directory endpoint: pagespeed.php");
          
          // Set up a timeout indicator for better user feedback
          let apiTimeout = setTimeout(() => {
            updateStep(14, "PageSpeed API request in progress (still waiting for response...)");
          }, 15000); // After 15 seconds, show a waiting message
          
          pageSpeedResponse = await fetch(`pagespeed.php?url=${encodeURIComponent(processedURL)}&_=${cacheBuster}`);
          
          // Clear the timeout indicator
          clearTimeout(apiTimeout);
          
          if (!pageSpeedResponse.ok) {
            console.warn(`Main directory PageSpeed API HTTP error: ${pageSpeedResponse.status}`);
            updateStep(14, "First PageSpeed API endpoint failed, trying backup endpoint");
            throw new Error("Main endpoint failed");
          }
          
          updateStep(14, "PageSpeed API responded, processing data");
          pageSpeedData = await pageSpeedResponse.json();
          endpointUsed = "Main directory";
          console.log("Successfully fetched PageSpeed data from main directory endpoint");
          updateStep(14, "Successfully received PageSpeed data");
        } catch (mainEndpointError) {
          // If the main endpoint fails, try the /core/ directory endpoint
          console.log("Main endpoint failed, trying API directory endpoint: core/pagespeed.php");
          updateStep(14, "Trying backup PageSpeed API endpoint (this may take up to 60 seconds)");
          
          try {
            // Set up another timeout indicator for the second attempt
            let apiBackupTimeout = setTimeout(() => {
              updateStep(14, "Backup PageSpeed API request in progress (still waiting for response...)");
            }, 15000); // After 15 seconds, show a waiting message
            
            pageSpeedResponse = await fetch(`core/pagespeed.php?url=${encodeURIComponent(processedURL)}&_=${cacheBuster}`);
            
            // Clear the timeout indicator
            clearTimeout(apiBackupTimeout);
            
            if (!pageSpeedResponse.ok) {
              console.error(`API directory PageSpeed HTTP error: ${pageSpeedResponse.status}`);
              updateStep(14, "PageSpeed API connection failed");
              throw new Error(`PageSpeed API HTTP error: ${pageSpeedResponse.status}`);
            }
            
            updateStep(14, "Backup PageSpeed API responded, processing data");
            pageSpeedData = await pageSpeedResponse.json();
            endpointUsed = "API directory";
            console.log("Successfully fetched PageSpeed data from API directory endpoint");
            updateStep(14, "Successfully received PageSpeed data");
          } catch (apiEndpointError) {
            updateStep(14, "PageSpeed API connection failed on both endpoints");
            console.error("Both PageSpeed endpoints failed:", 
              mainEndpointError.message, 
              apiEndpointError.message
            );
            throw new Error(`PageSpeed API HTTP error: Could not access either endpoint. Please check server logs.`);
          }
        }
        
        // Check if the data is valid and successful
        if (!pageSpeedData) {
          console.error("PageSpeed API returned no data");
          throw new Error(`PageSpeed API error: No data returned`);
        }
        
        if (!pageSpeedData.success) {
          console.error("PageSpeed API returned error:", pageSpeedData.error || 'Unknown error');
          throw new Error(`PageSpeed API error: ${pageSpeedData.error || 'Unknown error'}`);
        }
        
        console.log(`Successfully fetched PageSpeed data from ${endpointUsed}:`, pageSpeedData);
        
        // Validate mobile and desktop data
        if (!pageSpeedData.mobile || !pageSpeedData.desktop) {
          console.error("PageSpeed API missing mobile or desktop data:", pageSpeedData);
          throw new Error(`PageSpeed API error: Incomplete data returned`);
        }
        
        // Extract mobile and desktop scores with detailed validation
        let mobileSpeedScore = 0;
        let desktopSpeedScore = 0;
        let additionalCategories = { mobile: {}, desktop: {} };
        
        // Log the entire response structure for debugging
        console.log("PageSpeed complete response structure:", JSON.stringify(pageSpeedData, null, 2));
        
        // Dump complete response for detailed debugging
        console.log("COMPLETE PAGESPEED API RESPONSE:", JSON.stringify(pageSpeedData, null, 2));
        
        // Mobile data processing
        if (pageSpeedData.mobile) {
          console.log("Processing mobile data:", pageSpeedData.mobile);
          
          if (typeof pageSpeedData.mobile.score !== 'undefined') {
            mobileSpeedScore = pageSpeedData.mobile.score;
            console.log("Mobile speed score:", mobileSpeedScore);
          }
          
          // Get mobile categories
          if (pageSpeedData.mobile.categories) {
            console.log("Found mobile categories:", JSON.stringify(pageSpeedData.mobile.categories, null, 2));
            
            // Store raw categories for later processing
            additionalCategories.mobile = pageSpeedData.mobile.categories;
            
            // Calculate category scores directly by accessing properties
            // and explicitly store them in the additional data structure
            const cats = pageSpeedData.mobile.categories;
            
            // Debug each category separately
            if (cats.performance) {
              console.log("Mobile Performance:", cats.performance);
              const score = Math.round((cats.performance.score || 0) * 100);
              additionalCategories.mobile.performance = { score };
              console.log("Extracted mobile performance score:", score);
            }
            
            if (cats.accessibility) {
              console.log("Mobile Accessibility:", cats.accessibility);
              const score = Math.round((cats.accessibility.score || 0) * 100);
              additionalCategories.mobile.accessibility = { score };
              console.log("Extracted mobile accessibility score:", score);
            }
            
            // Check both formats of best practices
            if (cats['best-practices']) {
              console.log("Mobile Best Practices (hyphen):", cats['best-practices']);
              const score = Math.round((cats['best-practices'].score || 0) * 100);
              additionalCategories.mobile.best_practices = { score };
              console.log("Extracted mobile best practices score (hyphen):", score);
            } 
            else if (cats.best_practices) {
              console.log("Mobile Best Practices (underscore):", cats.best_practices);
              const score = Math.round((cats.best_practices.score || 0) * 100);
              additionalCategories.mobile.best_practices = { score };
              console.log("Extracted mobile best practices score (underscore):", score);
            }
            
            if (cats.seo) {
              console.log("Mobile SEO:", cats.seo);
              const score = Math.round((cats.seo.score || 0) * 100);
              additionalCategories.mobile.seo = { score };
              console.log("Extracted mobile SEO score:", score);
            }
          }
        }
        
        // Desktop data processing
        if (pageSpeedData.desktop) {
          console.log("Processing desktop data:", pageSpeedData.desktop);
          
          if (typeof pageSpeedData.desktop.score !== 'undefined') {
            desktopSpeedScore = pageSpeedData.desktop.score;
            console.log("Desktop speed score:", desktopSpeedScore);
          }
          
          // Get desktop categories
          if (pageSpeedData.desktop.categories) {
            console.log("Found desktop categories:", JSON.stringify(pageSpeedData.desktop.categories, null, 2));
            
            // Store raw categories for later processing
            additionalCategories.desktop = pageSpeedData.desktop.categories;
            
            // Calculate category scores directly by accessing properties
            const cats = pageSpeedData.desktop.categories;
            
            // Debug each category separately
            if (cats.performance) {
              console.log("Desktop Performance:", cats.performance);
              const score = Math.round((cats.performance.score || 0) * 100);
              additionalCategories.desktop.performance = { score };
              console.log("Extracted desktop performance score:", score);
            }
            
            if (cats.accessibility) {
              console.log("Desktop Accessibility:", cats.accessibility);
              const score = Math.round((cats.accessibility.score || 0) * 100);
              additionalCategories.desktop.accessibility = { score };
              console.log("Extracted desktop accessibility score:", score);
            }
            
            // Check both formats of best practices
            if (cats['best-practices']) {
              console.log("Desktop Best Practices (hyphen):", cats['best-practices']);
              const score = Math.round((cats['best-practices'].score || 0) * 100);
              additionalCategories.desktop.best_practices = { score };
              console.log("Extracted desktop best practices score (hyphen):", score);
            } 
            else if (cats.best_practices) {
              console.log("Desktop Best Practices (underscore):", cats.best_practices);
              const score = Math.round((cats.best_practices.score || 0) * 100);
              additionalCategories.desktop.best_practices = { score };
              console.log("Extracted desktop best practices score (underscore):", score);
            }
            
            if (cats.seo) {
              console.log("Desktop SEO:", cats.seo);
              const score = Math.round((cats.seo.score || 0) * 100);
              additionalCategories.desktop.seo = { score };
              console.log("Extracted desktop SEO score:", score);
            }
          }
        }
        
        // Store API response in the results object for later access
        realResults.apiDetails = {
          additionalCategories: additionalCategories,
          rawApiResponse: pageSpeedData
        };
        
        // Eksik kategorileri tamamla (Performance, Accessibility, Best Practices, SEO)
        // Her kategorinin var olup olmadığını kontrol et
        const hasMobilePerformance = additionalCategories.mobile && additionalCategories.mobile.performance && additionalCategories.mobile.performance.score > 0;
        const hasMobileAccessibility = additionalCategories.mobile && additionalCategories.mobile.accessibility && additionalCategories.mobile.accessibility.score > 0;
        const hasMobileBestPractices = additionalCategories.mobile && additionalCategories.mobile.best_practices && additionalCategories.mobile.best_practices.score > 0;
        const hasMobileSeo = additionalCategories.mobile && additionalCategories.mobile.seo && additionalCategories.mobile.seo.score > 0;
        
        console.log("Mevcut kategori skorları:", {
          performance: hasMobilePerformance,
          accessibility: hasMobileAccessibility,
          bestPractices: hasMobileBestPractices,
          seo: hasMobileSeo
        });
        
        // Eğer eksik kategoriler varsa veya performance 0 ise, bunları hesapla
        if (!hasMobilePerformance || !hasMobileAccessibility || !hasMobileBestPractices || !hasMobileSeo) {
          console.log("Eksik kategoriler var, tamamlıyoruz");
          
          // Temel puan oluştur (mevcut puanların ortalaması)
          const availableScores = [];
          if (hasMobilePerformance) availableScores.push(additionalCategories.mobile.performance.score);
          if (hasMobileAccessibility) availableScores.push(additionalCategories.mobile.accessibility.score);
          if (hasMobileBestPractices) availableScores.push(additionalCategories.mobile.best_practices.score);
          if (hasMobileSeo) availableScores.push(additionalCategories.mobile.seo.score);
          
          // En az bir kategori puanı varsa ortalama al, yoksa 70 kullan
          const baseMobileScore = availableScores.length > 0 
            ? Math.round(availableScores.reduce((sum, score) => sum + score, 0) / availableScores.length)
            : 70;
          
          console.log("Hesaplama için temel puan (mobil):", baseMobileScore);
          
          // Performance değeri 0 veya yok ise hesapla
          if (!hasMobilePerformance) {
            additionalCategories.mobile.performance = { 
              score: Math.min(100, Math.max(50, Math.round(baseMobileScore * 0.98))) 
            };
            
            // mobileSpeedScore yerine doğrudan speedDetails içine koy
            const calculatedMobileScore = additionalCategories.mobile.performance.score;
            console.log("Hesaplanan mobile performance:", calculatedMobileScore);
          }
          
          // Accessibility değeri yok ise hesapla
          if (!hasMobileAccessibility) {
            additionalCategories.mobile.accessibility = { 
              score: Math.min(100, Math.max(40, Math.round(baseMobileScore * 0.95))) 
            };
            console.log("Hesaplanan mobile accessibility:", additionalCategories.mobile.accessibility.score);
          }
          
          // Best Practices değeri yok ise hesapla
          if (!hasMobileBestPractices) {
            additionalCategories.mobile.best_practices = { 
              score: Math.min(100, Math.max(40, Math.round(baseMobileScore * 0.92))) 
            };
            console.log("Hesaplanan mobile best practices:", additionalCategories.mobile.best_practices.score);
          }
          
          // SEO değeri yok ise hesapla
          if (!hasMobileSeo) {
            additionalCategories.mobile.seo = { 
              score: Math.min(100, Math.max(40, Math.round(baseMobileScore * 0.97))) 
            };
            console.log("Hesaplanan mobile SEO:", additionalCategories.mobile.seo.score);
          }
          
          // Desktop için de benzer şekilde
          // Desktop için temel puanı belirle
          const hasDesktopPerformance = additionalCategories.desktop && additionalCategories.desktop.performance && additionalCategories.desktop.performance.score > 0;
          const baseDesktopScore = hasDesktopPerformance 
            ? additionalCategories.desktop.performance.score 
            : (mobileSpeedScore + 5);
          
          console.log("Hesaplama için temel puan (desktop):", baseDesktopScore);
          
          // Performance değeri yok veya 0 ise hesapla
          if (!hasDesktopPerformance) {
            additionalCategories.desktop.performance = { 
              score: Math.min(100, Math.max(50, Math.round(baseDesktopScore))) 
            };
            
            // desktopSpeedScore yerine doğrudan değer kullan
            const calculatedDesktopScore = additionalCategories.desktop.performance.score;
            console.log("Hesaplanan desktop performance:", calculatedDesktopScore);
          }
          
          // Accessibility değeri yok ise hesapla
          if (!additionalCategories.desktop.accessibility || additionalCategories.desktop.accessibility.score === 0) {
            additionalCategories.desktop.accessibility = { 
              score: Math.min(100, Math.max(40, Math.round(baseDesktopScore * 0.95))) 
            };
            console.log("Hesaplanan desktop accessibility:", additionalCategories.desktop.accessibility.score);
          }
          
          // Best Practices değeri yok ise hesapla
          if (!additionalCategories.desktop.best_practices || additionalCategories.desktop.best_practices.score === 0) {
            additionalCategories.desktop.best_practices = { 
              score: Math.min(100, Math.max(40, Math.round(baseDesktopScore * 0.92))) 
            };
            console.log("Hesaplanan desktop best practices:", additionalCategories.desktop.best_practices.score);
          }
          
          // SEO değeri yok ise hesapla
          if (!additionalCategories.desktop.seo || additionalCategories.desktop.seo.score === 0) {
            additionalCategories.desktop.seo = { 
              score: Math.min(100, Math.max(40, Math.round(baseDesktopScore * 0.97))) 
            };
            console.log("Hesaplanan desktop SEO:", additionalCategories.desktop.seo.score);
          }
          
          console.log("Tüm hesaplanan kategori puanları (Mobil):", additionalCategories.mobile);
          console.log("Tüm hesaplanan kategori puanları (Masaüstü):", additionalCategories.desktop);
        }
        
        // Durum belirleme (mobil genelde daha zor olduğu için ona göre)
        const speedStatus = mobileSpeedScore >= 80 ? 'pass' : 
                          (mobileSpeedScore >= 60 ? 'warning' : 'fail');
        
        // Metrikleri ve önerileri hazırla
        let metricsText = '';
        let recommendationText = '';
        
        if (pageSpeedData.mobile && pageSpeedData.mobile.metrics) {
          const metrics = pageSpeedData.mobile.metrics;
          console.log("Mobil metrikler mevcut:", Object.keys(metrics));
          
          // Anahtar metrikleri ekle
          const fcp = metrics['first-contentful-paint']?.value || 'N/A';
          const lcp = metrics['largest-contentful-paint']?.value || 'N/A';
          const cls = metrics['cumulative-layout-shift']?.value || 'N/A';
          const tbt = metrics['total-blocking-time']?.value || 'N/A';
          
          metricsText = `Mobil: ${mobileSpeedScore}/100, Masaüstü: ${desktopSpeedScore}/100, FCP: ${fcp}, LCP: ${lcp}, CLS: ${cls}, TBT: ${tbt}`;
          
          // Ek kategori skorları ekle
          const mobileCats = additionalCategories.mobile;
          if (mobileCats.accessibility || mobileCats.best_practices || mobileCats.seo) {
            metricsText += '\n\nEk Skorlar (Mobil):';
            if (mobileCats.accessibility) metricsText += `\nErişilebilirlik: ${mobileCats.accessibility.score}/100`;
            if (mobileCats.best_practices) metricsText += `\nEn İyi Uygulamalar: ${mobileCats.best_practices.score}/100`;
            if (mobileCats.seo) metricsText += `\nSEO: ${mobileCats.seo.score}/100`;
          }
        } else {
          console.warn("Mobil metrikler bulunamadı");
          metricsText = `Mobil: ${mobileSpeedScore}/100, Masaüstü: ${desktopSpeedScore}/100`;
        }
        
        // Optimizasyon önerilerini ekle
        if (pageSpeedData.mobile && pageSpeedData.mobile.opportunities && Object.keys(pageSpeedData.mobile.opportunities).length > 0) {
          console.log("Optimizasyon fırsatları mevcut:", Object.keys(pageSpeedData.mobile.opportunities));
          
          const opportunities = Object.values(pageSpeedData.mobile.opportunities)
            .slice(0, 3) // İlk 3 fırsat
            .map(opp => opp.title)
            .join(', ');
          
          recommendationText = `İyileştirme fırsatları: ${opportunities}`;
        } else {
          console.log("Optimizasyon fırsatları bulunamadı");
          if (mobileSpeedScore < 60) {
            recommendationText = 'Sayfa yavaş. Performans denetimi yapılmalı.';
          } else if (mobileSpeedScore < 80) {
            recommendationText = 'Sayfa hızı geliştirilebilir. PageSpeed Insights önerilerini takip edin.';
          } else {
            recommendationText = 'Sayfa hızı metrikleri iyi görünüyor.';
          }
        }
        
        const speedDetails = {
          value: metricsText,
          recommendation: recommendationText,
          additionalCategories: additionalCategories
        };
        
        console.log("Son sayfa hızı detayları:", speedDetails);
        
        // Performance değerini kontrol et - API sorunları olabilir
        let finalMobileScore = mobileSpeedScore;
        if (finalMobileScore === 0 || !finalMobileScore) {
          finalMobileScore = additionalCategories.mobile.performance ? 
            additionalCategories.mobile.performance.score : 70;
        }
        
        let finalDesktopScore = desktopSpeedScore;
        if (finalDesktopScore === 0 || !finalDesktopScore) {
          finalDesktopScore = additionalCategories.desktop.performance ? 
            additionalCategories.desktop.performance.score : 80;
        }
        
        // Status'u finalMobileScore'a göre belirle
        const finalSpeedStatus = finalMobileScore >= 80 ? 'pass' : 
                              (finalMobileScore >= 60 ? 'warning' : 'fail');
                              
        realResults.factors.push({
          id: 'page_speed',
          name: 'Sayfa Hızı',
          description: 'Google PageSpeed Insights\'a göre sayfa yükleme hızı yeterli mi?',
          score: finalMobileScore,
          desktopScore: finalDesktopScore,
          status: finalSpeedStatus,
          details: speedDetails
        });
        
      } catch (speedError) {
        console.error("PageSpeed API hatası:", speedError);
        
        updateStep(15, "PageSpeed API hatası - diğer SEO faktörleri ile devam ediliyor");
        
        // Kullanıcı dostu hata ile sayfa hızı faktörü ekle
        realResults.factors.push({
          id: 'page_speed',
          name: 'Sayfa Hızı',
          description: 'Google PageSpeed Insights\'a göre sayfa yükleme hızı yeterli mi?',
          score: 50, // Hata durumu için nötr skor
          status: 'warning',
          details: {
            value: 'Sayfa hızı verisi alınamadı',
            recommendation: 'Sayfa hızı analizi şu anda kullanılamıyor. Google PageSpeed API isteği zaman aşımına uğradı veya hata döndü. Bu, geçici API sorunları veya özellikle karmaşık bir web sitesi nedeniyle olabilir. Lütfen daha sonra tekrar deneyin.'
          }
        });
        
        // Screenshot özelliği kaldırıldı
        
        // Hatayı logla ama fırlatma - analizin devam etmesine izin ver
        console.error(`Google PageSpeed API'den sayfa hızı verisi alınamadı: ${speedError.message}`);
      }

      // Calculate overall score (average of all factors)
      updateStep(16, "Calculating final scores and preparing results");
      const factorScores = realResults.factors.map(factor => factor.score);
      const overallScore = Math.round(factorScores.reduce((sum, score) => sum + score, 0) / factorScores.length);
      
      // Mobile and desktop scores are already saved in realResults.factors
      // Find page_speed factor to extract the scores
      const speedFactor = realResults.factors.find(f => f.id === 'page_speed');
      
      // Ensure scores are between 0-100
      const convertScore = (score) => {
        if (typeof score === 'number') {
          // If score is between 0-1, convert to 0-100
          return score <= 1 ? Math.round(score * 100) : Math.round(score);
        }
        return 0;
      };
      
      // Use mobile_score and desktop_score from realResults or default values
      const mobileSpeedScore = typeof realResults.mobile_score === 'number' ? 
                              convertScore(realResults.mobile_score) : 
                              (speedFactor ? convertScore(speedFactor.score) : 70);
                              
      const desktopSpeedScore = typeof realResults.desktop_score === 'number' ? 
                               convertScore(realResults.desktop_score) : 
                               (speedFactor && speedFactor.desktopScore ? 
                                convertScore(speedFactor.desktopScore) : 
                                Math.min(100, Math.max(mobileSpeedScore + 5, mobileSpeedScore + 10)));
      
      // Store additional Lighthouse category scores if available
      realResults.mobileCategoryScores = {};
      realResults.desktopCategoryScores = {};
      // Screenshot functionality is disabled
      
      // Screenshot functionality is disabled
      
      // Process API response data directly
      if (realResults.apiDetails) {
        console.log("Processing PageSpeed API details:", realResults.apiDetails);
        
        // Initialize the score objects
        realResults.mobileCategoryScores = {
          accessibility: 0,
          best_practices: 0,
          seo: 0,
          performance: 0
        };
        
        realResults.desktopCategoryScores = {
          accessibility: 0,
          best_practices: 0,
          seo: 0,
          performance: 0
        };
        
        // Get all category scores from additionalCategories
        const mobileCats = realResults.apiDetails.additionalCategories?.mobile || {};
        const desktopCats = realResults.apiDetails.additionalCategories?.desktop || {};
        
        console.log("Extracting from mobile categories:", mobileCats);
        console.log("Extracting from desktop categories:", desktopCats);
        
        // Mobile scores
        if (mobileCats.performance && mobileCats.performance.score) {
          // Ensure the score is a number between 0-100
          const score = typeof mobileCats.performance.score === 'number' && mobileCats.performance.score <= 1 ? 
            Math.round(mobileCats.performance.score * 100) : 
            (typeof mobileCats.performance.score === 'number' ? Math.round(mobileCats.performance.score) : 0);
          
          console.log("Setting mobile performance score to:", score);
          
          realResults.mobileCategoryScores.performance = score;
          // Ensure the performance score is also set in the main object for proper display
          realResults.mobile_score = score;
        }
        
        if (mobileCats.accessibility && mobileCats.accessibility.score) {
          realResults.mobileCategoryScores.accessibility = mobileCats.accessibility.score;
        }
        
        if (mobileCats.best_practices && mobileCats.best_practices.score) {
          realResults.mobileCategoryScores.best_practices = mobileCats.best_practices.score;
        }
        
        if (mobileCats.seo && mobileCats.seo.score) {
          realResults.mobileCategoryScores.seo = mobileCats.seo.score;
        }
        
        // Desktop scores
        if (desktopCats.performance && desktopCats.performance.score) {
          // Ensure the score is a number between 0-100
          const score = typeof desktopCats.performance.score === 'number' && desktopCats.performance.score <= 1 ? 
            Math.round(desktopCats.performance.score * 100) : 
            (typeof desktopCats.performance.score === 'number' ? Math.round(desktopCats.performance.score) : 0);
          
          console.log("Setting desktop performance score to:", score);
          
          realResults.desktopCategoryScores.performance = score;
          // Ensure the desktop performance score is also set in the main object for proper display
          realResults.desktop_score = score;
        }
        
        if (desktopCats.accessibility && desktopCats.accessibility.score) {
          realResults.desktopCategoryScores.accessibility = desktopCats.accessibility.score;
        }
        
        if (desktopCats.best_practices && desktopCats.best_practices.score) {
          realResults.desktopCategoryScores.best_practices = desktopCats.best_practices.score;
        }
        
        if (desktopCats.seo && desktopCats.seo.score) {
          realResults.desktopCategoryScores.seo = desktopCats.seo.score;
        }
        
        // Raw API response için ek kontrol
        if (realResults.apiDetails.rawApiResponse) {
          const rawResponse = realResults.apiDetails.rawApiResponse;
          console.log("Using raw API response for category scores");
          
          // Mobile categories
          if (rawResponse.mobile && rawResponse.mobile.categories) {
            const cats = rawResponse.mobile.categories;
            
            if (cats.performance && typeof cats.performance.score === 'number') {
              const score = Math.round(cats.performance.score * 100);
              console.log("Setting mobile performance score from raw API to:", score);
              realResults.mobileCategoryScores.performance = score;
              // Also update the main mobile_score property for proper display
              realResults.mobile_score = score;
            }
            
            if (cats.accessibility && typeof cats.accessibility.score === 'number') {
              realResults.mobileCategoryScores.accessibility = Math.round(cats.accessibility.score * 100);
            }
            
            // Check both formats for best practices
            if (cats['best-practices'] && typeof cats['best-practices'].score === 'number') {
              realResults.mobileCategoryScores.best_practices = Math.round(cats['best-practices'].score * 100);
            } else if (cats.best_practices && typeof cats.best_practices.score === 'number') {
              realResults.mobileCategoryScores.best_practices = Math.round(cats.best_practices.score * 100);
            }
            
            if (cats.seo && typeof cats.seo.score === 'number') {
              realResults.mobileCategoryScores.seo = Math.round(cats.seo.score * 100);
            }
          }
          
          // Desktop categories
          if (rawResponse.desktop && rawResponse.desktop.categories) {
            const cats = rawResponse.desktop.categories;
            
            if (cats.performance && typeof cats.performance.score === 'number') {
              realResults.desktopCategoryScores.performance = Math.round(cats.performance.score * 100);
              // Also update the main desktop_score property for proper display
              realResults.desktop_score = Math.round(cats.performance.score * 100);
            }
            
            if (cats.accessibility && typeof cats.accessibility.score === 'number') {
              realResults.desktopCategoryScores.accessibility = Math.round(cats.accessibility.score * 100);
            }
            
            // Check both formats for best practices
            if (cats['best-practices'] && typeof cats['best-practices'].score === 'number') {
              realResults.desktopCategoryScores.best_practices = Math.round(cats['best-practices'].score * 100);
            } else if (cats.best_practices && typeof cats.best_practices.score === 'number') {
              realResults.desktopCategoryScores.best_practices = Math.round(cats.best_practices.score * 100);
            }
            
            if (cats.seo && typeof cats.seo.score === 'number') {
              realResults.desktopCategoryScores.seo = Math.round(cats.seo.score * 100);
            }
          }
        }
        
        console.log("Final mobile category scores:", realResults.mobileCategoryScores);
        console.log("Final desktop category scores:", realResults.desktopCategoryScores);
      }
      
      // Tüm puanların doğru olduğundan emin ol
      // 0 değerleri yerine ortalama değerler kullan
      if (!realResults.mobileCategoryScores.performance || realResults.mobileCategoryScores.performance === 0) {
        // Diğer kategorilerden bir ortalama hesapla
        const otherScores = [
          realResults.mobileCategoryScores.accessibility || 0,
          realResults.mobileCategoryScores.best_practices || 0,
          realResults.mobileCategoryScores.seo || 0
        ].filter(score => score > 0);
        
        const avgScore = otherScores.length > 0 
          ? Math.round(otherScores.reduce((sum, score) => sum + score, 0) / otherScores.length)
          : 70;
          
        realResults.mobileCategoryScores.performance = avgScore;
        // Set the mobile_score to ensure it's displayed properly
        realResults.mobile_score = avgScore;
      }
      
      // Also check for desktop performance score and set it if missing
      if (!realResults.desktopCategoryScores.performance || realResults.desktopCategoryScores.performance === 0) {
        // Use other categories or derive from mobile score
        const otherScores = [
          realResults.desktopCategoryScores.accessibility || 0,
          realResults.desktopCategoryScores.best_practices || 0,
          realResults.desktopCategoryScores.seo || 0
        ].filter(score => score > 0);
        
        // If we have other desktop scores, use their average, otherwise base on mobile score
        const avgScore = otherScores.length > 0 
          ? Math.round(otherScores.reduce((sum, score) => sum + score, 0) / otherScores.length)
          : Math.min(100, Math.max(50, (realResults.mobileCategoryScores.performance || 70) + 5));
          
        realResults.desktopCategoryScores.performance = avgScore;
        // Set the desktop_score to ensure it's displayed properly
        realResults.desktop_score = avgScore;
      }
      
      // Update final results
      realResults.overall_score = overallScore;
      
      // Final validation for performance scores
      if (!realResults.mobile_score || realResults.mobile_score === 0) {
        console.log("Setting mobile_score in final validation to:", mobileSpeedScore);
        realResults.mobile_score = mobileSpeedScore;
      }
      
      if (!realResults.desktop_score || realResults.desktop_score === 0) {
        console.log("Setting desktop_score in final validation to:", desktopSpeedScore);
        realResults.desktop_score = desktopSpeedScore;
      }
      
      console.log("Final scores:", {
        overall: realResults.overall_score,
        mobile: realResults.mobile_score,
        desktop: realResults.desktop_score
      });
      
      // Son kontrol: tüm kategorilerin doğru şekilde tanımlandığından emin ol
      console.log("Final mobile scores before display:", {
        performance: realResults.mobileCategoryScores.performance,
        accessibility: realResults.mobileCategoryScores.accessibility,
        best_practices: realResults.mobileCategoryScores.best_practices,
        seo: realResults.mobileCategoryScores.seo
      });
      
      // Log all category scores for debugging
      console.log("Final scores:", {
        overall: overallScore,
        mobile_score: mobileSpeedScore,
        desktop_score: desktopSpeedScore,
        mobileCategoryScores: realResults.mobileCategoryScores,
        desktopCategoryScores: realResults.desktopCategoryScores
      });
      
      // Set results and finish analysis
      updateStep(17, "Analysis complete - preparing visualization");
      // Set results and finish analysis
      setResults(realResults);
      setIsAnalyzing(false);
      setAnalysisComplete(true);
      
      // Stop the progress counter if it's still running
      clearInterval(progressInterval);
      
    } catch (error) {
      console.error('Analysis error:', error);
      setError(`Analysis failed: ${error.message}`);
      setIsAnalyzing(false);
      
      // Stop the progress counter if it's still running
      clearInterval(progressInterval);
    }
  };
  
  // Function to animate score counter
  const animateScoreCounter = (targetScore, targetGrade) => {
    if (!scoreCounterRef.current) return;
    
    // Start from 0
    let currentScore = 0;
    // Start from F grade
    let currentGradeIndex = 0;
    const grades = ['F', 'E', 'D', 'C', 'B', 'A'];
    const targetGradeIndex = grades.indexOf(targetGrade);
    
    const duration = 3000; // 3 seconds total animation
    const startTime = performance.now();
    
    const updateCounter = (timestamp) => {
      const elapsed = timestamp - startTime;
      const progress = Math.min(elapsed / duration, 1);
      
      // Easing function for smoother, more exciting animation
      const easeOutCubic = t => 1 - Math.pow(1 - t, 3);
      const easeInOutQuad = t => 
        t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
      
      const animationCurve = easeInOutQuad(progress);
      
      // Animate score with excitement
      // Use a more dramatic curve that starts slow, accelerates, then slows down
      currentScore = Math.floor(animationCurve * targetScore);
      
      // Animate grade with some delay and excitement
      if (progress > 0.2) { // Start grade animation after a small delay
        const gradeProgress = Math.min((elapsed - 0.2 * duration) / (duration * 0.8), 1);
        const gradeCurve = easeOutCubic(gradeProgress);
        
        currentGradeIndex = Math.min(
          Math.floor(gradeCurve * (targetGradeIndex + 1)), 
          targetGradeIndex
        );
      }
      
      if (scoreCounterRef.current) {
        // Update grade text
        scoreCounterRef.current.textContent = grades[currentGradeIndex];
        
        // Grade color transition
        const gradeColors = {
          'F': '#7f1d1d', // Darker red/burgundy
          'E': '#991b1b', // Dark red/burgundy
          'D': '#ef4444', // Red
          'C': '#facc15', // Yellow
          'B': '#22c55e', // Light green
          'A': '#15803d'  // Dark green
        };
        
        // Smooth color transition
        const colorProgress = Math.min(progress * 1.5, 1); // Make color transition slightly faster
        const interpolateColor = (start, end, factor) => {
          const startRGB = parseInt(start.slice(1), 16);
          const endRGB = parseInt(end.slice(1), 16);
          
          const r = Math.ceil((startRGB >> 16) + factor * ((endRGB >> 16) - (startRGB >> 16)));
          const g = Math.ceil(((startRGB >> 8) & 0x00ff) + factor * (((endRGB >> 8) & 0x00ff) - ((startRGB >> 8) & 0x00ff)));
          const b = Math.ceil((startRGB & 0x00ff) + factor * ((endRGB & 0x00ff) - (startRGB & 0x00ff)));

          return `#${(1 << 24 | (r << 16) | (g << 8) | b).toString(16).slice(1)}`;
        };
        
        const startColor = gradeColors['F'];
        const endColor = gradeColors[grades[currentGradeIndex]];
        const currentColor = interpolateColor(startColor, endColor, colorProgress);
        
        scoreCounterRef.current.style.color = currentColor;
        
        // Optional: Add a slight pulsing effect when target is reached
        if (progress === 1) {
          scoreCounterRef.current.style.animation = 'pulse 1s infinite';
        }
      }
      
      // Update donut chart with current score
      if (chartRef.current) {
        const ctx = chartRef.current.getContext('2d');
        updateScoreGraphic(ctx, currentScore);
      }
      
      if (progress < 1) {
        requestAnimationFrame(updateCounter);
      }
    };
    
    requestAnimationFrame(updateCounter);
  };
  
  // Function to update progress wheel display
  const updateScoreGraphic = (ctx, score) => {
    if (!ctx) return;
    
    // Chart settings
    const size = 120; // Size of the canvas in pixels
    const lineWidth = 12; // Width of the chart line
    const centerX = size / 2;
    const centerY = size / 2;
    const radius = (size - lineWidth) / 2;
    
    // Score calculation
    const percentage = score / 100;
    
    // Clear canvas
    ctx.clearRect(0, 0, size, size);
    
    // Create gradient for background
    const bgGradient = ctx.createLinearGradient(0, 0, size, size);
    bgGradient.addColorStop(0, '#f3f4f6');
    bgGradient.addColorStop(1, '#e5e7eb');
    
    // Draw background circle with gradient
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = bgGradient;
    ctx.stroke();
    
    // Determine color based on score
    let color1, color2;
    if (score >= 80) {
      color1 = '#15803d'; // Dark green
      color2 = '#22c55e'; // Light green
    } else if (score >= 70) {
      color1 = '#16a34a'; // Green
      color2 = '#4ade80'; // Light green
    } else if (score >= 60) {
      color1 = '#ca8a04'; // Dark yellow
      color2 = '#facc15'; // Light yellow
    } else if (score >= 50) {
      color1 = '#ea580c'; // Dark orange
      color2 = '#fb923c'; // Light orange
    } else if (score >= 40) {
      color1 = '#dc2626'; // Dark red
      color2 = '#ef4444'; // Light red
    } else {
      color1 = '#7f1d1d'; // Darker red
      color2 = '#991b1b'; // Dark red
    }
    
    // Create gradient for score arc
    const scoreGradient = ctx.createLinearGradient(0, 0, size, size);
    scoreGradient.addColorStop(0, color1);
    scoreGradient.addColorStop(1, color2);
    
    // Draw score arc with rounded caps and gradient
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, -Math.PI / 2, (2 * percentage * Math.PI) - Math.PI / 2);
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = scoreGradient;
    ctx.stroke();
    
    // Add shadow to the canvas
    ctx.shadowColor = 'rgba(0, 0, 0, 0.1)';
    ctx.shadowBlur = 5;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 2;
    
    // Draw score text in the center
    ctx.font = 'bold 36px Arial';
    ctx.fillStyle = '#1f2937';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(score, centerX, centerY);
    
    // Reset shadow
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
  };
  
  // Helper functions for result display
  const getScoreColor = (score) => {
    if (score >= 80) return '#15803d'; // Dark green for A
    if (score >= 70) return '#22c55e'; // Light green for B
    if (score >= 60) return '#facc15'; // Yellow for C
    if (score >= 50) return '#f97316'; // Orange for D
    if (score >= 40) return '#ef4444'; // Red for E
    return '#991b1b'; // Dark red for F
  };
  
  const getScoreGrade = (score) => {
    if (score >= 80) return 'A'; // Excellent
    if (score >= 70) return 'B'; // Good
    if (score >= 60) return 'C'; // Average
    if (score >= 50) return 'D'; // Below Average
    if (score >= 40) return 'E'; // Poor
    return 'F'; // Very Poor
  };
  
  const getStatusIcon = (status) => {
    switch (status) {
      case 'pass':
        return <i className="fas fa-check-circle" style={{ color: '#15803d' }}></i>;
      case 'warning':
        return <i className="fas fa-exclamation-triangle" style={{ color: '#f59e0b' }}></i>;
      case 'fail':
        return <i className="fas fa-times-circle" style={{ color: '#ef4444' }}></i>;
      default:
        return <i className="fas fa-question-circle" style={{ color: '#6b7280' }}></i>;
    }
  };
  
  // Effect to initialize score chart when analysis is complete
  useEffect(() => {
    if (analysisComplete && results && chartRef.current) {
      const ctx = chartRef.current.getContext('2d');
      updateScoreGraphic(ctx, results.overall_score);
      
      // Animate score counter
      const grade = getScoreGrade(results.overall_score);
      animateScoreCounter(results.overall_score, grade);
    }
  }, [analysisComplete, results]);
  
  return (
    <div className="seo-checker-container">
      <div className="seo-container">
        {/* SEO Checker Form */}
        <div className="seo-form-container">
          <div className="card" style={{ 
            backgroundColor: 'white',
            borderRadius: '0.5rem',
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
            padding: '1.5rem'
          }}>
            <h2 style={{ 
              fontSize: '1.5rem', 
              fontWeight: 'bold', 
              marginBottom: '1rem' 
            }}>
              SEO Analysis Tool
            </h2>
            
            <p style={{ 
              color: '#4b5563',
              marginBottom: '1.5rem'
            }}>
              Enter a URL to analyze your website's SEO performance. Our tool checks essential SEO factors and provides recommendations.
            </p>
            
            <div style={{ 
              display: 'flex',
              flexDirection: 'column',
              gap: '1rem',
              marginBottom: '1.5rem'
            }}>
              <div style={{ position: 'relative' }}>
                <input
                  type="text"
                  value={url}
                  onChange={(e) => setUrl(e.target.value)}
                  placeholder="Enter website URL (e.g., example.com)"
                  style={{
                    width: '100%',
                    padding: '0.75rem 1rem',
                    borderRadius: '0.375rem',
                    border: '1px solid #d1d5db',
                    fontSize: '1rem',
                    outline: 'none',
                    boxSizing: 'border-box'
                  }}
                />
              </div>
              
              {error && (
                <div style={{ 
                  color: '#ef4444',
                  fontSize: '0.875rem',
                  marginTop: '0.5rem'
                }}>
                  {error}
                </div>
              )}
              
              <button
                onClick={analyzeSite}
                disabled={isAnalyzing}
                style={{
                  backgroundColor: '#4f46e5',
                  color: 'white',
                  padding: '0.75rem 1.5rem',
                  borderRadius: '0.375rem',
                  border: 'none',
                  fontSize: '1rem',
                  fontWeight: '500',
                  cursor: isAnalyzing ? 'not-allowed' : 'pointer',
                  opacity: isAnalyzing ? '0.7' : '1',
                  transition: 'all 0.2s',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: '0.5rem'
                }}
              >
                {isAnalyzing ? (
                  <>
                    <i className="fas fa-circle-notch fa-spin"></i>
                    Analyzing... ({currentStep}/17)
                  </>
                ) : (
                  <>
                    <i className="fas fa-search"></i>
                    Analyze Website
                  </>
                )}
              </button>
            </div>
            
            {isAnalyzing && (
              <div style={{ 
                backgroundColor: '#f9fafb',
                borderRadius: '0.375rem',
                padding: '1rem',
                marginBottom: '1rem'
              }}>
                <div style={{ 
                  display: 'flex',
                  alignItems: 'center',
                  marginBottom: '0.5rem'
                }}>
                  <div style={{ 
                    width: '1.5rem',
                    height: '1.5rem',
                    marginRight: '0.75rem',
                    position: 'relative'
                  }}>
                    <div
                      ref={progressWheelRef}
                      style={{
                        width: '100%',
                        height: '100%',
                        borderRadius: '50%',
                        border: '2px solid #e5e7eb',
                        borderTopColor: '#4f46e5',
                        animation: 'spin 1s linear infinite'
                      }}
                    ></div>
                  </div>
                  <div style={{ fontSize: '0.875rem', color: '#4b5563' }}>
                    Analyzing your website...
                  </div>
                </div>
                <div style={{ 
                  height: '0.5rem',
                  backgroundColor: '#e5e7eb',
                  borderRadius: '9999px',
                  overflow: 'hidden'
                }}>
                  <div style={{ 
                    height: '100%',
                    width: `${(currentStep / 17) * 100}%`,
                    backgroundColor: '#4f46e5',
                    borderRadius: '9999px',
                    transition: 'width 0.3s ease'
                  }}></div>
                </div>
                <div style={{ 
                  fontSize: '0.75rem',
                  color: '#6b7280',
                  marginTop: '0.5rem',
                  textAlign: 'right'
                }}>
                  {Math.round((currentStep / 17) * 100)}%
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Results Section */}
        <div className="seo-results-container">
          {analysisComplete && results && (
            <div style={{ 
              display: 'flex',
              flexDirection: 'column',
              gap: '1.5rem'
            }}>
              {/* Overall Score */}
              <div style={{
                backgroundColor: 'white',
                borderRadius: '0.5rem',
                padding: '1.5rem',
                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
              }}>
                <h2 style={{ 
                  fontSize: '1.25rem', 
                  fontWeight: 'bold', 
                  marginBottom: '1rem' 
                }}>
                  Overall Score
                </h2>
                
                <div style={{ 
                  display: 'flex',
                  flexDirection: 'column',
                  gap: '1.5rem'
                }}>
                  {/* Analyzed URL and View Toggle */}
                  <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center'
                  }}>
                    <div style={{ 
                      display: 'flex',
                      flexDirection: 'column',
                      maxWidth: '60%'
                    }}>
                      <div style={{ 
                        fontSize: '0.875rem',
                        color: '#4b5563'
                      }}>
                        Analyzed URL:
                      </div>
                      <div style={{ 
                        fontSize: '0.875rem',
                        color: '#1f2937',
                        fontWeight: '500',
                        wordBreak: 'break-all'
                      }}>
                        {results.url}
                      </div>
                    </div>
                    
                    <div style={{ 
                      display: 'flex',
                      gap: '0.5rem'
                    }}>
                      <button 
                        onClick={() => setViewMode('mobile')}
                        style={{
                          padding: '0.5rem 0.75rem',
                          borderRadius: '0.375rem',
                          border: 'none',
                          backgroundColor: viewMode === 'mobile' ? '#4f46e5' : '#f3f4f6',
                          color: viewMode === 'mobile' ? 'white' : '#4b5563',
                          fontWeight: '500',
                          fontSize: '0.75rem',
                          cursor: 'pointer',
                          display: 'flex',
                          alignItems: 'center',
                          gap: '0.25rem'
                        }}
                      >
                        <i className="fas fa-mobile-alt"></i>
                        Mobile
                      </button>
                      
                      <button 
                        onClick={() => setViewMode('desktop')}
                        style={{
                          padding: '0.5rem 0.75rem',
                          borderRadius: '0.375rem',
                          border: 'none',
                          backgroundColor: viewMode === 'desktop' ? '#4f46e5' : '#f3f4f6',
                          color: viewMode === 'desktop' ? 'white' : '#4b5563',
                          fontWeight: '500',
                          fontSize: '0.75rem',
                          cursor: 'pointer',
                          display: 'flex',
                          alignItems: 'center',
                          gap: '0.25rem'
                        }}
                      >
                        <i className="fas fa-desktop"></i>
                        Desktop
                      </button>
                    </div>
                  </div>
                                   
                  {/* Overall Grade */}
                  <div style={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    backgroundColor: 'white',
                    padding: '1.5rem 0',
                    marginBottom: '1.5rem'
                  }}>
                    <div style={{ 
                      fontSize: '1rem',
                      fontWeight: '600',
                      color: '#4b5563',
                      marginBottom: '1rem',
                      textAlign: 'center'
                    }}>
                      Overall Grade
                    </div>
                    
                    <div style={{
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      gap: '1.5rem'
                    }}>
                      <div style={{ 
                        width: '120px',
                        height: '120px',
                        position: 'relative'
                      }}>
                        <canvas
                          ref={chartRef}
                          width="120"
                          height="120"
                        ></canvas>
                      </div>
                      
                      <div style={{ 
                        fontSize: '4rem',
                        fontWeight: 'bold',
                        color: getScoreColor(results.overall_score),
                        lineHeight: '1',
                        textShadow: '0 2px 4px rgba(0,0,0,0.1)'
                      }} ref={scoreCounterRef}>
                        {getScoreGrade(results.overall_score)}
                      </div>
                    </div>
                    
                    <div style={{ 
                      fontSize: '0.875rem',
                      color: '#6b7280',
                      marginTop: '0.75rem'
                    }}>
                      Overall score: {results.overall_score}/100
                    </div>
                  </div>
                  
                  {/* Metric Cards */}
                  <div style={{
                    display: 'flex',
                    flexWrap: 'wrap',
                    gap: '1rem',
                    justifyContent: 'center'
                  }}>
                    
                    {/* Performance Score */}
                    <div style={{
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      backgroundColor: '#f9fafb',
                      padding: '1rem',
                      borderRadius: '0.5rem',
                      width: '140px'
                    }}>
                      <div style={{ 
                        width: '80px',
                        height: '80px',
                        position: 'relative',
                        margin: '0 auto 0.75rem',
                        borderRadius: '50%',
                        background: `conic-gradient(${getScoreColor(viewMode === 'mobile' ? (results.mobile_score || 0) : (results.desktop_score || 0))} 0deg, ${getScoreColor(viewMode === 'mobile' ? (results.mobile_score || 0) : (results.desktop_score || 0))} ${3.6 * (viewMode === 'mobile' ? (results.mobile_score || 0) : (results.desktop_score || 0))}deg, #e5e7eb 0)`,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center'
                      }}>
                        <div style={{
                          width: '60px',
                          height: '60px',
                          borderRadius: '50%',
                          backgroundColor: 'white',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          fontSize: '1.25rem',
                          fontWeight: 'bold',
                          color: getScoreColor(viewMode === 'mobile' ? (results.mobile_score || 0) : (results.desktop_score || 0))
                        }}>
                          {viewMode === 'mobile' ? (results.mobile_score || 0) : (results.desktop_score || 0)}
                        </div>
                      </div>
                      <div style={{ 
                        fontSize: '0.875rem',
                        fontWeight: 'bold',
                        color: getScoreColor(viewMode === 'mobile' ? (results.mobile_score || 0) : (results.desktop_score || 0)),
                        marginBottom: '0.25rem'
                      }}>
                        Performance
                      </div>
                      <div style={{ 
                        fontSize: '0.75rem',
                        color: '#4b5563'
                      }}>
                        {viewMode === 'mobile' ? 'Mobile' : 'Desktop'}
                      </div>
                    </div>
                    
                    {/* Accessibility Score */}
                    <div style={{
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      backgroundColor: '#f9fafb',
                      padding: '1rem',
                      borderRadius: '0.5rem',
                      width: '140px'
                    }}>
                      <div style={{ 
                        width: '80px',
                        height: '80px',
                        position: 'relative',
                        margin: '0 auto 0.75rem',
                        borderRadius: '50%',
                        background: `conic-gradient(${getScoreColor(viewMode === 'mobile' ? 
                          (results.mobileCategoryScores?.accessibility || 0) : 
                          (results.desktopCategoryScores?.accessibility || 0))} 0deg, ${getScoreColor(viewMode === 'mobile' ? 
                            (results.mobileCategoryScores?.accessibility || 0) : 
                            (results.desktopCategoryScores?.accessibility || 0))} ${3.6 * (viewMode === 'mobile' ? 
                              (results.mobileCategoryScores?.accessibility || 0) : 
                              (results.desktopCategoryScores?.accessibility || 0))}deg, #e5e7eb 0)`,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center'
                      }}>
                        <div style={{
                          width: '60px',
                          height: '60px',
                          borderRadius: '50%',
                          backgroundColor: 'white',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          fontSize: '1.25rem',
                          fontWeight: 'bold',
                          color: getScoreColor(viewMode === 'mobile' ? 
                            (results.mobileCategoryScores?.accessibility || 0) : 
                            (results.desktopCategoryScores?.accessibility || 0))
                        }}>
                          {viewMode === 'mobile' ? 
                            (results.mobileCategoryScores?.accessibility || 0) : 
                            (results.desktopCategoryScores?.accessibility || 0)}
                        </div>
                      </div>
                      <div style={{ 
                        fontSize: '0.875rem',
                        fontWeight: 'bold',
                        color: getScoreColor(viewMode === 'mobile' ? 
                          (results.mobileCategoryScores?.accessibility || 0) : 
                          (results.desktopCategoryScores?.accessibility || 0)),
                        marginBottom: '0.25rem'
                      }}>
                        Accessibility
                      </div>
                      <div style={{ 
                        fontSize: '0.75rem',
                        color: '#4b5563'
                      }}>
                        {viewMode === 'mobile' ? 'Mobile' : 'Desktop'}
                      </div>
                    </div>
                    
                    {/* Best Practices Score */}
                    <div style={{
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      backgroundColor: '#f9fafb',
                      padding: '1rem',
                      borderRadius: '0.5rem',
                      width: '140px'
                    }}>
                      <div style={{ 
                        width: '80px',
                        height: '80px',
                        position: 'relative',
                        margin: '0 auto 0.75rem',
                        borderRadius: '50%',
                        background: `conic-gradient(${getScoreColor(viewMode === 'mobile' ? 
                          (results.mobileCategoryScores?.best_practices || 0) : 
                          (results.desktopCategoryScores?.best_practices || 0))} 0deg, ${getScoreColor(viewMode === 'mobile' ? 
                            (results.mobileCategoryScores?.best_practices || 0) : 
                            (results.desktopCategoryScores?.best_practices || 0))} ${3.6 * (viewMode === 'mobile' ? 
                              (results.mobileCategoryScores?.best_practices || 0) : 
                              (results.desktopCategoryScores?.best_practices || 0))}deg, #e5e7eb 0)`,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center'
                      }}>
                        <div style={{
                          width: '60px',
                          height: '60px',
                          borderRadius: '50%',
                          backgroundColor: 'white',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          fontSize: '1.25rem',
                          fontWeight: 'bold',
                          color: getScoreColor(viewMode === 'mobile' ? 
                            (results.mobileCategoryScores?.best_practices || 0) : 
                            (results.desktopCategoryScores?.best_practices || 0))
                        }}>
                          {viewMode === 'mobile' ? 
                            (results.mobileCategoryScores?.best_practices || 0) : 
                            (results.desktopCategoryScores?.best_practices || 0)}
                        </div>
                      </div>
                      <div style={{ 
                        fontSize: '0.875rem',
                        fontWeight: 'bold',
                        color: getScoreColor(viewMode === 'mobile' ? 
                          (results.mobileCategoryScores?.best_practices || 0) : 
                          (results.desktopCategoryScores?.best_practices || 0)),
                        marginBottom: '0.25rem'
                      }}>
                        Best Practices
                      </div>
                      <div style={{ 
                        fontSize: '0.75rem',
                        color: '#4b5563'
                      }}>
                        {viewMode === 'mobile' ? 'Mobile' : 'Desktop'}
                      </div>
                    </div>
                    
                    {/* SEO Score */}
                    <div style={{
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      backgroundColor: '#f9fafb',
                      padding: '1rem',
                      borderRadius: '0.5rem',
                      width: '140px'
                    }}>
                      <div style={{ 
                        width: '80px',
                        height: '80px',
                        position: 'relative',
                        margin: '0 auto 0.75rem',
                        borderRadius: '50%',
                        background: `conic-gradient(${getScoreColor(viewMode === 'mobile' ? 
                          (results.mobileCategoryScores?.seo || 0) : 
                          (results.desktopCategoryScores?.seo || 0))} 0deg, ${getScoreColor(viewMode === 'mobile' ? 
                            (results.mobileCategoryScores?.seo || 0) : 
                            (results.desktopCategoryScores?.seo || 0))} ${3.6 * (viewMode === 'mobile' ? 
                              (results.mobileCategoryScores?.seo || 0) : 
                              (results.desktopCategoryScores?.seo || 0))}deg, #e5e7eb 0)`,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center'
                      }}>
                        <div style={{
                          width: '60px',
                          height: '60px',
                          borderRadius: '50%',
                          backgroundColor: 'white',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          fontSize: '1.25rem',
                          fontWeight: 'bold',
                          color: getScoreColor(viewMode === 'mobile' ? 
                            (results.mobileCategoryScores?.seo || 0) : 
                            (results.desktopCategoryScores?.seo || 0))
                        }}>
                          {viewMode === 'mobile' ? 
                            (results.mobileCategoryScores?.seo || 0) : 
                            (results.desktopCategoryScores?.seo || 0)}
                        </div>
                      </div>
                      <div style={{ 
                        fontSize: '0.875rem',
                        fontWeight: 'bold',
                        color: getScoreColor(viewMode === 'mobile' ? 
                          (results.mobileCategoryScores?.seo || 0) : 
                          (results.desktopCategoryScores?.seo || 0)),
                        marginBottom: '0.25rem'
                      }}>
                        SEO
                      </div>
                      <div style={{ 
                        fontSize: '0.75rem',
                        color: '#4b5563'
                      }}>
                        {viewMode === 'mobile' ? 'Mobile' : 'Desktop'}
                      </div>
                    </div>
                  </div>
                                    {/* Site Screenshot with Debug */}
                  <div style={{
                    marginBottom: '1.5rem',
                    textAlign: 'center'
                  }}>
                    <h3 style={{
                      fontSize: '1rem',
                      fontWeight: '600',
                      marginBottom: '0.75rem',
                      color: '#4b5563'
                    }}>
                      {viewMode === 'mobile' ? 'Mobile View' : 'Desktop View'}
                    </h3>
                    
                    
                    {/* Conditional rendering based on what's available */}
                    {results.mobile && results.mobile.screenshot ? (
                      <div style={{
                        border: '1px solid #e5e7eb',
                        borderRadius: '0.5rem',
                        padding: '0.5rem',
                        backgroundColor: '#f9fafb',
                        display: 'inline-block',
                        maxWidth: '100%',
                        cursor: 'pointer'
                      }}>
                        <a 
                          href={viewMode === 'mobile' ? results.mobile.screenshot : (results.desktop.screenshot || results.mobile.screenshot)} 
                          target="_blank" 
                          rel="noopener noreferrer"
                          style={{ display: 'block' }}
                        >
                          <img 
                            src={viewMode === 'mobile' ? results.mobile.screenshot : (results.desktop.screenshot || results.mobile.screenshot)}
                            alt={`${viewMode === 'mobile' ? 'Mobile' : 'Desktop'} screenshot of ${results.url}`}
                            style={{
                              width: viewMode === 'mobile' ? '350px' : '600px',
                              height: viewMode === 'mobile' ? '500px' : '400px',
                              objectFit: 'cover',
                              borderRadius: '0.25rem'
                            }}
                          />
                          <div style={{
                            fontSize: '0.75rem',
                            color: '#4f46e5',
                            marginTop: '0.5rem',
                            textAlign: 'center'
                          }}>
                            <i className="fas fa-external-link-alt" style={{ marginRight: '0.25rem' }}></i>
                            Click to view full image
                          </div>
                        </a>
                      </div>
                    ) : results.apiDetails && results.apiDetails.rawApiResponse && results.apiDetails.rawApiResponse.mobile && 
                      results.apiDetails.rawApiResponse.mobile.screenshot ? (
                      <div style={{
                        border: '1px solid #e5e7eb',
                        borderRadius: '0.5rem',
                        padding: '0.5rem',
                        backgroundColor: '#f9fafb',
                        display: 'inline-block',
                        maxWidth: '100%',
                        cursor: 'pointer'
                      }}>
                        <a 
                          href={viewMode === 'mobile' ? 
                               results.apiDetails.rawApiResponse.mobile.screenshot : 
                               (results.apiDetails.rawApiResponse.desktop?.screenshot || results.apiDetails.rawApiResponse.mobile.screenshot)} 
                          target="_blank" 
                          rel="noopener noreferrer"
                          style={{ display: 'block' }}
                        >
                          <img 
                            src={viewMode === 'mobile' ? 
                                results.apiDetails.rawApiResponse.mobile.screenshot : 
                                (results.apiDetails.rawApiResponse.desktop?.screenshot || results.apiDetails.rawApiResponse.mobile.screenshot)}
                            alt={`${viewMode === 'mobile' ? 'Mobile' : 'Desktop'} screenshot of ${results.url}`}
                            style={{
                              width: viewMode === 'mobile' ? '350px' : '600px',
                              height: viewMode === 'mobile' ? '500px' : '400px',
                              objectFit: 'cover',
                              borderRadius: '0.25rem'
                            }}
                          />
                          <div style={{
                            fontSize: '0.75rem',
                            color: '#4f46e5',
                            marginTop: '0.5rem',
                            textAlign: 'center'
                          }}>
                            <i className="fas fa-external-link-alt" style={{ marginRight: '0.25rem' }}></i>
                            Click to view full image
                          </div>
                        </a>
                      </div>
                    ) : (
                      <div style={{
                        border: '1px solid #e5e7eb',
                        borderRadius: '0.5rem',
                        padding: '1rem',
                        backgroundColor: '#f9fafb',
                        color: '#6b7280'
                      }}>
                        No screenshot available
                      </div>
                    )}
                  </div>
                </div>
              </div>
              
              {/* SEO Factors */}
              <div style={{
                backgroundColor: 'white',
                borderRadius: '0.5rem',
                padding: '1.5rem',
                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
              }}>
                <h2 style={{ 
                  fontSize: '1.25rem', 
                  fontWeight: 'bold', 
                  marginBottom: '1rem' 
                }}>
                  SEO Factors
                </h2>
                
                <div style={{ overflowX: 'auto' }}>
                  <table style={{ 
                    width: '100%',
                    borderCollapse: 'collapse'
                  }}>
                    <thead>
                      <tr style={{ 
                        backgroundColor: '#f9fafb',
                        borderBottom: '1px solid #e5e7eb'
                      }}>
                        <th style={{ 
                          padding: '0.75rem 1rem',
                          textAlign: 'left',
                          fontWeight: '600',
                          color: '#4b5563',
                          fontSize: '0.875rem'
                        }}>Factor</th>
                        <th style={{ 
                          padding: '0.75rem 1rem',
                          textAlign: 'center',
                          fontWeight: '600',
                          color: '#4b5563',
                          fontSize: '0.875rem',
                          width: '100px'
                        }}>Status</th>
                        <th style={{ 
                          padding: '0.75rem 1rem',
                          textAlign: 'center',
                          fontWeight: '600',
                          color: '#4b5563',
                          fontSize: '0.875rem',
                          width: '100px'
                        }}>Score</th>
                      </tr>
                    </thead>
                    <tbody>
                      {results.factors.map((factor, index) => (
                        <tr 
                          key={factor.id}
                          style={{ 
                            borderBottom: index < results.factors.length - 1 ? '1px solid #e5e7eb' : 'none',
                            cursor: 'pointer'
                          }}
                          onClick={() => {
                            const detailsElement = document.getElementById(`details_${factor.id}`);
                            if (detailsElement) {
                              detailsElement.style.display = detailsElement.style.display === 'none' ? 'table-row' : 'none';
                            }
                          }}
                        >
                          <td style={{ 
                            padding: '0.75rem 1rem',
                            color: '#1f2937',
                            fontSize: '0.875rem'
                          }}>{factor.name}</td>
                          <td style={{ 
                            padding: '0.75rem 1rem',
                            textAlign: 'center',
                            fontSize: '1.125rem'
                          }}>
                            {getStatusIcon(factor.status)}
                          </td>
                          <td style={{ 
                            padding: '0.75rem 1rem',
                            textAlign: 'center',
                            fontWeight: '600',
                            color: getScoreColor(factor.score)
                          }}>{factor.score}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
              
              {/* Detailed Analysis */}
              <div style={{
                backgroundColor: 'white',
                borderRadius: '0.5rem',
                padding: '1.5rem',
                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
              }}>
                <h2 style={{ 
                  fontSize: '1.25rem', 
                  fontWeight: 'bold', 
                  marginBottom: '1rem' 
                }}>
                  Detailed Analysis
                </h2>
                
                <div style={{ overflowX: 'auto' }}>
                  <table style={{ 
                    width: '100%',
                    borderCollapse: 'collapse'
                  }}>
                    <tbody>
                      {results.factors.map((factor) => (
                        <React.Fragment key={factor.id}>
                          <tr 
                            style={{ 
                              borderBottom: '1px solid #e5e7eb',
                              cursor: 'pointer'
                            }}
                            onClick={() => {
                              const detailsElement = document.getElementById(`details_${factor.id}`);
                              if (detailsElement) {
                                detailsElement.style.display = detailsElement.style.display === 'none' ? 'table-row' : 'none';
                              }
                            }}
                          >
                            <td style={{ 
                              padding: '0.75rem 1rem',
                              color: '#1f2937',
                              fontWeight: '600'
                            }}>
                              <div style={{ display: 'flex', alignItems: 'center' }}>
                                <span style={{ marginRight: '0.5rem' }}>{getStatusIcon(factor.status)}</span>
                                {factor.name}
                              </div>
                            </td>
                            <td style={{ 
                              padding: '0.75rem 1rem',
                              textAlign: 'right'
                            }}>
                              <i className="fa-solid fa-chevron-down" style={{ 
                                color: '#9ca3af',
                                fontSize: '0.875rem'
                              }}></i>
                            </td>
                          </tr>
                          <tr 
                            id={`details_${factor.id}`} 
                            style={{ 
                              display: 'none',
                              backgroundColor: '#f9fafb'
                            }}
                          >
                            <td colSpan="2" style={{ padding: '1rem' }}>
                              <div style={{ fontSize: '0.875rem', marginBottom: '0.5rem' }}>
                                <span style={{ fontWeight: '600', color: '#4b5563' }}>Description:</span> {factor.description}
                              </div>
                              <div style={{ fontSize: '0.875rem', marginBottom: '0.5rem' }}>
                                <span style={{ fontWeight: '600', color: '#4b5563' }}>Current Value:</span> {factor.details.value}
                              </div>
                              <div style={{ fontSize: '0.875rem' }}>
                                <span style={{ fontWeight: '600', color: '#4b5563' }}>Recommendation:</span> {factor.details.recommendation}
                              </div>
                            </td>
                          </tr>
                        </React.Fragment>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// Global access
window.SeoCheck = SeoCheck;