/**
 * Essential SEO Page Component
 * 
 * Single page with tabbed interface for all SEO settings
 * 
 * @package ThinkRank
 * @since 1.0.0
 */

import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Spinner, Notice } from '@wordpress/components';

// New sidebar navigation components
import SidebarNavigation from '../essential-seo/SidebarNavigation';
import ContentArea from '../essential-seo/ContentArea';

/**
 * Essential SEO Component
 */
const EssentialSEO = () => {
    const [isLoading, setIsLoading] = useState(true);
    const [hasError, setHasError] = useState(false);
    const [errorMessage, setErrorMessage] = useState('');

    // Navigation state
    const [activeSection, setActiveSection] = useState('site-identity');
    const [activeItem, setActiveItem] = useState('basic-info');

    // Initialize component
    useEffect(() => {
        const initializeEssentialSEO = async () => {
            try {
                setIsLoading(false);
            } catch (error) {
                setHasError(true);
                setErrorMessage(error.message);
                setIsLoading(false);
            }
        };

        initializeEssentialSEO();
    }, []);

    // Navigation handlers
    const handleNavigate = (sectionId, itemId) => {
        setActiveSection(sectionId);
        setActiveItem(itemId);
    };



    // Render loading state
    if (isLoading) {
        return (
            <div className="thinkrank-loading">
                <Spinner />
                <p>{__('Loading Essential SEO settings...', 'thinkrank')}</p>
            </div>
        );
    }

    // Render error state
    if (hasError) {
        return (
            <div className="thinkrank-error">
                <Notice status="error" isDismissible={false}>
                    <strong>{__('Essential SEO Error:', 'thinkrank')}</strong>
                    <br />
                    {errorMessage}
                </Notice>
            </div>
        );
    }

    return (
        <div className="thinkrank-essential-seo">
            <div className="thinkrank-essential-seo-header thinkrank-mb-2xl">
                <h1>{__('Essential SEO', 'thinkrank')}</h1>
                <p className="description">
                    {__('Configure your site-wide SEO settings with AI-powered optimization', 'thinkrank')}
                </p>
            </div>

            <div style={{ display: 'flex', gap: '20px' }}>
                <div style={{ width: '300px', flexShrink: 0 }}>
                    <SidebarNavigation
                        activeSection={activeSection}
                        activeItem={activeItem}
                        onNavigate={handleNavigate}
                    />
                </div>

                <div style={{ flex: 1 }}>
                    <ContentArea
                        activeSection={activeSection}
                        activeItem={activeItem}
                        onNavigate={handleNavigate}
                    />
                </div>
            </div>
        </div>
    );
};

export default EssentialSEO;