import { __ } from '@wordpress/i18n';
import AnimationPicker from '../components/AnimationPicker';

/**
 * ToggleField component.
 */
function ToggleField({ label, checked, onChange, help }) {
    return (
        <div className="shcb-toggle-field" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div className="shcb-toggle-info" style={{ flex: 1, paddingRight: '16px' }}>
                <div className="shcb-field-label" style={{ fontWeight: '500', marginBottom: '4px' }}>{label}</div>
                {help && <p className="shcb-field-help" style={{ fontSize: '12px', color: '#64748b', margin: 0 }}>{help}</p>}
            </div>
            <label className="shcb-switch">
                <input
                    type="checkbox"
                    checked={checked || false}
                    onChange={(e) => onChange(e.target.checked)}
                />
                <span className="shcb-switch-slider"></span>
            </label>
        </div>
    );
}

export default function AnimationsTab({ values = {}, onChange }) {
    
    const handleNotify = (patch) => {
        if (onChange) {
            onChange({ ...values, ...patch });
        }
    };

    const handleAnimChange = (group, animId) => {
        handleNotify({ [group]: animId });
    };

    const handleIntervalChange = (val) => {
        handleNotify({ idle_interval: parseInt(val, 10) });
    };

    const handlePulseToggle = (e) => {
        handleNotify({ enable_pulse_ring: e.target.checked });
    };

    const isPro = window.shcbAdmin?.isPro || false;
    const idleInterval = values.idle_interval || 5;
    const enablePulseRing = values.enable_pulse_ring !== false;

    const handleProClick = (e) => {
        if (!isPro) {
            e.preventDefault();
            e.stopPropagation();
            alert(__('This feature requires the PRO version. Upgrade to unlock all animations and effects!', 'shois-chat-button'));
        }
    };

    return (
        <div className="shcb-animations-tab" style={{ padding: '20px' }}>
            <div className="shcb-animations-header" style={{ marginBottom: '20px' }}>
                <h4 style={{ margin: '0 0 8px 0' }}>{__('Button Animations', 'shois-chat-button')} <span className="shcb-pro-badge">PRO</span></h4>
                <p className="shcb-tab-description" style={{ margin: 0, color: '#64748b' }}>
                    {__('Choose animations for each stage of the widget lifecycle. Hover over any animation to preview it live.', 'shois-chat-button')}
                </p>
            </div>

            <AnimationPicker
                values={values}
                onChange={handleAnimChange}
                isProUser={isPro}
            />

            <div 
                className="shcb-anim-extra-settings" 
                style={{ marginTop: '30px', borderTop: '1px solid #e2e8f0', paddingTop: '24px' }}
            >
                <div>
                    <h4 style={{ margin: '0 0 16px 0', fontSize: '14px', color: '#1e293b' }}>
                        {__('EXTRA SETTINGS', 'shois-chat-button')}
                    </h4>

                    <div className="shcb-settings-card" style={{ background: '#fff', borderRadius: '8px', border: '1px solid #e2e8f0', padding: '20px' }}>
                        
                        {/* Idle Interval */}
                        <div className="shcb-field-group" style={{ marginBottom: '24px' }}>
                            <label className="shcb-field-label" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px', fontWeight: '500' }}>
                                <span>{__('Idle Animation Interval', 'shois-chat-button')}</span>
                                <span className="shcb-field-value" style={{ color: '#5170ff' }}>{idleInterval}s</span>
                            </label>
                            <p className="shcb-field-help" style={{ fontSize: '12px', color: '#64748b', marginBottom: '12px' }}>
                                {__('How often the idle animation repeats to draw attention (seconds).', 'shois-chat-button')}
                            </p>
                            <input
                                type="range"
                                className="shcb-range-input"
                                value={idleInterval}
                                min={1}
                                max={60}
                                onChange={(e) => handleIntervalChange(e.target.value)}
                                style={{ width: '100%' }}
                            />
                        </div>

                        {/* Pulse Ring Toggle */}
                        <ToggleField
                            label={__('Enable Pulse Ring Effect', 'shois-chat-button')}
                            checked={enablePulseRing}
                            onChange={(checked) => handleNotify({ enable_pulse_ring: checked })}
                            help={__('Show a continuously expanding ring glow around the button.', 'shois-chat-button')}
                        />
                    </div>
                </div>
            </div>
        </div>
    );
}