/**
 * Shois Chat Button — Content Tab (Editor)
 *
 * Header texts, welcome message, offline message, tooltip, label, chips, brand logo.
 *
 * @package ShoisChatButton
 */
import { __ } from '@wordpress/i18n';

/**
 * TextField component.
 */
function TextField({ label, value, onChange, placeholder, multiline, help, className = '', disabled = false, onClickCapture }) {
    return (
        <div className={`shcb-field-group ${className} ${disabled ? 'shcb-pro-locked-field' : ''}`} onClickCapture={onClickCapture} style={disabled ? { opacity: 0.6, cursor: 'not-allowed' } : {}}>
            <label className="shcb-field-label">{label}</label>
            {multiline ? (
                <textarea
                    className="shcb-input shcb-textarea"
                    value={value || ''}
                    onChange={(e) => !disabled && onChange(e.target.value)}
                    placeholder={placeholder}
                    rows={3}
                    disabled={disabled}
                />
            ) : (
                <input
                    type="text"
                    className="shcb-input"
                    value={value || ''}
                    onChange={(e) => !disabled && onChange(e.target.value)}
                    placeholder={placeholder}
                    disabled={disabled}
                />
            )}
            {help && <p className="shcb-field-help">{help}</p>}
        </div>
    );
}

/**
 * ToggleField component.
 */
function ToggleField({ label, checked, onChange, help, disabled, onClickCapture }) {
    return (
        <div className="shcb-toggle-field" onClickCapture={onClickCapture} style={disabled ? { opacity: 0.6, cursor: 'not-allowed' } : {}}>
            <div className="shcb-toggle-info">
                <label className="shcb-field-label">{label}</label>
                {help && <p className="shcb-field-help">{help}</p>}
            </div>
            <label className="shcb-switch" style={disabled ? { pointerEvents: 'none' } : {}}>
                <input
                    type="checkbox"
                    checked={checked || false}
                    onChange={(e) => !disabled && onChange(e.target.checked)}
                    disabled={disabled}
                />
                <span className="shcb-switch-slider"></span>
            </label>
        </div>
    );
}

/**
 * MediaField component using WP Media Library.
 */
function MediaField({ label, value, onChange }) {
    const handleUpload = () => {
        const frame = wp.media({
            title: __('Select or Upload Logo', 'shois-chat-button'),
            button: { text: __('Use this logo', 'shois-chat-button') },
            multiple: false
        });

        frame.on('select', () => {
            const attachment = frame.state().get('selection').first().toJSON();
            onChange(attachment.url);
        });

        frame.open();
    };

    return (
        <div className="shcb-media-field">
            <div className="shcb-media-preview-wrap">
                <div className="shcb-media-preview">
                    {value ? (
                        <img src={value} alt="Logo" />
                    ) : (
                        <div className="shcb-media-placeholder">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                                <circle cx="8.5" cy="8.5" r="1.5" />
                                <polyline points="21 15 16 10 5 21" />
                            </svg>
                        </div>
                    )}
                    {value && <div className="shcb-media-check">✓</div>}
                </div>
            </div>
            <div className="shcb-media-controls">
                <TextField
                    label={__('Logo Source URL', 'shois-chat-button')}
                    value={value}
                    onChange={onChange}
                    placeholder="https://..."
                />
                <div className="shcb-media-actions">
                    <button type="button" className="shcb-btn shcb-btn-primary" onClick={handleUpload}>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ marginRight: '6px' }}>
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                            <polyline points="17 8 12 3 7 8" />
                            <line x1="12" y1="3" x2="12" y2="15" />
                        </svg>
                        {__('Upload Image', 'shois-chat-button')}
                    </button>
                    <button type="button" className="shcb-btn shcb-btn-outline" onClick={() => onChange('')}>
                        {__('Remove Logo', 'shois-chat-button')}
                    </button>
                </div>
                <p className="shcb-field-help">
                    {__('Recommended size: 512×512px. Supported formats: SVG, PNG, JPG.', 'shois-chat-button')}
                </p>
            </div>
        </div>
    );
}

