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

/**
 * BehaviorSectionHeader component.
 */
function BehaviorSectionHeader({ icon, title }) {
    return (
        <div className="shcb-behavior-section-header">
            {icon}
            <span>{title}</span>
        </div>
    );
}

/**
 * ToggleField component (SS Style: Toggle on right).
 */
function ToggleField({ label, checked, onChange, help }) {
    return (
        <div className="shcb-behavior-toggle-row">
            <div className="shcb-behavior-toggle-info">
                <div className="shcb-field-label">{label}</div>
                {help && <p className="shcb-field-help">{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>
    );
}

/**
 * BehaviorTab — redesigned widget behavior controls.
 */
export default function BehaviorTab({ config, onChange }) {
    return (
        <div className="shcb-editor-tab-content">
            {/* Link Behavior */}
            <BehaviorSectionHeader
                icon={
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
                        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
                    </svg>
                }
                title={__('LINK BEHAVIOR', 'shois-chat-button')}
            />
            <div className="shcb-settings-card">
                <div className="shcb-card-body">
                    <div className="shcb-field-group">
                        <label className="shcb-field-label">{__('Open links in', 'shois-chat-button')}</label>
                        <CustomSelect
                            value={config.open_in || 'new_tab'}
                            onChange={(val) => onChange({ open_in: val })}
                            options={[
                                { value: 'new_tab', label: __('New Tab', 'shois-chat-button') },
                                { value: 'same', label: __('Same Window', 'shois-chat-button') }
                            ]}
                        />
                    </div>
                </div>
            </div>

            {/* Display Triggers */}
            <BehaviorSectionHeader
                icon={
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                        <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
                    </svg>
                }
                title={__('DISPLAY TRIGGERS', 'shois-chat-button')}
            />
            <div className="shcb-settings-card">
                <div className="shcb-card-body">
                    {/* Auto-open */}
                    <ToggleField
                        label={__('Auto-open Popup', 'shois-chat-button')}
                        checked={config.auto_open}
                        onChange={(v) => onChange({ auto_open: v })}
                        help={__('Automatically open the popup after a delay', 'shois-chat-button')}
                    />
                    {config.auto_open && (
                        <div className="shcb-behavior-sub-field">
                            <label className="shcb-sub-label">{__('DELAY (SECONDS)', 'shois-chat-button')}</label>
                            <input
                                type="number"
                                className="shcb-input"
                                value={config.auto_open_delay || 3}
                                onChange={(e) => onChange({ auto_open_delay: parseInt(e.target.value, 10) || 0 })}
                                min={0}
                                max={60}
                                style={{ maxWidth: '100px' }}
                            />
                        </div>
                    )}

                    <div className="shcb-divider" />

                    {/* Page Delay */}
                    <ToggleField
                        label={__('Show After Page Delay', 'shois-chat-button')}
                        checked={config.show_after_delay}
                        onChange={(v) => onChange({ show_after_delay: v })}
                        help={__('Hide the widget initially, show after a delay', 'shois-chat-button')}
                    />
                    {config.show_after_delay && (
                        <div className="shcb-behavior-sub-field">
                            <label className="shcb-sub-label">{__('DELAY (SECONDS)', 'shois-chat-button')}</label>
                            <input
                                type="number"
                                className="shcb-input"
                                value={config.delay_seconds || 0}
                                onChange={(e) => onChange({ delay_seconds: parseInt(e.target.value, 10) || 0 })}
                                min={0}
                                max={60}
                                style={{ maxWidth: '100px' }}
                            />
                        </div>
                    )}

                    <div className="shcb-divider" />

                    {/* Scroll Trigger */}
                    <ToggleField
                        label={__('Show After Scroll', 'shois-chat-button')}
                        checked={config.show_after_scroll}
                        onChange={(v) => onChange({ show_after_scroll: v })}
                        help={__('Show widget only after visitor scrolls a percentage', 'shois-chat-button')}
                    />
                    {config.show_after_scroll && (
                        <div className="shcb-behavior-sub-field">
                            <div className="shcb-slider-header">
                                <label className="shcb-sub-label">{__('SCROLL PERCENTAGE', 'shois-chat-button')}</label>
                                <span className="shcb-slider-value">{config.scroll_percentage || 25}%</span>
                            </div>
                            <input
                                type="range"
                                className="shcb-range-slider"
                                value={config.scroll_percentage || 25}
                                min={5}
                                max={100}
                                step={5}
                                onChange={(e) => onChange({ scroll_percentage: parseInt(e.target.value, 10) })}
                            />
                        </div>
                    )}
                </div>
            </div>

            {/* Popup Behavior */}
            <BehaviorSectionHeader
                icon={
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
                        <circle cx="12" cy="12" r="3" />
                    </svg>
                }
                title={__('POPUP BEHAVIOR', 'shois-chat-button')}
            />
            <div className="shcb-settings-card">
                <div className="shcb-card-body">
                    <ToggleField
                        label={__('Close on Outside Click', 'shois-chat-button')}
                        checked={config.close_on_outside_click !== false}
                        onChange={(v) => onChange({ close_on_outside_click: v })}
                        help={__('Allow visitors to close the popup by clicking anywhere outside of it', 'shois-chat-button')}
                    />
                    <div className="shcb-divider" />
                    <ToggleField
                        label={__('Remember Closed State', 'shois-chat-button')}
                        checked={config.remember_closed}
                        onChange={(v) => onChange({ remember_closed: v })}
                        help={__('Keep the widget closed if user dismisses it', 'shois-chat-button')}
                    />
                </div>
            </div>
        </div>
    );
}