/**
 * File Path: assets/js/wizard/wizard-previews.js
 *
 * MBS Setup Wizard -- BrowserMock, BookPreview, LAYOUT_MOCKUPS, CatalogPreview.
 * Attaches BrowserMock, BookPreview, CatalogPreview to window.MBSWizardParts.
 *
 * @package MyBookShowroom
 * @since   1.2.0
 */

(function( wp ) {
    'use strict';
    var __ = wp.i18n.__;

    if ( ! wp || ! wp.element ) {
        return;
    }

    var h = wp.element.createElement;
    var P = window.MBSWizardParts = window.MBSWizardParts || {};

    function BrowserMock( props ) {
        return h( 'div', { className: 'mbs-mock' },
            h( 'div', { className: 'mbs-mock__chrome' },
                h( 'span', { className: 'mbs-mock__dot mbs-mock__dot--r' } ),
                h( 'span', { className: 'mbs-mock__dot mbs-mock__dot--y' } ),
                h( 'span', { className: 'mbs-mock__dot mbs-mock__dot--g' } ),
                h( 'span', { className: 'mbs-mock__url' }, 'yoursite.com/books' )
            ),
            h( 'div', { className: 'mbs-mock__body' }, props.children )
        );
    }

    function BookPreview( props ) {
        var book = props.book;
        var coverStyle = {
            width: '100%', aspectRatio: '2/3', borderRadius: '4px',
            background: '#C8B4D4', display: 'flex',
            alignItems: 'center', justifyContent: 'center',
            fontSize: '11px', color: '#4A5F8A', marginBottom: '10px',
            overflow: 'hidden',
        };
        return h( 'div', { style: { padding: '8px' } },
            h( 'div', { style: coverStyle },
                book.cover
                    ? h( 'img', { src: book.cover.url, alt: '', style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' } } )
                    : h( 'span', null, __( 'Cover', 'my-book-showroom' ) )
            ),
            h( 'div', { style: { fontFamily: 'Georgia,serif', fontWeight: 700, fontSize: '13px', color: '#2C3E6B', marginBottom: '3px' } },
                book.title || __( 'Book Title', 'my-book-showroom' )
            ),
            h( 'div', { style: { fontSize: '11px', color: '#5A6472' } },
                book.author || __( 'Author Name', 'my-book-showroom' )
            )
        );
    }

    var LAYOUT_MOCKUPS = {
        grid: function() {
            var cols = [ '#C8B4D4', '#4AABB8', '#2C3E6B' ];
            return h( 'div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '6px' } },
                cols.concat( cols ).map( function( c, i ) {
                    return h( 'div', { key: i, style: { background: c, borderRadius: '3px', aspectRatio: '2/3', opacity: 0.7 + ( i % 3 ) * 0.1 } } );
                })
            );
        },
        list: function() {
            return h( 'div', { style: { display: 'flex', flexDirection: 'column', gap: '6px' } },
                [ '#C8B4D4', '#4AABB8', '#2C3E6B', '#9AABBA' ].map( function( c, i ) {
                    return h( 'div', { key: i, style: { display: 'flex', gap: '8px', alignItems: 'center' } },
                        h( 'div', { style: { width: '28px', aspectRatio: '2/3', background: c, borderRadius: '2px', flexShrink: 0, opacity: 0.8 } } ),
                        h( 'div', { style: { flex: 1 } },
                            h( 'div', { style: { height: '6px', background: '#E0D8C8', borderRadius: '2px', marginBottom: '3px', width: '70%' } } ),
                            h( 'div', { style: { height: '5px', background: '#F4F0E8', borderRadius: '2px', width: '50%' } } )
                        )
                    );
                })
            );
        },
        card: function() {
            return h( 'div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px' } },
                [ '#C8B4D4', '#4AABB8' ].map( function( c, i ) {
                    return h( 'div', { key: i, style: { borderRadius: '4px', overflow: 'hidden', border: '1px solid #E0D8C8' } },
                        h( 'div', { style: { background: c, aspectRatio: '2/3', opacity: 0.75 } } ),
                        h( 'div', { style: { padding: '5px' } },
                            h( 'div', { style: { height: '5px', background: '#E0D8C8', borderRadius: '2px', marginBottom: '4px', width: '80%' } } ),
                            h( 'div', { style: { height: '12px', background: '#4AABB8', borderRadius: '2px', opacity: 0.6 } } )
                        )
                    );
                })
            );
        },
        masonry: function() {
            var heights = [ '70px', '90px', '60px', '80px', '55px', '95px' ];
            return h( 'div', { style: { columnCount: 3, columnGap: '6px' } },
                heights.map( function( h2, i ) {
                    var colors = [ '#C8B4D4', '#4AABB8', '#2C3E6B', '#9AABBA', '#C8B4D4', '#4AABB8' ];
                    return h( 'div', { key: i, style: { background: colors[ i ], borderRadius: '3px', height: h2, marginBottom: '6px', breakInside: 'avoid', opacity: 0.7 } } );
                })
            );
        },
        hero: function() {
            return h( 'div', null,
                h( 'div', { style: { background: '#2C3E6B', borderRadius: '4px', aspectRatio: '3/2', marginBottom: '8px', opacity: 0.7, display: 'flex', alignItems: 'center', justifyContent: 'center' } },
                    h( 'div', { style: { width: '50px', aspectRatio: '2/3', background: '#C8B4D4', borderRadius: '3px', opacity: 0.9 } } )
                ),
                h( 'div', { style: { display: 'flex', gap: '5px' } },
                    [ '#C8B4D4', '#4AABB8', '#9AABBA', '#E0D8C8' ].map( function( c, i ) {
                        return h( 'div', { key: i, style: { background: c, flex: 1, aspectRatio: '2/3', borderRadius: '2px', opacity: 0.75 } } );
                    })
                )
            );
        },
    };

    function CatalogPreview( props ) {
        var layout  = props.layout || 'grid';
        var builder = LAYOUT_MOCKUPS[ layout ] || LAYOUT_MOCKUPS.grid;
        return h( 'div', { className: 'mbs-wizard-crossfade', key: layout },
            builder()
        );
    }

    P.BrowserMock    = BrowserMock;
    P.BookPreview    = BookPreview;
    P.CatalogPreview = CatalogPreview;

})( window.wp );
