import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import '@/estilos.css';

const raiz = document.getElementById('raiz');
if (!raiz) throw new Error('elemento #raiz não encontrado');

/**
 * `src/lib/supabase.ts` lança se `config.js` não estiver preenchido, e esse
 * throw acontece na avaliação do módulo. Com import estático o resultado
 * seria uma página em branco e um erro só no console — a pior experiência
 * possível para quem acabou de subir os arquivos e esqueceu de editar a
 * configuração. Por isso o import é dinâmico e o erro tem tela própria.
 */
import('@/App')
  .then(({ default: App }) => {
    createRoot(raiz).render(
      <StrictMode>
        <App />
      </StrictMode>,
    );
  })
  .catch((erro: unknown) => {
    const msg = erro instanceof Error ? erro.message : String(erro);
    raiz.innerHTML = `
      <div style="min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px">
        <div style="max-width:520px;background:#fff;border:1px solid #ececf3;border-radius:16px;padding:28px">
          <div style="font-size:10.5px;font-weight:700;color:#134d78;letter-spacing:1.1px;margin-bottom:18px">
            PORTAL NR-1
          </div>
          <h1 style="font-size:20px;margin:0 0 10px">Configuração pendente</h1>
          <p style="font-size:14px;color:#5d6072;line-height:1.65;margin:0 0 18px">
            ${msg.replace(/</g, '&lt;')}
          </p>
          <pre style="background:#f7f8fa;border:1px solid #ececf3;border-radius:10px;padding:14px;font-size:12px;overflow:auto;margin:0">window.__NR1__ = {
  SUPABASE_URL: 'https://xxxx.supabase.co',
  SUPABASE_ANON_KEY: 'eyJhbGci...',
  URL_PUBLICA: 'https://nr1.netpack.com.br',
};</pre>
          <p style="font-size:12.5px;color:#8b8ea3;line-height:1.6;margin:16px 0 0">
            Abra <code>config.js</code> na raiz do site e preencha os dois
            primeiros valores. Não é preciso recompilar nada.
          </p>
        </div>
      </div>`;
  });