/**
 * Editor Sidebar Component
 *
 * Main sidebar component for the Block Editor integration.
 * Uses window.wp.* directly to avoid ES module shim timing issues.
 *
 * @package
 */

// Import styles only - no @wordpress/* imports to avoid shim issues
import './styles.css';
import './panels/readability-panel.css';
import './panels/headline-analyzer-panel.css';
import './panels/linking-suggestions-panel.css';

// Import panels - these should also use window.wp.* directly
import ContentAnalysisPanel from './panels/ContentAnalysisPanel';
import HeadlineAnalyzerPanel from './panels/HeadlineAnalyzerPanel';
import LinkingSuggestionsPanel from './panels/LinkingSuggestionsPanel';

const EditorSidebar = () => {
  // Access WordPress APIs at render time
  const { __ = (text) => text } = window.wp?.i18n || {};
  const { Panel, PanelBody } = window.wp.components;
  const { useSelect } = window.wp.data;

  // Get current post data
  const { postId } = useSelect((select) => {
    const { getCurrentPostId, getCurrentPostType, getEditedPostAttribute } = select('core/editor');
    return {
      postId: getCurrentPostId(),
    };
  }, []);

  const contentAnalysisSettings = window?.proRankSidebar?.contentAnalysis || {};
  const isContentAnalysisEnabled =
    typeof contentAnalysisSettings.enabled === 'boolean'
      ? contentAnalysisSettings.enabled
      : typeof contentAnalysisSettings.enable_realtime === 'boolean'
        ? contentAnalysisSettings.enable_realtime
        : true;

  return (
    <div className="prorank-editor-sidebar">
      <Panel>
        {isContentAnalysisEnabled && (
          <PanelBody
            title={__('Content Analysis & SEO', 'prorank-seo')}
            initialOpen={true}
            className="prorank-panel-body"
          >
            <div className="prorank-panel-content">
              <ContentAnalysisPanel postId={postId} />
            </div>
          </PanelBody>
        )}

        <PanelBody
          title={__('Headline Analyzer', 'prorank-seo')}
          initialOpen={false}
          className="prorank-panel-body"
        >
          <div className="prorank-panel-content">
            <HeadlineAnalyzerPanel postId={postId} />
          </div>
        </PanelBody>

        <PanelBody
          title={__('Internal Links (Quick)', 'prorank-seo')}
          initialOpen={false}
          className="prorank-panel-body"
        >
          <div className="prorank-panel-content">
            <LinkingSuggestionsPanel postId={postId} />
          </div>
        </PanelBody>

      </Panel>

      {/* Debug info in development */}
    </div>
  );
};

export default EditorSidebar;