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


interface SharedContentProps {
    // Content
    title?: string;
    text?: string; // HTML content

    // Image
    image?: string;
    imagePosition?: 'left' | 'right' | 'top' | 'bottom';

    // Layout
    containerWidth?: 'full' | 'contained' | 'boxed';

    // Styles
    className?: string;
    titleStyle?: React.CSSProperties;
    titleClassName?: string;
    textStyle?: React.CSSProperties;
    textClassName?: string;
    headingStyle?: React.CSSProperties; // For prose headings override
    imageStyle?: React.CSSProperties;

    // Pro Features (for future)
    buttons?: Array<{ text: string, url: string }>;
    buttonStyle?: { classNames?: string; style?: React.CSSProperties };
}


export const SharedContentLayout: React.FC<SharedContentProps> = ({
    title,
    text,
    image,
    imagePosition = 'left',
    containerWidth = 'contained',
    className,
    titleStyle,
    titleClassName,
    textStyle,
    textClassName,
    headingStyle,
    buttons,

    imageStyle,
    buttonStyle
}) => {

    const hasImage = !!image;
    const isImageLeft = imagePosition === 'left';
    const isImageRight = imagePosition === 'right';
    const isImageTop = imagePosition === 'top';
    const isImageBottom = imagePosition === 'bottom';

    // Wrapper classes — full = edge-to-edge, contained = narrow readable column, boxed = card at max-w-5xl
    const containerClasses = cn(
        'w-full mx-auto px-4 sm:px-6 lg:px-8',
        containerWidth === 'contained' ? 'max-w-4xl'
            : containerWidth === 'boxed' ? 'max-w-5xl'
                : '' // full = no max-width cap
    );

    const gridClasses = cn(
        'mx-auto',
        hasImage && (isImageLeft || isImageRight)
            ? 'grid grid-cols-1 lg:grid-cols-2 gap-12 items-center'
            : containerWidth === 'full' ? 'w-full' : '' // no extra constraint for contained — outer already limits it
    );

    const imageWrapperOrder = isImageRight ? 'lg:order-last' : 'lg:order-first';

    const proseStyle = {
        ...textStyle,
        '--tw-prose-headings': headingStyle?.color,
        '--tw-prose-body': textStyle?.color,
    } as React.CSSProperties;

    return (
        <div className={containerClasses}>
            {containerWidth === 'boxed' ? (
                <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden px-6 md:px-10 py-10">
                    <div className={gridClasses}>
                        {/* Image Side */}
                        {hasImage && (
                            <div className={cn(
                                'relative w-full aspect-[4/3] rounded-2xl overflow-hidden shadow-lg',
                                imageWrapperOrder,
                                (isImageTop || isImageBottom) && 'mb-8' // spacing if stacked
                            )} style={imageStyle}>
                                <img
                                    src={image}
                                    alt={title || 'Section Image'}
                                    className="absolute inset-0 w-full h-full object-cover"
                                />
                            </div>
                        )}

                        {/* Content Side */}
                        <div className={cn('flex flex-col', hasImage ? 'bg-transparent' : '')}>
                            {title && (
                                <h2
                                    className={cn(
                                        "tracking-tight text-current mb-6",
                                        !titleClassName && "text-3xl font-bold sm:text-4xl lg:text-5xl",
                                        titleClassName
                                    )}
                                    style={titleStyle}
                                >
                                    {title}
                                </h2>
                            )}



                            {text && (
                                <div
                                    className={cn(
                                        'prose prose-lg max-w-none',
                                        'prose-h1:text-3xl md:prose-h1:text-4xl lg:prose-h1:text-5xl prose-h1:font-bold prose-h1:mt-6 prose-h1:mb-4',
                                        'prose-h2:text-2xl md:prose-h2:text-3xl lg:prose-h2:text-4xl prose-h2:font-bold prose-h2:mt-5 prose-h2:mb-3',
                                        'prose-h3:text-xl md:prose-h3:text-2xl lg:prose-h3:text-3xl prose-h3:font-bold prose-h3:mt-4 prose-h3:mb-2',
                                        'prose-headings:text-[var(--tw-prose-headings)]',
                                        'prose-p:text-[var(--tw-prose-body)]',
                                        'text-[var(--tw-prose-body)]',
                                        className,
                                        textClassName
                                    )}
                                    style={proseStyle}
                                    dangerouslySetInnerHTML={{ __html: text }}
                                />
                            )}



                            {/* Buttons */}
                            {buttons && buttons.length > 0 && (
                                <div className="mt-8 flex flex-wrap gap-4">
                                    {buttons.map((btn, idx) => (
                                        btn.text && btn.url && (
                                            <a
                                                key={idx}
                                                href={btn.url}
                                                className={cn(
                                                    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2",
                                                    !buttonStyle?.style?.backgroundColor && "bg-primary",
                                                    !buttonStyle?.style?.color && "text-primary-foreground hover:bg-primary/90",
                                                    buttonStyle?.classNames
                                                )}
                                                style={buttonStyle?.style}
                                            >
                                                {btn.text}
                                            </a>
                                        )
                                    ))}
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            ) : (
                <div className={gridClasses}>
                    {/* Image Side */}
                    {hasImage && (
                        <div className={cn(
                            'relative w-full aspect-[4/3] rounded-2xl overflow-hidden shadow-lg',
                            imageWrapperOrder,
                            (isImageTop || isImageBottom) && 'mb-8'
                        )} style={imageStyle}>
                            <img
                                src={image}
                                alt={title || 'Section Image'}
                                className="absolute inset-0 w-full h-full object-cover"
                            />
                        </div>
                    )}

                    {/* Content Side */}
                    <div className={cn('flex flex-col', hasImage ? 'bg-transparent' : '')}>
                        {title && (
                            <h2
                                className={cn(
                                    "tracking-tight text-current mb-6",
                                    !titleClassName && "text-3xl font-bold sm:text-4xl lg:text-5xl",
                                    titleClassName
                                )}
                                style={titleStyle}
                            >
                                {title}
                            </h2>
                        )}

                        {text && (
                            <div
                                className={cn(
                                    'prose prose-lg max-w-none',
                                    'prose-h1:text-3xl md:prose-h1:text-4xl lg:prose-h1:text-5xl prose-h1:font-bold prose-h1:mt-6 prose-h1:mb-4',
                                    'prose-h2:text-2xl md:prose-h2:text-3xl lg:prose-h2:text-4xl prose-h2:font-bold prose-h2:mt-5 prose-h2:mb-3',
                                    'prose-h3:text-xl md:prose-h3:text-2xl lg:prose-h3:text-3xl prose-h3:font-bold prose-h3:mt-4 prose-h3:mb-2',
                                    'prose-headings:text-[var(--tw-prose-headings)]',
                                    'prose-p:text-[var(--tw-prose-body)]',
                                    'text-[var(--tw-prose-body)]',
                                    className,
                                    textClassName
                                )}
                                style={proseStyle}
                                dangerouslySetInnerHTML={{ __html: text }}
                            />
                        )}

                        {/* Buttons */}
                        {buttons && buttons.length > 0 && (
                            <div className="mt-8 flex flex-wrap gap-4">
                                {buttons.map((btn, idx) => (
                                    btn.text && btn.url && (
                                        <a
                                            key={idx}
                                            href={btn.url}
                                            className={cn(
                                                "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2",
                                                !buttonStyle?.style?.backgroundColor && "bg-primary",
                                                !buttonStyle?.style?.color && "text-primary-foreground hover:bg-primary/90",
                                                buttonStyle?.classNames
                                            )}
                                            style={buttonStyle?.style}
                                        >
                                            {btn.text}
                                        </a>
                                    )
                                ))}
                            </div>
                        )}
                    </div>
                </div>
            )}
        </div>
    );
};
