# thinkrank/1.0.0/src/admin/components/essential-seo/AnalyticsTab.js

ThinkRank AI SEO – AI SEO Plugin for WordPress: Schema, XML Sitemaps, Meta Tags, Search Console & Local SEO, version 1.0.0. 1,490 lines.

- Page: https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/essential-seo/AnalyticsTab.js
- Raw: https://pluginprobe.com/plugins/thinkrank/1.0.0/raw/src/admin/components/essential-seo/AnalyticsTab.js
- Modified: 2025-08-10T07:57:44+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/essential-seo/AnalyticsTab.js#L10-L20`.

```javascript
/**
 * Analytics Tab Component
 *
 * SEO Analytics & Intelligence tab with Google API integration,
 * dashboard data visualization, and AI-powered insights.
 * Follows ThinkRank patterns from Site Identity and Performance tabs.
 *
 * @package ThinkRank
 * @since 1.0.0
 */

import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
    Card,
    CardBody,
    CardHeader,
    Spinner,
    Notice,
    Button,
    Flex,
    FlexItem,
    SelectControl,
    __experimentalText as Text,
    __experimentalHeading as Heading,
    __experimentalDivider as Divider
} from '@wordpress/components';
import apiFetch from '@wordpress/api-fetch';

// Import shared components following ThinkRank patterns
import SettingsCard from '../common/SettingsCard';
import OptimizationButton from '../common/OptimizationButton';

/**
 * Default analytics settings
 * Following ThinkRank settings patterns
 */
const getDefaultSettings = () => ({
    seo_analytics_enabled: false,
    seo_analytics_setup_completed: false,
    seo_analytics_google_analytics_property_id: '',
    search_console_property: '',
    seo_analytics_enable_ai_insights: true,
    seo_analytics_enable_automated_alerts: false,
    seo_analytics_monitoring_frequency: 3600,
    seo_analytics_cache_analytics_data: true
});

/**
 * Analytics Tab Component
 */
const AnalyticsTab = ({ activeSubSection = 'setup', onNavigate }) => {
    // State management following Site Identity patterns
    const [isLoading, setIsLoading] = useState(true);
    const [isSaving, setIsSaving] = useState(false);

    const [isRefreshing, setIsRefreshing] = useState(false);
    const [settings, setSettings] = useState({});
    const [hasChanges, setHasChanges] = useState(false);
    const [notice, setNotice] = useState(null);

    const [dashboardData, setDashboardData] = useState(null);
    const [seoOpportunities, setSeoOpportunities] = useState(null);
    const [dateRange, setDateRange] = useState('30d');

    // Intelligence enhancement state
    const [intelligentDashboardData, setIntelligentDashboardData] = useState(null);
    const [intelligentOpportunities, setIntelligentOpportunities] = useState(null);
    const [seoInsights, setSeoInsights] = useState(null);
    const [isLoadingIntelligence, setIsLoadingIntelligence] = useState(false);

    /**
     * Check if dashboard data contains valid/meaningful data
     * @param {Object} data Dashboard data object
     * @return {boolean} True if data contains meaningful information
     */
    const hasValidDashboardData = (data) => {
        if (!data) return false;

        // Check if traffic data has meaningful values
        const hasTrafficData = data.traffic &&
            Object.keys(data.traffic).length > 0 &&
            (data.traffic.sessions > 0 || data.traffic.pageviews > 0);

        // Check if search performance has data
        const hasSearchData = data.search_performance &&
            data.search_performance.rows &&
            data.search_performance.rows.length > 0;

        // Check if core web vitals has data
        const hasWebVitalsData = data.core_web_vitals &&
            Object.keys(data.core_web_vitals).length > 0 &&
            !data.core_web_vitals.error;

        return hasTrafficData || hasSearchData || hasWebVitalsData;
    };

    useEffect(() => {
        loadSettings();
        if (activeSubSection === 'dashboard' || activeSubSection === 'opportunities' || activeSubSection === 'insights') {
            loadDashboardData();
        }
    }, [activeSubSection]);

    useEffect(() => {
        if (activeSubSection === 'dashboard' || activeSubSection === 'opportunities' || activeSubSection === 'insights') {
            loadDashboardData();
        }
    }, [dateRange]);

    // Clear notice when component unmounts or tab changes
    useEffect(() => {
        return () => {
            setNotice(null);
        };
    }, []);

    /**
     * Load settings from API
     * Following Site Identity loadSettings pattern
     */
    const loadSettings = async () => {
        try {
            setIsLoading(true);
            const response = await apiFetch({
                path: '/thinkrank/v1/settings-management/category/seo_analytics',
                method: 'GET'
            });

            if (response.success && response.data && response.data.settings) {
                setSettings({ ...getDefaultSettings(), ...response.data.settings });
            } else {
                setSettings(getDefaultSettings());
            }
        } catch (error) {
            console.error('Analytics settings load error:', error);
            setSettings(getDefaultSettings());
            setNotice({
                status: 'error',
                message: __('Failed to load analytics settings. Please try again.', 'thinkrank')
            });
        } finally {
            setIsLoading(false);
        }
    };

    /**
     * Save settings to API
     * Following Site Identity saveSettings pattern
     */
    const saveSettings = async () => {
        try {
            setIsSaving(true);
            const response = await apiFetch({
                path: '/thinkrank/v1/settings-management/category/seo_analytics',
                method: 'POST',
                data: { settings }
            });

            if (response.success) {
                setHasChanges(false);
                setNotice({
                    status: 'success',
                    message: __('Analytics settings saved successfully.', 'thinkrank')
                });
            } else {
                setNotice({
                    status: 'error',
                    message: response.message || __('Failed to save settings.', 'thinkrank')
                });
            }
        } catch (error) {
            console.error('Analytics settings save error:', error);
            setNotice({
                status: 'error',
                message: __('Failed to save analytics settings. Please try again.', 'thinkrank')
            });
        } finally {
            setIsSaving(false);
        }
    };

    /**
     * Handle setting changes
     * Following Site Identity handleSettingChange pattern
     */
    const handleSettingChange = (key, value) => {
        setSettings(prev => ({
            ...prev,
            [key]: value
        }));
        setHasChanges(true);
    };



    /**
     * Load dashboard data with intelligence enhancements
     */
    const loadDashboardData = async () => {
        try {
            setIsRefreshing(true);
            setIsLoadingIntelligence(true);

            // Load basic dashboard data (maintain backward compatibility)
            const dashboardResponse = await apiFetch({
                path: `/thinkrank/v1/seo-analytics/dashboard?date_range=${dateRange}`,
                method: 'GET'
            });

            if (dashboardResponse.success) {
                setDashboardData(dashboardResponse.data);
            }

            // Load basic SEO opportunities (maintain backward compatibility)
            const opportunitiesResponse = await apiFetch({
                path: `/thinkrank/v1/seo-analytics/opportunities?date_range=${dateRange}`,
                method: 'GET'
            });

            if (opportunitiesResponse.success) {
                setSeoOpportunities(opportunitiesResponse.data);
            }

            // Load intelligent dashboard data (new intelligence features)
            if (settings.seo_analytics_enable_ai_insights) {
                try {
                    const intelligentDashboardResponse = await apiFetch({
                        path: `/thinkrank/v1/seo-analytics/intelligent-dashboard?date_range=${dateRange}`,
                        method: 'GET'
                    });

                    if (intelligentDashboardResponse.success) {
                        setIntelligentDashboardData(intelligentDashboardResponse.data);
                    } else {
                        // Use the specific message from the backend
                        const message = intelligentDashboardResponse.message ||
                            __('AI dashboard insights require data collection for meaningful analysis.', 'thinkrank');

                        if (!notice || notice.status !== 'error') {
                            setNotice({
                                status: 'info',
                                message: message
                            });
                        }
                    }
                } catch (intelligenceError) {
                    // Only show error notice if it's a real network/server error
                    if (intelligenceError.message && !intelligenceError.message.includes('retrieved')) {
                        setNotice({
                            status: 'info',
                            message: __('AI insights require data collection. Please ensure your Google Analytics and Search Console are connected and have collected data for meaningful analysis.', 'thinkrank')
                        });
                    }
                }

                // Load intelligent opportunities (new intelligence features)
                try {
                    const intelligentOpportunitiesResponse = await apiFetch({
                        path: `/thinkrank/v1/seo-analytics/intelligent-opportunities?date_range=${dateRange}`,
                        method: 'GET'
                    });

                    if (intelligentOpportunitiesResponse.success) {
                        setIntelligentOpportunities(intelligentOpportunitiesResponse.data);
                    }
                    // Don't show notice for opportunities - they're handled in the UI cards
                } catch (intelligenceError) {
                    // Silently handle - opportunities are optional and shown in UI cards
                }

                // Load SEO insights (new intelligence features)
                try {
                    const insightsResponse = await apiFetch({
                        path: `/thinkrank/v1/seo-analytics/insights?date_range=${dateRange}`,
                        method: 'GET'
                    });

                    if (insightsResponse.success) {
                        setSeoInsights(insightsResponse.data);
                    } else {
                        // Use the specific message from the backend for insights
                        const message = insightsResponse.message ||
                            __('SEO insights require data collection for meaningful analysis.', 'thinkrank');

                        if (!notice || notice.status !== 'error') {
                            setNotice({
                                status: 'info',
                                message: message
                            });
                        }
                    }
                } catch (intelligenceError) {
                    // Silently handle - insights are optional and shown in UI cards
                }
            }

        } catch (error) {
            console.error('Dashboard data load error:', error);
            setNotice({
                status: 'error',
                message: __('Failed to load analytics data. Please check your Google API connections in the Integrations tab.', 'thinkrank')
            });
        } finally {
            setIsRefreshing(false);
            setIsLoadingIntelligence(false);
        }
    };

    /**
     * Refresh analytics data
     */
    const refreshData = async () => {
        try {
            setIsRefreshing(true);
            const response = await apiFetch({
                path: '/thinkrank/v1/seo-analytics/refresh',
                method: 'POST'
            });

            if (response.success) {
                setNotice({
                    status: 'success',
                    message: response.data.message
                });
                // Reload dashboard data
                await loadDashboardData();
            } else {
                setNotice({
                    status: 'error',
                    message: response.message || __('Failed to refresh data.', 'thinkrank')
                });
            }
        } catch (error) {
            console.error('Data refresh error:', error);
            setNotice({
                status: 'error',
                message: __('Failed to refresh analytics data. Please try again.', 'thinkrank')
            });
        } finally {
            setIsRefreshing(false);
        }
    };

    /**
     * Get optimization button configuration based on active section
     * Following Site Identity getOptimizationButtonConfig pattern
     */
    const getOptimizationButtonConfig = () => {
        switch (activeSubSection) {
            case 'setup':
                return null; // No button for setup section
            case 'dashboard':
            case 'opportunities':
            case 'insights':
                return {
                    type: 'refresh',
                    label: activeSubSection === 'insights' ? __('Regenerate Insights', 'thinkrank') : __('Refresh Data', 'thinkrank'),
                    loadingLabel: activeSubSection === 'insights' ? __('Regenerating...', 'thinkrank') : __('Refreshing...', 'thinkrank'),
                    onClick: refreshData,
                    isBusy: isRefreshing || isLoadingIntelligence,
                    disabled: !settings.seo_analytics_enabled || isRefreshing || isLoadingIntelligence
                };
            default:
                return null;
        }
    };

    /**
     * Render loading state
     * Following Site Identity loading pattern
     */
    if (isLoading) {
        return (
            <div className="thinkrank-flex thinkrank-justify-center thinkrank-items-center thinkrank-p-8">
                <Spinner />
            </div>
        );
    }

    /**
     * Date range options for dashboard
     */
    const dateRangeOptions = [
        { label: __('Last 7 days', 'thinkrank'), value: '7d' },
        { label: __('Last 30 days', 'thinkrank'), value: '30d' },
        { label: __('Last 90 days', 'thinkrank'), value: '90d' }
    ];

    /**
     * Render SEO Health Score component
     * Following ThinkRank metric card patterns
     */
    const renderSEOHealthScore = () => {
        if (!intelligentDashboardData?.intelligence?.seo_health_score) {
            return null;
        }

        const healthScore = intelligentDashboardData.intelligence.seo_health_score;
        const scoreColor = healthScore.overall_score >= 80 ? 'success' :
                          healthScore.overall_score >= 60 ? 'warning' : 'error';

        return (
            <Card size="small" className="thinkrank-seo-health-card thinkrank-mb-lg thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                <CardHeader className="thinkrank-border-b thinkrank-border-light thinkrank-bg-gray-100">
                    <Flex justify="space-between" align="center">
                        <FlexItem>
                            <h3>{__('SEO Health Score', 'thinkrank')}</h3>
                        </FlexItem>
                        <FlexItem>
                            <div className={`thinkrank-health-score thinkrank-score-${scoreColor} thinkrank-flex thinkrank-items-center thinkrank-gap-2`}>
                                <div className={`thinkrank-flex thinkrank-items-center thinkrank-justify-center thinkrank-rounded-full thinkrank-text-white thinkrank-relative thinkrank-font-bold thinkrank-text-xl thinkrank-shadow-md ${scoreColor === 'success' ? 'thinkrank-bg-green' : scoreColor === 'warning' ? 'thinkrank-bg-orange' : 'thinkrank-bg-red'}`} style={{
                                    width: '60px',
                                    height: '60px'
                                }}>
                                    {Math.round(healthScore.overall_score)}
                                    <span className={`thinkrank-score-grade thinkrank-absolute thinkrank-flex thinkrank-items-center thinkrank-justify-center thinkrank-rounded-full thinkrank-text-white thinkrank-border-2 thinkrank-border-white thinkrank-font-bold thinkrank-text-sm thinkrank-shadow-sm ${scoreColor === 'success' ? 'thinkrank-bg-green' : scoreColor === 'warning' ? 'thinkrank-bg-orange' : 'thinkrank-bg-red'}`} style={{
                                        top: '-8px',
                                        right: '-8px',
                                        padding: '2px 6px',
                                        minWidth: '20px',
                                        height: '20px'
                                    }}>
                                        {healthScore.grade}
                                    </span>
                                </div>
                            </div>
                        </FlexItem>
                    </Flex>
                </CardHeader>
                <CardBody className="thinkrank-p-lg">
                    <div className="thinkrank-space-y-3">
                        <Text variant="muted">{healthScore.interpretation}</Text>

                        {/* Component Scores */}
                        <div className="thinkrank-grid thinkrank-grid-cols-2 thinkrank-gap-3">
                            {Object.entries(healthScore.component_scores).map(([component, score]) => (
                                <div key={component} className="thinkrank-component-score thinkrank-p-3 thinkrank-bg-gray-100 thinkrank-border thinkrank-border-light thinkrank-rounded">
                                    <div className="thinkrank-component-name thinkrank-text-xs thinkrank-text-muted thinkrank-mb-1">
                                        {component.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())}
                                    </div>
                                    <div className="thinkrank-component-value thinkrank-text-lg thinkrank-font-bold thinkrank-text-primary">
                                        {Math.round(score)}/25
                                    </div>
                                </div>
                            ))}
                        </div>

                        {/* Recommendations */}
                        {healthScore.recommendations && healthScore.recommendations.length > 0 && (
                            <div className="thinkrank-recommendations thinkrank-mt-lg">
                                <Text weight="600" className="thinkrank-mb-3 thinkrank-block thinkrank-text-secondary">
                                    {__('Recommendations:', 'thinkrank')}
                                </Text>
                                <div className="thinkrank-recommendation-list thinkrank-flex thinkrank-flex-col thinkrank-gap-2">
                                    {healthScore.recommendations.slice(0, 3).map((rec, index) => (
                                        <div key={index} className="thinkrank-flex thinkrank-items-start thinkrank-gap-2 thinkrank-p-3 thinkrank-bg-gray-100 thinkrank-border thinkrank-border-light thinkrank-rounded thinkrank-border-l-4 thinkrank-border-blue">
                                            <div className="thinkrank-w-2 thinkrank-h-2 thinkrank-rounded-full thinkrank-bg-blue thinkrank-mt-2 thinkrank-flex-shrink-0"></div>
                                            <Text size="small" className="thinkrank-text-tertiary thinkrank-leading-relaxed">
                                                {typeof rec === 'object' ? rec.recommendation : rec}
                                            </Text>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        )}
                    </div>
                </CardBody>
            </Card>
        );
    };

    /**
     * Render Traffic Trends component with intelligence
     * Following ThinkRank trend display patterns
     */
    const renderTrafficTrends = () => {
        if (!intelligentDashboardData?.intelligence?.trends?.traffic_trends) {
            return null;
        }

        const trends = intelligentDashboardData.intelligence.trends.traffic_trends;

        return (
            <Card size="small" className="thinkrank-mb-lg thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                <CardHeader className="thinkrank-border-b thinkrank-border-light thinkrank-bg-gray-100">
                    <h3>{__('Traffic Trends & Intelligence', 'thinkrank')}</h3>
                </CardHeader>
                <CardBody className="thinkrank-p-lg">
                    <div className="thinkrank-space-y-3">
                        {/* Sessions Trend */}
                        {trends.sessions && (
                            <div className="thinkrank-trend-item">
                                <Flex justify="space-between" align="center">
                                    <FlexItem>
                                        <Text weight="600">{trends.sessions.metric_name}</Text>
                                        <Text variant="muted" size="small">{trends.sessions.interpretation}</Text>
                                    </FlexItem>
                                    <FlexItem>
                                        <div className={`thinkrank-trend-indicator thinkrank-trend-${trends.sessions.trend_direction}`}>
                                            <span className="thinkrank-trend-value">
                                                {trends.sessions.percentage_change > 0 ? '+' : ''}{trends.sessions.percentage_change.toFixed(1)}%
                                            </span>
                                            <span className={`thinkrank-trend-significance thinkrank-significance-${trends.sessions.significance}`}>
                                                {trends.sessions.significance}
                                            </span>
                                        </div>
                                    </FlexItem>
                                </Flex>
                            </div>
                        )}

                        {/* Organic Traffic Trend */}
                        {trends.organic_traffic && (
                            <div className="thinkrank-trend-item">
                                <Flex justify="space-between" align="center">
                                    <FlexItem>
                                        <Text weight="600">{__('Organic Traffic', 'thinkrank')}</Text>
                                        <Text variant="muted" size="small">{trends.organic_traffic.interpretation}</Text>
                                    </FlexItem>
                                    <FlexItem>
                                        <div className={`thinkrank-trend-indicator thinkrank-trend-${trends.organic_traffic.trend_direction}`}>
                                            <span className="thinkrank-trend-value">
                                                {trends.organic_traffic.percentage_change > 0 ? '+' : ''}{trends.organic_traffic.percentage_change.toFixed(1)}%
                                            </span>
                                        </div>
                                    </FlexItem>
                                </Flex>
                            </div>
                        )}

                        {/* Summary */}
                        {trends.summary && (
                            <div className="thinkrank-trend-summary">
                                <Text variant="muted" size="small">{trends.summary}</Text>
                            </div>
                        )}
                    </div>
                </CardBody>
            </Card>
        );
    };

    /**
     * Render SEO Insights component
     * Following ThinkRank insight display patterns
     */
    const renderSEOInsights = () => {
        if (!seoInsights?.insights || seoInsights.insights.length === 0) {
            return null;
        }

        const insights = seoInsights.insights.slice(0, 5); // Show top 5 insights

        return (
            <Card size="small" className="thinkrank-mb-lg thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                <CardHeader className="thinkrank-border-b thinkrank-border-light thinkrank-bg-gray-100">
                    <Flex justify="space-between" align="center">
                        <FlexItem>
                            <h3>{__('SEO Insights', 'thinkrank')}</h3>
                        </FlexItem>
                        <FlexItem>
                            <Text variant="muted" size="small">
                                {seoInsights.summary.high_impact_count} {__('high impact', 'thinkrank')} •
                                {seoInsights.summary.action_required_count} {__('need action', 'thinkrank')}
                            </Text>
                        </FlexItem>
                    </Flex>
                </CardHeader>
                <CardBody className="thinkrank-p-lg">
                    <div className="thinkrank-space-y-3">
                        {insights.map((insight, index) => (
                            <div key={insight.id || index} className={`thinkrank-insight-item thinkrank-impact-${insight.impact} thinkrank-p-6 thinkrank-bg-white thinkrank-border-2 thinkrank-border-light thinkrank-rounded-lg thinkrank-mb-lg thinkrank-border-l-4 thinkrank-shadow-sm ${insight.impact === 'high' ? 'thinkrank-border-red' : insight.impact === 'medium' ? 'thinkrank-border-orange' : 'thinkrank-border-muted'}`}>
                                <div className="thinkrank-insight-header thinkrank-mb-3">
                                    <Flex justify="space-between" align="center">
                                        <FlexItem>
                                            <Text weight="600" className="thinkrank-text-primary thinkrank-text-lg">{insight.title}</Text>
                                        </FlexItem>
                                        <FlexItem>
                                            <div className="thinkrank-insight-meta thinkrank-flex thinkrank-gap-2">
                                                <span className={`thinkrank-impact-badge thinkrank-impact-${insight.impact} thinkrank-px-3 thinkrank-py-1 thinkrank-rounded-full thinkrank-text-xs thinkrank-font-semibold thinkrank-border ${insight.impact === 'high' ? 'thinkrank-bg-red thinkrank-text-white thinkrank-border-red' : insight.impact === 'medium' ? 'thinkrank-bg-orange thinkrank-text-white thinkrank-border-orange' : 'thinkrank-bg-gray-100 thinkrank-text-muted thinkrank-border-light'}`}>
                                                    {insight.impact.toUpperCase()}
                                                </span>
                                                {insight.action_required && (
                                                    <span className="thinkrank-action-required thinkrank-px-3 thinkrank-py-1 thinkrank-rounded-full thinkrank-text-xs thinkrank-font-semibold thinkrank-bg-red thinkrank-text-white thinkrank-border thinkrank-border-red">
                                                        {__('Action Required', 'thinkrank')}
                                                    </span>
                                                )}
                                            </div>
                                        </FlexItem>
                                    </Flex>
                                </div>
                                <div className="thinkrank-insight-content">
                                    <Text variant="muted" size="small" className="thinkrank-mb-3 thinkrank-text-tertiary thinkrank-leading-relaxed">{insight.description}</Text>
                                    {insight.recommended_action && (
                                        <div className="thinkrank-insight-action thinkrank-p-3 thinkrank-bg-gray-100 thinkrank-rounded thinkrank-border thinkrank-border-light thinkrank-border-l-4 thinkrank-border-blue">
                                            <Text size="small" className="thinkrank-text-secondary thinkrank-leading-relaxed">
                                                <strong className="thinkrank-text-primary">{__('Recommended:', 'thinkrank')}</strong> {insight.recommended_action}
                                            </Text>
                                        </div>
                                    )}
                                </div>
                            </div>
                        ))}
                    </div>
                </CardBody>
            </Card>
        );
    };

    /**
     * Render setup section content
     */
    const renderSetupSection = () => (
        <div className="thinkrank-space-y-6">
            <Text variant="muted">
                {__('Configure Google API connections for SEO analytics data collection.', 'thinkrank')}
            </Text>

            {/* Setup Instructions */}
            <Card size="small" className="thinkrank-mt-md thinkrank-mb-lg thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                <CardHeader className="thinkrank-border-b thinkrank-border-light thinkrank-bg-gray-100">
                    <h3>{__('Setup Instructions', 'thinkrank')}</h3>
                </CardHeader>
                <CardBody className="thinkrank-p-lg">
                    <div className="thinkrank-space-y-md">
                        <div>
                            <h4 className="thinkrank-mb-1 thinkrank-text-primary">{__('1. Configure API Keys', 'thinkrank')}</h4>
                            <Text variant="muted">
                                {__('Add your Google Analytics, Search Console, and PageSpeed API keys in the ', 'thinkrank')}
                                <Button
                                    variant="link"
                                    onClick={() => {
                                        // Navigate to Integrations section
                                        if (onNavigate) {
                                            onNavigate('integrations', 'google-services');
                                        }
                                    }}
                                    className="thinkrank-p-0 thinkrank-underline thinkrank-h-auto">
                                >
                                    {__('Integrations tab', 'thinkrank')}
                                </Button>
                                {__('.', 'thinkrank')}
                            </Text>
                        </div>
                        <div>
                            <h4 className="thinkrank-mb-1 thinkrank-text-primary">{__('2. Test Connections', 'thinkrank')}</h4>
                            <Text variant="muted">
                                {__('Use the "Test Connections" button to verify your API configuration.', 'thinkrank')}
                            </Text>
                        </div>
                        <div>
                            <h4 className="thinkrank-mb-1 thinkrank-text-primary">{__('3. Enable Analytics', 'thinkrank')}</h4>
                            <Text variant="muted">
                                {__('Toggle the "Enable SEO Analytics" switch above to start collecting data.', 'thinkrank')}
                            </Text>
                        </div>
                    </div>
                </CardBody>
            </Card>
        </div>
    );

    /**
     * Render dashboard section content with intelligence enhancements
     */
    const renderDashboardSection = () => (
        <div className="thinkrank-space-y-6">
            <Flex justify="space-between" align="center">
                <FlexItem>
                    <Text variant="muted">
                        {settings.seo_analytics_enable_ai_insights
                            ? __('SEO analytics dashboard with AI-powered insights, trends, and performance intelligence.', 'thinkrank')
                            : __('SEO analytics dashboard with traffic and search performance data.', 'thinkrank')
                        }
                    </Text>
                </FlexItem>
                <FlexItem>
                    <SelectControl
                        label={__('Date Range', 'thinkrank')}
                        value={dateRange}
                        options={dateRangeOptions}
                        onChange={setDateRange}
                        __next40pxDefaultSize={true}
                        __nextHasNoMarginBottom={true}
                    />
                </FlexItem>
            </Flex>

            {/* Intelligence Loading State */}
            {isLoadingIntelligence && settings.seo_analytics_enable_ai_insights && (
                <Card size="small" className="thinkrank-mb-lg thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                    <CardBody className="thinkrank-p-lg">
                        <div className="thinkrank-flex thinkrank-justify-center thinkrank-items-center thinkrank-p-md">
                            <Spinner />
                            <Text variant="muted" className="thinkrank-ml-sm">
                                {__('Loading AI insights...', 'thinkrank')}
                            </Text>
                        </div>
                    </CardBody>
                </Card>
            )}

            {/* SEO Health Score - Intelligence Feature */}
            {settings.seo_analytics_enable_ai_insights && renderSEOHealthScore()}

            {/* Dashboard Data */}
            {dashboardData && hasValidDashboardData(dashboardData) && (
                <div className="thinkrank-space-y-6 thinkrank-mt-6">
                    {/* Traffic Trends with Intelligence */}
                    {settings.seo_analytics_enable_ai_insights && renderTrafficTrends()}

                    {/* Traditional Traffic Overview (Enhanced) */}
                    {dashboardData.traffic && Object.keys(dashboardData.traffic).length > 0 && (
                        <Card size="small" className="thinkrank-mb-lg thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                            <CardHeader className="thinkrank-border-b thinkrank-border-light thinkrank-bg-gray-100">
                                <h3>{__('Traffic Overview', 'thinkrank')}</h3>
                            </CardHeader>
                            <CardBody className="thinkrank-p-lg">
                                <div className="thinkrank-grid thinkrank-grid-cols-2 thinkrank-gap-3">
                                    <div className="thinkrank-metric-card thinkrank-p-lg thinkrank-bg-gray-100 thinkrank-border thinkrank-border-light thinkrank-rounded thinkrank-text-center">
                                        <div className="thinkrank-metric-value thinkrank-text-2xl thinkrank-font-bold thinkrank-text-primary thinkrank-mb-1">{dashboardData.traffic.sessions?.toLocaleString() || 0}</div>
                                        <div className="thinkrank-metric-label thinkrank-text-xs thinkrank-text-muted thinkrank-uppercase thinkrank-tracking-wide">{__('Sessions', 'thinkrank')}</div>
                                        {/* Add trend indicator if intelligence data available */}
                                        {intelligentDashboardData?.intelligence?.trends?.traffic_trends?.sessions && (
                                            <div className={`thinkrank-metric-trend thinkrank-trend-${intelligentDashboardData.intelligence.trends.traffic_trends.sessions.trend_direction}`}>
                                                {intelligentDashboardData.intelligence.trends.traffic_trends.sessions.percentage_change > 0 ? '+' : ''}
                                                {intelligentDashboardData.intelligence.trends.traffic_trends.sessions.percentage_change.toFixed(1)}%
                                            </div>
                                        )}
                                    </div>
                                    <div className="thinkrank-metric-card thinkrank-p-lg thinkrank-bg-gray-100 thinkrank-border thinkrank-border-light thinkrank-rounded thinkrank-text-center">
                                        <div className="thinkrank-metric-value thinkrank-text-2xl thinkrank-font-bold thinkrank-text-primary thinkrank-mb-1">{dashboardData.traffic.pageviews?.toLocaleString() || 0}</div>
                                        <div className="thinkrank-metric-label thinkrank-text-xs thinkrank-text-muted thinkrank-uppercase thinkrank-tracking-wide">{__('Pageviews', 'thinkrank')}</div>
                                        {/* Add trend indicator if intelligence data available */}
                                        {intelligentDashboardData?.intelligence?.trends?.traffic_trends?.pageviews && (
                                            <div className={`thinkrank-metric-trend thinkrank-trend-${intelligentDashboardData.intelligence.trends.traffic_trends.pageviews.trend_direction}`}>
                                                {intelligentDashboardData.intelligence.trends.traffic_trends.pageviews.percentage_change > 0 ? '+' : ''}
                                                {intelligentDashboardData.intelligence.trends.traffic_trends.pageviews.percentage_change.toFixed(1)}%
                                            </div>
                                        )}
                                    </div>
                                    <div className="thinkrank-metric-card">
                                        <div className="thinkrank-metric-value">{dashboardData.traffic.active_users?.toLocaleString() || 0}</div>
                                        <div className="thinkrank-metric-label">{__('Active Users', 'thinkrank')}</div>
                                    </div>
                                    <div className="thinkrank-metric-card">
                                        <div className="thinkrank-metric-value">{(dashboardData.traffic.bounce_rate * 100)?.toFixed(1) || 0}%</div>
                                        <div className="thinkrank-metric-label">{__('Bounce Rate', 'thinkrank')}</div>
                                        {/* Add trend indicator if intelligence data available */}
                                        {intelligentDashboardData?.intelligence?.trends?.traffic_trends?.bounce_rate && (
                                            <div className={`thinkrank-metric-trend thinkrank-trend-${intelligentDashboardData.intelligence.trends.traffic_trends.bounce_rate.trend_direction}`}>
                                                {intelligentDashboardData.intelligence.trends.traffic_trends.bounce_rate.percentage_change > 0 ? '+' : ''}
                                                {intelligentDashboardData.intelligence.trends.traffic_trends.bounce_rate.percentage_change.toFixed(1)}%
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </CardBody>
                        </Card>
                    )}

                    {/* SEO Insights - Intelligence Feature */}
                    {settings.seo_analytics_enable_ai_insights && renderSEOInsights()}

                    {/* Search Performance (Enhanced with Intelligence) */}
                    {dashboardData.search_performance && dashboardData.search_performance.rows && dashboardData.search_performance.rows.length > 0 && (
                        <Card size="small" className="thinkrank-mb-lg thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                            <CardHeader className="thinkrank-border-b thinkrank-border-light thinkrank-bg-gray-100">
                                <Flex justify="space-between" align="center">
                                    <FlexItem>
                                        <h3>{__('Search Performance', 'thinkrank')}</h3>
                                    </FlexItem>
                                    {/* Add keyword trends summary if intelligence available */}
                                    {intelligentDashboardData?.intelligence?.trends?.keyword_trends && (
                                        <FlexItem>
                                            <Text variant="muted" size="small">
                                                {intelligentDashboardData.intelligence.trends.keyword_trends.summary}
                                            </Text>
                                        </FlexItem>
                                    )}
                                </Flex>
                            </CardHeader>
                            <CardBody className="thinkrank-p-lg">
                                <div className="thinkrank-space-y-3">
                                    {dashboardData.search_performance.rows.slice(0, 5).map((row, index) => {
                                        // Check if this keyword is in gaining/losing keywords from intelligence
                                        const keyword = row.keys?.[0] || '';
                                        const isGaining = intelligentDashboardData?.intelligence?.trends?.keyword_trends?.top_gaining_keywords?.some(
                                            k => k.keyword === keyword
                                        );
                                        const isLosing = intelligentDashboardData?.intelligence?.trends?.keyword_trends?.top_losing_keywords?.some(
                                            k => k.keyword === keyword
                                        );

                                        return (
                                            <Flex key={index} justify="space-between" align="center">
                                                <FlexItem>
                                                    <div className="thinkrank-keyword-item">
                                                        <Text>{keyword || __('Unknown Query', 'thinkrank')}</Text>
                                                        {/* Add intelligence indicators */}
                                                        {settings.seo_analytics_enable_ai_insights && (
                                                            <div className="thinkrank-keyword-indicators">
                                                                {isGaining && (
                                                                    <span className="thinkrank-keyword-badge thinkrank-badge-success">
                                                                        {__('Gaining', 'thinkrank')}
                                                                    </span>
                                                                )}
                                                                {isLosing && (
                                                                    <span className="thinkrank-keyword-badge thinkrank-badge-warning">
                                                                        {__('Needs Attention', 'thinkrank')}
                                                                    </span>
                                                                )}
                                                            </div>
                                                        )}
                                                    </div>
                                                </FlexItem>
                                                <FlexItem>
                                                    <div className="thinkrank-flex thinkrank-gap-3">
                                                        <span className="thinkrank-metric-small">{row.clicks || 0} {__('clicks', 'thinkrank')}</span>
                                                        <span className="thinkrank-metric-small">{row.impressions || 0} {__('impressions', 'thinkrank')}</span>
                                                        <span className="thinkrank-metric-small">{((row.ctr || 0) * 100).toFixed(1)}% {__('CTR', 'thinkrank')}</span>
                                                        <span className="thinkrank-metric-small">{(row.position || 0).toFixed(1)} {__('pos', 'thinkrank')}</span>
                                                    </div>
                                                </FlexItem>
                                            </Flex>
                                        );
                                    })}
                                </div>
                            </CardBody>
                        </Card>
                    )}

                </div>
            )}

            {(!dashboardData || !hasValidDashboardData(dashboardData)) && !isRefreshing && (
                <Card size="small" className="thinkrank-mb-lg thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                    <CardHeader className="thinkrank-border-b thinkrank-border-light thinkrank-bg-gray-100">
                        <Flex align="center" gap={2}>
                            <div className="thinkrank-text-xl">⏳</div>
                            <Heading level={4}>{__('Data Collection in Progress', 'thinkrank')}</Heading>
                        </Flex>
                    </CardHeader>
                    <CardBody className="thinkrank-p-lg">
                        <div className="thinkrank-mb-lg">
                            <Text className="thinkrank-mb-3 thinkrank-block">
                                {__('Your Google APIs are configured. Data collection timelines:', 'thinkrank')}
                            </Text>

                            <div className="thinkrank-pl-lg thinkrank-mb-lg">
                                <div className="thinkrank-mb-2">
                                    <Text>📈 <strong>{__('Analytics Data:', 'thinkrank')}</strong> {__('12-24 hours', 'thinkrank')}</Text>
                                </div>
                                <div className="thinkrank-mb-2">
                                    <Text>🔍 <strong>{__('Search Console:', 'thinkrank')}</strong> {__('2-3 days', 'thinkrank')}</Text>
                                </div>
                                <div>
                                    <Text>🤖 <strong>{__('AI Insights:', 'thinkrank')}</strong> {__('1-2 weeks', 'thinkrank')}</Text>
                                </div>
                            </div>

                            <Text variant="muted" className="thinkrank-text-sm">
                                {__('Use the refresh button above to check for new data.', 'thinkrank')}
                            </Text>
                        </div>
                    </CardBody>
                </Card>
            )}

            {isRefreshing && (
                <div className="thinkrank-flex thinkrank-justify-center thinkrank-p-lg">
                    <Spinner />
                </div>
            )}
        </div>
    );

    /**
     * Render Quick Wins component
     * Following ThinkRank opportunity display patterns
     */
    const renderQuickWins = () => {
        // Check if we have quick wins data
        const hasQuickWins = intelligentOpportunities?.intelligent_opportunities?.quick_wins?.opportunities?.length > 0;
        const quickWins = hasQuickWins ? intelligentOpportunities.intelligent_opportunities.quick_wins.opportunities.slice(0, 5) : [];

        return (
            <Card size="small" className="thinkrank-mb-6 thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                <CardHeader className="thinkrank-border-b thinkrank-border-light thinkrank-bg-gray-100 thinkrank-p-6">
                    <Flex justify="space-between" align="center">
                        <FlexItem>
                            <h3 className="thinkrank-m-0 thinkrank-mb-2 thinkrank-text-lg thinkrank-font-semibold thinkrank-text-primary">
                                {__('Quick Wins', 'thinkrank')}
                            </h3>
                            <Text variant="muted" size="small" className="thinkrank-text-muted thinkrank-leading-relaxed">
                                {__('High-impact, low-effort opportunities for immediate results', 'thinkrank')}
                            </Text>
                        </FlexItem>
                        {hasQuickWins && (
                            <FlexItem>
                                <div className="thinkrank-quick-wins-summary">
                                    <Text size="small" className="thinkrank-text-green thinkrank-font-medium">
                                        +{intelligentOpportunities.intelligent_opportunities.quick_wins.potential_additional_clicks || 0} {__('potential clicks', 'thinkrank')}
                                    </Text>
                                </div>
                            </FlexItem>
                        )}
                    </Flex>
                </CardHeader>
                <CardBody className={hasQuickWins ? 'thinkrank-p-6' : 'thinkrank-py-10 thinkrank-px-6'}>
                    {hasQuickWins ? (
                        <div className="thinkrank-space-y-3">
                            {quickWins.map((opportunity, index) => (
                                <div key={index} className="thinkrank-quick-win-item thinkrank-p-lg thinkrank-bg-gray-100 thinkrank-border thinkrank-border-light thinkrank-rounded-lg thinkrank-border-l-4 thinkrank-border-green thinkrank-mb-3">
                                    <Flex justify="space-between" align="center">
                                        <FlexItem>
                                            <div className="thinkrank-opportunity-content">
                                                <Text weight="600" className="thinkrank-text-primary thinkrank-mb-1 thinkrank-block">
                                                    {opportunity.keyword}
                                                </Text>
                                                <Text variant="muted" size="small" className="thinkrank-text-muted">
                                                    {opportunity.recommended_action}
                                                </Text>
                                            </div>
                                        </FlexItem>
                                        <FlexItem>
                                            <div className="thinkrank-opportunity-metrics thinkrank-text-right">
                                                <div className="thinkrank-metric-row thinkrank-mb-1 thinkrank-flex thinkrank-items-center thinkrank-gap-1 thinkrank-justify-end">
                                                    <span className="thinkrank-metric-label thinkrank-text-xs thinkrank-text-muted">{__('Position:', 'thinkrank')}</span>
                                                    <span className="thinkrank-metric-value thinkrank-text-xs thinkrank-font-semibold thinkrank-text-red">{opportunity.current_position}</span>
                                                    <span className="thinkrank-metric-arrow thinkrank-text-muted">→</span>
                                                    <span className="thinkrank-metric-target thinkrank-text-xs thinkrank-font-semibold thinkrank-text-green">{opportunity.potential_position}</span>
                                                </div>
                                                <div className="thinkrank-metric-row thinkrank-flex thinkrank-items-center thinkrank-gap-1 thinkrank-justify-end">
                                                    <span className="thinkrank-metric-label thinkrank-text-xs thinkrank-text-muted">{__('Potential:', 'thinkrank')}</span>
                                                    <span className="thinkrank-metric-value thinkrank-text-xs thinkrank-font-semibold thinkrank-text-green">+{opportunity.potential_clicks} {__('clicks', 'thinkrank')}</span>
                                                </div>
                                                <div className={`thinkrank-impact-score thinkrank-score-${opportunity.impact_score >= 70 ? 'high' : 'medium'}`}>
                                                    {Math.round(opportunity.impact_score)}
                                                </div>
                                            </div>
                                        </FlexItem>
                                    </Flex>
                                </div>
                            ))}
                        </div>
                    ) : (
                        <div className="thinkrank-text-center thinkrank-p-8">
                            <div className="thinkrank-text-5xl thinkrank-mb-lg thinkrank-opacity-60">📊</div>
                            <Text weight="600" className="thinkrank-text-secondary thinkrank-mb-2 thinkrank-block">
                                {__('No Quick Wins Available', 'thinkrank')}
                            </Text>
                            <Text size="small" className="thinkrank-text-muted thinkrank-leading-relaxed">
                                {intelligentOpportunities?.intelligent_opportunities?.quick_wins?.summary || __('No opportunities detected yet. Check back after more search performance data is collected.', 'thinkrank')}
                            </Text>
                        </div>
                    )}
                </CardBody>
            </Card>
        );
    };

    /**
     * Get display name for matrix quadrant
     */
    const getQuadrantDisplayName = (quadrantKey) => {
        const quadrantNames = {
            'high_impact_low_effort': __('Quick Wins', 'thinkrank'),
            'high_impact_high_effort': __('Major Projects', 'thinkrank'),
            'low_impact_low_effort': __('Fill-ins', 'thinkrank'),
            'low_impact_high_effort': __('Avoid', 'thinkrank')
        };
        return quadrantNames[quadrantKey] || quadrantKey?.replace('_', ' ');
    };

    /**
     * Render Impact/Effort Matrix component
     * Following ThinkRank matrix display patterns
     */
    const renderImpactEffortMatrix = () => {
        if (!intelligentOpportunities?.impact_effort_matrix?.matrix) {
            return (
                <Card size="small" className="thinkrank-mb-6 thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                    <CardHeader className="thinkrank-border-b thinkrank-border-light thinkrank-bg-gray-100 thinkrank-p-6">
                        <h3 className="thinkrank-m-0 thinkrank-mb-2 thinkrank-text-lg thinkrank-font-semibold thinkrank-text-primary">
                            {__('Opportunity Priority Matrix', 'thinkrank')}
                        </h3>
                        <Text variant="muted" size="small" className="thinkrank-text-muted thinkrank-leading-relaxed">
                            {__('Automatically prioritize SEO opportunities by impact and effort required', 'thinkrank')}
                        </Text>
                    </CardHeader>
                    <CardBody className="thinkrank-py-10 thinkrank-px-6 thinkrank-text-center">
                        <div className="thinkrank-max-w-sm thinkrank-mx-auto">
                            <div className="thinkrank-text-6xl thinkrank-mb-6 thinkrank-opacity-60">📊</div>
                            <Text weight="600" className="thinkrank-mb-3 thinkrank-block thinkrank-text-secondary thinkrank-text-lg">
                                {__('No Opportunities Available', 'thinkrank')}
                            </Text>
                            <Text variant="muted" className="thinkrank-text-muted thinkrank-leading-relaxed thinkrank-block">
                                {__('No opportunities detected yet. Check back after more search performance data is collected.', 'thinkrank')}
                            </Text>
                        </div>
                    </CardBody>
                </Card>
            );
        }

        const matrix = intelligentOpportunities.impact_effort_matrix.matrix;
        const recommendations = intelligentOpportunities.impact_effort_matrix.recommendations;
        const summary = intelligentOpportunities.impact_effort_matrix.summary;

        // Check if we have any meaningful data to show
        const hasQuickWins = Array.isArray(matrix.high_impact_low_effort) && matrix.high_impact_low_effort.length > 0;
        const hasMajorProjects = Array.isArray(matrix.high_impact_high_effort) && matrix.high_impact_high_effort.length > 0;
        const hasFillIns = Array.isArray(matrix.low_impact_low_effort) && matrix.low_impact_low_effort.length > 0;
        const hasAvoid = Array.isArray(matrix.low_impact_high_effort) && matrix.low_impact_high_effort.length > 0;

        // If no meaningful data, show a helpful message for connected but empty state
        if (!hasQuickWins && !hasMajorProjects && !hasFillIns && !hasAvoid) {
            return (
                <Card size="small" className="thinkrank-mb-6 thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                    <CardHeader className="thinkrank-border-b thinkrank-border-light thinkrank-bg-gray-100 thinkrank-p-6">
                        <h3 className="thinkrank-m-0 thinkrank-mb-2 thinkrank-text-lg thinkrank-font-semibold thinkrank-text-primary">
                            {__('Opportunity Priority Matrix', 'thinkrank')}
                        </h3>
                        <Text variant="muted" size="small" className="thinkrank-text-muted thinkrank-leading-relaxed">
                            {summary || __('SEO opportunities organized by impact and effort required', 'thinkrank')}
                        </Text>
                    </CardHeader>
                    <CardBody className="thinkrank-py-10 thinkrank-px-6 thinkrank-text-center">
                        <div className="thinkrank-max-w-sm thinkrank-mx-auto">
                            <div className="thinkrank-text-6xl thinkrank-mb-6 thinkrank-opacity-60">📊</div>
                            <Text weight="600" className="thinkrank-mb-3 thinkrank-block thinkrank-text-secondary thinkrank-text-lg">
                                {__('No Opportunities Available', 'thinkrank')}
                            </Text>
                            <Text variant="muted" className="thinkrank-text-muted thinkrank-leading-relaxed thinkrank-block">
                                {summary || __('No opportunities detected yet. Check back after more search performance data is collected.', 'thinkrank')}
                            </Text>
                        </div>
                    </CardBody>
                </Card>
            );
        }

        return (
            <Card size="small" className="thinkrank-mb-lg thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                <CardHeader className="thinkrank-border-b thinkrank-border-light thinkrank-bg-gray-100">
                    <h3>{__('Opportunity Priority Matrix', 'thinkrank')}</h3>
                    <Text variant="muted" size="small">
                        {summary || __('SEO opportunities organized by impact and effort required', 'thinkrank')}
                    </Text>
                </CardHeader>
                <CardBody className="thinkrank-p-lg">
                    {/* Show only quadrants with actual content */}
                    <div className="thinkrank-matrix-grid thinkrank-grid thinkrank-gap-lg thinkrank-mb-lg" style={{
                        gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))'
                    }}>
                        {/* Quick Wins - Highest Priority */}
                        {hasQuickWins && (
                            <div className="thinkrank-matrix-quadrant thinkrank-quadrant-quick-wins thinkrank-p-lg thinkrank-bg-green thinkrank-bg-opacity-10 thinkrank-border-2 thinkrank-border-green thinkrank-rounded-lg">
                                <div className="thinkrank-quadrant-header thinkrank-mb-3 thinkrank-text-center">
                                    <Text weight="600" className="thinkrank-quadrant-title thinkrank-text-green thinkrank-block thinkrank-mb-1">
                                        {__('🎯 Quick Wins', 'thinkrank')}
                                    </Text>
                                    <Text size="small" className="thinkrank-quadrant-subtitle thinkrank-text-green thinkrank-mb-2 thinkrank-block">
                                        {__('High Impact, Low Effort', 'thinkrank')}
                                    </Text>
                                    <div className="thinkrank-quadrant-count thinkrank-bg-green thinkrank-text-white thinkrank-rounded-full thinkrank-w-6 thinkrank-h-6 thinkrank-flex thinkrank-items-center thinkrank-justify-center thinkrank-text-xs thinkrank-font-bold thinkrank-mx-auto">
                                        {matrix.high_impact_low_effort.length}
                                    </div>
                                </div>
                                {matrix.high_impact_low_effort.slice(0, 5).map((item, index) => (
                                    <div key={index} className="thinkrank-matrix-item thinkrank-py-2 thinkrank-px-3 thinkrank-bg-white thinkrank-border thinkrank-border-green thinkrank-border-opacity-20 thinkrank-rounded thinkrank-mb-2 thinkrank-text-sm">
                                        <Text size="small" className="thinkrank-text-secondary thinkrank-font-medium">
                                            {item.keyword || item.query || item.page_path || item.action || item.title || 'SEO Opportunity'}
                                        </Text>
                                        {item.current_position && (
                                            <Text size="small" className="thinkrank-text-green thinkrank-block thinkrank-mt-1">
                                                Position: {item.current_position} | CTR: {item.current_ctr || item.ctr}%
                                            </Text>
                                        )}
                                        {item.potential_impact && (
                                            <Text size="small" className="thinkrank-text-green thinkrank-block thinkrank-mt-1">
                                                +{item.potential_impact} potential clicks
                                            </Text>
                                        )}
                                    </div>
                                ))}
                            </div>
                        )}

                        {/* Major Projects - Secondary Priority */}
                        {hasMajorProjects && (
                            <div className="thinkrank-matrix-quadrant thinkrank-quadrant-major-projects thinkrank-p-lg thinkrank-bg-orange thinkrank-bg-opacity-10 thinkrank-border-2 thinkrank-border-orange thinkrank-rounded-lg">
                                <div className="thinkrank-quadrant-header thinkrank-mb-3 thinkrank-text-center">
                                    <Text weight="600" className="thinkrank-quadrant-title thinkrank-text-orange thinkrank-block thinkrank-mb-1">
                                        {__('📋 Major Projects', 'thinkrank')}
                                    </Text>
                                    <Text size="small" className="thinkrank-quadrant-subtitle thinkrank-text-orange thinkrank-mb-2 thinkrank-block">
                                        {__('High Impact, High Effort', 'thinkrank')}
                                    </Text>
                                    <div className="thinkrank-quadrant-count thinkrank-bg-orange thinkrank-text-white thinkrank-rounded-full thinkrank-w-6 thinkrank-h-6 thinkrank-flex thinkrank-items-center thinkrank-justify-center thinkrank-text-xs thinkrank-font-bold thinkrank-mx-auto">
                                        {matrix.high_impact_high_effort.length}
                                    </div>
                                </div>
                                {matrix.high_impact_high_effort.slice(0, 5).map((item, index) => (
                                    <div key={index} className="thinkrank-matrix-item thinkrank-py-2 thinkrank-px-3 thinkrank-bg-white thinkrank-border thinkrank-border-orange thinkrank-border-opacity-20 thinkrank-rounded thinkrank-mb-2 thinkrank-text-sm">
                                        <Text size="small" className="thinkrank-text-secondary thinkrank-font-medium">
                                            {item.keyword || item.query || item.page_path || item.action || item.title || 'SEO Opportunity'}
                                        </Text>
                                        {item.current_position && (
                                            <Text size="small" className="thinkrank-text-orange thinkrank-block thinkrank-mt-1">
                                                Position: {item.current_position} | CTR: {item.current_ctr || item.ctr}%
                                            </Text>
                                        )}
                                        {item.potential_impact && (
                                            <Text size="small" className="thinkrank-text-orange thinkrank-block thinkrank-mt-1">
                                                +{item.potential_impact} potential clicks
                                            </Text>
                                        )}
                                    </div>
                                ))}
                            </div>
                        )}

                    </div>

                    {/* Show recommendations if available */}
                    {recommendations && (
                        <div className="thinkrank-matrix-recommendations thinkrank-mt-md thinkrank-mb-lg thinkrank-p-6 thinkrank-bg-gray-100 thinkrank-border thinkrank-border-light thinkrank-rounded-lg thinkrank-border-l-4 thinkrank-border-blue">
                            <Text weight="600" className="thinkrank-mb-3 thinkrank-block thinkrank-text-blue thinkrank-text-base">
                                {__('💡 Recommendations:', 'thinkrank')}
                            </Text>
                            <Text size="small" className="thinkrank-text-tertiary thinkrank-leading-relaxed thinkrank-text-sm">
                                {__('Focus on', 'thinkrank')} <strong className="thinkrank-text-primary">{getQuadrantDisplayName(recommendations.focus_on)}</strong> {__('first, then plan for', 'thinkrank')} <strong className="thinkrank-text-primary">{getQuadrantDisplayName(recommendations.plan_for)}</strong>.
                            </Text>
                        </div>
                    )}

                    {/* Show helpful message when no priority items */}
                    {!hasQuickWins && !hasMajorProjects && (
                        <div className="thinkrank-p-6 thinkrank-text-center thinkrank-bg-gray-100 thinkrank-rounded-lg thinkrank-border thinkrank-border-light">
                            <div className="thinkrank-text-3xl thinkrank-mb-3">🔍</div>
                            <Text weight="600" className="thinkrank-mb-2 thinkrank-block thinkrank-text-secondary">
                                {__('No High-Priority Opportunities Found', 'thinkrank')}
                            </Text>
                            <Text variant="muted" size="small" className="thinkrank-text-muted thinkrank-leading-relaxed">
                                {__('This could mean your site is well-optimized, or more data is needed. Try connecting Google Search Console or check back after more traffic data is collected.', 'thinkrank')}
                            </Text>
                        </div>
                    )}




                </CardBody>
            </Card>
        );
    };

    /**
     * Render opportunities section content with intelligence enhancements
     */
    const renderOpportunitiesSection = () => (
        <div className="thinkrank-space-y-6">
            <Flex justify="space-between" align="center">
                <FlexItem>
                    <Text variant="muted">
                        {settings.seo_analytics_enable_ai_insights
                            ? __('AI-powered SEO opportunities with intelligent prioritization and impact analysis based on your search performance data.', 'thinkrank')
                            : __('SEO opportunities and actionable insights based on your search performance data.', 'thinkrank')
                        }
                    </Text>
                </FlexItem>
                <FlexItem>
                    <SelectControl
                        label={__('Date Range', 'thinkrank')}
                        value={dateRange}
                        options={dateRangeOptions}
                        onChange={setDateRange}
                        __next40pxDefaultSize={true}
                        __nextHasNoMarginBottom={true}
                    />
                </FlexItem>
            </Flex>

            {/* Intelligence Loading State */}
            {isLoadingIntelligence && settings.seo_analytics_enable_ai_insights && (
                <Card size="small" className="thinkrank-mb-lg thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                    <CardBody className="thinkrank-p-lg">
                        <div className="thinkrank-flex thinkrank-justify-center thinkrank-items-center thinkrank-p-md">
                            <Spinner />
                            <Text variant="muted" className="thinkrank-ml-sm">
                                {__('Analyzing opportunities...', 'thinkrank')}
                            </Text>
                        </div>
                    </CardBody>
                </Card>
            )}

            {/* Quick Wins - Intelligence Feature */}
            {settings.seo_analytics_enable_ai_insights && renderQuickWins()}

            {/* Impact/Effort Matrix - Intelligence Feature */}
            {settings.seo_analytics_enable_ai_insights && renderImpactEffortMatrix()}

            {/* Traditional SEO Opportunities Data (Enhanced) */}
            {seoOpportunities && (
                <div className="thinkrank-space-y-6">
                    {/* Keyword Opportunities */}
                    {seoOpportunities.keyword_opportunities && seoOpportunities.keyword_opportunities.opportunities && (
                        <Card size="small" className="thinkrank-mb-lg thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                            <CardHeader className="thinkrank-border-b thinkrank-border-light thinkrank-bg-gray-100">
                                <h3>{__('Keyword Opportunities', 'thinkrank')}</h3>
                                <Text variant="muted">
                                    {__('Keywords with potential for ranking improvements', 'thinkrank')}
                                </Text>
                            </CardHeader>
                            <CardBody className="thinkrank-p-lg">
                                <div className="thinkrank-space-y-3">
                                    {seoOpportunities.keyword_opportunities.opportunities.slice(0, 10).map((opportunity, index) => (
                                        <div key={index} className="thinkrank-opportunity-card">
                                            <Flex justify="space-between" align="center">
                                                <FlexItem>
                                                    <div>
                                                        <Text weight="600">{opportunity.query}</Text>
                                                        <div className="thinkrank-opportunity-reasons">
                                                            {opportunity.reasons.map((reason, reasonIndex) => (
                                                                <span key={reasonIndex} className="thinkrank-reason-tag">
                                                                    {reason}
                                                                </span>
                                                            ))}
                                                        </div>
                                                    </div>
                                                </FlexItem>
                                                <FlexItem>
                                                    <div className="thinkrank-opportunity-metrics">
                                                        <div className="thinkrank-metric-small">
                                                            <span className="thinkrank-metric-label">{__('Position:', 'thinkrank')}</span>
                                                            <span className="thinkrank-metric-value">{opportunity.position}</span>
                                                        </div>
                                                        <div className="thinkrank-metric-small">
                                                            <span className="thinkrank-metric-label">{__('Impressions:', 'thinkrank')}</span>
                                                            <span className="thinkrank-metric-value">{opportunity.impressions}</span>
                                                        </div>
                                                        <div className="thinkrank-metric-small">
                                                            <span className="thinkrank-metric-label">{__('CTR:', 'thinkrank')}</span>
                                                            <span className="thinkrank-metric-value">{opportunity.ctr}%</span>
                                                        </div>
                                                        <div className={`thinkrank-opportunity-score thinkrank-score-${opportunity.opportunity_score >= 70 ? 'high' : opportunity.opportunity_score >= 40 ? 'medium' : 'low'}`}>
                                                            {__('Score:', 'thinkrank')} {opportunity.opportunity_score}
                                                        </div>
                                                    </div>
                                                </FlexItem>
                                            </Flex>
                                        </div>
                                    ))}
                                </div>
                            </CardBody>
                        </Card>
                    )}

                    {/* Device Performance Insights */}
                    {seoOpportunities.device_insights && seoOpportunities.device_insights.devices && (
                        <Card size="small" className="thinkrank-mb-lg thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                            <CardHeader className="thinkrank-border-b thinkrank-border-light thinkrank-bg-gray-100">
                                <h3>{__('Device Performance', 'thinkrank')}</h3>
                                <Text variant="muted">
                                    {__('Performance breakdown by device type', 'thinkrank')}
                                </Text>
                            </CardHeader>
                            <CardBody className="thinkrank-p-lg">
                                <div className="thinkrank-grid thinkrank-grid-cols-3 thinkrank-gap-3">
                                    {Object.entries(seoOpportunities.device_insights.devices).map(([device, data]) => (
                                        <div key={device} className="thinkrank-device-card">
                                            <div className="thinkrank-device-name">{device.charAt(0).toUpperCase() + device.slice(1)}</div>
                                            <div className="thinkrank-device-metrics">
                                                <div className="thinkrank-metric-row">
                                                    <span>{__('Clicks:', 'thinkrank')}</span>
                                                    <span>{data.clicks}</span>
                                                </div>
                                                <div className="thinkrank-metric-row">
                                                    <span>{__('CTR:', 'thinkrank')}</span>
                                                    <span>{data.ctr}%</span>
                                                </div>
                                                <div className="thinkrank-metric-row">
                                                    <span>{__('Position:', 'thinkrank')}</span>
                                                    <span>{data.position}</span>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </CardBody>
                        </Card>
                    )}

                    {/* Search Appearance */}
                    {seoOpportunities.search_appearance && seoOpportunities.search_appearance.appearances && (
                        <Card size="small" className="thinkrank-mb-lg thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                            <CardHeader className="thinkrank-border-b thinkrank-border-light thinkrank-bg-gray-100">
                                <h3>{__('Search Appearance', 'thinkrank')}</h3>
                                <Text variant="muted">
                                    {__('Rich results and search appearance features', 'thinkrank')}
                                </Text>
                            </CardHeader>
                            <CardBody className="thinkrank-p-lg">
                                <div className="thinkrank-space-y-3">
                                    {Object.entries(seoOpportunities.search_appearance.appearances).map(([appearance, data]) => (
                                        <Flex key={appearance} justify="space-between" align="center">
                                            <FlexItem>
                                                <Text weight="600">{appearance.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}</Text>
                                            </FlexItem>
                                            <FlexItem>
                                                <div className="thinkrank-flex thinkrank-gap-3">
                                                    <span className="thinkrank-metric-small">{data.clicks} {__('clicks', 'thinkrank')}</span>
                                                    <span className="thinkrank-metric-small">{data.impressions} {__('impressions', 'thinkrank')}</span>
                                                    <span className="thinkrank-metric-small">{data.ctr}% {__('CTR', 'thinkrank')}</span>
                                                </div>
                                            </FlexItem>
                                        </Flex>
                                    ))}
                                </div>
                            </CardBody>
                        </Card>
                    )}
                </div>
            )}

            {!seoOpportunities && !isRefreshing && (
                <Card size="small" className="thinkrank-mb-lg thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                    <CardBody className="thinkrank-p-lg">
                        <div className="thinkrank-text-center thinkrank-p-lg">
                            <Text variant="muted">
                                {__('No SEO opportunities data available yet. Search Console data collection may take 24-48 hours after API configuration.', 'thinkrank')}
                            </Text>
                        </div>
                    </CardBody>
                </Card>
            )}

            {isRefreshing && (
                <div className="thinkrank-flex thinkrank-justify-center thinkrank-p-lg">
                    <Spinner />
                </div>
            )}
        </div>
    );

    /**
     * Render insights section content
     * Following ThinkRank insights display patterns
     */
    const renderInsightsSection = () => (
        <div className="thinkrank-space-y-6">
            <Flex justify="space-between" align="center">
                <FlexItem>
                    <Text variant="muted">
                        {__('AI-powered SEO insights with actionable recommendations based on comprehensive data analysis.', 'thinkrank')}
                    </Text>
                </FlexItem>
                <FlexItem>
                    <SelectControl
                        label={__('Date Range', 'thinkrank')}
                        value={dateRange}
                        options={dateRangeOptions}
                        onChange={setDateRange}
                        __next40pxDefaultSize={true}
                        __nextHasNoMarginBottom={true}
                    />
                </FlexItem>
            </Flex>

            {/* Intelligence Loading State */}
            {isLoadingIntelligence && (
                <Card size="small" className="thinkrank-mb-lg thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                    <CardBody className="thinkrank-p-lg">
                        <div className="thinkrank-flex thinkrank-justify-center thinkrank-items-center thinkrank-p-md">
                            <Spinner />
                            <Text variant="muted" className="thinkrank-ml-sm">
                                {__('Generating insights...', 'thinkrank')}
                            </Text>
                        </div>
                    </CardBody>
                </Card>
            )}

            {/* SEO Health Score */}
            {renderSEOHealthScore()}

            {/* SEO Insights */}
            {renderSEOInsights()}

            {/* No insights available */}
            {!seoInsights && !isLoadingIntelligence && (
                <Card size="small" className="thinkrank-mb-lg thinkrank-border thinkrank-border-light thinkrank-rounded-lg">
                    <CardBody className="thinkrank-p-lg">
                        <div className="thinkrank-text-center thinkrank-p-lg">
                            <Text variant="muted">
                                {settings.seo_analytics_enable_ai_insights
                                    ? __('No insights available yet. AI insights require 1-2 weeks of data for meaningful analysis.', 'thinkrank')
                                    : __('AI insights are disabled. Enable AI insights in settings to see intelligent recommendations.', 'thinkrank')
                                }
                            </Text>
                        </div>
                    </CardBody>
                </Card>
            )}
        </div>
    );

    /**
     * Render content based on active sub-section
     * Following Performance tab renderContent pattern
     */
    const renderSubSectionContent = () => {
        if (!settings.seo_analytics_enabled) {
            return null;
        }

        switch (activeSubSection) {
            case 'setup':
                return renderSetupSection();
            case 'dashboard':
                return renderDashboardSection();
            case 'opportunities':
                return renderOpportunitiesSection();
            case 'insights':
                return renderInsightsSection();
            default:
                return renderSetupSection();
        }
    };

    return (
        <div className="thinkrank-analytics-tab">
            {/* Main Settings Card */}
            <SettingsCard
                title={__('SEO Analytics & Intelligence', 'thinkrank')}
                enabled={settings.seo_analytics_enabled}
                onToggle={(value) => handleSettingChange('seo_analytics_enabled', value)}
                toggleLabel={__('Enable SEO Analytics', 'thinkrank')}
                optimizationButtons={[
                    (() => {
                        const buttonConfig = getOptimizationButtonConfig();
                        return buttonConfig ? (
                            <OptimizationButton
                                key="action"
                                type={buttonConfig.type}
                                label={buttonConfig.label}
                                loadingLabel={buttonConfig.loadingLabel}
                                onClick={buttonConfig.onClick}
                                isBusy={buttonConfig.isBusy}
                                disabled={buttonConfig.disabled}
                            />
                        ) : null;
                    })()
                ].filter(Boolean)}
                notice={notice}
                onNoticeRemove={() => setNotice(null)}
                showDisabledWarning={true}
                disabledWarningMessage={__('SEO Analytics features are disabled. Enable to access Google API integration and AI insights.', 'thinkrank')}
            >
                {/* Render content based on active sub-section */}
                <div className="thinkrank-py-lg">
                    {renderSubSectionContent()}
                </div>
            </SettingsCard>

            {/* Save Button */}
            {hasChanges && (
                <Flex justify="flex-end" className="thinkrank-mt-lg">
                    <FlexItem>
                        <Button
                            variant="primary"
                            onClick={saveSettings}
                            isBusy={isSaving}
                            disabled={isSaving}
                        >
                            {isSaving ? __('Saving...', 'thinkrank') : __('Save Settings', 'thinkrank')}
                        </Button>
                    </FlexItem>
                </Flex>
            )}
        </div>
    );
};

export default AnalyticsTab;

```