export type SectionPropType = 'static' | 'dynamic';
export type SectionFieldType = 'text' | 'textarea' | 'url' | 'image' | 'rte';
export type SectionContentWidth = 'full' | 'contained' | 'boxed';

export interface SectionPropSchema {
    type: SectionPropType;
    value?: any;
    source?: string;
}

export interface SectionFieldSchema {
    name: string;
    label: string;
    type: SectionFieldType;
    dynamic?: boolean;
}

export interface SectionOption {
    value: string;
    label: string;
}

export interface StylableElementSchema {
    name: string;
    label: string;
    type: 'text' | 'image';
}

export interface SectionSchema {
    type: string;
    label: string;
    defaultProps: Record<string, SectionPropSchema>;
    defaultStyles?: {
        contentWidth?: SectionContentWidth;
    };
    fields: SectionFieldSchema[];
    layouts?: SectionOption[];
    stylableElements?: StylableElementSchema[];
}

export const SECTION_SCHEMAS: Record<string, SectionSchema> = {
    hero: {
        type: 'hero',
        label: 'Hero',
        defaultStyles: { contentWidth: 'full' },
        defaultProps: {
            title: { type: 'static', value: 'Welcome to Our Site' },
            subtitle: { type: 'static', value: 'Discover amazing products and services' },
            image: { type: 'static', value: '' },
            cta_text: { type: 'static', value: 'Get Started' },
            cta_url: { type: 'static', value: '#' },
        },
        fields: [
            { name: 'title', label: 'Title', type: 'text', dynamic: true },
            { name: 'subtitle', label: 'Subtitle', type: 'text', dynamic: true },
            { name: 'image', label: 'Image URL', type: 'url', dynamic: true },
            { name: 'cta_text', label: 'Button Text', type: 'text' },
            { name: 'cta_url', label: 'Button URL', type: 'url' },
        ],
        layouts: [
            { value: 'default', label: 'Centered' },
            { value: 'hero-left-image', label: 'Image Left' },
            { value: 'hero-right-image', label: 'Image Right' },
        ],
        stylableElements: [
            { name: 'title', label: 'Title', type: 'text' },
            { name: 'subtitle', label: 'Subtitle', type: 'text' },
            { name: 'image', label: 'Image', type: 'image' },
            { name: 'cta_text', label: 'Button', type: 'text' },
        ],
    },
    content: {
        type: 'content',
        label: 'Content',
        defaultStyles: { contentWidth: 'full' },
        defaultProps: {
            content: { type: 'static', value: 'Add your content here. You can write rich text and format it as needed.' },
            cta_text: { type: 'static', value: '' },
            cta_url: { type: 'static', value: '' },
        },
        fields: [
            { name: 'content', label: 'Content', type: 'rte', dynamic: true },
            { name: 'cta_text', label: 'Button Text', type: 'text' },
            { name: 'cta_url', label: 'Button URL', type: 'url' },
        ],
        layouts: [
            { value: 'default', label: 'Full Width' },
            { value: 'narrow', label: 'Narrow' },
            { value: 'medium', label: 'Medium' },
        ],
        stylableElements: [
            { name: 'heading', label: 'Headings', type: 'text' },
            { name: 'text', label: 'Body Text', type: 'text' },
            { name: 'link', label: 'Links', type: 'text' },
            { name: 'image', label: 'Images', type: 'image' },
            { name: 'button', label: 'Button', type: 'text' },
            { name: 'content', label: 'Container', type: 'text' },
        ],
    },
    'image-text': {
        type: 'image-text',
        label: 'Image + Text',
        defaultStyles: { contentWidth: 'contained' },
        defaultProps: {
            title: { type: 'static', value: 'Section Title' },
            text: { type: 'static', value: 'Your description text goes here. Add compelling content to engage visitors.' },
            image: { type: 'static', value: '' },
            cta_text: { type: 'static', value: '' },
            cta_url: { type: 'static', value: '' },
        },
        fields: [
            { name: 'title', label: 'Title', type: 'text', dynamic: true },
            { name: 'text', label: 'Text', type: 'textarea', dynamic: true },
            { name: 'image', label: 'Image URL', type: 'url', dynamic: true },
            { name: 'cta_text', label: 'Button Text', type: 'text' },
            { name: 'cta_url', label: 'Button URL', type: 'url' },
        ],
        layouts: [
            { value: 'image-left', label: 'Image Left' },
            { value: 'image-right', label: 'Image Right' },
        ],
        stylableElements: [
            { name: 'title', label: 'Title', type: 'text' },
            { name: 'text', label: 'Text', type: 'text' },
            { name: 'image', label: 'Image', type: 'image' },
            { name: 'button', label: 'Button', type: 'text' },
        ],
    },
    'feature-grid': {
        type: 'feature-grid',
        label: 'Feature Grid',
        defaultStyles: { contentWidth: 'contained' },
        defaultProps: {
            heading: { type: 'static', value: 'Our Features' },
            items: { type: 'static', value: [] },
        },
        fields: [
            { name: 'heading', label: 'Heading', type: 'text' },
        ],
        layouts: [
            { value: 'grid-2', label: '2 Columns' },
            { value: 'grid-3', label: '3 Columns' },
            { value: 'grid-4', label: '4 Columns' },
        ],
        stylableElements: [
            { name: 'heading', label: 'Heading', type: 'text' },
            { name: 'feature_item', label: 'Feature Item (Card)', type: 'text' },
        ],
    },
    'cta-banner': {
        type: 'cta-banner',
        label: 'CTA Banner',
        defaultStyles: { contentWidth: 'full' },
        defaultProps: {
            title: { type: 'static', value: 'Ready to get started?' },
            text: { type: 'static', value: 'Join thousands of happy customers today.' },
            button_text: { type: 'static', value: 'Get Started' },
            button_url: { type: 'static', value: '#' },
        },
        fields: [
            { name: 'title', label: 'Title', type: 'text' },
            { name: 'text', label: 'Description', type: 'text' },
            { name: 'button_text', label: 'Button Text', type: 'text' },
            { name: 'button_url', label: 'Button URL', type: 'url' },
        ],
        stylableElements: [
            { name: 'title', label: 'Title', type: 'text' },
            { name: 'text', label: 'Description', type: 'text' },
            { name: 'button_text', label: 'Button', type: 'text' },
        ],
    },
    'contact-form': {
        type: 'contact-form',
        label: 'Contact Form',
        defaultStyles: { contentWidth: 'contained' },
        defaultProps: {
            title: { type: 'static', value: 'Contact Us' },
            webhook_url: { type: 'static', value: '' },
            redirect_url: { type: 'static', value: '' },
        },
        fields: [
            { name: 'title', label: 'Title', type: 'text' },
            { name: 'webhook_url', label: 'Webhook URL', type: 'url' },
            { name: 'redirect_url', label: 'Redirect URL', type: 'url' },
        ],
        stylableElements: [
            { name: 'title', label: 'Title', type: 'text' },
            { name: 'button', label: 'Button', type: 'text' },
            { name: 'fields', label: 'Input Fields', type: 'text' },
        ],
    },
    'bento-category-grid': {
        type: 'bento-category-grid',
        label: 'Bento Grid',
        defaultStyles: { contentWidth: 'full' },
        defaultProps: {
            title: { type: 'static', value: 'Shop by Category' },
            items: { type: 'static', value: [] },
        },
        fields: [
            { name: 'title', label: 'Section Title', type: 'text' },
        ],
        stylableElements: [
            { name: 'title', label: 'Title', type: 'text' },
        ],
    },
    'product-carousel': {
        type: 'product-carousel',
        label: 'Product Carousel',
        defaultStyles: { contentWidth: 'full' },
        defaultProps: {
            title: { type: 'static', value: 'Trending Now' },
            subtitle: { type: 'static', value: '' },
            cta_text: { type: 'static', value: 'Shop All' },
            cta_url: { type: 'static', value: '' },
            source: { type: 'static', value: 'trending' },
            limit: { type: 'static', value: '8' },
        },
        fields: [
            { name: 'title', label: 'Title', type: 'text' },
            { name: 'subtitle', label: 'Subtitle', type: 'text' },
            { name: 'cta_text', label: 'CTA Label', type: 'text' },
            { name: 'cta_url', label: 'CTA URL', type: 'url' },
            { name: 'source', label: 'Product Source', type: 'text' },
            { name: 'limit', label: 'Max Products', type: 'text' },
        ],
        layouts: [
            { value: 'trending', label: 'Trending' },
            { value: 'new', label: 'New Arrivals' },
            { value: 'on_sale', label: 'On Sale' },
            { value: 'featured', label: 'Featured' },
        ],
        stylableElements: [
            { name: 'title', label: 'Title', type: 'text' },
            { name: 'subtitle', label: 'Subtitle', type: 'text' },
        ],
    },
    'shoppable-image': {
        type: 'shoppable-image',
        label: 'Shoppable Image',
        defaultStyles: { contentWidth: 'full' },
        defaultProps: {
            title: { type: 'static', value: 'Shop the Look' },
            subtitle: { type: 'static', value: '' },
            image: { type: 'static', value: '' },
            alt: { type: 'static', value: '' },
            hotspots: { type: 'static', value: [] },
        },
        fields: [
            { name: 'title', label: 'Title', type: 'text' },
            { name: 'subtitle', label: 'Subtitle', type: 'text' },
            { name: 'image', label: 'Image URL', type: 'url' },
            { name: 'alt', label: 'Image Alt Text', type: 'text' },
        ],
        stylableElements: [
            { name: 'title', label: 'Title', type: 'text' },
        ],
    },
    'marquee-banner': {
        type: 'marquee-banner',
        label: 'Marquee Banner',
        defaultStyles: { contentWidth: 'full' },
        defaultProps: {
            text: { type: 'static', value: 'Free Shipping on orders over $50' },
            separator: { type: 'static', value: '*' },
            speed: { type: 'static', value: '20' },
        },
        fields: [
            { name: 'text', label: 'Banner Text', type: 'text' },
            { name: 'separator', label: 'Separator', type: 'text' },
            { name: 'speed', label: 'Speed (seconds)', type: 'text' },
        ],
    },
};

export const SECTION_SCHEMA_LIST = Object.values(SECTION_SCHEMAS);

export function getSectionSchema(type: string): SectionSchema | undefined {
    return SECTION_SCHEMAS[type];
}

export function cloneDefaultProps(type: string): Record<string, SectionPropSchema> {
    const schema = getSectionSchema(type);
    return schema ? JSON.parse(JSON.stringify(schema.defaultProps)) : {};
}

export function cloneDefaultStyles(type: string): SectionSchema['defaultStyles'] {
    const schema = getSectionSchema(type);
    return schema?.defaultStyles ? { ...schema.defaultStyles } : undefined;
}

export function normalizeFeatureGridProps(props: Record<string, any>): Record<string, any> {
    if (!props || props.items !== undefined || props.features === undefined) {
        return props;
    }

    return {
        ...props,
        items: props.features,
    };
}
