import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';

function renderBootstrapError(error: unknown): void {
  const message = error instanceof Error ? error.message : 'No se pudo cargar la configuracion del tenant.';
  const root = document.querySelector('app-root');

  if (root) {
    root.innerHTML = `
      <section style="font-family: Arial, sans-serif; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #f5f5f5; color: #1f1f1f;">
        <div style="max-width: 480px; width: 100%; background: #ffffff; border: 1px solid #d9d9d9; border-radius: 12px; padding: 24px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);">
          <h1 style="margin: 0 0 12px; font-size: 24px;">Error al cargar el tenant</h1>
          <p style="margin: 0; line-height: 1.5;">${message}</p>
        </div>
      </section>
    `;
  }
}

bootstrapApplication(App, appConfig)
  .catch((err) => {
    console.error(err);
    renderBootstrapError(err);
  });