/**
 * Bundle Builder Widget Section
 *
 * Settings for bundle builder cards displayed in chat.
 *
 * @since 1.9.0
 */

import React from 'react';
import { DollarSign, LayoutList, Package, Palette, ShoppingCart, Sparkles, Type } from 'lucide-react';
import { WidgetSectionBase, WidgetSectionTab } from './WidgetSectionBase';
import { LinkedFieldEditor } from '../LinkedFieldEditor';
import { BundleBuilderPreview } from '../PreviewElements';
import {
    BundleBuilderWidgetSettings,
    PresetGlobalValues,
    DEFAULT_WIDGET_SETTINGS,
    FieldValue,
} from '../../../types/appearance';
import { BoxShadowFieldEditor } from '../../common/BoxShadowFieldEditor';
import { BorderRadiusFieldEditor } from '../../common/BorderRadiusFieldEditor';
import { t } from '@/lib/i18n';
import { useLanguage } from '@/contexts/LanguageContext';

interface BundleBuilderSectionProps {
    settings: BundleBuilderWidgetSettings | null;
    globalValues: PresetGlobalValues;
    onChange: (settings: BundleBuilderWidgetSettings) => void;
    disabled?: boolean;
    disableSettingsPointerEvents?: boolean;
    onLockedHoverActionClick?: () => void;
}

