/**
 * Product Card Widget Section
 * 
 * Settings for product cards displayed in chat.
 * 
 * @since 1.5.0
 */

import React from 'react';
import { ShoppingCart, Palette, Image, Type, DollarSign, Star } from 'lucide-react';
import { WidgetSectionBase, WidgetSectionTab } from './WidgetSectionBase';
import { LinkedFieldEditor } from '../LinkedFieldEditor';
import { TypographyControl, TypographySettings } from '../TypographyControl';
import { ProductCardPreview } from '../PreviewElements';
import { ButtonStyleEditor, ButtonStyleValue } from '../../common/ButtonStyleEditor';
import { SelectField } from '../../common/SelectField';
import { ToggleSwitch } from '../../common/ToggleSwitch';
import { 
    ProductCardWidgetSettings, 
    PresetGlobalValues, 
    DEFAULT_WIDGET_SETTINGS,
    FieldValue,
    ElementTypography,
    ButtonStyleSettings,
    createDefaultButtonStyle,
    createGlobalRef,
    createCustomValue,
} from '../../../types/appearance';
import { BoxShadowFieldEditor } from '../../common/BoxShadowFieldEditor';
import { BorderRadiusFieldEditor } from '../../common/BorderRadiusFieldEditor';
// NumberWithUnitInput removed - all size fields now use LinkedFieldEditor for global linking
import { t } from '@/lib/i18n';
import { useLanguage } from '@/contexts/LanguageContext';

interface ProductCardSectionProps {
    settings: ProductCardWidgetSettings | null;
    globalValues: PresetGlobalValues;
    onChange: (settings: ProductCardWidgetSettings) => void;
    disabled?: boolean;
    /** When true, make settings pane non-clickable (pointer-events: none) */
    disableSettingsPointerEvents?: boolean;
    /** Optional action when locked overlay button is clicked */
    onLockedHoverActionClick?: () => void;
}

