import { config } from '../config';

export function renderCheckoutPageHtml(): string {
  const orderApi = config.intercept.orderApiPath;
  const checkoutApi = '/api/checkout';
  const cartApi = `${checkoutApi}/cart`;
  const payEnabled = config.checkout.payEnabled;
  const mapsBridge = config.intercept.googleMapsBridgePath;
  const checkoutOrderPath = config.intercept.checkoutOrderPath;

  return `<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>Zamówienie – Sinsay</title>
  <link rel="stylesheet" href="/checkout.css"/>
</head>
<body class="co2025">
  <header class="co2025-header">
    <a href="/pl/pl/" class="co2025-logo">SINSAY</a>
    <nav class="co2025-steps" aria-label="Kroki zamówienia">
      <span class="co2025-step co2025-step--done">Koszyk</span>
      <span class="co2025-step co2025-step--active">Zamówienie</span>
      <span class="co2025-step">Podsumowanie</span>
    </nav>
  </header>
  <main class="co2025-main" id="checkout-root">
    <p class="co2025-loading">Ładowanie zamówienia…</p>
  </main>
  <script>
    (function(){
      function markLeftCheckout(){
        try { sessionStorage.setItem('skipCheckoutRedirect', String(Date.now())); } catch(e) {}
      }
      document.addEventListener('click', function(ev){
        var a = ev.target && ev.target.closest ? ev.target.closest('a[href]') : null;
        if(!a) return;
        var h = a.getAttribute('href') || '';
        if(h === '/pl/pl/' || h === '/pl/pl' || (h.indexOf('/pl/pl') === 0 && h.indexOf('checkout') < 0)){
          markLeftCheckout();
        }
      }, true);
    })();
  </script>
  <script>
    window.__CHECKOUT_CONFIG__ = {
      orderApi: ${JSON.stringify(orderApi)},
      checkoutApi: ${JSON.stringify(checkoutApi)},
      cartApi: ${JSON.stringify(cartApi)},
      catalogApi: '/api/checkout/catalog',
      sessionApi: '/api/checkout/session',
      payEnabled: ${payEnabled},
      mapsBridge: ${JSON.stringify(mapsBridge)},
      checkoutPath: ${JSON.stringify(checkoutOrderPath)},
      storesPickup: '/pl/pl/ajx/stores/pickup/'
    };
  </script>
  <script src="/checkout.js" defer></script>
  <script src="/analytics.js" defer></script>
</body>
</html>`;
}