export const BundleBuilderSection: React.FC<BundleBuilderSectionProps> = ({
    settings,
    globalValues,
    onChange,
    disabled = false,
    disableSettingsPointerEvents = false,
    onLockedHoverActionClick,
}) => {
    const { currentLanguage } = useLanguage();
    const isRTL = currentLanguage === 'he';
    const defaults = DEFAULT_WIDGET_SETTINGS.bundleBuilder;
    const legacyButton = settings?.button ?? defaults.button;

    const currentSettings: BundleBuilderWidgetSettings = {
        ...defaults,
        ...(settings ?? {}),
        container: { ...defaults.container, ...(settings?.container ?? {}) },
        header: { ...defaults.header, ...(settings?.header ?? {}) },
        productItem: { ...defaults.productItem, ...(settings?.productItem ?? {}) },
        priceDisplay: { ...defaults.priceDisplay, ...(settings?.priceDisplay ?? {}) },
        summary: { ...defaults.summary, ...(settings?.summary ?? {}) },
        button: { ...defaults.button, ...(settings?.button ?? {}) },
        primaryButton: { ...defaults.primaryButton, ...(settings?.primaryButton ?? legacyButton ?? {}) },
        secondaryButton: { ...defaults.secondaryButton, ...(settings?.secondaryButton ?? {}) },
        swapButton: { ...defaults.swapButton, ...(settings?.swapButton ?? {}) },
        removeButton: { ...defaults.removeButton, ...(settings?.removeButton ?? {}) },
        states: { ...defaults.states, ...(settings?.states ?? {}) },
    };

    const handleFieldChange = <K extends keyof BundleBuilderWidgetSettings>(
        sectionKey: K,
        fieldKey: keyof BundleBuilderWidgetSettings[K],
        value: FieldValue | string
    ) => {
        onChange({
            ...currentSettings,
            [sectionKey]: {
                ...currentSettings[sectionKey],
                [fieldKey]: value,
            },
        });
    };

    const renderButtonFields = (
        sectionKey: 'primaryButton' | 'secondaryButton' | 'swapButton' | 'removeButton',
        title: string,
        placeholder: string
    ) => (
        <div>
            <h4 className="text-sm font-medium text-gray-700 mb-3">{title}</h4>
            <div className="space-y-3">
                <LinkedFieldEditor
                    label={t('Background Color')}
                    value={currentSettings[sectionKey].background}
                    globalValues={globalValues}
                    onChange={(v) => handleFieldChange(sectionKey, 'background', v)}
                    fieldType="color"
                    disabled={disabled}
                />
                <LinkedFieldEditor
                    label={t('Text Color')}
                    value={currentSettings[sectionKey].color}
                    globalValues={globalValues}
                    onChange={(v) => handleFieldChange(sectionKey, 'color', v)}
                    fieldType="color"
                    disabled={disabled}
                />
                <LinkedFieldEditor
                    label={t('Border Color')}
                    value={currentSettings[sectionKey].borderColor}
                    globalValues={globalValues}
                    onChange={(v) => handleFieldChange(sectionKey, 'borderColor', v)}
                    fieldType="color"
                    disabled={disabled}
                />
                <LinkedFieldEditor
                    label={t('Hover Background')}
                    value={currentSettings[sectionKey].hoverBackground}
                    globalValues={globalValues}
                    onChange={(v) => handleFieldChange(sectionKey, 'hoverBackground', v)}
                    fieldType="color"
                    disabled={disabled}
                />
                <BorderRadiusFieldEditor
                    label={t('Border Radius')}
                    value={currentSettings[sectionKey].borderRadius}
                    globalValues={globalValues}
                    onChange={(v) => handleFieldChange(sectionKey, 'borderRadius', v)}
                    disabled={disabled}
                    defaultGlobalRef="effects.borderRadiusMedium"
                />
                <LinkedFieldEditor
                    label={t('Font Size')}
                    value={currentSettings[sectionKey].fontSize}
                    globalValues={globalValues}
                    onChange={(v) => handleFieldChange(sectionKey, 'fontSize', v)}
                    fieldType="size"
                    allowGlobalLink={true}
                    disabled={disabled}
                    placeholder={placeholder}
                />
            </div>
        </div>
    );

    const tabs: WidgetSectionTab[] = [
        {
            id: 'container',
            label: t('Container'),
            icon: <Palette size={14} />,
            content: (
                <div className="space-y-6">
                    <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}
                        />
                        <LinkedFieldEditor
                            label={t('Border Color')}
                            value={currentSettings.container.borderColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('container', 'borderColor', 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>
            ),
        },
        {
            id: 'header',
            label: t('Header'),
            icon: <Type size={14} />,
            content: (
                <div className="space-y-6">
                    <div className="space-y-3">
                        <LinkedFieldEditor
                            label={t('Background Color')}
                            value={currentSettings.header.background}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('header', 'background', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Text Color')}
                            value={currentSettings.header.textColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('header', 'textColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Subtitle Color')}
                            value={currentSettings.header.subtitleColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('header', 'subtitleColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                    </div>
                    <div className="space-y-3">
                        <LinkedFieldEditor
                            label={t('Title Font Size')}
                            value={currentSettings.header.titleFontSize}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('header', 'titleFontSize', v)}
                            fieldType="size"
                            allowGlobalLink={true}
                            disabled={disabled}
                            placeholder="16px"
                        />
                        <LinkedFieldEditor
                            label={t('Title Font Weight')}
                            value={currentSettings.header.titleFontWeight}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('header', 'titleFontWeight', v)}
                            fieldType="size"
                            allowGlobalLink={true}
                            disabled={disabled}
                            placeholder="700"
                        />
                        <LinkedFieldEditor
                            label={t('Subtitle Font Size')}
                            value={currentSettings.header.subtitleFontSize}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('header', 'subtitleFontSize', v)}
                            fieldType="size"
                            allowGlobalLink={true}
                            disabled={disabled}
                            placeholder="12px"
                        />
                    </div>
                </div>
            ),
        },
        {
            id: 'products',
            label: t('Products'),
            icon: <LayoutList size={14} />,
            content: (
                <div className="space-y-6">
                    <div className="space-y-3">
                        <LinkedFieldEditor
                            label={t('Background Color')}
                            value={currentSettings.productItem.background}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('productItem', 'background', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Text Color')}
                            value={currentSettings.productItem.textColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('productItem', 'textColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Muted Text Color')}
                            value={currentSettings.productItem.mutedTextColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('productItem', 'mutedTextColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Price Color')}
                            value={currentSettings.productItem.priceColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('productItem', 'priceColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Action Icon Color')}
                            value={currentSettings.productItem.actionColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('productItem', 'actionColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <BorderRadiusFieldEditor
                            label={t('Border Radius')}
                            value={currentSettings.productItem.borderRadius}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('productItem', 'borderRadius', v)}
                            disabled={disabled}
                            defaultGlobalRef="effects.borderRadiusSmall"
                        />
                        <LinkedFieldEditor
                            label={t('Name Font Size')}
                            value={currentSettings.productItem.nameFontSize}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('productItem', 'nameFontSize', v)}
                            fieldType="size"
                            allowGlobalLink={true}
                            disabled={disabled}
                            placeholder="13px"
                        />
                        <LinkedFieldEditor
                            label={t('Price Font Size')}
                            value={currentSettings.productItem.priceFontSize}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('productItem', 'priceFontSize', v)}
                            fieldType="size"
                            allowGlobalLink={true}
                            disabled={disabled}
                            placeholder="13px"
                        />
                    </div>
                </div>
            ),
        },
        {
            id: 'summary',
            label: t('Price'),
            icon: <DollarSign size={14} />,
            content: (
                <div className="space-y-6">
                    <div className="space-y-3">
                        <LinkedFieldEditor
                            label={t('Summary Background')}
                            value={currentSettings.summary.background}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('summary', 'background', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Summary Border Color')}
                            value={currentSettings.summary.borderColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('summary', 'borderColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Summary Label Color')}
                            value={currentSettings.summary.labelColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('summary', 'labelColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Total Label Color')}
                            value={currentSettings.summary.totalLabelColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('summary', 'totalLabelColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Link Color')}
                            value={currentSettings.summary.linkColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('summary', 'linkColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                    </div>
                    <div className="space-y-3">
                        <LinkedFieldEditor
                            label={t('Original Price Color')}
                            value={currentSettings.priceDisplay.originalPriceColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('priceDisplay', 'originalPriceColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Discounted Price Color')}
                            value={currentSettings.priceDisplay.discountedPriceColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('priceDisplay', 'discountedPriceColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Savings Background')}
                            value={currentSettings.priceDisplay.savingsBackground}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('priceDisplay', 'savingsBackground', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Savings Text Color')}
                            value={currentSettings.priceDisplay.savingsColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('priceDisplay', 'savingsColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <BorderRadiusFieldEditor
                            label={t('Savings Border Radius')}
                            value={currentSettings.priceDisplay.savingsBorderRadius}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('priceDisplay', 'savingsBorderRadius', v)}
                            disabled={disabled}
                            defaultGlobalRef="effects.borderRadiusSmall"
                        />
                        <LinkedFieldEditor
                            label={t('Coupon Background')}
                            value={currentSettings.priceDisplay.couponBackground}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('priceDisplay', 'couponBackground', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Coupon Text Color')}
                            value={currentSettings.priceDisplay.couponColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('priceDisplay', 'couponColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                    </div>
                </div>
            ),
        },
        {
            id: 'buttons',
            label: t('Buttons'),
            icon: <ShoppingCart size={14} />,
            content: (
                <div className="space-y-6">
                    {renderButtonFields('primaryButton', t('Primary Button'), '14px')}
                    {renderButtonFields('secondaryButton', t('Secondary Button'), '13px')}
                    {renderButtonFields('swapButton', t('Swap Button'), '12px')}
                    {renderButtonFields('removeButton', t('Remove Button'), '12px')}
                </div>
            ),
        },
        {
            id: 'states',
            label: t('States'),
            icon: <Sparkles size={14} />,
            content: (
                <div className="space-y-6">
                    <div className="space-y-3">
                        <LinkedFieldEditor
                            label={t('Loading Background')}
                            value={currentSettings.states.loadingBackground}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('states', 'loadingBackground', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Loading Icon Color')}
                            value={currentSettings.states.loadingIconColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('states', 'loadingIconColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Empty Background')}
                            value={currentSettings.states.emptyBackground}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('states', 'emptyBackground', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Empty Icon Color')}
                            value={currentSettings.states.emptyIconColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('states', 'emptyIconColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Error Background')}
                            value={currentSettings.states.errorBackground}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('states', 'errorBackground', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Error Icon Color')}
                            value={currentSettings.states.errorIconColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('states', 'errorIconColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Success Background')}
                            value={currentSettings.states.successBackground}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('states', 'successBackground', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('Success Icon Color')}
                            value={currentSettings.states.successIconColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('states', 'successIconColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('State Title Color')}
                            value={currentSettings.states.titleColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('states', 'titleColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                        <LinkedFieldEditor
                            label={t('State Description Color')}
                            value={currentSettings.states.descriptionColor}
                            globalValues={globalValues}
                            onChange={(v) => handleFieldChange('states', 'descriptionColor', v)}
                            fieldType="color"
                            disabled={disabled}
                        />
                    </div>
                </div>
            ),
        },
    ];

    return (
        <WidgetSectionBase
            title={`🎁 ${t('Bundle Builder')}`}
            description={t('Bundle builder styling for chat conversations')}
            icon={<Package size={24} />}
            tabs={tabs}
            disableSettingsPointerEvents={disableSettingsPointerEvents}
            onLockedHoverActionClick={onLockedHoverActionClick}
            preview={
                <BundleBuilderPreview
                    globalValues={globalValues}
                    widgetSettings={currentSettings}
                    isRTL={isRTL}
                    language={currentLanguage}
                />
            }
            defaultCollapsed={true}
        />
    );
};

export default BundleBuilderSection;
