/**
 * Coupon Widget Section
 * 
 * Settings for coupon cards displayed in chat.
 * 
 * @since 1.9.0
 */

import React from 'react';
import { Tag, Palette, Type, Copy, Clock, Sparkles } from 'lucide-react';
import { WidgetSectionBase, WidgetSectionTab } from './WidgetSectionBase';
import { LinkedFieldEditor } from '../LinkedFieldEditor';
import { CouponPreview } from '../PreviewElements';
import { BorderStyleSelect, type BorderStyleValue } from '../../common/BorderStyleSelect';
import { 
    CouponWidgetSettings, 
    PresetGlobalValues, 
    DEFAULT_WIDGET_SETTINGS,
    FieldValue,
} from '../../../types/appearance';
import { BorderRadiusFieldEditor } from '../../common/BorderRadiusFieldEditor';
import { t } from '@/lib/i18n';
import { useLanguage } from '@/contexts/LanguageContext';

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

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

    const currentSettings: CouponWidgetSettings = {
        ...DEFAULT_WIDGET_SETTINGS.coupon,
        ...(settings ?? {}),
        container: {
            ...DEFAULT_WIDGET_SETTINGS.coupon.container,
            ...(settings?.container ?? {}),
        },
        header: {
            ...DEFAULT_WIDGET_SETTINGS.coupon.header,
            ...(settings?.header ?? {}),
        },
        description: {
            ...DEFAULT_WIDGET_SETTINGS.coupon.description,
            ...(settings?.description ?? {}),
        },
        code: {
            ...DEFAULT_WIDGET_SETTINGS.coupon.code,
            ...(settings?.code ?? {}),
        },
        copyButton: {
            ...DEFAULT_WIDGET_SETTINGS.coupon.copyButton,
            ...(settings?.copyButton ?? {}),
        },
        badge: {
            ...DEFAULT_WIDGET_SETTINGS.coupon.badge,
            ...(settings?.badge ?? {}),
        },
        expiry: {
            ...DEFAULT_WIDGET_SETTINGS.coupon.expiry,
            ...(settings?.expiry ?? {}),
        },
        removeLink: {
            ...DEFAULT_WIDGET_SETTINGS.coupon.removeLink,
            ...(settings?.removeLink ?? {}),
        },
    };

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

    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('Container')}</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"
                            />
                            <LinkedFieldEditor
                                label={t('Border Color')}
                                value={currentSettings.container.borderColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('container', 'borderColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderStyleSelect
                                label={t('Border Style')}
                                value={(currentSettings.container.borderStyle || 'dashed') as BorderStyleValue}
                                onChange={(v) => handleFieldChange('container', 'borderStyle', v)}
                                disabled={disabled}
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'header',
            label: t('Header'),
            icon: <Type size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Header / Discount')}</h4>
                        <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.color}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('header', 'color', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Font Size')}
                                value={currentSettings.header.fontSize}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('header', 'fontSize', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="18px"
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'code',
            label: t('Coupon Code'),
            icon: <Tag size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Code Display')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.code.background}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('code', 'background', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.code.color}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('code', 'color', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Font Size')}
                                value={currentSettings.code.fontSize}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('code', 'fontSize', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="15px"
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.code.borderRadius}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('code', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusSmall"
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'description',
            label: t('Description'),
            icon: <Type size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Description')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.description.color}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('description', 'color', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Font Size')}
                                value={currentSettings.description.fontSize}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('description', 'fontSize', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="13px"
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'copyButton',
            label: t('Copy Button'),
            icon: <Copy size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Copy Button')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.copyButton.background}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('copyButton', 'background', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.copyButton.color}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('copyButton', 'color', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Hover Background')}
                                value={currentSettings.copyButton.hoverBackground}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('copyButton', 'hoverBackground', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.copyButton.borderRadius}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('copyButton', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusSmall"
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'badge',
            label: t('Badge'),
            icon: <Sparkles size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Status Badge')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Background Color')}
                                value={currentSettings.badge.background}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('badge', 'background', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.badge.color}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('badge', 'color', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <BorderRadiusFieldEditor
                                label={t('Border Radius')}
                                value={currentSettings.badge.borderRadius}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('badge', 'borderRadius', v)}
                                disabled={disabled}
                                defaultGlobalRef="effects.borderRadiusSmall"
                            />
                        </div>
                    </div>
                </div>
            ),
        },
        {
            id: 'expiry',
            label: t('Expiry'),
            icon: <Clock size={14} />,
            content: (
                <div className="space-y-6">
                    <div>
                        <h4 className="text-sm font-medium text-gray-700 mb-3">{t('Expiry Text')}</h4>
                        <div className="space-y-3">
                            <LinkedFieldEditor
                                label={t('Text Color')}
                                value={currentSettings.expiry.color}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('expiry', 'color', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Font Size')}
                                value={currentSettings.expiry.fontSize}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('expiry', 'fontSize', v)}
                                fieldType="size"
                                allowGlobalLink={true}
                                disabled={disabled}
                                placeholder="11px"
                            />
                            <LinkedFieldEditor
                                label={t('Remove Link Color')}
                                value={currentSettings.removeLink.color}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('removeLink', 'color', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                            <LinkedFieldEditor
                                label={t('Remove Link Hover')}
                                value={currentSettings.removeLink.hoverColor}
                                globalValues={globalValues}
                                onChange={(v) => handleFieldChange('removeLink', 'hoverColor', v)}
                                fieldType="color"
                                disabled={disabled}
                            />
                        </div>
                    </div>
                </div>
            ),
        },
    ];

    return (
        <WidgetSectionBase
            title={`🎟️ ${t('Coupon')}`}
            description={t('Coupon widget styling for chat conversations')}
            icon={<Tag size={24} />}
            tabs={tabs}
            disableSettingsPointerEvents={disableSettingsPointerEvents}
            onLockedHoverActionClick={onLockedHoverActionClick}
            preview={
                <CouponPreview
                    globalValues={globalValues}
                    widgetSettings={currentSettings}
                    isRTL={isRTL}
                    language={currentLanguage}
                />
            }
            defaultCollapsed={true}
        />
    );
};

export default CouponSection;