/**
 * ContentTab — redesigned text and content controls.
 */
export default function ContentTab({ config, onChange }) {
    const isPro = window.shcbAdmin?.isPro || false;

    const handleProClick = (e) => {
        if (!isPro) {
            e.preventDefault();
            e.stopPropagation();
            window.dispatchEvent(new CustomEvent('shcb-pro-alert'));
        }
    };

    return (
        <div className="shcb-editor-tab-content">
            {/* Header Content Card */}
            <div className="shcb-settings-card">
                <div className="shcb-card-header">
                    <svg className="shcb-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                        <path d="M4 7V4h16v3M9 20h6M12 4v16" />
                    </svg>
                    <h4>{__('Header Content', 'shois-chat-button')}</h4>
                </div>
                <div className="shcb-card-body shcb-grid-2">
                    <TextField
                        label={__('Main Title', 'shois-chat-button')}
                        value={config.header_title}
                        onChange={(v) => onChange({ header_title: v })}
                        placeholder="Chat with us"
                    />
                    <TextField
                        label={__('Subtitle', 'shois-chat-button')}
                        value={config.header_subtitle}
                        onChange={(v) => onChange({ header_subtitle: v })}
                        placeholder="We typically reply within minutes"
                    />
                </div>
            </div>

            {/* Auto-Messages Card */}
            <div className="shcb-settings-card">
                <div className="shcb-card-header">
                    <svg className="shcb-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
                    </svg>
                    <h4>{__('Auto-Messages', 'shois-chat-button')}</h4>
                </div>
                <div className="shcb-card-body">
                    <TextField
                        label={__('Welcome Message', 'shois-chat-button')}
                        value={config.welcome_message}
                        onChange={(v) => onChange({ welcome_message: v })}
                        placeholder="Hi there! How can we help you today?"
                        multiline
                    />
                    <div className="shcb-grid-2" style={{ marginTop: '16px' }}>
                        <TextField
                            label={__('Offline Message', 'shois-chat-button')}
                            value={config.offline_message}
                            onChange={(v) => onChange({ offline_message: v })}
                            placeholder="We're currently away. Leave a message!"
                        />
                        <TextField
                            label={__('Tooltip Text', 'shois-chat-button')}
                            value={config.tooltip_text}
                            onChange={(v) => onChange({ tooltip_text: v })}
                            placeholder="Need help?"
                        />
                    </div>
                </div>
            </div>

            {/* Trigger Button Card */}
            <div className="shcb-settings-card">
                <div className="shcb-card-header">
                    <svg className="shcb-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                        <rect x="2" y="6" width="20" height="12" rx="2" />
                        <circle cx="17" cy="12" r="2" />
                    </svg>
                    <h4>{__('Trigger Button', 'shois-chat-button')}<span className="shcb-pro-badge">PRO</span></h4>
                    <label className="shcb-switch" style={{ marginLeft: 'auto', ...( !isPro ? { opacity: 0.6, cursor: 'not-allowed' } : {} ) }} onClickCapture={handleProClick}>
                        <input
                            type="checkbox"
                            checked={config.show_label || false}
                            onChange={(e) => isPro && onChange({ show_label: e.target.checked })}
                            disabled={!isPro}
                        />
                        <span className="shcb-switch-slider" style={!isPro ? { pointerEvents: 'none' } : {}}></span>
                    </label>
                </div>
                <div className="shcb-card-body">
                    {config.show_label ? (
                        <TextField
                            label={__('Button Label', 'shois-chat-button')}
                            value={config.label_text}
                            onChange={(v) => onChange({ label_text: v })}
                            placeholder="Contact Us"
                        />
                    ) : (
                        <p className="shcb-field-help" style={{ marginTop: 0 }}>
                            {__('Click the switch to add a text label next to the floating button.', 'shois-chat-button')}
                        </p>
                    )}
                </div>
            </div>

            {/* Notification Badge Card */}
            <div className="shcb-settings-card">
                <div className="shcb-card-header">
                    <svg className="shcb-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
                        <path d="M13.73 21a2 2 0 0 1-3.46 0" />
                    </svg>
                    <h4>{__('Notification Badge', 'shois-chat-button')}<span className="shcb-pro-badge">PRO</span></h4>
                    <label className="shcb-switch" style={{ marginLeft: 'auto', ...( !isPro ? { opacity: 0.6, cursor: 'not-allowed' } : {} ) }} onClickCapture={handleProClick}>
                        <input
                            type="checkbox"
                            checked={config.badge_enabled || false}
                            onChange={(e) => isPro && onChange({ badge_enabled: e.target.checked })}
                            disabled={!isPro}
                        />
                        <span className="shcb-switch-slider" style={!isPro ? { pointerEvents: 'none' } : {}}></span>
                    </label>
                </div>
                <div className="shcb-card-body">
                    {config.badge_enabled ? (
                        <TextField
                            label={__('Badge Value', 'shois-chat-button')}
                            value={config.badge_value}
                            onChange={(v) => onChange({ badge_value: v })}
                            placeholder="1"
                            help={__('Number or text to show in the badge.', 'shois-chat-button')}
                            disabled={!isPro}
                            onClickCapture={handleProClick}
                        />
                    ) : (
                        <p className="shcb-field-help" style={{ marginTop: 0 }}>
                            {__('Shows a small pulse indicator when there are unread messages from support.', 'shois-chat-button')}
                        </p>
                    )}
                </div>
            </div>

            {/* Brand Logo Card */}
            <div className="shcb-settings-card">
                <div className="shcb-card-header">
                    <svg className="shcb-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                        <circle cx="12" cy="12" r="10" />
                        <path d="M8 14s1.5 2 4 2 4-2 4-2" />
                        <line x1="9" y1="9" x2="9.01" y2="9" />
                        <line x1="15" y1="9" x2="15.01" y2="9" />
                    </svg>
                    <h4>{__('Brand Logo', 'shois-chat-button')}</h4>
                </div>
                <div className="shcb-card-body">
                    <MediaField
                        label={__('Logo Source URL', 'shois-chat-button')}
                        value={config.brand_logo}
                        onChange={(v) => onChange({ brand_logo: v })}
                    />
                </div>
            </div>

            {/* Footer Content Card */}
            <div className="shcb-settings-card">
                <div className="shcb-card-header">
                    <svg className="shcb-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                        <path d="M4 19h16v2H4zM4 15h16v2H4zM4 3h16v2H4z" />
                    </svg>
                    <h4>{__('Footer Content', 'shois-chat-button')}<span className="shcb-pro-badge">PRO</span></h4>
                </div>
                <div className="shcb-card-body">
                    <TextField
                        label={__('Footer Text', 'shois-chat-button')}
                        value={config.footer_text}
                        onChange={(v) => onChange({ footer_text: v })}
                        placeholder="Powered by Shois Chat Button"
                        help={__('Customize the copyright or branding text at the bottom of the chat window.', 'shois-chat-button')}
                        disabled={!isPro}
                        onClickCapture={handleProClick}
                    />
                </div>
            </div>

            {/* Variables Card */}
            <div className="shcb-settings-card">
                <div className="shcb-card-header">
                    <svg className="shcb-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                        <polyline points="4 7 4 4 20 4 20 7" />
                        <line x1="9" y1="20" x2="15" y2="20" />
                        <line x1="12" y1="4" x2="12" y2="20" />
                    </svg>
                    <h4>{__('Dynamic Variables', 'shois-chat-button')}</h4>
                </div>
                <div className="shcb-card-body">
                    <p className="shcb-field-help" style={{ marginBottom: '12px' }}>
                        {__('Use these variables in your pre-filled messages:', 'shois-chat-button')}
                    </p>
                    <div className="shcb-variables-list">
                        {['site_name', 'page_title', 'current_url', 'date', 'time', 'day_of_week',
                            'product_name', 'product_price', 'cart_total'].map((v) => (
                                <code key={v} className="shcb-variable-tag">{'{{' + v + '}}'}</code>
                            ))}
                    </div>
                </div>
            </div>
        </div>
    );
}