import { useState } from 'react'
import { ContentSettings } from './components/content-settings'
import { trackSettingsSaved } from './lib/mixpanel'
import { initEntry, useBootstrap } from './hooks/use-bootstrap'
import { __ } from './lib/i18n'
import './index.css'

// Init Mixpanel
initEntry('llmagnetContentSettingsData', 'Content Settings');

export function ContentSettingsApp() {
  const { data } = useBootstrap('llmagnetContentSettingsData');
  const [saveHint, setSaveHint] = useState<'idle' | 'saved'>('idle');

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

  const handleSettingsChange = async (newSettings: any) => {
    trackSettingsSaved('content', Object.keys(newSettings));

    try {
      const response = await fetch(data.ajaxUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
          action: 'llmagnet_ai_seo_save_settings',
          nonce: data.nonce,
          settings: JSON.stringify(newSettings),
        }),
      });

      if (!response.ok) {
        throw new Error('Failed to save settings');
      }
      setSaveHint('saved');
      window.setTimeout(() => setSaveHint('idle'), 2000);
    } catch (err) {
      console.error('Error saving settings:', err);
      window.location.reload();
    }
  };

  return (
    <div className="llms-content-settings-react-app" style={{ position: 'relative', backgroundColor: '#F0F0F1' }}>
      {saveHint === 'saved' && (
        <div
          className="llmagnet-save-notice rounded-md bg-emerald-600 text-white text-sm px-3 py-2 shadow-md"
          role="status"
          aria-live="polite"
        >
          {__('Settings saved', 'llmagnet-llm-txt-generator')}
        </div>
      )}
      <ContentSettings 
        settings={data.settings}
        postTypes={data.postTypes}
        wooCommerceActive={data.wooCommerceActive}
        llmsFullInfo={data.llmsFullInfo}
        robotsTxtStatus={data.robotsTxtStatus}
        onSettingsChange={handleSettingsChange}
      />
    </div>
  );
}