export interface SectionStyleResult {
    classNames?: string;
    style?: React.CSSProperties;
    hasOverlay?: boolean;
    overlayOpacity?: number;
    backgroundImage?: string;
}

/**
 * Shared utility to compute background styles from section styles.
 * Used by all customer SPA section components.
 */
export function getSectionBackground(styles?: Record<string, any>): SectionStyleResult {
    if (!styles) {
        return { style: {}, hasOverlay: false, overlayOpacity: 0 };
    }

    const bgType = styles.backgroundType || 'solid';
    const style: React.CSSProperties = {};
    let hasOverlay = false;
    let overlayOpacity = 0;
    let backgroundImage: string | undefined;

    if (styles.paddingTop) {
        style.paddingTop = styles.paddingTop;
    }

    if (styles.paddingBottom) {
        style.paddingBottom = styles.paddingBottom;
    }

    switch (bgType) {
        case 'gradient':
            style.background = `linear-gradient(${styles.gradientAngle ?? 135}deg, ${styles.gradientFrom || '#9333ea'}, ${styles.gradientTo || '#3b82f6'})`;
            break;
        case 'image':
            if (styles.backgroundImage) {
                backgroundImage = styles.backgroundImage;
                overlayOpacity = (styles.backgroundOverlay || 0) / 100;
                hasOverlay = overlayOpacity > 0;
            }
            break;
        case 'solid':
        default:
            if (styles.backgroundColor) {
                style.backgroundColor = styles.backgroundColor;
            }
            // Legacy: if backgroundImage exists without explicit type
            if (!styles.backgroundType && styles.backgroundImage) {
                backgroundImage = styles.backgroundImage;
                overlayOpacity = (styles.backgroundOverlay || 0) / 100;
                hasOverlay = overlayOpacity > 0;
            }
            break;
    }

    return { style, hasOverlay, overlayOpacity, backgroundImage };
}

/**
 * Returns inner container class names for the three content width modes:
 * - full: edge-to-edge, no max-width
 * - contained: centered max-w-6xl (matches Product page / SPA default)
 * - boxed: centered max-w-5xl, wrapped in a white rounded-2xl card (matches product accordion cards)
 *
 * For 'boxed', apply this to the inner container div; no extra wrapper needed.
 */
export function getContentWidthClasses(contentWidth?: string): string {
    switch (contentWidth) {
        case 'full':
            return 'w-full px-4 md:px-8';
        case 'boxed':
            return 'container mx-auto px-4 max-w-5xl';
        case 'contained':
        default:
            return 'container mx-auto px-4';
    }
}

/**
 * Returns whether the section uses the boxed (card) layout.
 */
export function isBoxedLayout(contentWidth?: string): boolean {
    return contentWidth === 'boxed';
}
