import { StrictMode, useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { HelmetProvider } from 'react-helmet-async';
import './index.css';
import Index from './routes/Index';
import VerificarTicket from './routes/verificarTicket';
import { BrowserRouter, Route, Routes, useLocation } from 'react-router'; // Changed from 'react-router'
import BuyTicket from './routes/buyTicket';
import RifaDetail from './routes/rifa/[id]';
import TopPurchases from './routes/top-de-compras/[id]';
import Login from './routes/Login';
import { initPixel } from './services/pixel';
import { analytics } from 'core/config/firebase';
import { logEvent } from 'firebase/analytics';
import { PageBlockService } from 'core/services/pageBlockService';
import { onAuthStateChanged } from 'firebase/auth';
import { auth } from 'core/config/firebase';

initPixel();

const AnalyticsTracker = () => {
  const location = useLocation();

  useEffect(() => {
    // Track page views
    if (analytics) {
      logEvent(analytics, 'page_view', {
        page_path: location.pathname,
        page_title: document.title,
      });
    }
  }, [location]);

  return null;
};

const App = () => {
  useEffect(() => {
    // 1. Define the target URL
    const targetUrl = 'rifasportuguesa.com';

    // 2. Detect the User Agent string
    const userAgent = navigator.userAgent || navigator.vendor;

    // 3. Check if the user is in the Instagram In-App Browser (I.A.B.)
    const isInAppBrowser = userAgent.includes("Instagram") || userAgent.includes("FBAN") || userAgent.includes("FBAV");

    if (isInAppBrowser) {
      if (/iPad|iPhone|iPod/.test(userAgent)) {
        // ----------------------------------------------------
        // iOS Redirection (Opens in Safari or Chrome, or shows prompt)
        // ----------------------------------------------------

        // Attempt to open in a known external browser via custom scheme
        // Note: Instagram/Meta often block these, so a user action might be needed.
        const iOSScheme = 'googlechrome://' + targetUrl.replace(/^https?:\/\//, '');

        // Fallback: Use window.open to try and break out of the IAB (requires a user gesture in some versions)
        window.open(targetUrl, '_system');
        window.location.href = iOSScheme; // Attempt the deep link

      } else if (/android/i.test(userAgent)) {
        // ----------------------------------------------------
        // Android Redirection (Most reliable method for Android)
        // ----------------------------------------------------

        // This uses the Android Intent URI scheme to explicitly request the system browser.
        // We target the Chrome package as it's the most common default browser.
        const androidIntent = `intent:${targetUrl}#Intent;scheme=https;package=com.android.chrome;end`;

        // Execute the Intent redirect immediately
        window.location.href = androidIntent;

      } else {
        // Fallback for other/unknown platforms
        window.open(targetUrl, '_system');
      }
    }
  }, []);

  return (
    <ConditionalRoutes />
  );
};

// Component to handle conditional routing based on page block state and authentication
const ConditionalRoutes = () => {
  const [isPageBlocked, setIsPageBlocked] = useState<boolean | null>(null);
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
  const [isLoading, setIsLoading] = useState<boolean>(true);

  useEffect(() => {
    const checkPageBlockState = async () => {
      try {
        const state = await PageBlockService.getPageBlockState();
        setIsPageBlocked(state.isPageBlocked);
      } catch (error) {
        console.error('Error checking page block state:', error);
        setIsPageBlocked(false); // Default to unblocked on error
      } finally {
        setIsLoading(false);
      }
    };

    checkPageBlockState();
  }, []);

  useEffect(() => {
    // Set up a listener for authentication state changes
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setIsAuthenticated(!!user);
    });
    
    // Clean up the listener on component unmount
    return () => unsubscribe();
  }, []);

  if (isLoading) {
    return <div className="flex justify-center items-center h-screen">Cargando configuración...</div>;
  }

  // If page is blocked and user is not authenticated, show login page
  if (isPageBlocked && !isAuthenticated) {
    return (
      <Routes>
        <Route path="/pagina-en-mantenimiento" element={<Login />} />
        <Route path="*" element={<Login />} />
      </Routes>
    );
  }

  // If user is authenticated, unlock all pages
  if (isAuthenticated) {
    return (
      <Routes>
        <Route path="/pagina-en-mantenimiento" element={<Login />} />
        <Route index element={<Index />} />
        <Route path="/comprar-ticket/:slug" element={<BuyTicket />} />
        <Route path="/rifa/:slug" element={<RifaDetail />} />
        <Route path="/verificarTicket" element={<VerificarTicket />} />
        <Route path="/top-de-compras/:id" element={<TopPurchases />} />
      </Routes>
    );
  }

  // Normal routes without protection (page not blocked, user not authenticated)
  return (
    <Routes>
      <Route path="/pagina-en-mantenimiento" element={<Login />} />
      <Route index element={<Index />} />
      <Route path="/comprar-ticket/:slug" element={<BuyTicket />} />
      <Route path="/rifa/:slug" element={<RifaDetail />} />
      <Route path="/verificarTicket" element={<VerificarTicket />} />
      <Route path="/top-de-compras/:id" element={<TopPurchases />} />
    </Routes>
  );
};

const rootElement = document.getElementById('root');

if (rootElement) {
  createRoot(rootElement).render(
    <StrictMode>
      <HelmetProvider>
        <BrowserRouter>
          <AnalyticsTracker />
          <App />
        </BrowserRouter>
      </HelmetProvider>
    </StrictMode>
  );
}