import { SystemInformation } from './components/system-information'
import { initEntry, useBootstrap } from './hooks/use-bootstrap'
import { __ } from './lib/i18n'
import './index.css'

// Init Mixpanel
initEntry('llmagnetSystemInfoData', 'System Information');

export function SystemInformationApp() {
  const { data } = useBootstrap('llmagnetSystemInfoData');

  if (!data) {
    return <div className="p-4 text-red-600">{__('System information data not found.', 'llmagnet-llm-txt-generator')}</div>;
  }

  return (
    <div className="llms-system-information-react-app" style={{ position: 'relative', backgroundColor: '#F0F0F1' }}>
      <SystemInformation 
        wordpressVersion={data.wordpressVersion}
        pluginVersion={data.pluginVersion}
        rootPath={data.rootPath}
        llmsTxtExists={data.llmsTxtExists}
        llmsTxtSize={data.llmsTxtSize}
        postsCount={data.postsCount}
        markdownCount={data.markdownCount}
        imageCount={data.imageCount}
        lastGenerated={data.lastGenerated}
        telemetryOptIn={data.analyticsData?.telemetryOptIn === true}
      />
    </div>
  );
}