import { Overview } from './components/overview'
import { trackLlmsTxtGenerated } from './lib/mixpanel'
import { initEntry, useBootstrap } from './hooks/use-bootstrap'
import { __ } from './lib/i18n'
import './index.css'

// Init Mixpanel
initEntry('llmagnetDashboardData', 'Overview');

export function OverviewApp() {
  const { data } = useBootstrap('llmagnetDashboardData');

  const handleGenerateNow = async () => {
    if (!data) return { success: false, message: __('No data available', 'llmagnet-llm-txt-generator') };

    try {
      const formData = new FormData();
      formData.append('action', 'llmagnet_ai_seo_generate_now');
      formData.append('nonce', data.nonce);

      const response = await fetch(data.ajaxUrl, {
        method: 'POST',
        body: formData,
        credentials: 'same-origin',
      });

      const result = await response.json();
      trackLlmsTxtGenerated(result.success, 'overview', result.data?.message);

      return {
        success: result.success,
        message: result.data?.message || __('Unknown error', 'llmagnet-llm-txt-generator'),
        timestamp: result.data?.timestamp,
      };
    } catch (error) {
      console.error('Error generating LLMS.txt:', error);
      trackLlmsTxtGenerated(false, 'overview', 'Network error');
      return {
        success: false,
        message: __('Error generating LLMS.txt. Please check server permissions.', 'llmagnet-llm-txt-generator'),
      };
    }
  };

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

  return (
    <div className="llms-txt-react-app">
      <div className="wrap">
        <Overview 
          data={data}
          onGenerateNow={handleGenerateNow}
        />
      </div>
    </div>
  );
}