import React from 'react'
import { DashboardAnalytics } from './components/dashboard-analytics'
import { initEntry, useBootstrap } from './hooks/use-bootstrap'
import { __ } from './lib/i18n'
import './index.css'

class BotAnalyticsErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean; message?: string }
> {
  state: { hasError: boolean; message?: string } = { hasError: false }

  static getDerivedStateFromError(err: Error) {
    return { hasError: true, message: err.message }
  }

  componentDidCatch(err: Error, info: React.ErrorInfo) {
    console.error('[LLMagnet] Bot Analytics error', err, info.componentStack)
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="wrap p-6">
          <p className="text-red-600 font-medium">
            {__('Something went wrong loading Bot Analytics.', 'llmagnet-llm-txt-generator')}
          </p>
          {this.state.message && (
            <p className="text-sm text-gray-600 mt-2 max-w-xl">{this.state.message}</p>
          )}
        </div>
      )
    }
    return this.props.children
  }
}

initEntry('llmagnetBotAnalyticsData', 'Bot Analytics');

function BotAnalyticsAppInner() {
  const { data } = useBootstrap('llmagnetBotAnalyticsData');

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

  const apiRoot = window.wpApiSettings?.root || '';
  const apiNamespace = 'llm-analytics/v1';

  return (
    <div className="llms-bot-analytics-react-app" style={{ position: 'relative', backgroundColor: '#F0F0F1' }}>
      <div className="wrap">
        <DashboardAnalytics 
          apiRoot={apiRoot}
          apiNamespace={apiNamespace}
          pluginUrl={data.pluginUrl}
          filterBots={undefined}
          showFullStatsLink={false}
        />
      </div>
    </div>
  );
}

export function BotAnalyticsApp() {
  return (
    <BotAnalyticsErrorBoundary>
      <BotAnalyticsAppInner />
    </BotAnalyticsErrorBoundary>
  );
}