export const ProductCardSection: React.FC<ProductCardSectionProps> = ({
    settings,
    globalValues,
    onChange,
    disabled = false,
    disableSettingsPointerEvents = false,
    onLockedHoverActionClick,
}) => {
    const { currentLanguage } = useLanguage();
    const isRTL = currentLanguage === 'he';

    // Normalize settings (DB may miss newly added nested keys)
    const currentSettings: ProductCardWidgetSettings = {
        ...DEFAULT_WIDGET_SETTINGS.productCard,
        ...(settings ?? {}),
        container: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.container,
            ...(settings?.container ?? {}),
        },
        text: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.text,
            ...(settings as any)?.text,
        },
        image: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.image,
            ...(settings?.image ?? {}),
        },
        badge: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.badge,
            ...(settings?.badge ?? {}),
        },
        badgeSale: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.badgeSale,
            ...(settings?.badgeSale ?? {}),
        },
        badgeOutOfStock: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.badgeOutOfStock,
            ...(settings?.badgeOutOfStock ?? {}),
        },
        badgeLowStock: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.badgeLowStock,
            ...(settings?.badgeLowStock ?? {}),
        },
        title: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.title,
            ...(settings?.title ?? {}),
        },
        description: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.description,
            ...(settings?.description ?? {}),
        },
        price: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.price,
            ...(settings?.price ?? {}),
        },
        rating: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.rating,
            ...(settings?.rating ?? {}),
        },
        ratingDisplay: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.ratingDisplay,
            ...(settings?.ratingDisplay ?? {}),
        },
        quantityControl: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.quantityControl,
            ...(settings?.quantityControl ?? {}),
            inputStyle: {
                ...DEFAULT_WIDGET_SETTINGS.productCard.quantityControl?.inputStyle,
                ...(settings?.quantityControl?.inputStyle ?? {}),
            },
        },
        button: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.button,
            ...(settings?.button ?? {}),
        },
        buttonLoadingState: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.buttonLoadingState,
            ...(settings?.buttonLoadingState ?? {}),
        },
        buttonSuccessState: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.buttonSuccessState,
            ...(settings?.buttonSuccessState ?? {}),
        },
        buttonDisabledState: {
            ...DEFAULT_WIDGET_SETTINGS.productCard.buttonDisabledState,
            ...(settings?.buttonDisabledState ?? {}),
        },
    };

    const normalizeTypographySettings = (value: unknown): TypographySettings => {
        if (!value || typeof value !== 'object') return {};
        if (Array.isArray(value)) return {};
        return value as TypographySettings;
    };

    const handleFieldChange = (
        sectionKey: keyof ProductCardWidgetSettings,
        fieldKey: string,
        value: any
    ) => {
        onChange({
            ...currentSettings,
            [sectionKey]: {
                ...(currentSettings[sectionKey] as Record<string, unknown>),
                [fieldKey]: value,
            },
        });
    };

    // Handler for typography changes
    const handleTypographyChange = (
        sectionKey: 'title' | 'description' | 'price' | 'button' | 'badge' | 'badgeSale' | 'badgeOutOfStock' | 'badgeLowStock',
        typography: TypographySettings
    ) => {
        onChange({
            ...currentSettings,
            [sectionKey]: {
                ...currentSettings[sectionKey],
                typography: typography as ElementTypography,
            },
        });
    };

    const handleNestedFieldChange = (
        sectionKey: keyof ProductCardWidgetSettings,
        nestedKey: string,
        fieldKey: string,
        value: any
    ) => {
        const section = (currentSettings[sectionKey] ?? {}) as Record<string, unknown>;
        const nested = ((section[nestedKey] as Record<string, unknown>) ?? {});

        onChange({
            ...currentSettings,
            [sectionKey]: {
                ...section,
                [nestedKey]: {
                    ...nested,
                    [fieldKey]: value,
                },
            },
        });
    };

    // Handler for rating count typography changes
    const handleRatingCountTypographyChange = (typography: TypographySettings) => {
        onChange({
            ...currentSettings,
            rating: {
                ...currentSettings.rating,
                countTypography: typography as ElementTypography,
            },
        });
    };

    // Handler for button style changes (full ButtonStyleSettings)
    const handleButtonStyleChange = (buttonStyle: ButtonStyleValue) => {
        const legacyBorderRadius: FieldValue = (() => {
            const br = (buttonStyle as any)?.borderRadius;
            if (br && typeof br === 'object' && 'type' in br) return br as FieldValue;
            if (br && typeof br === 'object') {
                const r = br as any;
                const tl = r.topLeft || '0px';
                const tr = r.topRight || '0px';
                const brv = r.bottomRight || '0px';
                const bl = r.bottomLeft || '0px';
                return createCustomValue(`${tl} ${tr} ${brv} ${bl}`);
            }
            return createGlobalRef('effects.borderRadiusMedium');
        })();

        const legacyTypography: ElementTypography = {
            ...(currentSettings.button.typography || {}),
            fontFamily: (buttonStyle as any)?.typography?.fontFamily,
            fontSize: (buttonStyle as any)?.typography?.fontSize,
            fontWeight: (buttonStyle as any)?.typography?.fontWeight,
            lineHeight: (buttonStyle as any)?.typography?.lineHeight,
            textTransform: (buttonStyle as any)?.typography?.textTransform,
            fontStyle: (buttonStyle as any)?.typography?.fontStyle,
            textDecoration: (buttonStyle as any)?.typography?.textDecoration,
            letterSpacing: (buttonStyle as any)?.typography?.letterSpacing,
            // Protocol defaults for non-scale fields
            textAlign: createCustomValue('start'),
            textShadow: createCustomValue('none'),
        };

        onChange({
            ...currentSettings,
            button: {
                ...currentSettings.button,
                buttonStyle: buttonStyle as ButtonStyleSettings,
                // Keep legacy fields in sync for backward compatibility
                background: (buttonStyle as any)?.backgroundColor || currentSettings.button.background,
                color: (buttonStyle as any)?.textColor || currentSettings.button.color,
                hoverBackground:
                    (buttonStyle as any)?.hover?.backgroundColor ||
                    currentSettings.button.hoverBackground,
                borderRadius: legacyBorderRadius,
                typography: legacyTypography,
            },
        });
    };

    // Handler for "view product" button style changes
    const handleViewButtonStyleChange = (buttonStyle: ButtonStyleValue) => {
        onChange({
            ...currentSettings,
            button: {
                ...currentSettings.button,
                viewButtonStyle: buttonStyle as ButtonStyleSettings,
            },
        });
    };

    const tabs: WidgetSectionTab[] = [
        {
            id: 'container',
            label: t('Container'),
            icon: <Palette size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('General Styling')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.container.background}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('container', 'background', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.container.borderRadius}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('container', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusMedium"
                            />
                            <BoxShadowFieldEditor
                                label={t('Shadow')}
                                value={currentSettings.container.shadow}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('container', 'shadow', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.shadowMedium"
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'image',
            label: t('Image'),
            icon: <Image size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Product Image')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Height')}
                                value={currentSettings.image.height}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('image', 'height', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="180px"
                            />
                            <LinkedFieldEditor
                                label={t('Max Height')}
                                value={currentSettings.image.maxHeight ?? createGlobalRef('sizes.productImageMaxHeight')}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('image', 'maxHeight', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="400px"
                                description={t('Limits the image area height (max-height).')}
                            />
                            <SelectField
                                label={t('Aspect Ratio')}
                                value={currentSettings.image.aspectRatio ?? 'auto'}
                                onChange={(value) => handleFieldChange('image', 'aspectRatio', value)}
                                disabled={disabled}
                                description={t('When not "Auto" — the image uses aspect-ratio instead of fixed height.')}
                                options={[
                                    { value: 'auto', label: t('Auto') },
                                    { value: '1 / 1', label: '1:1 (' + t('Square') + ')' },
                                    { value: '4 / 3', label: '4:3' },
                                    { value: '16 / 9', label: '16:9' },
                                    { value: '3 / 4', label: '3:4' },
                                    { value: '9 / 16', label: '9:16' },
                                ]}
                            />
                            <SelectField
                                label={t('Image Fit (object-fit)')}
                                value={currentSettings.image.objectFit ?? 'cover'}
                                onChange={(value) => handleFieldChange('image', 'objectFit', value)}
                                disabled={disabled}
                                description={t('Determines how the image fits its frame.')}
                                options={[
                                    { value: 'cover', label: t('Cover') },
                                    { value: 'contain', label: t('Contain') },
                                    { value: 'fill', label: t('Stretch (fill)') },
                                    { value: 'none', label: t('No fit (none)') },
                                    { value: 'scale-down', label: t('Scale down only') },
                                ]}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.image.borderRadius}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('image', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusSmall"
                            />
                        </div>
                    </div>
                    <div>
                        <div className="flex items-center justify-between gap-3 mb-3">
                            <h4 className="text-sm font-medium text-gray-700">{t('Sale Badge')}</h4>
                            <ToggleSwitch
                                checked={currentSettings.badgeSale?.show !== false}
                                onChange={(checked) => handleFieldChange('badgeSale', 'show', checked as any)}
                                disabled={disabled}
                                ariaLabel={t('Toggle sale badge')}
                                size="sm"
                            />
                        </div>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.badgeSale?.backgroundColor ?? currentSettings.badge.background}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('badgeSale', 'backgroundColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.badgeSale?.textColor ?? currentSettings.badge.color}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('badgeSale', 'textColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.badgeSale?.borderRadius ?? currentSettings.badge.borderRadius}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('badgeSale', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusSmall"
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Sale Badge Text Styling')}
                                value={normalizeTypographySettings(currentSettings.badgeSale?.typography)}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyChange('badgeSale', typography)}
                                disabled={disabled}
                                context="small"
                            />
                        </div>
                    </div>
                    <div>
                        <div className="flex items-center justify-between gap-3 mb-3">
                            <h4 className="text-sm font-medium text-gray-700">{t('Out of Stock Badge')}</h4>
                            <ToggleSwitch
                                checked={currentSettings.badgeOutOfStock?.show !== false}
                                onChange={(checked) => handleFieldChange('badgeOutOfStock', 'show', checked as any)}
                                disabled={disabled}
                                ariaLabel={t('Toggle out of stock badge')}
                                size="sm"
                            />
                        </div>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.badgeOutOfStock?.backgroundColor ?? DEFAULT_WIDGET_SETTINGS.productCard.badgeOutOfStock?.backgroundColor!}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('badgeOutOfStock', 'backgroundColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.badgeOutOfStock?.textColor ?? DEFAULT_WIDGET_SETTINGS.productCard.badgeOutOfStock?.textColor!}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('badgeOutOfStock', 'textColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.badgeOutOfStock?.borderRadius ?? DEFAULT_WIDGET_SETTINGS.productCard.badgeOutOfStock?.borderRadius!}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('badgeOutOfStock', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusSmall"
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Out of Stock Badge Text Styling')}
                                value={normalizeTypographySettings(currentSettings.badgeOutOfStock?.typography)}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyChange('badgeOutOfStock', typography)}
                                disabled={disabled}
                                context="small"
                            />
                        </div>
                    </div>
                    <div>
                        <div className="flex items-center justify-between gap-3 mb-3">
                            <h4 className="text-sm font-medium text-gray-700">{t('Low Stock Badge')}</h4>
                            <ToggleSwitch
                                checked={currentSettings.badgeLowStock?.show !== false}
                                onChange={(checked) => handleFieldChange('badgeLowStock', 'show', checked as any)}
                                disabled={disabled}
                                ariaLabel={t('Toggle low stock badge')}
                                size="sm"
                            />
                        </div>
                        <div className="space-y-3">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-2">{t('Threshold')}</label>
                                <input
                                    type="number"
                                    min={1}
                                    value={currentSettings.badgeLowStock?.threshold ?? 5}
                                    onChange={(e) => handleFieldChange('badgeLowStock', 'threshold', Math.max(1, Number(e.target.value) || 1) as any)}
                                    disabled={disabled}
                                    className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                                />
                            </div>
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.badgeLowStock?.backgroundColor ?? DEFAULT_WIDGET_SETTINGS.productCard.badgeLowStock?.backgroundColor!}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('badgeLowStock', 'backgroundColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.badgeLowStock?.textColor ?? DEFAULT_WIDGET_SETTINGS.productCard.badgeLowStock?.textColor!}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('badgeLowStock', 'textColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.badgeLowStock?.borderRadius ?? DEFAULT_WIDGET_SETTINGS.productCard.badgeLowStock?.borderRadius!}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('badgeLowStock', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusSmall"
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Low Stock Badge Text Styling')}
                                value={normalizeTypographySettings(currentSettings.badgeLowStock?.typography)}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyChange('badgeLowStock', typography)}
                                disabled={disabled}
                                context="small"
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'text',
            label: t('Text'),
            icon: <Type size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Product Title')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Color')}
                                value={currentSettings.title.color}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('title', 'color', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Title Text Styling')}
                                value={normalizeTypographySettings(currentSettings.title.typography)}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyChange('title', typography)}
                                disabled={disabled}
                                context="header"
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Description')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Color')}
                                value={currentSettings.description.color}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('description', 'color', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Description Text Styling')}
                                value={normalizeTypographySettings(currentSettings.description.typography)}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyChange('description', typography)}
                                disabled={disabled}
                                context="body"
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Spacing')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Content Padding')}
                                value={currentSettings.text.padding}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('text', 'padding', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="16px"
                            />
                            <LinkedFieldEditor
                                label={t('Gap Between Items')}
                                value={currentSettings.text.gap}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('text', 'gap', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="12px"
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'price',
            label: t('Price'),
            icon: <DollarSign size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Price')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Color')}
                                value={currentSettings.price.color}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('price', 'color', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Sale Price Color')}
                                value={currentSettings.price.saleColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('price', 'saleColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Original Price Color')}
                                value={currentSettings.price.originalColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('price', 'originalColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Currency Symbol Size')}
                                value={currentSettings.price.currencySymbolSize ?? currentSettings.price.font}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('price', 'currencySymbolSize', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="24px"
                                description={t('Controls the currency symbol size only. Default = same as digit size.')}
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Price Text Styling')}
                                value={normalizeTypographySettings(currentSettings.price.typography)}
                                globalValues={globalValues}
                                onChange={(typography) => handleTypographyChange('price', typography)}
                                disabled={disabled}
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'rating',
            label: t('Rating'),
            icon: <Star size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <div className="flex items-center justify-between gap-3 mb-3">
                            <h4 className="text-sm font-medium text-gray-700">{t('Stars')}</h4>
                            <ToggleSwitch
                                checked={currentSettings.ratingDisplay?.show !== false}
                                onChange={(checked) => handleFieldChange('ratingDisplay', 'show', checked as any)}
                                disabled={disabled}
                                ariaLabel={t('Toggle rating display')}
                                size="sm"
                            />
                        </div>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Filled Star Color')}
                                value={currentSettings.rating.starColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('rating', 'starColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Empty Star Color')}
                                value={currentSettings.rating.emptyStarColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('rating', 'emptyStarColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Star Size')}
                                value={currentSettings.rating.starSize}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('rating', 'starSize', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="14px"
                            />
                            <LinkedFieldEditor
                                label={t('Gap')}
                                value={currentSettings.rating.gap}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('rating', 'gap', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="4px"
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Count')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Count Color')}
                                value={currentSettings.rating.countColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('rating', 'countColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Count Text Styling')}
                                value={normalizeTypographySettings(currentSettings.rating.countTypography)}
                                globalValues={globalValues}
                                onChange={handleRatingCountTypographyChange}
                                disabled={disabled}
                                context="small"
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'button',
            label: t('Button'),
            icon: <ShoppingCart size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <div className="flex items-center justify-between gap-3 mb-3">
                            <h4 className="text-sm font-medium text-gray-700">{t('Quantity Controls')}</h4>
                            <ToggleSwitch
                                checked={currentSettings.quantityControl?.show !== false}
                                onChange={(checked) => handleFieldChange('quantityControl', 'show', checked as any)}
                                disabled={disabled}
                                ariaLabel={t('Toggle quantity controls')}
                                size="sm"
                            />
                        </div>
                        <div className="space-y-3">
                            <ButtonStyleEditor
                                value={(currentSettings.quantityControl?.buttonStyle as ButtonStyleValue) || (DEFAULT_WIDGET_SETTINGS.productCard.quantityControl?.buttonStyle as ButtonStyleValue)}
                                onChange={(value) => handleFieldChange('quantityControl', 'buttonStyle', value as any)}
                                globalValues={globalValues}
                                label={t('Quantity Button Style')}
                                disabled={disabled}
                                showIcon={false}
                                showIconPicker={false}
                                showTypography={true}
                            />
                            <LinkedFieldEditor
                                label={t('Input Background')}
                                value={currentSettings.quantityControl?.inputStyle?.background ?? DEFAULT_WIDGET_SETTINGS.productCard.quantityControl?.inputStyle?.background!}
                                globalValues={globalValues}
                                onChange={(v) => handleNestedFieldChange('quantityControl', 'inputStyle', 'background', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Input Text Color')}
                                value={currentSettings.quantityControl?.inputStyle?.color ?? DEFAULT_WIDGET_SETTINGS.productCard.quantityControl?.inputStyle?.color!}
                                globalValues={globalValues}
                                onChange={(v) => handleNestedFieldChange('quantityControl', 'inputStyle', 'color', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Input Border Color')}
                                value={currentSettings.quantityControl?.inputStyle?.borderColor ?? DEFAULT_WIDGET_SETTINGS.productCard.quantityControl?.inputStyle?.borderColor!}
                                globalValues={globalValues}
                                onChange={(v) => handleNestedFieldChange('quantityControl', 'inputStyle', 'borderColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Input Border Radius')}
                                value={currentSettings.quantityControl?.inputStyle?.borderRadius ?? DEFAULT_WIDGET_SETTINGS.productCard.quantityControl?.inputStyle?.borderRadius!}
                                globalValues={globalValues}
                                onChange={(v) => handleNestedFieldChange('quantityControl', 'inputStyle', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusSmall"
                            />
                            <LinkedFieldEditor
                                label={t('Input Width')}
                                value={currentSettings.quantityControl?.inputStyle?.width ?? DEFAULT_WIDGET_SETTINGS.productCard.quantityControl?.inputStyle?.width!}
                                globalValues={globalValues}
                                onChange={(v) => handleNestedFieldChange('quantityControl', 'inputStyle', 'width', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="52px"
                            />
                        </div>
                        <div className="mt-3">
                            <TypographyControl
                                label={t('Quantity Input Text Styling')}
                                value={normalizeTypographySettings(currentSettings.quantityControl?.inputStyle?.typography)}
                                globalValues={globalValues}
                                onChange={(typography) => handleNestedFieldChange('quantityControl', 'inputStyle', 'typography', typography as any)}
                                disabled={disabled}
                                context="body"
                            />
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Add to Cart Button')}</h4>
                        <ButtonStyleEditor
                            value={(currentSettings.button.buttonStyle as ButtonStyleValue) || createDefaultButtonStyle('primary')}
                            onChange={handleButtonStyleChange}
                            globalValues={globalValues}
                            label=""
                            disabled={disabled}
                            showIcon={true}
                            showIconPicker={true}
                            showTypography={true}
                        />
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Button States')}</h4>
                        <div className="space-y-4">
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                                <LinkedFieldEditor
                                    label={t('Loading Background')}
                                    value={currentSettings.buttonLoadingState?.backgroundColor ?? DEFAULT_WIDGET_SETTINGS.productCard.buttonLoadingState?.backgroundColor!}
                                    globalValues={globalValues}
                                    onChange={(v) => handleFieldChange('buttonLoadingState', 'backgroundColor', v)}
                                    fieldType="color"
                                    disabled={disabled}
                                />
                                <LinkedFieldEditor
                                    label={t('Loading Text Color')}
                                    value={currentSettings.buttonLoadingState?.textColor ?? DEFAULT_WIDGET_SETTINGS.productCard.buttonLoadingState?.textColor!}
                                    globalValues={globalValues}
                                    onChange={(v) => handleFieldChange('buttonLoadingState', 'textColor', v)}
                                    fieldType="color"
                                    disabled={disabled}
                                />
                                <LinkedFieldEditor
                                    label={t('Success Background')}
                                    value={currentSettings.buttonSuccessState?.backgroundColor ?? DEFAULT_WIDGET_SETTINGS.productCard.buttonSuccessState?.backgroundColor!}
                                    globalValues={globalValues}
                                    onChange={(v) => handleFieldChange('buttonSuccessState', 'backgroundColor', v)}
                                    fieldType="color"
                                    disabled={disabled}
                                />
                                <LinkedFieldEditor
                                    label={t('Success Text Color')}
                                    value={currentSettings.buttonSuccessState?.textColor ?? DEFAULT_WIDGET_SETTINGS.productCard.buttonSuccessState?.textColor!}
                                    globalValues={globalValues}
                                    onChange={(v) => handleFieldChange('buttonSuccessState', 'textColor', v)}
                                    fieldType="color"
                                    disabled={disabled}
                                />
                                <LinkedFieldEditor
                                    label={t('Disabled Background')}
                                    value={currentSettings.buttonDisabledState?.backgroundColor ?? DEFAULT_WIDGET_SETTINGS.productCard.buttonDisabledState?.backgroundColor!}
                                    globalValues={globalValues}
                                    onChange={(v) => handleFieldChange('buttonDisabledState', 'backgroundColor', v)}
                                    fieldType="color"
                                    disabled={disabled}
                                />
                                <LinkedFieldEditor
                                    label={t('Disabled Text Color')}
                                    value={currentSettings.buttonDisabledState?.textColor ?? DEFAULT_WIDGET_SETTINGS.productCard.buttonDisabledState?.textColor!}
                                    globalValues={globalValues}
                                    onChange={(v) => handleFieldChange('buttonDisabledState', 'textColor', v)}
                                    fieldType="color"
                                    disabled={disabled}
                                />
                            </div>
                        </div>
                    </div>
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('View Product Button')}</h4>
                        <ButtonStyleEditor
                            value={
                                (currentSettings.button.viewButtonStyle as ButtonStyleValue) ||
                                (DEFAULT_WIDGET_SETTINGS.productCard.button.viewButtonStyle as ButtonStyleValue)
                            }
                            onChange={handleViewButtonStyleChange}
                            globalValues={globalValues}
                            label=""
                            disabled={disabled}
                            showIcon={true}
                            showIconPicker={true}
                            showTypography={true}
                        />
                    </div>
                </div>
            ),
        },
    ];

    return (
        <WidgetSectionBase
            title={`🛒 ${t('Product Card')}`}
            description={t('Product card styling for chat conversations')}
            icon={<ShoppingCart size={24} />}
            tabs={tabs}
            disableSettingsPointerEvents={disableSettingsPointerEvents}
            onLockedHoverActionClick={onLockedHoverActionClick}
            preview={
                <ProductCardPreview 
                    globalValues={globalValues} 
                    widgetSettings={currentSettings}
                    isRTL={isRTL}
                    language={currentLanguage}
                />
            }
            defaultCollapsed={true}
        />
    );
};

export default ProductCardSection;
