import { StrictMode } from 'react';
import { createRoot, hydrateRoot } from 'react-dom/client';
import { HelmetProvider } from 'react-helmet-async';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App.tsx';
import './index.css';
import { ThemeProvider } from './context/ThemeContext';

const queryClient = new QueryClient();

// CRITICAL: Enhanced SSR Detection for SEO and Crawlers
// This ensures Google crawlers always see the server-rendered content with proper meta tags
const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Missing root element');

/**
 * Robust SSR Detection with Multiple Fallback Methods
 *
 * We check multiple indicators to determine if the page was server-rendered.
 * This is critical for SEO - crawlers must see the SSR content with meta tags.
 *
 * Priority Order:
 * 1. Explicit SSR flag from server (most reliable)
 * 2. SSR content marker class
 * 3. Content beyond loading screen
 * 4. Absence of loading screen (already rendered)
 * 5. Blog posts are always SSR'd (known pattern)
 */
const detectSSR = () => {
  // Method 1: Explicit flag from server (most reliable)
  if (window.__SSR_RENDERED__ === true) {
    console.log('✅ SSR detected via explicit flag');
    return true;
  }

  // Method 2: Check for SSR content marker
  const ssrContent = rootElement.querySelector('.ssr-content');
  if (ssrContent && ssrContent.children.length > 0) {
    console.log('✅ SSR detected via .ssr-content marker with content');
    return true;
  }

  // Method 3: Check if there's substantial content beyond loading screen
  const hasSubstantialContent = rootElement.children.length > 1;
  if (hasSubstantialContent) {
    console.log('✅ SSR detected via multiple children elements');
    return true;
  }

  // Method 4: Check if loading screen is already removed (content rendered)
  const loadingScreen = rootElement.querySelector('.loading-screen');
  if (!loadingScreen || loadingScreen.classList.contains('fade-out')) {
    console.log('✅ SSR detected - no active loading screen');
    return true;
  }

  // Method 5: Blog posts and key pages are always SSR'd
  const isBlogPost = window.location.pathname.startsWith('/blog/');
  const isHomePage = window.location.pathname === '/' || window.location.pathname === '/index.html';
  const isKeyPage = isBlogPost || isHomePage;

  if (isKeyPage) {
    console.log('✅ SSR detected - known SSR page pattern (blog/home)');
    return true;
  }

  // Method 6: Check HTML content directly
  if (rootElement.innerHTML.includes('ssr-content')) {
    console.log('✅ SSR detected via HTML content check');
    return true;
  }

  console.log('⚠️  SSR detection uncertain - using safe default');
  return false; // Safe default - assume not SSR if uncertain
};

const wasSSRed = detectSSR();
const alreadyHydrated = window.__REACT_HYDRATED__ === true;

// If SSR content exists and main hydration hasn't happened yet, hydrate it
// Otherwise, do a fresh render
if (wasSSRed && !alreadyHydrated) {
  console.log('🔄 Hydrating server-rendered content for SEO...');

  // Mark as hydrated to prevent double-hydration
  window.__REACT_HYDRATED__ = true;

  // Use hydrateRoot to preserve SSR content and meta tags for crawlers
  hydrateRoot(
    rootElement,
    <StrictMode>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider>
          <HelmetProvider>
            <App />
          </HelmetProvider>
        </ThemeProvider>
      </QueryClientProvider>
    </StrictMode>
  );
} else if (alreadyHydrated) {
  console.log('♻️  Already hydrated - skipping hydration');
  // Don't re-render if already hydrated to prevent errors
} else {
  // Fresh render for client-side navigation or development
  console.log('🚀 Starting fresh React render...');

  createRoot(rootElement).render(
    <StrictMode>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider>
          <HelmetProvider>
            <App />
          </HelmetProvider>
        </ThemeProvider>
      </QueryClientProvider>
    </StrictMode>
  );
}

// Add global type declarations
declare global {
  interface Window {
    __REACT_HYDRATED__?: boolean;
    __SSR_RENDERED__?: boolean;
  }
}