import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import '@mantine/core/styles.css';
import '@mantine/notifications/styles.css';
import '@mantine/dates/styles.css';
import '@mantine/spotlight/styles.css';
import './styles.css';
import './app/i18n/config';
import { App } from './app/app';

/**
 * Branding handed to the vendored `@tria-plc/iamui` user-management module,
 * which reads it off `window` at import time. Declared here because that
 * package ships no ambient type for it.
 */
declare global {
  interface Window {
    __USER_MANAGEMENT_BRANDING__: {
      appName: string;
      organizationName: string;
      logoSrc: string;
      logoAlt: string;
      homePath: string;
      moduleBasePath: string;
      backToAppPath: string;
      backToAppLabel: string;
      cssVariables: Record<string, string>;
    };
  }
}

document.title = 'EMA Backoffice';

const _favicon = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
if (_favicon) _favicon.href = '/ema-logo.png';

window.__USER_MANAGEMENT_BRANDING__ = {
  appName: 'Ethiopian Maritime Licence',
  organizationName: 'Ethiopian Maritime Authority',
  logoSrc: '/assets/emaLogo.jpg',
  logoAlt: 'EMA Logo',
  homePath: '/',
  moduleBasePath: '/user-management',
  backToAppPath: '/dashboard',
  backToAppLabel: 'Back to dashboard',
  cssVariables: {
    '--primary': '#2563eb',
    '--primary-foreground': 'oklch(0.99 0 0)',
    '--secondary': '#1d4ed8',
    '--secondary-foreground': 'oklch(0.99 0 0)',
    '--accent': '#60a5fa',
    '--accent-foreground': 'oklch(0.99 0 0)',
    '--ring': '#2563eb',
    '--sidebar': 'oklch(0.21 0.04 265)',
    '--sidebar-foreground': 'oklch(0.96 0.01 255)',
    '--sidebar-primary': '#3b82f6',
    '--sidebar-primary-foreground': 'oklch(0.99 0 0)',
    '--sidebar-accent': '#60a5fa',
    '--sidebar-accent-foreground': 'oklch(0.96 0.01 255)',
    '--sidebar-border': 'oklch(0.3 0.04 265)',
    '--sidebar-ring': '#3b82f6',
    '--brand-shell-bg': '#eff6ff',
    '--brand-sidebar-bg': '#0f172a',
    '--brand-sidebar-border': '#1e293b',
    '--brand-sidebar-muted': '#94a3b8',
    '--brand-primary-solid': '#2563eb',
    '--brand-primary-hover': '#1d4ed8',
    '--brand-hero-from': '#2563eb',
    '--brand-hero-to': '#1e40af',
  },
};

const root = document.getElementById('root');
if (!root) throw new Error('Root element not found');

createRoot(root).render(
  <StrictMode>
    <App />
  </StrictMode>,
);