import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.tsx';
import { configureAPI } from './services/api';
import { useAppStore } from './stores/appStore';
import { listenToHost, parseConfigFromURL } from './utils/messaging';
import type { UserRole } from './types';

// Initialize configuration from URL query parameters (passed by loader)
const urlConfig = parseConfigFromURL();

// Configure API (mock or real)
configureAPI(urlConfig.apiBase || undefined);

// Set initial app config
const store = useAppStore.getState();
store.setConfig({
  org: urlConfig.org,
  theme: (urlConfig.theme as 'light' | 'dark') || 'light',
  apiBase: urlConfig.apiBase,
  view: urlConfig.view,
});

// If demo user info is provided via URL, auto-login
if (urlConfig.userId && urlConfig.role) {
  store.setUser({
    userId: urlConfig.userId,
    name: urlConfig.userId,
    role: urlConfig.role as UserRole,
    org: urlConfig.org,
  });
}

// Listen for messages from the host page (postMessage from loader)
const cleanup = listenToHost((payload) => {
  if (payload.action === 'OPEN_PANEL') {
    useAppStore.getState().openPanel();
  } else if (payload.action === 'CLOSE_PANEL') {
    useAppStore.getState().closePanel();
  } else if (payload.action === 'TOGGLE_PANEL') {
    useAppStore.getState().togglePanel();
  } else if (payload.userId && payload.role) {
    // Host sent user session update
    store.setUser({
      userId: payload.userId,
      name: payload.userId,
      role: payload.role as UserRole,
      org: store.config.org,
    });
  }

  if (payload.apiBase) {
    store.setConfig({ apiBase: payload.apiBase });
    configureAPI(payload.apiBase);
  }
  if (payload.theme) {
    store.setConfig({ theme: payload.theme as 'light' | 'dark' });
  }
});

// Cleanup listener on unmount (though the widget app is always mounted)
// cleanup();

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);