import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import en from './locales/en.json';

function initAppMeta() {
  document.documentElement.lang = en.html_meta?.lang || 'en';
  document.title = en.app?.title || '';

  const dynamicManifest = {
    name: en.app?.title || '',
    short_name: en.app?.short_name || '',
    description: en.app?.description || '',
    start_url: en.pwa?.start_url || '/',
    display: en.pwa?.display || 'standalone',
    background_color: en.theme?.background_color || '#000000',
    theme_color: en.html_meta?.theme_color || '#000000',
    orientation: en.pwa?.orientation || 'portrait-primary',
    icons: [
      {
        src: en.pwa?.icon_192_src || '/pwa-192x192.png',
        sizes: '192x192',
        type: 'image/png',
        purpose: 'any maskable'
      },
      {
        src: en.pwa?.icon_512_src || '/pwa-512x512.png',
        sizes: '512x512',
        type: 'image/png',
        purpose: 'any maskable'
      },
      {
        src: en.pwa?.favicon_src || '/favicon.ico',
        sizes: '64x64 32x32 24x24 16x16',
        type: 'image/x-icon'
      }
    ]
  };

  const blob = new Blob([JSON.stringify(dynamicManifest)], { type: 'application/json' });
  const manifestUrl = URL.createObjectURL(blob);
  const link = document.querySelector('link[rel="manifest"]');
  if (link) {
    link.setAttribute('href', manifestUrl);
  }
}

initAppMeta();

const rootElement = document.getElementById('root');
if (rootElement) {
  ReactDOM.createRoot(rootElement).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}