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

interface HeroSectionProps {
    id: string;
    layout?: string;
    colorScheme?: string;
    title?: string;
    subtitle?: string;
    image?: string;
    cta_text?: string;
    cta_url?: string;
    elementStyles?: Record<string, any>;
}

export function HeroSection({
    id,
    layout = 'default',
    title,
    subtitle,
    image,
    cta_text,
    cta_url,
    elementStyles,
    styles,
}: HeroSectionProps & { styles?: Record<string, any> }) {
    const heightMap: Record<string, string> = {
        'default': 'py-16 md:py-28',
        '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-16 md:py-28');
    const isImageLeft = layout === 'hero-left-image' || layout === 'image-left';
    const isImageRight = layout === 'hero-right-image' || layout === 'image-right';
    const isCentered = layout === 'centered' || layout === 'default';

    const sectionBg = getSectionBackground(styles);

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

    const titleStyle = getTextStyles('title');
    const subtitleStyle = getTextStyles('subtitle');
    const ctaStyle = getTextStyles('cta_text');

    const imageStyle = elementStyles?.['image'] || {};



    // Helper to get background style for dynamic schemes
    /* const getBackgroundStyle = (): React.CSSProperties | undefined => {
        // If user set custom bg via Design tab, use that
        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-hero',
                `wn-hero--${layout}`,
                'relative overflow-hidden',
                heightClasses,
            )}
            style={sectionBg.style}
        >
            <div className={cn(
                'mx-auto px-4 z-10 relative flex w-full',
                styles?.contentWidth === 'full' ? 'w-full'
                    : styles?.contentWidth === 'boxed' ? 'max-w-5xl'
                        : 'container max-w-7xl',
                {
                    'flex flex-col md:flex-row items-center gap-8': isImageLeft || isImageRight,
                    'text-center': isCentered,
                }
            )}>
                {/* Image - Left */}
                {image && isImageLeft && (
                    <div className="w-full md:w-1/2">
                        <div
                            className="rounded-lg shadow-xl overflow-hidden"
                            style={{
                                backgroundColor: imageStyle.backgroundColor,
                                width: imageStyle.width || 'auto',
                                maxWidth: '100%'
                            }}
                        >
                            <img
                                src={image}
                                alt={title || 'Hero image'}
                                className="w-full h-auto block"
                                style={{
                                    objectFit: imageStyle.objectFit,
                                    height: imageStyle.height,
                                }}
                            />
                        </div>
                    </div>
                )}

                {/* Content */}
                <div className={cn(
                    'wn-hero__content',
                    {
                        'w-full md:w-1/2': isImageLeft || isImageRight,
                        'max-w-3xl mx-auto': isCentered,
                    }
                )}>
                    {title && (
                        <h1
                            className={cn(
                                "wn-hero__title mb-6 leading-tight",
                                !elementStyles?.title?.fontSize && "text-4xl md:text-5xl lg:text-6xl",
                                !elementStyles?.title?.fontWeight && "font-bold",
                                titleStyle.classNames
                            )}
                            style={titleStyle.style}
                        >
                            {title}
                        </h1>
                    )}

                    {subtitle && (
                        <p
                            className={cn(
                                "wn-hero__subtitle text-opacity-80 mb-8",
                                !elementStyles?.subtitle?.fontSize && "text-lg md:text-xl",
                                subtitleStyle.classNames
                            )}
                            style={subtitleStyle.style}
                        >
                            {subtitle}
                        </p>
                    )}

                    {/* Centered Image */}
                    <div
                        className={cn(
                            "mt-12 mx-auto rounded-lg shadow-xl overflow-hidden",
                            imageStyle.width ? "" : "max-w-4xl"
                        )}
                        style={{ backgroundColor: imageStyle.backgroundColor, width: imageStyle.width || 'auto', maxWidth: '100%' }}
                    >
                        {image && isCentered && (
                            <img
                                src={image}
                                alt={title || 'Hero image'}
                                className={cn(
                                    "w-full rounded-[inherit]",
                                    !imageStyle.height && "h-auto",
                                    !imageStyle.objectFit && "object-cover"
                                )}
                                style={{
                                    objectFit: imageStyle.objectFit,
                                    height: imageStyle.height,
                                    maxWidth: '100%',
                                }}
                            />
                        )}
                    </div>

                    {cta_text && cta_url && (
                        <a
                            href={cta_url}
                            className={cn(
                                "wn-hero__cta inline-block px-8 py-3 rounded-lg font-semibold hover:opacity-90 transition-colors mt-8",
                                !ctaStyle.style?.backgroundColor && "bg-primary",
                                !ctaStyle.style?.color && "text-primary-foreground",
                                ctaStyle.classNames
                            )}
                            style={ctaStyle.style}
                        >
                            {cta_text}
                        </a>
                    )}
                </div>

                {/* Image - Right */}
                {image && isImageRight && (
                    <div className="w-full md:w-1/2">
                        <div
                            className="rounded-lg shadow-xl overflow-hidden"
                            style={{
                                backgroundColor: imageStyle.backgroundColor,
                                width: imageStyle.width || 'auto',
                                maxWidth: '100%'
                            }}
                        >
                            <img
                                src={image}
                                alt={title || 'Hero image'}
                                className="w-full h-auto block"
                                style={{
                                    objectFit: imageStyle.objectFit,
                                    height: imageStyle.height,
                                }}
                            />
                        </div>
                    </div>
                )}
            </div>
        </section>
    );
}
