/**
 * Component Test - Site Identity Integration
 * 
 * Test implementation to verify shared components work correctly
 * with existing Site Identity implementation and maintain backward compatibility.
 * 
 * This file demonstrates how to integrate OptimizationButton and SettingsCard
 * with the existing Site Identity patterns.
 * 
 * @package ThinkRank
 * @since 1.0.0
 */

import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import OptimizationButton from './OptimizationButton';
import SettingsCard from './SettingsCard';
import useTabSettings from '../hooks/useTabSettings';

/**
 * Test Component showing Site Identity integration
 */
const ComponentTest = () => {
    // Test the useTabSettings hook with Site Identity patterns
    const {
        settings,
        hasChanges,
        notice,
        isLoading,
        isSaving,
        isOptimizing,
        isValidating,
        handleSettingChange,
        saveSettings,
        runOptimization,
        runValidation,
        clearNotice
    } = useTabSettings('site-identity', {
        enabled: true,
        site_name: '',
        site_description: '',
        tagline: ''
    });

    // Test state for different optimization types
    const [isAiOptimizing, setIsAiOptimizing] = useState(false);
    const [activeSubSection, setActiveSubSection] = useState('basic-info');

    /**
     * Test AI optimization function (mimics Site Identity optimizeBasicInfo)
     */
    const testAiOptimization = async () => {
        setIsAiOptimizing(true);
        try {
            // Simulate AI optimization
            await new Promise(resolve => setTimeout(resolve, 2000));
            console.log('AI optimization completed');
        } catch (error) {
            console.error('AI optimization failed:', error);
        } finally {
            setIsAiOptimizing(false);
        }
    };

    /**
     * Test rule-based optimization function (mimics Site Identity optimizeIdentity)
     */
    const testRuleOptimization = async () => {
        await runOptimization('rule', {
            identity_data: settings,
            options: { focus: 'title_formats' }
        });
    };

    /**
     * Test validation function (mimics Site Identity validateSettings)
     */
    const testValidation = async () => {
        await runValidation('settings', {
            settings: settings
        });
    };

    /**
     * Get optimization button configuration (mimics Site Identity getOptimizationButtonConfig)
     */
    const getOptimizationButtonConfig = () => {
        switch (activeSubSection) {
            case 'basic-info':
                return {
                    type: 'ai',
                    onClick: testAiOptimization,
                    isBusy: isAiOptimizing,
                    disabled: !settings.enabled || isAiOptimizing
                };
            case 'title-formats':
                return {
                    type: 'rule',
                    label: __('Validate & Optimize Titles', 'thinkrank'),
                    onClick: testRuleOptimization,
                    isBusy: isOptimizing,
                    disabled: !settings.enabled || isOptimizing
                };
            case 'validation-test':
                return {
                    type: 'validate',
                    onClick: testValidation,
                    isBusy: isValidating,
                    disabled: !settings.enabled || isValidating
                };
            default:
                return {
                    type: 'rule',
                    onClick: testRuleOptimization,
                    isBusy: isOptimizing,
                    disabled: !settings.enabled || isOptimizing
                };
        }
    };

    if (isLoading) {
        return <div>Loading...</div>;
    }

    const buttonConfig = getOptimizationButtonConfig();

    return (
        <div className="thinkrank-component-test">
            <h2>{__('Component Integration Test', 'thinkrank')}</h2>
            
            {/* Test section selector */}
            <div style={{ marginBottom: '20px' }}>
                <label>{__('Test Section:', 'thinkrank')}</label>
                <select 
                    value={activeSubSection} 
                    onChange={(e) => setActiveSubSection(e.target.value)}
                    style={{ marginLeft: '10px' }}
                >
                    <option value="basic-info">{__('Basic Info (AI)', 'thinkrank')}</option>
                    <option value="title-formats">{__('Title Formats (Rule)', 'thinkrank')}</option>
                    <option value="validation-test">{__('Validation Test', 'thinkrank')}</option>
                </select>
            </div>

            {/* Test SettingsCard component with Site Identity patterns */}
            <SettingsCard
                title={__('Site Identity Settings Test', 'thinkrank')}
                enabled={settings.enabled}
                onToggle={(value) => handleSettingChange('enabled', value)}
                toggleLabel={__('Enable Site Identity', 'thinkrank')}
                optimizationButtons={[
                    // Test validation button (only for basic-info)
                    activeSubSection === 'basic-info' && (
                        <OptimizationButton
                            key="validate"
                            type="validate"
                            onClick={testValidation}
                            isBusy={isValidating}
                            disabled={!settings.enabled || isValidating}
                        />
                    ),
                    // Test main optimization button
                    <OptimizationButton
                        key="optimize"
                        type={buttonConfig.type}
                        label={buttonConfig.label}
                        onClick={buttonConfig.onClick}
                        isBusy={buttonConfig.isBusy}
                        disabled={buttonConfig.disabled}
                    />
                ].filter(Boolean)}
                notice={notice}
                onNoticeRemove={clearNotice}
                showDisabledWarning={true}
                disabledWarningMessage={__('Site identity features are disabled. Enable to configure title formats, breadcrumbs, and robots.txt.', 'thinkrank')}
            >
                {/* Test content that mimics Site Identity structure */}
                <div className="tab-content">
                    <p>{__('Current section:', 'thinkrank')} <strong>{activeSubSection}</strong></p>
                    <p>{__('Settings enabled:', 'thinkrank')} <strong>{settings.enabled ? 'Yes' : 'No'}</strong></p>
                    <p>{__('Has changes:', 'thinkrank')} <strong>{hasChanges ? 'Yes' : 'No'}</strong></p>
                    
                    {/* Test save button */}
                    <div style={{ marginTop: '20px', textAlign: 'right' }}>
                        <button
                            onClick={saveSettings}
                            disabled={!hasChanges || isSaving}
                            style={{
                                padding: '8px 16px',
                                backgroundColor: hasChanges ? '#0073aa' : '#ccc',
                                color: 'white',
                                border: 'none',
                                borderRadius: '4px',
                                cursor: hasChanges ? 'pointer' : 'not-allowed'
                            }}
                        >
                            {isSaving ? __('Saving...', 'thinkrank') : __('Save Settings', 'thinkrank')}
                        </button>
                    </div>
                </div>
            </SettingsCard>

            {/* Test individual OptimizationButton components */}
            <div style={{ marginTop: '30px' }}>
                <h3>{__('Individual Button Tests', 'thinkrank')}</h3>
                <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
                    <OptimizationButton type="ai" onClick={() => console.log('AI clicked')} />
                    <OptimizationButton type="rule" onClick={() => console.log('Rule clicked')} />
                    <OptimizationButton type="validate" onClick={() => console.log('Validate clicked')} />
                    <OptimizationButton type="test" onClick={() => console.log('Test clicked')} />
                    <OptimizationButton type="generate" onClick={() => console.log('Generate clicked')} />
                </div>
            </div>

            {/* Test loading states */}
            <div style={{ marginTop: '20px' }}>
                <h3>{__('Loading State Tests', 'thinkrank')}</h3>
                <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
                    <OptimizationButton type="ai" isBusy={true} onClick={() => {}} />
                    <OptimizationButton type="rule" isBusy={true} onClick={() => {}} />
                    <OptimizationButton type="validate" isBusy={true} onClick={() => {}} />
                </div>
            </div>
        </div>
    );
};

export default ComponentTest;