import React from 'react';
import { cn } from '@/lib/utils';

interface Section {
    id: string;
    type: string;
    layoutVariant?: string;
    colorScheme?: string;
    props: Record<string, { type: 'static' | 'dynamic'; value?: string; source?: string }>;
    elementStyles?: Record<string, any>;
    styles?: any;
}

interface HeroRendererProps {
    section: Section;
    className?: string;
}

const COLOR_SCHEMES: Record<string, { bg: string; text: string }> = {
    default: { bg: '', text: 'text-gray-900' },
    primary: { bg: 'wn-primary-bg', text: 'text-white' },
    secondary: { bg: 'wn-secondary-bg', text: 'text-white' },
    muted: { bg: 'bg-gray-50', text: 'text-gray-700' },
};

export function HeroRenderer({ section, className }: HeroRendererProps) {
    const scheme = COLOR_SCHEMES[section.colorScheme || 'default'] ?? COLOR_SCHEMES['default'];
    const layout = section.layoutVariant || 'default';

    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-[50vh] flex flex-col justify-center',
    };
    const customPadding = section.styles?.paddingTop || section.styles?.paddingBottom;
    const heightClasses = customPadding ? '' : (heightMap[section.styles?.heightPreset || 'default'] || 'py-12 md:py-20');

    const title = section.props?.title?.value || 'Hero Title';
    const subtitle = section.props?.subtitle?.value || 'Your amazing subtitle here';
    const image = section.props?.image?.value;
    const ctaText = section.props?.cta_text?.value || 'Get Started';
    const ctaUrl = section.props?.cta_url?.value || '#';

    // Check for dynamic placeholders
    const isDynamicTitle = section.props?.title?.type === 'dynamic';
    const isDynamicSubtitle = section.props?.subtitle?.type === 'dynamic';
    const isDynamicImage = section.props?.image?.type === 'dynamic';

    // Element Styles
    // Helper to get text styles (including font family)
    const getTextStyles = (elementName: string) => {
        const styles = section.elementStyles?.[elementName] || {};
        return {
            classNames: cn(
                styles.fontSize,
                styles.fontWeight,
                {
                    'font-sans': styles.fontFamily === 'secondary', // Mapping secondary to sans for now if primary is assumed default
                    'font-serif': styles.fontFamily === 'primary', // Mapping primary to serif (headings) - ADJUST AS NEEDED
                }
            ),
            style: {
                color: styles.color,
                backgroundColor: styles.backgroundColor,
                textAlign: styles.textAlign
            }
        };
    };

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

    // Helper for image styles
    const imageStyle = section.elementStyles?.['image'] || {};

    const hasCustomBackground = !!section.styles?.backgroundColor || !!section.styles?.backgroundImage || section.styles?.backgroundType === 'gradient';

    if (layout === 'hero-left-image' || layout === 'hero-right-image') {
        return (
            <div
                className={cn(heightClasses, 'px-4 md:px-8', !hasCustomBackground && !scheme.bg.startsWith('wn-') && scheme.bg, scheme.text, className)}
            >
                <div className={cn(
                    'max-w-6xl mx-auto flex items-center gap-12',
                    layout === 'hero-right-image' ? 'flex-col md:flex-row-reverse' : 'flex-col md:flex-row',
                    'flex-wrap md:flex-nowrap'
                )}>
                    {/* Image */}
                    <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%'
                            }}
                        >
                            {image ? (
                                <img
                                    src={image}
                                    alt={title}
                                    className="w-full h-auto block"
                                    style={{
                                        objectFit: imageStyle.objectFit,
                                        height: imageStyle.height,
                                    }}
                                />
                            ) : (
                                <div className="w-full h-64 md:h-80 bg-gray-300 flex items-center justify-center">
                                    <span className="text-gray-500">
                                        {isDynamicImage ? `◆ ${section.props?.image?.source}` : 'No Image'}
                                    </span>
                                </div>
                            )}
                        </div>
                    </div>

                    {/* Content */}
                    <div className="w-full md:w-1/2 space-y-4">
                        <h1
                            className={cn("font-bold", titleStyle.classNames || "text-3xl md:text-5xl")}
                            style={titleStyle.style}
                        >
                            {isDynamicTitle && <span className="text-orange-400 mr-2">◆</span>}
                            {title}
                        </h1>
                        <p
                            className={cn("opacity-90", subtitleStyle.classNames || "text-lg md:text-xl")}
                            style={subtitleStyle.style}
                        >
                            {isDynamicSubtitle && <span className="text-orange-400 mr-2">◆</span>}
                            {subtitle}
                        </p>
                        {ctaText && (
                            <button
                                className={cn(
                                    "px-6 py-3 rounded-lg transition hover:opacity-90",
                                    !ctaStyle.style?.backgroundColor && "bg-white",
                                    !ctaStyle.style?.color && "text-gray-900",
                                    ctaStyle.classNames
                                )}
                                style={ctaStyle.style}
                            >
                                {ctaText}
                            </button>
                        )}
                    </div>
                </div>
            </div>
        );
    }

    // Default centered layout
    return (
        <div
            className={cn(heightClasses, 'px-4 md:px-8 text-center', !hasCustomBackground && !scheme.bg.startsWith('wn-') && scheme.bg, scheme.text, className)}
        >
            <div className="max-w-4xl mx-auto space-y-6">
                <h1
                    className={cn("font-bold", titleStyle.classNames || "text-4xl md:text-6xl")}
                    style={titleStyle.style}
                >
                    {isDynamicTitle && <span className="text-orange-400 mr-2">◆</span>}
                    {title}
                </h1>
                <p
                    className={cn("opacity-90 max-w-2xl mx-auto", subtitleStyle.classNames || "text-lg md:text-2xl")}
                    style={subtitleStyle.style}
                >
                    {isDynamicSubtitle && <span className="text-orange-400 mr-2">◆</span>}
                    {subtitle}
                </p>

                {/* Image with Wrapper for Background */}
                <div
                    className={cn("mx-auto", imageStyle.width ? "" : "max-w-3xl w-full")}
                    style={{ backgroundColor: imageStyle.backgroundColor, width: imageStyle.width || 'auto', maxWidth: '100%' }}
                >
                    {image ? (
                        <img
                            src={image}
                            alt={title}
                            className={cn(
                                "w-full rounded-xl shadow-lg mt-8",
                                !imageStyle.height && "h-auto", // Default height if not specified
                                !imageStyle.objectFit && "object-cover" // Default fit if not specified
                            )}
                            style={{
                                objectFit: imageStyle.objectFit,
                                height: imageStyle.height,
                                maxWidth: '100%',
                            }}
                        />
                    ) : isDynamicImage ? (
                        <div className="w-full h-64 bg-gray-300 rounded-xl flex items-center justify-center mt-8">
                            <span className="text-gray-500">◆ {section.props?.image?.source}</span>
                        </div>
                    ) : null}
                </div>

                {ctaText && (
                    <button
                        className={cn(
                            "px-8 py-4 rounded-lg transition hover:opacity-90 mt-4",
                            !ctaStyle.style?.backgroundColor && "bg-white",
                            !ctaStyle.style?.color && "text-gray-900",
                            ctaStyle.classNames || "font-semibold"
                        )}
                        style={ctaStyle.style}
                    >
                        {ctaText}
                    </button>
                )}
            </div>
        </div>
    );
}
