import { cn } from '@/lib/utils';
import { getSectionBackground } from '@/lib/sectionStyles';

interface CTABannerSectionProps {
    id: string;
    layout?: string;
    colorScheme?: string;
    title?: string;
    text?: string;
    button_text?: string;
    button_url?: string;
    elementStyles?: Record<string, any>;
}

export function CTABannerSection({
    id,
    layout = 'default',
    colorScheme = 'primary',
    title,
    text,
    button_text,
    button_url,
    elementStyles,
    styles,
}: CTABannerSectionProps & { styles?: Record<string, any> }) {
    const heightMap: Record<string, string> = {
        'default': 'py-12 md:py-20',
        'small': 'py-8 md:py-12',
        'medium': 'py-16 md:py-24',
        'large': 'py-24 md:py-36',
        'fullscreen': 'min-h-screen flex flex-col justify-center',
    };
    const customPadding = styles?.paddingTop || styles?.paddingBottom;
    const heightClasses = customPadding ? '' : (heightMap[styles?.heightPreset || 'default'] || 'py-12 md:py-20');

    const getTextStyles = (elementName: string) => {
        const es = elementStyles?.[elementName] || {};
        return {
            classNames: cn(
                es.fontSize,
                es.fontWeight,
                {
                    'font-sans': es.fontFamily === 'secondary',
                    'font-serif': es.fontFamily === 'primary',
                }
            ),
            style: {
                color: es.color,
                textAlign: es.textAlign,
                backgroundColor: es.backgroundColor,
                borderColor: es.borderColor,
                borderWidth: es.borderWidth,
                borderRadius: es.borderRadius,
            }
        };
    };

    const titleStyle = getTextStyles('title');
    const textStyle = getTextStyles('text');
    const btnStyle = getTextStyles('button_text');

    // Shared inner content — same markup used in boxed and non-boxed
    const innerContent = (
        <>
            {title && (
                <h2
                    className={cn(
                        "wn-cta__title mb-6",
                        !elementStyles?.title?.fontSize && "text-3xl md:text-4xl lg:text-5xl",
                        !elementStyles?.title?.fontWeight && "font-bold",
                        titleStyle.classNames
                    )}
                    style={titleStyle.style}
                >
                    {title}
                </h2>
            )}

            {text && (
                <p className={cn(
                    'wn-cta-banner__text mb-8 max-w-2xl mx-auto',
                    !elementStyles?.text?.fontSize && "text-lg md:text-xl",
                    styles?.contentWidth !== 'boxed' && {
                        'text-white/90': colorScheme === 'primary',
                        'text-gray-600': colorScheme === 'muted',
                    },
                    styles?.contentWidth === 'boxed' && 'text-gray-600',
                    textStyle.classNames
                )}
                    style={textStyle.style}
                >
                    {text}
                </p>
            )}

            {button_text && button_url && (
                <a
                    href={button_url}
                    className={cn(
                        'wn-cta-banner__button inline-block px-8 py-3 rounded-lg font-semibold transition-all hover:opacity-90',
                        !btnStyle.style?.backgroundColor && (styles?.contentWidth === 'boxed'
                            ? 'bg-primary'
                            : {
                                'bg-white': colorScheme === 'primary',
                                'bg-primary': colorScheme === 'muted' || colorScheme === 'secondary',
                            }),
                        !btnStyle.style?.color && (styles?.contentWidth === 'boxed'
                            ? 'text-primary-foreground'
                            : {
                                'text-primary': colorScheme === 'primary',
                                'text-white': colorScheme === 'muted' || colorScheme === 'secondary',
                            }),
                        btnStyle.classNames
                    )}
                    style={btnStyle.style}
                >
                    {button_text}
                </a>
            )}
        </>
    );

    const hasCustomBackground = !!styles?.backgroundColor || !!styles?.backgroundImage || styles?.backgroundType === 'gradient';
    const sectionBg = getSectionBackground(styles);

    // Helper to get background style for dynamic schemes
    const getBackgroundStyle = (): React.CSSProperties | undefined => {
        if (hasCustomBackground) return sectionBg.style;
        if (colorScheme === 'primary') {
            return { backgroundColor: 'var(--wn-primary, #1a1a1a)' };
        }
        if (colorScheme === 'secondary') {
            return { backgroundColor: 'var(--wn-secondary, #6b7280)' };
        }
        return undefined;
    };

    return (
        <section
            id={id}
            className={cn(
                'wn-section wn-cta-banner',
                `wn-cta-banner--${layout}`,
                `wn-scheme--${colorScheme}`,
                heightClasses,
                {
                    'bg-primary text-primary-foreground': colorScheme === 'primary' && !hasCustomBackground,
                    'bg-secondary text-secondary-foreground': colorScheme === 'secondary' && !hasCustomBackground,
                    'bg-muted': colorScheme === 'muted' && !hasCustomBackground,
                }
            )}
            style={getBackgroundStyle()}
        >
            {styles?.contentWidth === 'boxed' ? (
                <div className="container mx-auto px-4 max-w-5xl">
                    <div className="bg-white text-gray-900 rounded-2xl shadow-sm border border-gray-200 overflow-hidden px-6 md:px-10 py-10 text-center">
                        {innerContent}
                    </div>
                </div>
            ) : (
                <div className={cn(
                    "mx-auto px-4 text-center",
                    styles?.contentWidth === 'full' ? 'w-full' : 'container'
                )}>
                    {innerContent}
                </div>
            )}
        </section>
    );
}
