import ReactDOM from 'react-dom/client'
import { ScreenLoader } from './components/screen-loader'
import { Analytics } from './components/analytics'
import { TopBar } from './components/top-bar'
import { initEntry, useBootstrap } from './hooks/use-bootstrap'
import { __ } from './lib/i18n'
import './index.css'

// Init Mixpanel
initEntry('llmagnetAnalyticsData', 'Analytics');

function AnalyticsApp() {
  const { data, isLoading, error } = useBootstrap('llmagnetAnalyticsData', {
    deferred: true,
    missingMessage: __('Analytics data not found.', 'llmagnet-llm-txt-generator'),
  });

  if (isLoading) {
    return <ScreenLoader />;
  }

  if (error || !data) {
    return <div className="p-4 text-red-600">{error || __('Unknown error', 'llmagnet-llm-txt-generator')}</div>;
  }

  return (
    <div className="llms-txt-react-app" style={{ position: 'relative', paddingTop: '58px', backgroundColor: '#F0F0F1' }}>
      <TopBar pluginUrl={data.pluginUrl} />
      <div className="wrap">
        <Analytics 
          apiRoot={data.apiRoot}
          apiNamespace={data.apiNamespace}
        />
      </div>
    </div>
  );
}

const container = document.getElementById('llmagnet-analytics-app');
if (container) {
  const root = ReactDOM.createRoot(container);
  root.render(<AnalyticsApp />);
}